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..276e765ae7fe6 --- /dev/null +++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/common/color_ranges.tsx @@ -0,0 +1,81 @@ +/* + * 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 { RangeValues, RangesParamEditor } from 'ui/vis/editors/default/controls/ranges'; + +interface ColorRangesProps { + 'data-test-subj'?: string; + colorsRange: RangeValues[]; + setValue(paramName: string, value: RangeValues[]): void; + setValidity?(isValid: boolean): void; + setTouched?(isTouched: boolean): void; +} + +function ColorRanges({ + 'data-test-subj': 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: RangeValues[]) => 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..58b98ed8e4058 --- /dev/null +++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/common/color_schema.tsx @@ -0,0 +1,108 @@ +/* + * 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 { ColorSchema } from 'ui/vislib/components/color/colormaps'; +import { SelectOption } from './select'; +import { SwitchOption } from './switch'; +import { ColorSchemaVislibParams } from '../../types'; + +export type SetColorSchemaOptionsValue = ( + paramName: T, + value: ColorSchemaVislibParams[T] +) => void; + +interface ColorSchemaOptionsProps extends ColorSchemaVislibParams { + disabled?: boolean; + colorSchemas: ColorSchema[]; + uiState: VisOptionsProps['uiState']; + setValue: SetColorSchemaOptionsValue; +} + +function ColorSchemaOptions({ + disabled, + colorSchema, + colorSchemas, + invertColors, + uiState, + setValue, +}: ColorSchemaOptionsProps) { + const [isCustomColors, setIsCustomColors] = useState(() => !!uiState.get('vis.colors')); + + 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 458fa1347dc71..f2f4e2badd0da 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/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 22843906ffc4b..4abfb2e604b1d 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,13 @@ * 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/vis/editors/default/controls/ranges'; -import { SelectOption, SwitchOption } from '../../common'; +import { ColorRanges, ColorSchemaOptions, SwitchOption } from '../../common'; +import { SetColorSchemaOptionsValue } from '../../common/color_schema'; import { GaugeOptionsInternalProps } from '.'; function RangesPanel({ @@ -36,49 +35,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 +47,12 @@ function RangesPanel({ - setGaugeValue('colorsRange', value)} + - - - ) { + const { stateParams, vis, uiState, setValue, setValidity, setTouched } = props; + const [valueAxis] = stateParams.valueAxes; + const isColorsNumberInvalid = stateParams.colorsNumber < 2 || stateParams.colorsNumber > 10; + const [isColorRangesValid, setIsColorRangesValid] = useState(false); + + const setValueAxisScale = useCallback( + (paramName: T, value: ValueAxis['scale'][T]) => + setValue('valueAxes', [ + { + ...valueAxis, + scale: { + ...valueAxis.scale, + [paramName]: value, + }, + }, + ]), + [valueAxis, setValue] + ); + + useEffect(() => { + setValidity(stateParams.setColorRange ? isColorRangesValid : !isColorsNumberInvalid); + }, [stateParams.setColorRange, isColorRangesValid, isColorsNumberInvalid, setValidity]); + + return ( + <> + + +

+ +

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

+ +

+ + + + + + + + + + + + + + + + + + {stateParams.setColorRange && ( + <> + + + + )} + + + + + + + ); +} + +export { HeatmapOptions }; 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..c0e9a70e8b11e --- /dev/null +++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/heatmap/labels_panel.tsx @@ -0,0 +1,125 @@ +/* + * 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 { EuiColorPicker, EuiFormRow, 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 } 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] + ); + + const setColor = useCallback(value => setValueAxisLabels('color', value), [setValueAxisLabels]); + + return ( + + +

+ +

+ + + + + + + + + + + + + + ); +} + +export { LabelsPanel }; 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 65a22dff0676b..57afbd4818ae4 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,4 +20,5 @@ export { GaugeOptions } from './gauge'; export { PieOptions } from './pie'; export { PointSeriesOptions } from './point_series'; +export { HeatmapOptions } from './heatmap'; export { MetricsAxisOptions } from './metrics_axes'; diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/label_options.tsx b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/label_options.tsx index 868a8ce29b466..a0d91a0abe38a 100644 --- a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/label_options.tsx +++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/label_options.tsx @@ -17,7 +17,7 @@ * under the License. */ -import React, { useCallback } from 'react'; +import React, { useCallback, useMemo } from 'react'; import { EuiTitle, EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n/react'; @@ -25,7 +25,7 @@ import { FormattedMessage } from '@kbn/i18n/react'; import { VisOptionsProps } from 'ui/vis/editors/default'; import { BasicVislibParams, Axis } from '../../../types'; import { SelectOption, SwitchOption, TruncateLabelsOption } from '../../common'; -import { rotateOptions } from '../../../utils/collections'; +import { getRotateOptions } from '../../../utils/collections'; interface LabelOptionsProps extends 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/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) { <> -
+

-

+ -
- -
- -
-
-
- -
- -
- -
-
- -
- -
- -
-
- -
- -
- -
-
- -
- -
- -
-
- -
- -
- -
-
- -
-
-
- - - - -
- -
- -
- - - - - - - - - - - - -
- - - -
- - - - - -
- -
-

-
- - -
-
- -
-
- -
-
-
- - - - -
- -
-
- -
- -
- -
-
- -
- -
- -
-
- -
- -
- -
-
- -
-
- - diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/controls/heatmap_options.js b/src/legacy/core_plugins/kbn_vislib_vis_types/public/controls/heatmap_options.js deleted file mode 100644 index 847116f461be6..0000000000000 --- a/src/legacy/core_plugins/kbn_vislib_vis_types/public/controls/heatmap_options.js +++ /dev/null @@ -1,98 +0,0 @@ -/* - * 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 { uiModules } from 'ui/modules'; -import { i18n } from '@kbn/i18n'; -import heatmapOptionsTemplate from './heatmap_options.html'; -import _ from 'lodash'; -const module = uiModules.get('kibana'); - -module.directive('heatmapOptions', function () { - return { - restrict: 'E', - template: heatmapOptionsTemplate, - replace: true, - link: function ($scope) { - - $scope.collections = $scope.vis.type.editorConfig.collections; - - const verticalRotation = 270; - $scope.showColorRange = false; - $scope.showLabels = false; - $scope.customColors = false; - $scope.valueAxis = $scope.editorState.params.valueAxes[0]; - $scope.options = { - rotateLabels: $scope.valueAxis.labels.rotate === verticalRotation - }; - - $scope.$watch('options.rotateLabels', rotate => { - $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/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 @@ -
-
-
-
- -
- -
- -
-
- -
- -
- -
-
- -
- -
- -
-
-
- -
- -
-
-
- - - -
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..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 @@ -17,37 +17,37 @@ * under the License. */ -import { ColorSchemas } from 'ui/vislib/components/color/colormaps'; +import { RangeValues } from 'ui/vis/editors/default/controls/ranges'; +import { Alignments, GaugeTypes } from './utils/collections'; +import { ColorSchemaVislibParams } from './types'; + +interface Gauge extends ColorSchemaVislibParams { + backStyle: 'Full'; + gaugeStyle: 'Full'; + orientation: 'vertical'; + type: 'meter'; + alignment: Alignments; + colorsRange: RangeValues[]; + extendRange: boolean; + gaugeType: GaugeTypes; + labels: { + show: boolean; + }; + percentageMode: boolean; + scale: { + show: boolean; + labels: false; + color: 'rgba(105,112,125,0.2)'; + }; + style: { + subText: string; + }; +} export interface GaugeVisParams { - readonly type: 'gauge'; + type: 'gauge'; addTooltip: boolean; addLegend: boolean; isDisplayWarning: boolean; - gauge: { - readonly backStyle: 'Full'; - readonly gaugeStyle: 'Full'; - readonly orientation: 'vertical'; - readonly type: 'meter'; - alignment: 'automatic' | 'horizontal' | 'vertical'; - colorsRange: Array<{ from?: number; to?: number }>; - colorSchema: ColorSchemas; - extendRange: boolean; - invertColors: boolean; - gaugeType: 'Arc' | 'Circle'; - labels: { - show: boolean; - }; - minAngle?: number; - maxAngle?: number; - percentageMode: boolean; - scale: { - show: boolean; - readonly labels: false; - readonly color: 'rgba(105,112,125,0.2)'; - }; - style: { - subText: string; - }; - }; + gauge: Gauge; } 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 e84b854933a0e..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 { colorSchemas } from 'ui/vislib/components/color/colormaps'; +import { AggGroupNames } from 'ui/vis/editors/default'; +import { ColorSchemas } from 'ui/vislib/components/color/colormaps'; import { GaugeOptions } from './components/options'; +import { getGaugeCollections, Alignments, GaugeColorModes, GaugeTypes } from './utils/collections'; import { 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 }, @@ -80,40 +82,11 @@ export default function GaugeVisType() { }, visualization: vislibVisController, 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([ { - group: 'metrics', + group: AggGroupNames.Metrics, name: 'metric', title: i18n.translate('kbnVislibVisTypes.gauge.metricTitle', { defaultMessage: 'Metric' }), min: 1, @@ -125,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 de377f2b569d5..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 { colorSchemas } from 'ui/vislib/components/color/colormaps'; +import { AggGroupNames } from 'ui/vis/editors/default'; +import { ColorSchemas } from 'ui/vislib/components/color/colormaps'; import { GaugeOptions } from './components/options'; +import { getGaugeCollections, GaugeTypes, GaugeColorModes } from './utils/collections'; import { 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 } ], @@ -77,40 +79,11 @@ export default function GoalVisType() { }, }, 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([ { - group: 'metrics', + group: AggGroupNames.Metrics, name: 'metric', title: i18n.translate('kbnVislibVisTypes.goal.metricTitle', { defaultMessage: 'Metric' }), min: 1, @@ -122,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 new file mode 100644 index 0000000000000..13c676854ead2 --- /dev/null +++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/heatmap.d.ts @@ -0,0 +1,36 @@ +/* + * 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 { 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'; + +export interface HeatmapVisParams extends CommonVislibParams, ColorSchemaVislibParams { + type: 'heatmap'; + addLegend: boolean; + enableHover: boolean; + colorsNumber: number | ''; + colorsRange: RangeValues[]; + 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 4f4f4db005fb3..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,10 +20,11 @@ import { visFactory } from '../../../ui/public/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 { 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'; -import './controls/heatmap_options'; export default function HeatmapVisType() { @@ -39,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, @@ -50,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: { @@ -68,27 +69,11 @@ export default function HeatmapVisType() { brush: { disabled: false }, }, 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 })), - }, - optionsTemplate: heatmapTemplate, + collections: getHeatmapCollections(), + optionsTemplate: HeatmapOptions, schemas: new Schemas([ { - group: 'metrics', + group: AggGroupNames.Metrics, name: 'metric', title: i18n.translate('kbnVislibVisTypes.heatmap.metricTitle', { defaultMessage: 'Value' }), min: 1, @@ -99,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, @@ -107,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, @@ -115,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/kbn_vislib_vis_types.js b/src/legacy/core_plugins/kbn_vislib_vis_types/public/kbn_vislib_vis_types.js index 45c90ad8474d5..1a47cc5994fdb 100644 --- a/src/legacy/core_plugins/kbn_vislib_vis_types/public/kbn_vislib_vis_types.js +++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/kbn_vislib_vis_types.js @@ -18,7 +18,6 @@ */ import { VisTypesRegistryProvider } from 'ui/registry/vis_types'; -import './controls/line_interpolation_option'; import histogramVisTypeProvider from './histogram'; import lineVisTypeProvider from './line'; 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 a6cada55d09cd..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,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 { AggGroupNames } from 'ui/vis/editors/default'; import { PieOptions } from './components/options'; +import { getPositions, Positions } from './utils/collections'; import { vislibVisController } from './controller'; export default function HistogramVisType() { @@ -36,7 +38,7 @@ export default function HistogramVisType() { type: 'pie', addTooltip: true, addLegend: true, - legendPosition: 'right', + legendPosition: Positions.RIGHT, isDonut: true, labels: { show: false, @@ -48,37 +50,12 @@ export default function HistogramVisType() { }, 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([ { - group: 'metrics', + group: AggGroupNames.Metrics, name: 'metric', title: i18n.translate('kbnVislibVisTypes.pie.metricTitle', { defaultMessage: 'Slice size' }), min: 1, @@ -89,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, @@ -97,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 6cad6e47ce8b3..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 @@ -17,11 +17,14 @@ * under the License. */ +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, @@ -33,8 +36,15 @@ export interface CommonVislibParams { legendPosition: Positions; } +export interface ColorSchemaVislibParams { + colorSchema: ColorSchemas; + invertColors: boolean; +} + interface Labels { + color: string; filter: boolean; + overwriteColor?: boolean; rotate?: Rotates; show: boolean; truncate: number | null; @@ -66,7 +76,7 @@ export interface Axis { show: boolean; style: object; title: { text: string }; - type: string; + type: AxisTypes; } export interface ValueAxis extends Axis { @@ -97,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 b8300dc42e4b7..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 @@ -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,86 @@ const rotateOptions = [ }, ]; +export enum GaugeTypes { + ARC = 'Arc', + CIRCLE = 'Circle', +} + +export enum GaugeColorModes { + LABELS = 'Labels', + NONE = 'None', +} + +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, +}; 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 9702269c12866..b238d1124528d 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, @@ -219,7 +219,12 @@ function RangesParamEditor({ - +