Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add series name settings #539

Merged
merged 21 commits into from
Feb 24, 2020
Merged

feat: add series name settings #539

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
a6ead1c
feat: add series label settings
nickofthyme Feb 6, 2020
ebd5fcc
tests: update tests
nickofthyme Feb 10, 2020
9bc6baa
Merge branch 'master' into feat/add-labeling-options
nickofthyme Feb 10, 2020
f6e6d90
chore: udpate pr comments
nickofthyme Feb 10, 2020
88cecd1
chore: fix type/lint errors
nickofthyme Feb 10, 2020
6e9ee73
refactor: update custom series label api
nickofthyme Feb 11, 2020
f056b77
chore: add parsing action and split tooltipValues (#516)
markov00 Feb 13, 2020
2242fca
refactor: decouple legend and tooltip phase 1 (#491)
markov00 Feb 14, 2020
fd759be
Merge branch 'master' into feat/add-labeling-options
nickofthyme Feb 18, 2020
a1b1950
refactor: move custom labeling to name and update logic
nickofthyme Feb 18, 2020
8262d19
docs: fix filteredLabel ids (#552)
markov00 Feb 19, 2020
c7fd818
Fix story naming
nickofthyme Feb 19, 2020
4298157
Merge branch 'master' into feat/add-labeling-options
nickofthyme Feb 19, 2020
1ed6957
refactor: decouple tooltip from XY chart (#553)
markov00 Feb 20, 2020
55f9712
chore: address pr comments
nickofthyme Feb 20, 2020
15eb37f
Merge branch 'master' into feat/add-labeling-options
nickofthyme Feb 20, 2020
76f000f
chore: update screenshots
nickofthyme Feb 20, 2020
264980d
Merge branch 'master' into feat/add-labeling-options
nickofthyme Feb 21, 2020
f8ba94a
Merge branch 'master' into feat/add-labeling-options
nickofthyme Feb 21, 2020
9dcb740
udpate screenshots
nickofthyme Feb 21, 2020
9a6828e
chore: address pr comments
nickofthyme Feb 24, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
123 changes: 25 additions & 98 deletions .playground/playground.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,113 +1,40 @@
import React from 'react';
import { Chart, LineSeries, ScaleType, Settings, Position, Axis, BarSeries, HistogramBarSeries } from '../src';
export class Playground extends React.Component<{}, { isSunburstShown: boolean }> {
chartRef: React.RefObject<Chart> = React.createRef();
state = {
isSunburstShown: true,
};
onBrushEnd = (min: number, max: number) => {
// eslint-disable-next-line no-console
console.log({ min, max });
};

import { Chart, LineSeries, ScaleType, Position, Settings, Axis } from '../src';
import { SeededDataGenerator } from '../src/mocks/utils';

export class Playground extends React.Component<{}, { isSunburstShown: boolean }> {
render() {
const dg = new SeededDataGenerator();
const data = dg.generateGroupedSeries(10, 2).map((item) => ({
...item,
y1: item.y + 100,
}));

return (
<>
<div className="chart">
<Chart ref={this.chartRef}>
<Settings rotation={90} onBrushEnd={this.onBrushEnd} />
<Axis id="y" position={Position.Left} title={'y'} />
<Chart>
<Settings seriesLabels={{ delimiter: ': ', full: true }} />
markov00 marked this conversation as resolved.
Show resolved Hide resolved
<Axis id="y1" position={Position.Left} title={'y1'} />
<Axis id="y2" domain={{ fit: true }} groupId="g2" position={Position.Right} title={'y2'} />
<Axis id="x" position={Position.Bottom} title={'x'} />
<LineSeries
id={'aaa'}
id="line1"
xScaleType={ScaleType.Linear}
xAccessor={0}
yAccessors={[1]}
data={[
[0, 1],
[1, 2],
[2, 5],
[3, 5],
[4, 2],
[5, 6],
]}
xAccessor={'x'}
yAccessors={['y']}
splitSeriesAccessors={['g']}
data={data}
/>
</Chart>
</div>
<div className="chart">
<Chart ref={this.chartRef}>
<Settings rotation={0} onBrushEnd={this.onBrushEnd} theme={{ chartMargins: { left: 30 } }} />
<Axis id="x" position={Position.Bottom} title={'x'} />
<Axis id="y" position={Position.Left} title={'y'} />
<LineSeries
id={'aaa'}
xScaleType={ScaleType.Linear}
xAccessor={0}
yAccessors={[1]}
data={[
[0, 1],
[1, 2],
[2, 5],
[3, 5],
[4, 2],
[5, 6],
]}
/>
</Chart>
</div>
<div className="chart">
<Chart ref={this.chartRef}>
<Settings rotation={90} onBrushEnd={this.onBrushEnd} theme={{ chartMargins: { left: 30 } }} />
<Axis id="x" position={Position.Bottom} title={'x'} />
<Axis id="y" position={Position.Left} title={'y'} />
<BarSeries
id={'aaa'}
xScaleType={ScaleType.Linear}
xAccessor={0}
yAccessors={[1]}
data={[
[0, 1],
[1, 2],
[2, 5],
[3, 5],
// [4, 2],
[5, 6],
]}
/>
<LineSeries
id={'aaa1'}
xScaleType={ScaleType.Linear}
xAccessor={0}
yAccessors={[1]}
data={[
[0, 1],
[1, 2],
[2, 5],
[3, 5],
// [4, 2],
[5, 6],
]}
/>
</Chart>
</div>
<div className="chart">
<Chart ref={this.chartRef}>
<Settings rotation={90} onBrushEnd={this.onBrushEnd} theme={{ chartMargins: { left: 30 } }} />
<Axis id="x" position={Position.Bottom} title={'x'} />
<Axis id="y" position={Position.Left} title={'y'} />
<HistogramBarSeries
id={'aaa'}
id="line2"
groupId="g2"
xScaleType={ScaleType.Linear}
xAccessor={0}
yAccessors={[1]}
data={[
[0, 1],
[1, 2],
[2, 5],
[3, 5],
[4, 2],
[5, 6],
]}
xAccessor={'x'}
yAccessors={['y1']}
splitSeriesAccessors={['g']}
data={data}
/>
</Chart>
</div>
Expand Down
Binary file added ...s-stylings-add-custom-series-label-formatting-visually-looks-correct-1-snap.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ...stories-stylings-custom-series-label-mappings-visually-looks-correct-1-snap.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
223 changes: 222 additions & 1 deletion src/chart_types/xy_chart/utils/series.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,18 @@ import {
splitSeries,
SeriesIdentifier,
cleanDatum,
getSeriesLabel,
} from './series';
import { BasicSeriesSpec, LineSeriesSpec, SeriesTypes } from './specs';
import { BasicSeriesSpec, LineSeriesSpec, SeriesTypes, AreaSeriesSpec } from './specs';
import { formatStackedDataSeriesValues } from './stacked_series_utils';
import * as TestDataset from '../../../utils/data_samples/test_dataset';
import { ChartTypes } from '../..';
import { SpecTypes } from '../../../specs/settings';
import { MockSeriesSpec } from '../../../mocks/specs';
import { SeededDataGenerator } from '../../../mocks/utils';
import { MockSeriesIdentifier } from '../../../mocks/series/seriesIdentifiers';

const dg = new SeededDataGenerator();

describe('Series', () => {
test('Can split dataset into 1Y0G series', () => {
Expand Down Expand Up @@ -661,4 +667,219 @@ describe('Series', () => {
expect(datum.y1).toBe(null);
expect(datum.y0).toBe(null);
});
describe('#getSeriesLabelKeys', () => {
const data = dg.generateGroupedSeries(50, 2).map((d) => ({ ...d, y2: d.y }));
const spec = MockSeriesSpec.area({
data,
yAccessors: ['y', 'y2'],
splitSeriesAccessors: ['g'],
});
const indentifiers = MockSeriesIdentifier.fromSpecs([spec]);

it('should get series label from spec', () => {
const [identifier] = indentifiers;
const actual = getSeriesLabel(identifier, false, false, spec);
expect(actual).toBe('a - y');
});

it('should not show y value with single yAccessor', () => {
const specSingleY: AreaSeriesSpec = {
...spec,
yAccessors: ['y'],
};
const [identifier] = MockSeriesIdentifier.fromSpecs([spec]);
const actual = getSeriesLabel(identifier, false, false, specSingleY);

expect(actual).toBe('a');
});

describe('Custom labeling', () => {
it('should replace full label', () => {
const label = 'My custom new label';
const [identifier] = indentifiers;
const actual = getSeriesLabel(identifier, false, false, {
...spec,
customSeriesLabel: ({ yAccessor, splitAccessors }) =>
yAccessor === identifier.yAccessor && splitAccessors.get('g') === 'a' ? label : null,
});

expect(actual).toBe(label);
});

it('should have access to all accessors with single y', () => {
const specSingleY: AreaSeriesSpec = {
...spec,
yAccessors: ['y'],
customSeriesLabel: ({ seriesKeys }) => seriesKeys.join(' - '),
};
const [identifier] = MockSeriesIdentifier.fromSpecs([spec]);
const actual = getSeriesLabel(identifier, false, false, specSingleY);

expect(actual).toBe('a - y');
});

it('should replace yAccessor sub label with map', () => {
const [identifier] = indentifiers;
const actual = getSeriesLabel(identifier, false, false, {
...spec,
customSeriesLabel: {
mappings: [
{
accessor: 'g',
value: 'a',
},
{
value: 'y',
newValue: 'Yuuuup',
},
],
},
});
expect(actual).toBe('a - Yuuuup');
});

it('should join with custom delimiter', () => {
const [identifier] = indentifiers;
const actual = getSeriesLabel(identifier, false, false, {
...spec,
customSeriesLabel: {
mappings: [
{
accessor: 'g',
value: 'a',
},
{
value: 'y',
},
],
delimiter: ' ¯\\_(ツ)_/¯ ',
},
});
expect(actual).toBe('a ¯\\_(ツ)_/¯ y');
nickofthyme marked this conversation as resolved.
Show resolved Hide resolved
});

it('should replace splitAccessor sub label with map', () => {
const [identifier] = indentifiers;
const actual = getSeriesLabel(identifier, false, false, {
...spec,
customSeriesLabel: {
mappings: [
{
accessor: 'g',
value: 'a',
newValue: 'Apple',
},
{
value: 'y',
},
],
},
});
expect(actual).toBe('Apple - y');
});

it('should mind order of mappings', () => {
const [identifier] = indentifiers;
const actual = getSeriesLabel(identifier, false, false, {
...spec,
customSeriesLabel: {
mappings: [
{
value: 'y',
newValue: 'Yuuum',
},
{
accessor: 'g',
value: 'a',
newValue: 'Apple',
},
],
},
});
expect(actual).toBe('Yuuum - Apple');
});

it('should mind sortIndex of mappings', () => {
const [identifier] = indentifiers;
const actual = getSeriesLabel(identifier, false, false, {
...spec,
customSeriesLabel: {
mappings: [
{
value: 'y',
newValue: 'Yuuum',
sortIndex: 2,
},
{
accessor: 'g',
value: 'a',
newValue: 'Apple',
sortIndex: 0,
},
],
},
});
expect(actual).toBe('Apple - Yuuum');
});

it('should allow undefined sortIndex', () => {
const [identifier] = indentifiers;
const actual = getSeriesLabel(identifier, false, false, {
...spec,
customSeriesLabel: {
mappings: [
{
value: 'y',
newValue: 'Yuuum',
},
{
accessor: 'g',
value: 'a',
newValue: 'Apple',
sortIndex: 0,
},
],
},
});
expect(actual).toBe('Apple - Yuuum');
});

it('should ignore missing mappings', () => {
const [identifier] = indentifiers;
const actual = getSeriesLabel(identifier, false, false, {
...spec,
customSeriesLabel: {
mappings: [
{
accessor: 'g',
value: 'a',
newValue: 'Apple',
},
{
accessor: 'g',
value: 'Not a mapping',
newValue: 'No Value',
},
{
value: 'y',
newValue: 'Yuuum',
},
],
},
});
expect(actual).toBe('Apple - Yuuum');
});

it('should return fallback label if empty string', () => {
const [identifier] = indentifiers;
const actual = getSeriesLabel(identifier, false, false, {
...spec,
customSeriesLabel: {
mappings: [],
},
});
expect(actual).toBe('a - y');
});
});
});
});
Loading