feat(dashboard): add NumberFlow component and Chart

Author: dianprata

components/Overview.vue renamed to components/dashboard/Overview.vue

@@ -113,7 +113,7 @@ function handleLegendItemClick(d: BulletLegendItemInterface, i: number) {
         :tick-format="xFormatter ?? ((v: number) => data[v]?.[index])"
         :grid-line="false"
         :tick-line="false"
-        tick-text-color="hsl(var(--vis-text-color))"
+        tick-text-color="hsl(var(--muted-foreground))"
       />
       <VisAxis
         v-if="showYAxis"
@@ -127,7 +127,7 @@ function handleLegendItemClick(d: BulletLegendItemInterface, i: number) {
             class: 'text-muted',
           },
         }"
-        tick-text-color="hsl(var(--vis-text-color))"
+        tick-text-color="hsl(var(--muted-foreground))"
       />
 
       <slot />

components/ui/chart-area/AreaChart.vue

@@ -92,7 +92,7 @@ const selectorsBar = computed(() => props.type === 'grouped' ? GroupedBar.select
         :tick-format="xFormatter ?? ((v: number) => data[v]?.[index])"
         :grid-line="false"
         :tick-line="false"
-        tick-text-color="hsl(var(--vis-text-color))"
+        tick-text-color="hsl(var(--muted-foreground))"
       />
       <VisAxis
         v-if="showYAxis"
@@ -106,7 +106,7 @@ const selectorsBar = computed(() => props.type === 'grouped' ? GroupedBar.select
             class: 'text-muted',
           },
         }"
-        tick-text-color="hsl(var(--vis-text-color))"
+        tick-text-color="hsl(var(--muted-foreground))"
       />
 
       <slot />

components/ui/chart-bar/BarChart.vue

@@ -82,7 +82,7 @@ function handleLegendItemClick(d: BulletLegendItemInterface, i: number) {
         :tick-format="xFormatter ?? ((v: number) => data[v]?.[index])"
         :grid-line="false"
         :tick-line="false"
-        tick-text-color="hsl(var(--vis-text-color))"
+        tick-text-color="hsl(var(--muted-foreground))"
       />
       <VisAxis
         v-if="showYAxis"
@@ -96,7 +96,7 @@ function handleLegendItemClick(d: BulletLegendItemInterface, i: number) {
             class: 'text-muted',
           },
         }"
-        tick-text-color="hsl(var(--vis-text-color))"
+        tick-text-color="hsl(var(--muted-foreground))"
       />
 
       <slot />

components/ui/chart-line/LineChart.vue

@@ -10,7 +10,7 @@ export function defaultColors(count: number = 3) {
   const primaryCount = quotient + remainder
   const secondaryCount = quotient
   return [
-    ...Array.from(Array.from({ length: primaryCount }).keys()).map(i => `hsl(var(--vis-primary-color) / ${1 - (1 / primaryCount) * i})`),
+    ...Array.from(Array.from({ length: primaryCount }).keys()).map(i => `hsl(var(--primary) / ${1 - (1 / primaryCount) * i})`),
     ...Array.from(Array.from({ length: secondaryCount }).keys()).map(i => `hsl(var(--vis-secondary-color) / ${1 - (1 / secondaryCount) * i})`),
   ]
 }

components/ui/chart/index.ts

@@ -45,6 +45,7 @@
   },
   "dependencies": {
     "@internationalized/date": "^3.6.0",
+    "@number-flow/vue": "^0.4.3",
     "@tanstack/vue-table": "^8.20.5",
     "@unovis/ts": "^1.5.0",
     "@unovis/vue": "^1.5.0",