feat: cleaner color API on SeriesSpec (opensearch-project#571)

Refactor naming of `customSeriesColors` to `color` to be inline with new `name` prop on `SeriesSpec`. The `CustomSeriesColors` type (which was `CustomSeriesColors`) now accepts a single color as string. BREAKING CHANGE: `customSeriesColors` prop on `SeriesSpec` is now `color`. The `CustomSeriesColors` type is replaced with `SeriesColorAccessor`.
AMoo-Miki · Mar 2, 2020 · 6a78c4e · 6a78c4e
1 parent f702e2c
commit 6a78c4e
Show file tree

Hide file tree

Showing 8 changed files with 40 additions and 27 deletions.
diff --git a/packages/osd-charts/src/chart_types/xy_chart/state/utils.test.ts b/packages/osd-charts/src/chart_types/xy_chart/state/utils.test.ts
@@ -338,7 +338,7 @@ describe('Chart State utils', () => {
     });
 
     describe('series collection is not empty', () => {
-      it('it should return an empty map if no customSeriesColors', () => {
+      it('it should return an empty map if no color', () => {
         const barSpec1 = MockSeriesSpec.bar({ id: specId1, data });
         const barSpec2 = MockSeriesSpec.bar({ id: specId2, data });
         const barSeriesSpecs = MockSeriesSpecs.fromSpecs([barSpec1, barSpec2]);
@@ -348,14 +348,25 @@ describe('Chart State utils', () => {
         expect(actual.size).toBe(0);
       });
 
+      it('it should return string color value', () => {
+        const color = 'green';
+        const barSpec1 = MockSeriesSpec.bar({ id: specId1, data, color });
+        const barSpec2 = MockSeriesSpec.bar({ id: specId2, data });
+        const barSeriesSpecs = MockSeriesSpecs.fromSpecs([barSpec1, barSpec2]);
+        const barSeriesCollection = MockSeriesCollection.fromSpecs(barSeriesSpecs);
+        const actual = getCustomSeriesColors(barSeriesSpecs, barSeriesCollection, new Map());
+
+        expect([...actual.values()]).toEqualArrayOf(color);
+      });
+
       describe('with customSeriesColors array', () => {
         const customSeriesColors = ['red', 'blue', 'green'];
-        const barSpec1 = MockSeriesSpec.bar({ id: specId1, data, customSeriesColors });
+        const barSpec1 = MockSeriesSpec.bar({ id: specId1, data, color: customSeriesColors });
         const barSpec2 = MockSeriesSpec.bar({ id: specId2, data });
         const barSeriesSpecs = MockSeriesSpecs.fromSpecs([barSpec1, barSpec2]);
         const barSeriesCollection = MockSeriesCollection.fromSpecs(barSeriesSpecs);
 
-        it('it should return color from customSeriesColors array', () => {
+        it('it should return color from color array', () => {
           const actual = getCustomSeriesColors(barSeriesSpecs, barSeriesCollection, new Map());
 
           expect(actual.size).toBe(4);
@@ -386,20 +397,20 @@ describe('Chart State utils', () => {
         });
       });
 
-      describe('with customSeriesColors function', () => {
-        const customSeriesColors: SeriesColorAccessorFn = ({ yAccessor, splitAccessors }) => {
+      describe('with color function', () => {
+        const color: SeriesColorAccessorFn = ({ yAccessor, splitAccessors }) => {
           if (yAccessor === 'y' && splitAccessors.get('g') === 'b') {
             return 'aquamarine';
           }
 
           return null;
         };
-        const barSpec1 = MockSeriesSpec.bar({ id: specId1, yAccessors: ['y'], data, customSeriesColors });
+        const barSpec1 = MockSeriesSpec.bar({ id: specId1, yAccessors: ['y'], data, color });
         const barSpec2 = MockSeriesSpec.bar({ id: specId2, data });
         const barSeriesSpecs = MockSeriesSpecs.fromSpecs([barSpec1, barSpec2]);
         const barSeriesCollection = MockSeriesCollection.fromSpecs(barSeriesSpecs);
 
-        it('it should return color from customSeriesColors function', () => {
+        it('it should return color from color function', () => {
           const actual = getCustomSeriesColors(barSeriesSpecs, barSeriesCollection, new Map());
 
           expect(actual.size).toBe(1);

diff --git a/packages/osd-charts/src/chart_types/xy_chart/state/utils.ts b/packages/osd-charts/src/chart_types/xy_chart/state/utils.ts
@@ -131,7 +131,7 @@ export function getCustomSeriesColors(
   seriesCollection.forEach(({ seriesIdentifier }, seriesKey) => {
     const spec = getSpecsById(seriesSpecs, seriesIdentifier.specId);
 
-    if (!spec || !(spec.customSeriesColors || seriesColorOverrides.size > 0)) {
+    if (!spec || !(spec.color || seriesColorOverrides.size > 0)) {
       return;
     }
 
@@ -141,12 +141,14 @@ export function getCustomSeriesColors(
       color = seriesColorOverrides.get(seriesKey);
     }
 
-    if (!color && spec.customSeriesColors) {
-      const counter = counters.get(seriesIdentifier.specId) || 0;
-      color = Array.isArray(spec.customSeriesColors)
-        ? spec.customSeriesColors[counter % spec.customSeriesColors.length]
-        : spec.customSeriesColors(seriesIdentifier);
-      counters.set(seriesIdentifier.specId, counter + 1);
+    if (!color && spec.color) {
+      if (typeof spec.color === 'string') {
+        color = spec.color;
+      } else {
+        const counter = counters.get(seriesIdentifier.specId) || 0;
+        color = Array.isArray(spec.color) ? spec.color[counter % spec.color.length] : spec.color(seriesIdentifier);
+        counters.set(seriesIdentifier.specId, counter + 1);
+      }
     }
 
     if (color) {

diff --git a/packages/osd-charts/src/chart_types/xy_chart/utils/specs.ts b/packages/osd-charts/src/chart_types/xy_chart/utils/specs.ts
@@ -264,7 +264,7 @@ export interface SeriesSpec extends Spec {
   /** The type of series you are looking to render */
   seriesType: SeriesTypes;
   /** Set colors for specific series */
-  customSeriesColors?: CustomSeriesColors;
+  color?: SeriesColorAccessor;
   /** If the series should appear in the legend
    * @default false
    */
@@ -307,7 +307,7 @@ export interface Postfixes {
 
 export type SeriesColorsArray = string[];
 export type SeriesColorAccessorFn = (seriesIdentifier: XYChartSeriesIdentifier) => string | null;
-export type CustomSeriesColors = SeriesColorsArray | SeriesColorAccessorFn;
+export type SeriesColorAccessor = string | SeriesColorsArray | SeriesColorAccessorFn;
 
 export interface SeriesAccessors {
   /** The field name of the x value on Datum object */

diff --git a/packages/osd-charts/src/index.ts b/packages/osd-charts/src/index.ts
@@ -20,7 +20,7 @@ export { SeriesIdentifier, XYChartSeriesIdentifier } from './chart_types/xy_char
 export {
   AnnotationDomainType,
   AnnotationDomainTypes,
-  CustomSeriesColors,
+  SeriesColorAccessor,
   SeriesColorsArray,
   SeriesColorAccessorFn,
   HistogramModeAlignment,

diff --git a/packages/osd-charts/src/utils/themes/theme.ts b/packages/osd-charts/src/utils/themes/theme.ts
@@ -131,23 +131,23 @@ export interface Theme {
    *
    * __Note:__ This is not used to set the color of a specific series. As such, any changes to the styles will not be reflected in the tooltip, legend, etc..
    *
-   * You may use `CustomSeriesColors` to assign colors to a given series or replace the `theme.colors.vizColors` colors to your desired colors.
+   * You may use `SeriesColorAccessor` to assign colors to a given series or replace the `theme.colors.vizColors` colors to your desired colors.
    */
   lineSeriesStyle: LineSeriesStyle;
   /**
    * Global area styles.
    *
    * __Note:__ This is not used to set the color of a specific series. As such, any changes to the styles will not be reflected in the tooltip, legend, etc..
    *
-   * You may use `CustomSeriesColors` to assign colors to a given series or replace the `theme.colors.vizColors` colors to your desired colors.
+   * You may use `SeriesColorAccessor` to assign colors to a given series or replace the `theme.colors.vizColors` colors to your desired colors.
    */
   areaSeriesStyle: AreaSeriesStyle;
   /**
    * Global bar styles.
    *
    * __Note:__ This is not used to set the color of a specific series. As such, any changes to the styles will not be reflected in the tooltip, legend, etc..
    *
-   * You may use `CustomSeriesColors` to assign colors to a given series or replace the `theme.colors.vizColors` colors to your desired colors.
+   * You may use `SeriesColorAccessor` to assign colors to a given series or replace the `theme.colors.vizColors` colors to your desired colors.
    */
   barSeriesStyle: BarSeriesStyle;
   arcSeriesStyle: ArcSeriesStyle;

diff --git a/packages/osd-charts/stories/stylings/8_custom_series_colors_array.tsx b/packages/osd-charts/stories/stylings/8_custom_series_colors_array.tsx
@@ -18,7 +18,7 @@ export const example = () => {
         xAccessor="x"
         yAccessors={['y1']}
         splitSeriesAccessors={['g1', 'g2']}
-        customSeriesColors={['red', 'orange', 'blue', 'green', 'black', 'lightgrey']}
+        color={['red', 'orange', 'blue', 'green', 'black', 'lightgrey']}
         data={TestDatasets.BARCHART_2Y2G}
       />
     </Chart>

diff --git a/packages/osd-charts/stories/stylings/9_custom_series_colors_function.tsx b/packages/osd-charts/stories/stylings/9_custom_series_colors_function.tsx
@@ -1,12 +1,12 @@
 import { color } from '@storybook/addon-knobs';
 import React from 'react';
 
-import { Axis, BarSeries, Chart, CustomSeriesColors, LineSeries, Position, ScaleType, Settings } from '../../src';
+import { Axis, BarSeries, Chart, SeriesColorAccessor, LineSeries, Position, ScaleType, Settings } from '../../src';
 import * as TestDatasets from '../../src/utils/data_samples/test_dataset';
 
 export const example = () => {
   const barColor = color('barSeriesColor', '#000');
-  const barSeriesColorAccessor: CustomSeriesColors = ({ specId, yAccessor, splitAccessors }) => {
+  const barSeriesColorAccessor: SeriesColorAccessor = ({ specId, yAccessor, splitAccessors }) => {
     if (
       specId === 'bars' &&
       yAccessor === 'y1' &&
@@ -21,7 +21,7 @@ export const example = () => {
   };
 
   const lineColor = color('linelineSeriesColor', '#ff0');
-  const lineSeriesColorAccessor: CustomSeriesColors = ({ specId, yAccessor, splitAccessors }) => {
+  const lineSeriesColorAccessor: SeriesColorAccessor = ({ specId, yAccessor, splitAccessors }) => {
     // eslint-disable-next-line react/prop-types
     if (specId === 'lines' && yAccessor === 'y1' && splitAccessors.size === 0) {
       return lineColor;
@@ -42,7 +42,7 @@ export const example = () => {
         xAccessor="x"
         yAccessors={['y1', 'y2']}
         splitSeriesAccessors={['g1', 'g2']}
-        customSeriesColors={barSeriesColorAccessor}
+        color={barSeriesColorAccessor}
         data={TestDatasets.BARCHART_2Y2G}
       />
       <LineSeries
@@ -51,7 +51,7 @@ export const example = () => {
         yScaleType={ScaleType.Linear}
         xAccessor="x"
         yAccessors={['y']}
-        customSeriesColors={lineSeriesColorAccessor}
+        color={lineSeriesColorAccessor}
         data={[
           { x: 0, y: 3 },
           { x: 1, y: 2 },

diff --git a/packages/osd-charts/wiki/overview.md b/packages/osd-charts/wiki/overview.md
@@ -127,7 +127,7 @@ export interface SeriesSpec {
   /** The type of series you are looking to render */
   seriesType: SeriesTypes;
   /** Set colors for specific series */
-  customSeriesColors?: CustomSeriesColors;
+  color?: SeriesColorAccessor;
   /** If the series should appear in the legend
    * @default false
    */