diff --git a/.github/ISSUE_TEMPLATE/bug_report.yml b/.github/ISSUE_TEMPLATE/bug_report.yml
index 339c6a4e9..d11131bb7 100644
--- 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
index 5384ed51b..479a5c2b1 100644
--- 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
new file mode 100644
index 000000000..d692af326
--- /dev/null
+++ 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
index c9842b9f9..0187d132f 100644
--- 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
index 86a054dfb..7b48ea16a 100644
--- 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
index ba7eb3cac..9f19dc048 100644
--- 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
index 0aa9a829e..28abe6332 100644
--- a/packages/vtable/site-demo/cell-type/multi-type.md
+++ b/packages/vtable/site-demo/cell-type/multi-type.md
@@ -154,7 +154,6 @@ const columns = [
pointShowRule: 'none',
smooth: true,
line: {
- visible: true,
style: {
stroke: '#2E62F1',
strokeWidth: 2,
@@ -162,14 +161,12 @@ const columns = [
},
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
index fd524f255..53c50c3da 100644
--- 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 b/packages/vtable/src/event/sparkline-event.ts
similarity index 75%
rename from packages/vtable/src/event/chart.ts
rename to packages/vtable/src/event/sparkline-event.ts
index 9551bf0b6..55effb384 100644
--- a/packages/vtable/src/event/chart.ts
+++ b/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);
});
}
diff --git a/packages/vtable/src/layout/simple-header-layout.ts b/packages/vtable/src/layout/simple-header-layout.ts
index bc819d8ba..e535d54f6 100644
--- a/packages/vtable/src/layout/simple-header-layout.ts
+++ b/packages/vtable/src/layout/simple-header-layout.ts
@@ -1,5 +1,6 @@
/* eslint-disable sort-imports */
import type { ListTable } from '../ListTable';
+import { DefaultSparklineSpec } from '../tools/global';
import type { CellAddress, CellRange, CellType, IListTableCellHeaderPaths, LayoutObjectId } from '../ts-types';
import type { ColumnsDefine, TextColumnDefine } from '../ts-types/list-table/define';
import type {
@@ -468,7 +469,7 @@ export class SimpleHeaderLayoutMap implements LayoutMapAPI {
columnType: colDef.columnType ?? 'text',
chartType: 'chartType' in colDef ? colDef.chartType : null, // todo: 放到对应的column对象中
chartSpec: 'chartSpec' in colDef ? colDef.chartSpec : null, // todo: 放到对应的column对象中
- sparklineSpec: 'sparklineSpec' in colDef ? colDef.sparklineSpec : null, // todo: 放到对应的column对象中
+ sparklineSpec: 'sparklineSpec' in colDef ? colDef.sparklineSpec : DefaultSparklineSpec, // todo: 放到对应的column对象中
style: colDef.style,
define: colDef,
columnWidthComputeMode: colDef.columnWidthComputeMode,
diff --git a/packages/vtable/src/scenegraph/group-creater/cell-type/spark-line-cell.ts b/packages/vtable/src/scenegraph/group-creater/cell-type/spark-line-cell.ts
index ecb482edf..dfac55db3 100644
--- a/packages/vtable/src/scenegraph/group-creater/cell-type/spark-line-cell.ts
+++ b/packages/vtable/src/scenegraph/group-creater/cell-type/spark-line-cell.ts
@@ -119,6 +119,12 @@ function createSparkLine(
const indexValues = dataValue.map((value: any) => value[sparklineSpec.xField as string]);
xScale.domain(indexValues);
xField = sparklineSpec.xField;
+ } else {
+ // xField未配置 data为数值数组的情况
+ if (Array.isArray(dataValue)) {
+ xScale.domain(Array.from({ length: dataValue.length }, (_, i) => i));
+ xField = sparklineSpec.xField;
+ }
}
xScale.range([0, width]);
@@ -130,6 +136,12 @@ function createSparkLine(
const values = dataValue.map((value: any) => value[sparklineSpec.yField as string]);
yScale.domain([Math.min(...values), Math.max(...values)]);
yField = sparklineSpec.yField;
+ } else {
+ // yField未配置 检查data是否为数值数组
+ if (Array.isArray(dataValue) && dataValue.every((value: any) => typeof value === 'number')) {
+ yScale.domain([Math.min(...dataValue), Math.max(...dataValue)]);
+ yField = sparklineSpec.yField;
+ }
}
yScale.range([0, height]);
@@ -172,9 +184,9 @@ function createSparkLine(
for (let i = 0; i < dataValue.length; i++) {
const data: any = dataValue[i];
items.push({
- x: left + xScale.scale(data[xField]),
- y: bottom - yScale.scale(data[yField]),
- defined: isValid(data[yField]),
+ x: left + xScale.scale(xField ? data[xField] : i),
+ y: bottom - yScale.scale(yField ? data[yField] : data),
+ defined: isValid(yField ? data[yField] : data),
rawData: data
} as any);
dataItems.push(data);
@@ -194,8 +206,8 @@ function createSparkLine(
// 更新symbol节点属性
const symbolGroup = chartGroup.getChildByName('sparkline-symbol-group') as ILine;
if (symbolGroup) {
- const isShowIsolatedPoint = sparklineSpec.symbol.visible && sparklineSpec.pointShowRule === 'isolatedPoint';
- if (sparklineSpec.symbol.visible && sparklineSpec.pointShowRule === 'all') {
+ const isShowIsolatedPoint = sparklineSpec.point?.visible && sparklineSpec.pointShowRule === 'isolatedPoint';
+ if (sparklineSpec.point?.visible && sparklineSpec.pointShowRule === 'all') {
for (let i = 0; i < items.length; i++) {
const { x, y, defined } = items[i];
if (defined) {
@@ -246,13 +258,18 @@ function createChartGroup(
const line = createLine({
x: 0,
y: 0,
- curveType: specObj.smooth || specObj.line.style.interpolate === 'monotone' ? 'monotoneX' : 'linear',
- strokeColor: specObj.line.style.stroke,
- lineWidth: specObj.line.style.strokeWidth
+ curveType: specObj.smooth ?? specObj.line?.style?.interpolate === 'linear' ? 'linear' : 'monotoneX',
+ strokeColor: specObj.line?.style?.stroke ?? 'blue',
+ lineWidth: specObj.line?.style?.strokeWidth ?? 2
});
line.name = 'sparkline-line';
group.addChild(line);
- (line as any).hover = specObj.crosshair.style;
+ if (specObj.crosshair) {
+ (line as any).hover = specObj.crosshair?.style ?? {
+ stroke: '#000',
+ interpolate: 'linear'
+ };
+ }
// 生成symbol
const symbolGroup = new Group({
@@ -266,15 +283,15 @@ function createChartGroup(
symbol: {
fill: true,
stroke: true,
- strokeColor: specObj.symbol.style.stroke,
- lineWidth: specObj.symbol.style.strokeWidth,
- fillColor: specObj.symbol.style.fill,
- size: specObj.symbol.style.size * 2, // 之前配置的是圆半径
+ strokeColor: specObj.point?.style?.stroke ?? '#000',
+ lineWidth: specObj.point?.style?.strokeWidth ?? 1,
+ fillColor: specObj.point?.style?.fill ?? '#000',
+ size: (specObj.point?.style?.size ?? 3) * 2, // 之前配置的是圆半径
symbolType: 'circle'
}
});
group.addChild(symbolGroup);
- (symbolGroup as any).hover = specObj.symbol.state.hover;
+ (symbolGroup as any).hover = specObj.point?.hover ?? false;
}
return group;
}
diff --git a/packages/vtable/src/state/state.ts b/packages/vtable/src/state/state.ts
index 23f89fb68..4d3d6e9b2 100644
--- a/packages/vtable/src/state/state.ts
+++ b/packages/vtable/src/state/state.ts
@@ -921,7 +921,7 @@ export class StateManeger {
updateDrill(col, row, drillDown, drillUp, this.table);
}
- updateChartHoverPose(col: number, row: number, x: number, y: number) {
+ updateSparklineHoverPose(col: number, row: number, x: number, y: number) {
if (this.sparkLine.col !== -1 && this.sparkLine.row !== -1) {
clearChartHover(this.sparkLine.col, this.sparkLine.row, this.table);
}
diff --git a/packages/vtable/src/tools/global.ts b/packages/vtable/src/tools/global.ts
index c2340ff62..88820313c 100644
--- a/packages/vtable/src/tools/global.ts
+++ b/packages/vtable/src/tools/global.ts
@@ -1,3 +1,5 @@
+import type { SparklineSpec } from '../ts-types';
+
export const DEFAULTFONT = '16px sans-serif'; //默认字体
export const DEFAULTFONTSIZE = 16; //默认字号
export const DEFAULTFONTFAMILY = 'sans-serif'; //默认字体
@@ -21,3 +23,7 @@ export const IndicatorDimensionKeyPlaceholder = '$$indicator$$';
// svg path
export const DrillDown = ``;
export const DrillUp = ``;
+
+export const DefaultSparklineSpec: SparklineSpec = {
+ type: 'line'
+};
diff --git a/packages/vtable/src/ts-types/index.ts b/packages/vtable/src/ts-types/index.ts
index ece5bc4be..ed1615329 100644
--- a/packages/vtable/src/ts-types/index.ts
+++ b/packages/vtable/src/ts-types/index.ts
@@ -8,7 +8,7 @@ export * from './new-data-set';
export * from './table-engine';
export * from './customElement';
export * from './customLayout';
-export * from './chartType';
+export * from './sparkline';
export * from './menu';
export * from './icon';
export * from './list-table';
diff --git a/packages/vtable/src/ts-types/list-table/define/index.ts b/packages/vtable/src/ts-types/list-table/define/index.ts
index 6949a36eb..fec7ba506 100644
--- a/packages/vtable/src/ts-types/list-table/define/index.ts
+++ b/packages/vtable/src/ts-types/list-table/define/index.ts
@@ -6,15 +6,15 @@ import type { ITextColumnBodyDefine, ITextHeaderDefine } from './multilinetext-d
import type { IProgressbarColumnBodyDefine } from './progressbar-define';
import type { ISparklineColumnBodyDefine } from './sparkline-define';
-export type HeaderDefine = ITextHeaderDefine | ILinkHeaderDefine | IImageHeaderDefine;
+export type HeaderDefine = IImageHeaderDefine | ILinkHeaderDefine | ITextHeaderDefine;
export type ColumnBodyDefine =
- | ITextColumnBodyDefine
| ILinkColumnBodyDefine
| IImageColumnBodyDefine
| ISparklineColumnBodyDefine
| IProgressbarColumnBodyDefine
- | IChartColumnBodyDefine;
+ | IChartColumnBodyDefine
+ | ITextColumnBodyDefine;
export type TextColumnDefine = ITextColumnBodyDefine & HeaderDefine;
export type LinkColumnDefine = ILinkColumnBodyDefine & HeaderDefine;
export type ImageColumnDefine = IImageColumnBodyDefine & HeaderDefine;
@@ -27,12 +27,12 @@ export type GroupColumnDefine = HeaderDefine & {
hideColumnsSubHeader?: boolean;
};
export type ColumnDefine = Either<
- | TextColumnDefine
| LinkColumnDefine
| ImageColumnDefine
| SparklineColumnDefine
| ProgressbarColumnDefine
- | ChartColumnDefine,
+ | ChartColumnDefine
+ | TextColumnDefine,
GroupColumnDefine
>;
diff --git a/packages/vtable/src/ts-types/list-table/define/sparkline-define.ts b/packages/vtable/src/ts-types/list-table/define/sparkline-define.ts
index 122bfb1a3..f2d5134e1 100644
--- a/packages/vtable/src/ts-types/list-table/define/sparkline-define.ts
+++ b/packages/vtable/src/ts-types/list-table/define/sparkline-define.ts
@@ -1,4 +1,4 @@
-import type { SparklineSpec } from '../../chartType';
+import type { SparklineSpec } from '../../sparkline';
import type { IStyleOption } from '../../column';
import type { CellInfo } from '../../common';
import type { StylePropertyFunctionArg } from '../../style-define';
diff --git a/packages/vtable/src/ts-types/pivot-table/indicator/sparkline-indicator.ts b/packages/vtable/src/ts-types/pivot-table/indicator/sparkline-indicator.ts
index f0ddd3530..c84a084ef 100644
--- a/packages/vtable/src/ts-types/pivot-table/indicator/sparkline-indicator.ts
+++ b/packages/vtable/src/ts-types/pivot-table/indicator/sparkline-indicator.ts
@@ -1,4 +1,4 @@
-import type { SparklineSpec } from '../../chartType';
+import type { SparklineSpec } from '../../sparkline';
import type { IStyleOption } from '../../column';
import type { CellInfo } from '../../common';
import type { StylePropertyFunctionArg } from '../../style-define';
diff --git a/packages/vtable/src/ts-types/chartType.ts b/packages/vtable/src/ts-types/sparkline.ts
similarity index 50%
rename from packages/vtable/src/ts-types/chartType.ts
rename to packages/vtable/src/ts-types/sparkline.ts
index 17b57cee4..84244ac3e 100644
--- a/packages/vtable/src/ts-types/chartType.ts
+++ b/packages/vtable/src/ts-types/sparkline.ts
@@ -2,47 +2,40 @@ export type ShapeType = 'circle';
export interface SparklineSpec {
type: 'line';
- xField:
+ xField?:
| string
| {
field: string;
- type: 'point' | 'linear';
domain?: any[];
- domainMin?: number;
- domainMax?: number;
};
- yField:
+ yField?:
| string
| {
field: string;
- type: 'point' | 'linear';
domain?: any[];
- domainMin?: number;
- domainMax?: number;
};
- pointShowRule: 'all' | 'none' | 'isolatedPoint';
+ /** all表示正常连接前后点 none表示不会只孤立点 isolatedPoint表示只绘制孤立点的点图形 默认为none */
+ pointShowRule?: 'all' | 'none' | 'isolatedPoint';
smooth?: boolean;
- line: {
- visible: boolean;
- // interactive: boolean;
+ /** 折线配置 */
+ line?: {
+ /** 折线样式 */
style: ILineMarkStyle;
- state?: {
- hover?: ILineMarkStyle | false;
- selected?: ILineMarkStyle | false;
- };
};
- symbol: {
- visible: boolean;
- // interactive: boolean;
+ /** 数据点配置 默认不显示 */
+ point?: {
+ /** 折线上每个点都显示 默认false*/
+ visible?: boolean;
style: ISymbolMarkStyle;
- state?: {
- hover?: ISymbolMarkStyle | false;
- selected?: ISymbolMarkStyle | false;
- };
+ hover?: ISymbolMarkStyle | false;
};
- crosshair: {
+ /** crosshair交叉线配置 默认不显示*/
+ crosshair?: {
+ /** crosshair交叉线样式 */
style: ILineMarkStyle;
};
+
+ //TODO 增加label
}
interface IMarkStyle {
fill?: string;
@@ -51,7 +44,7 @@ interface IMarkStyle {
}
interface ILineMarkStyle extends IMarkStyle {
- stroke: string;
+ stroke?: string;
interpolate?: 'linear' | 'monotone';
}