From 5b9d62b9a571f759fec06c2f40d81340694f13ad Mon Sep 17 00:00:00 2001 From: lxfu1 <954055752@qq.com> Date: Mon, 26 Aug 2024 18:29:26 +0800 Subject: [PATCH] fix: legend filter text --- .../step0.svg | 810 ++++++++++++++++ .../step1.svg | 866 ++++++++++++++++++ __tests__/plots/interaction/index.ts | 1 + .../interval-legend-filter-with-text.ts | 60 ++ src/interaction/legendFilter.ts | 12 +- 5 files changed, 1744 insertions(+), 5 deletions(-) create mode 100644 __tests__/integration/snapshots/interaction/interval-legend-filter-with-text/step0.svg create mode 100644 __tests__/integration/snapshots/interaction/interval-legend-filter-with-text/step1.svg create mode 100644 __tests__/plots/interaction/interval-legend-filter-with-text.ts diff --git a/__tests__/integration/snapshots/interaction/interval-legend-filter-with-text/step0.svg b/__tests__/integration/snapshots/interaction/interval-legend-filter-with-text/step0.svg new file mode 100644 index 0000000000..747ce68505 --- /dev/null +++ b/__tests__/integration/snapshots/interaction/interval-legend-filter-with-text/step0.svg @@ -0,0 +1,810 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 事例一 + + + + + + + + + + + + + + + + + + + + 事例二 + + + + + + + + + + + + + + + + + + + + 事例三 + + + + + + + + + + + + + + + + + + + + 事例四 + + + + + + + + + + + + + + + + + + + + 事例五 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 主机 + + + + + + + + + + + + + + + 事例一: 40% + + + + + + + + + + + + + 事例三: 17% + + + + + + + + + + + + + 事例四: 13% + + + + + + + + + + + + + 事例五: 9% + + + + + + + + + + + + \ No newline at end of file diff --git a/__tests__/integration/snapshots/interaction/interval-legend-filter-with-text/step1.svg b/__tests__/integration/snapshots/interaction/interval-legend-filter-with-text/step1.svg new file mode 100644 index 0000000000..4aa54c275d --- /dev/null +++ b/__tests__/integration/snapshots/interaction/interval-legend-filter-with-text/step1.svg @@ -0,0 +1,866 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 事例一 + + + + + + + + + + + + + + + + + + + + 事例二 + + + + + + + + + + + + + + + + + + + + 事例三 + + + + + + + + + + + + + + + + + + + + 事例四 + + + + + + + + + + + + + + + + + + + + 事例五 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 主机 + + + + + + + + + + + + + + + 事例一: 40% + + + + + + + + + + + + + 事例三: 17% + + + + + + + + + + + + + 事例四: 13% + + + + + + + + + + + + + 事例五: 9% + + + + + + + + + + + + + 事例二: 21% + + + + + + + + + + + + \ No newline at end of file diff --git a/__tests__/plots/interaction/index.ts b/__tests__/plots/interaction/index.ts index 82819d9754..e08aabdab3 100644 --- a/__tests__/plots/interaction/index.ts +++ b/__tests__/plots/interaction/index.ts @@ -84,3 +84,4 @@ export { alphabetIntervalActiveMarkerType } from './alphabet-interval-activate-l export { mockPieLegendFilter } from './mock-pie-legend-filter'; export { commitIntervalFixedCornerFilterNoElement } from './commit-interval-fixed-corner-filter-no-element'; export { changeSizePolarCrosshairsXYNoElements } from './change-size-polar-crosshairsXY-no-elements'; +export { intervalLegendFilterWithText } from './interval-legend-filter-with-text'; diff --git a/__tests__/plots/interaction/interval-legend-filter-with-text.ts b/__tests__/plots/interaction/interval-legend-filter-with-text.ts new file mode 100644 index 0000000000..22dffc1854 --- /dev/null +++ b/__tests__/plots/interaction/interval-legend-filter-with-text.ts @@ -0,0 +1,60 @@ +import { G2Spec } from '../../../src'; +import { LEGEND_ITEMS_CLASS_NAME } from '../../../src/interaction/legendFilter'; +import { step } from './utils'; + +export function intervalLegendFilterWithText(): G2Spec { + return { + type: 'view', + autoFit: true, + coordinate: { type: 'theta', outerRadius: 0.8, innerRadius: 0.5 }, + children: [ + { + type: 'interval', + data: [ + { item: '事例一', count: 40, percent: 0.4 }, + { item: '事例二', count: 21, percent: 0.21 }, + { item: '事例三', count: 17, percent: 0.17 }, + { item: '事例四', count: 13, percent: 0.13 }, + { item: '事例五', count: 9, percent: 0.09 }, + ], + encode: { y: 'percent', color: 'item' }, + transform: [{ type: 'stackY' }], + legend: { + color: { position: 'bottom', layout: { justifyContent: 'center' } }, + }, + labels: [ + { + position: 'outside', + text: (data) => `${data.item}: ${data.percent * 100}%`, + }, + ], + tooltip: { + items: [ + (data) => ({ + name: data.item, + value: `${data.percent * 100}%`, + }), + ], + }, + }, + { + type: 'text', + style: { + text: '主机', + x: '50%', + y: '50%', + fontSize: 34, + fill: '#8c8c8c', + textAlign: 'center', + }, + }, + ], + }; +} + +intervalLegendFilterWithText.steps = ({ canvas }) => { + const { document } = canvas; + const elements = document.getElementsByClassName(LEGEND_ITEMS_CLASS_NAME); + const [, e1] = elements; + return [step(e1, 'click'), step(e1, 'click')]; +}; diff --git a/src/interaction/legendFilter.ts b/src/interaction/legendFilter.ts index b59a83bfff..274a93e04e 100644 --- a/src/interaction/legendFilter.ts +++ b/src/interaction/legendFilter.ts @@ -226,15 +226,17 @@ async function filterView( if (mark.type === 'legends') return mark; // Inset after aggregate transform, such as group, and bin. - const { transform = [] } = mark; + const { transform = [], data = [] } = mark; const index = transform.findIndex( ({ type }) => type.startsWith('group') || type.startsWith('bin'), ); const newTransform = [...transform]; - newTransform.splice(index + 1, 0, { - type: 'filter', - [channel]: { value, ordinal }, - }); + if (data.length) { + newTransform.splice(index + 1, 0, { + type: 'filter', + [channel]: { value, ordinal }, + }); + } // Set domain of scale to preserve encoding. const newScale = Object.fromEntries(