[7.x] [Vis: Default editor] Euification of Metric options tab (#46930)

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

@@ -38,6 +38,7 @@ interface ColorSchemaOptionsProps extends ColorSchemaVislibParams {
   colorSchemas: ColorSchema[];
   uiState: VisOptionsProps['uiState'];
   setValue: SetColorSchemaOptionsValue;
+  showHelpText?: boolean;
 }
 
 function ColorSchemaOptions({
@@ -47,6 +48,7 @@ function ColorSchemaOptions({
   invertColors,
   uiState,
   setValue,
+  showHelpText = true,
 }: ColorSchemaOptionsProps) {
   const [isCustomColors, setIsCustomColors] = useState(() => !!uiState.get('vis.colors'));
 
@@ -76,12 +78,12 @@ function ColorSchemaOptions({
     <>
       <SelectOption
         disabled={disabled}
-        helpText={i18n.translate(
-          'kbnVislibVisTypes.controls.colorSchema.howToChangeColorsDescription',
-          {
+        helpText={
+          showHelpText &&
+          i18n.translate('kbnVislibVisTypes.controls.colorSchema.howToChangeColorsDescription', {
             defaultMessage: 'Individual colors can be changed in the legend.',
-          }
-        )}
+          })
+        }
         label={i18n.translate('kbnVislibVisTypes.controls.colorSchema.colorSchemaLabel', {
           defaultMessage: 'Color schema',
         })}

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/range.tsx

@@ -27,6 +27,8 @@ interface RangeOptionProps<ParamName extends string> {
   min: number;
   paramName: ParamName;
   showInput?: boolean;
+  showLabels?: boolean;
+  showValue?: boolean;
   step?: number;
   value: '' | number;
   setValue: (paramName: ParamName, value: number) => void;
@@ -37,6 +39,8 @@ function RangeOption<ParamName extends string>({
   max,
   min,
   showInput,
+  showLabels,
+  showValue = true,
   step,
   paramName,
   value,
@@ -65,10 +69,11 @@ function RangeOption<ParamName extends string>({
       <EuiRange
         compressed
         fullWidth
-        showValue
         max={max}
         min={min}
         showInput={showInput}
+        showLabels={showLabels}
+        showValue={showValue}
         step={step}
         value={stateValue}
         onChange={onChangeHandler}

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/components/options/metrics_axes/mocks.ts

@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import { Axis, ValueAxis, SeriesParam } from '../../../types';
+import { Axis, ValueAxis, SeriesParam, Style } from '../../../types';
 import {
   ChartTypes,
   ChartModes,
@@ -31,7 +31,7 @@ const defaultValueAxisId = 'ValueAxis-1';
 
 const axis = {
   show: true,
-  style: {},
+  style: {} as Style,
   title: {
     text: '',
   },

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',
 }