[Lens] Fix formula formatting in Metric visualization type (#103167)
Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
This commit is contained in:
parent
60086a9aac
commit
d5f68eef4f
|
@ -20,17 +20,22 @@ function sampleArgs() {
|
|||
l1: {
|
||||
type: 'datatable',
|
||||
columns: [
|
||||
{ id: 'a', name: 'a', meta: { type: 'string' } },
|
||||
// Simulating a calculated column like a formula
|
||||
{ id: 'a', name: 'a', meta: { type: 'string', params: { id: 'string' } } },
|
||||
{ id: 'b', name: 'b', meta: { type: 'string' } },
|
||||
{ id: 'c', name: 'c', meta: { type: 'number' } },
|
||||
{
|
||||
id: 'c',
|
||||
name: 'c',
|
||||
meta: { type: 'number', params: { id: 'percent', params: { format: '0.000%' } } },
|
||||
},
|
||||
],
|
||||
rows: [{ a: 10110, b: 2, c: 3 }],
|
||||
rows: [{ a: 'last', b: 'last', c: 3 }],
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const args: MetricConfig = {
|
||||
accessor: 'a',
|
||||
accessor: 'c',
|
||||
layerId: 'l1',
|
||||
title: 'My fanci metric chart',
|
||||
description: 'Fancy chart description',
|
||||
|
@ -39,7 +44,7 @@ function sampleArgs() {
|
|||
};
|
||||
|
||||
const noAttributesArgs: MetricConfig = {
|
||||
accessor: 'a',
|
||||
accessor: 'c',
|
||||
layerId: 'l1',
|
||||
title: '',
|
||||
description: '',
|
||||
|
@ -65,11 +70,17 @@ describe('metric_expression', () => {
|
|||
});
|
||||
|
||||
describe('MetricChart component', () => {
|
||||
test('it renders the all attributes when passed (title, description, metricTitle, value)', () => {
|
||||
test('it renders all attributes when passed (title, description, metricTitle, value)', () => {
|
||||
const { data, args } = sampleArgs();
|
||||
|
||||
expect(
|
||||
shallow(<MetricChart data={data} args={args} formatFactory={(x) => x as IFieldFormat} />)
|
||||
shallow(
|
||||
<MetricChart
|
||||
data={data}
|
||||
args={args}
|
||||
formatFactory={() => ({ convert: (x) => x } as IFieldFormat)}
|
||||
/>
|
||||
)
|
||||
).toMatchInlineSnapshot(`
|
||||
<VisualizationContainer
|
||||
className="lnsMetricExpression__container"
|
||||
|
@ -86,7 +97,52 @@ describe('metric_expression', () => {
|
|||
}
|
||||
}
|
||||
>
|
||||
10110
|
||||
3
|
||||
</div>
|
||||
<div
|
||||
data-test-subj="lns_metric_title"
|
||||
style={
|
||||
Object {
|
||||
"fontSize": "24pt",
|
||||
}
|
||||
}
|
||||
>
|
||||
My fanci metric chart
|
||||
</div>
|
||||
</AutoScale>
|
||||
</VisualizationContainer>
|
||||
`);
|
||||
});
|
||||
|
||||
test('it renders strings', () => {
|
||||
const { data, args } = sampleArgs();
|
||||
args.accessor = 'a';
|
||||
|
||||
expect(
|
||||
shallow(
|
||||
<MetricChart
|
||||
data={data}
|
||||
args={args}
|
||||
formatFactory={() => ({ convert: (x) => x } as IFieldFormat)}
|
||||
/>
|
||||
)
|
||||
).toMatchInlineSnapshot(`
|
||||
<VisualizationContainer
|
||||
className="lnsMetricExpression__container"
|
||||
reportDescription="Fancy chart description"
|
||||
reportTitle="My fanci metric chart"
|
||||
>
|
||||
<AutoScale>
|
||||
<div
|
||||
data-test-subj="lns_metric_value"
|
||||
style={
|
||||
Object {
|
||||
"fontSize": "60pt",
|
||||
"fontWeight": 600,
|
||||
}
|
||||
}
|
||||
>
|
||||
last
|
||||
</div>
|
||||
<div
|
||||
data-test-subj="lns_metric_title"
|
||||
|
@ -111,7 +167,7 @@ describe('metric_expression', () => {
|
|||
<MetricChart
|
||||
data={data}
|
||||
args={noAttributesArgs}
|
||||
formatFactory={(x) => x as IFieldFormat}
|
||||
formatFactory={() => ({ convert: (x) => x } as IFieldFormat)}
|
||||
/>
|
||||
)
|
||||
).toMatchInlineSnapshot(`
|
||||
|
@ -130,7 +186,7 @@ describe('metric_expression', () => {
|
|||
}
|
||||
}
|
||||
>
|
||||
10110
|
||||
3
|
||||
</div>
|
||||
<div
|
||||
data-test-subj="lns_metric_title"
|
||||
|
@ -155,7 +211,7 @@ describe('metric_expression', () => {
|
|||
<MetricChart
|
||||
data={data}
|
||||
args={{ ...noAttributesArgs, mode: 'reduced' }}
|
||||
formatFactory={(x) => x as IFieldFormat}
|
||||
formatFactory={() => ({ convert: (x) => x } as IFieldFormat)}
|
||||
/>
|
||||
)
|
||||
).toMatchInlineSnapshot(`
|
||||
|
@ -174,7 +230,7 @@ describe('metric_expression', () => {
|
|||
}
|
||||
}
|
||||
>
|
||||
10110
|
||||
3
|
||||
</div>
|
||||
</AutoScale>
|
||||
</VisualizationContainer>
|
||||
|
@ -189,7 +245,7 @@ describe('metric_expression', () => {
|
|||
<MetricChart
|
||||
data={{ ...data, tables: {} }}
|
||||
args={noAttributesArgs}
|
||||
formatFactory={(x) => x as IFieldFormat}
|
||||
formatFactory={() => ({ convert: (x) => x } as IFieldFormat)}
|
||||
/>
|
||||
)
|
||||
).toMatchInlineSnapshot(`
|
||||
|
@ -202,14 +258,14 @@ describe('metric_expression', () => {
|
|||
test('it renders an EmptyPlaceholder when null value is passed as data', () => {
|
||||
const { data, noAttributesArgs } = sampleArgs();
|
||||
|
||||
data.tables.l1.rows[0].a = null;
|
||||
data.tables.l1.rows[0].c = null;
|
||||
|
||||
expect(
|
||||
shallow(
|
||||
<MetricChart
|
||||
data={data}
|
||||
args={noAttributesArgs}
|
||||
formatFactory={(x) => x as IFieldFormat}
|
||||
formatFactory={() => ({ convert: (x) => x } as IFieldFormat)}
|
||||
/>
|
||||
)
|
||||
).toMatchInlineSnapshot(`
|
||||
|
@ -222,14 +278,14 @@ describe('metric_expression', () => {
|
|||
test('it renders 0 value', () => {
|
||||
const { data, noAttributesArgs } = sampleArgs();
|
||||
|
||||
data.tables.l1.rows[0].a = 0;
|
||||
data.tables.l1.rows[0].c = 0;
|
||||
|
||||
expect(
|
||||
shallow(
|
||||
<MetricChart
|
||||
data={data}
|
||||
args={noAttributesArgs}
|
||||
formatFactory={(x) => x as IFieldFormat}
|
||||
formatFactory={() => ({ convert: (x) => x } as IFieldFormat)}
|
||||
/>
|
||||
)
|
||||
).toMatchInlineSnapshot(`
|
||||
|
@ -264,5 +320,13 @@ describe('metric_expression', () => {
|
|||
</VisualizationContainer>
|
||||
`);
|
||||
});
|
||||
|
||||
test('it finds the right column to format', () => {
|
||||
const { data, args } = sampleArgs();
|
||||
const factory = jest.fn(() => ({ convert: (x) => x } as IFieldFormat));
|
||||
|
||||
shallow(<MetricChart data={data} args={args} formatFactory={factory} />);
|
||||
expect(factory).toHaveBeenCalledWith({ id: 'percent', params: { format: '0.000%' } });
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
@ -127,7 +127,7 @@ export function MetricChart({
|
|||
return <EmptyPlaceholder icon={LensIconChartMetric} />;
|
||||
}
|
||||
|
||||
const column = firstTable.columns[0];
|
||||
const column = firstTable.columns.find(({ id }) => id === accessor)!;
|
||||
const row = firstTable.rows[0];
|
||||
|
||||
// NOTE: Cardinality and Sum never receives "null" as value, but always 0, even for empty dataset.
|
||||
|
|
Loading…
Reference in a new issue