From f452b0c6280cb52aeb8b5775111230e051ca05b1 Mon Sep 17 00:00:00 2001 From: Daniil Suleiman <31325372+sulemanof@users.noreply.github.com> Date: Tue, 8 Oct 2019 23:37:24 +0300 Subject: [PATCH] [Vis: Default editor] Euification of Metric options tab (#46930) * EUIfication of metric_vis_options * Small fixes * Remove unused translations * Fix style comments * Remove unused styles --- .../public/components/common/color_schema.tsx | 12 +- .../public/components/common/index.ts | 2 +- .../public/components/common/range.tsx | 7 +- .../components/common/truncate_labels.tsx | 4 +- .../components/options/heatmap/index.tsx | 17 +- .../components/options/metrics_axes/mocks.ts | 4 +- .../kbn_vislib_vis_types/public/gauge.d.ts | 10 +- .../kbn_vislib_vis_types/public/gauge.js | 4 +- .../kbn_vislib_vis_types/public/goal.js | 4 +- .../kbn_vislib_vis_types/public/types.ts | 18 +- .../public/utils/collections.ts | 3 +- .../public/components/metric_vis_options.tsx | 197 ++++++++++++++ .../components/metric_vis_params/index.js | 20 -- .../metric_vis_params/metric_vis_params.html | 249 ------------------ .../metric_vis_params/metric_vis_params.js | 86 ------ .../vis_type_metric/public/legacy.ts | 5 - .../vis_type_metric/public/metric_vis_fn.ts | 52 +--- .../vis_type_metric/public/metric_vis_type.ts | 29 +- .../vis_type_metric/public/plugin.ts | 10 +- .../vis_type_metric/public/shim/index.ts | 20 -- .../public/shim/legacy_dependencies_plugin.ts | 31 --- .../public/shim/metric_vis_legacy_module.ts | 31 --- .../vis_type_metric/public/types.ts | 50 ++++ .../public/directives/__tests__/inequality.js | 124 --------- src/legacy/ui/public/directives/inequality.js | 65 ----- .../ui/public/vis/editors/default/_agg.scss | 14 - .../public/vis/editors/default/_sidebar.scss | 39 --- .../vis/editors/default/controls/ranges.tsx | 1 + .../translations/translations/ja-JP.json | 16 -- .../translations/translations/zh-CN.json | 16 -- 30 files changed, 323 insertions(+), 817 deletions(-) create mode 100644 src/legacy/core_plugins/vis_type_metric/public/components/metric_vis_options.tsx delete mode 100644 src/legacy/core_plugins/vis_type_metric/public/components/metric_vis_params/index.js delete mode 100644 src/legacy/core_plugins/vis_type_metric/public/components/metric_vis_params/metric_vis_params.html delete mode 100644 src/legacy/core_plugins/vis_type_metric/public/components/metric_vis_params/metric_vis_params.js delete mode 100644 src/legacy/core_plugins/vis_type_metric/public/shim/index.ts delete mode 100644 src/legacy/core_plugins/vis_type_metric/public/shim/legacy_dependencies_plugin.ts delete mode 100644 src/legacy/core_plugins/vis_type_metric/public/shim/metric_vis_legacy_module.ts create mode 100644 src/legacy/core_plugins/vis_type_metric/public/types.ts delete mode 100644 src/legacy/ui/public/directives/__tests__/inequality.js delete mode 100644 src/legacy/ui/public/directives/inequality.js 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 58b98ed8e4058..44837c514d4cf 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 @@ -38,6 +38,7 @@ interface ColorSchemaOptionsProps extends ColorSchemaVislibParams { colorSchemas: ColorSchema[]; uiState: VisOptionsProps['uiState']; setValue: SetColorSchemaOptionsValue; + showHelpText?: boolean; } function ColorSchemaOptions({ @@ -47,6 +48,7 @@ function ColorSchemaOptions({ invertColors, uiState, setValue, + showHelpText = true, }: ColorSchemaOptionsProps) { const [isCustomColors, setIsCustomColors] = useState(() => !!uiState.get('vis.colors')); @@ -76,12 +78,12 @@ function ColorSchemaOptions({ <> { min: number; paramName: ParamName; showInput?: boolean; + showLabels?: boolean; + showValue?: boolean; step?: number; value: '' | number; setValue: (paramName: ParamName, value: number) => void; @@ -37,6 +39,8 @@ function RangeOption({ max, min, showInput, + showLabels, + showValue = true, step, paramName, value, @@ -65,10 +69,11 @@ function RangeOption({ void; } -function TruncateLabelsOption({ disabled, value, setValue }: TruncateLabelsOptionProps) { +function TruncateLabelsOption({ disabled, value = null, setValue }: TruncateLabelsOptionProps) { const onChange = (ev: ChangeEvent) => setValue('truncate', ev.target.value === '' ? null : parseFloat(ev.target.value)); 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 df547265e4fdc..45774b867d601 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 @@ -167,16 +167,13 @@ function HeatmapOptions(props: VisOptionsProps) { /> {stateParams.setColorRange && ( - <> - - - + )} diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/mocks.ts b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/mocks.ts index 422ad3c88fe8a..7955bf79c24eb 100644 --- a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/mocks.ts +++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/mocks.ts @@ -17,7 +17,7 @@ * under the License. */ -import { Axis, ValueAxis, SeriesParam } from '../../../types'; +import { Axis, ValueAxis, SeriesParam, Style } from '../../../types'; import { ChartTypes, ChartModes, @@ -31,7 +31,7 @@ const defaultValueAxisId = 'ValueAxis-1'; const axis = { show: true, - style: {}, + style: {} as Style, title: { text: '', }, 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 4206f7376decb..bb042abfdcca7 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,7 +19,7 @@ import { RangeValues } from 'ui/vis/editors/default/controls/ranges'; import { Alignments, GaugeTypes } from './utils/collections'; -import { ColorSchemaVislibParams } from './types'; +import { ColorSchemaVislibParams, Labels, Style } from './types'; interface Gauge extends ColorSchemaVislibParams { backStyle: 'Full'; @@ -30,18 +30,14 @@ interface Gauge extends ColorSchemaVislibParams { colorsRange: RangeValues[]; extendRange: boolean; gaugeType: GaugeTypes; - labels: { - show: boolean; - }; + labels: Labels; percentageMode: boolean; scale: { show: boolean; labels: false; color: 'rgba(105,112,125,0.2)'; }; - style: { - subText: string; - }; + style: Style; } export interface GaugeVisParams { 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 da960d27ea7e1..75907618eb859 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 @@ -23,7 +23,7 @@ import { Schemas } from 'ui/vis/editors/default/schemas'; import { AggGroupNames } from 'ui/vis/editors/default'; import { ColorSchemas } from 'ui/vislib/components/color/colormaps'; import { GaugeOptions } from './components/options'; -import { getGaugeCollections, Alignments, GaugeColorModes, GaugeTypes } from './utils/collections'; +import { getGaugeCollections, Alignments, ColorModes, GaugeTypes } from './utils/collections'; import { vislibVisController } from './controller'; export default function GaugeVisType() { @@ -49,7 +49,7 @@ export default function GaugeVisType() { backStyle: 'Full', orientation: 'vertical', colorSchema: ColorSchemas.GreenToRed, - gaugeColorMode: GaugeColorModes.LABELS, + gaugeColorMode: ColorModes.LABELS, colorsRange: [ { from: 0, to: 50 }, { from: 50, to: 75 }, 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 0ee5e2304701d..3a6b9f873aa87 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 @@ -22,7 +22,7 @@ import { Schemas } from 'ui/vis/editors/default/schemas'; import { AggGroupNames } from 'ui/vis/editors/default'; import { ColorSchemas } from 'ui/vislib/components/color/colormaps'; import { GaugeOptions } from './components/options'; -import { getGaugeCollections, GaugeTypes, GaugeColorModes } from './utils/collections'; +import { getGaugeCollections, GaugeTypes, ColorModes } from './utils/collections'; import { vislibVisController } from './controller'; import { visFactory } from '../../../ui/public/vis/vis_factory'; @@ -52,7 +52,7 @@ export default function GoalVisType() { orientation: 'vertical', useRanges: false, colorSchema: ColorSchemas.GreenToRed, - gaugeColorMode: GaugeColorModes.NONE, + gaugeColorMode: ColorModes.NONE, colorsRange: [ { from: 0, to: 10000 } ], 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 2b872fbd6c86c..008f2a0e0ce62 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 @@ -41,13 +41,21 @@ export interface ColorSchemaVislibParams { invertColors: boolean; } -interface Labels { - color: string; - filter: boolean; +export interface Labels { + color?: string; + filter?: boolean; overwriteColor?: boolean; rotate?: Rotates; show: boolean; - truncate: number | null; + truncate?: number | null; +} + +export interface Style { + bgFill: string; + bgColor: boolean; + labelColor: boolean; + subText: string; + fontSize: number; } export interface Scale { @@ -74,7 +82,7 @@ export interface Axis { position: Positions; scale: Scale; show: boolean; - style: object; + style: Style; title: { text: string }; type: AxisTypes; } 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 84b5cb5285948..6fe30483a32e8 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,7 +253,8 @@ export enum GaugeTypes { CIRCLE = 'Circle', } -export enum GaugeColorModes { +export enum ColorModes { + BACKGROUND = 'Background', LABELS = 'Labels', NONE = 'None', } diff --git a/src/legacy/core_plugins/vis_type_metric/public/components/metric_vis_options.tsx b/src/legacy/core_plugins/vis_type_metric/public/components/metric_vis_options.tsx new file mode 100644 index 0000000000000..9649588976c0d --- /dev/null +++ b/src/legacy/core_plugins/vis_type_metric/public/components/metric_vis_options.tsx @@ -0,0 +1,197 @@ +/* + * 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 { + EuiButtonGroup, + EuiButtonGroupProps, + 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 { + ColorRanges, + ColorSchemaOptions, + SwitchOption, + RangeOption, + SetColorSchemaOptionsValue, +} from '../../../kbn_vislib_vis_types/public/components'; +import { ColorModes } from '../../../kbn_vislib_vis_types/public/utils/collections'; +import { MetricVisParam, VisParams } from '../types'; + +function MetricVisOptions({ + stateParams, + setValue, + setValidity, + setTouched, + vis, + uiState, +}: VisOptionsProps) { + const setMetricValue: ( + paramName: T, + value: MetricVisParam[T] + ) => void = useCallback( + (paramName, value) => + setValue('metric', { + ...stateParams.metric, + [paramName]: value, + }), + [setValue, stateParams.metric] + ); + + const setMetricLabels: ( + paramName: T, + value: MetricVisParam['labels'][T] + ) => void = useCallback( + (paramName, value) => + setMetricValue('labels', { + ...stateParams.metric.labels, + [paramName]: value, + }), + [setMetricValue, stateParams.metric.labels] + ); + + const setMetricStyle: ( + paramName: T, + value: MetricVisParam['style'][T] + ) => void = useCallback( + (paramName, value) => + setMetricValue('style', { + ...stateParams.metric.style, + [paramName]: value, + }), + [setMetricValue, stateParams.metric.style] + ); + + const setColorMode: EuiButtonGroupProps['onChange'] = useCallback( + id => setMetricValue('metricColorMode', id as ColorModes), + [setMetricValue] + ); + + const metricColorModeLabel = i18n.translate('visTypeMetric.params.color.useForLabel', { + defaultMessage: 'Use color for', + }); + + return ( + <> + + +

+ +

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

+ +

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

+ +

+ + + + + + + ); +} + +export { MetricVisOptions }; diff --git a/src/legacy/core_plugins/vis_type_metric/public/components/metric_vis_params/index.js b/src/legacy/core_plugins/vis_type_metric/public/components/metric_vis_params/index.js deleted file mode 100644 index 3db93663b625d..0000000000000 --- a/src/legacy/core_plugins/vis_type_metric/public/components/metric_vis_params/index.js +++ /dev/null @@ -1,20 +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. - */ - -export { MetricVisParams } from './metric_vis_params'; diff --git a/src/legacy/core_plugins/vis_type_metric/public/components/metric_vis_params/metric_vis_params.html b/src/legacy/core_plugins/vis_type_metric/public/components/metric_vis_params/metric_vis_params.html deleted file mode 100644 index 6680ec884728f..0000000000000 --- a/src/legacy/core_plugins/vis_type_metric/public/components/metric_vis_params/metric_vis_params.html +++ /dev/null @@ -1,249 +0,0 @@ -
- -
- -
- -
-
- -
- -
- -
-
- -
-
-
- - - - - -
-
- -
- - - - - - - - - - - - -
- - - -
- - - - - -
- -
-

- - - -

-
- -
-
- -
-
- -
-
-
- - - - - -
-
-
- -
- -
- -
-
-
- -
- -
-
-
-
- -
- -
- -
-
- -
-
- -
-
-
- - - - -
-
- -
- -
- -
- -
-
- -
-
-
diff --git a/src/legacy/core_plugins/vis_type_metric/public/components/metric_vis_params/metric_vis_params.js b/src/legacy/core_plugins/vis_type_metric/public/components/metric_vis_params/metric_vis_params.js deleted file mode 100644 index af81490224cf9..0000000000000 --- a/src/legacy/core_plugins/vis_type_metric/public/components/metric_vis_params/metric_vis_params.js +++ /dev/null @@ -1,86 +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 _ from 'lodash'; -import { i18n } from '@kbn/i18n'; -import metricVisParamsTemplate from './metric_vis_params.html'; - -export function MetricVisParams() { - return { - restrict: 'E', - template: metricVisParamsTemplate, - replace: true, - link: function ($scope) { - $scope.collections = $scope.vis.type.editorConfig.collections; - $scope.showColorRange = true; - - $scope.$watch('editorState.params.metric.metricColorMode', newValue => { - switch (newValue) { - case 'Labels': - $scope.editorState.params.metric.style.labelColor = true; - $scope.editorState.params.metric.style.bgColor = false; - break; - case 'Background': - $scope.editorState.params.metric.style.labelColor = false; - $scope.editorState.params.metric.style.bgColor = true; - break; - case 'None': - $scope.editorState.params.metric.style.labelColor = false; - $scope.editorState.params.metric.style.bgColor = false; - break; - } - }); - - $scope.resetColors = function () { - $scope.uiState.set('vis.colors', null); - $scope.customColors = false; - }; - - $scope.getGreaterThan = function (index) { - if (index === 0) return -Infinity; - return $scope.editorState.params.metric.colorsRange[index - 1].to; - }; - - $scope.addRange = function () { - const previousRange = _.last($scope.editorState.params.metric.colorsRange); - const from = previousRange ? previousRange.to : 0; - const to = previousRange ? from + (previousRange.to - previousRange.from) : 100; - $scope.editorState.params.metric.colorsRange.push({ from: from, to: to }); - }; - - $scope.removeRange = function (index) { - $scope.editorState.params.metric.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.editorState.requiredDescription = i18n.translate( - 'visTypeMetric.params.ranges.warning.requiredDescription', { defaultMessage: 'Required:' }); - }, - }; -} diff --git a/src/legacy/core_plugins/vis_type_metric/public/legacy.ts b/src/legacy/core_plugins/vis_type_metric/public/legacy.ts index f214bcbc82f7d..65179ae1315c6 100644 --- a/src/legacy/core_plugins/vis_type_metric/public/legacy.ts +++ b/src/legacy/core_plugins/vis_type_metric/public/legacy.ts @@ -22,16 +22,11 @@ import { npSetup, npStart } from 'ui/new_platform'; import { setup as visualizationsSetup } from '../../visualizations/public/np_ready/public/legacy'; import { MetricVisPluginSetupDependencies } from './plugin'; -import { LegacyDependenciesPlugin } from './shim'; import { plugin } from '.'; const plugins: Readonly = { expressions: npSetup.plugins.expressions, visualizations: visualizationsSetup, - - // Temporary solution - // It will be removed when all dependent services are migrated to the new platform. - __LEGACY: new LegacyDependenciesPlugin(), }; const pluginInstance = plugin({} as PluginInitializerContext); diff --git a/src/legacy/core_plugins/vis_type_metric/public/metric_vis_fn.ts b/src/legacy/core_plugins/vis_type_metric/public/metric_vis_fn.ts index e4dbd9134a4f5..89f74ef4b53e9 100644 --- a/src/legacy/core_plugins/vis_type_metric/public/metric_vis_fn.ts +++ b/src/legacy/core_plugins/vis_type_metric/public/metric_vis_fn.ts @@ -19,9 +19,10 @@ import { i18n } from '@kbn/i18n'; -// @ts-ignore -import { vislibColorMaps } from 'ui/vislib/components/color/colormaps'; -import { ExpressionFunction, KibanaDatatable, Render, Range, Style } from '../../interpreter/types'; +import { vislibColorMaps, ColorSchemas } from 'ui/vislib/components/color/colormaps'; +import { ExpressionFunction, KibanaDatatable, Range, Render, Style } from '../../interpreter/types'; +import { ColorModes } from '../../kbn_vislib_vis_types/public/utils/collections'; +import { visType, DimensionsVisParam, VisParams } from './types'; type Context = KibanaDatatable; @@ -29,8 +30,8 @@ const name = 'metricVis'; interface Arguments { percentage: boolean; - colorScheme: string; - colorMode: string; + colorScheme: ColorSchemas; + colorMode: ColorModes; useRanges: boolean; invertColors: boolean; showLabels: boolean; @@ -42,39 +43,10 @@ interface Arguments { bucket: any; // these aren't typed yet } -interface VisParams { - dimensions: DimensionsVisParam; - metric: MetricVisParam; -} - -interface DimensionsVisParam { - metrics: any; - bucket?: any; -} - -interface MetricVisParam { - percentageMode: Arguments['percentage']; - useRanges: Arguments['useRanges']; - colorSchema: Arguments['colorScheme']; - metricColorMode: Arguments['colorMode']; - colorsRange: Arguments['colorRange']; - labels: { - show: Arguments['showLabels']; - }; - invertColors: Arguments['invertColors']; - style: { - bgFill: Arguments['bgFill']; - bgColor: boolean; - labelColor: boolean; - subText: Arguments['subText']; - fontSize: number; - }; -} - interface RenderValue { - visType: 'metric'; + visType: typeof visType; visData: Context; - visConfig: VisParams; + visConfig: Pick; params: any; } @@ -113,7 +85,7 @@ export const createMetricVisFn = (): ExpressionFunction< colorMode: { types: ['string'], default: '"None"', - options: ['None', 'Label', 'Background'], + options: [ColorModes.NONE, ColorModes.LABELS, ColorModes.BACKGROUND], help: i18n.translate('visTypeMetric.function.colorMode.help', { defaultMessage: 'Which part of metric to color', }), @@ -206,7 +178,7 @@ export const createMetricVisFn = (): ExpressionFunction< as: 'visualization', value: { visData: context, - visType: 'metric', + visType, visConfig: { metric: { percentageMode: args.percentage, @@ -220,8 +192,8 @@ export const createMetricVisFn = (): ExpressionFunction< invertColors: args.invertColors, style: { bgFill: args.bgFill, - bgColor: args.colorMode === 'Background', - labelColor: args.colorMode === 'Labels', + bgColor: args.colorMode === ColorModes.BACKGROUND, + labelColor: args.colorMode === ColorModes.LABELS, subText: args.subText, fontSize, }, diff --git a/src/legacy/core_plugins/vis_type_metric/public/metric_vis_type.ts b/src/legacy/core_plugins/vis_type_metric/public/metric_vis_type.ts index 76e88888ef7f2..a05df6f4d1564 100644 --- a/src/legacy/core_plugins/vis_type_metric/public/metric_vis_type.ts +++ b/src/legacy/core_plugins/vis_type_metric/public/metric_vis_type.ts @@ -21,12 +21,16 @@ import { i18n } from '@kbn/i18n'; // @ts-ignore import { Schemas } from 'ui/vis/editors/default/schemas'; -// @ts-ignore -import { vislibColorMaps } from 'ui/vislib/components/color/colormaps'; + +import { AggGroupNames } from 'ui/vis/editors/default'; +import { colorSchemas, ColorSchemas } from 'ui/vislib/components/color/colormaps'; + // @ts-ignore import { MetricVisComponent } from './components/metric_vis_controller'; import { visFactory } from '../../visualizations/public'; +import { MetricVisOptions } from './components/metric_vis_options'; +import { ColorModes } from '../../kbn_vislib_vis_types/public/utils/collections'; export const createMetricVisTypeDefinition = () => { return visFactory.createReactVisualization({ @@ -45,8 +49,8 @@ export const createMetricVisTypeDefinition = () => { metric: { percentageMode: false, useRanges: false, - colorSchema: 'Green to Red', - metricColorMode: 'None', + colorSchema: ColorSchemas.GreenToRed, + metricColorMode: ColorModes.NONE, colorsRange: [{ from: 0, to: 10000 }], labels: { show: true, @@ -66,33 +70,30 @@ export const createMetricVisTypeDefinition = () => { collections: { metricColorMode: [ { - id: 'None', + id: ColorModes.NONE, label: i18n.translate('visTypeMetric.colorModes.noneOptionLabel', { defaultMessage: 'None', }), }, { - id: 'Labels', + id: ColorModes.LABELS, label: i18n.translate('visTypeMetric.colorModes.labelsOptionLabel', { defaultMessage: 'Labels', }), }, { - id: 'Background', + id: ColorModes.BACKGROUND, label: i18n.translate('visTypeMetric.colorModes.backgroundOptionLabel', { defaultMessage: 'Background', }), }, ], - colorSchemas: Object.values(vislibColorMaps).map((value: any) => ({ - id: value.id, - label: value.label, - })), + colorSchemas, }, - optionsTemplate: '', + optionsTemplate: MetricVisOptions, schemas: new Schemas([ { - group: 'metrics', + group: AggGroupNames.Metrics, name: 'metric', title: i18n.translate('visTypeMetric.schemas.metricTitle', { defaultMessage: 'Metric' }), min: 1, @@ -118,7 +119,7 @@ export const createMetricVisTypeDefinition = () => { ], }, { - group: 'buckets', + group: AggGroupNames.Buckets, name: 'group', title: i18n.translate('visTypeMetric.schemas.splitGroupTitle', { defaultMessage: 'Split group', diff --git a/src/legacy/core_plugins/vis_type_metric/public/plugin.ts b/src/legacy/core_plugins/vis_type_metric/public/plugin.ts index 1c5dbbd03a18d..e3e0ffaab2116 100644 --- a/src/legacy/core_plugins/vis_type_metric/public/plugin.ts +++ b/src/legacy/core_plugins/vis_type_metric/public/plugin.ts @@ -18,19 +18,16 @@ */ import { PluginInitializerContext, CoreSetup, CoreStart, Plugin } from '../../../../core/public'; -import { LegacyDependenciesPlugin } from './shim'; import { Plugin as ExpressionsPublicPlugin } from '../../../../plugins/expressions/public'; import { VisualizationsSetup } from '../../visualizations/public'; import { createMetricVisFn } from './metric_vis_fn'; -// @ts-ignore import { createMetricVisTypeDefinition } from './metric_vis_type'; /** @internal */ export interface MetricVisPluginSetupDependencies { expressions: ReturnType; visualizations: VisualizationsSetup; - __LEGACY: LegacyDependenciesPlugin; } /** @internal */ @@ -41,12 +38,7 @@ export class MetricVisPlugin implements Plugin { this.initializerContext = initializerContext; } - public setup( - core: CoreSetup, - { expressions, visualizations, __LEGACY }: MetricVisPluginSetupDependencies - ) { - __LEGACY.setup(); - + public setup(core: CoreSetup, { expressions, visualizations }: MetricVisPluginSetupDependencies) { expressions.registerFunction(createMetricVisFn); visualizations.types.registerVisualization(createMetricVisTypeDefinition); } diff --git a/src/legacy/core_plugins/vis_type_metric/public/shim/index.ts b/src/legacy/core_plugins/vis_type_metric/public/shim/index.ts deleted file mode 100644 index cfc7b62ff4f86..0000000000000 --- a/src/legacy/core_plugins/vis_type_metric/public/shim/index.ts +++ /dev/null @@ -1,20 +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. - */ - -export * from './legacy_dependencies_plugin'; diff --git a/src/legacy/core_plugins/vis_type_metric/public/shim/legacy_dependencies_plugin.ts b/src/legacy/core_plugins/vis_type_metric/public/shim/legacy_dependencies_plugin.ts deleted file mode 100644 index 9d5f49882ab8c..0000000000000 --- a/src/legacy/core_plugins/vis_type_metric/public/shim/legacy_dependencies_plugin.ts +++ /dev/null @@ -1,31 +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 { CoreStart, Plugin } from 'kibana/public'; -import { initMetricVisLegacyModule } from './metric_vis_legacy_module'; - -export class LegacyDependenciesPlugin implements Plugin { - public setup() { - // Init kibana/metric_vis AngularJS module. - initMetricVisLegacyModule(); - } - - public start(core: CoreStart) { - // nothing to do here yet - } -} diff --git a/src/legacy/core_plugins/vis_type_metric/public/shim/metric_vis_legacy_module.ts b/src/legacy/core_plugins/vis_type_metric/public/shim/metric_vis_legacy_module.ts deleted file mode 100644 index 25942b13a4103..0000000000000 --- a/src/legacy/core_plugins/vis_type_metric/public/shim/metric_vis_legacy_module.ts +++ /dev/null @@ -1,31 +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 { once } from 'lodash'; - -// @ts-ignore -import { uiModules } from 'ui/modules'; -// @ts-ignore -import 'ui/directives/inequality'; -// @ts-ignore -import { MetricVisParams } from '../components/metric_vis_params'; - -/** @internal */ -export const initMetricVisLegacyModule = once((): void => { - uiModules.get('kibana/metric_vis', ['kibana']).directive('metricVisParams', MetricVisParams); -}); diff --git a/src/legacy/core_plugins/vis_type_metric/public/types.ts b/src/legacy/core_plugins/vis_type_metric/public/types.ts new file mode 100644 index 0000000000000..54f1f36e19c99 --- /dev/null +++ b/src/legacy/core_plugins/vis_type_metric/public/types.ts @@ -0,0 +1,50 @@ +/* + * 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 { SchemaConfig } from 'ui/visualize/loader/pipeline_helpers/build_pipeline'; +import { ColorModes } from '../../kbn_vislib_vis_types/public/utils/collections'; +import { Labels, Style } from '../../kbn_vislib_vis_types/public/types'; + +export const visType = 'metric'; + +export interface DimensionsVisParam { + metrics: SchemaConfig[]; + bucket?: SchemaConfig[]; +} + +export interface MetricVisParam { + percentageMode: boolean; + useRanges: boolean; + colorSchema: ColorSchemas; + metricColorMode: ColorModes; + colorsRange: RangeValues[]; + labels: Labels; + invertColors: boolean; + style: Style; +} + +export interface VisParams { + addTooltip: boolean; + addLegend: boolean; + dimensions: DimensionsVisParam; + metric: MetricVisParam; + type: typeof visType; +} diff --git a/src/legacy/ui/public/directives/__tests__/inequality.js b/src/legacy/ui/public/directives/__tests__/inequality.js deleted file mode 100644 index 0e6a537d69f7c..0000000000000 --- a/src/legacy/ui/public/directives/__tests__/inequality.js +++ /dev/null @@ -1,124 +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 expect from '@kbn/expect'; -import ngMock from 'ng_mock'; -import '../inequality'; - -describe('greater_than model validator directive', function () { - let $compile; - let $rootScope; - let html; - - beforeEach(ngMock.module('kibana')); - - beforeEach(ngMock.inject(function (_$compile_, _$rootScope_) { - $compile = _$compile_; - $rootScope = _$rootScope_; - })); - - describe('without value', function () { - let element; - beforeEach(function () { - html = ''; - element = $compile(html)($rootScope); - }); - - it('should be valid when larger than 0', function () { - $rootScope.value = '1'; - $rootScope.$digest(); - expect(element.hasClass('ng-valid')).to.be.ok(); - }); - - it('should be valid for 0', function () { - $rootScope.value = '0'; - $rootScope.$digest(); - expect(element.hasClass('ng-valid')).to.be.ok(); - }); - - it('should be valid for negatives', function () { - $rootScope.value = '-10'; - $rootScope.$digest(); - expect(element.hasClass('ng-valid')).to.be.ok(); - }); - }); - - describe('with string values', function () { - let element; - beforeEach(function () { - html = ``; - element = $compile(html)($rootScope); - }); - - it('should be valid for greater than 10', function () { - $rootScope.value = '15'; - $rootScope.$digest(); - expect(element.hasClass('ng-valid')).to.be.ok(); - }); - - it('should be invalid for 10', function () { - $rootScope.value = '10'; - $rootScope.$digest(); - expect(element.hasClass('ng-invalid')).to.be.ok(); - }); - - // Edge case because '5' > '10' as strings - it('should be invalid less than 10', function () { - $rootScope.value = '5'; - $rootScope.$digest(); - expect(element.hasClass('ng-invalid')).to.be.ok(); - }); - }); - - [0, 1, 10, 42, -12].forEach(function (num) { - describe('with value ' + num, function () { - let element; - beforeEach(function () { - html = ''; - element = $compile(html)($rootScope); - }); - - it('should be valid when larger than ' + num, function () { - $rootScope.value = num + 1; - $rootScope.$digest(); - expect(element.hasClass('ng-valid')).to.be.ok(); - }); - - it('should be invalid for ' + num, function () { - $rootScope.value = num; - $rootScope.$digest(); - expect(element.hasClass('ng-invalid')).to.be.ok(); - }); - - it('should be invalid for less than ' + num, function () { - $rootScope.value = num - 1; - $rootScope.$digest(); - expect(element.hasClass('ng-invalid')).to.be.ok(); - }); - - it('should be valid for empty model values', () => { - [undefined, null, ''].forEach(val => { - $rootScope.value = val; - $rootScope.$digest(); - expect(element.hasClass('ng-valid')).to.be.ok(); - }); - }); - }); - }); -}); diff --git a/src/legacy/ui/public/directives/inequality.js b/src/legacy/ui/public/directives/inequality.js deleted file mode 100644 index a08b617ceb929..0000000000000 --- a/src/legacy/ui/public/directives/inequality.js +++ /dev/null @@ -1,65 +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 '../modules'; - -function makeDirectiveDef(id, compare) { - return function ($parse) { - return { - require: 'ngModel', - link: function ($scope, $el, $attr, ngModel) { - const getBound = function () { return $parse($attr[id])($scope); }; - - ngModel.$parsers.push(validate); - ngModel.$formatters.push(validate); - - $scope.$watch(getBound, function () { - validate(ngModel.$viewValue); - }); - - // We only set it to invalid when both the model value and the value to compare against are - // provided, and the values do not meet the condition. - function validate(val) { - const bound = getBound(); - const left = parseFloat(val); - const right = parseFloat(bound); - const isValid = isEmpty(val) || isEmpty(bound) || compare(left, right); - ngModel.$setValidity(id, isValid); - return val; - } - - function isEmpty(val) { - return typeof val === 'undefined' || val === null || val === ''; - } - } - }; - }; -} - -uiModules - .get('kibana') - .directive('greaterThan', makeDirectiveDef('greaterThan', function (a, b) { - return a > b; - })) - .directive('lessThan', makeDirectiveDef('lessThan', function (a, b) { - return a < b; - })) - .directive('greaterOrEqualThan', makeDirectiveDef('greaterOrEqualThan', function (a, b) { - return a >= b; - })); diff --git a/src/legacy/ui/public/vis/editors/default/_agg.scss b/src/legacy/ui/public/vis/editors/default/_agg.scss index e66f3185d25dc..da8fbaa36dd07 100644 --- a/src/legacy/ui/public/vis/editors/default/_agg.scss +++ b/src/legacy/ui/public/vis/editors/default/_agg.scss @@ -1,17 +1,3 @@ -// -// Misc elements -- found in agg_types/controls/*.html -// - -.visEditorAgg__rangesTable { - td { - padding: 0 $euiSizeS $euiSizeS 0; - - &:last-child { - padding-right: 0; - } - } -} - .visEditorAgg__subAgg { border: $euiBorderThick; border-radius: $euiBorderRadius; diff --git a/src/legacy/ui/public/vis/editors/default/_sidebar.scss b/src/legacy/ui/public/vis/editors/default/_sidebar.scss index 03a9a9aaa4f45..5a8a0aabad565 100644 --- a/src/legacy/ui/public/vis/editors/default/_sidebar.scss +++ b/src/legacy/ui/public/vis/editors/default/_sidebar.scss @@ -122,49 +122,10 @@ background-color: lightOrDarkTheme($euiPageBackgroundColor, $euiColorLightestShade); } -.visEditorSidebar__collapsible--margin { - margin-top: $euiSizeM; -} - .visEditorSidebar__collapsible--marginBottom { margin-bottom: $euiSizeM; } -.visEditorSidebar__collapsibleTitle { - @include euiFontSizeS; - display: flex; - align-items: center; - justify-content: space-between; - width: 100%; - white-space: nowrap; - - + * { - margin-top: $euiSize; - display: block; - } - - + .form-group { - margin-top: $euiSizeXS; - } - - label { - margin-bottom: 0 !important; // For filters - } -} - -.visEditorSidebar__collapsibleTitleLabel { - color: $euiColorPrimary; - display: flex; - align-items: center; - margin-right: $euiSizeXS; - line-height: $euiLineHeight; -} - -.visEditorSidebar__collapsibleTitleText { - @include euiTextTruncate; - margin-left: $euiSizeS; -} - // // FORMS // 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 b238d1124528d..071e15f8b97f8 100644 --- a/src/legacy/ui/public/vis/editors/default/controls/ranges.tsx +++ b/src/legacy/ui/public/vis/editors/default/controls/ranges.tsx @@ -41,6 +41,7 @@ const generateId = htmlIdGenerator(); const isEmpty = (value: any) => value === undefined || value === null; export interface RangeValues { + type?: 'range'; from?: number; to?: number; } diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json index 67f3669b59108..a30ee1e09a8ef 100644 --- a/x-pack/plugins/translations/translations/ja-JP.json +++ b/x-pack/plugins/translations/translations/ja-JP.json @@ -2661,24 +2661,8 @@ "visTypeMetric.function.help": "メトリックビジュアライゼーション", "visTypeMetric.metricDescription": "計算結果を単独の数字として表示します。", "visTypeMetric.metricTitle": "メトリック", - "visTypeMetric.params.color.colorOptionsTitle": "カラーオプション", - "visTypeMetric.params.color.resetColorDescription": "色をリセットします", - "visTypeMetric.params.color.reverseSchemaLabel": "カラースキームを反転", - "visTypeMetric.params.color.schemaLabel": "カラースキーム", - "visTypeMetric.params.color.toggleOptionsAriaLabel": "カラーオプションを切り替える", - "visTypeMetric.params.color.useForLabel": "色の使用", - "visTypeMetric.params.percentageModeLabel": "パーセンテージモード", - "visTypeMetric.params.ranges.addRangeButtonLabel": "範囲を追加", - "visTypeMetric.params.ranges.fromLabel": "From", - "visTypeMetric.params.ranges.toggleOptionsAriaLabel": "範囲オプションを切り替える", - "visTypeMetric.params.ranges.toLabel": "To", - "visTypeMetric.params.ranges.warning.requiredDescription": "必須:", - "visTypeMetric.params.ranges.warning.specifyRangeDescription": "{requiredDescription} 範囲を最低 1 つ指定する必要があります。", "visTypeMetric.params.rangesTitle": "範囲", - "visTypeMetric.params.showLabelsLabel": "ラベルを表示", - "visTypeMetric.params.style.fontSizeLabel": "フォントサイズ ({fontSize} pt)", "visTypeMetric.params.style.styleTitle": "スタイル", - "visTypeMetric.params.style.toggleOptionsAriaLabel": "スタイルオプションを切り替える", "visTypeMetric.schemas.metricTitle": "メトリック", "visTypeMetric.schemas.splitGroupTitle": "グループを分割", "visTypeMetric.function.bgFill.help": "html 16 進数コード (#123456)、html 色 (red、blue)、または rgba 値 (rgba(255,255,255,1))。", diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json index 1197c087fd171..651399182d754 100644 --- a/x-pack/plugins/translations/translations/zh-CN.json +++ b/x-pack/plugins/translations/translations/zh-CN.json @@ -2662,24 +2662,8 @@ "visTypeMetric.function.help": "指标可视化", "visTypeMetric.metricDescription": "将计算结果显示为单个数字", "visTypeMetric.metricTitle": "指标", - "visTypeMetric.params.color.colorOptionsTitle": "颜色选项", - "visTypeMetric.params.color.resetColorDescription": "重置颜色", - "visTypeMetric.params.color.reverseSchemaLabel": "反色模式", - "visTypeMetric.params.color.schemaLabel": "颜色模式", - "visTypeMetric.params.color.toggleOptionsAriaLabel": "切换颜色选项", - "visTypeMetric.params.color.useForLabel": "将颜色用于", - "visTypeMetric.params.percentageModeLabel": "百分比模式", - "visTypeMetric.params.ranges.addRangeButtonLabel": "添加范围", - "visTypeMetric.params.ranges.fromLabel": "从", - "visTypeMetric.params.ranges.toggleOptionsAriaLabel": "切换范围选项", - "visTypeMetric.params.ranges.toLabel": "到", - "visTypeMetric.params.ranges.warning.requiredDescription": "必需：", - "visTypeMetric.params.ranges.warning.specifyRangeDescription": "{requiredDescription}您必须指定至少一个范围。", "visTypeMetric.params.rangesTitle": "范围", - "visTypeMetric.params.showLabelsLabel": "显示标签", - "visTypeMetric.params.style.fontSizeLabel": "字体大小（{fontSize} 磅）", "visTypeMetric.params.style.styleTitle": "样式", - "visTypeMetric.params.style.toggleOptionsAriaLabel": "切换样式选项", "visTypeMetric.schemas.metricTitle": "指标", "visTypeMetric.schemas.splitGroupTitle": "拆分组", "visTypeMetric.function.bgFill.help": "将颜色表示为 html 十六进制代码 (#123456)、html 颜色（red、blue）或 rgba 值 (rgba(255,255,255,1))。",