Merge pull request #24 from VisActor/7-feature-refactor-sparklines-spec

7 feature refactor sparklines spec
VisActor · Jun 12, 2023 · f7d64fc · f7d64fc
2 parents 997acf3 + 7866bf5
commit f7d64fc
Show file tree

Hide file tree

Showing 18 changed files with 244 additions and 92 deletions.
diff --git a/.github/ISSUE_TEMPLATE/bug_report.yml b/.github/ISSUE_TEMPLATE/bug_report.yml
@@ -14,7 +14,7 @@ body:
         - Find in [examples](https://www.visactor.io/)
         - Look for / ask questions on [Stack Overflow](https://stackoverflow.com/questions/tagged/visactor)
 
-        For non-technical support or general questions, you can email [yangwenhai@bytedance.com](mailto:yangwenhai@bytedance.com). 
+        For non-technical support or general questions, you can email [xuanhun521@126.com](mailto:xuanhun521@126.com).
 
         Also try to search for your issue - it may have already been answered or even fixed in the development branch. However, if you find that an old, closed issue still persists in the latest version, you should open a new issue using the form below instead of commenting on the old issue.
 

diff --git a/.github/ISSUE_TEMPLATE/feaure_request.yml b/.github/ISSUE_TEMPLATE/feaure_request.yml
@@ -14,7 +14,7 @@ body:
         - Find in [examples](https://www.visactor.io//)
         - Look for / ask questions on [Stack Overflow](https://stackoverflow.com/questions/tagged/visactors)
 
-        For non-technical support or general questions, you can email [yangwenhai@bytedance.com](mailto:yangwenhai@bytedance.com). 
+        For non-technical support or general questions, you can email [xuanhun521@126.com](mailto:xuanhun521@126.com).
 
         Also try to search for your issue - it may have already been answered or even fixed in the development branch. However, if you find that an old, closed issue still persists in the latest version, you should open a new issue using the form below instead of commenting on the old issue.
 

diff --git a/packages/vtable/examples/list/list.ts b/packages/vtable/examples/list/list.ts
@@ -0,0 +1,78 @@
+import * as VTable from '../../src';
+const Table_CONTAINER_DOM_ID = 'vTable';
+const generatePersons = count => {
+  return Array.from(new Array(count)).map((_, i) => ({
+    id: i + 1,
+    email1: `${i + 1}@xxx.com`,
+    name: `小明${i + 1}`,
+    lastName: '王',
+    date1: '2022年9月1日',
+    tel: '000-0000-0000',
+    sex: i % 2 === 0 ? 'boy' : 'girl',
+    work: i % 2 === 0 ? 'back-end engineer' : 'front-end engineer',
+    city: 'beijing'
+  }));
+};
+
+const records = generatePersons(1000000);
+const columns: VTable.ColumnsDefine = [
+  {
+    field: 'id',
+    caption: 'ID',
+    width: 120,
+    sort: true
+  },
+  {
+    field: 'email1',
+    caption: 'email',
+    width: 200,
+    sort: true
+  },
+  {
+    caption: 'full name',
+    columns: [
+      {
+        field: 'name',
+        caption: 'First Name',
+        width: 200
+      },
+      {
+        field: 'name',
+        caption: 'Last Name',
+        width: 200
+      }
+    ]
+  },
+  {
+    field: 'date1',
+    caption: 'birthday',
+    width: 200
+  },
+  {
+    field: 'sex',
+    caption: 'sex',
+    width: 100
+  },
+  {
+    field: 'tel',
+    caption: 'telephone',
+    width: 150
+  },
+  {
+    field: 'work',
+    caption: 'job',
+    width: 200
+  },
+  {
+    field: 'city',
+    caption: 'city',
+    width: 150
+  }
+];
+const option = {
+  parentElement: document.getElementById(Table_CONTAINER_DOM_ID),
+  records,
+  columns
+};
+const tableInstance = new VTable.ListTable(option);
+window.tableInstance = tableInstance;
diff --git a/packages/vtable/examples/menu.ts b/packages/vtable/examples/menu.ts
@@ -3,8 +3,8 @@ export const menus = [
     menu: '基本表格',
     children: [
       {
-        path: 'list-table',
-        name: 'default'
+        path: 'list',
+        name: 'list'
       }
     ]
   },

diff --git a/packages/vtable/examples/pivot/pivot-chart.ts b/packages/vtable/examples/pivot/pivot-chart.ts
@@ -312,23 +312,20 @@ export function createTable() {
           pointShowRule: 'none',
           smooth: true,
           line: {
-            visible: true,
             style: {
               stroke: '#2E62F1',
               strokeWidth: 2
               // interpolate: 'monotone',
             }
           },
-          symbol: {
+          point: {
             visible: true,
-            state: {
-              hover: {
-                stroke: 'blue',
-                strokeWidth: 1,
-                fill: 'red',
-                shape: 'circle',
-                size: 4
-              }
+            hover: {
+              stroke: 'blue',
+              strokeWidth: 1,
+              fill: 'red',
+              shape: 'circle',
+              size: 4
             },
             style: {
               stroke: 'red',

diff --git a/packages/vtable/examples/type/spark-line.ts b/packages/vtable/examples/type/spark-line.ts
@@ -8,7 +8,8 @@ export function createTable() {
       progress: 100,
       id: 1,
       name: 'a',
-      lineData: [
+      lineData: [10, 5, 7, 8, 3, 9, 4],
+      lineData2: [
         { x: 0, y: 10 },
         { x: 1, y: 40 },
         { x: 2, y: 60 },
@@ -23,7 +24,8 @@ export function createTable() {
       progress: 80,
       id: 2,
       name: 'b',
-      lineData: [
+      lineData: [7, 5, 7, 8, 3, 9, 4],
+      lineData2: [
         { x: 0, y: 10 },
         { x: 1, y: 40 },
         { x: 2, y: 60 },
@@ -40,7 +42,8 @@ export function createTable() {
       progress: 1,
       id: 3,
       name: 'c',
-      lineData: [
+      lineData: [1, 5, 7, 8, 3, 9, 4],
+      lineData2: [
         { x: 0, y: 10 },
         { x: 1, y: 40 },
         { x: 2, y: 60 },
@@ -57,7 +60,8 @@ export function createTable() {
       progress: 55,
       id: 4,
       name: 'd',
-      lineData: [
+      lineData: [-5, 5, 7, 8, 3, 9, 4],
+      lineData2: [
         { x: 0, y: 10 },
         { x: 1, y: 40 },
         { x: 2, y: 60 },
@@ -75,7 +79,8 @@ export function createTable() {
       id: 5,
       name: 'e',
       total: true,
-      lineData: [
+      lineData: [4, 5, 7, 8, 3, 9, 4],
+      lineData2: [
         { x: 0, y: 10 },
         { x: 1, y: 40 },
         { x: 2, y: 60 },
@@ -89,7 +94,8 @@ export function createTable() {
       ]
     }
   ];
-  const baseSpec = {
+
+  const baseSpec: VTable.TYPES.SparklineSpec = {
     type: 'line',
     xField: {
       field: 'x',
@@ -109,7 +115,7 @@ export function createTable() {
         strokeWidth: 2
       }
     },
-    symbol: {
+    point: {
       visible: true,
       state: {
         hover: {
@@ -135,7 +141,7 @@ export function createTable() {
       }
     }
   };
-  const totalSpec = {
+  const totalSpec: VTable.TYPES.SparklineSpec = {
     type: 'line',
     xField: 'x',
     yField: 'y',
@@ -147,7 +153,7 @@ export function createTable() {
         strokeWidth: 4
       }
     },
-    symbol: {
+    point: {
       visible: true,
       state: {
         hover: {
@@ -174,6 +180,43 @@ export function createTable() {
     }
   };
 
+  const specFieldString: VTable.TYPES.SparklineSpec = {
+    type: 'line',
+    xField: 'x',
+    yField: 'y',
+    pointShowRule: 'all',
+    line: {
+      style: {
+        stroke: '#2E62F1',
+        strokeWidth: 2
+      }
+    },
+    point: {
+      visible: true,
+      hover: {
+        stroke: 'blue',
+        strokeWidth: 1,
+        fill: 'red',
+        shape: 'circle',
+        size: 4
+      },
+
+      style: {
+        stroke: 'red',
+        strokeWidth: 1,
+        fill: 'yellow',
+        shape: 'circle',
+        size: 2
+      }
+    },
+    crosshair: {
+      style: {
+        stroke: 'gray',
+        strokeWidth: 1
+      }
+    }
+  };
+
   const option: VTable.ListTableConstructorOptions = {
     parentElement: document.getElementById(Table_CONTAINER_DOM_ID),
     columns: [
@@ -192,23 +235,15 @@ export function createTable() {
         field: 'lineData',
         caption: '这是一个折线图1',
         width: 250,
-        columnType: 'sparkline',
-        sparklineSpec: args => {
-          const { col, row } = args;
-          const data = instance.getCellOriginRecord(col, row);
-          if (data.total) {
-            return totalSpec;
-          }
-          return baseSpec;
-        }
+        columnType: 'sparkline'
       },
       {
-        field: 'lineData',
+        field: 'lineData2',
         caption: '这是一个折线图2',
         width: 250,
         columnType: 'sparkline',
         sparklineSpec: Object.assign({}, baseSpec, {
-          symbol: {
+          point: {
             visible: false,
             state: {
               hover: {
@@ -228,6 +263,30 @@ export function createTable() {
             }
           }
         })
+      },
+      {
+        field: 'lineData2',
+        caption: '这是一个折线图3',
+        width: 250,
+        columnType: 'sparkline',
+        sparklineSpec: specFieldString
+      },
+      {
+        field: 'lineData2',
+        caption: '这是一个折线图4',
+        width: 250,
+        columnType: 'sparkline',
+        sparklineSpec: {
+          type: 'line',
+          xField: 'x',
+          yField: 'y',
+          crosshair: {
+            style: {
+              stroke: 'red',
+              interpolate: 'monotone'
+            }
+          }
+        }
       }
     ],
     showPin: true, //显示VTable内置冻结列图标

diff --git a/packages/vtable/site-demo/cell-type/multi-type.md b/packages/vtable/site-demo/cell-type/multi-type.md
@@ -154,22 +154,19 @@ const columns = [
         pointShowRule: 'none',
         smooth: true,
         line: {
-          visible: true,
           style: {
             stroke: '#2E62F1',
             strokeWidth: 2,
           },
         },
         symbol: {
           visible: true,
-          state: {
-            hover: {
+          hover: {
               stroke: 'blue',
               strokeWidth: 1,
               fill: 'red',
               shape: 'circle',
               size: 4,
-            },
           },
           style: {
             stroke: 'red',

diff --git a/packages/vtable/src/event/event.ts b/packages/vtable/src/event/event.ts
@@ -16,7 +16,7 @@ import { browser, cellInRanges } from '../tools/helper';
 import { Rect } from '../tools/Rect';
 import { bindMediaClick } from './media-click';
 import { bindDrillEvent, drillClick } from './drill';
-import { bindChartHoverEvent } from './chart';
+import { bindSparklineHoverEvent } from './sparkline-event';
 import { getIconAndPositionFromTarget } from '../scenegraph/utils/icon';
 import type { BaseTableAPI } from '../ts-types/base-table';
 import { handleWhell } from './scroll';
@@ -705,7 +705,7 @@ export class EventManeger {
     }
 
     // chart hover
-    bindChartHoverEvent(this.table);
+    bindSparklineHoverEvent(this.table);
   }
 
   dealTableHover(eventArgsSet?: SceneEvent) {

diff --git a/packages/vtable/src/event/chart.ts → packages/vtable/src/event/sparkline-event.ts b/packages/vtable/src/event/chart.ts → packages/vtable/src/event/sparkline-event.ts
@@ -4,7 +4,7 @@ import type { PivoLayoutMap } from '../layout/pivot-layout';
 import type { MousePointerCellEvent } from '../ts-types';
 import type { BaseTableAPI } from '../ts-types/base-table';
 
-export function bindChartHoverEvent(table: BaseTableAPI) {
+export function bindSparklineHoverEvent(table: BaseTableAPI) {
   // 判断是否有sparkline 类型
   let hasSparkLine = false;
   if (table.isPivotTable()) {
@@ -27,8 +27,12 @@ export function bindChartHoverEvent(table: BaseTableAPI) {
     const { col, row, x, y } = e;
     const type = table.getBodyColumnType(col, row);
     if (type !== 'sparkline') {
-      table.stateManeger.updateChartHoverPose(-1, -1, 0, 0);
+      table.stateManeger.updateSparklineHoverPose(-1, -1, 0, 0);
     }
-    table.stateManeger.updateChartHoverPose(col, row, x, y);
+    table.stateManeger.updateSparklineHoverPose(col, row, x, y);
+  });
+
+  table.listen(TABLE_EVENT_TYPE.MOUSELEAVE_TABLE, (e: MousePointerCellEvent) => {
+    table.stateManeger.updateSparklineHoverPose(-1, -1, 0, 0);
   });
 }