From 211e439fa86eb8af64012e249f394ad4f8caba64 Mon Sep 17 00:00:00 2001
From: Marco Vettorello <vettorello.marco@gmail.com>
Date: Thu, 15 Apr 2021 11:45:46 +0200
Subject: [PATCH] refactor: add round to pixel, fix stories

---
 .../state/selectors/get_debug_state.ts           | 16 ++++++++--------
 stories/sunburst/10_2_slice.tsx                  |  2 +-
 stories/treemap/1_one_layer.tsx                  |  2 +-
 3 files changed, 10 insertions(+), 10 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
index 80466c6665..21d51190d1 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
@@ -33,16 +33,16 @@ export const getDebugStateSelector = createCachedSelector(
   (geoms): DebugState => {
     return {
       partition: geoms.reduce<PartitionDebugState[]>((acc, { panelTitle, config, quadViewModel, diskCenter }) => {
-        const partitions: PartitionDebugState['partitions'] = quadViewModel.map((quadViewModel) => {
-          const { dataName, depth, fillColor, value } = quadViewModel;
+        const partitions: PartitionDebugState['partitions'] = quadViewModel.map((model) => {
+          const { dataName, depth, fillColor, value } = model;
           return {
             name: dataName,
             depth,
             color: fillColor,
             value,
             coords: isSunburst(config.partitionLayout)
-              ? getCoordsForSector(quadViewModel, diskCenter)
-              : getCoordsForRectangle(quadViewModel, diskCenter),
+              ? getCoordsForSector(model, diskCenter)
+              : getCoordsForRectangle(model, diskCenter),
           };
         });
         acc.push({
@@ -60,13 +60,13 @@ function getCoordsForSector({ x0, x1, y1px, y0px }: QuadViewModel, diskCenter: P
   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;
+  const x = Math.round(Math.cos(angle) * cr + diskCenter.x);
+  const y = Math.round(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;
+  const y = Math.round(y0px + (y1px - y0px) / 2 + diskCenter.y);
+  const x = Math.round(x0 + (x1 - x0) / 2 + diskCenter.x);
   return [x, y];
 }
diff --git a/stories/sunburst/10_2_slice.tsx b/stories/sunburst/10_2_slice.tsx
index 808761cecc..1faf69f682 100644
--- a/stories/sunburst/10_2_slice.tsx
+++ b/stories/sunburst/10_2_slice.tsx
@@ -26,7 +26,7 @@ import { indexInterpolatedFillColor, interpolatorCET2s, productLookup } from '..
 
 export const Example = () => (
   <Chart className="story-chart">
-    <Settings debug />
+    <Settings debugState />
     <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
index c9e0583b6a..7776a7faf4 100644
--- 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} debug />
+    <Settings theme={STORYBOOK_LIGHT_THEME} debugState />
     <Partition
       id="spec_1"
       data={mocks.pie}