Fixing all usages of theme to use the Natural order

elastic · May 4, 2020 · 9eb6edd · 9eb6edd
1 parent 7609482
commit 9eb6edd
Show file tree

Hide file tree

Showing 7 changed files with 68 additions and 52 deletions.
diff --git a/src-docs/src/views/elastic_charts/pie.js b/src-docs/src/views/elastic_charts/pie.js
@@ -1,7 +1,6 @@
 import React, { useContext } from 'react';
 import { ThemeContext } from '../../components';
 import { Chart, Partition } from '@elastic/charts';
-import { euiPaletteColorBlind } from '../../../../src/services';
 
 import {
   EUI_CHARTS_THEME_DARK,
@@ -21,6 +20,10 @@ export default () => {
    * Setup theme based on current light/dark theme
    */
   const isDarkTheme = themeContext.theme.includes('dark');
+  const euiChartTheme = isDarkTheme
+    ? EUI_CHARTS_THEME_DARK
+    : EUI_CHARTS_THEME_LIGHT;
+  const euiPartitionConfig = euiChartTheme.partition;
 
   return (
     <div>
@@ -48,14 +51,13 @@ export default () => {
                 {
                   groupByRollup: d => d.status,
                   shape: {
-                    fillColor: d => euiPaletteColorBlind()[d.sortIndex],
+                    fillColor: d =>
+                      euiChartTheme.theme.colors.vizColors[d.sortIndex],
                   },
                 },
               ]}
               config={{
-                ...(isDarkTheme
-                  ? EUI_CHARTS_THEME_DARK.partition
-                  : EUI_CHARTS_THEME_LIGHT.partition),
+                ...euiPartitionConfig,
                 clockwiseSectors: false,
               }}
             />
@@ -89,14 +91,13 @@ export default () => {
                 {
                   groupByRollup: d => d.language,
                   shape: {
-                    fillColor: d => euiPaletteColorBlind()[d.sortIndex],
+                    fillColor: d =>
+                      euiChartTheme.theme.colors.vizColors[d.sortIndex],
                   },
                 },
               ]}
               config={{
-                ...(isDarkTheme
-                  ? EUI_CHARTS_THEME_DARK.partition
-                  : EUI_CHARTS_THEME_LIGHT.partition),
+                ...euiPartitionConfig,
                 emptySizeRatio: 0.4,
                 clockwiseSectors: false,
               }}

diff --git a/src-docs/src/views/elastic_charts/pie_example.js b/src-docs/src/views/elastic_charts/pie_example.js
@@ -220,9 +220,7 @@ export const ElasticChartsPieExample = {
               </EuiCode>
               . The chart colors also need to be passed a different way via{' '}
               <EuiCode language="ts">
-                {
-                  'Partition.layers.shape.fillColor={d => euiPaletteColorBlind()[d.sortIndex]}'
-                }
+                {'Partition.layers.shape.fillColor'}
               </EuiCode>
               . See the snippet for full details.
             </p>
@@ -232,7 +230,8 @@ export const ElasticChartsPieExample = {
       demo: <PieChart />,
       snippet: `import { EUI_CHARTS_THEME_DARK, EUI_CHARTS_THEME_LIGHT } from '@elastic/eui/dist/eui_charts_theme';
 
-const euiPartitionConfig = isDarkTheme ? EUI_CHARTS_THEME_DARK.partition : EUI_CHARTS_THEME_LIGHT.partition;
+const euiChartTheme = isDarkTheme ? EUI_CHARTS_THEME_DARK : EUI_CHARTS_THEME_LIGHT;
+const euiPartitionConfig = euiChartTheme.partition;
 
 <Chart size={{height: 200}}>
   <Partition
@@ -248,7 +247,7 @@ const euiPartitionConfig = isDarkTheme ? EUI_CHARTS_THEME_DARK.partition : EUI_C
       {
         groupByRollup: d => d.language,
         shape: {
-          fillColor: d => euiPaletteColorBlind()[d.sortIndex],
+          fillColor: d => euiChartTheme.theme.colors.vizColors[d.sortIndex],
         },
       },
     ]}

diff --git a/src-docs/src/views/elastic_charts/pie_slices.js b/src-docs/src/views/elastic_charts/pie_slices.js
@@ -26,11 +26,14 @@ import {
 } from '../../../../src/components';
 
 import { ChartCard } from './shared';
-import { euiPaletteColorBlind } from '../../../../src/services';
 import { BROWSER_DATA_2019 } from './data';
 
 export default () => {
   const themeContext = useContext(ThemeContext);
+  const euiChartTheme = isDarkTheme
+    ? EUI_CHARTS_THEME_DARK
+    : EUI_CHARTS_THEME_LIGHT;
+  const euiPartitionConfig = euiChartTheme.partition;
 
   const sliceOrderRadiosIdPrefix = 'colorType';
   const sliceOrderRadios = [
@@ -157,14 +160,13 @@ export default () => {
               {
                 groupByRollup: d => d.browser,
                 shape: {
-                  fillColor: d => euiPaletteColorBlind()[d.sortIndex],
+                  fillColor: d =>
+                    euiChartTheme.theme.colors.vizColors[d.sortIndex],
                 },
               },
             ]}
             config={{
-              ...(isDarkTheme
-                ? EUI_CHARTS_THEME_DARK.partition
-                : EUI_CHARTS_THEME_LIGHT.partition),
+              ...euiPartitionConfig,
               emptySizeRatio: pieTypeIdSelected.includes('Donut') && 0.4,
               ...sliceOrderConfig,
             }}
@@ -297,14 +299,12 @@ export default () => {
       {
         groupByRollup: d => d.browser,
         shape: {
-          fillColor: d => euiPaletteColorBlind()[d.sortIndex],
+          fillColor: d => euiChartTheme.theme.colors.vizColors[d.sortIndex],
         },
       },
     ]}
     config={{
-      ...(isDarkTheme
-        ? EUI_CHARTS_THEME_DARK.pie
-        : EUI_CHARTS_THEME_LIGHT.pie),
+      ...euiPartitionConfig,
       ${pieTypeIdSelected.includes('Donut') ? 'emptySizeRatio: 0.4,' : ''}
       ${sliceOrderConfigText}
     }}

diff --git a/src-docs/src/views/elastic_charts/sparklines.js b/src-docs/src/views/elastic_charts/sparklines.js
@@ -60,7 +60,7 @@ export const Sparklines = () => {
                   data={TIME_DATA_SMALL}
                   xAccessor={0}
                   yAccessors={[1]}
-                  customSeriesColors={[
+                  color={[
                     isDarkTheme
                       ? euiPaletteForDarkBackground()[1]
                       : euiPaletteForLightBackground()[1],
@@ -85,7 +85,7 @@ export const Sparklines = () => {
                   data={TIME_DATA_SMALL}
                   xAccessor={0}
                   yAccessors={[1]}
-                  customSeriesColors={[
+                  color={[
                     isDarkTheme
                       ? euiPaletteForDarkBackground()[1]
                       : euiPaletteForLightBackground()[1],
@@ -118,7 +118,7 @@ export const Sparklines = () => {
                   data={TIME_DATA_SMALL_REVERSE_MAJOR}
                   xAccessor={0}
                   yAccessors={[1]}
-                  customSeriesColors={[
+                  color={[
                     isDarkTheme
                       ? euiPaletteForDarkBackground()[3]
                       : euiPaletteForLightBackground()[3],
@@ -143,7 +143,7 @@ export const Sparklines = () => {
                   data={TIME_DATA_SMALL_REVERSE}
                   xAccessor={0}
                   yAccessors={[1]}
-                  customSeriesColors={[
+                  color={[
                     isDarkTheme
                       ? euiPaletteForDarkBackground()[3]
                       : euiPaletteForLightBackground()[3],

diff --git a/src-docs/src/views/elastic_charts/theming.js b/src-docs/src/views/elastic_charts/theming.js
@@ -55,7 +55,7 @@ export const Theming = () => {
     createPaletteOption(paletteName, index)
   );
 
-  const [barPalette, setBarPalette] = useState('5');
+  const [barPalette, setBarPalette] = useState('0');
   const onBarPaletteChange = value => {
     setBarPalette(value);
   };
@@ -75,16 +75,22 @@ export const Theming = () => {
     ? EUI_CHARTS_THEME_DARK.theme
     : EUI_CHARTS_THEME_LIGHT.theme;
 
-  const customColors = {
-    colors: {
-      vizColors: paletteData[paletteNames[Number(barPalette)]](5),
-    },
-  };
+  const customTheme =
+    Number(barPalette) > 0
+      ? [
+          {
+            colors: {
+              vizColors: paletteData[paletteNames[Number(barPalette)]](5),
+            },
+          },
+          theme,
+        ]
+      : theme;
 
   return (
     <Fragment>
       <Chart size={{ height: 200 }}>
-        <Settings theme={[customColors, theme]} showLegend={false} />
+        <Settings theme={customTheme} showLegend={false} />
         <BarSeries
           id="status"
           name="Status"
@@ -123,16 +129,21 @@ export const Theming = () => {
 };
 
 const createPaletteOption = function(paletteName, index) {
+  const options =
+    index > 0
+      ? 10
+      : {
+          sortBy: 'natural',
+        };
+
   return {
     value: String(index),
-    inputDisplay: createPalette(
-      paletteData[paletteNames[index]](index > 0 ? 10 : 1)
-    ),
+    inputDisplay: createPalette(paletteData[paletteNames[index]](options)),
     dropdownDisplay: (
       <Fragment>
         <strong>{paletteName}</strong>
         <EuiSpacer size="xs" />
-        {createPalette(paletteData[paletteNames[index]](index > 0 ? 10 : 1))}
+        {createPalette(paletteData[paletteNames[index]](options))}
       </Fragment>
     ),
   };

diff --git a/src-docs/src/views/elastic_charts/theming_categorical.js b/src-docs/src/views/elastic_charts/theming_categorical.js
@@ -63,10 +63,8 @@ export const Categorical = () => {
   const [numCharts, setNumCharts] = useState('3');
   const [data, setData] = useState([]);
   const [dataString, setDataString] = useState('[{x: 1, y: 5.5, g: 0}]');
-  const [vizColors, setVizColors] = useState(euiPaletteColorBlind());
-  const [vizColorsString, setVizColorsString] = useState(
-    'euiPaletteColorBlind()'
-  );
+  const [vizColors, setVizColors] = useState();
+  const [vizColorsString, setVizColorsString] = useState();
   const [chartType, setChartType] = useState('LineSeries');
 
   useEffect(() => {
@@ -132,8 +130,8 @@ export const Categorical = () => {
 
     setData(data);
     setDataString("[{x: 1, y: 5.5, g: 'Categorical 1'}]");
-    setVizColors(euiPaletteColorBlind());
-    setVizColorsString('euiPaletteColorBlind()');
+    setVizColors(undefined);
+    setVizColorsString(undefined);
     setChartType('LineSeries');
   };
 
@@ -235,13 +233,20 @@ export const Categorical = () => {
       undefined
     );
 
-  const customColors = {
-    colors: { vizColors },
-  };
-  const customColorsString = `[
+  const customTheme = vizColors
+    ? [
+        {
+          colors: { vizColors },
+        },
+        theme,
+      ]
+    : theme;
+  const customColorsString = vizColors
+    ? `[
   { colors: { vizColors: ${vizColorsString} }},
   isDarkTheme ? EUI_CHARTS_THEME_DARK.theme : EUI_CHARTS_THEME_LIGHT.theme
-]`;
+]`
+    : 'isDarkTheme ? EUI_CHARTS_THEME_DARK.theme : EUI_CHARTS_THEME_LIGHT.theme';
 
   const charts = [];
   let customLegend;
@@ -278,7 +283,7 @@ export const Categorical = () => {
           data={data}
           xAccessor={'x'}
           yAccessors={['y']}
-          customSeriesColors={[euiPaletteColorBlind()[index < 2 ? 0 : 1]]}
+          color={[euiPaletteColorBlind()[index < 2 ? 0 : 1]]}
           lineSeriesStyle={{
             line: {
               strokeWidth: isOdd ? 1 : 6,
@@ -315,7 +320,7 @@ export const Categorical = () => {
       <div style={{ position: 'relative' }}>
         <Chart size={{ height: 200 }}>
           <Settings
-            theme={[customColors, theme]}
+            theme={customTheme}
             showLegend={showLegend}
             legendPosition="right"
             showLegendDisplayValue={false}

diff --git a/src/themes/charts/themes.ts b/src/themes/charts/themes.ts
@@ -157,7 +157,7 @@ function createTheme(colors: any): EuiChartThemeType {
         },
       },
       colors: {
-        vizColors: euiPaletteColorBlind(),
+        vizColors: euiPaletteColorBlind({ sortBy: 'natural' }),
         defaultVizColor: DEFAULT_VISUALIZATION_COLOR,
       },
       crosshair: {