[7.x] [Vis: Default Editor] EUIficate 'Metrics & Axis' tab (#43772)

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

@@ -20,12 +20,25 @@
 import { VisFactoryProvider } from 'ui/vis/vis_factory';
 import { i18n } from '@kbn/i18n';
 import { Schemas } from 'ui/vis/editors/default/schemas';
-import { PointSeriesOptions } from './components/options';
-import { getLegendPositions, LegendPositions } from './utils/legend_positions';
+import { AggGroupNames } from 'ui/vis/editors/default';
+import {
+  Positions,
+  ChartTypes,
+  ChartModes,
+  InterpolationModes,
+  AxisTypes,
+  ScaleTypes,
+  AxisModes,
+  Rotates,
+  ThresholdLineStyles,
+  getConfigCollections,
+} from './utils/collections';
+import { getAreaOptionTabs, getCountLabel } from './utils/common_config';
 import { palettes } from '@elastic/eui/lib/services';
 
 export default function PointSeriesVisType(Private) {
   const VisFactory = Private(VisFactoryProvider);
+  const countLabel = getCountLabel();
 
   return VisFactory.createVislibVisualization({
     name: 'area',
@@ -42,12 +55,12 @@ export default function PointSeriesVisType(Private) {
         categoryAxes: [
           {
             id: 'CategoryAxis-1',
-            type: 'category',
-            position: 'bottom',
+            type: AxisTypes.CATEGORY,
+            position: Positions.BOTTOM,
             show: true,
             style: {},
             scale: {
-              type: 'linear'
+              type: ScaleTypes.LINEAR,
             },
             labels: {
               show: true,
@@ -61,93 +74,62 @@ export default function PointSeriesVisType(Private) {
           {
             id: 'ValueAxis-1',
             name: 'LeftAxis-1',
-            type: 'value',
-            position: 'left',
+            type: AxisTypes.VALUE,
+            position: Positions.LEFT,
             show: true,
             style: {},
             scale: {
-              type: 'linear',
-              mode: 'normal'
+              type: ScaleTypes.LINEAR,
+              mode: AxisModes.NORMAL,
             },
             labels: {
               show: true,
-              rotate: 0,
+              rotate: Rotates.HORIZONTAL,
               filter: false,
               truncate: 100
             },
             title: {
-              text: 'Count'
+              text: countLabel
             }
           }
         ],
-        seriesParams: [{
-          show: 'true',
-          type: 'area',
-          mode: 'stacked',
-          data: {
-            label: 'Count',
-            id: '1'
-          },
-          drawLinesBetweenPoints: true,
-          showCircles: true,
-          interpolate: 'linear',
-          valueAxis: 'ValueAxis-1'
-        }],
+        seriesParams: [
+          {
+            show: true,
+            type: ChartTypes.AREA,
+            mode: ChartModes.STACKED,
+            data: {
+              label: countLabel,
+              id: '1'
+            },
+            drawLinesBetweenPoints: true,
+            lineWidth: 2,
+            showCircles: true,
+            interpolate: InterpolationModes.LINEAR,
+            valueAxis: 'ValueAxis-1',
+          }
+        ],
         addTooltip: true,
         addLegend: true,
-        legendPosition: LegendPositions.RIGHT,
+        legendPosition: Positions.RIGHT,
         times: [],
         addTimeMarker: false,
         thresholdLine: {
           show: false,
           value: 10,
           width: 1,
-          style: 'full',
+          style: ThresholdLineStyles.FULL,
           color: palettes.euiPaletteColorBlind.colors[9]
         },
         labels: {}
       },
     },
     editorConfig: {
-      collections: {
-        legendPositions: getLegendPositions(),
-        positions: ['top', 'left', 'right', 'bottom'],
-        chartTypes: [{
-          value: 'line',
-          text: 'line'
-        }, {
-          value: 'area',
-          text: 'area'
-        }, {
-          value: 'histogram',
-          text: 'bar'
-        }],
-        axisModes: ['normal', 'percentage', 'wiggle', 'silhouette'],
-        scaleTypes: ['linear', 'log', 'square root'],
-        chartModes: ['normal', 'stacked'],
-        interpolationModes: [{
-          value: 'linear',
-          text: 'straight',
-        }, {
-          value: 'cardinal',
-          text: 'smoothed',
-        }, {
-          value: 'step-after',
-          text: 'stepped',
-        }],
-      },
-      optionTabs: [
-        {
-          name: 'advanced',
-          title: 'Metrics & Axes',
-          editor: '<div><vislib-series></vislib-series><vislib-value-axes>' +
-          '</vislib-value-axes><vislib-category-axis></vislib-category-axis></div>'
-        },
-        { name: 'options', title: 'Panel Settings', editor: PointSeriesOptions },
-      ],
+      collections: getConfigCollections(),
+      optionTabs: getAreaOptionTabs(),
       schemas: new Schemas([
         {
-          group: 'metrics',
+          group: AggGroupNames.Metrics,
           name: 'metric',
           title: i18n.translate('kbnVislibVisTypes.area.metricsTitle', { defaultMessage: 'Y-axis' }),
           aggFilter: ['!geo_centroid', '!geo_bounds'],
@@ -157,31 +139,31 @@ export default function PointSeriesVisType(Private) {
           ]
         },
         {
-          group: 'metrics',
+          group: AggGroupNames.Metrics,
           name: 'radius',
           title: i18n.translate('kbnVislibVisTypes.area.radiusTitle', { defaultMessage: 'Dot size' }),
           min: 0,
           max: 1,
           aggFilter: ['count', 'avg', 'sum', 'min', 'max', 'cardinality']
         },
         {
-          group: 'buckets',
+          group: AggGroupNames.Buckets,
           name: 'segment',
           title: i18n.translate('kbnVislibVisTypes.area.segmentTitle', { defaultMessage: 'X-axis' }),
           min: 0,
           max: 1,
           aggFilter: ['!geohash_grid', '!geotile_grid', '!filter']
         },
         {
-          group: 'buckets',
+          group: AggGroupNames.Buckets,
           name: 'group',
           title: i18n.translate('kbnVislibVisTypes.area.groupTitle', { defaultMessage: 'Split series' }),
           min: 0,
           max: 3,
           aggFilter: ['!geohash_grid', '!geotile_grid', '!filter']
         },
         {
-          group: 'buckets',
+          group: AggGroupNames.Buckets,
           name: 'split',
           title: i18n.translate('kbnVislibVisTypes.area.splitTitle', { defaultMessage: 'Split chart' }),
           min: 0,

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

@@ -24,3 +24,4 @@ export { SelectOption } from './select';
 export { SwitchOption } from './switch';
 export { TextInputOption } from './text_input';
 export { TruncateLabelsOption } from './truncate_labels';
+export { ValidationWrapper, ValidationVisOptionsProps } from './validation_wrapper';

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

@@ -21,28 +21,39 @@ import React from 'react';
 import { EuiFormRow, EuiFieldNumber } from '@elastic/eui';
 
 interface NumberInputOptionProps<ParamName extends string> {
+  disabled?: boolean;
+  error?: string[];
+  isInvalid?: boolean;
   label?: React.ReactNode;
   max?: number;
   min?: number;
-  step?: string | number;
   paramName: ParamName;
+  step?: number;
   value?: number | '';
+  'data-test-subj'?: string;
   setValue: (paramName: ParamName, value: number | '') => void;
 }
 
 function NumberInputOption<ParamName extends string>({
+  disabled,
+  error,
+  isInvalid,
   label,
   max,
   min,
   paramName,
   step,
   value = '',
   setValue,
+  'data-test-subj': dataTestSubj,
 }: NumberInputOptionProps<ParamName>) {
   return (
-    <EuiFormRow label={label} fullWidth compressed>
+    <EuiFormRow label={label} error={error} isInvalid={isInvalid} fullWidth compressed>
       <EuiFieldNumber
+        data-test-subj={dataTestSubj}
+        disabled={disabled}
         fullWidth
+        isInvalid={isInvalid}
         step={step}
         max={max}
         min={min}

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

@@ -20,7 +20,7 @@
 import React from 'react';
 import { EuiFormRow, EuiSelect } from '@elastic/eui';
 
-interface SelectOptionProps<ParamName extends string, ValidParamValues extends string> {
+interface SelectOptionProps<ParamName extends string, ValidParamValues extends string | number> {
   disabled?: boolean;
   helpText?: React.ReactNode;
   id?: string;
@@ -34,7 +34,7 @@ interface SelectOptionProps<ParamName extends string, ValidParamValues extends s
 
 const emptyValue = { text: '', value: 'EMPTY_VALUE', disabled: true, hidden: true };
 
-function SelectOption<ParamName extends string, ValidParamValues extends string>({
+function SelectOption<ParamName extends string, ValidParamValues extends string | number>({
   disabled,
   helpText,
   id,
@@ -57,7 +57,7 @@ function SelectOption<ParamName extends string, ValidParamValues extends string>
       <EuiSelect
         disabled={disabled}
         options={[emptyValue, ...options]}
-        value={value || emptyValue.value}
+        value={value === undefined ? emptyValue.value : value}
         onChange={ev => setValue(paramName, ev.target.value as ValidParamValues)}
         fullWidth={true}
       />

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

@@ -27,6 +27,7 @@ interface SwitchOptionProps<ParamName extends string> {
   tooltip?: string;
   disabled?: boolean;
   value?: boolean;
+  noStyle?: boolean;
   paramName: ParamName;
   setValue: (paramName: ParamName, value: boolean) => void;
 }
@@ -36,12 +37,13 @@ function SwitchOption<ParamName extends string>({
   tooltip,
   label,
   disabled,
+  noStyle = false,
   paramName,
   value = false,
   setValue,
 }: SwitchOptionProps<ParamName>) {
   return (
-    <div className="visEditorSidebar__switchOptionFormRow">
+    <div className={noStyle ? undefined : 'visEditorSidebar__switchOptionFormRow'}>
       <EuiToolTip content={tooltip} delay="long" position="right">
         <EuiSwitch
           label={label}

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

@@ -26,10 +26,12 @@ interface TextInputOptionProps<ParamName extends string> {
   label?: React.ReactNode;
   paramName: ParamName;
   value?: string;
+  'data-test-subj'?: string;
   setValue: (paramName: ParamName, value: string) => void;
 }
 
 function TextInputOption<ParamName extends string>({
+  'data-test-subj': dataTestSubj,
   disabled,
   helpText,
   label,
@@ -41,6 +43,7 @@ function TextInputOption<ParamName extends string>({
     <EuiFormRow helpText={helpText} label={label} fullWidth compressed>
       <EuiFieldText
         fullWidth
+        data-test-subj={dataTestSubj}
         disabled={disabled}
         value={value}
         onChange={ev => setValue(paramName, ev.target.value)}

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

@@ -22,11 +22,12 @@ import { i18n } from '@kbn/i18n';
 import { EuiFormRow, EuiFieldNumber } from '@elastic/eui';
 
 interface TruncateLabelsOptionProps {
+  disabled?: boolean;
   value: number | null;
   setValue: (paramName: 'truncate', value: null | number) => void;
 }
 
-function TruncateLabelsOption({ value, setValue }: TruncateLabelsOptionProps) {
+function TruncateLabelsOption({ disabled, value, setValue }: TruncateLabelsOptionProps) {
   const onChange = (ev: ChangeEvent<HTMLInputElement>) =>
     setValue('truncate', ev.target.value === '' ? null : parseFloat(ev.target.value));
 
@@ -35,10 +36,15 @@ function TruncateLabelsOption({ value, setValue }: TruncateLabelsOptionProps) {
       label={i18n.translate('kbnVislibVisTypes.controls.truncateLabel', {
         defaultMessage: 'Truncate',
       })}
-      fullWidth={true}
+      fullWidth
       compressed
     >
-      <EuiFieldNumber value={value === null ? '' : value} onChange={onChange} fullWidth={true} />
+      <EuiFieldNumber
+        disabled={disabled}
+        value={value === null ? '' : value}
+        onChange={onChange}
+        fullWidth
+      />
     </EuiFormRow>
   );
 }