[Gauge] Vis editors gauge legacy percent mode. (#126318)

* Added legacy percentage mode to the gauge. Co-authored-by: Kibana Machine <[email protected]>
elastic · Mar 8, 2022 · 720fbed · 720fbed
1 parent 5ad355e
commit 720fbed
Show file tree

Hide file tree

Showing 13 changed files with 170 additions and 60 deletions.
diff --git a/...ns/expression_gauge/common/expression_functions/__snapshots__/gauge_function.test.ts.snap b/...ns/expression_gauge/common/expression_functions/__snapshots__/gauge_function.test.ts.snap
diff --git a/src/plugins/chart_expressions/expression_gauge/common/expression_functions/gauge_function.ts b/src/plugins/chart_expressions/expression_gauge/common/expression_functions/gauge_function.ts
@@ -180,6 +180,14 @@ export const gaugeFunction = (): GaugeExpressionFunctionDefinition => ({
         defaultMessage: 'Specifies the mode of centralMajor',
       }),
     },
+    // used only in legacy gauge, consider it as @deprecated
+    percentageMode: {
+      types: ['boolean'],
+      default: false,
+      help: i18n.translate('expressionGauge.functions.gauge.percentageMode.help', {
+        defaultMessage: 'Enables relative precentage mode',
+      }),
+    },
     ariaLabel: {
       types: ['string'],
       help: i18n.translate('expressionGauge.functions.gaugeChart.config.ariaLabel.help', {

diff --git a/src/plugins/chart_expressions/expression_gauge/common/types/expression_functions.ts b/src/plugins/chart_expressions/expression_gauge/common/types/expression_functions.ts
@@ -45,6 +45,8 @@ export interface GaugeState {
   colorMode?: GaugeColorMode;
   palette?: PaletteOutput<CustomPaletteParams>;
   shape: GaugeShape;
+  /** @deprecated This field is deprecated and going to be removed in the futher release versions. */
+  percentageMode?: boolean;
 }
 
 export type GaugeArguments = GaugeState & {

diff --git a/src/plugins/chart_expressions/expression_gauge/common/types/expression_renderers.ts b/src/plugins/chart_expressions/expression_gauge/common/types/expression_renderers.ts
@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import type { ChartsPluginSetup } from '../../../../charts/public';
+import type { ChartsPluginSetup, PaletteRegistry } from '../../../../charts/public';
 import type { IFieldFormat, SerializedFieldFormat } from '../../../../field_formats/common';
 import type { GaugeExpressionProps } from './expression_functions';
 
@@ -15,6 +15,7 @@ export type FormatFactory = (mapping?: SerializedFieldFormat) => IFieldFormat;
 export type GaugeRenderProps = GaugeExpressionProps & {
   formatFactory: FormatFactory;
   chartsThemeService: ChartsPluginSetup['theme'];
+  paletteService: PaletteRegistry;
 };
 
 export interface ColorStop {

diff --git a/...xpressions/expression_gauge/public/components/__snapshots__/gauge_component.test.tsx.snap b/...xpressions/expression_gauge/public/components/__snapshots__/gauge_component.test.tsx.snap
diff --git a/src/plugins/chart_expressions/expression_gauge/public/components/gauge_component.test.tsx b/src/plugins/chart_expressions/expression_gauge/public/components/gauge_component.test.tsx
@@ -54,6 +54,7 @@ jest.mock('@elastic/charts', () => {
 });
 
 const chartsThemeService = chartPluginMock.createSetupContract().theme;
+const paletteThemeService = chartPluginMock.createSetupContract().palettes;
 const formatService = fieldFormatsServiceMock.createStartContract();
 const args: GaugeArguments = {
   labelMajor: 'Gauge',
@@ -81,12 +82,13 @@ const createData = (
 describe('GaugeComponent', function () {
   let wrapperProps: GaugeRenderProps;
 
-  beforeAll(() => {
+  beforeAll(async () => {
     wrapperProps = {
       data: createData(),
       chartsThemeService,
       args,
       formatFactory: formatService.deserialize,
+      paletteService: await paletteThemeService.getPalettes(),
     };
   });