feat(specs): add name to series specs (#142)

A `name` prop is now available for each series. This name will be used, if available, on every legend or tooltip instead of the specId (used as fallback). fix #136
elastic · Apr 1, 2019 · a6e6f49 · a6e6f49
1 parent 9694b5b
commit a6e6f49
Show file tree

Hide file tree

Showing 6 changed files with 99 additions and 16 deletions.
diff --git a/src/lib/series/legend.test.ts b/src/lib/series/legend.test.ts
@@ -1,6 +1,6 @@
 import { getGroupId, getSpecId, SpecId } from '../utils/ids';
 import { ScaleType } from '../utils/scales/scales';
-import { computeLegend } from './legend';
+import { computeLegend, getSeriesColorLabel } from './legend';
 import { DataSeriesColorsValues } from './series';
 import { BasicSeriesSpec } from './specs';
 
@@ -22,6 +22,7 @@ const colorValues2b = {
 };
 const spec1: BasicSeriesSpec = {
   id: getSpecId('spec1'),
+  name: 'Spec 1 title',
   groupId: getGroupId('group'),
   seriesType: 'line',
   yScaleType: ScaleType.Log,
@@ -62,7 +63,7 @@ describe('Legends', () => {
     const expected = [
       {
         color: 'red',
-        label: 'spec1',
+        label: 'Spec 1 title',
         value: { colorValues: [], specId: 'spec1' },
         isVisible: true,
         key: 'colorSeries1a',
@@ -77,7 +78,7 @@ describe('Legends', () => {
     const expected = [
       {
         color: 'red',
-        label: 'spec1',
+        label: 'Spec 1 title',
         value: { colorValues: [], specId: 'spec1' },
         isVisible: true,
         key: 'colorSeries1a',
@@ -99,7 +100,7 @@ describe('Legends', () => {
     const expected = [
       {
         color: 'red',
-        label: 'spec1',
+        label: 'Spec 1 title',
         value: { colorValues: [], specId: 'spec1' },
         isVisible: true,
         key: 'colorSeries1a',
@@ -126,7 +127,7 @@ describe('Legends', () => {
     const expected = [
       {
         color: 'violet',
-        label: 'spec1',
+        label: 'Spec 1 title',
         value: { colorValues: [], specId: 'spec1' },
         isVisible: true,
         key: 'colorSeries1a',
@@ -163,4 +164,27 @@ describe('Legends', () => {
     const visibility = [...legend.values()].map((item) => item.isVisible);
     expect(visibility).toEqual([false, false, true, true]);
   });
+  it('returns the right series label for a color series', () => {
+    let label = getSeriesColorLabel([], true);
+    expect(label).toBeUndefined();
+    label = getSeriesColorLabel([], true, spec1);
+    expect(label).toBe('Spec 1 title');
+    label = getSeriesColorLabel([], true, spec2);
+    expect(label).toBe('spec2');
+    label = getSeriesColorLabel(['a', 'b'], true, spec1);
+    expect(label).toBe('Spec 1 title');
+    label = getSeriesColorLabel(['a', 'b'], true, spec2);
+    expect(label).toBe('spec2');
+
+    label = getSeriesColorLabel([], false);
+    expect(label).toBeUndefined();
+    label = getSeriesColorLabel([], false, spec1);
+    expect(label).toBe('Spec 1 title');
+    label = getSeriesColorLabel([], false, spec2);
+    expect(label).toBe('spec2');
+    label = getSeriesColorLabel(['a', 'b'], false, spec1);
+    expect(label).toBe('a - b');
+    label = getSeriesColorLabel(['a', 'b'], false, spec2);
+    expect(label).toBe('a - b');
+  });
 });
diff --git a/src/lib/series/legend.ts b/src/lib/series/legend.ts
@@ -23,7 +23,7 @@ export function computeLegend(
 
     const color = seriesColorMap.get(key) || defaultColor;
     const hasSingleSeries = seriesColor.size === 1;
-    const label = getSeriesColorLabel(series, hasSingleSeries, spec);
+    const label = getSeriesColorLabel(series.colorValues, hasSingleSeries, spec);
     const isVisible = deselectedDataSeries
       ? findDataSeriesByColorValues(deselectedDataSeries, series) < 0
       : true;
@@ -44,19 +44,19 @@ export function computeLegend(
 }
 
 export function getSeriesColorLabel(
-  series: DataSeriesColorsValues,
+  colorValues: any[],
   hasSingleSeries: boolean,
-  spec: BasicSeriesSpec | undefined,
+  spec?: BasicSeriesSpec,
 ): string | undefined {
   let label = '';
 
-  if (hasSingleSeries || series.colorValues.length === 0 || !series.colorValues[0]) {
+  if (hasSingleSeries || colorValues.length === 0 || !colorValues[0]) {
     if (!spec) {
       return;
     }
-    label = `${spec.id}`;
+    label = spec.name || `${spec.id}`;
   } else {
-    label = series.colorValues.join(' - ');
+    label = colorValues.join(' - ');
   }
 
   return label;

diff --git a/src/lib/series/specs.ts b/src/lib/series/specs.ts
@@ -27,6 +27,8 @@ export type DomainRange = LowerBoundedDomain | UpperBoundedDomain | CompleteBoun
 export interface SeriesSpec {
   /** The ID of the spec, generated via getSpecId method */
   id: SpecId;
+  /** The name or label of the spec */
+  name?: string;
   /** The ID of the spec group, generated via getGroupId method
    * @default __global__
    */

diff --git a/src/lib/series/tooltip.ts b/src/lib/series/tooltip.ts
@@ -20,7 +20,7 @@ export function formatTooltip(
   if (seriesKey.length > 0) {
     name = searchIndexValue.seriesKey.join(' - ');
   } else {
-    name = `${spec.id}`;
+    name = spec.name || `${spec.id}`;
   }
   // format y value
   return formatAccessor(
@@ -50,7 +50,7 @@ export function formatXTooltipValue(
   if (searchIndexValue.seriesKey.length > 0) {
     name = searchIndexValue.seriesKey.join(' - ');
   } else {
-    name = `${spec.id}`;
+    name = spec.name || `${spec.id}`;
   }
   const xValues = formatAccessor(
     searchIndexValue.datum,

diff --git a/stories/area_chart.tsx b/stories/area_chart.tsx
@@ -217,7 +217,8 @@ storiesOf('Area Chart', module)
           tickFormat={(d) => Number(d).toFixed(2)}
         />
         <AreaSeries
-          id={getSpecId(KIBANA_METRICS.metrics.kibana_os_load[2].metric.label)}
+          id={getSpecId('1')}
+          name={KIBANA_METRICS.metrics.kibana_os_load[2].metric.label}
           xScaleType={ScaleType.Time}
           yScaleType={ScaleType.Linear}
           xAccessor={0}
@@ -227,7 +228,8 @@ storiesOf('Area Chart', module)
           yScaleToDataExtent={false}
         />
         <AreaSeries
-          id={getSpecId(KIBANA_METRICS.metrics.kibana_os_load[1].metric.label)}
+          id={getSpecId('2')}
+          name={KIBANA_METRICS.metrics.kibana_os_load[1].metric.label}
           xScaleType={ScaleType.Time}
           yScaleType={ScaleType.Linear}
           xAccessor={0}
@@ -237,7 +239,60 @@ storiesOf('Area Chart', module)
           yScaleToDataExtent={false}
         />
         <AreaSeries
-          id={getSpecId(KIBANA_METRICS.metrics.kibana_os_load[0].metric.label)}
+          id={getSpecId('3')}
+          name={KIBANA_METRICS.metrics.kibana_os_load[0].metric.label}
+          xScaleType={ScaleType.Time}
+          yScaleType={ScaleType.Linear}
+          xAccessor={0}
+          yAccessors={[1]}
+          stackAccessors={[0]}
+          data={KIBANA_METRICS.metrics.kibana_os_load[0].data}
+          yScaleToDataExtent={false}
+        />
+      </Chart>
+    );
+  })
+  .add('stacked with separated specs - same naming', () => {
+    return (
+      <Chart renderer="canvas" className={'story-chart'}>
+        <Settings showLegend={true} legendPosition={Position.Right} />
+        <Axis
+          id={getAxisId('bottom')}
+          position={Position.Bottom}
+          title={'timestamp per 1 minute'}
+          showOverlappingTicks={true}
+          tickFormat={dateFormatter}
+        />
+        <Axis
+          title={KIBANA_METRICS.metrics.kibana_os_load[0].metric.title}
+          position={Position.Left}
+          tickFormat={(d) => Number(d).toFixed(2)}
+        />
+        <AreaSeries
+          id={getSpecId('1')}
+          name={'Count'}
+          xScaleType={ScaleType.Time}
+          yScaleType={ScaleType.Linear}
+          xAccessor={0}
+          yAccessors={[1]}
+          stackAccessors={[0]}
+          data={KIBANA_METRICS.metrics.kibana_os_load[2].data}
+          yScaleToDataExtent={false}
+        />
+        <AreaSeries
+          id={getSpecId('2')}
+          name={'Count'}
+          xScaleType={ScaleType.Time}
+          yScaleType={ScaleType.Linear}
+          xAccessor={0}
+          yAccessors={[1]}
+          stackAccessors={[0]}
+          data={KIBANA_METRICS.metrics.kibana_os_load[1].data}
+          yScaleToDataExtent={false}
+        />
+        <AreaSeries
+          id={getSpecId('3')}
+          name={'Count'}
           xScaleType={ScaleType.Time}
           yScaleType={ScaleType.Linear}
           xAccessor={0}

diff --git a/stories/bar_chart.tsx b/stories/bar_chart.tsx
@@ -29,6 +29,7 @@ storiesOf('Bar Chart', module)
       <Chart renderer="canvas" className={className}>
         <BarSeries
           id={getSpecId('bars')}
+          name={'Simple bar series'}
           xScaleType={ScaleType.Linear}
           yScaleType={ScaleType.Linear}
           xAccessor="x"
@@ -262,6 +263,7 @@ storiesOf('Bar Chart', module)
 
         <BarSeries
           id={getSpecId('bars')}
+          name={'Simple bar series'}
           xScaleType={ScaleType.Linear}
           yScaleType={ScaleType.Linear}
           xAccessor="x"