Skip to content

Commit

Permalink
fix: align series names on splitted series configuration (#421)
Browse files Browse the repository at this point in the history
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
  • Loading branch information
markov00 authored Oct 17, 2019
1 parent a1725e4 commit bbecbcc
Show file tree
Hide file tree
Showing 4 changed files with 64 additions and 12 deletions.
6 changes: 2 additions & 4 deletions .playground/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -18,14 +18,12 @@
position: absolute;
top: 10px;
left: 10px;
bottom: 10px;
right: 10px;
}
.chart {
background: white;
position: relative;
width: 800px;
height: 450px;
width: 600px;
height: 350px;
margin: 10px;
}
</style>
Expand Down
39 changes: 33 additions & 6 deletions .playground/playgroud.tsx
Original file line number Diff line number Diff line change
@@ -1,13 +1,41 @@
import React, { Fragment } from 'react';
import { Axis, Chart, getAxisId, getSpecId, Position, ScaleType, BarSeries } from '../src';
import { Axis, Chart, getAxisId, getSpecId, Position, ScaleType, BarSeries, Settings } from '../src';

export class Playground extends React.Component {
export class Playground extends React.Component<{}, { dataLimit: boolean }> {
state = {
dataLimit: false,
};
changeData = () => {
this.setState((prevState) => {
return {
dataLimit: !prevState.dataLimit,
};
});
};
render() {
const data = [{ x: 0, y: -4 }, { x: 1, y: -3 }, { x: 2, y: 2 }, { x: 3, y: 1 }];
const data = [
{
g: null,
i: 'aa',
x: 1571212800000,
y: 16,
y1: 2,
},
// {
// x: 1571290200000,
// y: 1,
// y1: 5,
// // g: 'authentication_success',
// },
];
return (
<Fragment>
<div>
<button onClick={this.changeData}>Reduce data</button>
</div>
<div className="chart">
<Chart>
<Settings showLegend />
<Axis id={getAxisId('top')} position={Position.Bottom} title={'Top axis'} />
<Axis
id={getAxisId('left2')}
Expand All @@ -17,15 +45,14 @@ export class Playground extends React.Component {
/>

<BarSeries
id={getSpecId('bars')}
id={getSpecId('bars1')}
xScaleType={ScaleType.Linear}
yScaleType={ScaleType.Linear}
xAccessor="x"
yAccessors={['y']}
splitSeriesAccessors={['g']}
stackAccessors={['x']}
data={data}
yScaleToDataExtent={true}
data={data.slice(0, this.state.dataLimit ? 1 : 2)}
/>
</Chart>
</div>
Expand Down
23 changes: 23 additions & 0 deletions src/chart_types/xy_chart/legend/legend.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -263,4 +263,27 @@ describe('Legends', () => {
label = getSeriesColorLabel([0], false, spec1);
expect(label).toBe('0');
});
it('use the splitted value as label if has a single series and splitSeries is used', () => {
const specWithSplit: BasicSeriesSpec = {
...spec1,
splitSeriesAccessors: ['g'],
};
let label = getSeriesColorLabel([], true, specWithSplit);
expect(label).toBe('Spec 1 title');

label = getSeriesColorLabel(['a'], true, specWithSplit);
expect(label).toBe('a');

// happens when we have multiple values in splitSeriesAccessor
// or we have also multiple yAccessors
label = getSeriesColorLabel(['a', 'b'], true, specWithSplit);
expect(label).toBe('a - b');

// happens when the value of a splitSeriesAccessor is null
label = getSeriesColorLabel([null], true, specWithSplit);
expect(label).toBe('Spec 1 title');

label = getSeriesColorLabel([], false, specWithSplit);
expect(label).toBe('Spec 1 title');
});
});
8 changes: 6 additions & 2 deletions src/chart_types/xy_chart/legend/legend.ts
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,7 @@ export function computeLegend(
}

export function getSeriesColorLabel(
colorValues: any[],
colorValues: Array<string | number | null | undefined>,
hasSingleSeries: boolean,
spec?: BasicSeriesSpec,
): string | undefined {
Expand All @@ -104,7 +104,11 @@ export function getSeriesColorLabel(
if (!spec) {
return;
}
label = spec.name || `${spec.id}`;
if (spec.splitSeriesAccessors && colorValues.length > 0 && colorValues[0] !== null) {
label = colorValues.join(' - ');
} else {
label = spec.name || `${spec.id}`;
}
} else {
label = colorValues.join(' - ');
}
Expand Down

0 comments on commit bbecbcc

Please sign in to comment.