Added palette switcher to chart example

elastic · Dec 17, 2019 · bff98f0 · bff98f0
1 parent 2d833be
commit bff98f0
Show file tree

Hide file tree

Showing 4 changed files with 126 additions and 87 deletions.
diff --git a/src-docs/src/components/guide_components.scss b/src-docs/src/components/guide_components.scss
@@ -229,23 +229,6 @@ $guideZLevelHighest: $euiZLevel9 + 1000;
     margin-left: 0;
     width: 100%;
   }
-
-  .euiFlexGroup--responsive > .euiFlexItem.guideColorPalette__swatch {
-    margin-bottom: 0 !important;
-
-    span {
-      height: $euiSize;
-      width: $euiSizeL;
-    }
-
-    &:first-child span {
-      border-radius: $euiBorderRadius $euiBorderRadius 0 0;
-    }
-
-    &:last-child span {
-      border-radius: 0 0 $euiBorderRadius $euiBorderRadius;
-    }
-  }
 }
 
 .euiDataGridRowCell--favoriteFranchise {

diff --git a/src-docs/src/views/color_palette/color_palette_example.js b/src-docs/src/views/color_palette/color_palette_example.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Link } from 'react-router';
 
 import { renderToHtml } from '../../services';
 
@@ -83,9 +84,10 @@ export const ColorPaletteExample = {
             demographic-based data sets.
           </p>
           <p>
-            EUI provides the following common palettes for quantitative data.
-            Just pass in the number of steps needed and the function will
-            interpolate between the colors.
+            EUI provides the following common palettes for quantitative data and{' '}
+            <Link to="/elastic-charts/creating-charts">charts</Link>. Just pass
+            in the number of steps needed and the function will interpolate
+            between the colors.
           </p>
         </div>
       ),

diff --git a/src-docs/src/views/elastic_charts/theming.js b/src-docs/src/views/elastic_charts/theming.js
@@ -1,4 +1,4 @@
-import React, { Component, Fragment } from 'react';
+import React, { useState, Fragment } from 'react';
 import { withTheme } from '../../components';
 import {
   Chart,
@@ -9,88 +9,137 @@ import {
   DataGenerator,
 } from '@elastic/charts';
 
+import {
+  EuiSpacer,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiSuperSelect,
+} from '../../../../src/components';
+
 import {
   EUI_CHARTS_THEME_DARK,
   EUI_CHARTS_THEME_LIGHT,
 } from '../../../../src/themes/charts/themes';
 
 import { palettes } from '../../../../src/services';
+const paletteData = { ...palettes };
+delete paletteData.euiPaletteForLightBackground;
+delete paletteData.euiPaletteForDarkBackground;
+delete paletteData.euiPaletteColorBlind;
+const paletteNames = Object.keys(paletteData);
 
-class _Theming extends Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      chartType: 'LineSeries',
-    };
-  }
+const _Theming = props => {
+  /**
+   * Create palette select
+   */
+  const paletteOptions = paletteNames.map((paletteName, index) =>
+    createPaletteOption(paletteName, index)
+  );
 
-  onMultiChange = multiObject => {
-    this.setState({
-      ...multiObject,
-    });
+  const [barPalette, setBarPalette] = useState('4');
+  const onBarPaletteChange = value => {
+    setBarPalette(value);
   };
 
-  onChartTypeChange = chartType => {
-    this.setState({
-      chartType: chartType,
-    });
-  };
+  /**
+   * Create data
+   */
+  const dg = new DataGenerator();
+  const data1 = dg.generateGroupedSeries(20, 1);
+  const data2 = dg.generateGroupedSeries(20, 5);
 
-  render() {
-    const dg = new DataGenerator();
-    const data1 = dg.generateGroupedSeries(20, 1);
-    const data2 = dg.generateGroupedSeries(20, 5);
+  /**
+   * Setup theme based on current light/dark theme
+   */
+  const isDarkTheme = props.theme.includes('dark');
+  const theme = isDarkTheme
+    ? EUI_CHARTS_THEME_DARK.theme
+    : EUI_CHARTS_THEME_LIGHT.theme;
 
-    const isDarkTheme = this.props.theme.includes('dark');
-    const theme = isDarkTheme
-      ? EUI_CHARTS_THEME_DARK.theme
-      : EUI_CHARTS_THEME_LIGHT.theme;
+  const customColors = {
+    colors: {
+      vizColors: paletteData[paletteNames[Number(barPalette)]](5).colors,
+    },
+  };
 
-    const customColors = {
-      colors: {
-        vizColors: palettes.euiPalettePositive(5).colors,
-      },
-    };
+  const data1CustomSeriesColors = new Map();
+  const data1DataSeriesColorValues = {
+    colorValues: [],
+    specId: 'control',
+  };
+  data1CustomSeriesColors.set(data1DataSeriesColorValues, 'black');
 
-    const data1CustomSeriesColors = new Map();
-    const data1DataSeriesColorValues = {
-      colorValues: [],
-      specId: 'control',
-    };
-    data1CustomSeriesColors.set(data1DataSeriesColorValues, 'black');
+  return (
+    <Fragment>
+      <Chart size={{ height: 200 }}>
+        <Settings
+          theme={[customColors, theme]}
+          showLegend={false}
+          showLegendDisplayValue={false}
+        />
+        <BarSeries
+          id="status"
+          name="Status"
+          data={data2}
+          xAccessor={'x'}
+          yAccessors={['y']}
+          splitSeriesAccessors={['g']}
+          stackAccessors={['g']}
+        />
+        <LineSeries
+          id="control"
+          name="Control"
+          data={data1}
+          xAccessor={'x'}
+          yAccessors={['y']}
+          customSeriesColors={data1CustomSeriesColors}
+        />
+        <Axis id="bottom-axis" position="bottom" showGridLines />
+        <Axis id="left-axis" position="left" showGridLines />
+      </Chart>
+      <EuiSpacer size="xxl" />
+      <EuiFlexGroup justifyContent="center">
+        <EuiFlexItem grow={false}>
+          <EuiSuperSelect
+            id="setChartBarColor"
+            options={paletteOptions}
+            valueOfSelected={barPalette}
+            onChange={onBarPaletteChange}
+            aria-label="Bars color palette"
+            style={{ width: 300 }}
+          />
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </Fragment>
+  );
+};
 
-    return (
+const createPaletteOption = function(paletteName, index) {
+  return {
+    value: String(index),
+    inputDisplay: createPalette(paletteData[paletteNames[index]](10).colors),
+    dropdownDisplay: (
       <Fragment>
-        <Chart size={{ height: 200 }}>
-          <Settings
-            theme={[customColors, theme]}
-            showLegend={false}
-            showLegendDisplayValue={false}
-          />
-          <BarSeries
-            id="status"
-            name="Status"
-            data={data2}
-            xAccessor={'x'}
-            yAccessors={['y']}
-            splitSeriesAccessors={['g']}
-            stackAccessors={['g']}
-          />
-          <LineSeries
-            id="control"
-            name="Control"
-            data={data1}
-            xAccessor={'x'}
-            yAccessors={['y']}
-            customSeriesColors={data1CustomSeriesColors}
-          />
-          <Axis id="bottom-axis" position="bottom" showGridLines />
-          <Axis id="left-axis" position="left" showGridLines />
-        </Chart>
+        <strong>{paletteName}</strong>
+        <EuiSpacer size="xs" />
+        {createPalette(paletteData[paletteNames[index]](10).colors)}
       </Fragment>
-    );
-  }
-}
+    ),
+  };
+};
+
+const createPalette = function(palette) {
+  return (
+    <EuiFlexGroup gutterSize="none" responsive={false}>
+      {palette.map(hexCode => (
+        <EuiFlexItem
+          key={hexCode}
+          className={'guideColorPalette__swatch--small'}>
+          <span title={hexCode} style={{ backgroundColor: hexCode }} />
+        </EuiFlexItem>
+      ))}
+    </EuiFlexGroup>
+  );
+};
 
 export const Theming = withTheme(_Theming);
diff --git a/src-docs/src/views/guidelines/index.scss b/src-docs/src/views/guidelines/index.scss
@@ -34,6 +34,11 @@
     width: $euiSizeL;
   }
 
+  &--small span {
+    width: auto;
+    height: $euiSizeS;
+  }
+
   &:first-child span {
     border-radius: $euiBorderRadius 0 0 $euiBorderRadius;
   }