From 0d5e4dc6f1e308aeacc2a994149da36f8011a715 Mon Sep 17 00:00:00 2001 From: arcsin1 Date: Thu, 24 Sep 2020 08:30:17 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E6=98=BE=E7=A4=BA?= =?UTF-8?q?=E7=9B=AE=E6=A0=87=E5=80=BClabel=20#1599=20(#1605)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: 重构api,清晰分离各种通道元素 * feat: 更新新版api * fix: 误提交本地的 --- __tests__/unit/plots/bullet/axis-spec.ts | 6 +-- __tests__/unit/plots/bullet/index-spec.ts | 52 +++++++------------ __tests__/unit/plots/bullet/label-spec.ts | 34 ++++++++++-- __tests__/unit/plots/bullet/legend-spec.ts | 28 +++------- __tests__/unit/plots/bullet/tooltip-spec.ts | 8 +-- examples/bullet/basic/API.en.md | 56 ++++++++++++++------ examples/bullet/basic/API.zh.md | 57 +++++++++++++++------ examples/bullet/basic/demo/basic.ts | 2 +- examples/bullet/basic/demo/color.ts | 14 ++--- examples/bullet/basic/demo/grouped.ts | 22 ++++---- examples/bullet/basic/demo/layout.ts | 24 ++++----- examples/bullet/basic/demo/stacked.ts | 22 ++++---- src/plots/bullet/adaptor.ts | 36 ++++++++----- src/plots/bullet/index.ts | 25 ++++----- src/plots/bullet/types.ts | 33 ++++++------ 15 files changed, 231 insertions(+), 188 deletions(-) diff --git a/__tests__/unit/plots/bullet/axis-spec.ts b/__tests__/unit/plots/bullet/axis-spec.ts index d1abe3f9e8..5399b77731 100644 --- a/__tests__/unit/plots/bullet/axis-spec.ts +++ b/__tests__/unit/plots/bullet/axis-spec.ts @@ -19,10 +19,8 @@ describe('axis bullet', () => { max: 120, }, }, - bulletStyle: { - range: { - color: rangeColors, - }, + color: { + range: rangeColors, }, }); diff --git a/__tests__/unit/plots/bullet/index-spec.ts b/__tests__/unit/plots/bullet/index-spec.ts index f2138b00cb..bb8f4a6a23 100644 --- a/__tests__/unit/plots/bullet/index-spec.ts +++ b/__tests__/unit/plots/bullet/index-spec.ts @@ -19,6 +19,8 @@ describe('bullet', () => { const chart = bullet.chart; const rangeGeometry = chart.geometries[0]; + const rangeElements = rangeGeometry.elements[0]; + expect(rangeElements.shape.attr('fillOpacity')).toBe(0.5); expect(rangeGeometry.getAttribute('size').values[0]).toEqual(30); expect(rangeGeometry.getAdjust('stack')).toMatchObject({ @@ -36,6 +38,8 @@ describe('bullet', () => { }); expect(measureGeometry.getYScale().max).toEqual(100); expect(measureGeometry.getYScale().min).toEqual(0); + //@ts-ignore + expect(measureGeometry.labelOption.cfg.position).toEqual('right'); const targetGeometry = chart.geometries[2]; expect(targetGeometry.getAttribute('size').values[0]).toEqual(20 / 2); @@ -80,10 +84,8 @@ describe('bullet', () => { rangeField: 'ranges', targetField: 'target', xField: 'title', - bulletStyle: { - measure: { - color: '#ff0000', - }, + color: { + measure: '#ff0000', }, }); @@ -108,10 +110,8 @@ describe('bullet', () => { rangeField: 'ranges', targetField: 'target', xField: 'title', - bulletStyle: { - target: { - color: 'red', - }, + color: { + target: 'red', }, }); @@ -132,10 +132,8 @@ describe('bullet', () => { rangeField: 'ranges', targetField: 'target', xField: 'title', - bulletStyle: { - range: { - color: rangeColors, - }, + color: { + range: rangeColors, }, }); @@ -163,10 +161,8 @@ describe('bullet', () => { rangeField: 'ranges', targetField: 'target', xField: 'title', - bulletStyle: { - measure: { - color: measureColors, - }, + color: { + measure: measureColors, }, }); @@ -192,13 +188,9 @@ describe('bullet', () => { rangeField: 'ranges', targetField: 'target', xField: 'title', - bulletStyle: { - measure: { - size: measureSize, - }, - range: { - size: rangeSize, - }, + size: { + measure: measureSize, + range: rangeSize, }, }); @@ -231,16 +223,10 @@ describe('bullet', () => { rangeField: 'ranges', targetField: 'target', xField: 'title', - bulletStyle: { - measure: { - size: measureSize, - }, - range: { - size: rangeSize, - }, - target: { - size: targetSize, - }, + size: { + measure: measureSize, + range: rangeSize, + target: targetSize, }, }); diff --git a/__tests__/unit/plots/bullet/label-spec.ts b/__tests__/unit/plots/bullet/label-spec.ts index 490cb145f9..ca1789642a 100644 --- a/__tests__/unit/plots/bullet/label-spec.ts +++ b/__tests__/unit/plots/bullet/label-spec.ts @@ -13,9 +13,23 @@ describe('bullet*label', () => { targetField: 'target', xField: 'title', label: { - position: 'middle', - style: { - fill: '#fff', + range: { + position: 'middle', + style: { + fill: '#fff', + }, + }, + measure: { + position: 'middle', + style: { + fill: '#fff', + }, + }, + target: { + position: 'right', + style: { + fill: '#fff', + }, }, }, }); @@ -23,14 +37,26 @@ describe('bullet*label', () => { bullet.render(); const chart = bullet.chart; - const measureGeometry = chart.geometries[1]; + const [rangeGeometry, measureGeometry, targetGeometry] = chart.geometries; + + // @ts-ignore + expect(rangeGeometry.labelOption.cfg.position).toEqual('middle'); + // @ts-ignore + expect(rangeGeometry.labelOption.cfg.style.fill).toEqual('#fff'); + expect(measureGeometry.getAdjust('stack')).toMatchObject({ xField: 'title', yField: 'measures', }); + // @ts-ignore expect(measureGeometry.labelOption.cfg.position).toEqual('middle'); // @ts-ignore expect(measureGeometry.labelOption.cfg.style.fill).toEqual('#fff'); + + // @ts-ignore + expect(targetGeometry.labelOption.cfg.position).toEqual('right'); + // @ts-ignore + expect(targetGeometry.labelOption.cfg.style.fill).toEqual('#fff'); }); }); diff --git a/__tests__/unit/plots/bullet/legend-spec.ts b/__tests__/unit/plots/bullet/legend-spec.ts index 3ae8e322e3..7a6383d92a 100644 --- a/__tests__/unit/plots/bullet/legend-spec.ts +++ b/__tests__/unit/plots/bullet/legend-spec.ts @@ -13,16 +13,10 @@ describe('bullet*legend', () => { rangeField: 'ranges', targetField: 'target', xField: 'title', - bulletStyle: { - range: { - color: rangeColors, - }, - measure: { - color: ['red', 'green'], - }, - target: { - color: 'blue', - }, + color: { + range: rangeColors, + measure: ['red', 'green'], + target: 'blue', }, legend: { custom: true, @@ -83,16 +77,10 @@ describe('bullet*legend', () => { rangeField: 'ranges', targetField: 'target', xField: 'title', - bulletStyle: { - range: { - color: rangeColors, - }, - measure: { - color: ['red', 'green'], - }, - target: { - color: 'blue', - }, + color: { + range: rangeColors, + measure: ['red', 'green'], + target: 'blue', }, legend: { custom: true, diff --git a/__tests__/unit/plots/bullet/tooltip-spec.ts b/__tests__/unit/plots/bullet/tooltip-spec.ts index 1404905fbc..018446e9e0 100644 --- a/__tests__/unit/plots/bullet/tooltip-spec.ts +++ b/__tests__/unit/plots/bullet/tooltip-spec.ts @@ -13,9 +13,11 @@ describe('tooltip bullet', () => { targetField: 'target', xField: 'title', label: { - position: 'middle', - style: { - fill: '#fff', + measure: { + position: 'middle', + style: { + fill: '#fff', + }, }, }, tooltip: { diff --git a/examples/bullet/basic/API.en.md b/examples/bullet/basic/API.en.md index 2c0d1df281..892306bc8a 100644 --- a/examples/bullet/basic/API.en.md +++ b/examples/bullet/basic/API.en.md @@ -73,30 +73,56 @@ bulletPlot.render(); ### 图形样式 -#### bulletStyle ✨ +#### style ✨ **可选**, _object_ -功能描述： 设置子弹图样式。 +功能描述： 设置子弹图各图形 style 属性。 默认配置： 无 -| 细分配置 | 类型 | 功能描述 | -| -------- | ------------ | ------------ | -| range | _BasicStyle_ | 区间背景样式 | -| measure | _BasicStyle_ | 实际值样式 | -| target | _BasicStyle_ | 目标值样式 | +| 细分配置 | 类型 | 功能描述 | 默认配置 | +| -------- | ----------- | ------------ | -------------------- | +| range | _StyleAttr_ | 区间背景样式 | { fillOpacity: 0.5 } | +| measure | _StyleAttr_ | 实际值样式 | 无 | +| target | _StyleAttr_ | 目标值样式 | 无 | -```ts -type BasicStyle = { - color?: string | string[] | ((...args: any[]) => string); - style?: ShapeAttrs; - size?: number; -}; -``` +`markdown:docs/common/shape-style.zh.md` + +### color ✨ + +**可选**, _object_ + +功能描述： 设置子弹图各图形 color 属性。 + +默认配置： 无 + +| 细分配置 | 类型 | 功能描述 | 默认配置 | +| -------- | ----------- | ------------ | -------- | +| range | _colorAttr_ | 区间背景颜色 | 无 | +| measure | _colorAttr_ | 实际值颜色 | 无 | +| target | _colorAttr_ | 目标值颜色 | 无 | -`markdown:docs/common/shape-style.en.md` +`markdown:docs/common/color.zh.md` +### size ✨ + +**可选**, _object_ + +功能描述： 设置子弹图各图形 size 属性。 + +默认配置： 无 + +| 细分配置 | 类型 | 功能描述 | 默认配置 | +| -------- | ---------- | ------------ | -------- | +| range | _SizeAttr_ | 区间背景样式 | 30 | +| measure | _SizeAttr_ | 实际值样式 | 20 | +| target | _SizeAttr_ | 目标值样式 | 20 | + +```plain +type SizeAttr = number | [number, number] | ((datum: Datum) => number); + +``` ### 图表组件 `markdown:docs/common/component.en.md` diff --git a/examples/bullet/basic/API.zh.md b/examples/bullet/basic/API.zh.md index 5a84fc50c3..89a0ac2c55 100644 --- a/examples/bullet/basic/API.zh.md +++ b/examples/bullet/basic/API.zh.md @@ -73,30 +73,57 @@ bulletPlot.render(); ### 图形样式 -#### bulletStyle ✨ +#### style ✨ **可选**, _object_ -功能描述： 设置子弹图样式。 +功能描述： 设置子弹图各图形 style 属性。 默认配置： 无 -| 细分配置 | 类型 | 功能描述 | -| -------- | ------------ | ------------ | -| range | _BasicStyle_ | 区间背景样式 | -| measure | _BasicStyle_ | 实际值样式 | -| target | _BasicStyle_ | 目标值样式 | - -```ts -type BasicStyle = { - color?: string | string[] | ((...args: any[]) => string); - style?: ShapeAttrs; - size?: number; -}; -``` +| 细分配置 | 类型 | 功能描述 | 默认配置 | +| -------- | ----------- | ------------ | -------------------- | +| range | _StyleAttr_ | 区间背景样式 | { fillOpacity: 0.5 } | +| measure | _StyleAttr_ | 实际值样式 | 无 | +| target | _StyleAttr_ | 目标值样式 | 无 | `markdown:docs/common/shape-style.zh.md` +### color ✨ + +**可选**, _object_ + +功能描述： 设置子弹图各图形 color 属性。 + +默认配置： 无 + +| 细分配置 | 类型 | 功能描述 | 默认配置 | +| -------- | ----------- | ------------ | -------- | +| range | _colorAttr_ | 区间背景颜色 | 无 | +| measure | _colorAttr_ | 实际值颜色 | 无 | +| target | _colorAttr_ | 目标值颜色 | 无 | + +`markdown:docs/common/color.zh.md` + +### size ✨ + +**可选**, _object_ + +功能描述： 设置子弹图各图形 size 属性。 + +默认配置： 无 + +| 细分配置 | 类型 | 功能描述 | 默认配置 | +| -------- | ---------- | ------------ | -------- | +| range | _SizeAttr_ | 区间背景样式 | 30 | +| measure | _SizeAttr_ | 实际值样式 | 20 | +| target | _SizeAttr_ | 目标值样式 | 20 | + +```plain +type SizeAttr = number | [number, number] | ((datum: Datum) => number); + +``` + ### 图表组件 `markdown:docs/common/component.zh.md` diff --git a/examples/bullet/basic/demo/basic.ts b/examples/bullet/basic/demo/basic.ts index 3c53394b1d..93db5d3070 100644 --- a/examples/bullet/basic/demo/basic.ts +++ b/examples/bullet/basic/demo/basic.ts @@ -15,7 +15,7 @@ const bulletPlot = new Bullet('container', { rangeField: 'ranges', targetField: 'target', xField: 'title', - bulletStyle: { + style: { range: { color: '#5B8FF9', }, diff --git a/examples/bullet/basic/demo/color.ts b/examples/bullet/basic/demo/color.ts index 5ba9e56e05..f4eefb2acc 100644 --- a/examples/bullet/basic/demo/color.ts +++ b/examples/bullet/basic/demo/color.ts @@ -15,16 +15,10 @@ const bulletPlot = new Bullet('container', { rangeField: 'ranges', targetField: 'target', xField: 'title', - bulletStyle: { - range: { - color: ['#FFB1AC', '#FFDBA2', '#B4EBBF'], - }, - measure: { - color: '#5B8FF9', - }, - target: { - color: '#5B8FF9', - }, + color: { + range: ['#FFB1AC', '#FFDBA2', '#B4EBBF'], + measure: '#5B8FF9', + target: '#5B8FF9', }, xAxis: { line: null, diff --git a/examples/bullet/basic/demo/grouped.ts b/examples/bullet/basic/demo/grouped.ts index e960e5ac2f..2fa3d2f3f4 100644 --- a/examples/bullet/basic/demo/grouped.ts +++ b/examples/bullet/basic/demo/grouped.ts @@ -33,21 +33,17 @@ const bulletPlot = new Bullet('container', { rangeField: 'ranges', targetField: 'target', xField: 'title', - bulletStyle: { - range: { - color: ['#FFB1AC', '#FFDBA2', '#B4EBBF'], - }, - measure: { - color: ['#5B8FF9'], - }, - target: { - color: '#5B8FF9', - }, + color: { + range: ['#FFB1AC', '#FFDBA2', '#B4EBBF'], + measure: '#5B8FF9', + target: '#5B8FF9', }, label: { - position: 'middle', - style: { - fill: '#fff', + measure: { + position: 'middle', + style: { + fill: '#fff', + }, }, }, xAxis: { diff --git a/examples/bullet/basic/demo/layout.ts b/examples/bullet/basic/demo/layout.ts index cad9e7c7a2..18ded7650b 100644 --- a/examples/bullet/basic/demo/layout.ts +++ b/examples/bullet/basic/demo/layout.ts @@ -16,26 +16,22 @@ const bulletPlot = new Bullet('container', { rangeField: 'ranges', targetField: 'target', xField: 'title', - bulletStyle: { - range: { - color: '#5B8FF9', - }, - measure: { - color: '#5B8FF9', - }, - target: { - color: '#5B8FF9', - }, + color: { + range: '#5B8FF9', + measure: '#5B8FF9', + target: '#5B8FF9', }, xAxis: { line: null, }, yAxis: false, layout: 'vertical', - label: { - position: 'middle', - style: { - fill: '#fff', + bulletLabel: { + measure: { + position: 'middle', + style: { + fill: '#fff', + }, }, }, // 自定义 legend diff --git a/examples/bullet/basic/demo/stacked.ts b/examples/bullet/basic/demo/stacked.ts index b957ca4909..5fcdf8d7b2 100644 --- a/examples/bullet/basic/demo/stacked.ts +++ b/examples/bullet/basic/demo/stacked.ts @@ -15,21 +15,17 @@ const bulletPlot = new Bullet('container', { rangeField: 'ranges', targetField: 'target', xField: 'title', - bulletStyle: { - range: { - color: ['#FFB1AC', '#FFDBA2', '#B4EBBF'], - }, - measure: { - color: ['#5B8FF9', '#5AD8A6'], - }, - target: { - color: '#5B8FF9', - }, + color: { + range: ['#FFB1AC', '#FFDBA2', '#B4EBBF'], + measure: ['#5B8FF9', '#5AD8A6'], + target: '#5B8FF9', }, label: { - position: 'middle', - style: { - fill: '#fff', + measure: { + position: 'middle', + style: { + fill: '#fff', + }, }, }, xAxis: { diff --git a/src/plots/bullet/adaptor.ts b/src/plots/bullet/adaptor.ts index 52bd5a316f..5e3b0ebbd1 100644 --- a/src/plots/bullet/adaptor.ts +++ b/src/plots/bullet/adaptor.ts @@ -13,8 +13,7 @@ import { transformData } from './utils'; */ function geometry(params: Params): Params { const { chart, options } = params; - const { bulletStyle, targetField, rangeField, measureField, xField, layout } = options; - const { range, measure, target } = bulletStyle; + const { style, targetField, rangeField, measureField, xField, color, layout, size } = options; // 处理数据 const { min, max, ds } = transformData(options); @@ -43,9 +42,9 @@ function geometry(params: Params): Params { seriesField: 'rKey', isStack: true, interval: { - color: range.color, - style: range.style, - size: range.size, + color: color?.range, + style: style?.range, + size: size?.range, }, }, }); @@ -61,9 +60,9 @@ function geometry(params: Params): Params { seriesField: 'mKey', isStack: true, interval: { - color: measure.color, - style: measure.style, - size: measure.size, + color: color?.measure, + style: style?.measure, + size: size?.measure, }, }, }); @@ -76,9 +75,9 @@ function geometry(params: Params): Params { yField: targetField, seriesField: 'tKey', point: { - color: target.color, - style: target.style, - size: isNumber(target.size) ? Number(target.size) / 2 : target.size, + color: color?.target, + style: style?.target, + size: isNumber(size?.target) ? Number(size.target) / 2 : size.target, shape: layout === 'horizontal' ? 'line' : 'hyphen', }, }, @@ -160,9 +159,18 @@ function legend(params: Params): Params { */ function label(params: Params): Params { const { chart, options } = params; - const { label, measureField } = options; - const measureGeometry = chart.geometries[1]; - measureGeometry.label(`${measureField}`, label); + const { label, measureField, targetField, rangeField } = options; + const [rangeGeometry, measureGeometry, targetGeometry] = chart.geometries; + + if (label?.range) { + rangeGeometry.label(`${rangeField}`, label.range); + } + if (label?.measure) { + measureGeometry.label(`${measureField}`, label.measure); + } + if (label?.target) { + targetGeometry.label(`${targetField}`, label.target); + } return params; } diff --git a/src/plots/bullet/index.ts b/src/plots/bullet/index.ts index a4acac9369..f4c2a3e152 100644 --- a/src/plots/bullet/index.ts +++ b/src/plots/bullet/index.ts @@ -19,24 +19,21 @@ export class Bullet extends Plot { protected getDefaultOptions() { return deepMix({}, super.getDefaultOptions(), { - label: { - position: 'right', - }, layout: 'horizontal', - legend: false, - bulletStyle: { - target: { - size: 20, - style: { - lineWidth: 2, - }, - }, + legend: false, // 默认关掉 + size: { + range: 30, + measure: 20, + target: 20, + }, + style: { range: { - size: 30, - style: { fillOpacity: 0.5 }, + fillOpacity: 0.5, }, + }, + label: { measure: { - size: 20, + position: 'right', }, }, }); diff --git a/src/plots/bullet/types.ts b/src/plots/bullet/types.ts index c703c8e82b..ff9dddc5ea 100644 --- a/src/plots/bullet/types.ts +++ b/src/plots/bullet/types.ts @@ -1,13 +1,14 @@ import { GeometryLabelCfg } from '@antv/g2/lib/interface'; -import { Options, ColorAttr, SizeAttr, StyleAttr } from '../../types'; +import { Options, ColorAttr, SizeAttr, StyleAttr, Datum } from '../../types'; -type BasicStyle = { - color?: ColorAttr; - style?: StyleAttr; - size?: SizeAttr; -}; +type GeometryLabelAttr = GeometryLabelCfg | ((datum: Datum) => GeometryLabelCfg); -export interface BulletOptions extends Options { +type BulletAttr = { + measure?: T; + target?: T; + range?: T; +}; +export interface BulletOptions extends Omit { /** 弹图标题，用于区分不同的类型 */ readonly xField?: string; @@ -20,15 +21,17 @@ export interface BulletOptions extends Options { /** 使用测量标记的刻度轴位置，表示目标值,所表示值为数值 */ readonly targetField: string; - /** label 设置 */ - readonly label?: GeometryLabelCfg; + /** label 包含了 measure,target,range */ + readonly label?: BulletAttr; + + /** size 包含了 measure,target,range */ + readonly size?: BulletAttr; + + /** color 包含了 measure,target,range */ + readonly color?: BulletAttr; - /** bulletStyle 包含了 measure,target,range */ - readonly bulletStyle?: { - measure?: BasicStyle; - target?: BasicStyle; - range?: BasicStyle; - }; + /** style 包含了 measure,target,range */ + readonly style?: BulletAttr; /** layout 方向选择*/ layout?: 'horizontal' | 'vertical';