From 9afc1f291edf2994b8c4b1c7c88c4a79a8a2b209 Mon Sep 17 00:00:00 2001 From: arvidsson-geins Date: Thu, 4 Jul 2024 08:43:19 +0200 Subject: [PATCH] fix: use of useId to generate chartRef --- apps/www/src/lib/registry/default/ui/chart-area/AreaChart.vue | 3 ++- apps/www/src/lib/registry/new-york/ui/chart-area/AreaChart.vue | 3 ++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/apps/www/src/lib/registry/default/ui/chart-area/AreaChart.vue b/apps/www/src/lib/registry/default/ui/chart-area/AreaChart.vue index a4a7c16a..577a707b 100644 --- a/apps/www/src/lib/registry/default/ui/chart-area/AreaChart.vue +++ b/apps/www/src/lib/registry/default/ui/chart-area/AreaChart.vue @@ -4,6 +4,7 @@ import { VisArea, VisAxis, VisLine, VisXYContainer } from '@unovis/vue' import { Area, Axis, Line } from '@unovis/ts' import { type Component, computed, ref } from 'vue' import { useMounted } from '@vueuse/core' +import { useId } from 'radix-vue' import type { BaseChartProps } from '.' import { ChartCrosshair, ChartLegend, defaultColors } from '@/lib/registry/default/ui/chart' import { cn } from '@/lib/utils' @@ -41,7 +42,7 @@ const emits = defineEmits<{ type KeyOfT = Extract type Data = typeof props.data[number] -const chartRef = Math.random().toString(36).substring(2, 9) +const chartRef = useId() const index = computed(() => props.index as KeyOfT) const colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length)) diff --git a/apps/www/src/lib/registry/new-york/ui/chart-area/AreaChart.vue b/apps/www/src/lib/registry/new-york/ui/chart-area/AreaChart.vue index 689a2b11..be913ef3 100644 --- a/apps/www/src/lib/registry/new-york/ui/chart-area/AreaChart.vue +++ b/apps/www/src/lib/registry/new-york/ui/chart-area/AreaChart.vue @@ -4,6 +4,7 @@ import { VisArea, VisAxis, VisLine, VisXYContainer } from '@unovis/vue' import { Area, Axis, Line } from '@unovis/ts' import { type Component, computed, ref } from 'vue' import { useMounted } from '@vueuse/core' +import { useId } from 'radix-vue' import type { BaseChartProps } from '.' import { ChartCrosshair, ChartLegend, defaultColors } from '@/lib/registry/new-york/ui/chart' import { cn } from '@/lib/utils' @@ -41,7 +42,7 @@ const emits = defineEmits<{ type KeyOfT = Extract type Data = typeof props.data[number] -const chartRef = Math.random().toString(36).substring(2, 9) +const chartRef = useId() const index = computed(() => props.index as KeyOfT) const colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))