diff --git a/__tests__/integration/snapshots/interaction/mock-pie-interaction/step0.png b/__tests__/integration/snapshots/interaction/mock-pie-interaction/step0.png new file mode 100644 index 0000000000..6a0a3085ef Binary files /dev/null and b/__tests__/integration/snapshots/interaction/mock-pie-interaction/step0.png differ diff --git a/__tests__/plots/interaction/index.ts b/__tests__/plots/interaction/index.ts index b3ebed3acd..e3bb7f8a70 100644 --- a/__tests__/plots/interaction/index.ts +++ b/__tests__/plots/interaction/index.ts @@ -69,3 +69,4 @@ export { commitsPointLegendFilter } from './commits-point-legend-filter'; export { settleWeatherLegendFilter } from './seattle-weather-legend-filter'; export { countriesBubbleMultiLegends } from './countries-bubble-multi-legends'; export { pointsPointTooltipMarker } from './points-point-tooltip-marker'; +export { mockPieInteraction } from './mock-pie-interaction'; diff --git a/__tests__/plots/interaction/mock-pie-interaction.ts b/__tests__/plots/interaction/mock-pie-interaction.ts new file mode 100644 index 0000000000..9a640d8e89 --- /dev/null +++ b/__tests__/plots/interaction/mock-pie-interaction.ts @@ -0,0 +1,40 @@ +import { deepMix } from '@antv/util'; +import { G2Spec } from '../../../src'; +import { LEGEND_ITEMS_CLASS_NAME } from '../../../src/interaction/legendFilter'; +import { step } from './utils'; + +function Pie(options, context) { + const { encode = {}, ...rest } = options; + const { value, ...restEncode } = encode; + return deepMix(rest, { + type: 'interval', + transform: [{ type: 'stackY' }], + coordinate: { type: 'theta' }, + encode: { + ...restEncode, + y: value, + }, + }); +} + +export function mockPieInteraction(): G2Spec { + return { + type: Pie, + data: [ + { genre: 'Sports', sold: 275 }, + { genre: 'Strategy', sold: 115 }, + { genre: 'Action', sold: 120 }, + { genre: 'Shooter', sold: 350 }, + { genre: 'Other', sold: 150 }, + ], + // @ts-ignore + encode: { value: 'sold', color: 'genre' }, + animate: false, + }; +} + +mockPieInteraction.steps = ({ canvas }) => { + const { document } = canvas; + const [e] = document.getElementsByClassName(LEGEND_ITEMS_CLASS_NAME); + return [step(e, 'click')]; +}; diff --git a/src/runtime/plot.ts b/src/runtime/plot.ts index c0c7cacc99..cf2fda2f70 100644 --- a/src/runtime/plot.ts +++ b/src/runtime/plot.ts @@ -422,11 +422,14 @@ async function initializeView( const flattenOptions = await transformMarks(options, library); const mergedOptions = bubbleOptions(flattenOptions); + // @todo Remove this. // !!! NOTE: Mute original view options. // Update interaction and coordinate for this view. options.interaction = mergedOptions.interaction; options.coordinate = mergedOptions.coordinate; + // @ts-ignore + options.marks = [...mergedOptions.marks, ...mergedOptions.components]; const transformedOptions = coordinate2Transform(mergedOptions, library); const state = await initializeMarks(transformedOptions, library); diff --git a/src/utils/helper.ts b/src/utils/helper.ts index 9d17e6d278..f46ceb3b44 100644 --- a/src/utils/helper.ts +++ b/src/utils/helper.ts @@ -45,7 +45,15 @@ export function copyAttributes(target: DisplayObject, source: DisplayObject) { const { attributes } = source; const exclude = new Set(['id', 'className']); for (const [key, value] of Object.entries(attributes)) { - if (!exclude.has(key)) target.attr(key, value); + if (!exclude.has(key)) { + // @todo Fix in @antv/g + if (key === 'transform') { + target.attr(key, ''); + target.attr(key, value); + } else { + target.attr(key, value); + } + } } }