Line chart

<script setup>
import '@getdom/studio/style.css';
import { ref } from 'vue';
import { DomLineChart } from '@getdom/studio';
const rows = [
	{ month: 'Apr', revenue: 18200, target: 22000, subscriptions: 12400, services: 5800 },
	{ month: 'May', revenue: 22400, target: 22000, subscriptions: 14600, services: 7800 },
	{ month: 'Jun', revenue: 19800, target: 22000, subscriptions: 13800, services: 6000 },
	{ month: 'Jul', revenue: 26800, target: 22000, subscriptions: 18400, services: 8400 },
	{ month: 'Aug', revenue: 24300, target: 22000, subscriptions: 17500, services: 6800 },
	{ month: 'Sep', revenue: 31200, target: 22000, subscriptions: 21600, services: 9600 },
];
const selected = ref(null);
const series = [{ key: 'revenue', label: 'Revenue', color: 'chart-1' }, { key: 'target', label: 'Monthly target', color: 'muted-fg', dashed: true }];
</script>
<template>
	<div class="w-full">
		<DomLineChart title="Revenue against target" description="April–September 2026 · GBP" :rows="rows" x-key="month" :series="series" format="currency" @select="selected = $event.row" />
		<p v-if="selected" class="mt-3 text-xs text-muted-fg">Selected reporting month: {{ selected.month }}</p>
	</div>
</template>

<script setup>
import '@getdom/studio/style.css';
import { ref, computed } from 'vue';
import { DomLineChart, DomNativeSelect } from '@getdom/studio';
const state = ref('ready');
const options = [{ value: 'ready', label: 'Missing readings and zero' }, { value: 'loading', label: 'Loading' }, { value: 'empty', label: 'Empty' }, { value: 'error', label: 'Error' }, { value: 'single', label: 'Single point' }];
const measurements = [{ day: 'Mon', count: 12 }, { day: 'Tue', count: 0 }, { day: 'Wed', count: null }, { day: 'Thu', count: 18 }, { day: 'Fri', count: 9 }];
/** Selects a data shape without modifying the original records. */
const rows = computed(() => state.value === 'empty' ? [] : state.value === 'single' ? measurements.slice(0, 1) : measurements);
</script>
<template>
	<div class="w-full space-y-5">
		<DomNativeSelect v-model="state" label="Example state" :options="options" class="max-w-xs" />
		<DomLineChart title="Daily signups" description="Zero signups on Tuesday; Wednesday has no measurement." :rows="rows" x-key="day" :series="[{ key: 'count', label: 'Signups', color: 'chart-2' }]" :loading="state === 'loading'" :error="state === 'error' ? 'The reporting service is unavailable.' : ''" @retry="state = 'ready'" />
	</div>
</template>