feat: add color blind friendly color pallets (#5063)

Author: TCL735

package.json

@@ -166,7 +166,7 @@
     "@docsearch/react": "^3.0.0-alpha.37",
     "@influxdata/clockface": "^4.7.4",
     "@influxdata/flux-lsp-browser": "0.8.21",
-    "@influxdata/giraffe": "^2.30.0",
+    "@influxdata/giraffe": "^2.31.1",
     "@influxdata/influxdb-templates": "0.9.0",
     "@influxdata/react-custom-scrollbars": "4.3.8",
     "abortcontroller-polyfill": "^1.3.0",

src/shared/constants/graphColorPalettes.ts

@@ -315,13 +315,133 @@ export const LINE_COLORS_SOLID_WHITE = [
   },
 ]
 
+export const LINE_COLORS_BLIND_DARK = [
+  {
+    type: COLOR_TYPE_SCALE,
+    hex: '#000000',
+    id: nanoid(),
+    name: 'Color Blind Friendly - Dark',
+    value: 0,
+  },
+  {
+    type: COLOR_TYPE_SCALE,
+    hex: '#E69F00',
+    id: nanoid(),
+    name: 'Color Blind Friendly - Dark',
+    value: 0,
+  },
+  {
+    type: COLOR_TYPE_SCALE,
+    hex: '#56B4E9',
+    id: nanoid(),
+    name: 'Color Blind Friendly - Dark',
+    value: 0,
+  },
+  {
+    type: COLOR_TYPE_SCALE,
+    hex: '#009E73',
+    id: nanoid(),
+    name: 'Color Blind Friendly - Dark',
+    value: 0,
+  },
+  {
+    type: COLOR_TYPE_SCALE,
+    hex: '#F0E442',
+    id: nanoid(),
+    name: 'Color Blind Friendly - Dark',
+    value: 0,
+  },
+  {
+    type: COLOR_TYPE_SCALE,
+    hex: '#0072B2',
+    id: nanoid(),
+    name: 'Color Blind Friendly - Dark',
+    value: 0,
+  },
+  {
+    type: COLOR_TYPE_SCALE,
+    hex: '#D55E00',
+    id: nanoid(),
+    name: 'Color Blind Friendly - Dark',
+    value: 0,
+  },
+  {
+    type: COLOR_TYPE_SCALE,
+    hex: '#CC79A7',
+    id: nanoid(),
+    name: 'Color Blind Friendly - Dark',
+    value: 0,
+  },
+]
+
+export const LINE_COLORS_BLIND_LIGHT = [
+  {
+    type: COLOR_TYPE_SCALE,
+    hex: '#FFFFFF',
+    id: nanoid(),
+    name: 'Color Blind Friendly - Light',
+    value: 0,
+  },
+  {
+    type: COLOR_TYPE_SCALE,
+    hex: '#E69F00',
+    id: nanoid(),
+    name: 'Color Blind Friendly - Light',
+    value: 0,
+  },
+  {
+    type: COLOR_TYPE_SCALE,
+    hex: '#56B4E9',
+    id: nanoid(),
+    name: 'Color Blind Friendly - Light',
+    value: 0,
+  },
+  {
+    type: COLOR_TYPE_SCALE,
+    hex: '#009E73',
+    id: nanoid(),
+    name: 'Color Blind Friendly - Light',
+    value: 0,
+  },
+  {
+    type: COLOR_TYPE_SCALE,
+    hex: '#F0E442',
+    id: nanoid(),
+    name: 'Color Blind Friendly - Light',
+    value: 0,
+  },
+  {
+    type: COLOR_TYPE_SCALE,
+    hex: '#0072B2',
+    id: nanoid(),
+    name: 'Color Blind Friendly - Light',
+    value: 0,
+  },
+  {
+    type: COLOR_TYPE_SCALE,
+    hex: '#D55E00',
+    id: nanoid(),
+    name: 'Color Blind Friendly - Light',
+    value: 0,
+  },
+  {
+    type: COLOR_TYPE_SCALE,
+    hex: '#CC79A7',
+    id: nanoid(),
+    name: 'Color Blind Friendly - Light',
+    value: 0,
+  },
+]
+
 export const DEFAULT_LINE_COLORS = LINE_COLORS_A
 
 export const LINE_COLOR_SCALES = [
   LINE_COLORS_A,
   LINE_COLORS_B,
   LINE_COLORS_C,
   LINE_COLORS_D,
+  LINE_COLORS_BLIND_LIGHT,
+  LINE_COLORS_BLIND_DARK,
   LINE_COLORS_E,
   LINE_COLORS_F,
   LINE_COLORS_G,

src/shared/constants/index.ts

@@ -1,11 +1,13 @@
 import {
-  Config,
-  NINETEEN_EIGHTY_FOUR,
   ATLANTIS,
-  DO_ANDROIDS_DREAM,
-  DELOREAN,
+  COLOR_BLIND_FRIENDLY_DARK,
+  COLOR_BLIND_FRIENDLY_LIGHT,
   CTHULHU,
+  Config,
+  DELOREAN,
+  DO_ANDROIDS_DREAM,
   ECTOPLASM,
+  NINETEEN_EIGHTY_FOUR,
   T_MAX_400_FILM,
 } from '@influxdata/giraffe'
 import {InfluxColors} from '@influxdata/clockface'
@@ -146,6 +148,8 @@ export const GIRAFFE_COLOR_SCHEMES = [
   {name: 'Atlantis', colors: ATLANTIS},
   {name: 'Do Androids Dream of Electric Sheep?', colors: DO_ANDROIDS_DREAM},
   {name: 'Delorean', colors: DELOREAN},
+  {name: 'Color Blind Friendly - Light', colors: COLOR_BLIND_FRIENDLY_LIGHT},
+  {name: 'Color Blind Friendly - Dark', colors: COLOR_BLIND_FRIENDLY_DARK},
   {name: 'Cthulhu', colors: CTHULHU},
   {name: 'Ectoplasm', colors: ECTOPLASM},
   {name: 'T-MAX 400 Film', colors: T_MAX_400_FILM},

src/visualization/types/Heatmap/options.tsx

@@ -1,6 +1,13 @@
 // Libraries
 import React, {FC, ChangeEvent, useState} from 'react'
-import {VIRIDIS, MAGMA, INFERNO, PLASMA} from '@influxdata/giraffe'
+import {
+  COLOR_BLIND_FRIENDLY_DARK,
+  COLOR_BLIND_FRIENDLY_LIGHT,
+  INFERNO,
+  MAGMA,
+  PLASMA,
+  VIRIDIS,
+} from '@influxdata/giraffe'
 import {
   Form,
   Grid,
@@ -33,6 +40,8 @@ const HEATMAP_COLOR_SCHEMES = [
   {name: 'Inferno', colors: INFERNO},
   {name: 'Viridis', colors: VIRIDIS},
   {name: 'Plasma', colors: PLASMA},
+  {name: 'Color Blind Friendly - Light', colors: COLOR_BLIND_FRIENDLY_LIGHT},
+  {name: 'Color Blind Friendly - Dark', colors: COLOR_BLIND_FRIENDLY_DARK},
 ]
 
 interface Props extends VisualizationOptionProps {

yarn.lock

@@ -1471,10 +1471,10 @@
   resolved "https://registry.yarnpkg.com/@influxdata/flux-lsp-browser/-/flux-lsp-browser-0.8.21.tgz#28b1ab5d2b9f3130a616628f8da95fc4b886dfc6"
   integrity sha512-N/O9ZfePb7TjgVjecFekBkU5iIW2Ld1FPDE8iuirg5WQMdka9ZLvpCn0jcfUUD3C8mJyBt5gj5+VQe+oSgH49Q==
 
-"@influxdata/giraffe@^2.30.0":
-  version "2.30.0"
-  resolved "https://registry.yarnpkg.com/@influxdata/giraffe/-/giraffe-2.30.0.tgz#c399ffaa32a696e2a8c94f377b3cc76123268b5b"
-  integrity sha512-3YZI3PGf//6JbKRYMVyNOlClWdlEmuxqib+D8p84A3W1XIGcgm1j2thx1HeSnAmELMYXv92ugKiDGLaVwYuCwA==
+"@influxdata/giraffe@^2.31.1":
+  version "2.31.1"
+  resolved "https://registry.yarnpkg.com/@influxdata/giraffe/-/giraffe-2.31.1.tgz#c16211e93c392b612401d208950f0d01925efb74"
+  integrity sha512-DhJzm7e3Yk9pTE+y3g4qrcCbfDwMpduGKKmcR9mQjaErEnqLGCtyCgNi6Uo1qMppxRJ0CdZyHkIXV4D1oT8syg==
   dependencies:
     merge-images "^2.0.0"