feat: compute sector/rectangle center coords

elastic · Apr 13, 2021 · c63e727 · c63e727
1 parent 6d1fe71
commit c63e727
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 7 deletions.
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
@@ -19,24 +19,32 @@
 
 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 */
 export const getDebugStateSelector = createCachedSelector(
   [partitionMultiGeometries],
   (geoms): DebugState => {
     return {
-      partition: geoms.reduce<PartitionDebugState[]>((acc, { panelTitle, quadViewModel }) => {
-        const partitions: PartitionDebugState['partitions'] = quadViewModel.map(
-          ({ dataName, depth, fillColor, value }) => ({
+      partition: geoms.reduce<PartitionDebugState[]>((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
@@ -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
@@ -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 = () => (
   <Chart className="story-chart">
+    <Settings debug />
     <Partition
       id="spec_1"
       data={mocks.pie.slice(0, 2)}

diff --git a/stories/treemap/1_one_layer.tsx b/stories/treemap/1_one_layer.tsx
@@ -36,7 +36,7 @@ const defaultFillColor = (colorMaker: any) => (d: any, i: number, a: any[]) => c
 
 export const Example = () => (
   <Chart className="story-chart">
-    <Settings theme={STORYBOOK_LIGHT_THEME} />
+    <Settings theme={STORYBOOK_LIGHT_THEME} debug />
     <Partition
       id="spec_1"
       data={mocks.pie}