github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-23 09:19:04 -04:00
Code Issues Projects Releases Packages Wiki Activity

[Lens] Format the split series in XY charts (#49494) (#49681)

Browse source
This commit is contained in:
Chris Davies 2019-10-29 18:21:31 -04:00 • committed by GitHub
parent 14e2de3141
commit d79bbabaa9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 85 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

42
x-pack/legacy/plugins/lens/public/xy_visualization_plugin/__snapshots__/xy_expression.test.tsx.snap generated
View file

@ -150,12 +150,16 @@ exports[`xy_expression XYChart component it renders area 1`] = `
Object {
"Label A": 1,
"Label B": 2,
"Label D": "Foo",
"c": "I",
"d": "Foo",
},
Object {
"Label A": 1,
"Label B": 5,
"Label D": "Bar",
"c": "J",
"d": "Bar",
},
]
}
@ -164,7 +168,7 @@ exports[`xy_expression XYChart component it renders area 1`] = `
key="0"
splitSeriesAccessors={
Array [
"Label D",
"d",
]
}
stackAccessors={Array []}
@ -332,12 +336,16 @@ exports[`xy_expression XYChart component it renders bar 1`] = `
Object {
"Label A": 1,
"Label B": 2,
"Label D": "Foo",
"c": "I",
"d": "Foo",
},
Object {
"Label A": 1,
"Label B": 5,
"Label D": "Bar",
"c": "J",
"d": "Bar",
},
]
}
@ -346,7 +354,7 @@ exports[`xy_expression XYChart component it renders bar 1`] = `
key="0"
splitSeriesAccessors={
Array [
"Label D",
"d",
]
}
stackAccessors={Array []}
@ -514,12 +522,16 @@ exports[`xy_expression XYChart component it renders horizontal bar 1`] = `
Object {
"Label A": 1,
"Label B": 2,
"Label D": "Foo",
"c": "I",
"d": "Foo",
},
Object {
"Label A": 1,
"Label B": 5,
"Label D": "Bar",
"c": "J",
"d": "Bar",
},
]
}
@ -528,7 +540,7 @@ exports[`xy_expression XYChart component it renders horizontal bar 1`] = `
key="0"
splitSeriesAccessors={
Array [
"Label D",
"d",
]
}
stackAccessors={Array []}
@ -696,12 +708,16 @@ exports[`xy_expression XYChart component it renders line 1`] = `
Object {
"Label A": 1,
"Label B": 2,
"Label D": "Foo",
"c": "I",
"d": "Foo",
},
Object {
"Label A": 1,
"Label B": 5,
"Label D": "Bar",
"c": "J",
"d": "Bar",
},
]
}
@ -710,7 +726,7 @@ exports[`xy_expression XYChart component it renders line 1`] = `
key="0"
splitSeriesAccessors={
Array [
"Label D",
"d",
]
}
stackAccessors={Array []}
@ -878,12 +894,16 @@ exports[`xy_expression XYChart component it renders stacked area 1`] = `
Object {
"Label A": 1,
"Label B": 2,
"Label D": "Foo",
"c": "I",
"d": "Foo",
},
Object {
"Label A": 1,
"Label B": 5,
"Label D": "Bar",
"c": "J",
"d": "Bar",
},
]
}
@ -892,7 +912,7 @@ exports[`xy_expression XYChart component it renders stacked area 1`] = `
key="0"
splitSeriesAccessors={
Array [
"Label D",
"d",
]
}
stackAccessors={
@ -1064,12 +1084,16 @@ exports[`xy_expression XYChart component it renders stacked bar 1`] = `
Object {
"Label A": 1,
"Label B": 2,
"Label D": "Foo",
"c": "I",
"d": "Foo",
},
Object {
"Label A": 1,
"Label B": 5,
"Label D": "Bar",
"c": "J",
"d": "Bar",
},
]
}
@ -1078,7 +1102,7 @@ exports[`xy_expression XYChart component it renders stacked bar 1`] = `
key="0"
splitSeriesAccessors={
Array [
"Label D",
"d",
]
}
stackAccessors={
@ -1250,12 +1274,16 @@ exports[`xy_expression XYChart component it renders stacked horizontal bar 1`] =
Object {
"Label A": 1,
"Label B": 2,
"Label D": "Foo",
"c": "I",
"d": "Foo",
},
Object {
"Label A": 1,
"Label B": 5,
"Label D": "Bar",
"c": "J",
"d": "Bar",
},
]
}
@ -1264,7 +1292,7 @@ exports[`xy_expression XYChart component it renders stacked horizontal bar 1`] =
key="0"
splitSeriesAccessors={
Array [
"Label D",
"d",
]
}
stackAccessors={

8
x-pack/legacy/plugins/lens/public/xy_visualization_plugin/xy_expression.test.tsx
View file

@ -26,8 +26,9 @@ function sampleArgs() {
},
{ id: 'b', name: 'b', formatHint: { id: 'number', params: { pattern: '000,0' } } },
{ id: 'c', name: 'c', formatHint: { id: 'string' } },
{ id: 'd', name: 'ColD', formatHint: { id: 'string' } },
],
rows: [{ a: 1, b: 2, c: 'I' }, { a: 1, b: 5, c: 'J' }],
rows: [{ a: 1, b: 2, c: 'I', d: 'Foo' }, { a: 1, b: 5, c: 'J', d: 'Bar' }],
},
},
};
@ -338,8 +339,8 @@ describe('xy_expression', () => {
<XYChart data={data} args={args} formatFactory={getFormatSpy} timeZone="UTC" />
);
expect(component.find(LineSeries).prop('data')).toEqual([
{ 'Label A': 1, 'Label B': 2, c: 'I' },
{ 'Label A': 1, 'Label B': 5, c: 'J' },
{ 'Label A': 1, 'Label B': 2, c: 'I', 'Label D': 'Foo', d: 'Foo' },
{ 'Label A': 1, 'Label B': 5, c: 'J', 'Label D': 'Bar', d: 'Bar' },
]);
});
@ -407,7 +408,6 @@ describe('xy_expression', () => {
/>
);
expect(getFormatSpy).toHaveBeenCalledTimes(2);
expect(getFormatSpy).toHaveBeenCalledWith({ id: 'number' });
});

64
x-pack/legacy/plugins/lens/public/xy_visualization_plugin/xy_expression.tsx
View file

@ -19,7 +19,7 @@ import {
Position,
} from '@elastic/charts';
import { I18nProvider } from '@kbn/i18n/react';
import { ExpressionFunction } from 'src/legacy/core_plugins/interpreter/types';
import { ExpressionFunction, KibanaDatatable } from 'src/legacy/core_plugins/interpreter/types';
import { IInterpreterRenderHandlers } from 'src/legacy/core_plugins/expressions/public';
import { EuiIcon, EuiText, IconType, EuiSpacer } from '@elastic/eui';
import { FormattedMessage } from '@kbn/i18n/react';
@ -243,33 +243,24 @@ export function XYChart({ data, args, formatFactory, timeZone }: XYChartRenderPr
}
const columnToLabelMap = columnToLabel ? JSON.parse(columnToLabel) : {};
const rows = data.tables[layerId].rows.map(row => {
const newRow: typeof row = {};
// Remap data to { 'Count of records': 5 }
Object.keys(row).forEach(key => {
if (columnToLabelMap[key]) {
newRow[columnToLabelMap[key]] = row[key];
} else {
newRow[key] = row[key];
}
});
return newRow;
});
const splitAccessorLabel = columnToLabelMap[splitAccessor];
const yAccessors = accessors.map(accessor => columnToLabelMap[accessor] || accessor);
const idForLegend = splitAccessorLabel || yAccessors;
const sanitized = sanitizeRows({
splitAccessor,
formatFactory,
columnToLabelMap,
table: data.tables[layerId],
});
const seriesProps = {
key: index,
splitSeriesAccessors: [splitAccessorLabel || splitAccessor],
splitSeriesAccessors: sanitized.splitAccessor ? [sanitized.splitAccessor] : [],
stackAccessors: seriesType.includes('stacked') ? [xAccessor] : [],
id: getSpecId(idForLegend),
xAccessor,
yAccessors,
data: rows,
data: sanitized.rows,
xScaleType,
yScaleType,
enableHistogramMode: isHistogram && (seriesType.includes('stacked') || !splitAccessor),
@ -291,3 +282,40 @@ export function XYChart({ data, args, formatFactory, timeZone }: XYChartRenderPr
</Chart>
);
}
/**
* Renames the columns to match the user-configured accessors in
* columnToLabelMap. If a splitAccessor is provided, formats the
* values in that column.
*/
function sanitizeRows({
splitAccessor,
table,
formatFactory,
columnToLabelMap,
}: {
splitAccessor?: string;
table: KibanaDatatable;
formatFactory: FormatFactory;
columnToLabelMap: Record<string, string | undefined>;
}) {
const column = table.columns.find(c => c.id === splitAccessor);
const formatter = formatFactory(column && column.formatHint);
return {
splitAccessor: column && column.id,
rows: table.rows.map(r => {
const newRow: typeof r = {};
if (column) {
newRow[column.id] = formatter.convert(r[column.id]);
}
Object.keys(r).forEach(key => {
const newKey = columnToLabelMap[key] || key;
newRow[newKey] = r[key];
});
return newRow;
}),
};
}