feat(frontend): add chart components with echarts integration

Author: Lasim

package-lock.json

@@ -20,6 +20,7 @@
     "@vueuse/core": "^13.9.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "echarts": "^6.0.0",
     "lucide-vue-next": "^0.544.0",
     "marked": "^16.3.0",
     "mitt": "^3.0.1",
@@ -30,6 +31,7 @@
     "tailwindcss-animate": "^1.0.7",
     "vee-validate": "^4.15.1",
     "vue": "^3.5.21",
+    "vue-echarts": "^8.0.0",
     "vue-i18n": "^11.1.12",
     "vue-router": "^4.5.1",
     "vue-sonner": "^2.0.9",

services/frontend/package.json

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import VChart from 'vue-echarts'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from '@/lib/utils'
+import type { EChartsOption } from 'echarts'
+
+const chartVariants = cva(
+  'w-full',
+  {
+    variants: {
+      variant: {
+        line: '',
+        area: '',
+        bar: '',
+        pie: '',
+      },
+      size: {
+        sm: 'h-[200px]',
+        md: 'h-[300px]',
+        lg: 'h-[400px]',
+        xl: 'h-[500px]',
+      },
+    },
+    defaultVariants: {
+      variant: 'line',
+      size: 'md',
+    },
+  }
+)
+
+export interface ChartProps {
+  option: EChartsOption
+  variant?: VariantProps<typeof chartVariants>['variant']
+  size?: VariantProps<typeof chartVariants>['size']
+  loading?: boolean
+  autoresize?: boolean
+  class?: string
+}
+
+const props = withDefaults(defineProps<ChartProps>(), {
+  variant: 'line',
+  size: 'md',
+  loading: false,
+  autoresize: true,
+})
+</script>
+
+<template>
+  <div :class="cn(chartVariants({ variant, size }), props.class)">
+    <VChart 
+      :option="option" 
+      :autoresize="autoresize"
+      :loading="loading"
+      class="h-full w-full"
+    />
+  </div>
+</template>

services/frontend/src/components/ui/chart/Chart.vue

@@ -0,0 +1,146 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { use } from 'echarts/core'
+import { LineChart as EChartsLineChart } from 'echarts/charts'
+import {
+  GridComponent,
+  TooltipComponent,
+  LegendComponent,
+} from 'echarts/components'
+import { CanvasRenderer } from 'echarts/renderers'
+import Chart, { type ChartProps } from './Chart.vue'
+import type { EChartsOption } from 'echarts'
+
+use([
+  GridComponent,
+  TooltipComponent,
+  LegendComponent,
+  EChartsLineChart,
+  CanvasRenderer,
+])
+
+export interface LineChartProps extends Omit<ChartProps, 'option' | 'variant'> {
+  data: number[]
+  labels: string[]
+  name?: string
+  smooth?: boolean
+  showArea?: boolean
+  color?: string
+  areaColor?: string
+}
+
+const props = withDefaults(defineProps<LineChartProps>(), {
+  name: 'Data',
+  smooth: true,
+  showArea: true,
+  color: '#0f766e',
+  areaColor: 'rgba(15, 118, 110, 0.3)',
+})
+
+const chartOption = computed<EChartsOption>(() => ({
+  tooltip: {
+    trigger: 'axis',
+    backgroundColor: 'white',
+    borderColor: '#e5e7eb',
+    borderWidth: 1,
+    textStyle: {
+      color: '#374151',
+    },
+    axisPointer: {
+      type: 'line',
+      lineStyle: {
+        color: props.color,
+        opacity: 0.5,
+      },
+    },
+  },
+  grid: {
+    left: '3%',
+    right: '4%',
+    bottom: '3%',
+    top: '10%',
+    containLabel: true,
+  },
+  xAxis: {
+    type: 'category',
+    data: props.labels,
+    boundaryGap: false,
+    axisLine: {
+      lineStyle: {
+        color: '#6b7280',
+      },
+    },
+    axisLabel: {
+      color: '#6b7280',
+      fontSize: 12,
+    },
+  },
+  yAxis: {
+    type: 'value',
+    axisLine: {
+      lineStyle: {
+        color: '#6b7280',
+      },
+    },
+    axisLabel: {
+      color: '#6b7280',
+      fontSize: 12,
+    },
+    splitLine: {
+      lineStyle: {
+        color: '#f3f4f6',
+      },
+    },
+  },
+  series: [
+    {
+      name: props.name,
+      type: 'line',
+      smooth: props.smooth,
+      data: props.data,
+      lineStyle: {
+        color: props.color,
+        width: 2,
+      },
+      itemStyle: {
+        color: props.color,
+      },
+      ...(props.showArea && {
+        areaStyle: {
+          color: {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [
+              {
+                offset: 0,
+                color: props.areaColor,
+              },
+              {
+                offset: 1,
+                color: 'rgba(15, 118, 110, 0)',
+              },
+            ],
+          },
+        },
+      }),
+      emphasis: {
+        focus: 'series',
+      },
+    },
+  ],
+}))
+</script>
+
+<template>
+  <Chart 
+    :option="chartOption" 
+    variant="line"
+    :size="size"
+    :loading="loading"
+    :autoresize="autoresize"
+    :class="props.class"
+  />
+</template>

services/frontend/src/components/ui/chart/LineChart.vue

@@ -0,0 +1,2 @@
+export { default as Chart } from './Chart.vue'
+export { default as LineChart } from './LineChart.vue'