fix: add color background functionality to partition chart simple

elastic · Apr 15, 2020 · d4b43ca · d4b43ca
1 parent 23eb310
commit d4b43ca
Showing 1 changed file with 27 additions and 26 deletions.
diff --git a/stories/sunburst/1_simple.tsx b/stories/sunburst/1_simple.tsx
@@ -23,30 +23,31 @@ import React from 'react';
 import { indexInterpolatedFillColor, interpolatorCET2s, productLookup } from '../utils/utils';
 import { color } from '@storybook/addon-knobs';
 
-const partialColorTheme: PartialTheme = {
-  background: {
-    color: color('Color of the background container', '#ffffff'),
-  },
-};
-
-export const example = () => (
-  <Chart className="story-chart">
-    <Settings theme={partialColorTheme} />
-    <Partition
-      id="spec_1"
-      data={mocks.pie}
-      valueAccessor={(d: Datum) => d.exportVal as number}
-      valueFormatter={(d: number) => `$${config.fillLabel.valueFormatter(Math.round(d / 1000000000))}\xa0Bn`}
-      layers={[
-        {
-          groupByRollup: (d: Datum) => d.sitc1,
-          nodeLabel: (d: Datum) => productLookup[d].name,
-          fillLabel: { textInvertible: true },
-          shape: {
-            fillColor: indexInterpolatedFillColor(interpolatorCET2s),
+export const example = () => {
+  const partialColorTheme: PartialTheme = {
+    background: {
+      color: color('Color of the background container', '#ffffff'),
+    },
+  };
+  return (
+    <Chart className="story-chart">
+      <Settings theme={partialColorTheme} />
+      <Partition
+        id="spec_1"
+        data={mocks.pie}
+        valueAccessor={(d: Datum) => d.exportVal as number}
+        valueFormatter={(d: number) => `$${config.fillLabel.valueFormatter(Math.round(d / 1000000000))}\xa0Bn`}
+        layers={[
+          {
+            groupByRollup: (d: Datum) => d.sitc1,
+            nodeLabel: (d: Datum) => productLookup[d].name,
+            fillLabel: { textInvertible: true },
+            shape: {
+              fillColor: indexInterpolatedFillColor(interpolatorCET2s),
+            },
           },
-        },
-      ]}
-    />
-  </Chart>
-);
+        ]}
+      />
+    </Chart>
+  );
+};