feat: specify series name with a function on SeriesSpec (opensearch-project#539)

Refactor name prop on SeriesSpec to take custom naming props to name series.

BREAKING CHANGE: Remove `customSubSeriesName` prop on series specs in favor of cleaner api using just the `name` prop on `SeriesSpec`. The types `SeriesStringPredicate`, `SubSeriesStringPredicate` have been removed.

Author: nickofthyme

packages/osd-charts/.playground/playground.tsx

@@ -1,43 +1,39 @@
 import React from 'react';
-import { Chart, ScaleType, Position, Axis, getAxisId, timeFormatter, getSpecId, AreaSeries, Settings } from '../src';
-import { KIBANA_METRICS } from '../src/utils/data_samples/test_dataset_kibana';
-export class Playground extends React.Component {
-  chartRef: React.RefObject<Chart> = React.createRef();
-  onBrushEnd = (min: number, max: number) => {
-    // eslint-disable-next-line no-console
-    console.log({ min, max });
-  };
 
+import { Chart, LineSeries, ScaleType, Position, Axis } from '../src';
+import { SeededDataGenerator } from '../src/mocks/utils';
+
+export class Playground extends React.Component<{}, { isSunburstShown: boolean }> {
   render() {
+    const dg = new SeededDataGenerator();
+    const data = dg.generateGroupedSeries(10, 2).map((item) => ({
+      ...item,
+      y1: item.y + 100,
+    }));
+
     return (
       <>
         <div className="chart">
-          <Chart className={'story-chart'}>
-            <Settings showLegend={true} />
-            <Axis
-              id={getAxisId('bottom')}
-              title={'timestamp per 1 minute'}
-              position={Position.Bottom}
-              showOverlappingTicks={true}
-              tickFormat={timeFormatter('HH:mm')}
+          <Chart>
+            <Axis id="y1" position={Position.Left} title={'y1'} />
+            <Axis id="y2" domain={{ fit: true }} groupId="g2" position={Position.Right} title={'y2'} />
+            <Axis id="x" position={Position.Bottom} title={'x'} />
+            <LineSeries
+              id="line1"
+              xScaleType={ScaleType.Linear}
+              xAccessor={'x'}
+              yAccessors={['y']}
+              splitSeriesAccessors={['g']}
+              data={data}
             />
-            <Axis
-              id={getAxisId('left')}
-              title={KIBANA_METRICS.metrics.kibana_os_load[0].metric.title}
-              position={Position.Left}
-              tickFormat={(d) => Number(d).toFixed(2)}
-            />
-
-            <AreaSeries
-              id={getSpecId('area')}
-              xScaleType={ScaleType.Time}
-              yScaleType={ScaleType.Linear}
-              xAccessor={0}
-              yAccessors={[1]}
-              y0Accessors={[2]}
-              data={KIBANA_METRICS.metrics.kibana_os_load[0].data.map((d) => {
-                return [...d, d[1] - 10];
-              })}
+            <LineSeries
+              id="line2"
+              groupId="g2"
+              xScaleType={ScaleType.Linear}
+              xAccessor={'x'}
+              yAccessors={['y1']}
+              splitSeriesAccessors={['g']}
+              data={data}
             />
           </Chart>
         </div>

packages/osd-charts/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-add-custom-full-and-sub-series-label-visually-looks-correct-1-snap.png

@@ -1,7 +1,7 @@
 import { getAxisId, getGroupId, getSpecId } from '../../../utils/ids';
 import { ScaleType } from '../../../scales';
 import { computeLegend } from './legend';
-import { SeriesCollectionValue, getSeriesLabel } from '../utils/series';
+import { SeriesCollectionValue, getSeriesName } from '../utils/series';
 import { AxisSpec, BasicSeriesSpec, SeriesTypes } from '../utils/specs';
 import { Position } from '../../../utils/commons';
 import { ChartTypes } from '../..';
@@ -118,7 +118,7 @@ describe('Legends', () => {
     const expected = [
       {
         color: 'red',
-        label: 'Spec 1 title',
+        name: 'Spec 1 title',
         seriesIdentifier: {
           seriesKeys: ['y1'],
           specId: 'spec1',
@@ -142,7 +142,7 @@ describe('Legends', () => {
     const expected = [
       {
         color: 'red',
-        label: 'Spec 1 title',
+        name: 'Spec 1 title',
         seriesIdentifier: {
           seriesKeys: ['y1'],
           specId: 'spec1',
@@ -158,7 +158,7 @@ describe('Legends', () => {
       },
       {
         color: 'blue',
-        label: 'a - b',
+        name: 'a - b',
         seriesIdentifier: {
           seriesKeys: ['a', 'b', 'y1'],
           specId: 'spec1',
@@ -182,7 +182,7 @@ describe('Legends', () => {
     const expected = [
       {
         color: 'red',
-        label: 'Spec 1 title',
+        name: 'Spec 1 title',
         seriesIdentifier: {
           seriesKeys: ['y1'],
           specId: 'spec1',
@@ -198,7 +198,7 @@ describe('Legends', () => {
       },
       {
         color: 'green',
-        label: 'spec2',
+        name: 'spec2',
         seriesIdentifier: {
           seriesKeys: ['y1'],
           specId: 'spec2',
@@ -227,7 +227,7 @@ describe('Legends', () => {
     const expected = [
       {
         color: 'violet',
-        label: 'Spec 1 title',
+        name: 'Spec 1 title',
         banded: undefined,
         seriesIdentifier: {
           seriesKeys: ['y1'],
@@ -272,7 +272,7 @@ describe('Legends', () => {
     const visibility = [...legend.values()].map((item) => item.isSeriesVisible);
     expect(visibility).toEqual([false, false, true]);
   });
-  it('returns the right series label for a color series', () => {
+  it('returns the right series name for a color series', () => {
     const seriesIdentifier1 = {
       specId: getSpecId(''),
       yAccessor: 'y1',
@@ -289,38 +289,38 @@ describe('Legends', () => {
     };
 
     // null removed, seriesIdentifier has to be at least an empty array
-    let label = getSeriesLabel(seriesIdentifier1, true, false);
-    expect(label).toBe('');
-    label = getSeriesLabel(seriesIdentifier1, true, false, spec1);
-    expect(label).toBe('Spec 1 title');
-    label = getSeriesLabel(seriesIdentifier1, true, false, spec2);
-    expect(label).toBe('spec2');
-    label = getSeriesLabel(seriesIdentifier2, true, false, spec1);
-    expect(label).toBe('Spec 1 title');
-    label = getSeriesLabel(seriesIdentifier2, true, false, spec2);
-    expect(label).toBe('spec2');
+    let name = getSeriesName(seriesIdentifier1, true, false);
+    expect(name).toBe('');
+    name = getSeriesName(seriesIdentifier1, true, false, spec1);
+    expect(name).toBe('Spec 1 title');
+    name = getSeriesName(seriesIdentifier1, true, false, spec2);
+    expect(name).toBe('spec2');
+    name = getSeriesName(seriesIdentifier2, true, false, spec1);
+    expect(name).toBe('Spec 1 title');
+    name = getSeriesName(seriesIdentifier2, true, false, spec2);
+    expect(name).toBe('spec2');
 
-    label = getSeriesLabel(seriesIdentifier1, false, false, spec1);
-    expect(label).toBe('Spec 1 title');
-    label = getSeriesLabel(seriesIdentifier1, false, false, spec2);
-    expect(label).toBe('spec2');
-    label = getSeriesLabel(seriesIdentifier2, false, false, spec1);
-    expect(label).toBe('a - b');
-    label = getSeriesLabel(seriesIdentifier2, false, false, spec2);
-    expect(label).toBe('a - b');
+    name = getSeriesName(seriesIdentifier1, false, false, spec1);
+    expect(name).toBe('Spec 1 title');
+    name = getSeriesName(seriesIdentifier1, false, false, spec2);
+    expect(name).toBe('spec2');
+    name = getSeriesName(seriesIdentifier2, false, false, spec1);
+    expect(name).toBe('a - b');
+    name = getSeriesName(seriesIdentifier2, false, false, spec2);
+    expect(name).toBe('a - b');
 
-    label = getSeriesLabel(seriesIdentifier1, true, false, spec1);
-    expect(label).toBe('Spec 1 title');
-    label = getSeriesLabel(seriesIdentifier1, true, false, spec2);
-    expect(label).toBe('spec2');
-    label = getSeriesLabel(seriesIdentifier1, true, false);
-    expect(label).toBe('');
-    label = getSeriesLabel(seriesIdentifier1, true, false, spec1);
-    expect(label).toBe('Spec 1 title');
-    label = getSeriesLabel(seriesIdentifier1, true, false, spec2);
-    expect(label).toBe('spec2');
+    name = getSeriesName(seriesIdentifier1, true, false, spec1);
+    expect(name).toBe('Spec 1 title');
+    name = getSeriesName(seriesIdentifier1, true, false, spec2);
+    expect(name).toBe('spec2');
+    name = getSeriesName(seriesIdentifier1, true, false);
+    expect(name).toBe('');
+    name = getSeriesName(seriesIdentifier1, true, false, spec1);
+    expect(name).toBe('Spec 1 title');
+    name = getSeriesName(seriesIdentifier1, true, false, spec2);
+    expect(name).toBe('spec2');
   });
-  it('use the splitted value as label if has a single series and splitSeries is used', () => {
+  it('use the splitted value as name if has a single series and splitSeries is used', () => {
     const seriesIdentifier1 = {
       specId: getSpecId(''),
       yAccessor: 'y1',
@@ -347,22 +347,22 @@ describe('Legends', () => {
       ...spec1,
       splitSeriesAccessors: ['g'],
     };
-    let label = getSeriesLabel(seriesIdentifier1, true, false, specWithSplit);
-    expect(label).toBe('Spec 1 title');
+    let name = getSeriesName(seriesIdentifier1, true, false, specWithSplit);
+    expect(name).toBe('Spec 1 title');
 
-    label = getSeriesLabel(seriesIdentifier3, true, false, specWithSplit);
-    expect(label).toBe('a');
+    name = getSeriesName(seriesIdentifier3, true, false, specWithSplit);
+    expect(name).toBe('a');
 
     // happens when we have multiple values in splitSeriesAccessor
     // or we have also multiple yAccessors
-    label = getSeriesLabel(seriesIdentifier2, true, false, specWithSplit);
-    expect(label).toBe('a - b');
+    name = getSeriesName(seriesIdentifier2, true, false, specWithSplit);
+    expect(name).toBe('a - b');
 
     // happens when the value of a splitSeriesAccessor is null
-    label = getSeriesLabel(seriesIdentifier1, true, false, specWithSplit);
-    expect(label).toBe('Spec 1 title');
+    name = getSeriesName(seriesIdentifier1, true, false, specWithSplit);
+    expect(name).toBe('Spec 1 title');
 
-    label = getSeriesLabel(seriesIdentifier1, false, false, specWithSplit);
-    expect(label).toBe('Spec 1 title');
+    name = getSeriesName(seriesIdentifier1, false, false, specWithSplit);
+    expect(name).toBe('Spec 1 title');
   });
 });

packages/osd-charts/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-add-custom-series-name-formatting-visually-looks-correct-1-snap.png

@@ -4,7 +4,7 @@ import {
   SeriesCollectionValue,
   getSeriesIndex,
   getSortedDataSeriesColorsValuesMap,
-  getSeriesLabel,
+  getSeriesName,
   XYChartSeriesIdentifier,
 } from '../utils/series';
 import { AxisSpec, BasicSeriesSpec, Postfixes, isAreaSeriesSpec, isBarSeriesSpec } from '../utils/specs';
@@ -19,7 +19,7 @@ interface FormattedLastValues {
 export type LegendItem = Postfixes & {
   key: string;
   color: string;
-  label: string;
+  name: string;
   seriesIdentifier: XYChartSeriesIdentifier;
   isSeriesVisible?: boolean;
   banded?: boolean;
@@ -43,14 +43,14 @@ function getPostfix(spec: BasicSeriesSpec): Postfixes {
 }
 
 export function getItemLabel(
-  { banded, label, y1AccessorFormat, y0AccessorFormat }: LegendItem,
+  { banded, name, y1AccessorFormat, y0AccessorFormat }: LegendItem,
   yAccessor: BandedAccessorType,
 ) {
   if (!banded) {
-    return label;
+    return name;
   }
 
-  return yAccessor === BandedAccessorType.Y1 ? `${label}${y1AccessorFormat}` : `${label}${y0AccessorFormat}`;
+  return yAccessor === BandedAccessorType.Y1 ? `${name}${y1AccessorFormat}` : `${name}${y0AccessorFormat}`;
 }
 
 export function computeLegend(
@@ -69,10 +69,10 @@ export function computeLegend(
     const spec = getSpecsById<BasicSeriesSpec>(specs, seriesIdentifier.specId);
     const color = seriesColors.get(key) || defaultColor;
     const hasSingleSeries = seriesCollection.size === 1;
-    const label = getSeriesLabel(seriesIdentifier, hasSingleSeries, false, spec);
+    const name = getSeriesName(seriesIdentifier, hasSingleSeries, false, spec);
     const isSeriesVisible = deselectedDataSeries ? getSeriesIndex(deselectedDataSeries, seriesIdentifier) < 0 : true;
 
-    if (label === '' || !spec) {
+    if (name === '' || !spec) {
       return;
     }
 
@@ -84,7 +84,7 @@ export function computeLegend(
     const legendItem: LegendItem = {
       key,
       color,
-      label,
+      name,
       banded,
       seriesIdentifier,
       isSeriesVisible,

packages/osd-charts/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-add-custom-series-name-visually-looks-correct-1-snap.png

@@ -105,7 +105,7 @@ describe('Rendering utils', () => {
     const highlightedLegendItem: LegendItem = {
       key: 'somekey',
       color: '',
-      label: '',
+      name: '',
       seriesIdentifier,
       isSeriesVisible: true,
       isLegendItemVisible: true,

packages/osd-charts/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-add-custom-sub-series-label-formatting-visually-looks-correct-1-snap.png

@@ -25,8 +25,8 @@ describe('XYChart - specs ordering', () => {
     store.dispatch(specParsed());
 
     const legendItems = getLegendItemsSelector(store.getState());
-    const labels = [...legendItems.values()].map((item) => item.label);
-    expect(labels).toEqual(['A', 'B', 'C']);
+    const names = [...legendItems.values()].map((item) => item.name);
+    expect(names).toEqual(['A', 'B', 'C']);
   });
   it('the legend respect the insert order [B, A, C]', () => {
     store.dispatch(specParsing());
@@ -35,8 +35,8 @@ describe('XYChart - specs ordering', () => {
     store.dispatch(upsertSpec(MockSeriesSpec.bar({ id: 'C', data })));
     store.dispatch(specParsed());
     const legendItems = getLegendItemsSelector(store.getState());
-    const labels = [...legendItems.values()].map((item) => item.label);
-    expect(labels).toEqual(['B', 'A', 'C']);
+    const names = [...legendItems.values()].map((item) => item.name);
+    expect(names).toEqual(['B', 'A', 'C']);
   });
   it('the legend respect the order when changing properties of existing specs', () => {
     store.dispatch(specParsing());
@@ -46,8 +46,8 @@ describe('XYChart - specs ordering', () => {
     store.dispatch(specParsed());
 
     let legendItems = getLegendItemsSelector(store.getState());
-    let labels = [...legendItems.values()].map((item) => item.label);
-    expect(labels).toEqual(['A', 'B', 'C']);
+    let names = [...legendItems.values()].map((item) => item.name);
+    expect(names).toEqual(['A', 'B', 'C']);
 
     store.dispatch(specParsing());
     store.dispatch(upsertSpec(MockSeriesSpec.bar({ id: 'A', data })));
@@ -56,8 +56,8 @@ describe('XYChart - specs ordering', () => {
     store.dispatch(specParsed());
 
     legendItems = getLegendItemsSelector(store.getState());
-    labels = [...legendItems.values()].map((item) => item.label);
-    expect(labels).toEqual(['A', 'B updated', 'C']);
+    names = [...legendItems.values()].map((item) => item.name);
+    expect(names).toEqual(['A', 'B updated', 'C']);
   });
   it('the legend respect the order when changing the order of the specs', () => {
     store.dispatch(specParsing());
@@ -67,8 +67,8 @@ describe('XYChart - specs ordering', () => {
     store.dispatch(specParsed());
 
     let legendItems = getLegendItemsSelector(store.getState());
-    let labels = [...legendItems.values()].map((item) => item.label);
-    expect(labels).toEqual(['A', 'B', 'C']);
+    let names = [...legendItems.values()].map((item) => item.name);
+    expect(names).toEqual(['A', 'B', 'C']);
 
     store.dispatch(specParsing());
     store.dispatch(upsertSpec(MockSeriesSpec.bar({ id: 'B', data })));
@@ -77,7 +77,7 @@ describe('XYChart - specs ordering', () => {
     store.dispatch(specParsed());
 
     legendItems = getLegendItemsSelector(store.getState());
-    labels = [...legendItems.values()].map((item) => item.label);
-    expect(labels).toEqual(['B', 'A', 'C']);
+    names = [...legendItems.values()].map((item) => item.name);
+    expect(names).toEqual(['B', 'A', 'C']);
   });
 });