From e356b25d13c6957953ccb4071d69ea05ad0bdb92 Mon Sep 17 00:00:00 2001
From: zernonia <zernonia@gmail.com>
Date: Mon, 15 Apr 2024 00:31:14 +0800
Subject: [PATCH] chore: fix type, import missing error

---
 .../.vitepress/theme/components/MobileNav.vue |   1 +
 .../theme/components/ThemePopover.vue         | 109 +------
 apps/www/package.json                         |   1 +
 .../default/example/AreaChartDemo.vue         |   4 +-
 .../registry/default/example/BarChartDemo.vue |   4 +-
 .../default/example/LineChartDemo.vue         | 273 +++++++++++++++++-
 .../default/ui/chart-bar/BarChart.vue         |   6 +-
 .../default/ui/chart-line/LineChart.vue       |   6 +-
 .../default/ui/chart/ChartCrosshair.vue       |   2 +-
 .../new-york/example/AreaChartDemo.vue        |   4 +-
 .../new-york/example/BarChartDemo.vue         |   4 +-
 .../new-york/example/LineChartDemo.vue        |   4 +-
 .../new-york/ui/chart-bar/BarChart.vue        |   6 +-
 .../new-york/ui/chart-line/LineChart.vue      |   6 +-
 pnpm-lock.yaml                                |   9 +
 15 files changed, 309 insertions(+), 130 deletions(-)

diff --git a/apps/www/.vitepress/theme/components/MobileNav.vue b/apps/www/.vitepress/theme/components/MobileNav.vue
index 5872ed56..1d1c1819 100644
--- a/apps/www/.vitepress/theme/components/MobileNav.vue
+++ b/apps/www/.vitepress/theme/components/MobileNav.vue
@@ -5,6 +5,7 @@ import Logo from './Logo.vue'
 import { Sheet, SheetContent, SheetTrigger } from '@/lib/registry/default/ui/sheet'
 import { Button } from '@/lib/registry/default/ui/button'
 import { ScrollArea } from '@/lib/registry/default/ui/scroll-area'
+import { Badge } from '@/lib/registry/new-york/ui/badge'
 
 const open = ref(false)
 </script>
diff --git a/apps/www/.vitepress/theme/components/ThemePopover.vue b/apps/www/.vitepress/theme/components/ThemePopover.vue
index 91c9a1e5..d862ec98 100644
--- a/apps/www/.vitepress/theme/components/ThemePopover.vue
+++ b/apps/www/.vitepress/theme/components/ThemePopover.vue
@@ -1,21 +1,13 @@
 <script setup lang="ts">
-import { onMounted, watch } from 'vue'
 import { Paintbrush } from 'lucide-vue-next'
-import { useData } from 'vitepress'
+import { onMounted, watch } from 'vue'
 import { allColors } from './theming/utils/data'
-import { RADII, useConfigStore } from '@/stores/config'
-import { colors } from '@/lib/registry'
+import ThemeCustomizer from './ThemeCustomizer.vue'
 import { Button } from '@/lib/registry/new-york/ui/button'
-import { Label } from '@/lib/registry/new-york/ui/label'
 import { Popover, PopoverContent, PopoverTrigger } from '@/lib/registry/new-york/ui/popover'
-import RadixIconsCheck from '~icons/radix-icons/check'
-import RadixIconsSun from '~icons/radix-icons/sun'
-import RadixIconsMoon from '~icons/radix-icons/moon'
+import { useConfigStore } from '@/stores/config'
 
-defineProps<{ title?: string }>()
-
-const { theme, radius, setRadius, setTheme } = useConfigStore()
-const { isDark } = useData()
+const { theme, radius } = useConfigStore()
 
 // Whenever the component is mounted, update the document class list
 onMounted(() => {
@@ -40,97 +32,16 @@ watch(radius, (radius) => {
 <template>
   <Popover>
     <PopoverTrigger as-child>
-      <Button variant="outline" class="h-9 rounded-[0.5rem]">
+      <Button
+        class="w-9 h-9"
+        :variant="'ghost'"
+        :size="'icon'"
+      >
         <Paintbrush class="w-4 h-4" />
-        <span v-if="title" class="ml-2">{{ title }}</span>
       </Button>
     </PopoverTrigger>
     <PopoverContent :side-offset="8" align="end" class="w-96">
-      <div class="p-4">
-        <div class="grid space-y-1">
-          <h1 class="text-md text-foreground font-semibold">
-            Customize
-          </h1>
-          <p class="text-xs text-muted-foreground">
-            Pick a style and color for your components.
-          </p>
-        </div>
-        <div class="space-y-1.5 pt-6">
-          <Label for="color" class="text-xs"> Color </Label>
-          <div class="grid grid-cols-3 gap-2 py-1.5">
-            <Button
-              v-for="(color, index) in allColors"
-              :key="index"
-              variant="outline"
-              class="h-8 justify-start px-3"
-              :class="
-                color === theme
-                  ? 'border-foreground border-2'
-                  : ''
-              "
-              @click="setTheme(color)"
-            >
-              <span
-                class="h-5 w-5 rounded-full flex items-center justify-center"
-                :style="{ backgroundColor: colors[color][7].rgb }"
-              >
-                <RadixIconsCheck
-                  v-if="color === theme"
-                  class="h-3 w-3 text-white"
-                />
-              </span>
-              <span class="ml-2 text-xs capitalize">
-                {{ color }}
-              </span>
-            </Button>
-          </div>
-        </div>
-        <div class="space-y-1.5 pt-6">
-          <Label for="radius" class="text-xs"> Radius </Label>
-          <div class="grid grid-cols-5 gap-2 py-1.5">
-            <Button
-              v-for="(r, index) in RADII"
-              :key="index"
-              variant="outline"
-              class="h-8 justify-center px-3"
-              :class="
-                r === radius
-                  ? 'border-foreground border-2'
-                  : ''
-              "
-              @click="setRadius(r)"
-            >
-              <span class="text-xs">
-                {{ r }}
-              </span>
-            </Button>
-          </div>
-        </div>
-        <div class="space-y-1.5 pt-6">
-          <Label for="theme" class="text-xs"> Theme </Label>
-
-          <div class="flex space-x-2 py-1.5">
-            <Button
-              class="h-8"
-              variant="outline"
-              :class="{ 'border-2 border-foreground': !isDark }"
-              @click="isDark = false"
-            >
-              <RadixIconsSun class="w-4 h-4 mr-2" />
-              <span class="text-xs">Light</span>
-            </Button>
-            <Button
-              class="h-8"
-              variant="outline"
-              :class="{ 'border-2 border-foreground': isDark }"
-              @click="isDark = true"
-            >
-              <RadixIconsMoon class="w-4 h-4 mr-2" />
-              <span class="text-xs">Dark</span>
-            </Button>
-          </div>
-        </div>
-      </div>
+      <ThemeCustomizer :all-colors="allColors" />
     </PopoverContent>
   </Popover>
 </template>
diff --git a/apps/www/package.json b/apps/www/package.json
index d72e725e..7ebc11fb 100644
--- a/apps/www/package.json
+++ b/apps/www/package.json
@@ -47,6 +47,7 @@
     "@iconify-json/lucide": "^1.1.180",
     "@iconify-json/ph": "^1.1.12",
     "@iconify-json/radix-icons": "^1.1.14",
+    "@iconify-json/ri": "^1.1.18",
     "@iconify-json/simple-icons": "^1.1.94",
     "@iconify-json/tabler": "^1.1.106",
     "@iconify/vue": "^4.1.1",
diff --git a/apps/www/src/lib/registry/default/example/AreaChartDemo.vue b/apps/www/src/lib/registry/default/example/AreaChartDemo.vue
index 433a447f..2b37bd5a 100644
--- a/apps/www/src/lib/registry/default/example/AreaChartDemo.vue
+++ b/apps/www/src/lib/registry/default/example/AreaChartDemo.vue
@@ -10,10 +10,8 @@ const data = [
   { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
   { name: 'Jul', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
 ]
-
-const categories = ['total', 'predicted']
 </script>
 
 <template>
-  <AreaChart :data="data" index="name" :categories="categories" />
+  <AreaChart :data="data" index="name" :categories="['total', 'predicted']" />
 </template>
diff --git a/apps/www/src/lib/registry/default/example/BarChartDemo.vue b/apps/www/src/lib/registry/default/example/BarChartDemo.vue
index d63d78c7..7fae02ac 100644
--- a/apps/www/src/lib/registry/default/example/BarChartDemo.vue
+++ b/apps/www/src/lib/registry/default/example/BarChartDemo.vue
@@ -10,15 +10,13 @@ const data = [
   { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
   { name: 'Jul', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
 ]
-
-const categories = ['total', 'predicted']
 </script>
 
 <template>
   <BarChart
     :data="data"
     index="name"
-    :categories="categories"
+    :categories="['total', 'predicted']"
     :y-formatter="(tick, i) => {
       return typeof tick === 'number'
         ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}`
diff --git a/apps/www/src/lib/registry/default/example/LineChartDemo.vue b/apps/www/src/lib/registry/default/example/LineChartDemo.vue
index fb464240..f5a2714b 100644
--- a/apps/www/src/lib/registry/default/example/LineChartDemo.vue
+++ b/apps/www/src/lib/registry/default/example/LineChartDemo.vue
@@ -2,23 +2,274 @@
 import { LineChart } from '@/lib/registry/default/ui/chart-line'
 
 const data = [
-  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500 },
-  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500 },
-  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500 },
-  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500 },
-  { name: 'May', total: Math.floor(Math.random() * 2000) + 500 },
-  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500 },
-  { name: 'Jul', total: Math.floor(Math.random() * 2000) + 500 },
+  {
+    'year': 1970,
+    'Export Growth Rate': 2.04,
+    'Import Growth Rate': 1.53,
+  },
+  {
+    'year': 1971,
+    'Export Growth Rate': 1.96,
+    'Import Growth Rate': 1.58,
+  },
+  {
+    'year': 1972,
+    'Export Growth Rate': 1.96,
+    'Import Growth Rate': 1.61,
+  },
+  {
+    'year': 1973,
+    'Export Growth Rate': 1.93,
+    'Import Growth Rate': 1.61,
+  },
+  {
+    'year': 1974,
+    'Export Growth Rate': 1.88,
+    'Import Growth Rate': 1.67,
+  },
+  {
+    'year': 1975,
+    'Export Growth Rate': 1.79,
+    'Import Growth Rate': 1.64,
+  },
+  {
+    'year': 1976,
+    'Export Growth Rate': 1.77,
+    'Import Growth Rate': 1.62,
+  },
+  {
+    'year': 1977,
+    'Export Growth Rate': 1.74,
+    'Import Growth Rate': 1.69,
+  },
+  {
+    'year': 1978,
+    'Export Growth Rate': 1.74,
+    'Import Growth Rate': 1.7,
+  },
+  {
+    'year': 1979,
+    'Export Growth Rate': 1.77,
+    'Import Growth Rate': 1.67,
+  },
+  {
+    'year': 1980,
+    'Export Growth Rate': 1.79,
+    'Import Growth Rate': 1.7,
+  },
+  {
+    'year': 1981,
+    'Export Growth Rate': 1.81,
+    'Import Growth Rate': 1.72,
+  },
+  {
+    'year': 1982,
+    'Export Growth Rate': 1.84,
+    'Import Growth Rate': 1.73,
+  },
+  {
+    'year': 1983,
+    'Export Growth Rate': 1.77,
+    'Import Growth Rate': 1.73,
+  },
+  {
+    'year': 1984,
+    'Export Growth Rate': 1.78,
+    'Import Growth Rate': 1.78,
+  },
+  {
+    'year': 1985,
+    'Export Growth Rate': 1.78,
+    'Import Growth Rate': 1.81,
+  },
+  {
+    'year': 1986,
+    'Export Growth Rate': 1.82,
+    'Import Growth Rate': 1.89,
+  },
+  {
+    'year': 1987,
+    'Export Growth Rate': 1.82,
+    'Import Growth Rate': 1.91,
+  },
+  {
+    'year': 1988,
+    'Export Growth Rate': 1.77,
+    'Import Growth Rate': 1.94,
+  },
+  {
+    'year': 1989,
+    'Export Growth Rate': 1.76,
+    'Import Growth Rate': 1.94,
+  },
+  {
+    'year': 1990,
+    'Export Growth Rate': 1.75,
+    'Import Growth Rate': 1.97,
+  },
+  {
+    'year': 1991,
+    'Export Growth Rate': 1.62,
+    'Import Growth Rate': 1.99,
+  },
+  {
+    'year': 1992,
+    'Export Growth Rate': 1.56,
+    'Import Growth Rate': 2.12,
+  },
+  {
+    'year': 1993,
+    'Export Growth Rate': 1.5,
+    'Import Growth Rate': 2.13,
+  },
+  {
+    'year': 1994,
+    'Export Growth Rate': 1.46,
+    'Import Growth Rate': 2.15,
+  },
+  {
+    'year': 1995,
+    'Export Growth Rate': 1.43,
+    'Import Growth Rate': 2.17,
+  },
+  {
+    'year': 1996,
+    'Export Growth Rate': 1.4,
+    'Import Growth Rate': 2.2,
+  },
+  {
+    'year': 1997,
+    'Export Growth Rate': 1.37,
+    'Import Growth Rate': 2.15,
+  },
+  {
+    'year': 1998,
+    'Export Growth Rate': 1.34,
+    'Import Growth Rate': 2.07,
+  },
+  {
+    'year': 1999,
+    'Export Growth Rate': 1.32,
+    'Import Growth Rate': 2.05,
+  },
+  {
+    'year': 2000,
+    'Export Growth Rate': 1.33,
+    'Import Growth Rate': 2.07,
+  },
+  {
+    'year': 2001,
+    'Export Growth Rate': 1.31,
+    'Import Growth Rate': 2.08,
+  },
+  {
+    'year': 2002,
+    'Export Growth Rate': 1.29,
+    'Import Growth Rate': 2.1,
+  },
+  {
+    'year': 2003,
+    'Export Growth Rate': 1.27,
+    'Import Growth Rate': 2.15,
+  },
+  {
+    'year': 2004,
+    'Export Growth Rate': 1.27,
+    'Import Growth Rate': 2.21,
+  },
+  {
+    'year': 2005,
+    'Export Growth Rate': 1.26,
+    'Import Growth Rate': 2.23,
+  },
+  {
+    'year': 2006,
+    'Export Growth Rate': 1.26,
+    'Import Growth Rate': 2.29,
+  },
+  {
+    'year': 2007,
+    'Export Growth Rate': 1.27,
+    'Import Growth Rate': 2.34,
+  },
+  {
+    'year': 2008,
+    'Export Growth Rate': 1.26,
+    'Import Growth Rate': 2.36,
+  },
+  {
+    'year': 2009,
+    'Export Growth Rate': 1.26,
+    'Import Growth Rate': 2.36,
+  },
+  {
+    'year': 2010,
+    'Export Growth Rate': 1.25,
+    'Import Growth Rate': 2.35,
+  },
+  {
+    'year': 2011,
+    'Export Growth Rate': 1.24,
+    'Import Growth Rate': 2.34,
+  },
+  {
+    'year': 2012,
+    'Export Growth Rate': 1.25,
+    'Import Growth Rate': 2.39,
+  },
+  {
+    'year': 2013,
+    'Export Growth Rate': 1.22,
+    'Import Growth Rate': 2.3,
+  },
+  {
+    'year': 2014,
+    'Export Growth Rate': 1.2,
+    'Import Growth Rate': 2.35,
+  },
+  {
+    'year': 2015,
+    'Export Growth Rate': 1.17,
+    'Import Growth Rate': 2.39,
+  },
+  {
+    'year': 2016,
+    'Export Growth Rate': 1.16,
+    'Import Growth Rate': 2.41,
+  },
+  {
+    'year': 2017,
+    'Export Growth Rate': 1.13,
+    'Import Growth Rate': 2.44,
+  },
+  {
+    'year': 2018,
+    'Export Growth Rate': 1.07,
+    'Import Growth Rate': 2.45,
+  },
+  {
+    'year': 2019,
+    'Export Growth Rate': 1.03,
+    'Import Growth Rate': 2.47,
+  },
+  {
+    'year': 2020,
+    'Export Growth Rate': 0.92,
+    'Import Growth Rate': 2.48,
+  },
+  {
+    'year': 2021,
+    'Export Growth Rate': 0.82,
+    'Import Growth Rate': 2.51,
+  },
 ]
-
-const categories = ['total']
 </script>
 
 <template>
   <LineChart
     :data="data"
-    index="name"
-    :categories="categories"
+    index="year"
+    :categories="['Export Growth Rate', 'Import Growth Rate']"
     :y-formatter="(tick, i) => {
       return typeof tick === 'number'
         ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}`
diff --git a/apps/www/src/lib/registry/default/ui/chart-bar/BarChart.vue b/apps/www/src/lib/registry/default/ui/chart-bar/BarChart.vue
index 2439cbcc..3fd4abd8 100644
--- a/apps/www/src/lib/registry/default/ui/chart-bar/BarChart.vue
+++ b/apps/www/src/lib/registry/default/ui/chart-bar/BarChart.vue
@@ -77,6 +77,10 @@ const props = withDefaults(defineProps<{
   showGridLine: true,
 })
 
+const emits = defineEmits<{
+  legendItemClick: [d: BulletLegendItemInterface, i: number]
+}>()
+
 type KeyOfT = Extract<keyof T, string>
 type Data = typeof props.data[number]
 
@@ -91,7 +95,7 @@ const legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((categ
 const isMounted = useMounted()
 
 function handleLegendItemClick(d: BulletLegendItemInterface, i: number) {
-  // do something when clicked on legend
+  emits('legendItemClick', d, i)
 }
 
 const VisBarComponent = computed(() => props.type === 'grouped' ? VisGroupedBar : VisStackedBar)
diff --git a/apps/www/src/lib/registry/default/ui/chart-line/LineChart.vue b/apps/www/src/lib/registry/default/ui/chart-line/LineChart.vue
index 4241b809..9ceda215 100644
--- a/apps/www/src/lib/registry/default/ui/chart-line/LineChart.vue
+++ b/apps/www/src/lib/registry/default/ui/chart-line/LineChart.vue
@@ -71,6 +71,10 @@ const props = withDefaults(defineProps<{
   showGridLine: true,
 })
 
+const emits = defineEmits<{
+  legendItemClick: [d: BulletLegendItemInterface, i: number]
+}>()
+
 type KeyOfT = Extract<keyof T, string>
 type Data = typeof props.data[number]
 
@@ -86,7 +90,7 @@ const legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((categ
 const isMounted = useMounted()
 
 function handleLegendItemClick(d: BulletLegendItemInterface, i: number) {
-  // do something when clicked on legend
+  emits('legendItemClick', d, i)
 }
 </script>
 
diff --git a/apps/www/src/lib/registry/default/ui/chart/ChartCrosshair.vue b/apps/www/src/lib/registry/default/ui/chart/ChartCrosshair.vue
index a1aa6630..eda316aa 100644
--- a/apps/www/src/lib/registry/default/ui/chart/ChartCrosshair.vue
+++ b/apps/www/src/lib/registry/default/ui/chart/ChartCrosshair.vue
@@ -3,7 +3,7 @@ import { VisCrosshair, VisTooltip } from '@unovis/vue'
 import type { BulletLegendItemInterface } from '@unovis/ts'
 import { omit } from '@unovis/ts'
 import { createApp, watch } from 'vue'
-import { ChartTooltip } from '@/lib/registry/new-york/ui/chart'
+import { ChartTooltip } from '@/lib/registry/default/ui/chart'
 
 const props = withDefaults(defineProps<{
   colors: string[]
diff --git a/apps/www/src/lib/registry/new-york/example/AreaChartDemo.vue b/apps/www/src/lib/registry/new-york/example/AreaChartDemo.vue
index 317fe0b3..105be1cb 100644
--- a/apps/www/src/lib/registry/new-york/example/AreaChartDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/AreaChartDemo.vue
@@ -10,10 +10,8 @@ const data = [
   { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
   { name: 'Jul', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
 ]
-
-const categories = ['total', 'predicted']
 </script>
 
 <template>
-  <AreaChart :data="data" index="name" :categories="categories" />
+  <AreaChart :data="data" index="name" :categories="['total', 'predicted']" />
 </template>
diff --git a/apps/www/src/lib/registry/new-york/example/BarChartDemo.vue b/apps/www/src/lib/registry/new-york/example/BarChartDemo.vue
index e0c263b3..0d68f9b3 100644
--- a/apps/www/src/lib/registry/new-york/example/BarChartDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/BarChartDemo.vue
@@ -10,15 +10,13 @@ const data = [
   { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
   { name: 'Jul', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
 ]
-
-const categories = ['total', 'predicted']
 </script>
 
 <template>
   <BarChart
     :data="data"
     index="name"
-    :categories="categories"
+    :categories="['total', 'predicted']"
     :y-formatter="(tick, i) => {
       return typeof tick === 'number'
         ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}`
diff --git a/apps/www/src/lib/registry/new-york/example/LineChartDemo.vue b/apps/www/src/lib/registry/new-york/example/LineChartDemo.vue
index 5dbe12fd..ec6fe7a7 100644
--- a/apps/www/src/lib/registry/new-york/example/LineChartDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/LineChartDemo.vue
@@ -263,15 +263,13 @@ const data = [
     'Import Growth Rate': 2.51,
   },
 ]
-
-const categories = ['Export Growth Rate', 'Import Growth Rate']
 </script>
 
 <template>
   <LineChart
     :data="data"
     index="year"
-    :categories="categories"
+    :categories="['Export Growth Rate', 'Import Growth Rate']"
     :y-formatter="(tick, i) => {
       return typeof tick === 'number'
         ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}`
diff --git a/apps/www/src/lib/registry/new-york/ui/chart-bar/BarChart.vue b/apps/www/src/lib/registry/new-york/ui/chart-bar/BarChart.vue
index c4b00f49..2bd99743 100644
--- a/apps/www/src/lib/registry/new-york/ui/chart-bar/BarChart.vue
+++ b/apps/www/src/lib/registry/new-york/ui/chart-bar/BarChart.vue
@@ -77,6 +77,10 @@ const props = withDefaults(defineProps<{
   showGridLine: true,
 })
 
+const emits = defineEmits<{
+  legendItemClick: [d: BulletLegendItemInterface, i: number]
+}>()
+
 type KeyOfT = Extract<keyof T, string>
 type Data = typeof props.data[number]
 
@@ -91,7 +95,7 @@ const legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((categ
 const isMounted = useMounted()
 
 function handleLegendItemClick(d: BulletLegendItemInterface, i: number) {
-  // do something when clicked on legend
+  emits('legendItemClick', d, i)
 }
 
 const VisBarComponent = computed(() => props.type === 'grouped' ? VisGroupedBar : VisStackedBar)
diff --git a/apps/www/src/lib/registry/new-york/ui/chart-line/LineChart.vue b/apps/www/src/lib/registry/new-york/ui/chart-line/LineChart.vue
index e32ea835..7dac4b14 100644
--- a/apps/www/src/lib/registry/new-york/ui/chart-line/LineChart.vue
+++ b/apps/www/src/lib/registry/new-york/ui/chart-line/LineChart.vue
@@ -71,6 +71,10 @@ const props = withDefaults(defineProps<{
   showGridLine: true,
 })
 
+const emits = defineEmits<{
+  legendItemClick: [d: BulletLegendItemInterface, i: number]
+}>()
+
 type KeyOfT = Extract<keyof T, string>
 type Data = typeof props.data[number]
 
@@ -86,7 +90,7 @@ const legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((categ
 const isMounted = useMounted()
 
 function handleLegendItemClick(d: BulletLegendItemInterface, i: number) {
-  // do something when clicked on legend
+  emits('legendItemClick', d, i)
 }
 </script>
 
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2eeabebe..0df7e46f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -132,6 +132,9 @@ importers:
       '@iconify-json/radix-icons':
         specifier: ^1.1.14
         version: 1.1.14
+      '@iconify-json/ri':
+        specifier: ^1.1.18
+        version: 1.1.18
       '@iconify-json/simple-icons':
         specifier: ^1.1.94
         version: 1.1.94
@@ -2218,6 +2221,12 @@ packages:
       '@iconify/types': 2.0.0
     dev: true
 
+  /@iconify-json/ri@1.1.18:
+    resolution: {integrity: sha512-/gm7OrzhX6iOklhSnhK102unCzA+5wB0OJzXPgvpMr19VOD+dkXzIxEAbGu5lhFCxgn5TJ2jJLc8DtvnZWsyrw==}
+    dependencies:
+      '@iconify/types': 2.0.0
+    dev: true
+
   /@iconify-json/simple-icons@1.1.94:
     resolution: {integrity: sha512-2UwwbEJeZ/aMpACG/dZoOhNszKFO+IjcRCbYB+lMqd+6fA5ewykRy63IP8//UdviazOPamGJ/XbNBJH/o1YFdQ==}
     dependencies: