[Vis: Default editor] EUIficate Panel Setting tab

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

@@ -20,7 +20,8 @@
 import { VisFactoryProvider } from 'ui/vis/vis_factory';
 import { i18n } from '@kbn/i18n';
 import { Schemas } from 'ui/vis/editors/default/schemas';
-import pointSeriesTemplate from './editors/point_series.html';
+import { PointSeriesOptions } from './editors/point_series';
+import { getLegendPositions, LegendPositions } from './utils/legend_positions';
 
 export default function PointSeriesVisType(Private) {
   const VisFactory = Private(VisFactoryProvider);
@@ -93,13 +94,15 @@ export default function PointSeriesVisType(Private) {
         }],
         addTooltip: true,
         addLegend: true,
-        legendPosition: 'right',
+        legendPosition: LegendPositions.RIGHT,
         times: [],
         addTimeMarker: false,
+        labels: {},
       },
     },
     editorConfig: {
       collections: {
+        legendPositions: getLegendPositions(),
         positions: ['top', 'left', 'right', 'bottom'],
         chartTypes: [{
           value: 'line',
@@ -132,7 +135,7 @@ export default function PointSeriesVisType(Private) {
           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: pointSeriesTemplate },
+        { name: 'options', title: 'Panel Settings', editor: PointSeriesOptions },
       ],
       schemas: new Schemas([
         {

src/legacy/core_plugins/kbn_vislib_vis_types/public/controls/point_series/grid_options.tsx

@@ -0,0 +1,97 @@
+/*
+ * 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, { useMemo, useEffect } from 'react';
+import { EuiPanel, EuiTitle } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n/react';
+
+import { VisOptionsProps } from 'ui/vis/editors/default';
+import { SwitchOption } from '../switch';
+import { SelectOption } from '../select';
+import { BasicVislibParams, ValueAxis } from '../../types';
+
+function GridOptions({
+  stateParams,
+  setValue,
+  hasHistogramAgg,
+}: VisOptionsProps<BasicVislibParams>) {
+  const setGrid = <T extends keyof BasicVislibParams['grid']>(
+    paramName: T,
+    value: BasicVislibParams['grid'][T]
+  ) => setValue('grid', { ...stateParams.grid, [paramName]: value });
+
+  const options = useMemo(
+    () => [
+      ...stateParams.valueAxes.map(({ id, name }: ValueAxis) => ({
+        text: name,
+        value: id,
+      })),
+      {
+        text: i18n.translate('kbnVislibVisTypes.controls.pointSeries.gridAxis.dontShowLabel', {
+          defaultMessage: "Don't show",
+        }),
+        value: '',
+      },
+    ],
+    [stateParams.valueAxes.map(({ id }: ValueAxis) => id)]
+  );
+
+  useEffect(() => {
+    if (hasHistogramAgg) {
+      setGrid('categoryLines', false);
+    }
+  }, [hasHistogramAgg]);
+
+  return (
+    <EuiPanel paddingSize="s">
+      <EuiTitle size="xs">
+        <h2>
+          <FormattedMessage
+            id="kbnVislibVisTypes.controls.pointSeries.gridAxis.gridText"
+            defaultMessage="Grid"
+          />
+        </h2>
+      </EuiTitle>
+
+      <SwitchOption
+        disabled={hasHistogramAgg}
+        label={i18n.translate('kbnVislibVisTypes.controls.pointSeries.gridAxis.xAxisLinesLabel', {
+          defaultMessage: 'Show x-axis lines',
+        })}
+        paramName="categoryLines"
+        value={stateParams.grid.categoryLines}
+        setValue={setGrid}
+        dataTestSubj="showCategoryLines"
+      />
+
+      <SelectOption
+        id="gridAxis"
+        label={i18n.translate('kbnVislibVisTypes.controls.pointSeries.gridAxis.yAxisLinesLabel', {
+          defaultMessage: 'Y-axis lines',
+        })}
+        options={options}
+        paramName="valueAxis"
+        value={stateParams.grid.valueAxis || ''}
+        setValue={setGrid}
+      />
+    </EuiPanel>
+  );
+}
+
+export { GridOptions };

src/legacy/core_plugins/kbn_vislib_vis_types/public/controls/point_series/index.js

@@ -20,4 +20,3 @@
 import './value_axes.js';
 import './category_axis.js';
 import './series.js';
-import './grid.js';

src/legacy/core_plugins/kbn_vislib_vis_types/public/controls/select.tsx

@@ -21,22 +21,25 @@ import React from 'react';
 import { EuiFormRow, EuiSelect } from '@elastic/eui';
 
 interface SelectOptionProps<ParamName extends string, ValidParamValues extends string> {
+  id?: string;
   label: string;
   options: Array<{ value: ValidParamValues; text: string }>;
   paramName: ParamName;
   value?: ValidParamValues;
+  dataTestSubj?: string;
   setValue: (paramName: ParamName, value: ValidParamValues) => void;
 }
 
 function SelectOption<ParamName extends string, ValidParamValues extends string>({
+  id,
   label,
   options,
   paramName,
   value,
   setValue,
 }: SelectOptionProps<ParamName, ValidParamValues>) {
   return (
-    <EuiFormRow label={label} fullWidth={true} compressed>
+    <EuiFormRow id={id} label={label} fullWidth={true} compressed>
       <EuiSelect
         options={options}
         value={value}