From 03647c01a19351e4dcaf76cda5264b95d9d14214 Mon Sep 17 00:00:00 2001 From: visiky <736929286@qq.com> Date: Mon, 15 Mar 2021 17:10:00 +0800 Subject: [PATCH] =?UTF-8?q?feat(second-geometry):=20=E8=BE=85=E5=8A=A9?= =?UTF-8?q?=E5=87=A0=E4=BD=95=E5=9B=BE=E5=BD=A2=20point=20=E6=94=AF?= =?UTF-8?q?=E6=8C=81=E7=8B=AC=E7=AB=8B=E8=AE=BE=E7=BD=AE=20state=20style?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/common/point-style.en.md | 1 + docs/common/point-style.zh.md | 1 + .../column-line/demo/slider-culumn-line.ts | 58 ------------------- src/plots/area/adaptor.ts | 22 +++---- src/plots/area/types.ts | 2 +- src/plots/line/adaptor.ts | 5 +- src/plots/line/types.ts | 4 +- src/plots/radar/adaptor.ts | 17 +++--- src/plots/radar/types.ts | 2 +- src/plots/tiny-area/adaptor.ts | 8 ++- src/plots/tiny-area/types.ts | 3 +- src/plots/tiny-line/adaptor.ts | 8 ++- src/plots/tiny-line/types.ts | 3 +- 13 files changed, 39 insertions(+), 95 deletions(-) delete mode 100644 examples/dual-axes/column-line/demo/slider-culumn-line.ts diff --git a/docs/common/point-style.en.md b/docs/common/point-style.en.md index 24d674ced9..10c21b8c90 100644 --- a/docs/common/point-style.en.md +++ b/docs/common/point-style.en.md @@ -4,3 +4,4 @@ | shape | \_string \| Function\_ | The shape of the data point, support callback way, example: `shape: (x, y, series) => string` | | size | _number \| Function_ | The size of the data point, support callback way, example: `size: (x, y, series) => number` | | style | _object \| Function_ | Data point style, support callback way, example: `style: (x, y, series) => object` | +| state | _object_ | State styles of point, setting style of specify state。Refer to [_state_](#state)` | diff --git a/docs/common/point-style.zh.md b/docs/common/point-style.zh.md index d672272a65..d02c9b831f 100644 --- a/docs/common/point-style.zh.md +++ b/docs/common/point-style.zh.md @@ -4,3 +4,4 @@ | shape | _string \| Function_ | 数据点形状，也可以支持回调的方式设置，回调参数为 `shape: (x, y, series) => string` | | size | _number \| Function_ | 数据点大小，也可以支持回调的方式设置，回调参数为 `size: (x, y, series) => number` | | style | _object \| Function_ | 数据点样式，也可以支持回调的方式设置，回调参数为 `style: (x, y, series) => object` | +| state | _object_ | 数据点状态样式，设置对应状态的样式。详细参考 [_state_](#state)` | diff --git a/examples/dual-axes/column-line/demo/slider-culumn-line.ts b/examples/dual-axes/column-line/demo/slider-culumn-line.ts deleted file mode 100644 index 92cf64c05a..0000000000 --- a/examples/dual-axes/column-line/demo/slider-culumn-line.ts +++ /dev/null @@ -1,58 +0,0 @@ -import { DualAxes } from '@antv/g2plot'; - -const data = [ - { time: '2020-08-20', consumeTime: 10868, completeTime: 649.483 }, - { time: '2020-08-21', consumeTime: 8786, completeTime: 1053.7 }, - { time: '2020-08-22', consumeTime: 10824, completeTime: 679.817 }, - { time: '2020-08-23', consumeTime: 7860, completeTime: 638.117 }, - { time: '2020-08-24', consumeTime: 13253, completeTime: 843.3 }, - { time: '2020-08-25', consumeTime: 17015, completeTime: 1092.983 }, - { time: '2020-08-26', consumeTime: 19298, completeTime: 1036.317 }, - { time: '2020-08-27', consumeTime: 13937, completeTime: 1031.9 }, - { time: '2020-08-28', consumeTime: 11541, completeTime: 803.467 }, - { time: '2020-08-29', consumeTime: 15244, completeTime: 830.733 }, - { time: '2020-08-30', consumeTime: 14247, completeTime: 709.867 }, - { time: '2020-08-31', consumeTime: 9402, completeTime: 665.233 }, - { time: '2020-09-01', consumeTime: 10440, completeTime: 696.367 }, - { time: '2020-09-02', consumeTime: 9345, completeTime: 692.867 }, - { time: '2020-09-03', consumeTime: 18459, completeTime: 936.017 }, - { time: '2020-09-04', consumeTime: 9763, completeTime: 782.867 }, - { time: '2020-09-05', consumeTime: 11074, completeTime: 653.8 }, - { time: '2020-09-06', consumeTime: 11770, completeTime: 856.683 }, - { time: '2020-09-07', consumeTime: 12206, completeTime: 777.15 }, - { time: '2020-09-08', consumeTime: 11434, completeTime: 773.283 }, - { time: '2020-09-09', consumeTime: 16218, completeTime: 833.3 }, - { time: '2020-09-10', consumeTime: 11914, completeTime: 793.517 }, - { time: '2020-09-11', consumeTime: 16781, completeTime: 894.45 }, - { time: '2020-09-12', consumeTime: 10555, completeTime: 725.55 }, - { time: '2020-09-13', consumeTime: 10899, completeTime: 709.967 }, - { time: '2020-09-14', consumeTime: 10713, completeTime: 787.6 }, - { time: '2020-09-15', consumeTime: 0, completeTime: 644.183 }, - { time: '2020-09-16', consumeTime: 0, completeTime: 1066.65 }, - { time: '2020-09-17', consumeTime: 20357, completeTime: 932.45 }, - { time: '2020-09-18', consumeTime: 10424, completeTime: 753.583 }, -]; - -const dualAxes = new DualAxes('container', { - data: [data, data], - xField: 'time', - yField: ['consumeTime', 'completeTime'], - limitInPlot: false, - padding: [10, 20, 80, 30], // 需要设置底部 padding 值，同 css - slider: {}, - meta: { - time: { - sync: false, // 开启之后 slider 无法重绘 - }, - }, - geometryOptions: [ - { - geometry: 'column', - }, - { - geometry: 'line', - }, - ], -}); - -dualAxes.render(); diff --git a/src/plots/area/adaptor.ts b/src/plots/area/adaptor.ts index e961b0ff36..960eb9454b 100644 --- a/src/plots/area/adaptor.ts +++ b/src/plots/area/adaptor.ts @@ -1,6 +1,6 @@ import { Geometry } from '@antv/g2'; import { each } from '@antv/util'; -import { tooltip, slider, interaction, animation, theme, annotation, limitInPlot, state } from '../../adaptor/common'; +import { tooltip, slider, interaction, animation, theme, annotation, limitInPlot } from '../../adaptor/common'; import { findGeometry } from '../../utils'; import { Params } from '../../core/adaptor'; import { area, point, line } from '../../adaptor/geometries'; @@ -18,18 +18,10 @@ export { meta }; */ function geometry(params: Params): Params { const { chart, options } = params; - const { - data, - areaStyle, - color, - point: pointMapping, - line: lineMapping, - isPercent, - xField, - yField, - tooltip, - seriesField, - } = options; + const { data, areaStyle, color, line: lineMapping, isPercent, xField, yField, tooltip, seriesField } = options; + + const { state: pointState, ...pointMapping } = options.point || {}; + const chartData = getDataWhetherPecentage(data, yField, xField, yField, isPercent); chart.data(chartData); // 百分比堆积图，默认会给一个 % 格式化逻辑, 用户可自定义 @@ -61,11 +53,12 @@ function geometry(params: Params): Params { }, }); const second = deepAssign({}, primary, { options: { tooltip: false } }); + const pointParams = deepAssign({}, primary, { options: { tooltip: false, state: pointState } }); // area geometry 处理 area(primary); line(second); - point(second); + point(pointParams); return params; } @@ -131,7 +124,6 @@ export function adaptor(params: Params) { meta, adjust, theme, - state, axis, legend, tooltip, diff --git a/src/plots/area/types.ts b/src/plots/area/types.ts index 716904c2d1..fc43376476 100644 --- a/src/plots/area/types.ts +++ b/src/plots/area/types.ts @@ -21,5 +21,5 @@ export interface AreaOptions extends Options { /** 面积中折线的样式 */ readonly line?: LineGeometryOptions['line']; /** 面积图数据点图形样式 */ - readonly point?: PointGeometryOptions['point']; + readonly point?: PointGeometryOptions['point'] & Pick; } diff --git a/src/plots/line/adaptor.ts b/src/plots/line/adaptor.ts index ae10c9d701..61dfbd03da 100644 --- a/src/plots/line/adaptor.ts +++ b/src/plots/line/adaptor.ts @@ -14,7 +14,8 @@ import { LineOptions } from './types'; */ function geometry(params: Params): Params { const { chart, options } = params; - const { data, color, lineStyle, lineShape, point: pointMapping, seriesField } = options; + const { data, color, lineStyle, lineShape, seriesField } = options; + const { state: pointState, ...pointMapping } = options.point || {}; chart.data(data); @@ -38,7 +39,7 @@ function geometry(params: Params): Params { label: undefined, }, }); - const second = deepAssign({}, primary, { options: { tooltip: false } }); + const second = deepAssign({}, primary, { options: { tooltip: false, state: pointState } }); line(primary); point(second); diff --git a/src/plots/line/types.ts b/src/plots/line/types.ts index a77172afde..fec63c348b 100644 --- a/src/plots/line/types.ts +++ b/src/plots/line/types.ts @@ -20,6 +20,6 @@ export interface LineOptions extends Options { readonly lineStyle?: StyleAttr; /** 折线 shape 配置 */ readonly lineShape?: Required['line']['shape']; - /** 折线数据点图形样式 */ - readonly point?: PointGeometryOptions['point']; + /** 折线数据点：1、图形映射属性 2、状态样式 */ + readonly point?: PointGeometryOptions['point'] & Pick; } diff --git a/src/plots/radar/adaptor.ts b/src/plots/radar/adaptor.ts index 85ec568d07..62ec8358e4 100644 --- a/src/plots/radar/adaptor.ts +++ b/src/plots/radar/adaptor.ts @@ -10,7 +10,9 @@ import { RadarOptions } from './types'; */ function geometry(params: Params): Params { const { chart, options } = params; - const { data, lineStyle, color, point: pointOptions, area: areaOptions } = options; + const { data, lineStyle, color, area: areaOptions } = options; + + const { state: pointState, ...pointMapping } = options.point || {}; chart.data(data); @@ -21,12 +23,10 @@ function geometry(params: Params): Params { style: lineStyle, color, }, - point: pointOptions - ? { - color, - ...pointOptions, - } - : pointOptions, + point: pointMapping && { + color, + ...pointMapping, + }, area: areaOptions ? { color, @@ -43,9 +43,10 @@ function geometry(params: Params): Params { tooltip: false, }, }); + const pointParams = deepAssign({}, primary, { options: { tooltip: false, state: pointState } }); line(primary); - point(second); + point(pointParams); area(second); return params; diff --git a/src/plots/radar/types.ts b/src/plots/radar/types.ts index d47e09ba4d..b1fd7d22ae 100644 --- a/src/plots/radar/types.ts +++ b/src/plots/radar/types.ts @@ -13,7 +13,7 @@ export interface RadarOptions extends Options { /** 折线图形样式 */ readonly lineStyle?: ShapeStyle | ((x: any, y: any, series?: any) => ShapeStyle); /** 数据点图形样式 */ - readonly point?: PointGeometryOptions['point']; + readonly point?: PointGeometryOptions['point'] & Pick; /** area 图形样式, 均提供回调的方式, 不开放 field 映射配置 */ readonly area?: AreaGeometryOptions['area']; /** 角度轴配置 */ diff --git a/src/plots/tiny-area/adaptor.ts b/src/plots/tiny-area/adaptor.ts index eac707e003..22e22ab861 100644 --- a/src/plots/tiny-area/adaptor.ts +++ b/src/plots/tiny-area/adaptor.ts @@ -13,7 +13,8 @@ import { TinyAreaOptions } from './types'; */ function geometry(params: Params): Params { const { chart, options } = params; - const { data, color, areaStyle, point: pointOptions, line: lineOptions } = options; + const { data, color, areaStyle, line: lineOptions } = options; + const { state: pointState, ...pointMapping } = options.point || {}; const seriesData = getTinyData(data); @@ -25,15 +26,16 @@ function geometry(params: Params): Params { yField: Y_FIELD, area: { color, style: areaStyle }, line: lineOptions, - point: pointOptions, + point: pointMapping, }, }); const second = deepAssign({}, primary, { options: { tooltip: false } }); + const pointParams = deepAssign({}, primary, { options: { tooltip: false, state: pointState } }); // area geometry 处理 area(primary); line(second); - point(second); + point(pointParams); chart.axis(false); chart.legend(false); diff --git a/src/plots/tiny-area/types.ts b/src/plots/tiny-area/types.ts index 42a2c079ca..7a99fb0245 100644 --- a/src/plots/tiny-area/types.ts +++ b/src/plots/tiny-area/types.ts @@ -1,5 +1,6 @@ import { Options, StyleAttr } from '../../types'; import { MappingOptions } from '../../adaptor/geometries/base'; +import { PointGeometryOptions } from '../../adaptor/geometries/point'; /** mini 图类型定义需要 omit 很多的 G2 Options 配置 */ export interface TinyAreaOptions extends Omit { @@ -12,5 +13,5 @@ export interface TinyAreaOptions extends Omit; } diff --git a/src/plots/tiny-line/adaptor.ts b/src/plots/tiny-line/adaptor.ts index ab3036106d..46fd4e1d0c 100644 --- a/src/plots/tiny-line/adaptor.ts +++ b/src/plots/tiny-line/adaptor.ts @@ -15,7 +15,9 @@ export { meta }; */ function geometry(params: Params): Params { const { chart, options } = params; - const { data, color, lineStyle, point: pointMapping } = options; + const { data, color, lineStyle } = options; + + const { state: pointState, ...pointMapping } = options.point || {}; const seriesData = getTinyData(data); @@ -33,10 +35,10 @@ function geometry(params: Params): Params { point: pointMapping, }, }); - const second = deepAssign({}, primary, { options: { tooltip: false } }); + const pointParams = deepAssign({}, primary, { options: { tooltip: false, state: pointState } }); line(primary); - point(second); + point(pointParams); chart.axis(false); chart.legend(false); diff --git a/src/plots/tiny-line/types.ts b/src/plots/tiny-line/types.ts index 2126bd9a51..70715d4a95 100644 --- a/src/plots/tiny-line/types.ts +++ b/src/plots/tiny-line/types.ts @@ -1,5 +1,6 @@ import { Options, StyleAttr } from '../../types'; import { MappingOptions } from '../../adaptor/geometries/base'; +import { PointGeometryOptions } from '../../adaptor/geometries/point'; /** mini 图类型定义需要 omit 很多的 G2 Options 配置 */ export interface TinyLineOptions extends Omit { @@ -12,5 +13,5 @@ export interface TinyLineOptions extends Omit; }