refactor(front): remove unused chart components and streamline chart implementation for improved maintainability

front/components/About/AboutChartView.vue

@@ -1,34 +1,33 @@
 <script setup lang="ts">
-import { CurveType } from '@unovis/ts'
-import { AreaChart } from '@/components/ui/chart-area'
 import { cx } from 'class-variance-authority'
 import { useQuery } from '@tanstack/vue-query'
 import { Skeleton } from '@/components/ui/skeleton'
-import AboutChartTooltip from '@/components/AboutChartTooltip.vue'
 import dayjs from 'dayjs'
 import { times } from 'lodash-es'
+import type { ChartConfig } from '@/components/ui/chart'
+import { VisArea, VisAxis, VisLine, VisXYContainer } from '@unovis/vue'
+import { ChartContainer, ChartTooltip, ChartCrosshair, ChartLegendContent, componentToString, ChartTooltipContent } from '@/components/ui/chart'
 
 interface StatChartData {
     file_size: number
     file_num: number
     share_num: number
     download_num: number
-    date: string
+    date: Date
 }
 
 interface QueueChartData {
     processed: number
     failed: number
-    date: string
+    date: Date
 }
 
 type ChartDataItem = StatChartData | QueueChartData
 
-type ChartConfig = {
+type AreaChartConfig = {
     data: ChartDataItem[]
     index: string
-    categories: string[]
-    colors: string[]
+    config: ChartConfig
 }
 
 const { data, isLoading } = useQuery({
@@ -82,12 +81,12 @@ const chartTabs = computed(() => {
 })
 
 const currentChartTab = ref<'storage' | 'queue' | 'share' | 'download'>('storage')
-const currentChartData = computed((): ChartConfig => {
+const currentChartData = computed((): AreaChartConfig => {
     const { storage, queue } = data.value?.chart || {}
     if (currentChartTab.value === 'queue') {
         const queueData = times(30, (i) => {
             return {
-                date: dayjs().subtract(i, 'day').format('YYYY-MM-DD'),
+                date: dayjs().subtract(i, 'day').toDate(),
                 processed: queue?.[dayjs().subtract(i, 'day').format('YYYY-MM-DD')]?.processed || 0,
                 failed: queue?.[dayjs().subtract(i, 'day').format('YYYY-MM-DD')]?.failed || 0,
             }
@@ -95,12 +94,14 @@ const currentChartData = computed((): ChartConfig => {
         return {
             data: queueData,
             index: 'date' as const,
-            categories: ['processed', 'failed'] as const,
-            colors: ['#4ade80', '#f87171'],
+            config: {
+                processed: { color: '#4ade80', label: t('page.about.processed') },
+                failed: { color: '#f87171', label: t('page.about.failed') },
+            },
         }
     }
     const storageData = times(30, (i) => {
-        const base = { date: dayjs().subtract(i, 'day').format('YYYY-MM-DD') }
+        const base = { date: dayjs().subtract(i, 'day').toDate() }
         if (currentChartTab.value === 'share') {
             return {
                 ...base,
@@ -120,25 +121,31 @@ const currentChartData = computed((): ChartConfig => {
         }
     })
 
-    let categories = ['file_size', 'file_num']
     if (currentChartTab.value === 'share') {
-        categories = ['share_num']
+        return {
+            data: storageData as ChartDataItem[],
+            index: 'date' as const,
+            config: {
+                share_num: { color: '#ea580c', label: t('page.about.share') },
+            },
+        }
     }
     if (currentChartTab.value === 'download') {
-        categories = ['download_num']
-    }
-    let colors = ['#38bdf8', '#a78bfa']
-    if (currentChartTab.value === 'share') {
-        colors = ['#ea580c']
-    }
-    if (currentChartTab.value === 'download') {
-        colors = ['#a3e635']
+        return {
+            data: storageData as ChartDataItem[],
+            index: 'date' as const,
+            config: {
+                download_num: { color: '#a3e635', label: t('page.about.download') },
+            },
+        }
     }
     return {
         data: storageData as ChartDataItem[],
         index: 'date' as const,
-        categories,
-        colors,
+        config: {
+            file_size: { color: '#38bdf8', label: t('page.about.fileSize') },
+            file_num: { color: '#a78bfa', label: t('page.about.fileNum') },
+        },
     }
 })
 </script>
@@ -167,21 +174,51 @@ const currentChartData = computed((): ChartConfig => {
                     <div class="text-lg font-semibold">{{ tab.total }}</div>
                 </div>
             </div>
-            <AreaChart
-                v-if="currentChartData"
-                class="h-64 w-full"
-                :key="currentChartTab"
-                :index="currentChartData.index"
-                :data="currentChartData.data"
-                :categories="currentChartData.categories"
-                :show-grid-line="false"
-                :show-legend="false"
-                :show-y-axis="true"
-                :show-x-axis="true"
-                :colors="currentChartData.colors"
-                :custom-tooltip="AboutChartTooltip"
-                :curve-type="CurveType.CatmullRom"
-            />
+            <ChartContainer :config="currentChartData.config" class="h-64 w-full p-5" :cursor="false">
+                <VisXYContainer :data="currentChartData.data" :x-domain="[dayjs().toDate(), dayjs().subtract(29, 'day').toDate()]">
+                    <VisArea
+                        :key="currentChartTab"
+                        :x="(d: ChartDataItem) => d.date"
+                        :y="Object.keys(currentChartData.config).map((key) => (d: ChartDataItem) => d?.[key as keyof ChartDataItem])"
+                        :color="Object.values(currentChartData.config).map((c) => c.color)"
+                        :opacity="0.6"
+                    />
+                    <VisLine
+                        :key="currentChartTab"
+                        :x="(d: ChartDataItem) => d.date"
+                        :y="Object.keys(currentChartData.config).map((key) => (d: ChartDataItem) => d?.[key as keyof ChartDataItem])"
+                        :color="Object.values(currentChartData.config).map((c) => c.color)"
+                        :line-width="1"
+                    />
+                    <VisAxis
+                        :key="currentChartTab"
+                        type="x"
+                        :tick-line="false"
+                        :domain-line="false"
+                        :grid-line="false"
+                        :num-ticks="6"
+                        :tick-format="
+                            (d: Date) => {
+                                return dayjs(d).format('MMM')
+                            }
+                        "
+                        :tick-values="currentChartData.data.map((d) => d.date)"
+                    />
+                    <ChartTooltip />
+                    <ChartCrosshair
+                        :key="currentChartTab"
+                        :template="
+                            componentToString(currentChartData.config, ChartTooltipContent, {
+                                labelFormatter: (d) => {
+                                    return dayjs(d).format('MMM D')
+                                },
+                            })
+                        "
+                        :color="(d: any, i: number) => Object.values(currentChartData.config).map((c) => c.color as string)[i]"
+                    />
+                </VisXYContainer>
+                <ChartLegendContent />
+            </ChartContainer>
         </div>
     </template>
 </template>

front/components/AboutChartTooltip.vue

@@ -1,43 +0,0 @@
-<script setup lang="ts">
-import getFileSize from '~/lib/getFileSize'
-
-const props = defineProps<{
-    data: { name: string; value: string; color: string }[]
-    title: string
-}>()
-const dataKeyMap = {
-    file_size: {
-        'zh-CN': '文件大小',
-        en: 'File Size',
-    },
-    file_num: {
-        'zh-CN': '文件数量',
-        en: 'File Num',
-    },
-    processed: {
-        'zh-CN': '处理数量',
-        en: 'Processed',
-    },
-    failed: {
-        'zh-CN': '失败数量',
-        en: 'Failed',
-    },
-}
-</script>
-
-<template>
-    <div class="rounded-md bg-white p-2 flex flex-col gap-2">
-        <div class="text-sm font-medium">{{ title }}</div>
-        <div v-for="(item, index) in data" :key="index">
-            <div class="flex flex-row items-center gap-2">
-                <div class="h-5 w-2 rounded-full" :style="{ backgroundColor: item.color ?? '#222' }"></div>
-                <div class="text-xs font-medium">
-                    {{ dataKeyMap?.[item.name as keyof typeof dataKeyMap]?.['en'] ?? item.name }}
-                </div>
-                <div class="text-sm">
-                    {{ ['file_size']?.includes(item?.name) ? getFileSize(item.value) : item.value }}
-                </div>
-            </div>
-        </div>
-    </div>
-</template>

front/components/ui/chart-area/AreaChart.vue

@@ -1,179 +0,0 @@
-<script setup lang="ts" generic="T extends Record<string, any>">
-import type { BaseChartProps } from ".";
-import { type BulletLegendItemInterface, CurveType } from "@unovis/ts";
-import { Area, Axis, Line } from "@unovis/ts";
-import { VisArea, VisAxis, VisLine, VisXYContainer } from "@unovis/vue";
-import { useMounted } from "@vueuse/core";
-import { useId } from "reka-ui";
-import { type Component, computed, ref } from "vue";
-import { cn } from "@/lib/utils";
-import { ChartCrosshair, ChartLegend, defaultColors } from "../chart";
-
-const props = withDefaults(
-  defineProps<
-    BaseChartProps<T> & {
-      /**
-       * Render custom tooltip component.
-       */
-      customTooltip?: Component;
-      /**
-       * Type of curve
-       */
-      curveType?: CurveType;
-      /**
-       * Controls the visibility of gradient.
-       * @default true
-       */
-      showGradiant?: boolean;
-    }
-  >(),
-  {
-    curveType: CurveType.MonotoneX,
-    filterOpacity: 0.2,
-    margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),
-    showXAxis: true,
-    showYAxis: true,
-    showTooltip: true,
-    showLegend: true,
-    showGridLine: true,
-    showGradiant: true,
-  },
-);
-
-const emits = defineEmits<{
-  legendItemClick: [d: BulletLegendItemInterface, i: number];
-}>();
-
-type KeyOfT = Extract<keyof T, string>;
-type Data = (typeof props.data)[number];
-
-const chartRef = useId();
-
-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,
-    color: colors.value[i],
-    inactive: false,
-  })),
-);
-
-const isMounted = useMounted();
-
-function handleLegendItemClick(d: BulletLegendItemInterface, i: number) {
-  emits("legendItemClick", d, i);
-}
-</script>
-
-<template>
-  <div
-    :class="cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')"
-  >
-    <ChartLegend
-      v-if="showLegend"
-      v-model:items="legendItems"
-      @legend-item-click="handleLegendItemClick"
-    />
-
-    <VisXYContainer
-      :style="{ height: isMounted ? '100%' : 'auto' }"
-      :margin="{ left: 20, right: 20 }"
-      :data="data"
-    >
-      <svg width="0" height="0">
-        <defs>
-          <linearGradient
-            v-for="(color, i) in colors"
-            :id="`${chartRef}-color-${i}`"
-            :key="i"
-            x1="0"
-            y1="0"
-            x2="0"
-            y2="1"
-          >
-            <template v-if="showGradiant">
-              <stop offset="5%" :stop-color="color" stop-opacity="0.4" />
-              <stop offset="95%" :stop-color="color" stop-opacity="0" />
-            </template>
-            <template v-else>
-              <stop offset="0%" :stop-color="color" />
-            </template>
-          </linearGradient>
-        </defs>
-      </svg>
-
-      <ChartCrosshair
-        v-if="showTooltip"
-        :colors="colors"
-        :items="legendItems"
-        :index="index"
-        :custom-tooltip="customTooltip"
-      />
-
-      <template v-for="(category, i) in categories" :key="category">
-        <VisArea
-          :x="(d: Data, i: number) => i"
-          :y="(d: Data) => d[category]"
-          color="auto"
-          :curve-type="curveType"
-          :attributes="{
-            [Area.selectors.area]: {
-              fill: `url(#${chartRef}-color-${i})`,
-            },
-          }"
-          :opacity="
-            legendItems.find((item) => item.name === category)?.inactive
-              ? filterOpacity
-              : 1
-          "
-        />
-      </template>
-
-      <template v-for="(category, i) in categories" :key="category">
-        <VisLine
-          :x="(d: Data, i: number) => i"
-          :y="(d: Data) => d[category]"
-          :color="colors[i]"
-          :curve-type="curveType"
-          :attributes="{
-            [Line.selectors.line]: {
-              opacity: legendItems.find((item) => item.name === category)
-                ?.inactive
-                ? filterOpacity
-                : 1,
-            },
-          }"
-        />
-      </template>
-
-      <VisAxis
-        v-if="showXAxis"
-        type="x"
-        :tick-format="xFormatter ?? ((v: number) => data[v]?.[index])"
-        :grid-line="false"
-        :tick-line="false"
-        tick-text-color="hsl(var(--vis-text-color))"
-      />
-      <VisAxis
-        v-if="showYAxis"
-        type="y"
-        :tick-line="false"
-        :tick-format="yFormatter"
-        :domain-line="false"
-        :grid-line="showGridLine"
-        :attributes="{
-          [Axis.selectors.grid]: {
-            class: 'text-muted',
-          },
-        }"
-        tick-text-color="hsl(var(--vis-text-color))"
-      />
-
-      <slot />
-    </VisXYContainer>
-  </div>
-</template>

front/components/ui/chart-area/index.ts

@@ -1,74 +0,0 @@
-export { default as AreaChart } from "./AreaChart.vue";
-
-import type { Spacing } from "@unovis/ts";
-
-type KeyOf<T extends Record<string, any>> = Extract<keyof T, string>;
-
-export interface BaseChartProps<T extends Record<string, any>> {
-  /**
-   * The source data, in which each entry is a dictionary.
-   */
-  data: T[];
-  /**
-   * Select the categories from your data. Used to populate the legend and toolip.
-   */
-  categories: KeyOf<T>[];
-  /**
-   * Sets the key to map the data to the axis.
-   */
-  index: KeyOf<T>;
-  /**
-   * Change the default colors.
-   */
-  colors?: string[];
-  /**
-   * Margin of each the container
-   */
-  margin?: Spacing;
-  /**
-   * Change the opacity of the non-selected field
-   * @default 0.2
-   */
-  filterOpacity?: number;
-  /**
-   * Function to format X label
-   */
-  xFormatter?: (
-    tick: number | Date,
-    i: number,
-    ticks: number[] | Date[],
-  ) => string;
-  /**
-   * Function to format Y label
-   */
-  yFormatter?: (
-    tick: number | Date,
-    i: number,
-    ticks: number[] | Date[],
-  ) => string;
-  /**
-   * Controls the visibility of the X axis.
-   * @default true
-   */
-  showXAxis?: boolean;
-  /**
-   * Controls the visibility of the Y axis.
-   * @default true
-   */
-  showYAxis?: boolean;
-  /**
-   * Controls the visibility of tooltip.
-   * @default true
-   */
-  showTooltip?: boolean;
-  /**
-   * Controls the visibility of legend.
-   * @default true
-   */
-  showLegend?: boolean;
-  /**
-   * Controls the visibility of gridline.
-   * @default true
-   */
-  showGridLine?: boolean;
-}

front/components/ui/chart/ChartContainer.vue

@@ -0,0 +1,61 @@
+<script lang="ts">
+import type { HTMLAttributes } from 'vue'
+import type { ChartConfig } from '.'
+import { useId } from 'reka-ui'
+import { computed, toRefs } from 'vue'
+import { cn } from '@/lib/utils'
+import { provideChartContext } from '.'
+import ChartStyle from './ChartStyle.vue'
+</script>
+
+<script setup lang="ts">
+const props = defineProps<{
+    id?: HTMLAttributes['id']
+    class?: HTMLAttributes['class']
+    config: ChartConfig
+    cursor?: boolean
+}>()
+
+defineSlots<{
+    default: {
+        id: string
+        config: ChartConfig
+    }
+}>()
+
+const { config } = toRefs(props)
+const uniqueId = useId()
+const chartId = computed(() => `chart-${props.id || uniqueId.replace(/:/g, '')}`)
+
+provideChartContext({
+    id: uniqueId,
+    config,
+})
+</script>
+
+<template>
+    <div
+        data-slot="chart"
+        :data-chart="chartId"
+        :class="
+            cn(
+                `[&_.tick_text]:!fill-muted-foreground [&_.tick_line]:!stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex flex-col aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden [&_[data-vis-xy-container]]:h-full [&_[data-vis-single-container]]:h-full h-full [&_[data-vis-xy-container]]:w-full [&_[data-vis-single-container]]:w-full w-full `,
+                props.class
+            )
+        "
+        :style="{
+            '--vis-tooltip-padding': '0px',
+            '--vis-tooltip-background-color': 'transparent',
+            '--vis-tooltip-border-color': 'transparent',
+            '--vis-tooltip-text-color': 'none',
+            '--vis-tooltip-shadow-color': 'none',
+            '--vis-tooltip-backdrop-filter': 'none',
+            '--vis-crosshair-circle-stroke-color': '#0000',
+            '--vis-crosshair-line-stroke-width': cursor ? '1px' : '0px',
+            '--vis-font-family': 'var(--font-sans)',
+        }"
+    >
+        <slot :id="uniqueId" :config="config" />
+        <ChartStyle :id="chartId" />
+    </div>
+</template>

front/components/ui/chart/ChartCrosshair.vue

@@ -1,51 +0,0 @@
-<script setup lang="ts">
-import type { BulletLegendItemInterface } from "@unovis/ts";
-import { omit } from "@unovis/ts";
-import { VisCrosshair, VisTooltip } from "@unovis/vue";
-import { type Component, createApp } from "vue";
-import { ChartTooltip } from ".";
-
-const props = withDefaults(
-  defineProps<{
-    colors: string[];
-    index: string;
-    items: BulletLegendItemInterface[];
-    customTooltip?: Component;
-  }>(),
-  {
-    colors: () => [],
-  },
-);
-
-// Use weakmap to store reference to each datapoint for Tooltip
-const wm = new WeakMap();
-function template(d: any) {
-  if (wm.has(d)) {
-    return wm.get(d);
-  } else {
-    const componentDiv = document.createElement("div");
-    const omittedData = Object.entries(omit(d, [props.index])).map(
-      ([key, value]) => {
-        const legendReference = props.items.find((i) => i.name === key);
-        return { ...legendReference, value };
-      },
-    );
-    const TooltipComponent = props.customTooltip ?? ChartTooltip;
-    createApp(TooltipComponent, {
-      title: d[props.index].toString(),
-      data: omittedData,
-    }).mount(componentDiv);
-    wm.set(d, componentDiv.innerHTML);
-    return componentDiv.innerHTML;
-  }
-}
-
-function color(d: unknown, i: number) {
-  return props.colors[i] ?? "transparent";
-}
-</script>
-
-<template>
-  <VisTooltip :horizontal-shift="20" :vertical-shift="20" />
-  <VisCrosshair :template="template" :color="color" />
-</template>

front/components/ui/chart/ChartLegend.vue

@@ -1,72 +0,0 @@
-<script setup lang="ts">
-import type { BulletLegendItemInterface } from "@unovis/ts";
-import { BulletLegend } from "@unovis/ts";
-import { VisBulletLegend } from "@unovis/vue";
-import { nextTick, onMounted, ref } from "vue";
-import { buttonVariants } from "../button";
-
-const props = withDefaults(
-  defineProps<{ items: BulletLegendItemInterface[] }>(),
-  {
-    items: () => [],
-  },
-);
-
-const emits = defineEmits<{
-  legendItemClick: [d: BulletLegendItemInterface, i: number];
-  "update:items": [payload: BulletLegendItemInterface[]];
-}>();
-
-const elRef = ref<HTMLElement>();
-
-function keepStyling() {
-  const selector = `.${BulletLegend.selectors.item}`;
-  nextTick(() => {
-    const elements = elRef.value?.querySelectorAll(selector);
-    const classes = buttonVariants({ variant: "ghost", size: "sm" }).split(" ");
-    elements?.forEach((el) =>
-      el.classList.add(...classes, "!inline-flex", "!mr-2"),
-    );
-  });
-}
-
-onMounted(() => {
-  keepStyling();
-});
-
-function onLegendItemClick(d: BulletLegendItemInterface, i: number) {
-  emits("legendItemClick", d, i);
-  const isBulletActive = !props.items[i].inactive;
-  const isFilterApplied = props.items.some((i) => i.inactive);
-  if (isFilterApplied && isBulletActive) {
-    // reset filter
-    emits(
-      "update:items",
-      props.items.map((item) => ({ ...item, inactive: false })),
-    );
-  } else {
-    // apply selection, set other item as inactive
-    emits(
-      "update:items",
-      props.items.map((item) =>
-        item.name === d.name
-          ? { ...d, inactive: false }
-          : { ...item, inactive: true },
-      ),
-    );
-  }
-  keepStyling();
-}
-</script>
-
-<template>
-  <div
-    ref="elRef"
-    class="w-max"
-    :style="{
-      '--vis-legend-bullet-size': '16px',
-    }"
-  >
-    <VisBulletLegend :items="items" :on-legend-item-click="onLegendItemClick" />
-  </div>
-</template>

front/components/ui/chart/ChartLegendContent.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { computed, onMounted, ref } from 'vue'
+import { cn } from '@/lib/utils'
+import { useChart } from '.'
+
+const props = withDefaults(
+    defineProps<{
+        hideIcon?: boolean
+        nameKey?: string
+        verticalAlign?: 'bottom' | 'top'
+        // payload?: any[]
+        class?: HTMLAttributes['class']
+    }>(),
+    {
+        verticalAlign: 'bottom',
+    }
+)
+
+const { id, config } = useChart()
+
+const payload = computed(() =>
+    Object.entries(config.value).map(([key, value]) => {
+        return {
+            key: props.nameKey || key,
+            itemConfig: config.value[key],
+        }
+    })
+)
+
+const containerSelector = ref('')
+onMounted(() => {
+    containerSelector.value = `[data-chart="chart-${id}"]>[data-vis-xy-container]`
+})
+</script>
+
+<template>
+    <div v-if="containerSelector" :class="cn('flex items-center justify-center gap-4', verticalAlign === 'top' ? 'pb-3' : 'pt-3', props.class)">
+        <div
+            v-for="{ key, itemConfig } in payload"
+            :key="key"
+            :class="cn('[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3')"
+        >
+            <component :is="itemConfig.icon" v-if="itemConfig?.icon" />
+            <div
+                v-else
+                class="h-2 w-2 shrink-0 rounded-[2px]"
+                :style="{
+                    backgroundColor: itemConfig?.color,
+                }"
+            />
+
+            {{ itemConfig?.label }}
+        </div>
+    </div>
+</template>

front/components/ui/chart/ChartSingleTooltip.vue

@@ -1,74 +0,0 @@
-<script setup lang="ts">
-import type { BulletLegendItemInterface } from "@unovis/ts";
-import { omit } from "@unovis/ts";
-import { VisTooltip } from "@unovis/vue";
-import { type Component, createApp } from "vue";
-import { ChartTooltip } from ".";
-
-const props = defineProps<{
-  selector: string;
-  index: string;
-  items?: BulletLegendItemInterface[];
-  valueFormatter?: (tick: number, i?: number, ticks?: number[]) => string;
-  customTooltip?: Component;
-}>();
-
-// Use weakmap to store reference to each datapoint for Tooltip
-const wm = new WeakMap();
-function template(d: any, i: number, elements: (HTMLElement | SVGElement)[]) {
-  const valueFormatter = props.valueFormatter ?? ((tick: number) => `${tick}`);
-  if (props.index in d) {
-    if (wm.has(d)) {
-      return wm.get(d);
-    } else {
-      const componentDiv = document.createElement("div");
-      const omittedData = Object.entries(omit(d, [props.index])).map(
-        ([key, value]) => {
-          const legendReference = props.items?.find((i) => i.name === key);
-          return { ...legendReference, value: valueFormatter(value) };
-        },
-      );
-      const TooltipComponent = props.customTooltip ?? ChartTooltip;
-      createApp(TooltipComponent, {
-        title: d[props.index],
-        data: omittedData,
-      }).mount(componentDiv);
-      wm.set(d, componentDiv.innerHTML);
-      return componentDiv.innerHTML;
-    }
-  } else {
-    const data = d.data;
-
-    if (wm.has(data)) {
-      return wm.get(data);
-    } else {
-      const style = getComputedStyle(elements[i]);
-      const omittedData = [
-        {
-          name: data.name,
-          value: valueFormatter(data[props.index]),
-          color: style.fill,
-        },
-      ];
-      const componentDiv = document.createElement("div");
-      const TooltipComponent = props.customTooltip ?? ChartTooltip;
-      createApp(TooltipComponent, {
-        title: d[props.index],
-        data: omittedData,
-      }).mount(componentDiv);
-      wm.set(d, componentDiv.innerHTML);
-      return componentDiv.innerHTML;
-    }
-  }
-}
-</script>
-
-<template>
-  <VisTooltip
-    :horizontal-shift="20"
-    :vertical-shift="20"
-    :triggers="{
-      [selector]: template,
-    }"
-  />
-</template>

front/components/ui/chart/ChartStyle.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { Primitive } from 'reka-ui'
+import { computed } from 'vue'
+import { THEMES, useChart } from '.'
+
+defineProps<{
+    id?: HTMLAttributes['id']
+}>()
+
+const { config } = useChart()
+
+const colorConfig = computed(() => {
+    return Object.entries(config.value).filter(([, config]) => config.theme || config.color)
+})
+</script>
+
+<template>
+    <Primitive v-if="colorConfig.length" as="style">
+        {{
+            Object.entries(THEMES)
+                .map(
+                    ([theme, prefix]) => `
+${prefix} [data-chart=${id}] {
+${colorConfig
+    .map(([key, itemConfig]) => {
+        const color = itemConfig.theme?.[theme as keyof typeof itemConfig.theme] || itemConfig.color
+        return color ? `  --color-${key}: ${color};` : null
+    })
+    .join('\n')}
+}
+`
+                )
+                .join('\n')
+        }}
+    </Primitive>
+</template>

front/components/ui/chart/ChartTooltip.vue

@@ -1,40 +0,0 @@
-<script setup lang="ts">
-import { Card, CardContent, CardHeader, CardTitle } from "../card";
-
-defineProps<{
-  title?: string;
-  data: {
-    name: string;
-    color: string;
-    value: any;
-  }[];
-}>();
-</script>
-
-<template>
-  <Card class="text-sm">
-    <CardHeader v-if="title" class="p-3 border-b">
-      <CardTitle>
-        {{ title }}
-      </CardTitle>
-    </CardHeader>
-    <CardContent class="p-3 min-w-[180px] flex flex-col gap-1">
-      <div v-for="(item, key) in data" :key="key" class="flex justify-between">
-        <div class="flex items-center">
-          <span class="w-2.5 h-2.5 mr-2">
-            <svg width="100%" height="100%" viewBox="0 0 30 30">
-              <path
-                d=" M 15 15 m -14, 0 a 14,14 0 1,1 28,0 a 14,14 0 1,1 -28,0"
-                :stroke="item.color"
-                :fill="item.color"
-                stroke-width="1"
-              />
-            </svg>
-          </span>
-          <span>{{ item.name }}</span>
-        </div>
-        <span class="font-semibold ml-4">{{ item.value }}</span>
-      </div>
-    </CardContent>
-  </Card>
-</template>

front/components/ui/chart/ChartTooltipContent.vue

@@ -0,0 +1,109 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import type { ChartConfig } from '.'
+import { computed } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = withDefaults(
+    defineProps<{
+        hideLabel?: boolean
+        hideIndicator?: boolean
+        indicator?: 'line' | 'dot' | 'dashed'
+        nameKey?: string
+        labelKey?: string
+        labelFormatter?: (d: number | Date) => string
+        payload?: Record<string, any>
+        config?: ChartConfig
+        class?: HTMLAttributes['class']
+        color?: string
+        x?: number | Date
+    }>(),
+    {
+        payload: () => ({}),
+        config: () => ({}),
+        indicator: 'dot',
+    }
+)
+
+// TODO: currently we use `createElement` and `render` to render the
+// const chartContext = useChart(null)
+
+const payload = computed(() => {
+    return Object.entries(props.payload)
+        .map(([key, value]) => {
+            // const key = `${props.nameKey || item.name || item.dataKey || "value"}`
+            const itemConfig = props.config[key]
+            const indicatorColor = props.config[key]?.color ?? props.payload.fill
+
+            return { key, value, itemConfig, indicatorColor }
+        })
+        .filter((i) => i.itemConfig)
+})
+
+const nestLabel = computed(() => Object.keys(props.payload).length === 1 && props.indicator !== 'dot')
+const tooltipLabel = computed(() => {
+    if (props.hideLabel) return null
+    if (props.labelFormatter && props.x !== undefined) {
+        return props.labelFormatter(props.x)
+    }
+    return props.labelKey ? props.config[props.labelKey]?.label || props.payload[props.labelKey] : props.x
+})
+</script>
+
+<template>
+    <div
+        :class="
+            cn('border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl', props.class)
+        "
+    >
+        <slot>
+            <div v-if="!nestLabel && tooltipLabel" class="font-medium">
+                {{ tooltipLabel }}
+            </div>
+            <div class="grid gap-1.5">
+                <div
+                    v-for="{ value, itemConfig, indicatorColor, key } in payload"
+                    :key="key"
+                    :class="
+                        cn(
+                            '[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5',
+                            indicator === 'dot' && 'items-center'
+                        )
+                    "
+                >
+                    <component :is="itemConfig.icon" v-if="itemConfig?.icon" />
+                    <template v-else-if="!hideIndicator">
+                        <div
+                            :class="
+                                cn('shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)', {
+                                    'h-2.5 w-2.5': indicator === 'dot',
+                                    'w-1': indicator === 'line',
+                                    'w-0 border-[1.5px] border-dashed bg-transparent': indicator === 'dashed',
+                                    'my-0.5': nestLabel && indicator === 'dashed',
+                                })
+                            "
+                            :style="{
+                                '--color-bg': indicatorColor,
+                                '--color-border': indicatorColor,
+                            }"
+                        />
+                    </template>
+
+                    <div :class="cn('flex flex-1 justify-between leading-none', nestLabel ? 'items-end' : 'items-center')">
+                        <div class="grid gap-1.5">
+                            <div v-if="nestLabel" class="font-medium">
+                                {{ tooltipLabel }}
+                            </div>
+                            <span class="text-muted-foreground">
+                                {{ itemConfig?.label || value }}
+                            </span>
+                        </div>
+                        <span v-if="value" class="text-foreground font-mono font-medium tabular-nums">
+                            {{ value.toLocaleString() }}
+                        </span>
+                    </div>
+                </div>
+            </div>
+        </slot>
+    </div>
+</template>

front/components/ui/chart/index.ts

@@ -1,21 +1,26 @@
-export { default as ChartCrosshair } from "./ChartCrosshair.vue";
-export { default as ChartLegend } from "./ChartLegend.vue";
-export { default as ChartSingleTooltip } from "./ChartSingleTooltip.vue";
-export { default as ChartTooltip } from "./ChartTooltip.vue";
+import type { Component, Ref } from 'vue'
+import { createContext } from 'reka-ui'
 
-export function defaultColors(count: number = 3) {
-  const quotient = Math.floor(count / 2);
-  const remainder = count % 2;
+export { default as ChartContainer } from './ChartContainer.vue'
+export { default as ChartLegendContent } from './ChartLegendContent.vue'
+export { default as ChartTooltipContent } from './ChartTooltipContent.vue'
+export { componentToString } from './utils'
 
-  const primaryCount = quotient + remainder;
-  const secondaryCount = quotient;
-  return [
-    ...Array.from(new Array(primaryCount).keys()).map(
-      (i) => `hsl(var(--vis-primary-color) / ${1 - (1 / primaryCount) * i})`,
-    ),
-    ...Array.from(new Array(secondaryCount).keys()).map(
-      (i) =>
-        `hsl(var(--vis-secondary-color) / ${1 - (1 / secondaryCount) * i})`,
-    ),
-  ];
+// Format: { THEME_NAME: CSS_SELECTOR }
+export const THEMES = { light: '', dark: '.dark' } as const
+
+export type ChartConfig = {
+    [k in string]: {
+        label?: string | Component
+        icon?: string | Component
+    } & ({ color?: string; theme?: never } | { color?: never; theme: Record<keyof typeof THEMES, string> })
 }
+
+interface ChartContextProps {
+    id: string
+    config: Ref<ChartConfig>
+}
+
+export const [useChart, provideChartContext] = createContext<ChartContextProps>('Chart')
+
+export { VisCrosshair as ChartCrosshair, VisTooltip as ChartTooltip } from '@unovis/vue'

front/components/ui/chart/utils.ts

@@ -0,0 +1,42 @@
+import type { ChartConfig } from '.'
+import { isClient } from '@vueuse/core'
+import { useId } from 'reka-ui'
+import { h, render } from 'vue'
+
+// Simple cache using a Map to store serialized object keys
+const cache = new Map<string, string>()
+
+// Convert object to a consistent string key
+function serializeKey(key: Record<string, any>): string {
+    return JSON.stringify(key, Object.keys(key).sort())
+}
+
+interface Constructor<P = any> {
+    __isFragment?: never
+    __isTeleport?: never
+    __isSuspense?: never
+    new (...args: any[]): {
+        $props: P
+    }
+}
+
+export function componentToString<P>(config: ChartConfig, component: Constructor<P>, props?: P) {
+    if (!isClient) return
+
+    // This function will be called once during mount lifecycle
+    const id = useId()
+
+    // https://unovis.dev/docs/auxiliary/Crosshair#component-props
+    return (_data: any, x: number | Date) => {
+        const data = 'data' in _data ? _data.data : _data
+        const serializedKey = `${id}-${serializeKey(data)}`
+        const cachedContent = cache.get(serializedKey)
+        if (cachedContent) return cachedContent
+
+        const vnode = h<unknown>(component, { ...props, payload: data, config, x })
+        const div = document.createElement('div')
+        render(vnode, div)
+        cache.set(serializedKey, div.innerHTML)
+        return div.innerHTML
+    }
+}