From e8803a9f18d70d14c1701c4a85be7fe2ac8fe1d2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=A5=E6=B5=A9?= <me@yanhao.ren>
Date: Mon, 26 May 2025 12:57:24 +0800
Subject: [PATCH] feat: add vue-data-ui dependency and create vue-data-ui page

---
 package.json                        |   1 +
 pnpm-lock.yaml                      |  12 +
 src/pages/Page/vue-data-ui.page.vue | 352 ++++++++++++++++++++++++++++
 typed-router.d.ts                   |   1 +
 4 files changed, 366 insertions(+)
 create mode 100644 src/pages/Page/vue-data-ui.page.vue

diff --git a/package.json b/package.json
index 93419ab..5b4c637 100644
--- a/package.json
+++ b/package.json
@@ -88,6 +88,7 @@
     "utils4u": "^4.2.3",
     "vant": "^4.9.19",
     "vue": "^3.5.14",
+    "vue-data-ui": "^2.7.5",
     "vue-draggable-plus": "^0.6.0",
     "vue-i18n": "^11.1.4",
     "vue-page-stack": "^3.2.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9fb5c44..d97d477 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -145,6 +145,9 @@ importers:
       vue:
         specifier: ^3.5.14
         version: 3.5.14(typescript@5.8.3)
+      vue-data-ui:
+        specifier: ^2.7.5
+        version: 2.7.5(vue@3.5.14(typescript@5.8.3))
       vue-draggable-plus:
         specifier: ^0.6.0
         version: 0.6.0(@types/sortablejs@1.15.8)
@@ -5582,6 +5585,11 @@ packages:
   vue-component-type-helpers@2.2.10:
     resolution: {integrity: sha512-iDUO7uQK+Sab2tYuiP9D1oLujCWlhHELHMgV/cB13cuGbG4qwkLHvtfWb6FzvxrIOPDnU0oHsz2MlQjhYDeaHA==}
 
+  vue-data-ui@2.7.5:
+    resolution: {integrity: sha512-J0WyRMUQwg3YUyMUvc9jLWkgXM/c/ctoA3OZ7oPp5VDxUvG8/TSzTpLpCkCIWs+Rb7AiA9NGQRS8xyl84CPgwA==}
+    peerDependencies:
+      vue: '>=3.3.0'
+
   vue-demi@0.14.10:
     resolution: {integrity: sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==}
     engines: {node: '>=12'}
@@ -11399,6 +11407,10 @@ snapshots:
 
   vue-component-type-helpers@2.2.10: {}
 
+  vue-data-ui@2.7.5(vue@3.5.14(typescript@5.8.3)):
+    dependencies:
+      vue: 3.5.14(typescript@5.8.3)
+
   vue-demi@0.14.10(vue@3.5.14(typescript@5.8.3)):
     dependencies:
       vue: 3.5.14(typescript@5.8.3)
diff --git a/src/pages/Page/vue-data-ui.page.vue b/src/pages/Page/vue-data-ui.page.vue
new file mode 100644
index 0000000..fae318b
--- /dev/null
+++ b/src/pages/Page/vue-data-ui.page.vue
@@ -0,0 +1,352 @@
+<script setup lang="ts">
+import { VueUiXy, type VueUiXyConfig, type VueUiXyDatasetItem } from 'vue-data-ui';
+import 'vue-data-ui/style.css'; // If you are using multiple components, place styles import in your main
+
+const config = computed<VueUiXyConfig>(() => {
+  return {
+    theme: undefined,
+    responsive: false,
+    customPalette: [],
+    useCssAnimation: true,
+    downsample: {
+      threshold: 500,
+    },
+    chart: {
+      fontFamily: 'inherit',
+      backgroundColor: '#FFFFFFff',
+      color: '#1A1A1Aff',
+      height: 600,
+      width: 1000,
+      zoom: {
+        show: true,
+        color: '#CCCCCCff',
+        highlightColor: '#4A4A4A',
+        fontSize: 14,
+        useResetSlot: false,
+        startIndex: null,
+        endIndex: null,
+        enableRangeHandles: true,
+        enableSelectionDrag: true,
+        minimap: {
+          show: true,
+          smooth: false,
+          selectedColor: '#1F77B4',
+          selectedColorOpacity: 0.2,
+          lineColor: '#1A1A1A',
+          selectionRadius: 2,
+          indicatorColor: '#1A1A1A',
+          verticalHandles: false,
+        },
+      },
+      padding: {
+        top: 36,
+        right: 24,
+        bottom: 48,
+        left: 48,
+      },
+      highlighter: {
+        color: '#1A1A1Aff',
+        opacity: 5,
+        useLine: false,
+        lineDasharray: 2,
+        lineWidth: 1,
+      },
+      highlightArea: {
+        show: false,
+        from: 0,
+        to: 0,
+        color: '#CCCCCCff',
+        opacity: 20,
+        caption: {
+          text: 'Caption',
+          fontSize: 20,
+          color: '#1A1A1Aff',
+          bold: false,
+          offsetY: 0,
+          width: 'auto',
+          padding: 3,
+          textAlign: 'center',
+        },
+      },
+      timeTag: {
+        show: false,
+        backgroundColor: '#e1e5e8ff',
+        color: '#1A1A1Aff',
+        fontSize: 12,
+        circleMarker: {
+          radius: 3,
+          color: '#1A1A1Aff',
+        },
+      },
+      grid: {
+        stroke: '#e1e5e8ff',
+        showVerticalLines: false,
+        showHorizontalLines: false,
+        position: 'middle',
+        frame: {
+          show: false,
+          stroke: '#E1E5E8ff',
+          strokeWidth: 2,
+          strokeLinecap: 'round',
+          strokeLinejoin: 'round',
+          strokeDasharray: 0,
+        },
+        labels: {
+          show: true,
+          color: '#1A1A1Aff',
+          fontSize: 16,
+          axis: {
+            yLabel: '',
+            yLabelOffsetX: 0,
+            xLabel: '',
+            xLabelOffsetY: 14,
+            fontSize: 12,
+          },
+          zeroLine: {
+            show: true,
+          },
+          xAxis: {
+            showBaseline: true,
+          },
+          yAxis: {
+            showBaseline: true,
+            commonScaleSteps: 10,
+            useIndividualScale: false,
+            stacked: false,
+            gap: 12,
+            labelWidth: 40,
+            formatter: null,
+            scaleMin: null,
+            scaleMax: null,
+            groupColor: '#1A1A1A',
+            scaleLabelOffsetX: 0,
+            scaleValueOffsetX: 0,
+          },
+          xAxisLabels: {
+            color: '#1A1A1Aff',
+            show: true,
+            values: [],
+            fontSize: 18,
+            showOnlyFirstAndLast: false,
+            showOnlyAtModulo: false,
+            modulo: 12,
+            yOffset: 8,
+            rotation: 0,
+          },
+        },
+      },
+      comments: {
+        show: true,
+        showInTooltip: true,
+        width: 200,
+        offsetX: 0,
+        offsetY: 0,
+      },
+      labels: {
+        fontSize: 16,
+        prefix: '',
+        suffix: '',
+      },
+      legend: {
+        color: '#1A1A1Aff',
+        show: true,
+        fontSize: 16,
+      },
+      title: {
+        text: 'Title',
+        color: '#1A1A1Aff',
+        fontSize: 20,
+        bold: true,
+        textAlign: 'center',
+        paddingLeft: 0,
+        paddingRight: 0,
+        subtitle: {
+          color: '#CCCCCCff',
+          text: '',
+          fontSize: 16,
+          bold: false,
+        },
+        show: true,
+      },
+      tooltip: {
+        show: true,
+        color: '#1A1A1Aff',
+        backgroundColor: '#FFFFFFff',
+        fontSize: 14,
+        customFormat: null,
+        borderRadius: 4,
+        borderColor: '#e1e5e8',
+        borderWidth: 1,
+        backgroundOpacity: 30,
+        position: 'center',
+        offsetY: 24,
+        showTimeLabel: true,
+        showValue: true,
+        showPercentage: false,
+        roundingValue: 0,
+        roundingPercentage: 0,
+      },
+      userOptions: {
+        show: true,
+        showOnChartHover: false,
+        keepStateOnChartLeave: true,
+        position: 'right',
+        buttons: {
+          tooltip: true,
+          pdf: true,
+          csv: true,
+          img: true,
+          table: true,
+          labels: true,
+          fullscreen: true,
+          sort: false,
+          stack: true,
+          animation: false,
+          annotator: true,
+        },
+        buttonTitles: {
+          open: 'Open options',
+          close: 'Close options',
+          tooltip: 'Toggle tooltip',
+          pdf: 'Download PDF',
+          csv: 'Download CSV',
+          img: 'Download PNG',
+          table: 'Toggle table',
+          labels: 'Toggle labels',
+          fullscreen: 'Toggle fullscreen',
+          stack: 'Toggle stack mode',
+          annotator: 'Toggle annotator',
+        },
+        print: {
+          allowTaint: false,
+          backgroundColor: '#FFFFFFff',
+          useCORS: false,
+          onclone: null,
+          scale: 2,
+          logging: false,
+        },
+      },
+    },
+    bar: {
+      borderRadius: 2,
+      useGradient: true,
+      periodGap: 0.1,
+      border: {
+        useSerieColor: false,
+        strokeWidth: 1,
+        stroke: '#FFFFFFff',
+      },
+      labels: {
+        show: true,
+        offsetY: -8,
+        rounding: 0,
+        color: '#1A1A1Aff',
+        formatter: null,
+      },
+      serieName: {
+        show: false,
+        offsetY: -6,
+        useAbbreviation: true,
+        abbreviationSize: 3,
+        useSerieColor: true,
+        color: '#1A1A1Aff',
+        bold: false,
+      },
+    },
+    line: {
+      radius: 6,
+      useGradient: false,
+      strokeWidth: 2,
+      cutNullValues: false,
+      dot: {
+        hideAboveMaxSerieLength: 62,
+        useSerieColor: false,
+        fill: '#FFFFFF',
+        strokeWidth: 2,
+      },
+      labels: {
+        show: true,
+        offsetY: -16,
+        rounding: 0,
+        color: '#1A1A1Aff',
+        formatter: null,
+      },
+      area: {
+        useGradient: true,
+        opacity: 20,
+      },
+      tag: {
+        followValue: true,
+        formatter: null,
+        fontSize: 14,
+      },
+    },
+    plot: {
+      radius: 6,
+      useGradient: true,
+      dot: {
+        useSerieColor: true,
+        fill: '#FFFFFF',
+        strokeWidth: 0.5,
+      },
+      labels: {
+        show: true,
+        offsetY: -8,
+        rounding: 0,
+        color: '#1A1A1Aff',
+        formatter: null,
+      },
+      tag: {
+        followValue: true,
+        formatter: null,
+        fontSize: 14,
+      },
+    },
+    table: {
+      responsiveBreakpoint: 400,
+      rounding: 0,
+      sparkline: true,
+      showSum: true,
+      columnNames: {
+        period: 'Period',
+        total: 'Total',
+      },
+      th: {
+        backgroundColor: '#FAFAFAff',
+        color: '#1A1A1Aff',
+        outline: '',
+      },
+      td: {
+        backgroundColor: '#FAFAFAff',
+        color: '#1A1A1Aff',
+        outline: '',
+      },
+    },
+    showTable: false,
+  };
+});
+
+const dataset = computed<VueUiXyDatasetItem[]>(() => {
+  return [
+    {
+      name: 'Serie name',
+      series: [1, 9, 7, 2, 12, 16, 17, 30, 16, 23],
+      color: '#1f77b4',
+      type: 'line',
+      shape: 'circle',
+      useArea: false,
+      useProgression: false,
+      dataLabels: true,
+      smooth: true,
+      dashed: false,
+      useTag: 'none',
+    },
+  ];
+});
+</script>
+<template>
+  <!-- Using a wrapper is optional -->
+  <div :style="{ width: '600px' }">
+    <VueUiXy :config="config" :dataset="dataset" />
+  </div>
+</template>
diff --git a/typed-router.d.ts b/typed-router.d.ts
index 7663c76..d441af7 100644
--- a/typed-router.d.ts
+++ b/typed-router.d.ts
@@ -39,6 +39,7 @@ declare module 'vue-router/auto-routes' {
     'PagePinPuYi': RouteRecordInfo<'PagePinPuYi', '/Page/PinPuYi', Record<never, never>, Record<never, never>>,
     'PageStyle': RouteRecordInfo<'PageStyle', '/Page/Style', Record<never, never>, Record<never, never>>,
     'PageViteAssets': RouteRecordInfo<'PageViteAssets', '/Page/vite-assets', Record<never, never>, Record<never, never>>,
+    'PageVueDataUi': RouteRecordInfo<'PageVueDataUi', '/Page/vue-data-ui', Record<never, never>, Record<never, never>>,
     'PkgsUsageI18n': RouteRecordInfo<'PkgsUsageI18n', '/PkgsUsage/I18n', Record<never, never>, Record<never, never>>,
     'PkgsUsageTsEnumUtil': RouteRecordInfo<'PkgsUsageTsEnumUtil', '/PkgsUsage/ts-enum-util', Record<never, never>, Record<never, never>>,
     'UIComponentsAntdV': RouteRecordInfo<'UIComponentsAntdV', '/UI-components/AntdV', Record<never, never>, Record<never, never>>,