From 08406e8493e28d9a16fbbf15b0288dfa9ff722c3 Mon Sep 17 00:00:00 2001 From: kasmine <736929286@qq.com> Date: Fri, 9 Oct 2020 14:36:19 +0800 Subject: [PATCH 1/5] fix(issue-1174): pie statistics content formatter does not work --- src/plots/pie/adaptor.ts | 12 +++++++----- src/plots/pie/interaction/pie-statistic-action.ts | 8 ++------ 2 files changed, 9 insertions(+), 11 deletions(-) diff --git a/src/plots/pie/adaptor.ts b/src/plots/pie/adaptor.ts index d77d147016..07ad9fd9fc 100644 --- a/src/plots/pie/adaptor.ts +++ b/src/plots/pie/adaptor.ts @@ -1,3 +1,4 @@ +import { Datum } from '@antv/g2/lib/interface'; import { deepMix, every, filter, get, isFunction, isString, isNil } from '@antv/util'; import { Params } from '../../core/adaptor'; import { legend, tooltip, interaction, animation, theme, state, annotation } from '../../adaptor/common'; @@ -189,6 +190,7 @@ function statistic(params: Params): Params { const { style, formatter, offsetX, offsetY, rotate } = option; const lineHeight = get(option, 'style.fontSize', 20); + const getDefaultContent = (data: Data) => (index === 0 ? '总计' : getTotalValue(data, angleField)); chart.annotation().text( deepMix( {}, @@ -200,12 +202,12 @@ function statistic(params: Params): Params { }, { position: ['50%', '50%'], - content: (filterData: Data) => { + content: (filterData: Data, datum?: Datum) => { return formatter - ? formatter(null, filterData) - : index === 0 - ? '总计' - : getTotalValue(filterData, angleField); + ? formatter(datum, filterData) + : datum + ? datum[angleField] + : getDefaultContent(filterData); }, style, offsetX, diff --git a/src/plots/pie/interaction/pie-statistic-action.ts b/src/plots/pie/interaction/pie-statistic-action.ts index 40e7ca0997..869de48e77 100644 --- a/src/plots/pie/interaction/pie-statistic-action.ts +++ b/src/plots/pie/interaction/pie-statistic-action.ts @@ -1,6 +1,6 @@ import { Action } from '@antv/g2/lib/interaction'; import { ComponentOption } from '@antv/g2/lib/interface'; -import { each, get } from '@antv/util'; +import { each, get, isFunction } from '@antv/util'; /** * Pie 中心文本事件的 Action @@ -32,8 +32,6 @@ export class StatisticAction extends Action { const { data } = event.data; if (data) { const annotationController = view.getController('annotation'); - // todo remove ignore - // @ts-ignore annotationController.clear(true); // @ts-ignore const [, angleField, colorField] = view.getScaleFields(); @@ -54,7 +52,7 @@ export class StatisticAction extends Action { annotationOptions.push({ ...options, - content: options.formatter ? options.formatter(data, view.getData()) : value, + content: isFunction(options.content) ? options.content(view.getData(), data) : value, }); }); annotationOptions.forEach((opt) => { @@ -69,8 +67,6 @@ export class StatisticAction extends Action { public reset() { const { view } = this.context; const annotationController = view.getController('annotation'); - // todo remove ignore - // @ts-ignore annotationController.clear(true); const initialStatistic = this.getInitialAnnotation(); each(initialStatistic, (a) => { From ebe3796fcab1ce79a3b0ca00c68aca0ea72d9c48 Mon Sep 17 00:00:00 2001 From: kasmine <736929286@qq.com> Date: Fri, 9 Oct 2020 14:36:53 +0800 Subject: [PATCH 2/5] test(issue-1174): add testcases --- __tests__/bugs/issue-1174-spec.ts | 65 +++++++++++++++++++++++++++++++ 1 file changed, 65 insertions(+) create mode 100644 __tests__/bugs/issue-1174-spec.ts diff --git a/__tests__/bugs/issue-1174-spec.ts b/__tests__/bugs/issue-1174-spec.ts new file mode 100644 index 0000000000..01a40a9743 --- /dev/null +++ b/__tests__/bugs/issue-1174-spec.ts @@ -0,0 +1,65 @@ +import { reduce } from '@antv/util'; +import { Pie } from '../../src'; +import { createDiv } from '.././utils/dom'; +import { simulateMouseEvent } from '../utils/event'; + +describe('donut plot', () => { + test('statistic content formatter', () => { + const data = [ + { + type: '分类一', + value: 27, + }, + { + type: '分类二', + value: 25, + }, + { + type: '分类三', + value: 18, + }, + { + type: '分类四', + value: 15, + }, + { + type: '分类五', + value: 10, + }, + { + type: '其它', + value: 5, + }, + ]; + + const donutPlot = new Pie(createDiv(), { + width: 400, + height: 400, + radius: 1, + innerRadius: 0.3, + padding: [0, 0, 0, 0], + data, + angleField: 'value', + colorField: 'type', + interactions: [{ type: 'element-active' }, { type: 'pie-statistic-active' }], + statistic: { + content: { + formatter: (datum, data) => { + return datum ? `${datum.value} 万` : `${reduce(data, (r, d) => r + d.value, 0)}万`; + }, + }, + }, + }); + + donutPlot.render(); + + const contentAnnotation = donutPlot.chart.getController('annotation').getComponents()[1]; + expect(contentAnnotation.component.get('content')).toBe(`${reduce(data, (r, d) => r + d.value, 0)}万`); + + setTimeout(() => { + const element = donutPlot.chart.geometries[0].elements[0]; + simulateMouseEvent(element.shape, 'mouseenter'); + expect(contentAnnotation.component.get('content')).toBe(`${data[0].value}万`); + }, 0); + }); +}); From 553d22ca1bbf1ed63494990d15cd8fb30331834d Mon Sep 17 00:00:00 2001 From: kasmine <736929286@qq.com> Date: Fri, 9 Oct 2020 14:46:42 +0800 Subject: [PATCH 3/5] =?UTF-8?q?fix:=20pie=20statistic=20=E9=BB=98=E8=AE=A4?= =?UTF-8?q?=E5=80=BC=E8=AE=BE=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/plots/pie/adaptor.ts | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/src/plots/pie/adaptor.ts b/src/plots/pie/adaptor.ts index 07ad9fd9fc..d9205bd5df 100644 --- a/src/plots/pie/adaptor.ts +++ b/src/plots/pie/adaptor.ts @@ -175,7 +175,7 @@ function label(params: Params): Params { */ function statistic(params: Params): Params { const { chart, options } = params; - const { innerRadius, statistic, angleField } = options; + const { innerRadius, statistic, angleField, colorField } = options; const annotationOptions = []; @@ -190,7 +190,12 @@ function statistic(params: Params): Params { const { style, formatter, offsetX, offsetY, rotate } = option; const lineHeight = get(option, 'style.fontSize', 20); - const getDefaultContent = (data: Data) => (index === 0 ? '总计' : getTotalValue(data, angleField)); + const getDefaultContent = (data: Data, datum?: Datum) => { + if (index === 0) { + return datum ? datum[colorField] : '总计'; + } + return datum ? datum[angleField] : getTotalValue(data, angleField); + }; chart.annotation().text( deepMix( {}, @@ -203,11 +208,7 @@ function statistic(params: Params): Params { { position: ['50%', '50%'], content: (filterData: Data, datum?: Datum) => { - return formatter - ? formatter(datum, filterData) - : datum - ? datum[angleField] - : getDefaultContent(filterData); + return formatter ? formatter(datum, filterData) : getDefaultContent(filterData, datum); }, style, offsetX, From ebf810e8ff591a5ed61948e0ed4c1c4d6cb897bb Mon Sep 17 00:00:00 2001 From: kasmine <736929286@qq.com> Date: Fri, 9 Oct 2020 14:53:53 +0800 Subject: [PATCH 4/5] =?UTF-8?q?fix(test):=20=E4=BF=AE=E5=A4=8D=E6=B5=8B?= =?UTF-8?q?=E8=AF=95=E7=94=A8=E4=BE=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- __tests__/unit/plots/pie/interaction-spec.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/__tests__/unit/plots/pie/interaction-spec.ts b/__tests__/unit/plots/pie/interaction-spec.ts index 1b169e1384..118f905fd9 100644 --- a/__tests__/unit/plots/pie/interaction-spec.ts +++ b/__tests__/unit/plots/pie/interaction-spec.ts @@ -30,7 +30,7 @@ describe('register interaction', () => { radius: 0.8, innerRadius: 0.64, statistic: { - title: { formatter: (item, data) => (!Array.isArray(data) ? item.title : 'Total') }, + title: { formatter: (item) => (item ? item.type : 'Total') }, }, }); @@ -45,7 +45,7 @@ describe('register interaction', () => { const annotations = context.view.getComponents().filter((co) => co.type === 'annotation'); expect(annotations[0].extra.content).toBe('item3'); - expect(annotations[1].extra.content).toBe('13'); + expect(annotations[1].extra.content).toBe(13); }); it('触发 pie-statistic:reset', async () => { @@ -70,7 +70,7 @@ describe('G2 内置interactions', () => { radius: 0.8, innerRadius: 0.64, statistic: { - title: { formatter: (item, data) => (!Array.isArray(data) ? item.title : 'Total') }, + title: { formatter: (item) => (item ? item.type : 'Total') }, }, interactions: [{ type: 'pie-statistic-active' }], }); From dcca4e0e297f32fe7933ac51619791f5a02279fc Mon Sep 17 00:00:00 2001 From: kasmine <736929286@qq.com> Date: Fri, 9 Oct 2020 15:33:39 +0800 Subject: [PATCH 5/5] =?UTF-8?q?feat(pie-demo):=20demo=20=E5=A2=9E=E5=8A=A0?= =?UTF-8?q?statistic=20formatter=20=E7=A4=BA=E8=8C=83?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- examples/pie/donut/demo/statistics.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/examples/pie/donut/demo/statistics.ts b/examples/pie/donut/demo/statistics.ts index 6ab2178c88..eec842fbeb 100644 --- a/examples/pie/donut/demo/statistics.ts +++ b/examples/pie/donut/demo/statistics.ts @@ -29,7 +29,10 @@ const piePlot = new Pie('container', { }, statistic: { title: { - formatter: () => '总计', + formatter: (datum) => (datum ? datum.type : '总计'), + }, + content: { + formatter: (datum, data) => (datum ? `¥ ${datum.value}` : `¥ ${data.reduce((r, d) => r + d.value, 0)}`), }, }, // 添加 中心统计文本 交互