Skip to content

Commit bbecbcc

Browse files
authored
fix: align series names on splitted series configuration (#421)
This commit align the series name when using a splitted series accessor. The names of the series now uses the value coming from the splitted series accessor, independently on how many series are computed fix #420
1 parent a1725e4 commit bbecbcc

File tree

4 files changed

+64
-12
lines changed

4 files changed

+64
-12
lines changed

.playground/index.html

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,14 +18,12 @@
1818
position: absolute;
1919
top: 10px;
2020
left: 10px;
21-
bottom: 10px;
22-
right: 10px;
2321
}
2422
.chart {
2523
background: white;
2624
position: relative;
27-
width: 800px;
28-
height: 450px;
25+
width: 600px;
26+
height: 350px;
2927
margin: 10px;
3028
}
3129
</style>

.playground/playgroud.tsx

Lines changed: 33 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,41 @@
11
import React, { Fragment } from 'react';
2-
import { Axis, Chart, getAxisId, getSpecId, Position, ScaleType, BarSeries } from '../src';
2+
import { Axis, Chart, getAxisId, getSpecId, Position, ScaleType, BarSeries, Settings } from '../src';
33

4-
export class Playground extends React.Component {
4+
export class Playground extends React.Component<{}, { dataLimit: boolean }> {
5+
state = {
6+
dataLimit: false,
7+
};
8+
changeData = () => {
9+
this.setState((prevState) => {
10+
return {
11+
dataLimit: !prevState.dataLimit,
12+
};
13+
});
14+
};
515
render() {
6-
const data = [{ x: 0, y: -4 }, { x: 1, y: -3 }, { x: 2, y: 2 }, { x: 3, y: 1 }];
16+
const data = [
17+
{
18+
g: null,
19+
i: 'aa',
20+
x: 1571212800000,
21+
y: 16,
22+
y1: 2,
23+
},
24+
// {
25+
// x: 1571290200000,
26+
// y: 1,
27+
// y1: 5,
28+
// // g: 'authentication_success',
29+
// },
30+
];
731
return (
832
<Fragment>
33+
<div>
34+
<button onClick={this.changeData}>Reduce data</button>
35+
</div>
936
<div className="chart">
1037
<Chart>
38+
<Settings showLegend />
1139
<Axis id={getAxisId('top')} position={Position.Bottom} title={'Top axis'} />
1240
<Axis
1341
id={getAxisId('left2')}
@@ -17,15 +45,14 @@ export class Playground extends React.Component {
1745
/>
1846

1947
<BarSeries
20-
id={getSpecId('bars')}
48+
id={getSpecId('bars1')}
2149
xScaleType={ScaleType.Linear}
2250
yScaleType={ScaleType.Linear}
2351
xAccessor="x"
2452
yAccessors={['y']}
2553
splitSeriesAccessors={['g']}
2654
stackAccessors={['x']}
27-
data={data}
28-
yScaleToDataExtent={true}
55+
data={data.slice(0, this.state.dataLimit ? 1 : 2)}
2956
/>
3057
</Chart>
3158
</div>

src/chart_types/xy_chart/legend/legend.test.ts

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -263,4 +263,27 @@ describe('Legends', () => {
263263
label = getSeriesColorLabel([0], false, spec1);
264264
expect(label).toBe('0');
265265
});
266+
it('use the splitted value as label if has a single series and splitSeries is used', () => {
267+
const specWithSplit: BasicSeriesSpec = {
268+
...spec1,
269+
splitSeriesAccessors: ['g'],
270+
};
271+
let label = getSeriesColorLabel([], true, specWithSplit);
272+
expect(label).toBe('Spec 1 title');
273+
274+
label = getSeriesColorLabel(['a'], true, specWithSplit);
275+
expect(label).toBe('a');
276+
277+
// happens when we have multiple values in splitSeriesAccessor
278+
// or we have also multiple yAccessors
279+
label = getSeriesColorLabel(['a', 'b'], true, specWithSplit);
280+
expect(label).toBe('a - b');
281+
282+
// happens when the value of a splitSeriesAccessor is null
283+
label = getSeriesColorLabel([null], true, specWithSplit);
284+
expect(label).toBe('Spec 1 title');
285+
286+
label = getSeriesColorLabel([], false, specWithSplit);
287+
expect(label).toBe('Spec 1 title');
288+
});
266289
});

src/chart_types/xy_chart/legend/legend.ts

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,7 @@ export function computeLegend(
9595
}
9696

9797
export function getSeriesColorLabel(
98-
colorValues: any[],
98+
colorValues: Array<string | number | null | undefined>,
9999
hasSingleSeries: boolean,
100100
spec?: BasicSeriesSpec,
101101
): string | undefined {
@@ -104,7 +104,11 @@ export function getSeriesColorLabel(
104104
if (!spec) {
105105
return;
106106
}
107-
label = spec.name || `${spec.id}`;
107+
if (spec.splitSeriesAccessors && colorValues.length > 0 && colorValues[0] !== null) {
108+
label = colorValues.join(' - ');
109+
} else {
110+
label = spec.name || `${spec.id}`;
111+
}
108112
} else {
109113
label = colorValues.join(' - ');
110114
}

0 commit comments

Comments
 (0)