From afe52aac2d246a8f94e953f4f64206ec8c9cb8ab Mon Sep 17 00:00:00 2001 From: sulemanof Date: Mon, 2 Sep 2019 16:11:39 +0300 Subject: [PATCH 01/15] EUIficate heatmap options --- .../public/components/common/color_ranges.tsx | 82 ++++++ .../public/components/common/color_schema.tsx | 107 ++++++++ .../public/components/common/index.ts | 2 + .../public/components/common/number_input.tsx | 9 + .../components/options/gauge/ranges_panel.tsx | 92 +------ .../components/options/heatmap/index.tsx | 251 ++++++++++++++++++ .../public/components/options/index.ts | 1 + .../public/components/options/pie.tsx | 4 +- .../public/controls/heatmap_options.js | 98 ------- .../controls/line_interpolation_option.html | 11 - ...e_interpolation_option.js => heatmap.d.ts} | 22 +- .../kbn_vislib_vis_types/public/heatmap.js | 44 +-- .../kbn_vislib_vis_types/public/types.ts | 7 +- .../ui/public/agg_types/controls/ranges.tsx | 7 +- .../public/vis/vis_types/vislib_vis_type.js | 2 - .../functional/page_objects/visualize_page.js | 10 +- .../translations/translations/ja-JP.json | 16 -- .../translations/translations/zh-CN.json | 16 -- 18 files changed, 520 insertions(+), 261 deletions(-) create mode 100644 src/legacy/core_plugins/kbn_vislib_vis_types/public/components/common/color_ranges.tsx create mode 100644 src/legacy/core_plugins/kbn_vislib_vis_types/public/components/common/color_schema.tsx create mode 100644 src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/heatmap/index.tsx delete mode 100644 src/legacy/core_plugins/kbn_vislib_vis_types/public/controls/heatmap_options.js delete mode 100644 src/legacy/core_plugins/kbn_vislib_vis_types/public/controls/line_interpolation_option.html rename src/legacy/core_plugins/kbn_vislib_vis_types/public/{controls/line_interpolation_option.js => heatmap.d.ts} (65%) diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/common/color_ranges.tsx b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/common/color_ranges.tsx new file mode 100644 index 0000000000000..be3105cfa2330 --- /dev/null +++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/common/color_ranges.tsx @@ -0,0 +1,82 @@ +/* + * 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 { last } from 'lodash'; +import { i18n } from '@kbn/i18n'; + +import { RangesParamEditor } from 'ui/agg_types/controls/ranges'; + +interface ColorRangesProps { + dataTestSubj?: string; + colorsRange: Array<{ from?: number; to?: number }>; + setValue(paramName: string, value: ColorRangesProps['colorsRange']): void; + setValidity?(isValid: boolean): void; + setTouched?(isTouched: boolean): void; +} + +function ColorRanges({ + dataTestSubj, + colorsRange, + setValue, + setValidity, + setTouched, +}: ColorRangesProps) { + const addRangeValues = useCallback(() => { + const previousRange = last(colorsRange) || {}; + const from = previousRange.to ? previousRange.to : 0; + const to = previousRange.to ? from + (previousRange.to - (previousRange.from || 0)) : 100; + + return { from, to }; + }, [colorsRange]); + + const validateRange = useCallback( + ({ from, to }, index) => { + const leftBound = index === 0 ? -Infinity : colorsRange[index - 1].to || 0; + const isFromValid = from >= leftBound; + const isToValid = to >= from; + + return [isFromValid, isToValid]; + }, + [colorsRange] + ); + + const setColorRanges = useCallback( + (value: ColorRangesProps['colorsRange']) => setValue('colorsRange', value), + [setValue] + ); + + return ( + + ); +} + +export { ColorRanges }; diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/common/color_schema.tsx b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/common/color_schema.tsx new file mode 100644 index 0000000000000..d9e3b3f0623b2 --- /dev/null +++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/common/color_schema.tsx @@ -0,0 +1,107 @@ +/* + * 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, { useEffect, useState } from 'react'; +import { i18n } from '@kbn/i18n'; +import { EuiLink, EuiText } from '@elastic/eui'; +import { FormattedMessage } from '@kbn/i18n/react'; + +import { VisOptionsProps } from 'ui/vis/editors/default'; +import { ColorSchemas } from 'ui/vislib/components/color/colormaps'; +import { SelectOption } from './select'; +import { SwitchOption } from './switch'; + +interface ColorSchemaOptionsProps { + disabled?: boolean; + colorSchema: ColorSchemas; + colorSchemas: Array<{ + value: ColorSchemas; + text: string; + }>; + invertColors: boolean; + uiState: VisOptionsProps['uiState']; + setValue(...props: any): void; +} + +function ColorSchemaOptions({ + disabled, + colorSchema, + colorSchemas, + invertColors, + uiState, + setValue, +}: ColorSchemaOptionsProps) { + const [isCustomColors, setIsCustomColors] = useState(false); + + useEffect(() => { + uiState.on('colorChanged', () => { + setIsCustomColors(true); + }); + }, [uiState]); + + const resetColorsButton = ( + + { + uiState.set('vis.colors', null); + setIsCustomColors(false); + }} + > + + + + ); + + return ( + <> + + + + + ); +} + +export { ColorSchemaOptions }; diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/common/index.ts b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/common/index.ts index 50ac0752e8d1f..ce4ec7ab11e2d 100644 --- a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/common/index.ts +++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/common/index.ts @@ -18,6 +18,8 @@ */ export { BasicOptions } from './basic_options'; +export { ColorRanges } from './color_ranges'; +export { ColorSchemaOptions } from './color_schema'; export { NumberInputOption } from './number_input'; export { RangeOption } from './range'; export { SelectOption } from './select'; diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/common/number_input.tsx b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/common/number_input.tsx index 3f305a1ca7ae9..f54248a240012 100644 --- a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/common/number_input.tsx +++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/common/number_input.tsx @@ -21,6 +21,8 @@ import React from 'react'; import { EuiFormRow, EuiFieldNumber } from '@elastic/eui'; interface NumberInputOptionProps { + dataTestSubj?: string; + isInvalid?: boolean; label?: React.ReactNode; max?: number; min?: number; @@ -28,9 +30,12 @@ interface NumberInputOptionProps { paramName: ParamName; value?: number | ''; setValue: (paramName: ParamName, value: number | '') => void; + setTouched?(): void; } function NumberInputOption({ + dataTestSubj, + isInvalid, label, max, min, @@ -38,10 +43,13 @@ function NumberInputOption({ step, value = '', setValue, + setTouched, }: NumberInputOptionProps) { return ( ({ onChange={ev => setValue(paramName, isNaN(ev.target.valueAsNumber) ? '' : ev.target.valueAsNumber) } + onBlur={setTouched} /> ); diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/gauge/ranges_panel.tsx b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/gauge/ranges_panel.tsx index 241c10a06ba8d..02def23621fac 100644 --- a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/gauge/ranges_panel.tsx +++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/gauge/ranges_panel.tsx @@ -17,14 +17,12 @@ * under the License. */ -import React, { useCallback, useEffect, useState } from 'react'; -import { last } from 'lodash'; -import { EuiLink, EuiPanel, EuiSpacer, EuiText, EuiTitle } from '@elastic/eui'; +import React from 'react'; +import { EuiPanel, EuiSpacer, EuiTitle } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n/react'; -import { RangesParamEditor } from 'ui/agg_types/controls/ranges'; -import { SelectOption, SwitchOption } from '../../common'; +import { ColorRanges, ColorSchemaOptions, SwitchOption } from '../../common'; import { GaugeOptionsInternalProps } from '.'; function RangesPanel({ @@ -36,49 +34,6 @@ function RangesPanel({ uiState, vis, }: GaugeOptionsInternalProps) { - const [isCustomColors, setIsCustomColors] = useState(false); - - useEffect(() => { - uiState.on('colorChanged', () => { - setIsCustomColors(true); - }); - }, [uiState]); - - const addRangeValues = useCallback(() => { - const previousRange = last(stateParams.gauge.colorsRange); - const from = previousRange.to ? previousRange.to : 0; - const to = previousRange.to ? from + (previousRange.to - (previousRange.from || 0)) : 100; - - return { from, to }; - }, [stateParams.gauge.colorsRange]); - - const validateRange = useCallback( - ({ from, to }, index) => { - const leftBound = index === 0 ? -Infinity : stateParams.gauge.colorsRange[index - 1].to || 0; - const isFromValid = from >= leftBound; - const isToValid = to >= from; - - return [isFromValid, isToValid]; - }, - [stateParams.gauge.colorsRange] - ); - - const resetColorsButton = ( - - { - uiState.set('vis.colors', null); - setIsCustomColors(false); - }} - > - - - - ); - return ( @@ -91,18 +46,12 @@ function RangesPanel({ - setGaugeValue('colorsRange', value)} + colorsRange={stateParams.gauge.colorsRange} + setValue={setGaugeValue} setTouched={setTouched} setValidity={setValidity} - addRangeValues={addRangeValues} - validateRange={validateRange} /> - - - diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/heatmap/index.tsx b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/heatmap/index.tsx new file mode 100644 index 0000000000000..4c8e552477dfd --- /dev/null +++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/heatmap/index.tsx @@ -0,0 +1,251 @@ +/* + * 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, useEffect } 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 { + BasicOptions, + ColorRanges, + ColorSchemaOptions, + NumberInputOption, + SelectOption, + SwitchOption, + TextInputOption, +} from '../../common'; +import { HeatmapVisParams } from '../../../heatmap'; +import { ValueAxis } from '../../../types'; + +const VERTICAL_ROTATION = 270; + +function HeatmapOptions(props: VisOptionsProps) { + const { stateParams, vis, uiState, setValue, setValidity, setTouched } = props; + const [valueAxis] = stateParams.valueAxes; + const rotateLabels = valueAxis.labels.rotate === VERTICAL_ROTATION; + const isColorsNumberInvalid = stateParams.colorsNumber < 2 || stateParams.colorsNumber > 10; + + const setValueAxisScale = useCallback( + (paramName: T, value: ValueAxis['scale'][T]) => + setValue('valueAxes', [ + { + ...valueAxis, + scale: { + ...valueAxis.scale, + [paramName]: value, + }, + }, + ]), + [valueAxis, setValue] + ); + + const setValueAxisLabels = useCallback( + (paramName: T, value: ValueAxis['labels'][T]) => + setValue('valueAxes', [ + { + ...valueAxis, + labels: { + ...valueAxis.labels, + [paramName]: value, + }, + }, + ]), + [valueAxis, setValue] + ); + + const setParamToched = useCallback(() => setTouched(true), [setTouched]); + + const setRotateLabels = useCallback( + (paramName: 'rotate', value: boolean) => + setValueAxisLabels(paramName, value ? VERTICAL_ROTATION : 0), + [setValueAxisLabels] + ); + + useEffect(() => { + setValidity(!isColorsNumberInvalid); + }, [isColorsNumberInvalid, setValidity]); + + return ( + <> + + +

+ +

+ + + + + + + + + + + + +

+ +

+ + + + + + + + + + + {!stateParams.setColorRange && ( + <> + + + + + + )} + + + + {stateParams.setColorRange && ( + <> + + + + )} + + + + + + + + + + + ); +} + +export { HeatmapOptions }; diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/index.ts b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/index.ts index 63fd215b65acf..d1989fbfa03e8 100644 --- a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/index.ts +++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/index.ts @@ -20,3 +20,4 @@ export { GaugeOptions } from './gauge'; export { PieOptions } from './pie'; export { PointSeriesOptions } from './point_series'; +export { HeatmapOptions } from './heatmap'; diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/pie.tsx b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/pie.tsx index a226829dbb6b9..982c7265d5494 100644 --- a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/pie.tsx +++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/pie.tsx @@ -36,12 +36,12 @@ function PieOptions(props: VisOptionsProps) { <> -
+

-

+ { - $scope.editorState.params.valueAxes[0].labels.rotate = rotate ? verticalRotation : 0; - }); - - $scope.resetColors = function () { - $scope.uiState.set('vis.colors', null); - $scope.customColors = false; - }; - - $scope.toggleColorRangeSection = function (checkbox = false) { - $scope.showColorRange = !$scope.showColorRange; - if (checkbox && !$scope.editorState.params.setColorRange) $scope.showColorRange = false; - if (!checkbox && $scope.showColorRange && !$scope.editorState.params.setColorRange) $scope.editorState.params.setColorRange = true; - }; - - $scope.toggleLabelSection = function (checkbox = false) { - $scope.showLabels = !$scope.showLabels; - if (checkbox && !$scope.valueAxis.labels.show) $scope.showLabels = false; - if ($scope.showLabels && !$scope.valueAxis.labels.show) { - $scope.editorState.params.valueAxes[0].labels.show = true; - } - }; - - $scope.getGreaterThan = function (index) { - if (index === 0) return -Infinity; - return $scope.editorState.params.colorsRange[index - 1].to; - }; - - $scope.addRange = function () { - const previousRange = _.last($scope.editorState.params.colorsRange); - const from = previousRange ? previousRange.to : 0; - $scope.editorState.params.colorsRange.push({ from: from, to: null }); - }; - - $scope.removeRange = function (index) { - $scope.editorState.params.colorsRange.splice(index, 1); - }; - - $scope.getColor = function (index) { - const defaultColors = this.uiState.get('vis.defaultColors'); - const overwriteColors = this.uiState.get('vis.colors'); - const colors = defaultColors ? _.defaults({}, overwriteColors, defaultColors) : overwriteColors; - return colors ? Object.values(colors)[index] : 'transparent'; - }; - - $scope.uiState.on('colorChanged', () => { - $scope.customColors = true; - }); - - $scope.requiredText = i18n.translate('kbnVislibVisTypes.controls.heatmapOptions.requiredText', { - defaultMessage: 'Required:' - }); - } - }; -}); diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/controls/line_interpolation_option.html b/src/legacy/core_plugins/kbn_vislib_vis_types/public/controls/line_interpolation_option.html deleted file mode 100644 index 6731f5f6040c8..0000000000000 --- a/src/legacy/core_plugins/kbn_vislib_vis_types/public/controls/line_interpolation_option.html +++ /dev/null @@ -1,11 +0,0 @@ -
- - -
diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/controls/line_interpolation_option.js b/src/legacy/core_plugins/kbn_vislib_vis_types/public/heatmap.d.ts similarity index 65% rename from src/legacy/core_plugins/kbn_vislib_vis_types/public/controls/line_interpolation_option.js rename to src/legacy/core_plugins/kbn_vislib_vis_types/public/heatmap.d.ts index 0731c7893955f..12283b83a8070 100644 --- a/src/legacy/core_plugins/kbn_vislib_vis_types/public/controls/line_interpolation_option.js +++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/heatmap.d.ts @@ -17,14 +17,16 @@ * under the License. */ -import { uiModules } from 'ui/modules'; -import lineInterpolationOptionTemplate from './line_interpolation_option.html'; -const module = uiModules.get('kibana'); +import { ColorSchemas } from 'ui/vislib/components/color/colormaps'; +import { CommonVislibParams, ValueAxis } from './types'; -module.directive('lineInterpolationOption', function () { - return { - restrict: 'E', - template: lineInterpolationOptionTemplate, - replace: true - }; -}); +export interface HeatmapVisParams extends CommonVislibParams { + enableHover: boolean; + colorSchema: ColorSchemas; + colorsNumber: number | ''; + colorsRange: Array<{ from?: number; to?: number }>; + invertColors: boolean; + valueAxes: ValueAxis[]; + setColorRange: boolean; + percentageMode: boolean; +} diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/heatmap.js b/src/legacy/core_plugins/kbn_vislib_vis_types/public/heatmap.js index e00e3ffc62fbf..994043b0408a6 100644 --- a/src/legacy/core_plugins/kbn_vislib_vis_types/public/heatmap.js +++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/heatmap.js @@ -20,8 +20,9 @@ import { VisFactoryProvider } from 'ui/vis/vis_factory'; import { i18n } from '@kbn/i18n'; import { Schemas } from 'ui/vis/editors/default/schemas'; -import heatmapTemplate from './editors/heatmap.html'; -import { vislibColorMaps } from 'ui/vislib/components/color/colormaps'; +import { colorSchemas } from 'ui/vislib/components/color/colormaps'; +import { getLegendPositions } from './utils/legend_positions'; +import { HeatmapOptions } from './components/options'; export default function HeatmapVisType(Private) { const VisFactory = Private(VisFactoryProvider); @@ -64,23 +65,30 @@ export default function HeatmapVisType(Private) { }, editorConfig: { collections: { - legendPositions: [{ - value: 'left', - text: 'left', - }, { - value: 'right', - text: 'right', - }, { - value: 'top', - text: 'top', - }, { - value: 'bottom', - text: 'bottom', - }], - scales: ['linear', 'log', 'square root'], - colorSchemas: Object.values(vislibColorMaps).map(value => ({ id: value.id, label: value.label })), + legendPositions: getLegendPositions(), + scales: [ + { + text: i18n.translate('kbnVislibVisTypes.scaleTypes.linearText', { + defaultMessage: 'Linear', + }), + value: 'linear', + }, + { + text: i18n.translate('kbnVislibVisTypes.scaleTypes.logText', { + defaultMessage: 'Log', + }), + value: 'log', + }, + { + text: i18n.translate('kbnVislibVisTypes.scaleTypes.squareRootText', { + defaultMessage: 'Square root', + }), + value: 'square root', + }, + ], + colorSchemas, }, - optionsTemplate: heatmapTemplate, + optionsTemplate: HeatmapOptions, schemas: new Schemas([ { group: 'metrics', diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/types.ts b/src/legacy/core_plugins/kbn_vislib_vis_types/public/types.ts index 90bd577828cd8..e54b4d1386c59 100644 --- a/src/legacy/core_plugins/kbn_vislib_vis_types/public/types.ts +++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/types.ts @@ -25,7 +25,9 @@ export interface CommonVislibParams { } interface Labels { + color: string; filter: boolean; + overwriteColor?: boolean; rotate?: number; show: boolean; truncate: number; @@ -42,7 +44,10 @@ export interface ValueAxis { labels: Labels; name: string; position: LegendPositions; - scale: { type: string }; + scale: { + type: string; + defaultYExtents: boolean; + }; show: boolean; style: object; title: { text: string }; diff --git a/src/legacy/ui/public/agg_types/controls/ranges.tsx b/src/legacy/ui/public/agg_types/controls/ranges.tsx index ae704c7ddf363..92b61665501fd 100644 --- a/src/legacy/ui/public/agg_types/controls/ranges.tsx +++ b/src/legacy/ui/public/agg_types/controls/ranges.tsx @@ -207,7 +207,12 @@ function RangesParamEditor({ - + Date: Mon, 16 Sep 2019 17:16:18 +0300 Subject: [PATCH 02/15] Move collections --- .../public/components/common/color_ranges.tsx | 2 +- .../components/options/gauge/ranges_panel.tsx | 1 - .../components/options/heatmap/index.tsx | 2 +- .../options/metrics_axes/label_options.tsx | 6 +- .../kbn_vislib_vis_types/public/gauge.d.ts | 5 +- .../kbn_vislib_vis_types/public/gauge.js | 33 +----- .../kbn_vislib_vis_types/public/goal.js | 33 +----- .../kbn_vislib_vis_types/public/heatmap.js | 28 +---- .../kbn_vislib_vis_types/public/pie.js | 28 +---- .../public/utils/collections.ts | 101 +++++++++++++++--- 10 files changed, 101 insertions(+), 138 deletions(-) diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/common/color_ranges.tsx b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/common/color_ranges.tsx index be3105cfa2330..4b9c123f06319 100644 --- a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/common/color_ranges.tsx +++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/common/color_ranges.tsx @@ -21,7 +21,7 @@ import React, { useCallback } from 'react'; import { last } from 'lodash'; import { i18n } from '@kbn/i18n'; -import { RangesParamEditor } from 'ui/agg_types/controls/ranges'; +import { RangesParamEditor } from 'ui/vis/editors/default/controls/ranges'; interface ColorRangesProps { dataTestSubj?: string; diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/gauge/ranges_panel.tsx b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/gauge/ranges_panel.tsx index ec4b97822ecdc..02def23621fac 100644 --- a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/gauge/ranges_panel.tsx +++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/gauge/ranges_panel.tsx @@ -22,7 +22,6 @@ import { EuiPanel, EuiSpacer, EuiTitle } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n/react'; -import { RangesParamEditor } from 'ui/vis/editors/default/controls/ranges'; import { ColorRanges, ColorSchemaOptions, SwitchOption } from '../../common'; import { GaugeOptionsInternalProps } from '.'; diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/heatmap/index.tsx b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/heatmap/index.tsx index 4c8e552477dfd..81f7a2cbc2c69 100644 --- a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/heatmap/index.tsx +++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/heatmap/index.tsx @@ -164,7 +164,7 @@ function HeatmapOptions(props: VisOptionsProps) { { axis: Axis; @@ -56,6 +56,8 @@ function LabelOptions({ stateParams, setValue, axis, axesName, index }: LabelOpt [setAxisLabel] ); + const rotateOptions = useMemo(getRotateOptions, []); + return ( <> diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/gauge.d.ts b/src/legacy/core_plugins/kbn_vislib_vis_types/public/gauge.d.ts index ac943b094fd9a..49e4ae0fce62f 100644 --- a/src/legacy/core_plugins/kbn_vislib_vis_types/public/gauge.d.ts +++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/gauge.d.ts @@ -18,6 +18,7 @@ */ import { ColorSchemas } from 'ui/vislib/components/color/colormaps'; +import { Alignments, GaugeTypes } from './utils/collections'; export interface GaugeVisParams { readonly type: 'gauge'; @@ -29,12 +30,12 @@ export interface GaugeVisParams { readonly gaugeStyle: 'Full'; readonly orientation: 'vertical'; readonly type: 'meter'; - alignment: 'automatic' | 'horizontal' | 'vertical'; + alignment: Alignments; colorsRange: Array<{ from?: number; to?: number }>; colorSchema: ColorSchemas; extendRange: boolean; invertColors: boolean; - gaugeType: 'Arc' | 'Circle'; + gaugeType: GaugeTypes; labels: { show: boolean; }; diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/gauge.js b/src/legacy/core_plugins/kbn_vislib_vis_types/public/gauge.js index 6aacd0eaaf1ea..4e6182b1c8532 100644 --- a/src/legacy/core_plugins/kbn_vislib_vis_types/public/gauge.js +++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/gauge.js @@ -20,8 +20,8 @@ import { i18n } from '@kbn/i18n'; import { VisFactoryProvider } from 'ui/vis/vis_factory'; import { Schemas } from 'ui/vis/editors/default/schemas'; -import { colorSchemas } from 'ui/vislib/components/color/colormaps'; import { GaugeOptions } from './components/options'; +import { getGaugeCollections } from './utils/collections'; export default function GaugeVisType(Private) { const VisFactory = Private(VisFactoryProvider); @@ -83,36 +83,7 @@ export default function GaugeVisType(Private) { brush: { disabled: true }, }, editorConfig: { - collections: { - gaugeTypes: [ - { - text: i18n.translate('kbnVislibVisTypes.gauge.gaugeTypes.arcText', { - defaultMessage: 'Arc', - }), - value: 'Arc', - }, - { - text: i18n.translate('kbnVislibVisTypes.gauge.gaugeTypes.circleText', { - defaultMessage: 'Circle', - }), - value: 'Circle', - }, - ], - alignments: [ - { - value: 'automatic', - text: i18n.translate('kbnVislibVisTypes.gauge.alignmentAutomaticTitle', { defaultMessage: 'Automatic' }) - }, - { - value: 'horizontal', - text: i18n.translate('kbnVislibVisTypes.gauge.alignmentHorizontalTitle', { defaultMessage: 'Horizontal' }) - }, - { - value: 'vertical', - text: i18n.translate('kbnVislibVisTypes.gauge.alignmentVerticalTitle', { defaultMessage: 'Vertical' }) }, - ], - colorSchemas, - }, + collections: getGaugeCollections(), optionsTemplate: GaugeOptions, schemas: new Schemas([ { diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/goal.js b/src/legacy/core_plugins/kbn_vislib_vis_types/public/goal.js index 8904bf9f27540..86bda9bfff60e 100644 --- a/src/legacy/core_plugins/kbn_vislib_vis_types/public/goal.js +++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/goal.js @@ -20,8 +20,8 @@ import { VisFactoryProvider } from 'ui/vis/vis_factory'; import { i18n } from '@kbn/i18n'; import { Schemas } from 'ui/vis/editors/default/schemas'; -import { colorSchemas } from 'ui/vislib/components/color/colormaps'; import { GaugeOptions } from './components/options'; +import { getGaugeCollections } from './utils/collections'; export default function GoalVisType(Private) { const VisFactory = Private(VisFactoryProvider); @@ -79,36 +79,7 @@ export default function GoalVisType(Private) { brush: { disabled: true }, }, editorConfig: { - collections: { - gaugeTypes: [ - { - text: i18n.translate('kbnVislibVisTypes.gauge.gaugeTypes.arcText', { - defaultMessage: 'Arc', - }), - value: 'Arc', - }, - { - text: i18n.translate('kbnVislibVisTypes.gauge.gaugeTypes.circleText', { - defaultMessage: 'Circle', - }), - value: 'Circle', - }, - ], - alignments: [ - { - value: 'automatic', - text: i18n.translate('kbnVislibVisTypes.gauge.alignmentAutomaticTitle', { defaultMessage: 'Automatic' }) - }, - { - value: 'horizontal', - text: i18n.translate('kbnVislibVisTypes.gauge.alignmentHorizontalTitle', { defaultMessage: 'Horizontal' }) - }, - { - value: 'vertical', - text: i18n.translate('kbnVislibVisTypes.gauge.alignmentVerticalTitle', { defaultMessage: 'Vertical' }) }, - ], - colorSchemas, - }, + collections: getGaugeCollections(), optionsTemplate: GaugeOptions, schemas: new Schemas([ { diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/heatmap.js b/src/legacy/core_plugins/kbn_vislib_vis_types/public/heatmap.js index 994043b0408a6..a07976c09b66f 100644 --- a/src/legacy/core_plugins/kbn_vislib_vis_types/public/heatmap.js +++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/heatmap.js @@ -20,8 +20,7 @@ import { VisFactoryProvider } from 'ui/vis/vis_factory'; import { i18n } from '@kbn/i18n'; import { Schemas } from 'ui/vis/editors/default/schemas'; -import { colorSchemas } from 'ui/vislib/components/color/colormaps'; -import { getLegendPositions } from './utils/legend_positions'; +import { getHeatmapCollections } from './utils/collections'; import { HeatmapOptions } from './components/options'; export default function HeatmapVisType(Private) { @@ -64,30 +63,7 @@ export default function HeatmapVisType(Private) { }, }, editorConfig: { - collections: { - legendPositions: getLegendPositions(), - scales: [ - { - text: i18n.translate('kbnVislibVisTypes.scaleTypes.linearText', { - defaultMessage: 'Linear', - }), - value: 'linear', - }, - { - text: i18n.translate('kbnVislibVisTypes.scaleTypes.logText', { - defaultMessage: 'Log', - }), - value: 'log', - }, - { - text: i18n.translate('kbnVislibVisTypes.scaleTypes.squareRootText', { - defaultMessage: 'Square root', - }), - value: 'square root', - }, - ], - colorSchemas, - }, + collections: getHeatmapCollections(), optionsTemplate: HeatmapOptions, schemas: new Schemas([ { diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/pie.js b/src/legacy/core_plugins/kbn_vislib_vis_types/public/pie.js index 104162f2432e5..481bc03147561 100644 --- a/src/legacy/core_plugins/kbn_vislib_vis_types/public/pie.js +++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/pie.js @@ -21,6 +21,7 @@ import { VisFactoryProvider } from 'ui/vis/vis_factory'; import { i18n } from '@kbn/i18n'; import { Schemas } from 'ui/vis/editors/default/schemas'; import { PieOptions } from './components/options'; +import { getPositions } from './utils/collections'; export default function HistogramVisType(Private) { const VisFactory = Private(VisFactoryProvider); @@ -50,32 +51,7 @@ export default function HistogramVisType(Private) { }, editorConfig: { collections: { - legendPositions: [ - { - text: i18n.translate('kbnVislibVisTypes.pie.editorConfig.legendPositions.leftText', { - defaultMessage: 'Left' - }), - value: 'left' - }, - { - text: i18n.translate('kbnVislibVisTypes.pie.editorConfig.legendPositions.rightText', { - defaultMessage: 'Right' - }), - value: 'right' - }, - { - text: i18n.translate('kbnVislibVisTypes.pie.editorConfig.legendPositions.topText', { - defaultMessage: 'Top' - }), - value: 'top' - }, - { - text: i18n.translate('kbnVislibVisTypes.pie.editorConfig.legendPositions.bottomText', { - defaultMessage: 'Bottom' - }), - value: 'bottom' - }, - ], + legendPositions: getPositions() }, optionsTemplate: PieOptions, schemas: new Schemas([ diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/utils/collections.ts b/src/legacy/core_plugins/kbn_vislib_vis_types/public/utils/collections.ts index b8300dc42e4b7..3a4caeed70370 100644 --- a/src/legacy/core_plugins/kbn_vislib_vis_types/public/utils/collections.ts +++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/utils/collections.ts @@ -18,6 +18,7 @@ */ import { i18n } from '@kbn/i18n'; +import { colorSchemas } from 'ui/vislib/components/color/colormaps'; export enum Positions { RIGHT = 'right', @@ -26,7 +27,7 @@ export enum Positions { BOTTOM = 'bottom', } -const positions = [ +const getPositions = () => [ { text: i18n.translate('kbnVislibVisTypes.legendPositions.topText', { defaultMessage: 'Top', @@ -59,7 +60,7 @@ export enum ChartTypes { HISTOGRAM = 'histogram', } -const chartTypes = [ +const getChartTypes = () => [ { text: i18n.translate('kbnVislibVisTypes.chartTypes.lineText', { defaultMessage: 'Line', @@ -85,7 +86,7 @@ export enum ChartModes { STACKED = 'stacked', } -const chartModes = [ +const getChartModes = () => [ { text: i18n.translate('kbnVislibVisTypes.chartModes.normalText', { defaultMessage: 'Normal', @@ -106,7 +107,7 @@ export enum InterpolationModes { STEP_AFTER = 'step-after', } -const interpolationModes = [ +const getInterpolationModes = () => [ { text: i18n.translate('kbnVislibVisTypes.interpolationModes.straightText', { defaultMessage: 'Straight', @@ -138,7 +139,7 @@ export enum ScaleTypes { SQUARE_ROOT = 'square root', } -const scaleTypes = [ +const getScaleTypes = () => [ { text: i18n.translate('kbnVislibVisTypes.scaleTypes.linearText', { defaultMessage: 'Linear', @@ -166,7 +167,7 @@ export enum AxisModes { SILHOUETTE = 'silhouette', } -const axisModes = [ +const getAxisModes = () => [ { text: i18n.translate('kbnVislibVisTypes.axisModes.normalText', { defaultMessage: 'Normal', @@ -205,7 +206,7 @@ export enum ThresholdLineStyles { DOT_DASHED = 'dot-dashed', } -const thresholdLineStyles = [ +const getThresholdLineStyles = () => [ { value: ThresholdLineStyles.FULL, text: i18n.translate('kbnVislibVisTypes.thresholdLine.style.fullText', { @@ -226,7 +227,7 @@ const thresholdLineStyles = [ }, ]; -const rotateOptions = [ +const getRotateOptions = () => [ { text: i18n.translate('kbnVislibVisTypes.categoryAxis.rotate.horizontalText', { defaultMessage: 'Horizontal', @@ -247,15 +248,81 @@ const rotateOptions = [ }, ]; +export enum GaugeTypes { + ARC = 'Arc', + CIRCLE = 'Circle', +} + +const getGaugeTypes = () => [ + { + text: i18n.translate('kbnVislibVisTypes.gauge.gaugeTypes.arcText', { + defaultMessage: 'Arc', + }), + value: GaugeTypes.ARC, + }, + { + text: i18n.translate('kbnVislibVisTypes.gauge.gaugeTypes.circleText', { + defaultMessage: 'Circle', + }), + value: GaugeTypes.CIRCLE, + }, +]; + +export enum Alignments { + AUTOMATIC = 'automatic', + HORIZONTAL = 'horizontal', + VERTICAL = 'vertical', +} + +const getAlignments = () => [ + { + text: i18n.translate('kbnVislibVisTypes.gauge.alignmentAutomaticTitle', { + defaultMessage: 'Automatic', + }), + value: Alignments.AUTOMATIC, + }, + { + text: i18n.translate('kbnVislibVisTypes.gauge.alignmentHorizontalTitle', { + defaultMessage: 'Horizontal', + }), + value: Alignments.HORIZONTAL, + }, + { + text: i18n.translate('kbnVislibVisTypes.gauge.alignmentVerticalTitle', { + defaultMessage: 'Vertical', + }), + value: Alignments.VERTICAL, + }, +]; + const getConfigCollections = () => ({ - legendPositions: positions, - positions, - chartTypes, - axisModes, - scaleTypes, - chartModes, - interpolationModes, - thresholdLineStyles, + legendPositions: getPositions(), + positions: getPositions(), + chartTypes: getChartTypes(), + axisModes: getAxisModes(), + scaleTypes: getScaleTypes(), + chartModes: getChartModes(), + interpolationModes: getInterpolationModes(), + thresholdLineStyles: getThresholdLineStyles(), +}); + +const getGaugeCollections = () => ({ + gaugeTypes: getGaugeTypes(), + alignments: getAlignments(), + colorSchemas, +}); + +const getHeatmapCollections = () => ({ + legendPositions: getPositions(), + scales: getScaleTypes(), + colorSchemas, }); -export { getConfigCollections, rotateOptions }; +export { + getConfigCollections, + getGaugeCollections, + getHeatmapCollections, + getPositions, + getRotateOptions, + getScaleTypes, +}; From 3aa727a32a5929f28b70f6eceaaec7414d7e9be2 Mon Sep 17 00:00:00 2001 From: sulemanof Date: Tue, 17 Sep 2019 14:22:09 +0300 Subject: [PATCH 03/15] Split labels in a panel --- .../public/components/common/color_ranges.tsx | 5 +- .../public/components/common/number_input.tsx | 3 - .../components/options/heatmap/index.tsx | 75 +---------- .../options/heatmap/labels_panel.tsx | 117 ++++++++++++++++++ .../kbn_vislib_vis_types/public/gauge.d.ts | 3 +- .../kbn_vislib_vis_types/public/heatmap.d.ts | 4 +- .../kbn_vislib_vis_types/public/types.ts | 2 + 7 files changed, 132 insertions(+), 77 deletions(-) create mode 100644 src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/heatmap/labels_panel.tsx diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/common/color_ranges.tsx b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/common/color_ranges.tsx index 4b9c123f06319..cc68961226492 100644 --- a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/common/color_ranges.tsx +++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/common/color_ranges.tsx @@ -22,11 +22,12 @@ import { last } from 'lodash'; import { i18n } from '@kbn/i18n'; import { RangesParamEditor } from 'ui/vis/editors/default/controls/ranges'; +import { ColorsRange } from '../../types'; interface ColorRangesProps { dataTestSubj?: string; - colorsRange: Array<{ from?: number; to?: number }>; - setValue(paramName: string, value: ColorRangesProps['colorsRange']): void; + colorsRange: ColorsRange; + setValue(paramName: string, value: ColorsRange): void; setValidity?(isValid: boolean): void; setTouched?(isTouched: boolean): void; } diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/common/number_input.tsx b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/common/number_input.tsx index 1777f401d3145..9a7a39bc8f559 100644 --- a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/common/number_input.tsx +++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/common/number_input.tsx @@ -32,7 +32,6 @@ interface NumberInputOptionProps { value?: number | ''; 'data-test-subj'?: string; setValue: (paramName: ParamName, value: number | '') => void; - setTouched?(): void; } function NumberInputOption({ @@ -46,7 +45,6 @@ function NumberInputOption({ step, value = '', setValue, - setTouched, 'data-test-subj': dataTestSubj, }: NumberInputOptionProps) { return ( @@ -63,7 +61,6 @@ function NumberInputOption({ onChange={ev => setValue(paramName, isNaN(ev.target.valueAsNumber) ? '' : ev.target.valueAsNumber) } - onBlur={setTouched} /> ); diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/heatmap/index.tsx b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/heatmap/index.tsx index 81f7a2cbc2c69..47a246d3533c2 100644 --- a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/heatmap/index.tsx +++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/heatmap/index.tsx @@ -30,18 +30,16 @@ import { NumberInputOption, SelectOption, SwitchOption, - TextInputOption, } from '../../common'; import { HeatmapVisParams } from '../../../heatmap'; import { ValueAxis } from '../../../types'; - -const VERTICAL_ROTATION = 270; +import { LabelsPanel } from './labels_panel'; function HeatmapOptions(props: VisOptionsProps) { const { stateParams, vis, uiState, setValue, setValidity, setTouched } = props; const [valueAxis] = stateParams.valueAxes; - const rotateLabels = valueAxis.labels.rotate === VERTICAL_ROTATION; - const isColorsNumberInvalid = stateParams.colorsNumber < 2 || stateParams.colorsNumber > 10; + const isColorsNumberInvalid = + !stateParams.setColorRange && (stateParams.colorsNumber < 2 || stateParams.colorsNumber > 10); const setValueAxisScale = useCallback( (paramName: T, value: ValueAxis['scale'][T]) => @@ -57,28 +55,6 @@ function HeatmapOptions(props: VisOptionsProps) { [valueAxis, setValue] ); - const setValueAxisLabels = useCallback( - (paramName: T, value: ValueAxis['labels'][T]) => - setValue('valueAxes', [ - { - ...valueAxis, - labels: { - ...valueAxis.labels, - [paramName]: value, - }, - }, - ]), - [valueAxis, setValue] - ); - - const setParamToched = useCallback(() => setTouched(true), [setTouched]); - - const setRotateLabels = useCallback( - (paramName: 'rotate', value: boolean) => - setValueAxisLabels(paramName, value ? VERTICAL_ROTATION : 0), - [setValueAxisLabels] - ); - useEffect(() => { setValidity(!isColorsNumberInvalid); }, [isColorsNumberInvalid, setValidity]); @@ -174,7 +150,6 @@ function HeatmapOptions(props: VisOptionsProps) { paramName="colorsNumber" value={stateParams.colorsNumber} setValue={setValue} - setTouched={setParamToched} /> )} @@ -201,49 +176,11 @@ function HeatmapOptions(props: VisOptionsProps) { /> )} + - - - - - + - - + ); } diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/heatmap/labels_panel.tsx b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/heatmap/labels_panel.tsx new file mode 100644 index 0000000000000..88157abc11dd3 --- /dev/null +++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/heatmap/labels_panel.tsx @@ -0,0 +1,117 @@ +/* + * 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 { ValueAxis } from '../../../types'; +import { HeatmapVisParams } from '../../../heatmap'; +import { SwitchOption, TextInputOption } from '../../common'; + +const VERTICAL_ROTATION = 270; + +interface LabelsPanelProps { + valueAxis: ValueAxis; + setValue: VisOptionsProps['setValue']; +} + +function LabelsPanel({ valueAxis, setValue }: LabelsPanelProps) { + const rotateLabels = valueAxis.labels.rotate === VERTICAL_ROTATION; + + const setValueAxisLabels = useCallback( + (paramName: T, value: ValueAxis['labels'][T]) => + setValue('valueAxes', [ + { + ...valueAxis, + labels: { + ...valueAxis.labels, + [paramName]: value, + }, + }, + ]), + [valueAxis, setValue] + ); + + const setRotateLabels = useCallback( + (paramName: 'rotate', value: boolean) => + setValueAxisLabels(paramName, value ? VERTICAL_ROTATION : 0), + [setValueAxisLabels] + ); + + return ( + + +

+ +

+ + + + + + + + + + + + ); +} + +export { LabelsPanel }; diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/gauge.d.ts b/src/legacy/core_plugins/kbn_vislib_vis_types/public/gauge.d.ts index 49e4ae0fce62f..a34632cfcd4b9 100644 --- a/src/legacy/core_plugins/kbn_vislib_vis_types/public/gauge.d.ts +++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/gauge.d.ts @@ -19,6 +19,7 @@ import { ColorSchemas } from 'ui/vislib/components/color/colormaps'; import { Alignments, GaugeTypes } from './utils/collections'; +import { ColorsRange } from './types'; export interface GaugeVisParams { readonly type: 'gauge'; @@ -31,7 +32,7 @@ export interface GaugeVisParams { readonly orientation: 'vertical'; readonly type: 'meter'; alignment: Alignments; - colorsRange: Array<{ from?: number; to?: number }>; + colorsRange: ColorsRange; colorSchema: ColorSchemas; extendRange: boolean; invertColors: boolean; diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/heatmap.d.ts b/src/legacy/core_plugins/kbn_vislib_vis_types/public/heatmap.d.ts index 12283b83a8070..9ae2136552d6e 100644 --- a/src/legacy/core_plugins/kbn_vislib_vis_types/public/heatmap.d.ts +++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/heatmap.d.ts @@ -18,13 +18,13 @@ */ import { ColorSchemas } from 'ui/vislib/components/color/colormaps'; -import { CommonVislibParams, ValueAxis } from './types'; +import { ColorsRange, CommonVislibParams, ValueAxis } from './types'; export interface HeatmapVisParams extends CommonVislibParams { enableHover: boolean; colorSchema: ColorSchemas; colorsNumber: number | ''; - colorsRange: Array<{ from?: number; to?: number }>; + colorsRange: ColorsRange; invertColors: boolean; valueAxes: ValueAxis[]; setColorRange: boolean; diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/types.ts b/src/legacy/core_plugins/kbn_vislib_vis_types/public/types.ts index 1f8962ce316b5..19b49d864ad26 100644 --- a/src/legacy/core_plugins/kbn_vislib_vis_types/public/types.ts +++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/types.ts @@ -28,6 +28,8 @@ import { ThresholdLineStyles, } from './utils/collections'; +export type ColorsRange = Array<{ from?: number; to?: number }>; + export interface CommonVislibParams { addTooltip: boolean; legendPosition: Positions; From 2aba28988decd8befcd2e26202223134180a4bd6 Mon Sep 17 00:00:00 2001 From: sulemanof Date: Tue, 17 Sep 2019 17:09:31 +0300 Subject: [PATCH 04/15] Remove angular templates --- .../public/controls/heatmap_options.html | 290 ------------------ .../public/editors/heatmap.html | 62 ---- 2 files changed, 352 deletions(-) delete mode 100644 src/legacy/core_plugins/kbn_vislib_vis_types/public/controls/heatmap_options.html delete mode 100644 src/legacy/core_plugins/kbn_vislib_vis_types/public/editors/heatmap.html diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/controls/heatmap_options.html b/src/legacy/core_plugins/kbn_vislib_vis_types/public/controls/heatmap_options.html deleted file mode 100644 index 0eaa3477bbb11..0000000000000 --- a/src/legacy/core_plugins/kbn_vislib_vis_types/public/controls/heatmap_options.html +++ /dev/null @@ -1,290 +0,0 @@ -
-
- -
- -
-
-
- -
- -
- -
-
- -
- -
- -
-
- -
- -
- -
-
- -
- -
- -
-
- -
- -
- -
-
- -
-
-
- - - - -
- -
- -
- - - - - - - - - - - - -
- - - -
- - - - - -
- -
-

-
- - -
-
- -
-
- -
-
-
- - - - -
- -
-
- -
- -
- -
-
- -
- -
- -
-
- -
- -
- -
-
- -
-
- -
diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/editors/heatmap.html b/src/legacy/core_plugins/kbn_vislib_vis_types/public/editors/heatmap.html deleted file mode 100644 index 5380a0f0405e2..0000000000000 --- a/src/legacy/core_plugins/kbn_vislib_vis_types/public/editors/heatmap.html +++ /dev/null @@ -1,62 +0,0 @@ -
-
-
-
- -
- -
- -
-
- -
- -
- -
-
- -
- -
- -
-
-
- -
- -
-
-
- - - -
From 5a38e6c263a2d48d0e917094b7940e53e932956c Mon Sep 17 00:00:00 2001 From: sulemanof Date: Tue, 17 Sep 2019 17:51:50 +0300 Subject: [PATCH 05/15] Remove unused translations --- x-pack/plugins/translations/translations/ja-JP.json | 12 +----------- x-pack/plugins/translations/translations/zh-CN.json | 12 +----------- 2 files changed, 2 insertions(+), 22 deletions(-) diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json index 0acaac7c3c36a..ff74ca8aa7745 100644 --- a/x-pack/plugins/translations/translations/ja-JP.json +++ b/x-pack/plugins/translations/translations/ja-JP.json @@ -2559,12 +2559,9 @@ "kbnVislibVisTypes.controls.gaugeOptions.styleTitle": "スタイル", "kbnVislibVisTypes.controls.heatmapOptions.colorLabel": "色", "kbnVislibVisTypes.controls.heatmapOptions.colorsNumberLabel": "色の数", - "kbnVislibVisTypes.controls.heatmapOptions.fromLabel": "開始:", "kbnVislibVisTypes.controls.heatmapOptions.overwriteAutomaticColorLabel": "自動からーを上書きする", - "kbnVislibVisTypes.controls.heatmapOptions.requiredText": "必須:", "kbnVislibVisTypes.controls.heatmapOptions.rotateLabel": "回転", "kbnVislibVisTypes.controls.heatmapOptions.showLabelsTitle": "ラベルを表示", - "kbnVislibVisTypes.controls.heatmapOptions.toLabel": "終了:", "kbnVislibVisTypes.controls.pointSeries.categoryAxis.filterLabelsLabel": "フィルターラベル", "kbnVislibVisTypes.controls.pointSeries.categoryAxis.labelsTitle": "ラベル", "kbnVislibVisTypes.controls.pointSeries.categoryAxis.positionLabel": "配置", @@ -2644,10 +2641,8 @@ "kbnVislibVisTypes.pie.pieTitle": "パイ", "kbnVislibVisTypes.pie.segmentTitle": "スライスの分割", "kbnVislibVisTypes.pie.splitTitle": "チャートを分割", - "kbnVislibVisTypes.controls.gaugeOptions.errorText": "各範囲は前の範囲よりも大きくなければなりません。", "kbnVislibVisTypes.controls.gaugeOptions.extendRangeTooltip": "範囲をデータの最高値に広げます。", "kbnVislibVisTypes.controls.gaugeOptions.labelsTitle": "ラベル", - "kbnVislibVisTypes.controls.gaugeOptions.resetColorsButtonLabel": "色をリセット", "kbnVislibVisTypes.controls.gaugeOptions.switchWarningsTooltip": "警告のオン・オフを切り替えます。オンにすると、すべてのラベルを表示できない際に警告が表示されます。", "kbnVislibVisTypes.controls.pointSeries.gridAxis.yAxisLinesDisabledTooltip": "ヒストグラムに X 軸線は表示できません。", "kbnVislibVisTypes.controls.rangeErrorMessage": "値は {min} と {max} の間でなければなりません", @@ -2660,14 +2655,9 @@ "kbnVislibVisTypes.legendPositions.leftText": "左", "kbnVislibVisTypes.legendPositions.rightText": "右", "kbnVislibVisTypes.legendPositions.topText": "一番上", - "kbnVislibVisTypes.piet": "一番下", - "kbnVislibVisTypes.pie.editorConfig.legendPositions.leftText": "左", - "kbnVislibVisTypes.pie.editorConfig.legendPositions.rightText": "右", - "kbnVislibVisTypes.pie.editorConfig.legendPositions.topText": "一番上", "kbnVislibVisTypes.controls.gaugeOptions.autoExtendRangeLabel": "範囲を自動拡張", "kbnVislibVisTypes.controls.gaugeOptions.gaugeTypeLabel": "ゲージタイプ", "kbnVislibVisTypes.controls.gaugeOptions.percentageModeLabel": "パーセンテージモード", - "kbnVislibVisTypes.controls.gaugeOptions.reverseColorSchemaLabel": "図表を反転", "kbnVislibVisTypes.controls.gaugeOptions.showLabelsLabel": "ラベルを表示", "kbnVislibVisTypes.controls.gaugeOptions.showLegendLabel": "凡例を表示", "kbnVislibVisTypes.controls.gaugeOptions.showScaleLabel": "縮尺を表示", @@ -11587,4 +11577,4 @@ "xpack.fileUpload.fileParser.noFileProvided": "エラー、ファイルが提供されていません", "xpack.fileUpload.jsonIndexFilePicker.errorGettingIndexName": "インデックス名の取得中にエラーが発生: {errorMessage}" } -} \ No newline at end of file +} diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json index 11e0a350b6099..d1c41286c3308 100644 --- a/x-pack/plugins/translations/translations/zh-CN.json +++ b/x-pack/plugins/translations/translations/zh-CN.json @@ -2560,12 +2560,9 @@ "kbnVislibVisTypes.controls.gaugeOptions.styleTitle": "样式", "kbnVislibVisTypes.controls.heatmapOptions.colorLabel": "颜色", "kbnVislibVisTypes.controls.heatmapOptions.colorsNumberLabel": "颜色个数", - "kbnVislibVisTypes.controls.heatmapOptions.fromLabel": "从", "kbnVislibVisTypes.controls.heatmapOptions.overwriteAutomaticColorLabel": "覆盖自动配色", - "kbnVislibVisTypes.controls.heatmapOptions.requiredText": "必需：", "kbnVislibVisTypes.controls.heatmapOptions.rotateLabel": "旋转", "kbnVislibVisTypes.controls.heatmapOptions.showLabelsTitle": "显示标签", - "kbnVislibVisTypes.controls.heatmapOptions.toLabel": "到", "kbnVislibVisTypes.controls.pointSeries.categoryAxis.filterLabelsLabel": "筛选标签", "kbnVislibVisTypes.controls.pointSeries.categoryAxis.labelsTitle": "标签", "kbnVislibVisTypes.controls.pointSeries.categoryAxis.positionLabel": "位置", @@ -2645,10 +2642,8 @@ "kbnVislibVisTypes.pie.pieTitle": "饼图", "kbnVislibVisTypes.pie.segmentTitle": "拆分切片", "kbnVislibVisTypes.pie.splitTitle": "拆分图表", - "kbnVislibVisTypes.controls.gaugeOptions.errorText": "每个范围应大于前一范围。", "kbnVislibVisTypes.controls.gaugeOptions.extendRangeTooltip": "将数据范围扩展到最大值。", "kbnVislibVisTypes.controls.gaugeOptions.labelsTitle": "标签", - "kbnVislibVisTypes.controls.gaugeOptions.resetColorsButtonLabel": "重置颜色", "kbnVislibVisTypes.controls.gaugeOptions.switchWarningsTooltip": "打开/关闭警告。打开时，如果标签没有全部显示，则显示警告。", "kbnVislibVisTypes.controls.pointSeries.gridAxis.yAxisLinesDisabledTooltip": "直方图的 X 轴线无法显示。", "kbnVislibVisTypes.controls.rangeErrorMessage": "值必须是在 {min} 到 {max} 的范围内", @@ -2661,14 +2656,9 @@ "kbnVislibVisTypes.legendPositions.leftText": "左", "kbnVislibVisTypes.legendPositions.rightText": "右", "kbnVislibVisTypes.legendPositions.topText": "上", - "kbnVislibVisTypes.pie.editorConfig.legendPositions.bottomText": "下", - "kbnVislibVisTypes.pie.editorConfig.legendPositions.leftText": "左", - "kbnVislibVisTypes.pie.editorConfig.legendPositions.rightText": "右", - "kbnVislibVisTypes.pie.editorConfig.legendPositions.topText": "上", "kbnVislibVisTypes.controls.gaugeOptions.autoExtendRangeLabel": "自动扩展范围", "kbnVislibVisTypes.controls.gaugeOptions.gaugeTypeLabel": "仪表类型", "kbnVislibVisTypes.controls.gaugeOptions.percentageModeLabel": "百分比模式", - "kbnVislibVisTypes.controls.gaugeOptions.reverseColorSchemaLabel": "反转模式", "kbnVislibVisTypes.controls.gaugeOptions.showLabelsLabel": "显示标签", "kbnVislibVisTypes.controls.gaugeOptions.showLegendLabel": "显示图例", "kbnVislibVisTypes.controls.gaugeOptions.showScaleLabel": "显示比例", @@ -11588,4 +11578,4 @@ "xpack.fileUpload.fileParser.noFileProvided": "错误，未提供任何文件", "xpack.fileUpload.jsonIndexFilePicker.errorGettingIndexName": "检索索引名称时出错：{errorMessage}" } -} \ No newline at end of file +} From d22fe0e988cb431e56669aa4b5e097b604239231 Mon Sep 17 00:00:00 2001 From: sulemanof Date: Wed, 18 Sep 2019 10:58:55 +0300 Subject: [PATCH 06/15] Fix functional tests --- .../public/components/common/color_ranges.tsx | 20 +++---- .../public/components/common/color_schema.tsx | 19 +++--- .../public/components/common/select.tsx | 6 +- .../components/options/gauge/ranges_panel.tsx | 5 +- .../components/options/heatmap/index.tsx | 5 +- .../kbn_vislib_vis_types/public/gauge.d.ts | 58 +++++++++---------- .../kbn_vislib_vis_types/public/heatmap.d.ts | 12 ++-- .../kbn_vislib_vis_types/public/types.ts | 8 ++- .../vis/editors/default/controls/ranges.tsx | 6 +- .../vislib/components/color/colormaps.ts | 5 ++ .../apps/visualize/_heatmap_chart.js | 10 ---- .../functional/page_objects/visualize_page.js | 17 +----- 12 files changed, 80 insertions(+), 91 deletions(-) diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/common/color_ranges.tsx b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/common/color_ranges.tsx index cc68961226492..276e765ae7fe6 100644 --- a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/common/color_ranges.tsx +++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/common/color_ranges.tsx @@ -21,19 +21,18 @@ import React, { useCallback } from 'react'; import { last } from 'lodash'; import { i18n } from '@kbn/i18n'; -import { RangesParamEditor } from 'ui/vis/editors/default/controls/ranges'; -import { ColorsRange } from '../../types'; +import { RangeValues, RangesParamEditor } from 'ui/vis/editors/default/controls/ranges'; interface ColorRangesProps { - dataTestSubj?: string; - colorsRange: ColorsRange; - setValue(paramName: string, value: ColorsRange): void; + 'data-test-subj'?: string; + colorsRange: RangeValues[]; + setValue(paramName: string, value: RangeValues[]): void; setValidity?(isValid: boolean): void; setTouched?(isTouched: boolean): void; } function ColorRanges({ - dataTestSubj, + 'data-test-subj': dataTestSubj, colorsRange, setValue, setValidity, @@ -58,14 +57,13 @@ function ColorRanges({ [colorsRange] ); - const setColorRanges = useCallback( - (value: ColorRangesProps['colorsRange']) => setValue('colorsRange', value), - [setValue] - ); + const setColorRanges = useCallback((value: RangeValues[]) => setValue('colorsRange', value), [ + setValue, + ]); return ( ( + paramName: T, + value: ColorSchemaVislibParams[T] +) => void; + +interface ColorSchemaOptionsProps extends ColorSchemaVislibParams { disabled?: boolean; - colorSchema: ColorSchemas; - colorSchemas: Array<{ - value: ColorSchemas; - text: string; - }>; - invertColors: boolean; + colorSchemas: ColorSchema[]; uiState: VisOptionsProps['uiState']; - setValue(...props: any): void; + setValue: SetColorSchemaOptionsValue; } function ColorSchemaOptions({ diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/common/select.tsx b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/common/select.tsx index 79e9e6529267c..45b1bdd44f460 100644 --- a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/common/select.tsx +++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/common/select.tsx @@ -17,7 +17,7 @@ * under the License. */ -import React from 'react'; +import React, { useMemo } from 'react'; import { EuiFormRow, EuiSelect } from '@elastic/eui'; interface SelectOptionProps { @@ -45,6 +45,8 @@ function SelectOption) { + const availableOptions = useMemo(() => [emptyValue, ...options], [options]); + return ( setValue(paramName, ev.target.value as ValidParamValues)} fullWidth={true} diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/gauge/ranges_panel.tsx b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/gauge/ranges_panel.tsx index 02def23621fac..123518849dd8c 100644 --- a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/gauge/ranges_panel.tsx +++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/gauge/ranges_panel.tsx @@ -23,6 +23,7 @@ import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n/react'; import { ColorRanges, ColorSchemaOptions, SwitchOption } from '../../common'; +import { SetColorSchemaOptionsValue } from '../../common/color_schema'; import { GaugeOptionsInternalProps } from '.'; function RangesPanel({ @@ -47,7 +48,7 @@ function RangesPanel({ ) { colorSchemas={vis.type.editorConfig.collections.colorSchemas} invertColors={stateParams.invertColors} uiState={uiState} - setValue={setValue} + setValue={setValue as SetColorSchemaOptionsValue} /> @@ -168,7 +169,7 @@ function HeatmapOptions(props: VisOptionsProps) { <> ; - export interface CommonVislibParams { addTooltip: boolean; legendPosition: Positions; } +export interface ColorSchemaVislibParams { + colorSchema: ColorSchemas; + invertColors: boolean; +} + interface Labels { color: string; filter: boolean; diff --git a/src/legacy/ui/public/vis/editors/default/controls/ranges.tsx b/src/legacy/ui/public/vis/editors/default/controls/ranges.tsx index 92b61665501fd..2b551a80c2479 100644 --- a/src/legacy/ui/public/vis/editors/default/controls/ranges.tsx +++ b/src/legacy/ui/public/vis/editors/default/controls/ranges.tsx @@ -40,7 +40,7 @@ const TO_PLACEHOLDER = '+\u221E'; const generateId = htmlIdGenerator(); const isEmpty = (value: any) => value === undefined || value === null; -interface RangeValues { +export interface RangeValues { from?: number; to?: number; } @@ -50,7 +50,7 @@ interface RangeValuesModel extends RangeValues { } interface RangesParamEditorProps { - dataTestSubj?: string; + 'data-test-subj'?: string; error?: React.ReactNode; value?: RangeValues[]; hidePlaceholders?: boolean; @@ -62,8 +62,8 @@ interface RangesParamEditorProps { } function RangesParamEditor({ + 'data-test-subj': dataTestSubj = 'range', addRangeValues, - dataTestSubj = 'range', error, value = [], hidePlaceholders, diff --git a/src/legacy/ui/public/vislib/components/color/colormaps.ts b/src/legacy/ui/public/vislib/components/color/colormaps.ts index e58a48de1b133..fed32c767b2c3 100644 --- a/src/legacy/ui/public/vislib/components/color/colormaps.ts +++ b/src/legacy/ui/public/vislib/components/color/colormaps.ts @@ -28,6 +28,11 @@ export enum ColorSchemas { GreenToRed = 'Green to Red', } +export interface ColorSchema { + value: ColorSchemas; + text: string; +} + export const vislibColorMaps = { // Sequential [ColorSchemas.Blues]: { diff --git a/test/functional/apps/visualize/_heatmap_chart.js b/test/functional/apps/visualize/_heatmap_chart.js index 7f78b8533c3f5..96899711c650e 100644 --- a/test/functional/apps/visualize/_heatmap_chart.js +++ b/test/functional/apps/visualize/_heatmap_chart.js @@ -114,22 +114,12 @@ export default function ({ getService, getPageObjects }) { await PageObjects.visualize.clickOptionsTab(); await PageObjects.visualize.clickEnableCustomRanges(); await PageObjects.visualize.clickAddRange(); - await PageObjects.visualize.isCustomRangeTableShown(); - await PageObjects.visualize.addCustomRange(0, 100); await PageObjects.visualize.clickAddRange(); - await PageObjects.visualize.addCustomRange(100, 200); await PageObjects.visualize.clickAddRange(); - await PageObjects.visualize.addCustomRange(200, 300); await PageObjects.visualize.clickAddRange(); - await PageObjects.visualize.addCustomRange(300, 400); await PageObjects.visualize.clickAddRange(); - await PageObjects.visualize.addCustomRange(400, 500); await PageObjects.visualize.clickAddRange(); - await PageObjects.visualize.addCustomRange(500, 600); await PageObjects.visualize.clickAddRange(); - await PageObjects.visualize.addCustomRange(600, 700); - await PageObjects.visualize.clickAddRange(); - await PageObjects.visualize.addCustomRange(700, 800); await PageObjects.visualize.waitForVisualizationRenderingStabilized(); await PageObjects.visualize.clickGo(); const legends = await PageObjects.visualize.getLegendEntries(); diff --git a/test/functional/page_objects/visualize_page.js b/test/functional/page_objects/visualize_page.js index a9e85ecf5c667..9b84d91ed8e1d 100644 --- a/test/functional/page_objects/visualize_page.js +++ b/test/functional/page_objects/visualize_page.js @@ -633,7 +633,7 @@ export function VisualizePageProvider({ getService, getPageObjects, updateBaseli async changeHeatmapColorNumbers(value = 6) { const input = await testSubjects.find(`heatmapColorsNumber`); - await input.clearValue(); + await input.clearValueWithKeyboard(); await input.type(`${value}`); } @@ -653,21 +653,6 @@ export function VisualizePageProvider({ getService, getPageObjects, updateBaseli await testSubjects.click(`heatmapColorRange__addRangeButton`); } - async isCustomRangeTableShown() { - await testSubjects.exists('heatmapColorRange'); - } - - async addCustomRange(from, to) { - const table = await testSubjects.find('heatmapColorRange'); - const lastRow = await table.findByCssSelector('tr:last-child'); - const fromCell = await lastRow.findByCssSelector('td:first-child input'); - await fromCell.clearValue(); - await fromCell.type(`${from}`, { charByChar: true }); - const toCell = await lastRow.findByCssSelector('td:nth-child(2) input'); - await toCell.clearValue(); - await toCell.type(`${to}`, { charByChar: true }); - } - async clickYAxisOptions(axisId) { await testSubjects.click(`toggleYAxisOptions-${axisId}`); } From 16afb0d53945df971f8647a3c6c2ad3b5be5f3bd Mon Sep 17 00:00:00 2001 From: sulemanof Date: Wed, 18 Sep 2019 17:52:25 +0300 Subject: [PATCH 07/15] Fix validation --- .../public/components/options/heatmap/index.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/heatmap/index.tsx b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/heatmap/index.tsx index 0a9302cbc1f53..9788f459a2e97 100644 --- a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/heatmap/index.tsx +++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/heatmap/index.tsx @@ -17,7 +17,7 @@ * under the License. */ -import React, { useCallback, useEffect } from 'react'; +import React, { useCallback, useEffect, useState } from 'react'; import { EuiPanel, EuiSpacer, EuiTitle } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n/react'; @@ -39,8 +39,8 @@ import { LabelsPanel } from './labels_panel'; function HeatmapOptions(props: VisOptionsProps) { const { stateParams, vis, uiState, setValue, setValidity, setTouched } = props; const [valueAxis] = stateParams.valueAxes; - const isColorsNumberInvalid = - !stateParams.setColorRange && (stateParams.colorsNumber < 2 || stateParams.colorsNumber > 10); + const isColorsNumberInvalid = stateParams.colorsNumber < 2 || stateParams.colorsNumber > 10; + const [isColorRangesValid, setIsColorRangesValid] = useState(false); const setValueAxisScale = useCallback( (paramName: T, value: ValueAxis['scale'][T]) => @@ -57,8 +57,8 @@ function HeatmapOptions(props: VisOptionsProps) { ); useEffect(() => { - setValidity(!isColorsNumberInvalid); - }, [isColorsNumberInvalid, setValidity]); + setValidity(stateParams.setColorRange ? isColorRangesValid : !isColorsNumberInvalid); + }, [stateParams.setColorRange, isColorRangesValid, isColorsNumberInvalid, setValidity]); return ( <> @@ -173,7 +173,7 @@ function HeatmapOptions(props: VisOptionsProps) { colorsRange={stateParams.colorsRange} setValue={setValue} setTouched={setTouched} - setValidity={setValidity} + setValidity={setIsColorRangesValid} /> )} From f99b9006077d9586eeca4b077b326b9a1e7ce30d Mon Sep 17 00:00:00 2001 From: sulemanof Date: Thu, 19 Sep 2019 15:48:25 +0300 Subject: [PATCH 08/15] Fix UI details --- .../components/options/heatmap/index.tsx | 54 +++++++++---------- .../options/heatmap/labels_panel.tsx | 29 ++++++---- .../translations/translations/ja-JP.json | 3 +- .../translations/translations/zh-CN.json | 3 +- 4 files changed, 49 insertions(+), 40 deletions(-) diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/heatmap/index.tsx b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/heatmap/index.tsx index 9788f459a2e97..d3f960ce71f61 100644 --- a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/heatmap/index.tsx +++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/heatmap/index.tsx @@ -77,11 +77,14 @@ function HeatmapOptions(props: VisOptionsProps) { @@ -127,33 +130,30 @@ function HeatmapOptions(props: VisOptionsProps) { setValue={setValueAxisScale} /> - {!stateParams.setColorRange && ( - <> - - + + - - - )} + setValueAxisLabels('color', value), [setValueAxisLabels]); + return ( @@ -101,15 +110,17 @@ function LabelsPanel({ valueAxis, setValue }: LabelsPanelProps) { setValue={setValueAxisLabels} /> - + > + + ); } diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json index 41aa6ccebcd80..7d24fe95c8b5f 100644 --- a/x-pack/plugins/translations/translations/ja-JP.json +++ b/x-pack/plugins/translations/translations/ja-JP.json @@ -2587,7 +2587,6 @@ "kbnVislibVisTypes.controls.pointSeries.valueAxes.showLabel": "表示", "kbnVislibVisTypes.controls.pointSeries.valueAxes.titleLabel": "タイトル", "kbnVislibVisTypes.controls.pointSeries.valueAxes.yAxisTitle": "Y 軸", - "kbnVislibVisTypes.editors.heatmap.highlightLabel": "ハイライト", "kbnVislibVisTypes.editors.pie.donutLabel": "ドーナッツ", "kbnVislibVisTypes.editors.pointSeries.currentTimeMarkerLabel": "現在時刻マーカー", "kbnVislibVisTypes.editors.pointSeries.orderBucketsBySumLabel": "バケットを合計で並べ替え", @@ -11569,4 +11568,4 @@ "xpack.fileUpload.fileParser.noFileProvided": "エラー、ファイルが提供されていません", "xpack.fileUpload.jsonIndexFilePicker.errorGettingIndexName": "インデックス名の取得中にエラーが発生: {errorMessage}" } -} \ No newline at end of file +} diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json index a3a4092635e8a..fae352eec090e 100644 --- a/x-pack/plugins/translations/translations/zh-CN.json +++ b/x-pack/plugins/translations/translations/zh-CN.json @@ -2588,7 +2588,6 @@ "kbnVislibVisTypes.controls.pointSeries.valueAxes.showLabel": "显示", "kbnVislibVisTypes.controls.pointSeries.valueAxes.titleLabel": "标题", "kbnVislibVisTypes.controls.pointSeries.valueAxes.yAxisTitle": "Y 轴", - "kbnVislibVisTypes.editors.heatmap.highlightLabel": "高亮显示", "kbnVislibVisTypes.editors.pie.donutLabel": "圆环图", "kbnVislibVisTypes.editors.pointSeries.currentTimeMarkerLabel": "当前时间标记", "kbnVislibVisTypes.editors.pointSeries.orderBucketsBySumLabel": "按总计值排序存储桶", @@ -11571,4 +11570,4 @@ "xpack.fileUpload.fileParser.noFileProvided": "错误，未提供任何文件", "xpack.fileUpload.jsonIndexFilePicker.errorGettingIndexName": "检索索引名称时出错：{errorMessage}" } -} \ No newline at end of file +} From 345fc4c0a6a78ea00ae5fa9b3a2d459409cf40c9 Mon Sep 17 00:00:00 2001 From: sulemanof Date: Thu, 19 Sep 2019 16:01:31 +0300 Subject: [PATCH 09/15] Compress color picker --- .../public/components/options/heatmap/labels_panel.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/heatmap/labels_panel.tsx b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/heatmap/labels_panel.tsx index 6ef822a403a9c..e5d418c52601b 100644 --- a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/heatmap/labels_panel.tsx +++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/heatmap/labels_panel.tsx @@ -111,11 +111,15 @@ function LabelsPanel({ valueAxis, setValue }: LabelsPanelProps) { /> Date: Thu, 19 Sep 2019 16:19:13 +0300 Subject: [PATCH 10/15] Change highlight label --- .../public/components/options/heatmap/index.tsx | 5 +++-- .../components/options/heatmap/labels_panel.tsx | 11 ++--------- 2 files changed, 5 insertions(+), 11 deletions(-) diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/heatmap/index.tsx b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/heatmap/index.tsx index d3f960ce71f61..64c980bee3863 100644 --- a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/heatmap/index.tsx +++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/heatmap/index.tsx @@ -77,13 +77,14 @@ function HeatmapOptions(props: VisOptionsProps) { diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/heatmap/labels_panel.tsx b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/heatmap/labels_panel.tsx index e5d418c52601b..75ad85dcc4e2f 100644 --- a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/heatmap/labels_panel.tsx +++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/heatmap/labels_panel.tsx @@ -17,15 +17,8 @@ * under the License. */ -import React, { useCallback, useMemo } from 'react'; -import { - EuiColorPicker, - EuiFormRow, - EuiPanel, - EuiSpacer, - EuiTitle, - isValidHex, -} from '@elastic/eui'; +import React, { useCallback } from 'react'; +import { EuiColorPicker, EuiFormRow, EuiPanel, EuiSpacer, EuiTitle } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n/react'; From 9562d7289dbdc2b4857c9bdca3059017a9d31d1d Mon Sep 17 00:00:00 2001 From: sulemanof Date: Fri, 20 Sep 2019 18:18:01 +0300 Subject: [PATCH 11/15] Improve types --- .../kbn_vislib_vis_types/public/gauge.d.ts | 2 -- .../kbn_vislib_vis_types/public/gauge.js | 16 +++++++----- .../kbn_vislib_vis_types/public/goal.js | 14 +++++----- .../kbn_vislib_vis_types/public/heatmap.d.ts | 2 ++ .../kbn_vislib_vis_types/public/heatmap.js | 20 +++++++------- .../kbn_vislib_vis_types/public/pie.d.ts | 1 + .../kbn_vislib_vis_types/public/pie.js | 11 ++++---- .../kbn_vislib_vis_types/public/types.ts | 5 +++- .../public/utils/collections.ts | 5 ++++ .../vislib/visualizations/time_marker.d.ts | 26 +++++++++++++++++++ 10 files changed, 72 insertions(+), 30 deletions(-) create mode 100644 src/legacy/ui/public/vislib/visualizations/time_marker.d.ts diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/gauge.d.ts b/src/legacy/core_plugins/kbn_vislib_vis_types/public/gauge.d.ts index 1f0b7eba97fac..4206f7376decb 100644 --- a/src/legacy/core_plugins/kbn_vislib_vis_types/public/gauge.d.ts +++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/gauge.d.ts @@ -33,8 +33,6 @@ interface Gauge extends ColorSchemaVislibParams { labels: { show: boolean; }; - minAngle?: number; - maxAngle?: number; percentageMode: boolean; scale: { show: boolean; diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/gauge.js b/src/legacy/core_plugins/kbn_vislib_vis_types/public/gauge.js index 31f2f09291223..da960d27ea7e1 100644 --- a/src/legacy/core_plugins/kbn_vislib_vis_types/public/gauge.js +++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/gauge.js @@ -20,8 +20,10 @@ import { i18n } from '@kbn/i18n'; import { visFactory } from 'ui/vis/vis_factory'; 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 } from './utils/collections'; +import { getGaugeCollections, Alignments, GaugeColorModes, GaugeTypes } from './utils/collections'; import { vislibVisController } from './controller'; export default function GaugeVisType() { @@ -39,15 +41,15 @@ export default function GaugeVisType() { addLegend: true, isDisplayWarning: false, gauge: { - alignment: 'automatic', + alignment: Alignments.AUTOMATIC, extendRange: true, percentageMode: false, - gaugeType: 'Arc', + gaugeType: GaugeTypes.ARC, gaugeStyle: 'Full', backStyle: 'Full', orientation: 'vertical', - colorSchema: 'Green to Red', - gaugeColorMode: 'Labels', + colorSchema: ColorSchemas.GreenToRed, + gaugeColorMode: GaugeColorModes.LABELS, colorsRange: [ { from: 0, to: 50 }, { from: 50, to: 75 }, @@ -84,7 +86,7 @@ export default function GaugeVisType() { optionsTemplate: GaugeOptions, schemas: new Schemas([ { - group: 'metrics', + group: AggGroupNames.Metrics, name: 'metric', title: i18n.translate('kbnVislibVisTypes.gauge.metricTitle', { defaultMessage: 'Metric' }), min: 1, @@ -96,7 +98,7 @@ export default function GaugeVisType() { ] }, { - group: 'buckets', + group: AggGroupNames.Buckets, name: 'group', title: i18n.translate('kbnVislibVisTypes.gauge.groupTitle', { defaultMessage: 'Split group' }), min: 0, diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/goal.js b/src/legacy/core_plugins/kbn_vislib_vis_types/public/goal.js index a46bbf100d41d..0ee5e2304701d 100644 --- a/src/legacy/core_plugins/kbn_vislib_vis_types/public/goal.js +++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/goal.js @@ -19,8 +19,10 @@ import { i18n } from '@kbn/i18n'; 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 } from './utils/collections'; +import { getGaugeCollections, GaugeTypes, GaugeColorModes } from './utils/collections'; import { vislibVisController } from './controller'; import { visFactory } from '../../../ui/public/vis/vis_factory'; @@ -44,13 +46,13 @@ export default function GoalVisType() { verticalSplit: false, autoExtend: false, percentageMode: true, - gaugeType: 'Arc', + gaugeType: GaugeTypes.ARC, gaugeStyle: 'Full', backStyle: 'Full', orientation: 'vertical', useRanges: false, - colorSchema: 'Green to Red', - gaugeColorMode: 'None', + colorSchema: ColorSchemas.GreenToRed, + gaugeColorMode: GaugeColorModes.NONE, colorsRange: [ { from: 0, to: 10000 } ], @@ -81,7 +83,7 @@ export default function GoalVisType() { optionsTemplate: GaugeOptions, schemas: new Schemas([ { - group: 'metrics', + group: AggGroupNames.Metrics, name: 'metric', title: i18n.translate('kbnVislibVisTypes.goal.metricTitle', { defaultMessage: 'Metric' }), min: 1, @@ -93,7 +95,7 @@ export default function GoalVisType() { ] }, { - group: 'buckets', + group: AggGroupNames.Buckets, name: 'group', title: i18n.translate('kbnVislibVisTypes.goal.groupTitle', { defaultMessage: 'Split group' }), min: 0, diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/heatmap.d.ts b/src/legacy/core_plugins/kbn_vislib_vis_types/public/heatmap.d.ts index 822ab0ff5e43f..13c676854ead2 100644 --- a/src/legacy/core_plugins/kbn_vislib_vis_types/public/heatmap.d.ts +++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/heatmap.d.ts @@ -19,6 +19,7 @@ import { ColorSchemas } from 'ui/vislib/components/color/colormaps'; import { RangeValues } from 'ui/vis/editors/default/controls/ranges'; +import { TimeMarker } from 'ui/vislib/visualizations/time_marker'; import { CommonVislibParams, ColorSchemaVislibParams, ValueAxis } from './types'; import { Positions } from './utils/collections'; @@ -31,4 +32,5 @@ export interface HeatmapVisParams extends CommonVislibParams, ColorSchemaVislibP valueAxes: ValueAxis[]; setColorRange: boolean; percentageMode: boolean; + times: TimeMarker[]; } diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/heatmap.js b/src/legacy/core_plugins/kbn_vislib_vis_types/public/heatmap.js index 146480d124b42..207f80996b5a7 100644 --- a/src/legacy/core_plugins/kbn_vislib_vis_types/public/heatmap.js +++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/heatmap.js @@ -20,7 +20,9 @@ import { visFactory } from '../../../ui/public/vis/vis_factory'; import { i18n } from '@kbn/i18n'; import { Schemas } from 'ui/vis/editors/default/schemas'; -import { getHeatmapCollections } from './utils/collections'; +import { AggGroupNames } from 'ui/vis/editors/default'; +import { ColorSchemas } from 'ui/vislib/components/color/colormaps'; +import { AxisTypes, getHeatmapCollections, Positions, ScaleTypes } from './utils/collections'; import { HeatmapOptions } from './components/options'; import { vislibVisController } from './controller'; @@ -38,10 +40,10 @@ export default function HeatmapVisType() { addTooltip: true, addLegend: true, enableHover: false, - legendPosition: 'right', + legendPosition: Positions.RIGHT, times: [], colorsNumber: 4, - colorSchema: 'Greens', + colorSchema: ColorSchemas.Greens, setColorRange: false, colorsRange: [], invertColors: false, @@ -49,9 +51,9 @@ export default function HeatmapVisType() { valueAxes: [{ show: false, id: 'ValueAxis-1', - type: 'value', + type: AxisTypes.VALUE, scale: { - type: 'linear', + type: ScaleTypes.LINEAR, defaultYExtents: false, }, labels: { @@ -71,7 +73,7 @@ export default function HeatmapVisType() { optionsTemplate: HeatmapOptions, schemas: new Schemas([ { - group: 'metrics', + group: AggGroupNames.Metrics, name: 'metric', title: i18n.translate('kbnVislibVisTypes.heatmap.metricTitle', { defaultMessage: 'Value' }), min: 1, @@ -82,7 +84,7 @@ export default function HeatmapVisType() { ] }, { - group: 'buckets', + group: AggGroupNames.Buckets, name: 'segment', title: i18n.translate('kbnVislibVisTypes.heatmap.segmentTitle', { defaultMessage: 'X-axis' }), min: 0, @@ -90,7 +92,7 @@ export default function HeatmapVisType() { aggFilter: ['!geohash_grid', '!geotile_grid', '!filter'] }, { - group: 'buckets', + group: AggGroupNames.Buckets, name: 'group', title: i18n.translate('kbnVislibVisTypes.heatmap.groupTitle', { defaultMessage: 'Y-axis' }), min: 0, @@ -98,7 +100,7 @@ export default function HeatmapVisType() { aggFilter: ['!geohash_grid', '!geotile_grid', '!filter'] }, { - group: 'buckets', + group: AggGroupNames.Buckets, name: 'split', title: i18n.translate('kbnVislibVisTypes.heatmap.splitTitle', { defaultMessage: 'Split chart' }), min: 0, diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/pie.d.ts b/src/legacy/core_plugins/kbn_vislib_vis_types/public/pie.d.ts index 89dbe03b2ea27..bf55abfe8161a 100644 --- a/src/legacy/core_plugins/kbn_vislib_vis_types/public/pie.d.ts +++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/pie.d.ts @@ -20,6 +20,7 @@ import { CommonVislibParams } from './types'; export interface PieVisParams extends CommonVislibParams { + type: 'pie'; addLegend: boolean; isDonut: boolean; labels: { diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/pie.js b/src/legacy/core_plugins/kbn_vislib_vis_types/public/pie.js index 4a0a13fa9ffb2..8a374f21dcb09 100644 --- a/src/legacy/core_plugins/kbn_vislib_vis_types/public/pie.js +++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/pie.js @@ -20,8 +20,9 @@ import { visFactory } from '../../../ui/public/vis/vis_factory'; import { i18n } from '@kbn/i18n'; import { Schemas } from 'ui/vis/editors/default/schemas'; +import { AggGroupNames } from 'ui/vis/editors/default'; import { PieOptions } from './components/options'; -import { getPositions } from './utils/collections'; +import { getPositions, Positions } from './utils/collections'; import { vislibVisController } from './controller'; export default function HistogramVisType() { @@ -37,7 +38,7 @@ export default function HistogramVisType() { type: 'pie', addTooltip: true, addLegend: true, - legendPosition: 'right', + legendPosition: Positions.RIGHT, isDonut: true, labels: { show: false, @@ -54,7 +55,7 @@ export default function HistogramVisType() { optionsTemplate: PieOptions, schemas: new Schemas([ { - group: 'metrics', + group: AggGroupNames.Metrics, name: 'metric', title: i18n.translate('kbnVislibVisTypes.pie.metricTitle', { defaultMessage: 'Slice size' }), min: 1, @@ -65,7 +66,7 @@ export default function HistogramVisType() { ] }, { - group: 'buckets', + group: AggGroupNames.Buckets, name: 'segment', title: i18n.translate('kbnVislibVisTypes.pie.segmentTitle', { defaultMessage: 'Split slices' }), min: 0, @@ -73,7 +74,7 @@ export default function HistogramVisType() { aggFilter: ['!geohash_grid', '!geotile_grid', '!filter'] }, { - group: 'buckets', + group: AggGroupNames.Buckets, name: 'split', title: i18n.translate('kbnVislibVisTypes.pie.splitTitle', { defaultMessage: 'Split chart' }), mustBeFirst: true, diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/types.ts b/src/legacy/core_plugins/kbn_vislib_vis_types/public/types.ts index 88a3613d3131f..2b872fbd6c86c 100644 --- a/src/legacy/core_plugins/kbn_vislib_vis_types/public/types.ts +++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/types.ts @@ -18,11 +18,13 @@ */ import { ColorSchemas } from 'ui/vislib/components/color/colormaps'; +import { TimeMarker } from 'ui/vislib/visualizations/time_marker'; import { Positions, ChartModes, ChartTypes, AxisModes, + AxisTypes, InterpolationModes, Rotates, ScaleTypes, @@ -74,7 +76,7 @@ export interface Axis { show: boolean; style: object; title: { text: string }; - type: string; + type: AxisTypes; } export interface ValueAxis extends Axis { @@ -105,4 +107,5 @@ export interface BasicVislibParams extends CommonVislibParams { valueAxis?: string; }; seriesParams: SeriesParam[]; + times: TimeMarker[]; } diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/utils/collections.ts b/src/legacy/core_plugins/kbn_vislib_vis_types/public/utils/collections.ts index 3a4caeed70370..f47c62e8b0fd2 100644 --- a/src/legacy/core_plugins/kbn_vislib_vis_types/public/utils/collections.ts +++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/utils/collections.ts @@ -253,6 +253,11 @@ export enum GaugeTypes { CIRCLE = 'Circle', } +export enum GaugeColorModes { + LABELS = 'Labels', + NONE = 'None', +} + const getGaugeTypes = () => [ { text: i18n.translate('kbnVislibVisTypes.gauge.gaugeTypes.arcText', { diff --git a/src/legacy/ui/public/vislib/visualizations/time_marker.d.ts b/src/legacy/ui/public/vislib/visualizations/time_marker.d.ts new file mode 100644 index 0000000000000..e25dca58eba8d --- /dev/null +++ b/src/legacy/ui/public/vislib/visualizations/time_marker.d.ts @@ -0,0 +1,26 @@ +/* + * 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. + */ + +export interface TimeMarker { + time: string; + class?: string; + color?: string; + opacity?: number; + width?: number; +} From 75c266b28970e8f10a1ca2cd4c8f2caa448b7d26 Mon Sep 17 00:00:00 2001 From: sulemanof Date: Wed, 25 Sep 2019 16:44:49 +0300 Subject: [PATCH 12/15] Fix comments --- .../public/components/common/color_schema.tsx | 4 ++-- .../public/components/options/heatmap/index.tsx | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/common/color_schema.tsx b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/common/color_schema.tsx index d366b49ee560a..58b98ed8e4058 100644 --- a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/common/color_schema.tsx +++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/common/color_schema.tsx @@ -48,7 +48,7 @@ function ColorSchemaOptions({ uiState, setValue, }: ColorSchemaOptionsProps) { - const [isCustomColors, setIsCustomColors] = useState(false); + const [isCustomColors, setIsCustomColors] = useState(() => !!uiState.get('vis.colors')); useEffect(() => { uiState.on('colorChanged', () => { @@ -79,7 +79,7 @@ function ColorSchemaOptions({ helpText={i18n.translate( 'kbnVislibVisTypes.controls.colorSchema.howToChangeColorsDescription', { - defaultMessage: 'Note: colors can be changed in the legend.', + defaultMessage: 'Individual colors can be changed in the legend.', } )} label={i18n.translate('kbnVislibVisTypes.controls.colorSchema.colorSchemaLabel', { diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/heatmap/index.tsx b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/heatmap/index.tsx index 64c980bee3863..e59c826420451 100644 --- a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/heatmap/index.tsx +++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/heatmap/index.tsx @@ -137,7 +137,7 @@ function HeatmapOptions(props: VisOptionsProps) { defaultMessage: 'Percentage mode', })} paramName="percentageMode" - value={stateParams.percentageMode} + value={stateParams.setColorRange ? false : stateParams.percentageMode} setValue={setValue} /> From a7c1f96bbe6f25a950b3149ac7494915fa00850c Mon Sep 17 00:00:00 2001 From: sulemanof Date: Thu, 26 Sep 2019 13:24:29 +0300 Subject: [PATCH 13/15] Replace headings h2 with h3 --- .../public/components/options/heatmap/index.tsx | 8 ++++---- .../public/components/options/heatmap/labels_panel.tsx | 4 ++-- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/heatmap/index.tsx b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/heatmap/index.tsx index e59c826420451..df547265e4fdc 100644 --- a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/heatmap/index.tsx +++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/heatmap/index.tsx @@ -64,12 +64,12 @@ function HeatmapOptions(props: VisOptionsProps) { <> -

+

-

+ @@ -93,12 +93,12 @@ function HeatmapOptions(props: VisOptionsProps) { -

+

-

+ diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/heatmap/labels_panel.tsx b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/heatmap/labels_panel.tsx index 75ad85dcc4e2f..c0e9a70e8b11e 100644 --- a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/heatmap/labels_panel.tsx +++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/heatmap/labels_panel.tsx @@ -62,12 +62,12 @@ function LabelsPanel({ valueAxis, setValue }: LabelsPanelProps) { return ( -

+

-

+ From 50eaf23e7f1bbb624965c8510584a224d80e5824 Mon Sep 17 00:00:00 2001 From: sulemanof Date: Thu, 26 Sep 2019 14:09:15 +0300 Subject: [PATCH 14/15] Add functional tests --- test/functional/apps/visualize/_heatmap_chart.js | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/test/functional/apps/visualize/_heatmap_chart.js b/test/functional/apps/visualize/_heatmap_chart.js index 96899711c650e..43f363e3bc7a5 100644 --- a/test/functional/apps/visualize/_heatmap_chart.js +++ b/test/functional/apps/visualize/_heatmap_chart.js @@ -22,6 +22,7 @@ import expect from '@kbn/expect'; export default function ({ getService, getPageObjects }) { const log = getService('log'); const inspector = getService('inspector'); + const testSubjects = getService('testSubjects'); const PageObjects = getPageObjects(['common', 'visualize', 'timePicker']); describe('heatmap chart', function indexPatternCreation() { @@ -120,6 +121,13 @@ export default function ({ getService, getPageObjects }) { await PageObjects.visualize.clickAddRange(); await PageObjects.visualize.clickAddRange(); await PageObjects.visualize.clickAddRange(); + + log.debug('customize 2 last ranges'); + await testSubjects.setValue('heatmapColorRange6__from', '650'); + await testSubjects.setValue('heatmapColorRange6__to', '720'); + await testSubjects.setValue('heatmapColorRange7__from', '800'); + await testSubjects.setValue('heatmapColorRange7__to', '905'); + await PageObjects.visualize.waitForVisualizationRenderingStabilized(); await PageObjects.visualize.clickGo(); const legends = await PageObjects.visualize.getLegendEntries(); @@ -130,8 +138,8 @@ export default function ({ getService, getPageObjects }) { '300 - 400', '400 - 500', '500 - 600', - '600 - 700', - '700 - 800', + '650 - 720', + '800 - 905', ]; expect(legends).to.eql(expectedLegends); }); From ea0d8972ec30603648ab3b579de77c15e5bb5416 Mon Sep 17 00:00:00 2001 From: sulemanof Date: Thu, 26 Sep 2019 16:24:20 +0300 Subject: [PATCH 15/15] Create setCustomRangeByIndex --- test/functional/apps/visualize/_heatmap_chart.js | 7 ++----- test/functional/page_objects/visualize_page.js | 5 +++++ 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/test/functional/apps/visualize/_heatmap_chart.js b/test/functional/apps/visualize/_heatmap_chart.js index 43f363e3bc7a5..ac48f78b5dde7 100644 --- a/test/functional/apps/visualize/_heatmap_chart.js +++ b/test/functional/apps/visualize/_heatmap_chart.js @@ -22,7 +22,6 @@ import expect from '@kbn/expect'; export default function ({ getService, getPageObjects }) { const log = getService('log'); const inspector = getService('inspector'); - const testSubjects = getService('testSubjects'); const PageObjects = getPageObjects(['common', 'visualize', 'timePicker']); describe('heatmap chart', function indexPatternCreation() { @@ -123,10 +122,8 @@ export default function ({ getService, getPageObjects }) { await PageObjects.visualize.clickAddRange(); log.debug('customize 2 last ranges'); - await testSubjects.setValue('heatmapColorRange6__from', '650'); - await testSubjects.setValue('heatmapColorRange6__to', '720'); - await testSubjects.setValue('heatmapColorRange7__from', '800'); - await testSubjects.setValue('heatmapColorRange7__to', '905'); + await PageObjects.visualize.setCustomRangeByIndex(6, '650', '720'); + await PageObjects.visualize.setCustomRangeByIndex(7, '800', '905'); await PageObjects.visualize.waitForVisualizationRenderingStabilized(); await PageObjects.visualize.clickGo(); diff --git a/test/functional/page_objects/visualize_page.js b/test/functional/page_objects/visualize_page.js index 7d2c4d95fe84f..6d403ce2dd4a6 100644 --- a/test/functional/page_objects/visualize_page.js +++ b/test/functional/page_objects/visualize_page.js @@ -651,6 +651,11 @@ export function VisualizePageProvider({ getService, getPageObjects, updateBaseli await testSubjects.click(`heatmapColorRange__addRangeButton`); } + async setCustomRangeByIndex(index, from, to) { + await testSubjects.setValue(`heatmapColorRange${index}__from`, from); + await testSubjects.setValue(`heatmapColorRange${index}__to`, to); + } + async clickYAxisOptions(axisId) { await testSubjects.click(`toggleYAxisOptions-${axisId}`); }