From a6e6f49c76527800862d294036a1debf69f3483d Mon Sep 17 00:00:00 2001 From: Marco Vettorello Date: Tue, 2 Apr 2019 00:17:45 +0200 Subject: [PATCH] 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 --- src/lib/series/legend.test.ts | 34 ++++++++++++++++--- src/lib/series/legend.ts | 12 +++---- src/lib/series/specs.ts | 2 ++ src/lib/series/tooltip.ts | 4 +-- stories/area_chart.tsx | 61 +++++++++++++++++++++++++++++++++-- stories/bar_chart.tsx | 2 ++ 6 files changed, 99 insertions(+), 16 deletions(-) diff --git a/src/lib/series/legend.test.ts b/src/lib/series/legend.test.ts index 5d460a35e0..3f64dc2a91 100644 --- 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 index ea2ce57d0b..b455a74d9e 100644 --- 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 index 1a76c96aa2..89ce080139 100644 --- 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 index 3db6ae20d3..efbe3d52da 100644 --- 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 index 1f6794a834..169a72e2a1 100644 --- a/stories/area_chart.tsx +++ b/stories/area_chart.tsx @@ -217,7 +217,8 @@ storiesOf('Area Chart', module) tickFormat={(d) => Number(d).toFixed(2)} /> + + ); + }) + .add('stacked with separated specs - same naming', () => { + return ( + + + + Number(d).toFixed(2)} + /> + + +