Skip to content

Commit a6e6f49

Browse files
markov00markov00
authored
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
1 parent 9694b5b commit a6e6f49

File tree

6 files changed

+99
-16
lines changed

6 files changed

+99
-16
lines changed

‎src/lib/series/legend.test.ts

+29-5
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { getGroupId, getSpecId, SpecId } from '../utils/ids';
22
import { ScaleType } from '../utils/scales/scales';
3-
import { computeLegend } from './legend';
3+
import { computeLegend, getSeriesColorLabel } from './legend';
44
import { DataSeriesColorsValues } from './series';
55
import { BasicSeriesSpec } from './specs';
66

@@ -22,6 +22,7 @@ const colorValues2b = {
2222
};
2323
const spec1: BasicSeriesSpec = {
2424
id: getSpecId('spec1'),
25+
name: 'Spec 1 title',
2526
groupId: getGroupId('group'),
2627
seriesType: 'line',
2728
yScaleType: ScaleType.Log,
@@ -62,7 +63,7 @@ describe('Legends', () => {
6263
const expected = [
6364
{
6465
color: 'red',
65-
label: 'spec1',
66+
label: 'Spec 1 title',
6667
value: { colorValues: [], specId: 'spec1' },
6768
isVisible: true,
6869
key: 'colorSeries1a',
@@ -77,7 +78,7 @@ describe('Legends', () => {
7778
const expected = [
7879
{
7980
color: 'red',
80-
label: 'spec1',
81+
label: 'Spec 1 title',
8182
value: { colorValues: [], specId: 'spec1' },
8283
isVisible: true,
8384
key: 'colorSeries1a',
@@ -99,7 +100,7 @@ describe('Legends', () => {
99100
const expected = [
100101
{
101102
color: 'red',
102-
label: 'spec1',
103+
label: 'Spec 1 title',
103104
value: { colorValues: [], specId: 'spec1' },
104105
isVisible: true,
105106
key: 'colorSeries1a',
@@ -126,7 +127,7 @@ describe('Legends', () => {
126127
const expected = [
127128
{
128129
color: 'violet',
129-
label: 'spec1',
130+
label: 'Spec 1 title',
130131
value: { colorValues: [], specId: 'spec1' },
131132
isVisible: true,
132133
key: 'colorSeries1a',
@@ -163,4 +164,27 @@ describe('Legends', () => {
163164
const visibility = [...legend.values()].map((item) => item.isVisible);
164165
expect(visibility).toEqual([false, false, true, true]);
165166
});
167+
it('returns the right series label for a color series', () => {
168+
let label = getSeriesColorLabel([], true);
169+
expect(label).toBeUndefined();
170+
label = getSeriesColorLabel([], true, spec1);
171+
expect(label).toBe('Spec 1 title');
172+
label = getSeriesColorLabel([], true, spec2);
173+
expect(label).toBe('spec2');
174+
label = getSeriesColorLabel(['a', 'b'], true, spec1);
175+
expect(label).toBe('Spec 1 title');
176+
label = getSeriesColorLabel(['a', 'b'], true, spec2);
177+
expect(label).toBe('spec2');
178+
179+
label = getSeriesColorLabel([], false);
180+
expect(label).toBeUndefined();
181+
label = getSeriesColorLabel([], false, spec1);
182+
expect(label).toBe('Spec 1 title');
183+
label = getSeriesColorLabel([], false, spec2);
184+
expect(label).toBe('spec2');
185+
label = getSeriesColorLabel(['a', 'b'], false, spec1);
186+
expect(label).toBe('a - b');
187+
label = getSeriesColorLabel(['a', 'b'], false, spec2);
188+
expect(label).toBe('a - b');
189+
});
166190
});

‎src/lib/series/legend.ts

+6-6
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ export function computeLegend(
2323

2424
const color = seriesColorMap.get(key) || defaultColor;
2525
const hasSingleSeries = seriesColor.size === 1;
26-
const label = getSeriesColorLabel(series, hasSingleSeries, spec);
26+
const label = getSeriesColorLabel(series.colorValues, hasSingleSeries, spec);
2727
const isVisible = deselectedDataSeries
2828
? findDataSeriesByColorValues(deselectedDataSeries, series) < 0
2929
: true;
@@ -44,19 +44,19 @@ export function computeLegend(
4444
}
4545

4646
export function getSeriesColorLabel(
47-
series: DataSeriesColorsValues,
47+
colorValues: any[],
4848
hasSingleSeries: boolean,
49-
spec: BasicSeriesSpec | undefined,
49+
spec?: BasicSeriesSpec,
5050
): string | undefined {
5151
let label = '';
5252

53-
if (hasSingleSeries || series.colorValues.length === 0 || !series.colorValues[0]) {
53+
if (hasSingleSeries || colorValues.length === 0 || !colorValues[0]) {
5454
if (!spec) {
5555
return;
5656
}
57-
label = `${spec.id}`;
57+
label = spec.name || `${spec.id}`;
5858
} else {
59-
label = series.colorValues.join(' - ');
59+
label = colorValues.join(' - ');
6060
}
6161

6262
return label;

‎src/lib/series/specs.ts

+2
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,8 @@ export type DomainRange = LowerBoundedDomain | UpperBoundedDomain | CompleteBoun
2727
export interface SeriesSpec {
2828
/** The ID of the spec, generated via getSpecId method */
2929
id: SpecId;
30+
/** The name or label of the spec */
31+
name?: string;
3032
/** The ID of the spec group, generated via getGroupId method
3133
* @default __global__
3234
*/

‎src/lib/series/tooltip.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ export function formatTooltip(
2020
if (seriesKey.length > 0) {
2121
name = searchIndexValue.seriesKey.join(' - ');
2222
} else {
23-
name = `${spec.id}`;
23+
name = spec.name || `${spec.id}`;
2424
}
2525
// format y value
2626
return formatAccessor(
@@ -50,7 +50,7 @@ export function formatXTooltipValue(
5050
if (searchIndexValue.seriesKey.length > 0) {
5151
name = searchIndexValue.seriesKey.join(' - ');
5252
} else {
53-
name = `${spec.id}`;
53+
name = spec.name || `${spec.id}`;
5454
}
5555
const xValues = formatAccessor(
5656
searchIndexValue.datum,

‎stories/area_chart.tsx

+58-3
Original file line numberDiff line numberDiff line change
@@ -217,7 +217,8 @@ storiesOf('Area Chart', module)
217217
tickFormat={(d) => Number(d).toFixed(2)}
218218
/>
219219
<AreaSeries
220-
id={getSpecId(KIBANA_METRICS.metrics.kibana_os_load[2].metric.label)}
220+
id={getSpecId('1')}
221+
name={KIBANA_METRICS.metrics.kibana_os_load[2].metric.label}
221222
xScaleType={ScaleType.Time}
222223
yScaleType={ScaleType.Linear}
223224
xAccessor={0}
@@ -227,7 +228,8 @@ storiesOf('Area Chart', module)
227228
yScaleToDataExtent={false}
228229
/>
229230
<AreaSeries
230-
id={getSpecId(KIBANA_METRICS.metrics.kibana_os_load[1].metric.label)}
231+
id={getSpecId('2')}
232+
name={KIBANA_METRICS.metrics.kibana_os_load[1].metric.label}
231233
xScaleType={ScaleType.Time}
232234
yScaleType={ScaleType.Linear}
233235
xAccessor={0}
@@ -237,7 +239,60 @@ storiesOf('Area Chart', module)
237239
yScaleToDataExtent={false}
238240
/>
239241
<AreaSeries
240-
id={getSpecId(KIBANA_METRICS.metrics.kibana_os_load[0].metric.label)}
242+
id={getSpecId('3')}
243+
name={KIBANA_METRICS.metrics.kibana_os_load[0].metric.label}
244+
xScaleType={ScaleType.Time}
245+
yScaleType={ScaleType.Linear}
246+
xAccessor={0}
247+
yAccessors={[1]}
248+
stackAccessors={[0]}
249+
data={KIBANA_METRICS.metrics.kibana_os_load[0].data}
250+
yScaleToDataExtent={false}
251+
/>
252+
</Chart>
253+
);
254+
})
255+
.add('stacked with separated specs - same naming', () => {
256+
return (
257+
<Chart renderer="canvas" className={'story-chart'}>
258+
<Settings showLegend={true} legendPosition={Position.Right} />
259+
<Axis
260+
id={getAxisId('bottom')}
261+
position={Position.Bottom}
262+
title={'timestamp per 1 minute'}
263+
showOverlappingTicks={true}
264+
tickFormat={dateFormatter}
265+
/>
266+
<Axis
267+
title={KIBANA_METRICS.metrics.kibana_os_load[0].metric.title}
268+
position={Position.Left}
269+
tickFormat={(d) => Number(d).toFixed(2)}
270+
/>
271+
<AreaSeries
272+
id={getSpecId('1')}
273+
name={'Count'}
274+
xScaleType={ScaleType.Time}
275+
yScaleType={ScaleType.Linear}
276+
xAccessor={0}
277+
yAccessors={[1]}
278+
stackAccessors={[0]}
279+
data={KIBANA_METRICS.metrics.kibana_os_load[2].data}
280+
yScaleToDataExtent={false}
281+
/>
282+
<AreaSeries
283+
id={getSpecId('2')}
284+
name={'Count'}
285+
xScaleType={ScaleType.Time}
286+
yScaleType={ScaleType.Linear}
287+
xAccessor={0}
288+
yAccessors={[1]}
289+
stackAccessors={[0]}
290+
data={KIBANA_METRICS.metrics.kibana_os_load[1].data}
291+
yScaleToDataExtent={false}
292+
/>
293+
<AreaSeries
294+
id={getSpecId('3')}
295+
name={'Count'}
241296
xScaleType={ScaleType.Time}
242297
yScaleType={ScaleType.Linear}
243298
xAccessor={0}

‎stories/bar_chart.tsx

+2
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ storiesOf('Bar Chart', module)
2929
<Chart renderer="canvas" className={className}>
3030
<BarSeries
3131
id={getSpecId('bars')}
32+
name={'Simple bar series'}
3233
xScaleType={ScaleType.Linear}
3334
yScaleType={ScaleType.Linear}
3435
xAccessor="x"
@@ -262,6 +263,7 @@ storiesOf('Bar Chart', module)
262263

263264
<BarSeries
264265
id={getSpecId('bars')}
266+
name={'Simple bar series'}
265267
xScaleType={ScaleType.Linear}
266268
yScaleType={ScaleType.Linear}
267269
xAccessor="x"

0 commit comments

Comments
 (0)