[Lens] Switch to unified metric renderer (#126019)

* Switch to unified metric renderer * Fix tests * Fix snapshots * Remove unused translation * Fix tests * Fix font size mapping Co-authored-by: Kibana Machine <[email protected]>
elastic · Mar 9, 2022 · 9f880f2 · 9f880f2
1 parent 2836018
commit 9f880f2
Show file tree

Hide file tree

Showing 35 changed files with 228 additions and 1,261 deletions.
diff --git a/src/plugins/chart_expressions/expression_metric/public/components/metric_value.tsx b/src/plugins/chart_expressions/expression_metric/public/components/metric_value.tsx
@@ -43,6 +43,7 @@ export const MetricVisValue = ({
       style={autoScale && colorFullBackground ? {} : { backgroundColor: metric.bgColor }}
     >
       <div
+        data-test-subj="metric_value"
         className="mtrVis__value"
         style={{
           ...(style.spec as CSSProperties),
@@ -60,6 +61,7 @@ export const MetricVisValue = ({
       />
       {labelConfig.show && (
         <div
+          data-test-subj="metric_label"
           style={{
             ...(labelConfig.style.spec as CSSProperties),
             order: labelConfig.position === 'top' ? -1 : 2,

diff --git a/...s/chart_expressions/expression_metric/public/expression_renderers/metric_vis_renderer.tsx b/...s/chart_expressions/expression_metric/public/expression_renderers/metric_vis_renderer.tsx
@@ -33,6 +33,7 @@ export const getMetricVisRenderer = (
       render(
         <KibanaThemeProvider theme$={theme.theme$}>
           <VisualizationContainer
+            data-test-subj="mtrVis"
             className="mtrVis"
             showNoResult={!visData.rows?.length}
             handlers={handlers}

diff --git a/x-pack/plugins/lens/common/expressions/index.ts b/x-pack/plugins/lens/common/expressions/index.ts
@@ -11,7 +11,6 @@ export * from './rename_columns';
 export * from './merge_tables';
 export * from './time_scale';
 export * from './datatable';
-export * from './metric_chart';
 export * from './xy_chart';
 
 export * from './expression_types';
diff --git a/x-pack/plugins/lens/common/expressions/metric_chart/index.ts b/x-pack/plugins/lens/common/expressions/metric_chart/index.ts
diff --git a/x-pack/plugins/lens/common/expressions/metric_chart/metric_chart.ts b/x-pack/plugins/lens/common/expressions/metric_chart/metric_chart.ts
diff --git a/x-pack/plugins/lens/common/expressions/metric_chart/types.ts b/x-pack/plugins/lens/common/expressions/metric_chart/types.ts
diff --git a/x-pack/plugins/lens/common/types.ts b/x-pack/plugins/lens/common/types.ts
@@ -13,8 +13,11 @@ import type {
   SerializedFieldFormat,
 } from '../../../../src/plugins/field_formats/common';
 import type { Datatable } from '../../../../src/plugins/expressions/common';
-import type { PaletteContinuity } from '../../../../src/plugins/charts/common';
-import type { PaletteOutput } from '../../../../src/plugins/charts/common';
+import type {
+  PaletteContinuity,
+  PaletteOutput,
+  ColorMode,
+} from '../../../../src/plugins/charts/common';
 import {
   CategoryDisplay,
   layerTypes,
@@ -121,3 +124,13 @@ export interface PieVisualizationState {
   layers: PieLayerState[];
   palette?: PaletteOutput;
 }
+export interface MetricState {
+  layerId: string;
+  accessor?: string;
+  layerType: LayerType;
+  colorMode?: ColorMode;
+  palette?: PaletteOutput<CustomPaletteParams>;
+  titlePosition?: 'top' | 'bottom';
+  size?: string;
+  textAlign?: 'left' | 'right' | 'center';
+}
diff --git a/x-pack/plugins/lens/public/embeddable/embeddable_component.tsx b/x-pack/plugins/lens/public/embeddable/embeddable_component.tsx
@@ -24,8 +24,7 @@ import type { LensByReferenceInput, LensByValueInput } from './embeddable';
 import type { Document } from '../persistence';
 import type { IndexPatternPersistedState } from '../indexpattern_datasource/types';
 import type { XYState } from '../xy_visualization/types';
-import type { MetricState } from '../../common/expressions';
-import type { PieVisualizationState } from '../../common';
+import type { PieVisualizationState, MetricState } from '../../common';
 import type { DatatableVisualizationState } from '../datatable_visualization/visualization';
 import type { HeatmapVisualizationState } from '../heatmap_visualization/types';
 import type { GaugeVisualizationState } from '../visualizations/gauge/constants';

diff --git a/x-pack/plugins/lens/public/expressions.ts b/x-pack/plugins/lens/public/expressions.ts
@@ -30,7 +30,6 @@ import { renameColumns } from '../common/expressions/rename_columns/rename_colum
 import { formatColumn } from '../common/expressions/format_column';
 import { counterRate } from '../common/expressions/counter_rate';
 import { getTimeScale } from '../common/expressions/time_scale/time_scale';
-import { metricChart } from '../common/expressions/metric_chart/metric_chart';
 import { lensMultitable } from '../common/expressions';
 
 export const setupExpressions = (
@@ -44,7 +43,6 @@ export const setupExpressions = (
     xyChart,
     mergeTables,
     counterRate,
-    metricChart,
     yAxisConfig,
     dataLayerConfig,
     referenceLineLayerConfig,

diff --git a/x-pack/plugins/lens/public/index.ts b/x-pack/plugins/lens/public/index.ts
@@ -14,7 +14,6 @@ export type {
 export type { XYState } from './xy_visualization/types';
 export type { DataType, OperationMetadata, Visualization } from './types';
 export type {
-  MetricState,
   AxesSettingsConfig,
   XYLayerConfig,
   LegendConfig,

diff --git a/x-pack/plugins/lens/public/metric_visualization/auto_scale.test.tsx b/x-pack/plugins/lens/public/metric_visualization/auto_scale.test.tsx