Delta

<script setup lang="ts">import { computed, ref } from 'vue'import { UiChartCard, UiDelta, UiAreaChart, UiRadioGroup, UiRadio, useUiT } from 'grani' const { n } = useUiT() const eur = (v: number) => n(v, { style: 'currency', currency: 'EUR', maximumFractionDigits: 0 }) const MONTHS = [  '2025-10',  '2025-11',  '2025-12',  '2026-01',  '2026-02',  '2026-03',  '2026-04',  '2026-05',  '2026-06',  '2026-07',  '2026-08',  '2026-09',] const BEFORE = [3420, 3610, 4280, 3180, 3050, 3390, 3520, 3710, 3460, 3890, 4020] // Spending: lower is better, so a fall is success and a rise danger (`invert`).const SEPTEMBER = { fell: 3640, rose: 4380, flat: 4021, first: 3640 } as const const state = ref<keyof typeof SEPTEMBER>('fell') const current = computed(() => SEPTEMBER[state.value]) const previous = computed(() => (state.value === 'first' ? null : BEFORE[10]!)) const series = computed(() => [  { key: 'spent', label: 'Spent', values: [...BEFORE, current.value], variant: 'line' as const },])</script> <template>  <div class="flex w-full flex-col items-center gap-4">    <UiChartCard      title="Spending"      :value="current"      caption="in September"      :format="eur"      class="w-full max-w-lg"    >      <template #actions>        <UiDelta :current="current" :previous="previous" invert label="vs August" />      </template>      <UiAreaChart        :x="MONTHS"        :series="series"        :format="eur"        :y-axis="false"        :legend="false"        :height="140"        ariaLabel="Spending by month"      />    </UiChartCard>    <UiRadioGroup v-model="state" variant="segmented" aria-label="September against August">      <UiRadio value="fell">Less</UiRadio>      <UiRadio value="rose">More</UiRadio>      <UiRadio value="flat">No change</UiRadio>      <UiRadio value="first">Nothing to compare</UiRadio>    </UiRadioGroup>  </div></template>