[Vis: Default editor] Euification of Metric options tab

src/legacy/core_plugins/kbn_vislib_vis_types/public/components/common/index.ts

@@ -19,7 +19,7 @@
 
 export { BasicOptions } from './basic_options';
 export { ColorRanges } from './color_ranges';
-export { ColorSchemaOptions } from './color_schema';
+export { ColorSchemaOptions, SetColorSchemaOptionsValue } from './color_schema';
 export { NumberInputOption } from './number_input';
 export { RangeOption } from './range';
 export { SelectOption } from './select';

src/legacy/core_plugins/kbn_vislib_vis_types/public/components/common/truncate_labels.tsx

@@ -23,11 +23,11 @@ import { EuiFormRow, EuiFieldNumber } from '@elastic/eui';
 
 interface TruncateLabelsOptionProps {
   disabled?: boolean;
-  value: number | null;
+  value?: number | null;
   setValue: (paramName: 'truncate', value: null | number) => void;
 }
 
-function TruncateLabelsOption({ disabled, value, setValue }: TruncateLabelsOptionProps) {
+function TruncateLabelsOption({ disabled, value = null, setValue }: TruncateLabelsOptionProps) {
   const onChange = (ev: ChangeEvent<HTMLInputElement>) =>
     setValue('truncate', ev.target.value === '' ? null : parseFloat(ev.target.value));
 

src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/heatmap/index.tsx

@@ -167,16 +167,13 @@ function HeatmapOptions(props: VisOptionsProps<HeatmapVisParams>) {
         />
 
         {stateParams.setColorRange && (
-          <>
-            <EuiSpacer size="s" />
-            <ColorRanges
-              data-test-subj="heatmapColorRange"
-              colorsRange={stateParams.colorsRange}
-              setValue={setValue}
-              setTouched={setTouched}
-              setValidity={setIsColorRangesValid}
-            />
-          </>
+          <ColorRanges
+            data-test-subj="heatmapColorRange"
+            colorsRange={stateParams.colorsRange}
+            setValue={setValue}
+            setTouched={setTouched}
+            setValidity={setIsColorRangesValid}
+          />
         )}
       </EuiPanel>
 

src/legacy/core_plugins/kbn_vislib_vis_types/public/gauge.d.ts

@@ -19,7 +19,7 @@
 
 import { RangeValues } from 'ui/vis/editors/default/controls/ranges';
 import { Alignments, GaugeTypes } from './utils/collections';
-import { ColorSchemaVislibParams } from './types';
+import { ColorSchemaVislibParams, Labels, Style } from './types';
 
 interface Gauge extends ColorSchemaVislibParams {
   backStyle: 'Full';
@@ -30,18 +30,14 @@ interface Gauge extends ColorSchemaVislibParams {
   colorsRange: RangeValues[];
   extendRange: boolean;
   gaugeType: GaugeTypes;
-  labels: {
-    show: boolean;
-  };
+  labels: Labels;
   percentageMode: boolean;
   scale: {
     show: boolean;
     labels: false;
     color: 'rgba(105,112,125,0.2)';
   };
-  style: {
-    subText: string;
-  };
+  style: Style;
 }
 
 export interface GaugeVisParams {

src/legacy/core_plugins/kbn_vislib_vis_types/public/gauge.js

@@ -23,7 +23,7 @@ import { Schemas } from 'ui/vis/editors/default/schemas';
 import { AggGroupNames } from 'ui/vis/editors/default';
 import { ColorSchemas } from 'ui/vislib/components/color/colormaps';
 import { GaugeOptions } from './components/options';
-import { getGaugeCollections, Alignments, GaugeColorModes, GaugeTypes } from './utils/collections';
+import { getGaugeCollections, Alignments, ColorModes, GaugeTypes } from './utils/collections';
 import { vislibVisController } from './controller';
 
 export default function GaugeVisType() {
@@ -49,7 +49,7 @@ export default function GaugeVisType() {
           backStyle: 'Full',
           orientation: 'vertical',
           colorSchema: ColorSchemas.GreenToRed,
-          gaugeColorMode: GaugeColorModes.LABELS,
+          gaugeColorMode: ColorModes.LABELS,
           colorsRange: [
             { from: 0, to: 50 },
             { from: 50, to: 75 },

src/legacy/core_plugins/kbn_vislib_vis_types/public/goal.js

@@ -22,7 +22,7 @@ import { Schemas } from 'ui/vis/editors/default/schemas';
 import { AggGroupNames } from 'ui/vis/editors/default';
 import { ColorSchemas } from 'ui/vislib/components/color/colormaps';
 import { GaugeOptions } from './components/options';
-import { getGaugeCollections, GaugeTypes, GaugeColorModes } from './utils/collections';
+import { getGaugeCollections, GaugeTypes, ColorModes } from './utils/collections';
 import { vislibVisController } from './controller';
 import { visFactory } from '../../../ui/public/vis/vis_factory';
 
@@ -52,7 +52,7 @@ export default function GoalVisType() {
           orientation: 'vertical',
           useRanges: false,
           colorSchema: ColorSchemas.GreenToRed,
-          gaugeColorMode: GaugeColorModes.NONE,
+          gaugeColorMode: ColorModes.NONE,
           colorsRange: [
             { from: 0, to: 10000 }
           ],

src/legacy/core_plugins/kbn_vislib_vis_types/public/types.ts

@@ -41,13 +41,21 @@ export interface ColorSchemaVislibParams {
   invertColors: boolean;
 }
 
-interface Labels {
-  color: string;
-  filter: boolean;
+export interface Labels {
+  color?: string;
+  filter?: boolean;
   overwriteColor?: boolean;
   rotate?: Rotates;
   show: boolean;
-  truncate: number | null;
+  truncate?: number | null;
+}
+
+export interface Style {
+  bgFill: string;
+  bgColor: boolean;
+  labelColor: boolean;
+  subText: string;
+  fontSize: number;
 }
 
 export interface Scale {
@@ -74,7 +82,7 @@ export interface Axis {
   position: Positions;
   scale: Scale;
   show: boolean;
-  style: object;
+  style: Style;
   title: { text: string };
   type: AxisTypes;
 }

src/legacy/core_plugins/kbn_vislib_vis_types/public/utils/collections.ts

@@ -253,7 +253,8 @@ export enum GaugeTypes {
   CIRCLE = 'Circle',
 }
 
-export enum GaugeColorModes {
+export enum ColorModes {
+  BACKGROUND = 'Background',
   LABELS = 'Labels',
   NONE = 'None',
 }

src/legacy/core_plugins/vis_type_metric/public/components/metric_vis_options.tsx

@@ -0,0 +1,177 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React, { useCallback } from 'react';
+import { EuiPanel, EuiSpacer, EuiTitle } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n/react';
+
+import { VisOptionsProps } from 'ui/vis/editors/default';
+import {
+  ColorRanges,
+  ColorSchemaOptions,
+  SelectOption,
+  SwitchOption,
+  RangeOption,
+  SetColorSchemaOptionsValue,
+} from '../../../kbn_vislib_vis_types/public/components';
+import { ColorModes } from '../../../kbn_vislib_vis_types/public/utils/collections';
+import { MetricVisParam, VisParams } from '../types';
+
+function MetricVisOptions({
+  stateParams,
+  setValue,
+  setValidity,
+  setTouched,
+  vis,
+  uiState,
+}: VisOptionsProps<VisParams>) {
+  const setMetricValue: <T extends keyof MetricVisParam>(
+    paramName: T,
+    value: MetricVisParam[T]
+  ) => void = useCallback(
+    (paramName, value) =>
+      setValue('metric', {
+        ...stateParams.metric,
+        [paramName]: value,
+      }),
+    [setValue, stateParams.metric]
+  );
+
+  const setMetricLabels: <T extends keyof MetricVisParam['labels']>(
+    paramName: T,
+    value: MetricVisParam['labels'][T]
+  ) => void = useCallback(
+    (paramName, value) =>
+      setMetricValue('labels', {
+        ...stateParams.metric.labels,
+        [paramName]: value,
+      }),
+    [setMetricValue, stateParams.metric.labels]
+  );
+
+  const setMetricStyle: <T extends keyof MetricVisParam['style']>(
+    paramName: T,
+    value: MetricVisParam['style'][T]
+  ) => void = useCallback(
+    (paramName, value) =>
+      setMetricValue('style', {
+        ...stateParams.metric.style,
+        [paramName]: value,
+      }),
+    [setMetricValue, stateParams.metric.style]
+  );
+
+  return (
+    <>
+      <EuiPanel paddingSize="s">
+        <EuiTitle size="xs">
+          <h3>
+            <FormattedMessage id="visTypeMetric.params.rangesTitle" defaultMessage="Ranges" />
+          </h3>
+        </EuiTitle>
+        <EuiSpacer size="s" />
+
+        <ColorRanges
+          data-test-subj="metricColorRange"
+          colorsRange={stateParams.metric.colorsRange}
+          setValue={setMetricValue}
+          setTouched={setTouched}
+          setValidity={setValidity}
+        />
+
+        <SwitchOption
+          label={i18n.translate('visTypeMetric.params.percentageModeLabel', {
+            defaultMessage: 'Percentage mode',
+          })}
+          paramName="percentageMode"
+          value={stateParams.metric.percentageMode}
+          setValue={setMetricValue}
+        />
+        <EuiSpacer size="m" />
+
+        <EuiTitle size="xs">
+          <h3>
+            <FormattedMessage
+              id="visTypeMetric.params.color.colorOptionsTitle"
+              defaultMessage="Color options"
+            />
+          </h3>
+        </EuiTitle>
+        <EuiSpacer size="s" />
+
+        <SelectOption
+          disabled={stateParams.metric.colorsRange.length === 1}
+          label={i18n.translate('visTypeMetric.params.color.useForLabel', {
+            defaultMessage: 'Use color for',
+          })}
+          options={vis.type.editorConfig.collections.metricColorMode}
+          paramName="metricColorMode"
+          value={stateParams.metric.metricColorMode}
+          setValue={setMetricValue}
+        />
+
+        <ColorSchemaOptions
+          colorSchema={stateParams.metric.colorSchema}
+          colorSchemas={vis.type.editorConfig.collections.colorSchemas}
+          disabled={
+            stateParams.metric.colorsRange.length === 1 ||
+            stateParams.metric.metricColorMode === ColorModes.NONE
+          }
+          invertColors={stateParams.metric.invertColors}
+          setValue={setMetricValue as SetColorSchemaOptionsValue}
+          uiState={uiState}
+        />
+      </EuiPanel>
+
+      <EuiSpacer size="s" />
+
+      <EuiPanel paddingSize="s">
+        <EuiTitle size="xs">
+          <h3>
+            <FormattedMessage id="visTypeMetric.params.style.styleTitle" defaultMessage="Style" />
+          </h3>
+        </EuiTitle>
+        <EuiSpacer size="s" />
+
+        <SwitchOption
+          label={i18n.translate('visTypeMetric.params.showLabelsLabel', {
+            defaultMessage: 'Show labels',
+          })}
+          paramName="show"
+          value={stateParams.metric.labels.show}
+          setValue={setMetricLabels}
+        />
+
+        <RangeOption
+          label={i18n.translate('visTypeMetric.params.style.fontSizeLabel', {
+            defaultMessage: 'Font size in points',
+          })}
+          min={12}
+          max={120}
+          paramName="fontSize"
+          value={stateParams.metric.style.fontSize}
+          setValue={setMetricStyle}
+        />
+      </EuiPanel>
+    </>
+  );
+}
+
+export { MetricVisOptions };