From 48873ba1ff5838ad176d0c8fe323a353b1118b93 Mon Sep 17 00:00:00 2001 From: MiniPear Date: Fri, 30 Jun 2023 19:18:35 +0800 Subject: [PATCH] fix(legend): update legend item (#5258) --- .../api-chart-change-data-legend.spec.ts | 23 ++++++++++ .../snapshots/api/chartChangeDataLegend.png | Bin 0 -> 8759 bytes .../snapshots/api/markChangeData.png | Bin 11681 -> 11681 bytes .../plots/api/chart-change-data-legend.ts | 43 ++++++++++++++++++ __tests__/plots/api/index.ts | 1 + 5 files changed, 67 insertions(+) create mode 100644 __tests__/integration/api-chart-change-data-legend.spec.ts create mode 100644 __tests__/integration/snapshots/api/chartChangeDataLegend.png create mode 100644 __tests__/plots/api/chart-change-data-legend.ts diff --git a/__tests__/integration/api-chart-change-data-legend.spec.ts b/__tests__/integration/api-chart-change-data-legend.spec.ts new file mode 100644 index 0000000000..ea7a1bacc6 --- /dev/null +++ b/__tests__/integration/api-chart-change-data-legend.spec.ts @@ -0,0 +1,23 @@ +import { chartChangeDataLegend as render } from '../plots/api/chart-change-data-legend'; +import { createNodeGCanvas } from './utils/createNodeGCanvas'; +import { sleep } from './utils/sleep'; +import './utils/useSnapshotMatchers'; + +describe('chart.changeData', () => { + const canvas = createNodeGCanvas(640, 480); + + it('mark.changeSize(width, height) should rerender expected chart', async () => { + const { finished } = render({ + canvas, + container: document.createElement('div'), + }); + await finished; + const dir = `${__dirname}/snapshots/api`; + await sleep(20); + await expect(canvas).toMatchCanvasSnapshot(dir, render.name); + }); + + afterAll(() => { + canvas?.destroy(); + }); +}); diff --git a/__tests__/integration/snapshots/api/chartChangeDataLegend.png b/__tests__/integration/snapshots/api/chartChangeDataLegend.png new file mode 100644 index 0000000000000000000000000000000000000000..2bdd318e11c91776bc188fe347b67e2c2f8bc27c GIT binary patch literal 8759 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 literal 0 HcmV?d00001 diff --git a/__tests__/integration/snapshots/api/markChangeData.png b/__tests__/integration/snapshots/api/markChangeData.png index c5f5c165068d9670c43fd06dd6a6424bd719cd0e..aafe80f36d8dd287de06ecf2499dd482a4067b85 100644 GIT binary patch delta 150 zcmV;H0BQfBTcKO983TW}{F;rb!Hq)$ delta 150 zcmV;H0BQfBTcKO983TWJ^jRya!az@t?4qZY29A&GOelio&3#V--{o9<0C`87d86>bAUGhmo@M&^UL}T zN^bpIe$7V1F5i>`=e7FtoL9={;G@S5zfGTg?vUH`ZoqqiuLHA~1EU-SCts6Ovp*nW E4aD$GW&i*H diff --git a/__tests__/plots/api/chart-change-data-legend.ts b/__tests__/plots/api/chart-change-data-legend.ts new file mode 100644 index 0000000000..7aab3d65fe --- /dev/null +++ b/__tests__/plots/api/chart-change-data-legend.ts @@ -0,0 +1,43 @@ +import { Chart } from '../../../src'; + +export function chartChangeDataLegend(context) { + const { container, canvas } = context; + + const chart = new Chart({ + theme: 'classic', + container, + canvas, + }); + + const data = [ + { time: '10:10', call: 4, waiting: 2, people: 2, type: 'a' }, + { time: '10:10', call: 2, waiting: 6, people: 3, type: 'b' }, + { time: '10:20', call: 13, waiting: 2, people: 5, type: 'a' }, + { time: '10:20', call: 9, waiting: 9, people: 1, type: 'b' }, + { time: '10:30', call: 5, waiting: 2, people: 3, type: 'a' }, + { time: '10:30', call: 8, waiting: 5, people: 1, type: 'b' }, + { time: '10:40', call: 13, waiting: 1, people: 2, type: 'a' }, + { time: '10:40', call: 13, waiting: 3, people: 2, type: 'b' }, + ]; + + chart.options({ + theme: 'classic', + type: 'interval', + data, + encode: { + x: 'time', + y: 'waiting', + color: 'type', + }, + transform: [{ type: 'dodgeX' }], + labels: [{ text: 'type' }], + }); + + const finished = chart + .render() + .then((chart) => + chart.changeData(data.sort((x, y) => (x.type > y.type ? -1 : 1))), + ); + + return { chart, finished }; +} diff --git a/__tests__/plots/api/index.ts b/__tests__/plots/api/index.ts index 92ca7805f7..d1e47b9ff0 100644 --- a/__tests__/plots/api/index.ts +++ b/__tests__/plots/api/index.ts @@ -37,3 +37,4 @@ export { chartEmitScrollbarFilter } from './chart-emit-scrollbar-filter'; export { chartOptionsCompositeMark } from './chart-options-composite-mark'; export { chartEmitItemTooltipHideContent } from './chart-emit-item-tooltip-hide-content'; export { chartEmitClickTooltip } from './chart-emit-click-tooltip'; +export { chartChangeDataLegend } from './chart-change-data-legend';