fix(sunburst): rendering for full sections (#2457)

elastic · Jun 4, 2024 · 58c2721 · 58c2721
1 parent 27c04f4
commit 58c2721
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 22 deletions.
diff --git a/...shots/test-cases-stories/should-render-sunburst-as-full-circle-chrome-linux.png b/...shots/test-cases-stories/should-render-sunburst-as-full-circle-chrome-linux.png
diff --git a/e2e/tests/test_cases_stories.test.ts b/e2e/tests/test_cases_stories.test.ts
@@ -13,6 +13,13 @@ import { eachRotation, pwEach } from '../helpers';
 import { common } from '../page_objects';
 
 test.describe('Test cases stories', () => {
+  // See https://github.com/elastic/elastic-charts/issues/2456
+  test('should render sunburst as full circle', async ({ page }) => {
+    await common.expectChartAtUrlToMatchScreenshot(page)(
+      'http://localhost:9001/?path=/story/sunburst--single-slice&globals=toggles.showHeader:true;toggles.showChartTitle:false;toggles.showChartDescription:false;toggles.showChartBoundary:false;theme:light&knob-Banded=true&knob-EUI%20icon%20glyph%20name=warning&knob-EUI%20value%20icon%20glyph%20name=sortUp&knob-Scale%20Type=log&knob-Series%20Type=bar&knob-Split=true&knob-Stacked=true&knob-Trend%20length=0&knob-Trend%20length%20x=3&knob-attach%20click%20handler=true&knob-blending%20background=rgba(255,255,255,1)&knob-brush%20axis=x&knob-chartRotation=90&knob-custom%20value=678&knob-use%20custom%20value=',
+    );
+  });
+
   test('should render custom no results component', async ({ page }) => {
     await common.expectChartAtUrlToMatchScreenshot(page)(
       'http://localhost:9001/?path=/story/test-cases--no-series&knob-Show custom no results=true',

diff --git a/packages/charts/src/chart_types/partition_chart/layout/viewmodel/viewmodel.ts b/packages/charts/src/chart_types/partition_chart/layout/viewmodel/viewmodel.ts
@@ -245,7 +245,10 @@ const rawChildNodes = (
   switch (partitionLayout) {
     case PartitionLayout.sunburst:
       const sunburstValueToAreaScale = TAU / totalValue;
-      const sunburstAreaAccessor = (e: ArrayEntry) => sunburstValueToAreaScale * mapEntryValue(e);
+      const sunburstAreaAccessor = (e: ArrayEntry) => {
+        const value = mapEntryValue(e);
+        return value === totalValue ? TAU : sunburstValueToAreaScale * value;
+      };
       return sunburst(tree, sunburstAreaAccessor, { x0: 0, y0: -1 }, clockwiseSectors, specialFirstInnermostSector);
 
     case PartitionLayout.treemap:

diff --git a/storybook/stories/sunburst/15_single.story.tsx b/storybook/stories/sunburst/15_single.story.tsx
@@ -6,6 +6,7 @@
  * Side Public License, v 1.
  */
 
+import { boolean, number } from '@storybook/addon-knobs';
 import React from 'react';
 
 import { Chart, Datum, Partition, PartitionLayout, Settings, defaultPartitionValueFormatter } from '@elastic/charts';
@@ -15,25 +16,33 @@ import { ChartsStory } from '../../types';
 import { useBaseTheme } from '../../use_base_theme';
 import { indexInterpolatedFillColor, interpolatorCET2s, productLookup } from '../utils/utils';
 
-export const Example: ChartsStory = (_, { title, description }) => (
-  <Chart title={title} description={description}>
-    <Settings baseTheme={useBaseTheme()} />
-    <Partition
-      id="spec_1"
-      data={mocks.pie.slice(0, 1)}
-      layout={PartitionLayout.sunburst}
-      valueAccessor={(d: Datum) => d.exportVal as number}
-      valueFormatter={(d: number) => `$${defaultPartitionValueFormatter(Math.round(d / 1000000000))}\u00A0Bn`}
-      layers={[
-        {
-          groupByRollup: (d: Datum) => d.sitc1,
-          nodeLabel: (d: Datum) => productLookup[d].name,
-          shape: {
-            fillColor: (key, sortIndex, node, tree) =>
-              indexInterpolatedFillColor(interpolatorCET2s(0.8))(null, sortIndex, tree),
+export const Example: ChartsStory = (_, { title, description }) => {
+  const useCustomValue = boolean('use custom value', false);
+  const customValue = number('custom value', 678);
+  return (
+    <Chart title={title} description={description}>
+      <Settings baseTheme={useBaseTheme()} />
+      <Partition
+        id="spec_1"
+        data={useCustomValue ? [{ sitc1: '7', exportVal: customValue }] : mocks.pie.slice(0, 1)}
+        layout={PartitionLayout.sunburst}
+        valueAccessor={(d: Datum) => d.exportVal as number}
+        valueFormatter={
+          useCustomValue
+            ? String
+            : (d: number) => `$${defaultPartitionValueFormatter(Math.round(d / 1000000000))}\u00A0Bn`
+        }
+        layers={[
+          {
+            groupByRollup: (d: Datum) => d.sitc1,
+            nodeLabel: (d: Datum) => productLookup[d].name,
+            shape: {
+              fillColor: (key, sortIndex, node, tree) =>
+                indexInterpolatedFillColor(interpolatorCET2s(0.8))(null, sortIndex, tree),
+            },
           },
-        },
-      ]}
-    />
-  </Chart>
-);
+        ]}
+      />
+    </Chart>
+  );
+};