Skip to content

Commit

Permalink
[Lens] Fix formula formatting in Metric visualization type (elastic#1…
Browse files Browse the repository at this point in the history 
…03167)

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
  • Loading branch information
@kibanamachine
Wylie Conlon and kibanamachine committed Jun 24, 2021
1 parent 60086a9 commit d5f68ee
Show file tree
Hide file tree
Showing 2 changed files with 82 additions and 18 deletions.
98 changes: 81 additions & 17 deletions x-pack/plugins/lens/public/metric_visualization/expression.test.tsx
View file
Expand Up @@ -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',
Expand All @@ -39,7 +44,7 @@ function sampleArgs() {
};

const noAttributesArgs: MetricConfig = {
accessor: 'a',
accessor: 'c',
layerId: 'l1',
title: '',
description: '',
Expand All @@ -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"
Expand All @@ -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"
Expand All @@ -111,7 +167,7 @@ describe('metric_expression', () => {
<MetricChart
data={data}
args={noAttributesArgs}
formatFactory={(x) => x as IFieldFormat}
formatFactory={() => ({ convert: (x) => x } as IFieldFormat)}
/>
)
).toMatchInlineSnapshot(`
Expand All @@ -130,7 +186,7 @@ describe('metric_expression', () => {
}
}
>
10110
3
</div>
<div
data-test-subj="lns_metric_title"
Expand All @@ -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(`
Expand All @@ -174,7 +230,7 @@ describe('metric_expression', () => {
}
}
>
10110
3
</div>
</AutoScale>
</VisualizationContainer>
Expand All @@ -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(`
Expand All @@ -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(`
Expand All @@ -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(`
Expand Down Expand Up @@ -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%' } });
});
});
});
2 changes: 1 addition & 1 deletion x-pack/plugins/lens/public/metric_visualization/expression.tsx
View file
Expand Up @@ -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.
Expand Down

0 comments on commit d5f68ee

Please sign in to comment.