From 361200eabd4578c663e89adcc504464446d443ce Mon Sep 17 00:00:00 2001
From: rshen91 <rachelwshen@gmail.com>
Date: Tue, 14 Apr 2020 11:24:38 -0600
Subject: [PATCH] docs: add story for partition in styling

---
 stories/stylings/17_partition_background.tsx | 105 +++++++++++++++++++
 stories/stylings/stylings.stories.tsx        |   1 +
 stories/sunburst/1_simple.tsx                |   9 +-
 3 files changed, 107 insertions(+), 8 deletions(-)
 create mode 100644 stories/stylings/17_partition_background.tsx

diff --git a/stories/stylings/17_partition_background.tsx b/stories/stylings/17_partition_background.tsx
new file mode 100644
index 0000000000..72be2c9f5a
--- /dev/null
+++ b/stories/stylings/17_partition_background.tsx
@@ -0,0 +1,105 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License. */
+
+import { Chart, Datum, Partition, PartitionLayout, PartialTheme, Settings } from '../../src';
+import { mocks } from '../../src/mocks/hierarchical/index';
+import { config } from '../../src/chart_types/partition_chart/layout/config/config';
+import React from 'react';
+import { ShapeTreeNode } from '../../src/chart_types/partition_chart/layout/types/viewmodel_types';
+import {
+  categoricalFillColor,
+  colorBrewerCategoricalStark9,
+  countryLookup,
+  productLookup,
+  regionLookup,
+} from '../utils/utils';
+import { color } from '@storybook/addon-knobs';
+
+export const example = () => {
+  const partialColorTheme: PartialTheme = {
+    background: {
+      color: color('Color of the background container', '#ffffff'),
+    },
+  };
+  return (
+    <Chart className="story-chart" /*size={{ width: 1200, height: 800 }}*/>
+      <Settings theme={partialColorTheme} />
+      <Partition
+        id="spec_1"
+        data={mocks.miniSunburst}
+        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: any) => productLookup[d].name,
+            shape: {
+              fillColor: (d: ShapeTreeNode) => {
+                return categoricalFillColor(colorBrewerCategoricalStark9, 0.7)(d.sortIndex);
+              },
+            },
+          },
+          {
+            groupByRollup: (d: Datum) => countryLookup[d.dest].continentCountry.substr(0, 2),
+            nodeLabel: (d: any) => regionLookup[d].regionName,
+            shape: {
+              fillColor: (d: ShapeTreeNode) => {
+                return categoricalFillColor(colorBrewerCategoricalStark9, 0.5)(d.parent.sortIndex);
+              },
+            },
+          },
+          {
+            groupByRollup: (d: Datum) => d.dest,
+            nodeLabel: (d: any) => countryLookup[d].name,
+            shape: {
+              fillColor: (d: ShapeTreeNode) => {
+                return categoricalFillColor(colorBrewerCategoricalStark9, 0.3)(d.parent.parent.sortIndex);
+              },
+            },
+          },
+        ]}
+        config={{
+          partitionLayout: PartitionLayout.sunburst,
+          linkLabel: {
+            maxCount: 0,
+            fontSize: 14,
+          },
+          fontFamily: 'Arial',
+          fillLabel: {
+            valueFormatter: (d: number) => `$${config.fillLabel.valueFormatter(Math.round(d / 1000000000))}\xa0Bn`,
+            fontStyle: 'italic',
+            textInvertible: true,
+            fontWeight: 900,
+            valueFont: {
+              fontFamily: 'Menlo',
+              fontStyle: 'normal',
+              fontWeight: 100,
+            },
+          },
+          margin: { top: 0, bottom: 0, left: 0, right: 0 },
+          minFontSize: 1,
+          idealFontSizeJump: 1.1,
+          outerSizeRatio: 1,
+          emptySizeRatio: 0,
+          circlePadding: 4,
+          backgroundColor: 'rgba(229,229,229,1)',
+        }}
+      />
+    </Chart>
+  );
+};
diff --git a/stories/stylings/stylings.stories.tsx b/stories/stylings/stylings.stories.tsx
index a127587b26..e08f5d318a 100644
--- a/stories/stylings/stylings.stories.tsx
+++ b/stories/stylings/stylings.stories.tsx
@@ -43,3 +43,4 @@ export { example as customSeriesNameConfig } from './13_custom_series_name_confi
 export { example as customSeriesNameFormatting } from './14_custom_series_name_formatting';
 export { example as tickLabelPaddingBothPropAndTheme } from './15_tick_label';
 export { example as styleAccessorOverrides } from './16_style_accessor';
+export { example as partitionBackground } from './17_partition_background';
diff --git a/stories/sunburst/1_simple.tsx b/stories/sunburst/1_simple.tsx
index f8f2c81d20..0b50a91391 100644
--- a/stories/sunburst/1_simple.tsx
+++ b/stories/sunburst/1_simple.tsx
@@ -16,22 +16,15 @@
  * specific language governing permissions and limitations
  * under the License. */
 
-import { Chart, Datum, Partition, Settings, PartialTheme } from '../../src';
+import { Chart, Datum, Partition } from '../../src';
 import { mocks } from '../../src/mocks/hierarchical/index';
 import { config } from '../../src/chart_types/partition_chart/layout/config/config';
 import React from 'react';
 import { indexInterpolatedFillColor, interpolatorCET2s, productLookup } from '../utils/utils';
-import { color } from '@storybook/addon-knobs';
 
 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}