code, palettes, docs cleanup

elastic · Sep 25, 2018 · 28bc100 · 28bc100
1 parent 3748c9f
commit 28bc100
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 56 deletions.
diff --git a/src-docs/src/views/color_palette/color_palette_custom.js b/src-docs/src/views/color_palette/color_palette_custom.js
@@ -9,39 +9,49 @@ import {
 
 import {
   colorPalette,
+  palettes,
 } from '../../../../src/services';
 
+const euiColors = palettes.euiPaletteForLightBackground.colors;
+
 export default () => (
   <Fragment>
-    <EuiTitle size="xxs"><h3>Status: yellow to green</h3></EuiTitle>
+    <EuiTitle size="xxs"><h3>For mapping density, low to high</h3></EuiTitle>
     <EuiSpacer size="s" />
-    <EuiFlexGroup gutterSize="none" alignItems="flexStart">
-      {
-        colorPalette('FFFF6D', '1EA593', 20).map((hexCode, k) => (
-          <EuiFlexItem key={`${hexCode}-${k}`} grow={false} className={'guideColorPalette__swatch'}>
-            <span title={hexCode} style={{ backgroundColor: hexCode }} />
-          </EuiFlexItem>
-        ))
-      }
-    </EuiFlexGroup>
+    {
+      euiColors.map((color, j) => (
+        <div key={j}>
+          <EuiFlexGroup gutterSize="none" alignItems="flexStart" key={`${color}-${j}`}>
+            {
+              colorPalette('FFFFFF', color, 20).map((hexCode, k) => (
+                <EuiFlexItem key={`${hexCode}-${k}`} grow={false} className={'guideColorPalette__swatch'}>
+                  <span title={hexCode} style={{ backgroundColor: hexCode }} />
+                </EuiFlexItem>
+              ))
+            }
+          </EuiFlexGroup>
+          <EuiSpacer size="m" />
+        </div>
+      ))
+    }
     <EuiSpacer size="l" />
-    <EuiTitle size="xxs"><h3>Status: yellow to red</h3></EuiTitle>
+    <EuiTitle size="xxs"><h3>For communicating state, trending negaitve</h3></EuiTitle>
     <EuiSpacer size="s" />
     <EuiFlexGroup gutterSize="none" alignItems="flexStart">
       {
-        colorPalette('#FFFF6D', '#A30000', 15).map((hexCode, l) => (
+        colorPalette('#FBEFD3', '#BD4C48').map((hexCode, l) => (
           <EuiFlexItem key={`${hexCode}-${l}`} grow={false} className={'guideColorPalette__swatch'}>
             <span title={hexCode} style={{ backgroundColor: hexCode }} />
           </EuiFlexItem>
         ))
       }
     </EuiFlexGroup>
     <EuiSpacer size="l" />
-    <EuiTitle size="xxs"><h3>Status: green to pink</h3></EuiTitle>
+    <EuiTitle size="xxs"><h3>For communicating state, trending positive</h3></EuiTitle>
     <EuiSpacer size="s" />
     <EuiFlexGroup gutterSize="none" alignItems="flexStart">
       {
-        colorPalette('#1EA593', '#DD0A73').map((hexCode, l) => (
+        colorPalette('#FFFFE0', '#017F75').map((hexCode, l) => (
           <EuiFlexItem key={`${hexCode}-${l}`} grow={false} className={'guideColorPalette__swatch'}>
             <span title={hexCode} style={{ backgroundColor: hexCode }} />
           </EuiFlexItem>

diff --git a/src-docs/src/views/color_palette/color_palette_histogram.js b/src-docs/src/views/color_palette/color_palette_histogram.js
@@ -22,7 +22,7 @@ const margins = {
   right: 0,
   bottom: 20,
 };
-const qualColors = palettes.color_blind.colors;
+const qualColors = palettes.euiPaletteColorBlind.colors;
 const quantColors = colorPalette('#FFFF6D', '#1EA593', 6);
 
 function randomizeData(size = 24, max = 8) {

diff --git a/src/services/color/color_palette.js b/src/services/color/color_palette.js
@@ -15,8 +15,6 @@ class Color {
  * This function takes a color palette name and returns an array of hex color
  * codes for use in UI elements such as charts.
  *
- * @param {string} paletteName Required. The name of the palette being requested
- * Set paletteName to "custom" and provide two hex color codes for a custom palette
  * @param {string} hexStart The beginning hexidecimal color code
  * @param {string} hexEnd The ending hexidecimal color code
  * @param {number} len The number of colors in the resulting array (default 10)
@@ -32,10 +30,9 @@ function colorPalette(hexStart, hexEnd, len = 10) {
     const count = len - 1;
     const startHex = colorParse(hex1); // get RGB equivalent values as array
     const endHex = colorParse(hex2); // get RGB equivalent values as array
-    let step = new Array(3); // to collect each step increment piece (r,g,b)
     colorArray[0] = new Color(startHex[0], startHex[1], startHex[2]); // create first color obj
     colorArray[count] = new Color(endHex[0], endHex[1], endHex[2]); // create last color obj
-    step = stepCalc(count, colorArray[0], colorArray[count]); // create array of step increments
+    const step = stepCalc(count, colorArray[0], colorArray[count]); // create array of step increments
     // build the color palette array
     hexPalette[0] = colorArray[0].text; // set the first color in the array
     for (let i = 1; i < count; i++) {
@@ -68,10 +65,9 @@ function createHex(rgbValues) {
   let result = '';
   let val = 0;
   let piece;
-  const d = 1;
   const base = 16;
   for (let k = 0; k < 3; k++) {
-    val = Math.round(rgbValues[k] / d);
+    val = Math.round(rgbValues[k]);
     piece = val.toString(base); // Converts to radix 16 based value (0-9, A-F)
     if (piece.length < 2) {piece = `0${piece}`;}
     result = result + piece;
@@ -84,21 +80,17 @@ function createHex(rgbValues) {
  * Convert hexideciaml color into an array of RGB integer values
  */
 function colorParse(color) {
-  const m = 1;
   const base = 16;
-  let a;
-  let b;
-  let c = color.toUpperCase();
-  let col = c.replace('#', '');
+  let col = color.toUpperCase().replace('#', '');
 
   if (col.length === 3) {
-    a = col.substr(0, 1);
-    b = col.substr(1, 1);
-    c = col.substr(2, 1);
+    const a = col.substr(0, 1);
+    const b = col.substr(1, 1);
+    const c = col.substr(2, 1);
     col = a + a + b + b + c + c;
   }
   const num = [col.substr(0, 2), col.substr(2, 2), col.substr(4, 2)];
-  const ret = [parseInt(num[0], base) * m, parseInt(num[1], base) * m, parseInt(num[2], base) * m];
+  const ret = [parseInt(num[0], base), parseInt(num[1], base), parseInt(num[2], base)];
   return(ret);
 }
 
@@ -122,10 +114,11 @@ function formatHex(hex) {
  */
 function stepCalc(st, cStart, cEnd) {
   const steps = st;
-  const step = new Array(3);
-  step[0] = (cEnd.r - cStart.r) / steps; // Calc step amount for red value
-  step[1] = (cEnd.g - cStart.g) / steps; // Calc step amount for green value
-  step[2] = (cEnd.b - cStart.b) / steps; // Calc step amount for blue value
+  const step = [
+    (cEnd.r - cStart.r) / steps, // Calc step amount for red value
+    (cEnd.g - cStart.g) / steps, // Calc step amount for green value
+    (cEnd.b - cStart.b) / steps, // Calc step amount for blue value
+  ];
 
   return step;
 }

diff --git a/src/services/color/eui_palettes.js b/src/services/color/eui_palettes.js
@@ -1,5 +1,5 @@
 export const palettes = {
-  color_blind: {
+  euiPaletteColorBlind: {
     colors: [
       '#1EA593',
       '#2B70F7',
@@ -13,26 +13,7 @@ export const palettes = {
       '#34130C',
     ],
   },
-  color_blind_15: {
-    colors: [
-      '#000000',
-      '#004949',
-      '#009292',
-      '#FF6DB6',
-      '#FFB6DB',
-      '#490092',
-      '#006DDB',
-      '#B66DFF',
-      '#6DB6FF',
-      '#B6DBFF',
-      '#920000',
-      '#924900',
-      '#DB6D00',
-      '#24FF24',
-      '#FFFF6D',
-    ]
-  },
-  eui_light: {
+  euiPaletteForLightBackground: {
     colors: [
       '#0079A5',
       '#017F75',
@@ -41,7 +22,7 @@ export const palettes = {
       '#DD0A73',
     ]
   },
-  eui_dark: {
+  euiPaletteForDarkBackground: {
     colors: [
       '#4DA1C0',
       '#01B2A4',
@@ -50,4 +31,18 @@ export const palettes = {
       '#F5258C',
     ]
   },
+  euiPaletteForStatus: {
+    colors: [
+      '#58BA6D',
+      '#6ECE67',
+      '#A5E26A',
+      '#D2E26A',
+      '#EBDF61',
+      '#EBD361',
+      '#EBC461',
+      '#D99D4C',
+      '#D97E4C',
+      '#D75949',
+    ]
+  },
 };