update dashboard

frontend/src/components/DashboardByTypeCards.vue

@@ -5,6 +5,7 @@ import {
   DollarOutlined,
   DatabaseOutlined,
 } from '@ant-design/icons-vue'
+import type { Component } from 'vue'
 import type { DataTypeCount } from '@/types/api'
 
 defineProps<{
@@ -12,7 +13,7 @@ defineProps<{
   loading: boolean
 }>()
 
-const iconMap: Record<string, ReturnType<typeof ShoppingCartOutlined>> = {
+const iconMap: Record<string, Component> = {
   order: ShoppingCartOutlined,
   product: ShoppingOutlined,
   refund: DollarOutlined,

frontend/src/components/DashboardTrendChart.vue

@@ -66,11 +66,16 @@ function handleDataTypeChange(val: unknown) {
   emit('update:dataType', (val as string) || undefined)
 }
 
-watch(flatData, () => {
-  if (chart) {
-    chart.changeData(flatData.value)
+watch(flatData, (newData) => {
+  if (newData.length === 0 && chart) {
+    chart.destroy()
+    chart = null
+  } else if (!chart && chartRef.value && newData.length > 0) {
+    nextTick(() => createChart())
+  } else if (chart) {
+    chart.changeData(newData)
   }
-})
+}, { flush: 'post' })
 
 onMounted(() => {
   if (props.data.length > 0) {
@@ -78,15 +83,6 @@ onMounted(() => {
   }
 })
 
-watch(
-  () => props.data,
-  (newVal) => {
-    if (newVal.length > 0 && !chart) {
-      nextTick(() => createChart())
-    }
-  },
-)
-
 onBeforeUnmount(() => {
   if (chart) {
     chart.destroy()