refactor(SeriesSpec): customSeriesColors to color on SeriesSpec

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);

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) {

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?: CustomSeriesColors;
   /** 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 CustomSeriesColors = string | SeriesColorsArray | SeriesColorAccessorFn;
 
 export interface SeriesAccessors {
   /** The field name of the x value on Datum object */

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>

stories/stylings/9_custom_series_colors_function.tsx

@@ -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 },

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?: CustomSeriesColors;
   /** If the series should appear in the legend
    * @default false
    */