From 45227fa3f5c93af105b49d6174e21fb7547c9193 Mon Sep 17 00:00:00 2001 From: Bairui Su Date: Fri, 31 May 2024 18:53:34 +0800 Subject: [PATCH] fix: label rotate (#6261) --- ...api-chart-change-size-label-rotate.spec.ts | 25 + .../api/chartChangeSizeLabelRotate.svg | 2391 +++++++++++++++++ .../api/chart-change-size-label-rotate.ts | 44 + __tests__/plots/api/index.ts | 1 + src/runtime/component.ts | 1 + 5 files changed, 2462 insertions(+) create mode 100644 __tests__/integration/api-chart-change-size-label-rotate.spec.ts create mode 100644 __tests__/integration/snapshots/api/chartChangeSizeLabelRotate.svg create mode 100644 __tests__/plots/api/chart-change-size-label-rotate.ts diff --git a/__tests__/integration/api-chart-change-size-label-rotate.spec.ts b/__tests__/integration/api-chart-change-size-label-rotate.spec.ts new file mode 100644 index 0000000000..8ab402b7c5 --- /dev/null +++ b/__tests__/integration/api-chart-change-size-label-rotate.spec.ts @@ -0,0 +1,25 @@ +import { chartChangeSizeLabelRotate as render } from '../plots/api/chart-change-size-label-rotate'; +import { createNodeGCanvas } from './utils/createNodeGCanvas'; +import { sleep } from './utils/sleep'; +import './utils/useSnapshotMatchers'; + +describe('mark.changeSize', () => { + const canvas = createNodeGCanvas(640, 480); + + it('mark.changeSize(width, height) should rerender expected chart', async () => { + const { finished, button, chart } = render({ + canvas, + container: document.createElement('div'), + }); + await finished; + button.dispatchEvent(new CustomEvent('click')); + await new Promise((resolve) => chart.on('afterchangesize', resolve)); + const dir = `${__dirname}/snapshots/api`; + await sleep(20); + await expect(canvas).toMatchDOMSnapshot(dir, render.name); + }); + + afterAll(() => { + canvas?.destroy(); + }); +}); diff --git a/__tests__/integration/snapshots/api/chartChangeSizeLabelRotate.svg b/__tests__/integration/snapshots/api/chartChangeSizeLabelRotate.svg new file mode 100644 index 0000000000..1284d9b4a7 --- /dev/null +++ b/__tests__/integration/snapshots/api/chartChangeSizeLabelRotate.svg @@ -0,0 +1,2391 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Sports + + + + + + + + + + + + + + + + + + + + Strategy + + + + + + + + + + + + + + + + + + + + Action + + + + + + + + + + + + + + + + + + + + Shooter + + + + + + + + + + + + + + + + + + + + Infantry + + + + + + + + + + + + + + + + + + + + Logistics + + + + + + + + + + + + + + + + + + + + OtherOtherOther + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Sports + + + + + + + + + + + + + + + + + + + + Strategy + + + + + + + + + + + + + + + + + + + + Action + + + + + + + + + + + + + + + + + + + + Shooter + + + + + + + + + + + + + + + + + + + + Infantry + + + + + + + + + + + + + + + + + + + + Logistics + + + + + + + + + + + + + + + + + + + + OtherOtherOther + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Sports + + + + + + + Strategy + + + + + + + Action + + + + + + + Shooter + + + + + + + Infantry + + + + + + + Logistics + + + + + + + OtherOtherOther + + + + + + + + + genre + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 0 + + + + + + + 50 + + + + + + + 100 + + + + + + + 150 + + + + + + + 200 + + + + + + + 250 + + + + + + + 300 + + + + + + + 350 + + + + + + + + + sold + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/__tests__/plots/api/chart-change-size-label-rotate.ts b/__tests__/plots/api/chart-change-size-label-rotate.ts new file mode 100644 index 0000000000..8a43db27da --- /dev/null +++ b/__tests__/plots/api/chart-change-size-label-rotate.ts @@ -0,0 +1,44 @@ +import { Chart } from '../../../src'; + +export function chartChangeSizeLabelRotate(context) { + const { container, canvas } = context; + + const button = document.createElement('button'); + button.innerText = 'Update Size'; + button.style.display = 'block'; + container.appendChild(button); + + const div = document.createElement('div'); + container.appendChild(div); + + const chart = new Chart({ + container: div, + canvas, + }); + + chart.data([ + { genre: 'Sports', sold: 275 }, + { genre: 'Strategy', sold: 115 }, + { genre: 'Action', sold: 120 }, + { genre: 'Shooter', sold: 350 }, + { genre: 'Infantry', sold: 220 }, + { genre: 'Logistics', sold: 330 }, + { genre: 'OtherOtherOther', sold: 150 }, + ]); + + chart + .interval() + .encode('x', 'genre') + .encode('y', 'sold') + .encode('color', 'genre') + .axis({ x: { animate: false }, y: { animate: false } }) + .legend('color', [{}, { position: 'right' }]); + + const finished = chart.render(); + + button.onclick = () => { + chart.changeSize(900, 300); + }; + + return { chart, button, finished }; +} diff --git a/__tests__/plots/api/index.ts b/__tests__/plots/api/index.ts index 52223578ce..5a17078792 100644 --- a/__tests__/plots/api/index.ts +++ b/__tests__/plots/api/index.ts @@ -51,3 +51,4 @@ export { chartOnScrollbarFilter } from './chart-on-scrollbar-filter'; export { chartAutoFitHeight } from './chart-auto-fit-height'; export { chartAutoFitWidth } from './chart-auto-fit-width'; export { chartOnLabelClick } from './chart-on-label-click'; +export { chartChangeSizeLabelRotate } from './chart-change-size-label-rotate'; diff --git a/src/runtime/component.ts b/src/runtime/component.ts index c9ace53531..c0730eea2b 100644 --- a/src/runtime/component.ts +++ b/src/runtime/component.ts @@ -741,6 +741,7 @@ function computeAxisSize( component.labelTransform = 'rotate(90)'; component.size = maxLabelWidth + paddingTick; } else { + component.labelTransform = component.labelTransform ?? 'rotate(0)'; component.size = maxLabelHeight + paddingTick; } }