[Gauge] Vis Type (elastic#126048)

* Added transparent background * Added gauge/goal visType. * Fixed palette, scale, and types. * Set legacy chart as default. * Removed deprecation message. * Added percent format params, coming from visdimensions. * Added support of labels/sublabels. * Updated i18n label. * Added support of showElasticChartsOptions * Added autoextend ranges elastic charts tooltip. * The outline elastic-charts message added. * outline renaming and metric/buckets limitations * reverted mistaken change of sample_vis.test.mocks. * Warning message added to gauge split chart. * Added warning message to the splitChart button at goal/gauge. Co-authored-by: Kibana Machine <[email protected]>
spalger · Mar 4, 2022 · 2b6885a · 2b6885a
1 parent 6c0526b
commit 2b6885a
Show file tree

Hide file tree

Showing 45 changed files with 1,228 additions and 378 deletions.
diff --git a/.i18nrc.json b/.i18nrc.json
@@ -68,6 +68,7 @@
     "usageCollection": "src/plugins/usage_collection",
     "utils": "packages/kbn-securitysolution-utils/src",
     "visDefaultEditor": "src/plugins/vis_default_editor",
+    "visTypeGauge": "src/plugins/vis_types/gauge",
     "visTypeHeatmap": "src/plugins/vis_types/heatmap",
     "visTypeMarkdown": "src/plugins/vis_type_markdown",
     "visTypeMetric": "src/plugins/vis_types/metric",

diff --git a/docs/developer/plugin-list.asciidoc b/docs/developer/plugin-list.asciidoc
@@ -297,6 +297,10 @@ It acts as a container for a particular visualization and options tabs. Contains
 The plugin exposes the static DefaultEditorController class to consume.
 
 
+|{kib-repo}blob/{branch}/src/plugins/vis_types/gauge[visTypeGauge]
+|WARNING: Missing README.
+
+
 |{kib-repo}blob/{branch}/src/plugins/vis_types/heatmap[visTypeHeatmap]
 |WARNING: Missing README.
 

diff --git a/packages/kbn-optimizer/limits.yml b/packages/kbn-optimizer/limits.yml
@@ -121,4 +121,5 @@ pageLoadAssetSize:
   expressionPartitionVis: 26338
   sharedUX: 16225
   ux: 20784
+  visTypeGauge: 24113
   cloudSecurityPosture: 19109
diff --git a/src/plugins/chart_expressions/expression_gauge/common/index.ts b/src/plugins/chart_expressions/expression_gauge/common/index.ts
@@ -10,6 +10,7 @@ export const PLUGIN_ID = 'expressionGauge';
 export const PLUGIN_NAME = 'expressionGauge';
 
 export type {
+  GaugeExpressionFunctionDefinition,
   GaugeExpressionProps,
   FormatFactory,
   GaugeRenderProps,

diff --git a/src/plugins/chart_expressions/expression_gauge/public/components/gauge_component.tsx b/src/plugins/chart_expressions/expression_gauge/public/components/gauge_component.tsx
@@ -10,6 +10,7 @@ import { Chart, Goal, Settings } from '@elastic/charts';
 import { FormattedMessage } from '@kbn/i18n-react';
 import type { CustomPaletteState } from '../../../../charts/public';
 import { EmptyPlaceholder } from '../../../../charts/public';
+import { isVisDimension } from '../../../../visualizations/common/utils';
 import {
   GaugeRenderProps,
   GaugeLabelMajorMode,
@@ -234,17 +235,22 @@ export const GaugeComponent: FC<GaugeRenderProps> = memo(
         />
       );
     }
+    const customMetricFormatParams = isVisDimension(args.metric) ? args.metric.format : undefined;
+    const tableMetricFormatParams = metricColumn?.meta?.params?.params
+      ? metricColumn?.meta?.params
+      : undefined;
+
+    const defaultMetricFormatParams = {
+      id: 'number',
+      params: {
+        pattern: max - min > 5 ? `0,0` : `0,0.0`,
+      },
+    };
 
     const tickFormatter = formatFactory(
-      metricColumn?.meta?.params?.params
-        ? metricColumn?.meta?.params
-        : {
-            id: 'number',
-            params: {
-              pattern: max - min > 5 ? `0,0` : `0,0.0`,
-            },
-          }
+      customMetricFormatParams ?? tableMetricFormatParams ?? defaultMetricFormatParams
     );
+
     const colors = palette?.params?.colors ? normalizeColors(palette.params, min, max) : undefined;
     const bands: number[] = (palette?.params as CustomPaletteState)
       ? normalizeBands(args.palette?.params as CustomPaletteState, { min, max })

diff --git a/src/plugins/vis_types/gauge/common/index.ts b/src/plugins/vis_types/gauge/common/index.ts
@@ -0,0 +1,9 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+export const LEGACY_GAUGE_CHARTS_LIBRARY = 'visualization:visualize:legacyGaugeChartsLibrary';
diff --git a/...islib/public/vis_type_vislib_vis_types.ts → src/plugins/vis_types/gauge/config.ts b/...islib/public/vis_type_vislib_vis_types.ts → src/plugins/vis_types/gauge/config.ts
@@ -6,13 +6,10 @@
  * Side Public License, v 1.
  */
 
-import { VisTypeDefinition } from 'src/plugins/visualizations/public';
-import { gaugeVisTypeDefinition } from './gauge';
-import { goalVisTypeDefinition } from './goal';
+import { schema, TypeOf } from '@kbn/config-schema';
 
-export { pieVisTypeDefinition } from './pie';
+export const configSchema = schema.object({
+  enabled: schema.boolean({ defaultValue: true }),
+});
 
-export const visLibVisTypeDefinitions: Array<VisTypeDefinition<any>> = [
-  gaugeVisTypeDefinition,
-  goalVisTypeDefinition,
-];
+export type ConfigSchema = TypeOf<typeof configSchema>;
diff --git a/src/plugins/vis_types/gauge/jest.config.js b/src/plugins/vis_types/gauge/jest.config.js
@@ -0,0 +1,18 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+module.exports = {
+  preset: '@kbn/test',
+  rootDir: '../../../..',
+  roots: ['<rootDir>/src/plugins/vis_types/gauge'],
+  coverageDirectory: '<rootDir>/target/kibana-coverage/jest/src/plugins/vis_types/gauge',
+  coverageReporters: ['text', 'html'],
+  collectCoverageFrom: [
+    '<rootDir>/src/plugins/vis_types/gauge/{common,public,server}/**/*.{ts,tsx}',
+  ],
+};
diff --git a/src/plugins/vis_types/gauge/kibana.json b/src/plugins/vis_types/gauge/kibana.json
@@ -0,0 +1,16 @@
+{
+  "id": "visTypeGauge",
+  "version": "1.0.0",
+  "kibanaVersion": "kibana",
+  "server": true,
+  "ui": true,
+  "requiredPlugins": ["charts", "data", "expressions", "visualizations"],
+  "requiredBundles": ["visDefaultEditor"],
+  "optionalPlugins": ["expressionGauge"],
+  "extraPublicDirs": ["common/index"],
+  "owner": {
+    "name": "Vis Editors",
+    "githubTeam": "kibana-vis-editors"
+  },
+  "description": "Contains the gauge chart implementation using the elastic-charts library. The goal is to eventually deprecate the old implementation and keep only this. Until then, the library used is defined by the Legacy charts library advanced setting."
+}
diff --git a/src/plugins/vis_types/gauge/public/__snapshots__/to_ast.test.ts.snap b/src/plugins/vis_types/gauge/public/__snapshots__/to_ast.test.ts.snap
diff --git a/...types/vislib/public/editor/collections.ts → ..._types/gauge/public/editor/collections.ts b/...types/vislib/public/editor/collections.ts → ..._types/gauge/public/editor/collections.ts
@@ -7,21 +7,18 @@
  */
 
 import { i18n } from '@kbn/i18n';
-
 import { colorSchemas } from '../../../../charts/public';
-import { getPositions, getScaleTypes } from '../../../xy/public';
-
 import { Alignment, GaugeType } from '../types';
 
 export const getGaugeTypes = () => [
   {
-    text: i18n.translate('visTypeVislib.gauge.gaugeTypes.arcText', {
+    text: i18n.translate('visTypeGauge.gauge.gaugeTypes.arcText', {
       defaultMessage: 'Arc',
     }),
     value: GaugeType.Arc,
   },
   {
-    text: i18n.translate('visTypeVislib.gauge.gaugeTypes.circleText', {
+    text: i18n.translate('visTypeGauge.gauge.gaugeTypes.circleText', {
       defaultMessage: 'Circle',
     }),
     value: GaugeType.Circle,
@@ -30,19 +27,19 @@ export const getGaugeTypes = () => [
 
 export const getAlignments = () => [
   {
-    text: i18n.translate('visTypeVislib.gauge.alignmentAutomaticTitle', {
+    text: i18n.translate('visTypeGauge.gauge.alignmentAutomaticTitle', {
       defaultMessage: 'Automatic',
     }),
     value: Alignment.Automatic,
   },
   {
-    text: i18n.translate('visTypeVislib.gauge.alignmentHorizontalTitle', {
+    text: i18n.translate('visTypeGauge.gauge.alignmentHorizontalTitle', {
       defaultMessage: 'Horizontal',
     }),
     value: Alignment.Horizontal,
   },
   {
-    text: i18n.translate('visTypeVislib.gauge.alignmentVerticalTitle', {
+    text: i18n.translate('visTypeGauge.gauge.alignmentVerticalTitle', {
       defaultMessage: 'Vertical',
     }),
     value: Alignment.Vertical,
@@ -54,9 +51,3 @@ export const getGaugeCollections = () => ({
   alignments: getAlignments(),
   colorSchemas,
 });
-
-export const getHeatmapCollections = () => ({
-  legendPositions: getPositions(),
-  scales: getScaleTypes(),
-  colorSchemas,
-});
diff --git a/.../public/editor/components/gauge/index.tsx → .../public/editor/components/gauge/index.tsx b/.../public/editor/components/gauge/index.tsx → .../public/editor/components/gauge/index.tsx
@@ -10,19 +10,21 @@ import React, { useCallback } from 'react';
 import { EuiSpacer } from '@elastic/eui';
 
 import { VisEditorOptionsProps } from 'src/plugins/visualizations/public';
-import { GaugeVisParams } from '../../../gauge';
+import { GaugeTypeProps, GaugeVisParams } from '../../../types';
 import { RangesPanel } from './ranges_panel';
 import { StylePanel } from './style_panel';
 import { LabelsPanel } from './labels_panel';
 
-export type GaugeOptionsInternalProps = VisEditorOptionsProps<GaugeVisParams> & {
+export interface GaugeOptionsProps extends VisEditorOptionsProps<GaugeVisParams>, GaugeTypeProps {}
+
+export type GaugeOptionsInternalProps = GaugeOptionsProps & {
   setGaugeValue: <T extends keyof GaugeVisParams['gauge']>(
     paramName: T,
     value: GaugeVisParams['gauge'][T]
   ) => void;
 };
 
-function GaugeOptions(props: VisEditorOptionsProps<GaugeVisParams>) {
+function GaugeOptions(props: GaugeOptionsProps) {
   const { stateParams, setValue } = props;
 
   const setGaugeValue: GaugeOptionsInternalProps['setGaugeValue'] = useCallback(
@@ -37,13 +39,9 @@ function GaugeOptions(props: VisEditorOptionsProps<GaugeVisParams>) {
   return (
     <>
       <StylePanel {...props} setGaugeValue={setGaugeValue} />
-
       <EuiSpacer size="s" />
-
       <RangesPanel {...props} setGaugeValue={setGaugeValue} />
-
       <EuiSpacer size="s" />
-
       <LabelsPanel {...props} setGaugeValue={setGaugeValue} />
     </>
   );

diff --git a/.../editor/components/gauge/labels_panel.tsx → .../editor/components/gauge/labels_panel.tsx b/.../editor/components/gauge/labels_panel.tsx → .../editor/components/gauge/labels_panel.tsx
@@ -19,15 +19,15 @@ function LabelsPanel({ stateParams, setValue, setGaugeValue }: GaugeOptionsInter
       <EuiTitle size="xs">
         <h3>
           <FormattedMessage
-            id="visTypeVislib.controls.gaugeOptions.labelsTitle"
+            id="visTypeGauge.controls.gaugeOptions.labelsTitle"
             defaultMessage="Labels"
           />
         </h3>
       </EuiTitle>
       <EuiSpacer size="s" />
 
       <SwitchOption
-        label={i18n.translate('visTypeVislib.controls.gaugeOptions.showLabelsLabel', {
+        label={i18n.translate('visTypeGauge.controls.gaugeOptions.showLabelsLabel', {
           defaultMessage: 'Show labels',
         })}
         paramName="show"
@@ -40,7 +40,7 @@ function LabelsPanel({ stateParams, setValue, setGaugeValue }: GaugeOptionsInter
 
       <TextInputOption
         disabled={!stateParams.gauge.labels.show}
-        label={i18n.translate('visTypeVislib.controls.gaugeOptions.subTextLabel', {
+        label={i18n.translate('visTypeGauge.controls.gaugeOptions.subTextLabel', {
           defaultMessage: 'Sub label',
         })}
         paramName="subText"