optimize(projects): optimize example code about vtable,vchart

src/hooks/common/vchart.ts

@@ -1,10 +1,11 @@
 import { computed, effectScope, onScopeDispose, ref, watch } from 'vue';
+import { useElementSize } from '@vueuse/core';
 import VChart, { registerLiquidChart } from '@visactor/vchart';
 import type { ISpec, ITheme } from '@visactor/vchart';
 import light from '@visactor/vchart-theme/public/light.json';
 import dark from '@visactor/vchart-theme/public/dark.json';
-import { useElementSize } from '@vueuse/core';
 import { useThemeStore } from '@/store/modules/theme';
+
 registerLiquidChart();
 
 // register the theme

src/views/plugin/charts/vchart/data.ts

@@ -1,4 +1,15 @@
-export const shapeWordCloudSpec = {
+import type {
+  IAreaChartSpec,
+  IBarChartSpec,
+  ICircularProgressChartSpec,
+  IHistogramChartSpec,
+  IIndicatorSpec,
+  ILiquidChartSpec,
+  IWordCloudChartSpec
+} from '@visactor/vchart';
+import type { IAnimationConfig } from '@visactor/vgrammar-core';
+
+export const shapeWordCloudSpec: IWordCloudChartSpec = {
   type: 'wordCloud',
   maskShape: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/log.jpeg',
   nameField: 'challenge_name',
@@ -161,7 +172,7 @@ export const shapeWordCloudSpec = {
   ]
 };
 
-export const circularProgressTickSpec = {
+export const circularProgressTickSpec: ICircularProgressChartSpec & { indicator: IIndicatorSpec } = {
   type: 'circularProgress',
   data: [
     {
@@ -244,7 +255,7 @@ export const circularProgressTickSpec = {
   }
 };
 
-export const liquidChartSmartInvertSpec = {
+export const liquidChartSmartInvertSpec: ILiquidChartSpec & { indicator: IIndicatorSpec } = {
   type: 'liquid',
   valueField: 'value',
   data: {
@@ -397,7 +408,7 @@ const dataSpecs = Object.keys(goldenMedals).map(year => {
 const duration = 1000;
 const exchangeDuration = 600;
 
-export const rankingBarSpec = {
+export const rankingBarSpec: IBarChartSpec = {
   type: 'bar',
   padding: {
     top: 12,
@@ -457,7 +468,7 @@ export const rankingBarSpec = {
       duration: exchangeDuration,
       easing: 'circInOut'
     }
-  },
+  } as Record<string, IAnimationConfig>,
   animationEnter: {
     bar: [
       {
@@ -534,7 +545,7 @@ export const rankingBarSpec = {
   }
 };
 
-export const stackedDashAreaSpec = {
+export const stackedDashAreaSpec: IAreaChartSpec = {
   type: 'area',
   data: {
     values: [
@@ -616,7 +627,7 @@ export const stackedDashAreaSpec = {
         if (data.forecast) {
           return 'bias-rl';
         }
-        return null;
+        return '';
       }
     }
   },
@@ -631,7 +642,7 @@ export const stackedDashAreaSpec = {
   }
 };
 
-export const barMarkPointSpec = {
+export const barMarkPointSpec: IBarChartSpec = {
   type: 'bar',
   height: 300,
   data: [
@@ -693,7 +704,7 @@ export const barMarkPointSpec = {
       },
       itemContent: {
         type: 'text',
-        autoRotate: false,
+        // autoRotate: false,
         offsetY: -10,
         text: {
           dy: 14,
@@ -765,7 +776,7 @@ export const barMarkPointSpec = {
   ]
 };
 
-export const histogramDifferentBinSpec = {
+export const histogramDifferentBinSpec: IHistogramChartSpec = {
   type: 'histogram',
   xField: 'from',
   x2Field: 'to',
@@ -797,8 +808,8 @@ export const histogramDifferentBinSpec = {
       },
       content: [
         {
-          key: (datum: any) => `${datum.from}～${datum.to}`,
-          value: (datum: any) => datum.profit
+          key: (datum?: Record<string, any>) => `${datum?.from}～${datum?.to}`,
+          value: (datum?: Record<string, any>) => datum?.profit
         }
       ]
     }

src/views/plugin/charts/vchart/index.vue

@@ -1,12 +1,4 @@
 <script setup lang="ts">
-import { onUnmounted } from 'vue';
-import type {
-  IAreaChartSpec,
-  IBarChartSpec,
-  ICircularProgressChartSpec,
-  IHistogramChartSpec,
-  ILiquidChartSpec
-} from '@visactor/vchart';
 import { useVChart } from '@/hooks/common/vchart';
 import {
   barMarkPointSpec,
@@ -18,27 +10,20 @@ import {
   stackedDashAreaSpec
 } from './data';
 
-const { domRef: stackedDashAreaRef } = useVChart(() => stackedDashAreaSpec as IAreaChartSpec, { onRender() {} });
-const { domRef: barMarkPointRef } = useVChart(() => barMarkPointSpec as IBarChartSpec, { onRender() {} });
-const { domRef: histogramDifferentBinRef } = useVChart(() => histogramDifferentBinSpec as IHistogramChartSpec, {
-  onRender() {}
-});
-const { domRef: rankingBarRef } = useVChart(() => rankingBarSpec as IBarChartSpec, { onRender() {} });
-const { domRef: shapeWordCloudRef } = useVChart(() => shapeWordCloudSpec, { onRender() {} });
-const { domRef: circularProgressTickRef } = useVChart(() => circularProgressTickSpec as ICircularProgressChartSpec, {
-  onRender() {}
-});
-const { domRef: liquidChartSmartInvertRef } = useVChart(() => liquidChartSmartInvertSpec as ILiquidChartSpec, {
-  onRender() {}
-});
-
-onUnmounted(() => {
-  // clearGaugeChart();
-});
+const { domRef: stackedDashAreaRef } = useVChart(() => stackedDashAreaSpec);
+const { domRef: barMarkPointRef } = useVChart(() => barMarkPointSpec);
+const { domRef: histogramDifferentBinRef } = useVChart(() => histogramDifferentBinSpec);
+const { domRef: rankingBarRef } = useVChart(() => rankingBarSpec);
+const { domRef: shapeWordCloudRef } = useVChart(() => shapeWordCloudSpec);
+const { domRef: circularProgressTickRef } = useVChart(() => circularProgressTickSpec);
+const { domRef: liquidChartSmartInvertRef } = useVChart(() => liquidChartSmartInvertSpec);
 </script>
 
 <template>
   <NSpace vertical :size="16">
+    <NCard :bordered="false" title="VChart" class="h-full card-wrapper">
+      <WebSiteLink label="More Demos: " link="https://www.visactor.com/vchart/example" />
+    </NCard>
     <NCard title="Stacked Dash Area Chart" :bordered="false" class="h-full card-wrapper">
       <div ref="stackedDashAreaRef" class="h-400px" />
     </NCard>
@@ -60,9 +45,6 @@ onUnmounted(() => {
     <NCard title="Shape Word Cloud Chart" :bordered="false" class="h-full card-wrapper">
       <div ref="shapeWordCloudRef" class="h-400px" />
     </NCard>
-    <NCard :bordered="false" class="h-full w-2/3 card-wrapper">
-      <WebSiteLink label="More VChart Demos: " link="https://www.visactor.com/vchart/example" />
-    </NCard>
   </NSpace>
 </template>
 

src/views/plugin/gantt/vtable/index.vue

@@ -775,20 +775,18 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div class="h-full">
-    <NSpace vertical :size="16">
-      <NCard :bordered="false" class="h-full w-2/3 card-wrapper">
-        <div ref="basicGanttDomRef" class="relative h-400px"></div>
-      </NCard>
-      <NCard :bordered="false" class="h-full w-2/3 card-wrapper">
-        <div ref="linkGanttDomRef" class="relative h-400px"></div>
-      </NCard>
-      <NCard :bordered="false" class="h-full w-2/3 card-wrapper">
-        <div ref="customGanttDomRef" class="relative h-400px"></div>
-      </NCard>
-      <NCard :bordered="false" class="h-full w-2/3 card-wrapper">
-        <WebSiteLink label="More VTableGantt Demos: " link="https://www.visactor.com/vtable/example" />
-      </NCard>
-    </NSpace>
-  </div>
+  <NSpace vertical :size="16">
+    <NCard :bordered="false" title="VTableGantt" class="h-full card-wrapper">
+      <WebSiteLink label="More Demos: " link="https://www.visactor.com/vtable/example" />
+    </NCard>
+    <NCard :bordered="false" class="h-full card-wrapper">
+      <div ref="basicGanttDomRef" class="relative h-400px"></div>
+    </NCard>
+    <NCard :bordered="false" class="h-full card-wrapper">
+      <div ref="linkGanttDomRef" class="relative h-400px"></div>
+    </NCard>
+    <NCard :bordered="false" class="h-full card-wrapper">
+      <div ref="customGanttDomRef" class="relative h-400px"></div>
+    </NCard>
+  </NSpace>
 </template>