From 5b0f43248a8166fcbb5c1e69c174db03c772bfba Mon Sep 17 00:00:00 2001
From: zernonia <zernonia@gmail.com>
Date: Tue, 5 Dec 2023 15:06:53 +0800
Subject: [PATCH] feat: improve generic props

---
 .../registry/default/ui/chart-area/AreaChart.vue   |  7 +++++--
 .../lib/registry/default/ui/chart-bar/BarChart.vue | 14 +++++++++-----
 .../registry/default/ui/chart-donut/DonutChart.vue |  8 ++++++--
 .../registry/default/ui/chart-line/LineChart.vue   |  7 +++++--
 .../registry/new-york/ui/chart-area/AreaChart.vue  |  7 +++++--
 .../registry/new-york/ui/chart-bar/BarChart.vue    |  7 +++++--
 .../new-york/ui/chart-donut/DonutChart.vue         |  8 ++++++--
 .../registry/new-york/ui/chart-line/LineChart.vue  |  7 +++++--
 8 files changed, 46 insertions(+), 19 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 adad26a8..9b975ef9 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
@@ -15,11 +15,11 @@ const props = withDefaults(defineProps<{
   /**
    * Select the categories from your data. Used to populate the legend and toolip.
    */
-  categories: string[]
+  categories: KeyOfT[]
   /**
    * Sets the key to map the data to the axis.
    */
-  index: string
+  index: KeyOfT
   /**
    * Change the default colors.
    */
@@ -77,7 +77,10 @@ const props = withDefaults(defineProps<{
   showGradiant: true,
 })
 
+type KeyOfT = Extract<keyof T, string>
 type Data = typeof props.data[number]
+
+const index = computed(() => props.index as KeyOfT)
 const colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))
 
 const legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({
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 eae765d4..2439cbcc 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
@@ -15,11 +15,11 @@ const props = withDefaults(defineProps<{
   /**
    * Select the categories from your data. Used to populate the legend and toolip.
    */
-  categories: string[]
+  categories: Array<KeyOfT>
   /**
    * Sets the key to map the data to the axis.
    */
-  index: string
+  index: KeyOfT
   /**
    * Change the default colors.
    */
@@ -77,6 +77,10 @@ const props = withDefaults(defineProps<{
   showGridLine: true,
 })
 
+type KeyOfT = Extract<keyof T, string>
+type Data = typeof props.data[number]
+
+const index = computed(() => props.index as KeyOfT)
 const colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))
 const legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({
   name: category,
@@ -102,14 +106,14 @@ const selectorsBar = computed(() => props.type === 'grouped' ? GroupedBar.select
       <ChartCrosshair v-if="showTooltip" :colors="colors" :items="legendItems" :index="index" />
 
       <VisBarComponent
-        :x="(d: T, i: number) => i"
-        :y="categories.map(category => (d: T) => d[category]) "
+        :x="(d: Data, i: number) => i"
+        :y="categories.map(category => (d: Data) => d[category]) "
         :color="colors"
         :rounded-corners="4"
         :bar-padding="0.1"
         :attributes="{
           [selectorsBar]: {
-            opacity: (d: T, i:number) => {
+            opacity: (d: Data, i:number) => {
               const pos = i % categories.length
               return legendItems[pos]?.inactive ? filterOpacity : 1
             },
diff --git a/apps/www/src/lib/registry/default/ui/chart-donut/DonutChart.vue b/apps/www/src/lib/registry/default/ui/chart-donut/DonutChart.vue
index ed0aeb23..5107e461 100644
--- a/apps/www/src/lib/registry/default/ui/chart-donut/DonutChart.vue
+++ b/apps/www/src/lib/registry/default/ui/chart-donut/DonutChart.vue
@@ -14,11 +14,11 @@ const props = withDefaults(defineProps<{
   /**
    * Sets the key to map the data to the chart.
    */
-  index: string
+  index: KeyOfT
   /**
    * Sets the name of the key containing the quantitative chart values.
    */
-  category: string
+  category: KeyOfT
   /**
    * Change the default colors.
    */
@@ -60,8 +60,12 @@ const props = withDefaults(defineProps<{
   showLegend: true,
 })
 
+type KeyOfT = Extract<keyof T, string>
 type Data = typeof props.data[number]
 
+const category = computed(() => props.category as KeyOfT)
+const index = computed(() => props.index as KeyOfT)
+
 const isMounted = useMounted()
 const activeSegmentKey = ref<string>()
 const colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.data.filter(d => d[props.category]).filter(Boolean).length))
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 25e5f622..4241b809 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
@@ -15,11 +15,11 @@ const props = withDefaults(defineProps<{
   /**
    * Select the categories from your data. Used to populate the legend and toolip.
    */
-  categories: string[]
+  categories: KeyOfT[]
   /**
    * Sets the key to map the data to the axis.
    */
-  index: string
+  index: KeyOfT
   /**
    * Change the default colors.
    */
@@ -71,7 +71,10 @@ const props = withDefaults(defineProps<{
   showGridLine: true,
 })
 
+type KeyOfT = Extract<keyof T, string>
 type Data = typeof props.data[number]
+
+const index = computed(() => props.index as KeyOfT)
 const colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))
 
 const legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({
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 99bf375d..4510170a 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
@@ -15,11 +15,11 @@ const props = withDefaults(defineProps<{
   /**
    * Select the categories from your data. Used to populate the legend and toolip.
    */
-  categories: string[]
+  categories: KeyOfT[]
   /**
    * Sets the key to map the data to the axis.
    */
-  index: string
+  index: KeyOfT
   /**
    * Change the default colors.
    */
@@ -77,7 +77,10 @@ const props = withDefaults(defineProps<{
   showGradiant: true,
 })
 
+type KeyOfT = Extract<keyof T, string>
 type Data = typeof props.data[number]
+
+const index = computed(() => props.index as KeyOfT)
 const colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))
 
 const legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({
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 022a1c09..c4b00f49 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
@@ -15,11 +15,11 @@ const props = withDefaults(defineProps<{
   /**
    * Select the categories from your data. Used to populate the legend and toolip.
    */
-  categories: string[]
+  categories: Array<KeyOfT>
   /**
    * Sets the key to map the data to the axis.
    */
-  index: string
+  index: KeyOfT
   /**
    * Change the default colors.
    */
@@ -77,7 +77,10 @@ const props = withDefaults(defineProps<{
   showGridLine: true,
 })
 
+type KeyOfT = Extract<keyof T, string>
 type Data = typeof props.data[number]
+
+const index = computed(() => props.index as KeyOfT)
 const colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))
 const legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({
   name: category,
diff --git a/apps/www/src/lib/registry/new-york/ui/chart-donut/DonutChart.vue b/apps/www/src/lib/registry/new-york/ui/chart-donut/DonutChart.vue
index 7ef1f8ab..24b0a1f3 100644
--- a/apps/www/src/lib/registry/new-york/ui/chart-donut/DonutChart.vue
+++ b/apps/www/src/lib/registry/new-york/ui/chart-donut/DonutChart.vue
@@ -14,11 +14,11 @@ const props = withDefaults(defineProps<{
   /**
    * Sets the key to map the data to the chart.
    */
-  index: string
+  index: KeyOfT
   /**
    * Sets the name of the key containing the quantitative chart values.
    */
-  category: string
+  category: KeyOfT
   /**
    * Change the default colors.
    */
@@ -60,8 +60,12 @@ const props = withDefaults(defineProps<{
   showLegend: true,
 })
 
+type KeyOfT = Extract<keyof T, string>
 type Data = typeof props.data[number]
 
+const category = computed(() => props.category as KeyOfT)
+const index = computed(() => props.index as KeyOfT)
+
 const isMounted = useMounted()
 const activeSegmentKey = ref<string>()
 const colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.data.filter(d => d[props.category]).filter(Boolean).length))
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 460a05b2..e32ea835 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
@@ -15,11 +15,11 @@ const props = withDefaults(defineProps<{
   /**
    * Select the categories from your data. Used to populate the legend and toolip.
    */
-  categories: string[]
+  categories: KeyOfT[]
   /**
    * Sets the key to map the data to the axis.
    */
-  index: string
+  index: KeyOfT
   /**
    * Change the default colors.
    */
@@ -71,7 +71,10 @@ const props = withDefaults(defineProps<{
   showGridLine: true,
 })
 
+type KeyOfT = Extract<keyof T, string>
 type Data = typeof props.data[number]
+
+const index = computed(() => props.index as KeyOfT)
 const colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))
 
 const legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({