From f6b51c5c915201632a5f5a6e5a75cad8d29fada8 Mon Sep 17 00:00:00 2001 From: Diana Derevyankina Date: Wed, 23 Dec 2020 00:24:06 +0300 Subject: [PATCH 01/14] Small multiples in vis_type_xy plugin --- .../vis_type_xy/public/chart_splitter.tsx | 49 +++++++++++++++++ .../vis_type_xy/public/components/index.ts | 1 - .../public/components/split_chart_warning.tsx | 55 ------------------- .../vis_type_xy/public/config/get_aspects.ts | 11 +++- .../vis_type_xy/public/types/config.ts | 2 + .../vis_type_xy/public/vis_component.tsx | 13 +++++ .../vis_type_xy/public/vis_renderer.tsx | 23 +++----- .../vis_type_xy/public/vis_types/area.tsx | 7 --- .../public/vis_types/histogram.tsx | 7 --- .../public/vis_types/horizontal_bar.tsx | 7 --- .../vis_type_xy/public/vis_types/line.tsx | 7 --- .../public/vis_types/split_tooltip.tsx | 31 ----------- 12 files changed, 83 insertions(+), 130 deletions(-) create mode 100644 src/plugins/vis_type_xy/public/chart_splitter.tsx delete mode 100644 src/plugins/vis_type_xy/public/components/split_chart_warning.tsx delete mode 100644 src/plugins/vis_type_xy/public/vis_types/split_tooltip.tsx diff --git a/src/plugins/vis_type_xy/public/chart_splitter.tsx b/src/plugins/vis_type_xy/public/chart_splitter.tsx new file mode 100644 index 0000000000000..d9175e8e598e9 --- /dev/null +++ b/src/plugins/vis_type_xy/public/chart_splitter.tsx @@ -0,0 +1,49 @@ +/* + * 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 from 'react'; +import { Accessor, AccessorFn, GroupBy, GroupBySort, SmallMultiples } from '@elastic/charts'; + +interface ChartSplitterProps { + splitColumnAccessor?: Accessor | AccessorFn; + splitRowAccessor?: Accessor | AccessorFn; + sort?: GroupBySort; +} + +export const ChartSplitter = (props: ChartSplitterProps) => ( + <> + { + const splitTypeAccessor = props.splitColumnAccessor || props.splitRowAccessor; + if (splitTypeAccessor) { + return typeof splitTypeAccessor === 'function' + ? splitTypeAccessor(datum) + : datum[splitTypeAccessor]; + } + return spec.id; + }} + sort={props.sort || 'dataIndex'} + /> + + +); diff --git a/src/plugins/vis_type_xy/public/components/index.ts b/src/plugins/vis_type_xy/public/components/index.ts index d8d55c77b7a8a..bfe97ccf8a4f9 100644 --- a/src/plugins/vis_type_xy/public/components/index.ts +++ b/src/plugins/vis_type_xy/public/components/index.ts @@ -22,4 +22,3 @@ export { XYEndzones } from './xy_endzones'; export { XYCurrentTime } from './xy_current_time'; export { XYSettings } from './xy_settings'; export { XYThresholdLine } from './xy_threshold_line'; -export { SplitChartWarning } from './split_chart_warning'; diff --git a/src/plugins/vis_type_xy/public/components/split_chart_warning.tsx b/src/plugins/vis_type_xy/public/components/split_chart_warning.tsx deleted file mode 100644 index 7265e70a791a3..0000000000000 --- a/src/plugins/vis_type_xy/public/components/split_chart_warning.tsx +++ /dev/null @@ -1,55 +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 React, { FC } from 'react'; - -import { EuiLink, EuiCallOut } from '@elastic/eui'; -import { i18n } from '@kbn/i18n'; -import { FormattedMessage } from '@kbn/i18n/react'; - -import { getDocLinks } from '../services'; - -export const SplitChartWarning: FC = () => { - const advancedSettingsLink = getDocLinks().links.management.visualizationSettings; - - return ( - - - - - ), - }} - /> - - ); -}; diff --git a/src/plugins/vis_type_xy/public/config/get_aspects.ts b/src/plugins/vis_type_xy/public/config/get_aspects.ts index 73096de0a5d51..91413ceadb3d2 100644 --- a/src/plugins/vis_type_xy/public/config/get_aspects.ts +++ b/src/plugins/vis_type_xy/public/config/get_aspects.ts @@ -40,7 +40,10 @@ export function getEmptyAspect(): Aspect { }, }; } -export function getAspects(columns: DatatableColumn[], { x, y, z, series }: Dimensions): Aspects { +export function getAspects( + columns: DatatableColumn[], + { x, y, z, series, splitColumn, splitRow }: Dimensions +): Aspects { const seriesDimensions = Array.isArray(series) || series === undefined ? series : [series]; return { @@ -48,6 +51,12 @@ export function getAspects(columns: DatatableColumn[], { x, y, z, series }: Dime y: getAspectsFromDimension(columns, y) ?? [], z: z && z?.length > 0 ? getAspectsFromDimension(columns, z[0]) : undefined, series: getAspectsFromDimension(columns, seriesDimensions), + splitColumn: + splitColumn && splitColumn?.length > 0 + ? getAspectsFromDimension(columns, splitColumn[0]) + : undefined, + splitRow: + splitRow && splitRow?.length > 0 ? getAspectsFromDimension(columns, splitRow[0]) : undefined, }; } diff --git a/src/plugins/vis_type_xy/public/types/config.ts b/src/plugins/vis_type_xy/public/types/config.ts index ec73c0f6e3fc0..00463f1323080 100644 --- a/src/plugins/vis_type_xy/public/types/config.ts +++ b/src/plugins/vis_type_xy/public/types/config.ts @@ -54,6 +54,8 @@ export interface Aspects { y: Aspect[]; z?: Aspect; series?: Aspect[]; + splitColumn?: Aspect; + splitRow?: Aspect; } export interface AxisGrid { diff --git a/src/plugins/vis_type_xy/public/vis_component.tsx b/src/plugins/vis_type_xy/public/vis_component.tsx index dcf9f69cc291d..2b00d70f826d7 100644 --- a/src/plugins/vis_type_xy/public/vis_component.tsx +++ b/src/plugins/vis_type_xy/public/vis_component.tsx @@ -74,6 +74,7 @@ import { getComplexAccessor, getSplitSeriesAccessorFnMap, } from './utils/accessors'; +import { ChartSplitter } from './chart_splitter'; export interface VisComponentProps { visParams: VisParams; @@ -265,6 +266,12 @@ const VisComponent = (props: VisComponentProps) => { const splitSeriesAccessors = config.aspects.series ? compact(config.aspects.series.map(getComplexAccessor(COMPLEX_SPLIT_ACCESSOR))) : []; + const splitChartColumnAccessor = config.aspects.splitColumn + ? getComplexAccessor(COMPLEX_SPLIT_ACCESSOR)(config.aspects.splitColumn, 0) + : undefined; + const splitChartRowAccessor = config.aspects.splitRow + ? getComplexAccessor(COMPLEX_SPLIT_ACCESSOR)(config.aspects.splitRow, 0) + : undefined; return (
@@ -274,6 +281,12 @@ const VisComponent = (props: VisComponentProps) => { legendPosition={legendPosition} /> + {(splitChartColumnAccessor || splitChartRowAccessor) && ( + + )} = { reuseDomNode: true, render: (domNode, { visData, visConfig, visType }, handlers) => { const showNoResult = shouldShowNoResultsMessage(visData, visType); - const isSplitChart = Boolean(visConfig.dimensions.splitRow || visConfig.dimensions.splitRow); handlers.onDestroy(() => unmountComponentAtNode(domNode)); render( - <> - {isSplitChart && } - - - - + + + , domNode ); diff --git a/src/plugins/vis_type_xy/public/vis_types/area.tsx b/src/plugins/vis_type_xy/public/vis_types/area.tsx index 9529456f17d55..fde9ec5a97fb6 100644 --- a/src/plugins/vis_type_xy/public/vis_types/area.tsx +++ b/src/plugins/vis_type_xy/public/vis_types/area.tsx @@ -42,7 +42,6 @@ import { toExpressionAst } from '../to_ast'; import { ChartType } from '../../common'; import { getConfigCollections } from '../editor/collections'; import { getOptionTabs } from '../editor/common_config'; -import { SplitTooltip } from './split_tooltip'; export const getAreaVisTypeDefinition = ( showElasticChartsOptions = false @@ -189,12 +188,6 @@ export const getAreaVisTypeDefinition = ( min: 0, max: 1, aggFilter: ['!geohash_grid', '!geotile_grid', '!filter'], - // TODO: Remove when split chart aggs are supported - // https://github.com/elastic/kibana/issues/82496 - ...(showElasticChartsOptions && { - disabled: true, - tooltip: , - }), }, ]), }, diff --git a/src/plugins/vis_type_xy/public/vis_types/histogram.tsx b/src/plugins/vis_type_xy/public/vis_types/histogram.tsx index 87fcd53729f57..40bdad28bd368 100644 --- a/src/plugins/vis_type_xy/public/vis_types/histogram.tsx +++ b/src/plugins/vis_type_xy/public/vis_types/histogram.tsx @@ -42,7 +42,6 @@ import { ChartType } from '../../common'; import { getConfigCollections } from '../editor/collections'; import { getOptionTabs } from '../editor/common_config'; import { defaultCountLabel, LabelRotation } from '../../../charts/public'; -import { SplitTooltip } from './split_tooltip'; export const getHistogramVisTypeDefinition = ( showElasticChartsOptions = false @@ -192,12 +191,6 @@ export const getHistogramVisTypeDefinition = ( min: 0, max: 1, aggFilter: ['!geohash_grid', '!geotile_grid', '!filter'], - // TODO: Remove when split chart aggs are supported - // https://github.com/elastic/kibana/issues/82496 - ...(showElasticChartsOptions && { - disabled: true, - tooltip: , - }), }, ]), }, diff --git a/src/plugins/vis_type_xy/public/vis_types/horizontal_bar.tsx b/src/plugins/vis_type_xy/public/vis_types/horizontal_bar.tsx index 2806cb8e14983..15c1bb73f9a14 100644 --- a/src/plugins/vis_type_xy/public/vis_types/horizontal_bar.tsx +++ b/src/plugins/vis_type_xy/public/vis_types/horizontal_bar.tsx @@ -42,7 +42,6 @@ import { ChartType } from '../../common'; import { getConfigCollections } from '../editor/collections'; import { getOptionTabs } from '../editor/common_config'; import { defaultCountLabel, LabelRotation } from '../../../charts/public'; -import { SplitTooltip } from './split_tooltip'; export const getHorizontalBarVisTypeDefinition = ( showElasticChartsOptions = false @@ -191,12 +190,6 @@ export const getHorizontalBarVisTypeDefinition = ( min: 0, max: 1, aggFilter: ['!geohash_grid', '!geotile_grid', '!filter'], - // TODO: Remove when split chart aggs are supported - // https://github.com/elastic/kibana/issues/82496 - ...(showElasticChartsOptions && { - disabled: true, - tooltip: , - }), }, ]), }, diff --git a/src/plugins/vis_type_xy/public/vis_types/line.tsx b/src/plugins/vis_type_xy/public/vis_types/line.tsx index 84e4070df495b..8ec02725b134e 100644 --- a/src/plugins/vis_type_xy/public/vis_types/line.tsx +++ b/src/plugins/vis_type_xy/public/vis_types/line.tsx @@ -42,7 +42,6 @@ import { toExpressionAst } from '../to_ast'; import { ChartType } from '../../common'; import { getConfigCollections } from '../editor/collections'; import { getOptionTabs } from '../editor/common_config'; -import { SplitTooltip } from './split_tooltip'; export const getLineVisTypeDefinition = ( showElasticChartsOptions = false @@ -183,12 +182,6 @@ export const getLineVisTypeDefinition = ( min: 0, max: 1, aggFilter: ['!geohash_grid', '!geotile_grid', '!filter'], - // TODO: Remove when split chart aggs are supported - // https://github.com/elastic/kibana/issues/82496 - ...(showElasticChartsOptions && { - disabled: true, - tooltip: , - }), }, ]), }, diff --git a/src/plugins/vis_type_xy/public/vis_types/split_tooltip.tsx b/src/plugins/vis_type_xy/public/vis_types/split_tooltip.tsx deleted file mode 100644 index 84f1fd9187f4f..0000000000000 --- a/src/plugins/vis_type_xy/public/vis_types/split_tooltip.tsx +++ /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 React from 'react'; - -import { FormattedMessage } from '@kbn/i18n/react'; - -export function SplitTooltip() { - return ( - - ); -} From 645933fb68eb33b228a73fc4423fbfd60b9dcdfd Mon Sep 17 00:00:00 2001 From: nickofthyme Date: Tue, 22 Dec 2020 19:04:39 -0600 Subject: [PATCH 02/14] Fix tooltip and formatted split chart values --- .../vis_type_xy/public/chart_splitter.tsx | 47 ++++++++++--------- .../public/components/detailed_tooltip.tsx | 34 +++++++++++--- .../vis_type_xy/public/utils/accessors.tsx | 13 +++-- .../vis_type_xy/public/vis_component.tsx | 14 +++--- 4 files changed, 65 insertions(+), 43 deletions(-) diff --git a/src/plugins/vis_type_xy/public/chart_splitter.tsx b/src/plugins/vis_type_xy/public/chart_splitter.tsx index d9175e8e598e9..9f6a3a7307d17 100644 --- a/src/plugins/vis_type_xy/public/chart_splitter.tsx +++ b/src/plugins/vis_type_xy/public/chart_splitter.tsx @@ -26,24 +26,29 @@ interface ChartSplitterProps { sort?: GroupBySort; } -export const ChartSplitter = (props: ChartSplitterProps) => ( - <> - { - const splitTypeAccessor = props.splitColumnAccessor || props.splitRowAccessor; - if (splitTypeAccessor) { - return typeof splitTypeAccessor === 'function' - ? splitTypeAccessor(datum) - : datum[splitTypeAccessor]; - } - return spec.id; - }} - sort={props.sort || 'dataIndex'} - /> - - -); +export const ChartSplitter = ({ + splitColumnAccessor, + splitRowAccessor, + sort, +}: ChartSplitterProps) => + splitColumnAccessor || splitRowAccessor ? ( + <> + { + const splitTypeAccessor = splitColumnAccessor || splitRowAccessor; + if (splitTypeAccessor) { + return typeof splitTypeAccessor === 'function' + ? splitTypeAccessor(datum) + : datum[splitTypeAccessor]; + } + return spec.id; + }} + sort={sort || 'dataIndex'} + /> + + + ) : null; diff --git a/src/plugins/vis_type_xy/public/components/detailed_tooltip.tsx b/src/plugins/vis_type_xy/public/components/detailed_tooltip.tsx index 3427baed41b8d..925b272646fa6 100644 --- a/src/plugins/vis_type_xy/public/components/detailed_tooltip.tsx +++ b/src/plugins/vis_type_xy/public/components/detailed_tooltip.tsx @@ -27,19 +27,20 @@ import { XYChartSeriesIdentifier, } from '@elastic/charts'; -import { BUCKET_TYPES } from '../../../data/public'; - import { Aspects } from '../types'; import './_detailed_tooltip.scss'; import { fillEmptyValue } from '../utils/get_series_name_fn'; -import { COMPLEX_SPLIT_ACCESSOR } from '../utils/accessors'; +import { COMPLEX_SPLIT_ACCESSOR, isRangeAggType } from '../utils/accessors'; interface TooltipData { label: string; value: string; } +// TODO: replace when exported from elastic/charts +const DEFAULT_SINGLE_PANEL_SM_VALUE = '__ECH_DEFAULT_SINGLE_PANEL_SM_VALUE__'; + const getTooltipData = ( aspects: Aspects, header: TooltipValue | null, @@ -48,10 +49,7 @@ const getTooltipData = ( const data: TooltipData[] = []; if (header) { - const xFormatter = - aspects.x.aggType === BUCKET_TYPES.DATE_RANGE || aspects.x.aggType === BUCKET_TYPES.RANGE - ? null - : aspects.x.formatter; + const xFormatter = isRangeAggType(aspects.x.aggType) ? null : aspects.x.formatter; data.push({ label: aspects.x.title, value: xFormatter ? xFormatter(header.value) : `${header.value}`, @@ -91,6 +89,28 @@ const getTooltipData = ( } }); + if ( + aspects.splitColumn && + valueSeries.smHorizontalAccessorValue !== undefined && + valueSeries.smHorizontalAccessorValue !== DEFAULT_SINGLE_PANEL_SM_VALUE + ) { + data.push({ + label: aspects.splitColumn.title, + value: `${valueSeries.smHorizontalAccessorValue}`, + }); + } + + if ( + aspects.splitRow && + valueSeries.smVerticalAccessorValue !== undefined && + valueSeries.smVerticalAccessorValue !== DEFAULT_SINGLE_PANEL_SM_VALUE + ) { + data.push({ + label: aspects.splitRow.title, + value: `${valueSeries.smVerticalAccessorValue}`, + }); + } + return data; }; diff --git a/src/plugins/vis_type_xy/public/utils/accessors.tsx b/src/plugins/vis_type_xy/public/utils/accessors.tsx index a7a9813f7e00c..dab14d095b3ec 100644 --- a/src/plugins/vis_type_xy/public/utils/accessors.tsx +++ b/src/plugins/vis_type_xy/public/utils/accessors.tsx @@ -37,11 +37,15 @@ const getFieldName = (fieldName: string, index?: number) => { return `${fieldName}${indexStr}`; }; +export const isRangeAggType = (type: string | null) => + type === BUCKET_TYPES.DATE_RANGE || type === BUCKET_TYPES.RANGE; + /** * Returns accessor function for complex accessor types * @param aspect + * @param isComplex - forces to be functional/complex accessor */ -export const getComplexAccessor = (fieldName: string) => ( +export const getComplexAccessor = (fieldName: string, isComplex: boolean = false) => ( aspect: Aspect, index?: number ): Accessor | AccessorFn | undefined => { @@ -49,12 +53,7 @@ export const getComplexAccessor = (fieldName: string) => ( return; } - if ( - !( - (aspect.aggType === BUCKET_TYPES.DATE_RANGE || aspect.aggType === BUCKET_TYPES.RANGE) && - aspect.formatter - ) - ) { + if (!((isComplex || isRangeAggType(aspect.aggType)) && aspect.formatter)) { return aspect.accessor; } diff --git a/src/plugins/vis_type_xy/public/vis_component.tsx b/src/plugins/vis_type_xy/public/vis_component.tsx index 2b00d70f826d7..3b80d568f7921 100644 --- a/src/plugins/vis_type_xy/public/vis_component.tsx +++ b/src/plugins/vis_type_xy/public/vis_component.tsx @@ -267,10 +267,10 @@ const VisComponent = (props: VisComponentProps) => { ? compact(config.aspects.series.map(getComplexAccessor(COMPLEX_SPLIT_ACCESSOR))) : []; const splitChartColumnAccessor = config.aspects.splitColumn - ? getComplexAccessor(COMPLEX_SPLIT_ACCESSOR)(config.aspects.splitColumn, 0) + ? getComplexAccessor(COMPLEX_SPLIT_ACCESSOR, true)(config.aspects.splitColumn) : undefined; const splitChartRowAccessor = config.aspects.splitRow - ? getComplexAccessor(COMPLEX_SPLIT_ACCESSOR)(config.aspects.splitRow, 0) + ? getComplexAccessor(COMPLEX_SPLIT_ACCESSOR, true)(config.aspects.splitRow) : undefined; return ( @@ -281,12 +281,10 @@ const VisComponent = (props: VisComponentProps) => { legendPosition={legendPosition} /> - {(splitChartColumnAccessor || splitChartRowAccessor) && ( - - )} + Date: Tue, 22 Dec 2020 19:05:21 -0600 Subject: [PATCH 03/14] update advanced settings wording --- docs/management/advanced-options.asciidoc | 2 +- src/plugins/vis_type_xy/server/plugin.ts | 3 +-- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/docs/management/advanced-options.asciidoc b/docs/management/advanced-options.asciidoc index 99fadb240335a..ca7f6165035ae 100644 --- a/docs/management/advanced-options.asciidoc +++ b/docs/management/advanced-options.asciidoc @@ -454,7 +454,7 @@ of buckets to try to represent. [horizontal] [[visualization-visualize-chartslibrary]]`visualization:visualize:legacyChartsLibrary`:: -Enables legacy charts library for area, line and bar charts in visualize. Currently, only legacy charts library supports split chart aggregation. +Enables legacy charts library for area, line and bar charts in visualize. [[visualization-colormapping]]`visualization:colorMapping`:: **This setting is deprecated and will not be supported as of 8.0.** diff --git a/src/plugins/vis_type_xy/server/plugin.ts b/src/plugins/vis_type_xy/server/plugin.ts index fafc4052a88fa..5b0fff32530ed 100644 --- a/src/plugins/vis_type_xy/server/plugin.ts +++ b/src/plugins/vis_type_xy/server/plugin.ts @@ -35,8 +35,7 @@ export const uiSettingsConfig: Record> = { description: i18n.translate( 'visTypeXy.advancedSettings.visualization.legacyChartsLibrary.description', { - defaultMessage: - 'Enables legacy charts library for area, line and bar charts in visualize. Currently, only legacy charts library supports split chart aggregation.', + defaultMessage: 'Enables legacy charts library for area, line and bar charts in visualize.', } ), category: ['visualization'], From 8f600afdfb852b0e65479eecbfc874590b96ea9b Mon Sep 17 00:00:00 2001 From: Diana Derevyankina Date: Wed, 23 Dec 2020 13:52:46 +0300 Subject: [PATCH 04/14] Remove React import in files with no JSX and change the extension to .ts --- src/plugins/vis_type_xy/public/vis_types/{area.tsx => area.ts} | 2 -- .../public/vis_types/{histogram.tsx => histogram.ts} | 2 -- .../public/vis_types/{horizontal_bar.tsx => horizontal_bar.ts} | 2 -- src/plugins/vis_type_xy/public/vis_types/{line.tsx => line.ts} | 2 -- 4 files changed, 8 deletions(-) rename src/plugins/vis_type_xy/public/vis_types/{area.tsx => area.ts} (99%) rename src/plugins/vis_type_xy/public/vis_types/{histogram.tsx => histogram.ts} (99%) rename src/plugins/vis_type_xy/public/vis_types/{horizontal_bar.tsx => horizontal_bar.ts} (99%) rename src/plugins/vis_type_xy/public/vis_types/{line.tsx => line.ts} (99%) diff --git a/src/plugins/vis_type_xy/public/vis_types/area.tsx b/src/plugins/vis_type_xy/public/vis_types/area.ts similarity index 99% rename from src/plugins/vis_type_xy/public/vis_types/area.tsx rename to src/plugins/vis_type_xy/public/vis_types/area.ts index fde9ec5a97fb6..d597d63902fc8 100644 --- a/src/plugins/vis_type_xy/public/vis_types/area.tsx +++ b/src/plugins/vis_type_xy/public/vis_types/area.ts @@ -17,8 +17,6 @@ * under the License. */ -import React from 'react'; - import { i18n } from '@kbn/i18n'; // @ts-ignore import { euiPaletteColorBlind } from '@elastic/eui/lib/services'; diff --git a/src/plugins/vis_type_xy/public/vis_types/histogram.tsx b/src/plugins/vis_type_xy/public/vis_types/histogram.ts similarity index 99% rename from src/plugins/vis_type_xy/public/vis_types/histogram.tsx rename to src/plugins/vis_type_xy/public/vis_types/histogram.ts index 40bdad28bd368..6b3f58e55d9c9 100644 --- a/src/plugins/vis_type_xy/public/vis_types/histogram.tsx +++ b/src/plugins/vis_type_xy/public/vis_types/histogram.ts @@ -17,8 +17,6 @@ * under the License. */ -import React from 'react'; - import { i18n } from '@kbn/i18n'; // @ts-ignore import { euiPaletteColorBlind } from '@elastic/eui/lib/services'; diff --git a/src/plugins/vis_type_xy/public/vis_types/horizontal_bar.tsx b/src/plugins/vis_type_xy/public/vis_types/horizontal_bar.ts similarity index 99% rename from src/plugins/vis_type_xy/public/vis_types/horizontal_bar.tsx rename to src/plugins/vis_type_xy/public/vis_types/horizontal_bar.ts index 15c1bb73f9a14..0b4488edd8c2b 100644 --- a/src/plugins/vis_type_xy/public/vis_types/horizontal_bar.tsx +++ b/src/plugins/vis_type_xy/public/vis_types/horizontal_bar.ts @@ -17,8 +17,6 @@ * under the License. */ -import React from 'react'; - import { i18n } from '@kbn/i18n'; // @ts-ignore import { euiPaletteColorBlind } from '@elastic/eui/lib/services'; diff --git a/src/plugins/vis_type_xy/public/vis_types/line.tsx b/src/plugins/vis_type_xy/public/vis_types/line.ts similarity index 99% rename from src/plugins/vis_type_xy/public/vis_types/line.tsx rename to src/plugins/vis_type_xy/public/vis_types/line.ts index 8ec02725b134e..a0a4ad807b729 100644 --- a/src/plugins/vis_type_xy/public/vis_types/line.tsx +++ b/src/plugins/vis_type_xy/public/vis_types/line.ts @@ -17,8 +17,6 @@ * under the License. */ -import React from 'react'; - import { i18n } from '@kbn/i18n'; // @ts-ignore import { euiPaletteColorBlind } from '@elastic/eui/lib/services'; From 7ba9cea67636b5997293e3f5118aaef481dacd51 Mon Sep 17 00:00:00 2001 From: Diana Derevyankina Date: Wed, 13 Jan 2021 15:03:07 +0300 Subject: [PATCH 05/14] Simplify conditions --- src/plugins/vis_type_xy/public/config/get_aspects.ts | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/src/plugins/vis_type_xy/public/config/get_aspects.ts b/src/plugins/vis_type_xy/public/config/get_aspects.ts index 91413ceadb3d2..f5bc7a7a50101 100644 --- a/src/plugins/vis_type_xy/public/config/get_aspects.ts +++ b/src/plugins/vis_type_xy/public/config/get_aspects.ts @@ -51,12 +51,8 @@ export function getAspects( y: getAspectsFromDimension(columns, y) ?? [], z: z && z?.length > 0 ? getAspectsFromDimension(columns, z[0]) : undefined, series: getAspectsFromDimension(columns, seriesDimensions), - splitColumn: - splitColumn && splitColumn?.length > 0 - ? getAspectsFromDimension(columns, splitColumn[0]) - : undefined, - splitRow: - splitRow && splitRow?.length > 0 ? getAspectsFromDimension(columns, splitRow[0]) : undefined, + splitColumn: splitColumn?.length ? getAspectsFromDimension(columns, splitColumn[0]) : undefined, + splitRow: splitRow?.length ? getAspectsFromDimension(columns, splitRow[0]) : undefined, }; } From a7287b9f735922bfe5291df6d2abe84cfe909039 Mon Sep 17 00:00:00 2001 From: nickofthyme Date: Wed, 13 Jan 2021 15:31:54 -0600 Subject: [PATCH 06/14] fix bar interval on split charts in vislib --- .../public/vislib/lib/axis/axis_scale.js | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/src/plugins/vis_type_vislib/public/vislib/lib/axis/axis_scale.js b/src/plugins/vis_type_vislib/public/vislib/lib/axis/axis_scale.js index a24ba908e177f..968e8c080bca3 100644 --- a/src/plugins/vis_type_vislib/public/vislib/lib/axis/axis_scale.js +++ b/src/plugins/vis_type_vislib/public/vislib/lib/axis/axis_scale.js @@ -49,10 +49,19 @@ export class AxisScale { }); } - getTimeDomain(data) { + getDomainExtent(data) { return [this.minExtent(data), this.maxExtent(data)]; } + getOrdinalDomain(values = []) { + if (this.ordered?.interval !== undefined) { + const [min, max] = this.getDomainExtent(values); + return _.range(min, max + this.ordered.interval, this.ordered.interval); + } + + return values; + } + minExtent(data) { return this.calculateExtent(data || this.values, 'min'); } @@ -149,8 +158,8 @@ export class AxisScale { getExtents() { if (this.axisConfig.get('type') === 'category') { - if (this.axisConfig.isTimeDomain()) return this.getTimeDomain(this.values); - if (this.axisConfig.isOrdinal()) return this.values; + if (this.axisConfig.isTimeDomain()) return this.getDomainExtent(this.values); + if (this.axisConfig.isOrdinal()) return this.getOrdinalDomain(this.values); } const min = this.axisConfig.get('scale.min', this.getYMin()); From ad44d9f0b0a054ad17c188e140acfbef8f1cac6a Mon Sep 17 00:00:00 2001 From: Diana Derevyankina Date: Thu, 14 Jan 2021 18:25:34 +0300 Subject: [PATCH 07/14] Fix charts not splitting for terms boolean fields --- src/plugins/vis_type_xy/public/utils/accessors.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/plugins/vis_type_xy/public/utils/accessors.tsx b/src/plugins/vis_type_xy/public/utils/accessors.tsx index dab14d095b3ec..6ea4c5e073e45 100644 --- a/src/plugins/vis_type_xy/public/utils/accessors.tsx +++ b/src/plugins/vis_type_xy/public/utils/accessors.tsx @@ -61,7 +61,7 @@ export const getComplexAccessor = (fieldName: string, isComplex: boolean = false const accessor = aspect.accessor; const fn: AccessorFn = (d) => { const v = d[accessor]; - if (!v) { + if (v === undefined) { return; } const f = formatter(v); From e51c5b09e4a17fd3e3a1e3e3ac30cece8ec7b4cc Mon Sep 17 00:00:00 2001 From: nickofthyme Date: Thu, 14 Jan 2021 11:57:08 -0600 Subject: [PATCH 08/14] fix filtering for small multiples --- .../static/utils/transform_click_event.ts | 62 ++++++++++++++++--- .../vis_type_xy/public/vis_component.tsx | 29 +++++++-- 2 files changed, 77 insertions(+), 14 deletions(-) diff --git a/src/plugins/charts/public/static/utils/transform_click_event.ts b/src/plugins/charts/public/static/utils/transform_click_event.ts index 21460eb51e3fb..cb8ddbc1a5d5d 100644 --- a/src/plugins/charts/public/static/utils/transform_click_event.ts +++ b/src/plugins/charts/public/static/utils/transform_click_event.ts @@ -41,6 +41,9 @@ export interface BrushTriggerEvent { type AllSeriesAccessors = Array<[accessor: Accessor | AccessorFn, value: string | number]>; +// TODO: replace when exported from elastic/charts +const DEFAULT_SINGLE_PANEL_SM_VALUE = '__ECH_DEFAULT_SINGLE_PANEL_SM_VALUE__'; + /** * returns accessor value from string or function accessor * @param datum @@ -93,6 +96,29 @@ const getAllSplitAccessors = ( value, ]); +/** + * Gets value from small multiple accessors + * + * Only handles single small multiple accessor + */ +function getSplitChartValue({ + smHorizontalAccessorValue, + smVerticalAccessorValue, +}: Pick): + | string + | number + | undefined { + if (smHorizontalAccessorValue !== DEFAULT_SINGLE_PANEL_SM_VALUE) { + return smHorizontalAccessorValue; + } + + if (smVerticalAccessorValue !== DEFAULT_SINGLE_PANEL_SM_VALUE) { + return smVerticalAccessorValue; + } + + return; +} + /** * Reduces matching column indexes * @@ -103,7 +129,8 @@ const getAllSplitAccessors = ( const columnReducer = ( xAccessor: Accessor | AccessorFn | null, yAccessor: Accessor | AccessorFn | null, - splitAccessors: AllSeriesAccessors + splitAccessors: AllSeriesAccessors, + splitChartAccessor?: Accessor | AccessorFn ) => ( acc: Array<[index: number, id: string]>, { id }: Datatable['columns'][number], @@ -112,6 +139,7 @@ const columnReducer = ( if ( (xAccessor !== null && validateAccessorId(id, xAccessor)) || (yAccessor !== null && validateAccessorId(id, yAccessor)) || + (splitChartAccessor !== undefined && validateAccessorId(id, splitChartAccessor)) || splitAccessors.some(([accessor]) => validateAccessorId(id, accessor)) ) { acc.push([index, id]); @@ -132,13 +160,18 @@ const rowFindPredicate = ( geometry: GeometryValue | null, xAccessor: Accessor | AccessorFn | null, yAccessor: Accessor | AccessorFn | null, - splitAccessors: AllSeriesAccessors + splitAccessors: AllSeriesAccessors, + splitChartAccessor?: Accessor | AccessorFn, + splitChartValue?: string | number ) => (row: Datatable['rows'][number]): boolean => (geometry === null || (xAccessor !== null && getAccessorValue(row, xAccessor) === geometry.x && yAccessor !== null && - getAccessorValue(row, yAccessor) === geometry.y)) && + getAccessorValue(row, yAccessor) === geometry.y && + (splitChartAccessor === undefined || + (splitChartValue !== undefined && + getAccessorValue(row, splitChartAccessor) === splitChartValue)))) && [...splitAccessors].every(([accessor, value]) => getAccessorValue(row, accessor) === value); /** @@ -153,19 +186,28 @@ export const getFilterFromChartClickEventFn = ( table: Datatable, xAccessor: Accessor | AccessorFn, splitSeriesAccessorFnMap?: Map, + splitChartAccessor?: Accessor | AccessorFn, negate: boolean = false ) => (points: Array<[GeometryValue, XYChartSeriesIdentifier]>): ClickTriggerEvent => { const data: ValueClickContext['data']['data'] = []; points.forEach((point) => { const [geometry, { yAccessor, splitAccessors }] = point; + const splitChartValue = getSplitChartValue(point[1]); const allSplitAccessors = getAllSplitAccessors(splitAccessors, splitSeriesAccessorFnMap); const columns = table.columns.reduce>( - columnReducer(xAccessor, yAccessor, allSplitAccessors), + columnReducer(xAccessor, yAccessor, allSplitAccessors, splitChartAccessor), [] ); const row = table.rows.findIndex( - rowFindPredicate(geometry, xAccessor, yAccessor, allSplitAccessors) + rowFindPredicate( + geometry, + xAccessor, + yAccessor, + allSplitAccessors, + splitChartAccessor, + splitChartValue + ) ); const newData = columns.map(([column, id]) => ({ table, @@ -190,16 +232,20 @@ export const getFilterFromChartClickEventFn = ( * Helper function to get filter action event from series */ export const getFilterFromSeriesFn = (table: Datatable) => ( - { splitAccessors }: XYChartSeriesIdentifier, + { splitAccessors, ...rest }: XYChartSeriesIdentifier, splitSeriesAccessorFnMap?: Map, + splitChartAccessor?: Accessor | AccessorFn, negate = false ): ClickTriggerEvent => { + const splitChartValue = getSplitChartValue(rest); const allSplitAccessors = getAllSplitAccessors(splitAccessors, splitSeriesAccessorFnMap); const columns = table.columns.reduce>( - columnReducer(null, null, allSplitAccessors), + columnReducer(null, null, allSplitAccessors, splitChartAccessor), [] ); - const row = table.rows.findIndex(rowFindPredicate(null, null, null, allSplitAccessors)); + const row = table.rows.findIndex( + rowFindPredicate(null, null, null, allSplitAccessors, splitChartAccessor, splitChartValue) + ); const data: ValueClickContext['data']['data'] = columns.map(([column, id]) => ({ table, column, diff --git a/src/plugins/vis_type_xy/public/vis_component.tsx b/src/plugins/vis_type_xy/public/vis_component.tsx index dda208e429c67..0f0cb0d1fc299 100644 --- a/src/plugins/vis_type_xy/public/vis_component.tsx +++ b/src/plugins/vis_type_xy/public/vis_component.tsx @@ -129,7 +129,8 @@ const VisComponent = (props: VisComponentProps) => { ( visData: Datatable, xAccessor: Accessor | AccessorFn, - splitSeriesAccessors: Array + splitSeriesAccessors: Array, + splitChartAccessor?: Accessor | AccessorFn ): ElementClickListener => { const splitSeriesAccessorFnMap = getSplitSeriesAccessorFnMap(splitSeriesAccessors); return (elements) => { @@ -137,7 +138,8 @@ const VisComponent = (props: VisComponentProps) => { const event = getFilterFromChartClickEventFn( visData, xAccessor, - splitSeriesAccessorFnMap + splitSeriesAccessorFnMap, + splitChartAccessor )(elements as XYChartElementEvent[]); props.fireEvent(event); } @@ -166,12 +168,17 @@ const VisComponent = (props: VisComponentProps) => { ( visData: Datatable, xAccessor: Accessor | AccessorFn, - splitSeriesAccessors: Array + splitSeriesAccessors: Array, + splitChartAccessor?: Accessor | AccessorFn ) => { const splitSeriesAccessorFnMap = getSplitSeriesAccessorFnMap(splitSeriesAccessors); return (series: XYChartSeriesIdentifier): ClickTriggerEvent | null => { if (xAccessor !== null) { - return getFilterFromSeriesFn(visData)(series, splitSeriesAccessorFnMap); + return getFilterFromSeriesFn(visData)( + series, + splitSeriesAccessorFnMap, + splitChartAccessor + ); } return null; @@ -337,14 +344,24 @@ const VisComponent = (props: VisComponentProps) => { xDomain={xDomain} adjustedXDomain={adjustedXDomain} legendColorPicker={useColorPicker(legendPosition, setColor, getSeriesName)} - onElementClick={handleFilterClick(visData, xAccessor, splitSeriesAccessors)} + onElementClick={handleFilterClick( + visData, + xAccessor, + splitSeriesAccessors, + splitChartColumnAccessor ?? splitChartRowAccessor + )} onBrushEnd={handleBrush(visData, xAccessor, 'interval' in config.aspects.x.params)} onRenderChange={onRenderChange} legendAction={ config.aspects.series && (config.aspects.series?.length ?? 0) > 0 ? getLegendActions( canFilter, - getFilterEventData(visData, xAccessor, splitSeriesAccessors), + getFilterEventData( + visData, + xAccessor, + splitSeriesAccessors, + splitChartColumnAccessor ?? splitChartRowAccessor + ), handleFilterAction, getSeriesName ) From 92f9d1b4b9e0b1f3a6c6d1058c36c657d2c5c68f Mon Sep 17 00:00:00 2001 From: Diana Derevyankina Date: Mon, 18 Jan 2021 10:29:40 +0300 Subject: [PATCH 09/14] Change tests interval values from 100 to 1000000 --- .../public/fixtures/mock_data/histogram/_columns.js | 6 +++--- .../public/fixtures/mock_data/histogram/_rows.js | 6 +++--- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/plugins/vis_type_vislib/public/fixtures/mock_data/histogram/_columns.js b/src/plugins/vis_type_vislib/public/fixtures/mock_data/histogram/_columns.js index 7506784099d12..a87b86e70a488 100644 --- a/src/plugins/vis_type_vislib/public/fixtures/mock_data/histogram/_columns.js +++ b/src/plugins/vis_type_vislib/public/fixtures/mock_data/histogram/_columns.js @@ -25,7 +25,7 @@ export default { label: '404: response', xAxisLabel: 'machine.ram', ordered: { - interval: 100, + interval: 1000000, }, yAxisLabel: 'Count of documents', series: [ @@ -137,7 +137,7 @@ export default { label: '200: response', xAxisLabel: 'machine.ram', ordered: { - interval: 100, + interval: 1000000, }, yAxisLabel: 'Count of documents', series: [ @@ -249,7 +249,7 @@ export default { label: '503: response', xAxisLabel: 'machine.ram', ordered: { - interval: 100, + interval: 1000000, }, yAxisLabel: 'Count of documents', series: [ diff --git a/src/plugins/vis_type_vislib/public/fixtures/mock_data/histogram/_rows.js b/src/plugins/vis_type_vislib/public/fixtures/mock_data/histogram/_rows.js index 1482118587dc7..6fc03559ffb55 100644 --- a/src/plugins/vis_type_vislib/public/fixtures/mock_data/histogram/_rows.js +++ b/src/plugins/vis_type_vislib/public/fixtures/mock_data/histogram/_rows.js @@ -25,7 +25,7 @@ export default { label: '404: response', xAxisLabel: 'machine.ram', ordered: { - interval: 100, + interval: 1000000, }, yAxisLabel: 'Count of documents', series: [ @@ -72,7 +72,7 @@ export default { label: '200: response', xAxisLabel: 'machine.ram', ordered: { - interval: 100, + interval: 1000000, }, yAxisLabel: 'Count of documents', series: [ @@ -171,7 +171,7 @@ export default { label: '503: response', xAxisLabel: 'machine.ram', ordered: { - interval: 100, + interval: 1000000, }, yAxisLabel: 'Count of documents', series: [ From 4ab6368d1b22bc9a2aee8e90b5e219bcb8e4dd2a Mon Sep 17 00:00:00 2001 From: Diana Derevyankina Date: Tue, 19 Jan 2021 17:48:01 +0300 Subject: [PATCH 10/14] Revert "Change tests interval values from 100 to 1000000" This reverts commit 92f9d1b4b9e0b1f3a6c6d1058c36c657d2c5c68f. --- .../public/fixtures/mock_data/histogram/_columns.js | 6 +++--- .../public/fixtures/mock_data/histogram/_rows.js | 6 +++--- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/plugins/vis_type_vislib/public/fixtures/mock_data/histogram/_columns.js b/src/plugins/vis_type_vislib/public/fixtures/mock_data/histogram/_columns.js index a87b86e70a488..7506784099d12 100644 --- a/src/plugins/vis_type_vislib/public/fixtures/mock_data/histogram/_columns.js +++ b/src/plugins/vis_type_vislib/public/fixtures/mock_data/histogram/_columns.js @@ -25,7 +25,7 @@ export default { label: '404: response', xAxisLabel: 'machine.ram', ordered: { - interval: 1000000, + interval: 100, }, yAxisLabel: 'Count of documents', series: [ @@ -137,7 +137,7 @@ export default { label: '200: response', xAxisLabel: 'machine.ram', ordered: { - interval: 1000000, + interval: 100, }, yAxisLabel: 'Count of documents', series: [ @@ -249,7 +249,7 @@ export default { label: '503: response', xAxisLabel: 'machine.ram', ordered: { - interval: 1000000, + interval: 100, }, yAxisLabel: 'Count of documents', series: [ diff --git a/src/plugins/vis_type_vislib/public/fixtures/mock_data/histogram/_rows.js b/src/plugins/vis_type_vislib/public/fixtures/mock_data/histogram/_rows.js index 6fc03559ffb55..1482118587dc7 100644 --- a/src/plugins/vis_type_vislib/public/fixtures/mock_data/histogram/_rows.js +++ b/src/plugins/vis_type_vislib/public/fixtures/mock_data/histogram/_rows.js @@ -25,7 +25,7 @@ export default { label: '404: response', xAxisLabel: 'machine.ram', ordered: { - interval: 1000000, + interval: 100, }, yAxisLabel: 'Count of documents', series: [ @@ -72,7 +72,7 @@ export default { label: '200: response', xAxisLabel: 'machine.ram', ordered: { - interval: 1000000, + interval: 100, }, yAxisLabel: 'Count of documents', series: [ @@ -171,7 +171,7 @@ export default { label: '503: response', xAxisLabel: 'machine.ram', ordered: { - interval: 1000000, + interval: 100, }, yAxisLabel: 'Count of documents', series: [ From 91522875dc1261016b4d4475f415eb3e08c8bb85 Mon Sep 17 00:00:00 2001 From: Diana Derevyankina Date: Sat, 16 Jan 2021 19:36:18 +0300 Subject: [PATCH 11/14] Fix tests for interval issue in vislib (cherry picked from commit ef45b63c47da403399f76f00b49329531d445f31) --- .../public/vislib/lib/axis/axis_scale.js | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/src/plugins/vis_type_vislib/public/vislib/lib/axis/axis_scale.js b/src/plugins/vis_type_vislib/public/vislib/lib/axis/axis_scale.js index 968e8c080bca3..283bee7672799 100644 --- a/src/plugins/vis_type_vislib/public/vislib/lib/axis/axis_scale.js +++ b/src/plugins/vis_type_vislib/public/vislib/lib/axis/axis_scale.js @@ -18,7 +18,7 @@ */ import d3 from 'd3'; -import _ from 'lodash'; +import { range, isNumber, reduce, times } from 'lodash'; import moment from 'moment'; import { InvalidLogScaleValues } from '../../errors'; @@ -56,7 +56,8 @@ export class AxisScale { getOrdinalDomain(values = []) { if (this.ordered?.interval !== undefined) { const [min, max] = this.getDomainExtent(values); - return _.range(min, max + this.ordered.interval, this.ordered.interval); + const valuesInterval = Math.ceil((max - min) / values.length); + return range(min, max + valuesInterval, valuesInterval); } return values; @@ -82,7 +83,7 @@ export class AxisScale { return d3[extent]( opts.reduce(function (opts, v) { - if (!_.isNumber(v)) v = +v; + if (!isNumber(v)) v = +v; if (!isNaN(v)) opts.push(v); return opts; }, []) @@ -110,7 +111,7 @@ export class AxisScale { const y = moment(x); const method = n > 0 ? 'add' : 'subtract'; - _.times(Math.abs(n), function () { + times(Math.abs(n), function () { y[method](interval); }); @@ -120,7 +121,7 @@ export class AxisScale { getAllPoints() { const config = this.axisConfig; const data = this.visConfig.data.chartData(); - const chartPoints = _.reduce( + const chartPoints = reduce( data, (chartPoints, chart, chartIndex) => { const points = chart.series.reduce((points, seri, seriIndex) => { @@ -274,6 +275,6 @@ export class AxisScale { } validateScale(scale) { - if (!scale || _.isNaN(scale)) throw new Error('scale is ' + scale); + if (!scale || Number.isNaN(scale)) throw new Error('scale is ' + scale); } } From ba53abdc5c54cd82348c1a793c3ad626b6afd5f5 Mon Sep 17 00:00:00 2001 From: Diana Derevyankina Date: Wed, 20 Jan 2021 14:03:16 +0300 Subject: [PATCH 12/14] Revert axis_scale changes related to interval --- .../public/vislib/lib/axis/axis_scale.js | 18 ++++------------ .../vis_type_xy/public/chart_splitter.tsx | 21 +++++-------------- 2 files changed, 9 insertions(+), 30 deletions(-) diff --git a/src/plugins/vis_type_vislib/public/vislib/lib/axis/axis_scale.js b/src/plugins/vis_type_vislib/public/vislib/lib/axis/axis_scale.js index 09379efd483a3..ee9bed141fe4b 100644 --- a/src/plugins/vis_type_vislib/public/vislib/lib/axis/axis_scale.js +++ b/src/plugins/vis_type_vislib/public/vislib/lib/axis/axis_scale.js @@ -7,7 +7,7 @@ */ import d3 from 'd3'; -import { range, isNumber, reduce, times } from 'lodash'; +import { isNumber, reduce, times } from 'lodash'; import moment from 'moment'; import { InvalidLogScaleValues } from '../../errors'; @@ -38,20 +38,10 @@ export class AxisScale { }); } - getDomainExtent(data) { + getTimeDomain(data) { return [this.minExtent(data), this.maxExtent(data)]; } - getOrdinalDomain(values = []) { - if (this.ordered?.interval !== undefined) { - const [min, max] = this.getDomainExtent(values); - const valuesInterval = Math.ceil((max - min) / values.length); - return range(min, max + valuesInterval, valuesInterval); - } - - return values; - } - minExtent(data) { return this.calculateExtent(data || this.values, 'min'); } @@ -148,8 +138,8 @@ export class AxisScale { getExtents() { if (this.axisConfig.get('type') === 'category') { - if (this.axisConfig.isTimeDomain()) return this.getDomainExtent(this.values); - if (this.axisConfig.isOrdinal()) return this.getOrdinalDomain(this.values); + if (this.axisConfig.isTimeDomain()) return this.getTimeDomain(this.values); + if (this.axisConfig.isOrdinal()) return this.values; } const min = this.axisConfig.get('scale.min', this.getYMin()); diff --git a/src/plugins/vis_type_xy/public/chart_splitter.tsx b/src/plugins/vis_type_xy/public/chart_splitter.tsx index 9f6a3a7307d17..b28d9b5e8b072 100644 --- a/src/plugins/vis_type_xy/public/chart_splitter.tsx +++ b/src/plugins/vis_type_xy/public/chart_splitter.tsx @@ -1,20 +1,9 @@ /* - * 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. + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * and the Server Side Public License, v 1; you may not use this file except in + * compliance with, at your election, the Elastic License or the Server Side + * Public License, v 1. */ import React from 'react'; From 965824b6c05351c02b1b8ff68e3f806c557181e2 Mon Sep 17 00:00:00 2001 From: Diana Derevyankina Date: Fri, 22 Jan 2021 16:25:28 +0300 Subject: [PATCH 13/14] Enable _line_chart_split_chart test for new charts library --- .../apps/visualize/_line_chart_split_chart.ts | 28 +++++++++++++------ test/functional/apps/visualize/index.ts | 1 + 2 files changed, 21 insertions(+), 8 deletions(-) diff --git a/test/functional/apps/visualize/_line_chart_split_chart.ts b/test/functional/apps/visualize/_line_chart_split_chart.ts index aeb80a58c9655..3e74bf0b7c0ec 100644 --- a/test/functional/apps/visualize/_line_chart_split_chart.ts +++ b/test/functional/apps/visualize/_line_chart_split_chart.ts @@ -176,8 +176,8 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { await PageObjects.visEditor.changeYAxisFilterLabelsCheckbox(axisId, false); await PageObjects.visEditor.clickGo(); const labels = await PageObjects.visChart.getYAxisLabelsAsNumbers(); - const minLabel = 2; - const maxLabel = 5000; + const minLabel = await PageObjects.visChart.getExpectedValue(2, 1); + const maxLabel = await PageObjects.visChart.getExpectedValue(5000, 7000); const numberOfLabels = 10; expect(labels.length).to.be.greaterThan(numberOfLabels); expect(labels[0]).to.eql(minLabel); @@ -188,8 +188,8 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { await PageObjects.visEditor.changeYAxisFilterLabelsCheckbox(axisId, true); await PageObjects.visEditor.clickGo(); const labels = await PageObjects.visChart.getYAxisLabelsAsNumbers(); - const minLabel = 2; - const maxLabel = 5000; + const minLabel = await PageObjects.visChart.getExpectedValue(2, 1); + const maxLabel = await PageObjects.visChart.getExpectedValue(5000, 7000); const numberOfLabels = 10; expect(labels.length).to.be.greaterThan(numberOfLabels); expect(labels[0]).to.eql(minLabel); @@ -201,7 +201,10 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { await PageObjects.visEditor.changeYAxisFilterLabelsCheckbox(axisId, false); await PageObjects.visEditor.clickGo(); const labels = await PageObjects.visChart.getYAxisLabels(); - const expectedLabels = ['0', '2,000', '4,000', '6,000', '8,000', '10,000']; + const expectedLabels = await PageObjects.visChart.getExpectedValue( + ['0', '2,000', '4,000', '6,000', '8,000', '10,000'], + ['0', '1,000', '2,000', '3,000', '4,000', '5,000', '6,000', '7,000', '8,000', '9,000'] + ); expect(labels).to.eql(expectedLabels); }); @@ -210,7 +213,10 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { await PageObjects.visEditor.changeYAxisFilterLabelsCheckbox(axisId, true); await PageObjects.visEditor.clickGo(); const labels = await PageObjects.visChart.getYAxisLabels(); - const expectedLabels = ['2,000', '4,000', '6,000', '8,000']; + const expectedLabels = await PageObjects.visChart.getExpectedValue( + ['2,000', '4,000', '6,000', '8,000'], + ['0', '1,000', '2,000', '3,000', '4,000', '5,000', '6,000', '7,000', '8,000', '9,000'] + ); expect(labels).to.eql(expectedLabels); }); @@ -220,7 +226,10 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { await PageObjects.visEditor.clickGo(); const labels = await PageObjects.visChart.getYAxisLabels(); log.debug(labels); - const expectedLabels = ['0', '2,000', '4,000', '6,000', '8,000', '10,000']; + const expectedLabels = await PageObjects.visChart.getExpectedValue( + ['0', '2,000', '4,000', '6,000', '8,000', '10,000'], + ['0', '1,000', '2,000', '3,000', '4,000', '5,000', '6,000', '7,000', '8,000', '9,000'] + ); expect(labels).to.eql(expectedLabels); }); @@ -228,7 +237,10 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { await PageObjects.visEditor.changeYAxisFilterLabelsCheckbox(axisId, true); await PageObjects.visEditor.clickGo(); const labels = await PageObjects.visChart.getYAxisLabels(); - const expectedLabels = ['2,000', '4,000', '6,000', '8,000']; + const expectedLabels = await PageObjects.visChart.getExpectedValue( + ['2,000', '4,000', '6,000', '8,000'], + ['0', '1,000', '2,000', '3,000', '4,000', '5,000', '6,000', '7,000', '8,000', '9,000'] + ); expect(labels).to.eql(expectedLabels); }); }); diff --git a/test/functional/apps/visualize/index.ts b/test/functional/apps/visualize/index.ts index dddcd82f1d3f8..8dd2854419693 100644 --- a/test/functional/apps/visualize/index.ts +++ b/test/functional/apps/visualize/index.ts @@ -52,6 +52,7 @@ export default function ({ getService, loadTestFile }: FtrProviderContext) { // Test replaced vislib chart types loadTestFile(require.resolve('./_area_chart')); loadTestFile(require.resolve('./_line_chart_split_series')); + loadTestFile(require.resolve('./_line_chart_split_chart')); loadTestFile(require.resolve('./_point_series_options')); loadTestFile(require.resolve('./_vertical_bar_chart')); loadTestFile(require.resolve('./_vertical_bar_chart_nontimeindex')); From 4436b62046bfc2152ec8a2b96d2b1c57b94fbe69 Mon Sep 17 00:00:00 2001 From: Diana Derevyankina Date: Mon, 25 Jan 2021 13:54:16 +0300 Subject: [PATCH 14/14] Move chart splitter id to const --- src/plugins/vis_type_xy/public/chart_splitter.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/plugins/vis_type_xy/public/chart_splitter.tsx b/src/plugins/vis_type_xy/public/chart_splitter.tsx index b28d9b5e8b072..bf63ac1896bd1 100644 --- a/src/plugins/vis_type_xy/public/chart_splitter.tsx +++ b/src/plugins/vis_type_xy/public/chart_splitter.tsx @@ -15,6 +15,8 @@ interface ChartSplitterProps { sort?: GroupBySort; } +const CHART_SPLITTER_ID = '__chart_splitter__'; + export const ChartSplitter = ({ splitColumnAccessor, splitRowAccessor, @@ -23,7 +25,7 @@ export const ChartSplitter = ({ splitColumnAccessor || splitRowAccessor ? ( <> { const splitTypeAccessor = splitColumnAccessor || splitRowAccessor; if (splitTypeAccessor) { @@ -36,8 +38,8 @@ export const ChartSplitter = ({ sort={sort || 'dataIndex'} /> ) : null;