[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: {
|
l1: {
|
||||||
type: 'datatable',
|
type: 'datatable',
|
||||||
columns: [
|
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: '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 = {
|
const args: MetricConfig = {
|
||||||
accessor: 'a',
|
accessor: 'c',
|
||||||
layerId: 'l1',
|
layerId: 'l1',
|
||||||
title: 'My fanci metric chart',
|
title: 'My fanci metric chart',
|
||||||
description: 'Fancy chart description',
|
description: 'Fancy chart description',
|
||||||
|
@ -39,7 +44,7 @@ function sampleArgs() {
|
||||||
};
|
};
|
||||||
|
|
||||||
const noAttributesArgs: MetricConfig = {
|
const noAttributesArgs: MetricConfig = {
|
||||||
accessor: 'a',
|
accessor: 'c',
|
||||||
layerId: 'l1',
|
layerId: 'l1',
|
||||||
title: '',
|
title: '',
|
||||||
description: '',
|
description: '',
|
||||||
|
@ -65,11 +70,17 @@ describe('metric_expression', () => {
|
||||||
});
|
});
|
||||||
|
|
||||||
describe('MetricChart component', () => {
|
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();
|
const { data, args } = sampleArgs();
|
||||||
|
|
||||||
expect(
|
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(`
|
).toMatchInlineSnapshot(`
|
||||||
<VisualizationContainer
|
<VisualizationContainer
|
||||||
className="lnsMetricExpression__container"
|
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>
|
||||||
<div
|
<div
|
||||||
data-test-subj="lns_metric_title"
|
data-test-subj="lns_metric_title"
|
||||||
|
@ -111,7 +167,7 @@ describe('metric_expression', () => {
|
||||||
<MetricChart
|
<MetricChart
|
||||||
data={data}
|
data={data}
|
||||||
args={noAttributesArgs}
|
args={noAttributesArgs}
|
||||||
formatFactory={(x) => x as IFieldFormat}
|
formatFactory={() => ({ convert: (x) => x } as IFieldFormat)}
|
||||||
/>
|
/>
|
||||||
)
|
)
|
||||||
).toMatchInlineSnapshot(`
|
).toMatchInlineSnapshot(`
|
||||||
|
@ -130,7 +186,7 @@ describe('metric_expression', () => {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
10110
|
3
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
data-test-subj="lns_metric_title"
|
data-test-subj="lns_metric_title"
|
||||||
|
@ -155,7 +211,7 @@ describe('metric_expression', () => {
|
||||||
<MetricChart
|
<MetricChart
|
||||||
data={data}
|
data={data}
|
||||||
args={{ ...noAttributesArgs, mode: 'reduced' }}
|
args={{ ...noAttributesArgs, mode: 'reduced' }}
|
||||||
formatFactory={(x) => x as IFieldFormat}
|
formatFactory={() => ({ convert: (x) => x } as IFieldFormat)}
|
||||||
/>
|
/>
|
||||||
)
|
)
|
||||||
).toMatchInlineSnapshot(`
|
).toMatchInlineSnapshot(`
|
||||||
|
@ -174,7 +230,7 @@ describe('metric_expression', () => {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
10110
|
3
|
||||||
</div>
|
</div>
|
||||||
</AutoScale>
|
</AutoScale>
|
||||||
</VisualizationContainer>
|
</VisualizationContainer>
|
||||||
|
@ -189,7 +245,7 @@ describe('metric_expression', () => {
|
||||||
<MetricChart
|
<MetricChart
|
||||||
data={{ ...data, tables: {} }}
|
data={{ ...data, tables: {} }}
|
||||||
args={noAttributesArgs}
|
args={noAttributesArgs}
|
||||||
formatFactory={(x) => x as IFieldFormat}
|
formatFactory={() => ({ convert: (x) => x } as IFieldFormat)}
|
||||||
/>
|
/>
|
||||||
)
|
)
|
||||||
).toMatchInlineSnapshot(`
|
).toMatchInlineSnapshot(`
|
||||||
|
@ -202,14 +258,14 @@ describe('metric_expression', () => {
|
||||||
test('it renders an EmptyPlaceholder when null value is passed as data', () => {
|
test('it renders an EmptyPlaceholder when null value is passed as data', () => {
|
||||||
const { data, noAttributesArgs } = sampleArgs();
|
const { data, noAttributesArgs } = sampleArgs();
|
||||||
|
|
||||||
data.tables.l1.rows[0].a = null;
|
data.tables.l1.rows[0].c = null;
|
||||||
|
|
||||||
expect(
|
expect(
|
||||||
shallow(
|
shallow(
|
||||||
<MetricChart
|
<MetricChart
|
||||||
data={data}
|
data={data}
|
||||||
args={noAttributesArgs}
|
args={noAttributesArgs}
|
||||||
formatFactory={(x) => x as IFieldFormat}
|
formatFactory={() => ({ convert: (x) => x } as IFieldFormat)}
|
||||||
/>
|
/>
|
||||||
)
|
)
|
||||||
).toMatchInlineSnapshot(`
|
).toMatchInlineSnapshot(`
|
||||||
|
@ -222,14 +278,14 @@ describe('metric_expression', () => {
|
||||||
test('it renders 0 value', () => {
|
test('it renders 0 value', () => {
|
||||||
const { data, noAttributesArgs } = sampleArgs();
|
const { data, noAttributesArgs } = sampleArgs();
|
||||||
|
|
||||||
data.tables.l1.rows[0].a = 0;
|
data.tables.l1.rows[0].c = 0;
|
||||||
|
|
||||||
expect(
|
expect(
|
||||||
shallow(
|
shallow(
|
||||||
<MetricChart
|
<MetricChart
|
||||||
data={data}
|
data={data}
|
||||||
args={noAttributesArgs}
|
args={noAttributesArgs}
|
||||||
formatFactory={(x) => x as IFieldFormat}
|
formatFactory={() => ({ convert: (x) => x } as IFieldFormat)}
|
||||||
/>
|
/>
|
||||||
)
|
)
|
||||||
).toMatchInlineSnapshot(`
|
).toMatchInlineSnapshot(`
|
||||||
|
@ -264,5 +320,13 @@ describe('metric_expression', () => {
|
||||||
</VisualizationContainer>
|
</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} />;
|
return <EmptyPlaceholder icon={LensIconChartMetric} />;
|
||||||
}
|
}
|
||||||
|
|
||||||
const column = firstTable.columns[0];
|
const column = firstTable.columns.find(({ id }) => id === accessor)!;
|
||||||
const row = firstTable.rows[0];
|
const row = firstTable.rows[0];
|
||||||
|
|
||||||
// NOTE: Cardinality and Sum never receives "null" as value, but always 0, even for empty dataset.
|
// NOTE: Cardinality and Sum never receives "null" as value, but always 0, even for empty dataset.
|
||||||
|
|
Loading…
Reference in a new issue