adds colorPalette service

CHANGELOG.md

@@ -1,6 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `4.2.0`.
+- Added a new `colorPalette` service for retrieving and generating color arrays for use in charts ([#1209](https://github.com/elastic/eui/pull/1209))
 
 ## [`4.2.0`](https://github.com/elastic/eui/tree/v4.2.0)
 

src-docs/src/components/guide_components.scss

@@ -150,6 +150,21 @@ $guideZLevelHighest: $euiZLevel9 + 1000;
   outline: solid 2px purple;
 }
 
+.guideColorPalette__swatch {
+
+  span {
+    height: $euiSize;
+    width: $euiSizeL;
+  }
+
+  &:first-child span {
+    border-radius: $euiBorderRadius 0 0 $euiBorderRadius;
+  }
+
+  &:last-child span {
+    border-radius: 0 $euiBorderRadius $euiBorderRadius 0;
+  }
+}
 
 @import "../views/guidelines/index";
 @import "guide_section/index";
@@ -193,4 +208,21 @@ $guideZLevelHighest: $euiZLevel9 + 1000;
   .guidePageContent {
     margin-left: 0;
   }
+
+  .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;
+    }
+  }
 }

src-docs/src/routes.js

@@ -36,6 +36,9 @@ import WritingGuidelines
 
 // Services
 
+import { ColorPaletteExample }
+  from './views/color_palette/color_palette_example';
+
 import { IsColorDarkExample }
   from './views/is_color_dark/is_color_dark_example';
 
@@ -395,17 +398,18 @@ const navigation = [{
   name: 'Utilities',
   items: [
     AccessibilityExample,
+    ColorPaletteExample,
     CopyExample,
-    ResponsiveExample,
+    UtilityClassesExample,
     DelayHideExample,
     ErrorBoundaryExample,
     HighlightExample,
     IsColorDarkExample,
+    MutationObserverExample,
     OutsideClickDetectorExample,
     PortalExample,
+    ResponsiveExample,
     ToggleExample,
-    UtilityClassesExample,
-    MutationObserverExample,
     WindowEventExample,
   ].map(example => createExample(example)),
 }, {

src-docs/src/views/color_palette/color_palette.js

@@ -0,0 +1,38 @@
+import React, { Fragment } from 'react';
+
+import {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiTitle,
+  EuiSpacer,
+} from '../../../../src/components';
+
+import {
+  colorPalette,
+  palettes,
+} from '../../../../src/services';
+
+const availablePalettes = Object.keys(palettes);
+
+export default () => (
+  <Fragment>
+    {
+      availablePalettes.map((paletteName, i) => (
+        <div key={paletteName}>
+          <EuiTitle key={i} size="xxs"><h3>{paletteName}</h3></EuiTitle>
+          <EuiSpacer size="s" />
+          <EuiFlexGroup gutterSize="none" alignItems="flexStart" key={`${paletteName}-${i}`}>
+            {
+              colorPalette(paletteName).map((hexCode, j) => (
+                <EuiFlexItem key={`${hexCode}-${j}`} grow={false} className={'guideColorPalette__swatch'}>
+                  <span title={hexCode} style={{ backgroundColor: hexCode }} />
+                </EuiFlexItem>
+              ))
+            }
+          </EuiFlexGroup>
+          <EuiSpacer size="l" />
+        </div>
+      ))
+    }
+  </Fragment>
+);

src-docs/src/views/color_palette/color_palette_custom.js

@@ -0,0 +1,52 @@
+import React, { Fragment } from 'react';
+
+import {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiTitle,
+  EuiSpacer,
+} from '../../../../src/components';
+
+import {
+  colorPalette,
+} from '../../../../src/services';
+
+export default () => (
+  <Fragment>
+    <EuiTitle size="xxs"><h3>Custom red to blue</h3></EuiTitle>
+    <EuiSpacer size="s" />
+    <EuiFlexGroup gutterSize="none" alignItems="flexStart">
+      {
+        colorPalette('custom', 'FF0000', '#00FFFF', 25).map((hexCode, j) => (
+          <EuiFlexItem key={`${hexCode}-${j}`} grow={false} className={'guideColorPalette__swatch'}>
+            <span title={hexCode} style={{ backgroundColor: hexCode }} />
+          </EuiFlexItem>
+        ))
+      }
+    </EuiFlexGroup>
+    <EuiSpacer size="l" />
+    <EuiTitle size="xxs"><h3>Custom yellow to green</h3></EuiTitle>
+    <EuiSpacer size="s" />
+    <EuiFlexGroup gutterSize="none" alignItems="flexStart">
+      {
+        colorPalette('custom', '#F7EE55', '#4EB265', 20).map((hexCode, k) => (
+          <EuiFlexItem key={`${hexCode}-${k}`} grow={false} className={'guideColorPalette__swatch'}>
+            <span title={hexCode} style={{ backgroundColor: hexCode }} />
+          </EuiFlexItem>
+        ))
+      }
+    </EuiFlexGroup>
+    <EuiSpacer size="l" />
+    <EuiTitle size="xxs"><h3>Custom green to red</h3></EuiTitle>
+    <EuiSpacer size="s" />
+    <EuiFlexGroup gutterSize="none" alignItems="flexStart">
+      {
+        colorPalette('custom', '#4EB265', '#920000').map((hexCode, l) => (
+          <EuiFlexItem key={`${hexCode}-${l}`} grow={false} className={'guideColorPalette__swatch'}>
+            <span title={hexCode} style={{ backgroundColor: hexCode }} />
+          </EuiFlexItem>
+        ))
+      }
+    </EuiFlexGroup>
+  </Fragment>
+);

src-docs/src/views/color_palette/color_palette_example.js

@@ -0,0 +1,79 @@
+import React from 'react';
+
+import { renderToHtml } from '../../services';
+
+import {
+  GuideSectionTypes,
+} from '../../components';
+
+import {
+  EuiCode,
+} from '../../../../src/components';
+
+import ColorPalette from './color_palette';
+const colorPaletteSource = require('!!raw-loader!./color_palette');
+const colorPaletteHtml = renderToHtml(ColorPalette);
+
+import ColorPaletteCustom from './color_palette_custom';
+const colorPaletteCustomSource = require('!!raw-loader!./color_palette_custom');
+const colorPaletteCustomHtml = renderToHtml(ColorPaletteCustom);
+
+import ColorPaletteHistogram from './color_palette_histogram';
+const colorPaletteHistogramSource = require('!!raw-loader!./color_palette_histogram');
+const colorPaletteHistogramHtml = renderToHtml(ColorPaletteHistogram);
+
+export const ColorPaletteExample = {
+  title: 'Color Palettes',
+  sections: [{
+    title: 'Preset color palettes',
+    source: [{
+      type: GuideSectionTypes.JS,
+      code: colorPaletteSource,
+    }, {
+      type: GuideSectionTypes.HTML,
+      code: colorPaletteHtml,
+    }],
+    text: (
+      <p>
+        Use the <EuiCode>colorPalette</EuiCode> service to obtain an array of
+        hexidecimal color codes for a given palette such as
+        <EuiCode>colorPalette&#40;&#39;color_blind&#39;&#41;</EuiCode>, then apply them to UI
+        elements such as charts.
+      </p>
+    ),
+    demo: <ColorPalette />,
+  }, {
+    title: 'Custom color palettes',
+    source: [{
+      type: GuideSectionTypes.JS,
+      code: colorPaletteCustomSource,
+    }, {
+      type: GuideSectionTypes.HTML,
+      code: colorPaletteCustomHtml,
+    }],
+    text: (
+      <p>
+        Generate a custom palette of any length from two hexidecimal color
+        codes such as
+        <EuiCode>colorPalette&#40;&#39;custom&#39;, &#39;FF0000&#39;, &#39;#00FFFF&#39;, 25&#41;</EuiCode>.
+      </p>
+    ),
+    demo: <ColorPaletteCustom />,
+  }, {
+    title: 'Chart example',
+    source: [{
+      type: GuideSectionTypes.JS,
+      code: colorPaletteHistogramSource,
+    }, {
+      type: GuideSectionTypes.HTML,
+      code: colorPaletteHistogramHtml,
+    }],
+    text: (
+      <p>
+        Apply the results of <EuiCode>colorPalette</EuiCode> to the
+        <EuiCode>color</EuiCode> prop of EUI chart components.
+      </p>
+    ),
+    demo: <ColorPaletteHistogram />,
+  }],
+};

src-docs/src/views/color_palette/color_palette_histogram.js

@@ -0,0 +1,56 @@
+import React, { Component, Fragment } from 'react';
+
+import {
+  EuiSeriesChart,
+  EuiHistogramSeries,
+  EuiSeriesChartUtils,
+} from '../../../../src/experimental';
+import {
+  colorPalette,
+} from '../../../../src/services/color/color_palette';
+
+const { SCALE } = EuiSeriesChartUtils;
+const timestamp = Date.now();
+const ONE_HOUR = 3600000;
+const margins = {
+  top: 10,
+  left: 80,
+  right: 0,
+  bottom: 20,
+};
+const colors = colorPalette('custom', 'FF0000', '#00FFFF', 6);
+
+function randomizeData(size = 24, max = 8) {
+  return new Array(size)
+    .fill(0)
+    .map((d, i) => ({
+      x0: ONE_HOUR * i,
+      x: ONE_HOUR * (i + 1),
+      y: Math.floor(Math.random() * max),
+    }))
+    .map(el => ({
+      x0: el.x0 + timestamp,
+      x: el.x + timestamp,
+      y: el.y,
+    }));
+}
+function buildData(series) {
+  const max = Math.ceil(Math.random() * 1000000);
+  return new Array(series).fill(0).map(() => randomizeData(20, max));
+}
+export default class Example extends Component {
+  state = {
+    series: 6,
+    data: buildData(6),
+  };
+  render() {
+    const { data } = this.state;
+    return (
+      <Fragment>
+        <EuiSeriesChart width={600} height={200} xType={SCALE.TIME} stackBy="y" margins={margins}>
+          {data.map((d, i) => <EuiHistogramSeries key={i} name={`Chart ${i}`} data={d} color={colors[i]} />)}
+        </EuiSeriesChart>
+      </Fragment>
+    );
+  }
+}