diff --git a/src/chart_types/partition_chart/state/selectors/get_debug_state.ts b/src/chart_types/partition_chart/state/selectors/get_debug_state.ts index a047b3924c..80466c6665 100644 --- a/src/chart_types/partition_chart/state/selectors/get_debug_state.ts +++ b/src/chart_types/partition_chart/state/selectors/get_debug_state.ts @@ -19,8 +19,12 @@ import createCachedSelector from 're-reselect'; +import { TAU } from '../../../../common/constants'; +import { Pixels, PointObject } from '../../../../common/geometry'; import { getChartIdSelector } from '../../../../state/selectors/get_chart_id'; import { DebugState, PartitionDebugState } from '../../../../state/types'; +import { QuadViewModel } from '../../layout/types/viewmodel_types'; +import { isSunburst } from '../../layout/viewmodel/viewmodel'; import { partitionMultiGeometries } from './geometries'; /** @internal */ @@ -28,15 +32,19 @@ export const getDebugStateSelector = createCachedSelector( [partitionMultiGeometries], (geoms): DebugState => { return { - partition: geoms.reduce((acc, { panelTitle, quadViewModel }) => { - const partitions: PartitionDebugState['partitions'] = quadViewModel.map( - ({ dataName, depth, fillColor, value }) => ({ + partition: geoms.reduce((acc, { panelTitle, config, quadViewModel, diskCenter }) => { + const partitions: PartitionDebugState['partitions'] = quadViewModel.map((quadViewModel) => { + const { dataName, depth, fillColor, value } = quadViewModel; + return { name: dataName, depth, color: fillColor, value, - }), - ); + coords: isSunburst(config.partitionLayout) + ? getCoordsForSector(quadViewModel, diskCenter) + : getCoordsForRectangle(quadViewModel, diskCenter), + }; + }); acc.push({ panelTitle, partitions, @@ -46,3 +54,19 @@ export const getDebugStateSelector = createCachedSelector( }; }, )(getChartIdSelector); + +function getCoordsForSector({ x0, x1, y1px, y0px }: QuadViewModel, diskCenter: PointObject): [Pixels, Pixels] { + const X0 = x0 - TAU / 4; + const X1 = x1 - TAU / 4; + const cr = y0px + (y1px - y0px) / 2; + const angle = X0 + (X1 - X0) / 2; + const x = Math.cos(angle) * cr + diskCenter.x; + const y = Math.sin(angle) * cr + diskCenter.y; + return [x, y]; +} + +function getCoordsForRectangle({ x0, x1, y1px, y0px }: QuadViewModel, diskCenter: PointObject): [Pixels, Pixels] { + const y = y0px + (y1px - y0px) / 2 + diskCenter.y; + const x = x0 + (x1 - x0) / 2 + diskCenter.x; + return [x, y]; +} diff --git a/src/state/types.ts b/src/state/types.ts index 5f4590d3cf..81d5ffdc65 100644 --- a/src/state/types.ts +++ b/src/state/types.ts @@ -18,6 +18,7 @@ */ import type { Cell } from '../chart_types/heatmap/layout/types/viewmodel_types'; +import { Pixels } from '../common/geometry'; import type { Position } from '../utils/common'; import type { GeometryValue } from '../utils/geometry'; @@ -105,6 +106,7 @@ export type PartitionDebugState = { depth: number; color: string; value: number; + coords: [Pixels, Pixels]; }>; }; diff --git a/stories/sunburst/10_2_slice.tsx b/stories/sunburst/10_2_slice.tsx index e8a75d8781..808761cecc 100644 --- a/stories/sunburst/10_2_slice.tsx +++ b/stories/sunburst/10_2_slice.tsx @@ -19,13 +19,14 @@ import React from 'react'; -import { Chart, Datum, Partition, PartitionLayout } from '../../src'; +import { Chart, Datum, Partition, PartitionLayout, Settings } from '../../src'; import { config } from '../../src/chart_types/partition_chart/layout/config'; import { mocks } from '../../src/mocks/hierarchical'; import { indexInterpolatedFillColor, interpolatorCET2s, productLookup } from '../utils/utils'; export const Example = () => ( + (d: any, i: number, a: any[]) => c export const Example = () => ( - +