From 5cfca3825eb4ddf83278b627958048b6ee894295 Mon Sep 17 00:00:00 2001 From: ruchika-narang <79983862+ruchika-narang@users.noreply.github.com> Date: Fri, 7 Oct 2022 00:55:36 +0530 Subject: [PATCH] Updated breakdowns with updated UI of configuration panel (#1077) Signed-off-by: ruchika-narang Signed-off-by: ruchika-narang --- common/constants/explorer.ts | 1 + common/types/explorer.ts | 3 +- .../data_configurations_panel.tsx | 73 +++++-------------- .../visualizations/charts/bar/bar.tsx | 10 +-- 4 files changed, 28 insertions(+), 59 deletions(-) diff --git a/common/constants/explorer.ts b/common/constants/explorer.ts index bd7d3f096c..1103d2a656 100644 --- a/common/constants/explorer.ts +++ b/common/constants/explorer.ts @@ -245,3 +245,4 @@ export enum ConfigChartOptionsEnum { } export const CUSTOM_LABEL = 'customLabel'; +export const BREAKDOWNS = 'breakdowns'; diff --git a/common/types/explorer.ts b/common/types/explorer.ts index d9b16733cc..09560d5792 100644 --- a/common/types/explorer.ts +++ b/common/types/explorer.ts @@ -20,6 +20,7 @@ import { GROUPBY, AGGREGATIONS, CUSTOM_LABEL, + BREAKDOWNS, } from '../constants/explorer'; import { CoreStart, @@ -301,7 +302,7 @@ export interface DimensionSpan { export interface ConfigList { [GROUPBY]?: ConfigListEntry[] | HistogramConfigList[]; [AGGREGATIONS]?: ConfigListEntry[]; - breakdowns?: ConfigListEntry[] | HistogramConfigList[]; + [BREAKDOWNS]?: ConfigListEntry[] | HistogramConfigList[]; span?: DimensionSpan; } diff --git a/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_configurations_panel.tsx b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_configurations_panel.tsx index 7dcaa36cf9..b5fbc8498f 100644 --- a/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_configurations_panel.tsx +++ b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_configurations_panel.tsx @@ -23,6 +23,7 @@ import { batch, useDispatch } from 'react-redux'; import { AGGREGATIONS, AGGREGATION_OPTIONS, + BREAKDOWNS, CUSTOM_LABEL, GROUPBY, RAW_QUERY, @@ -36,6 +37,7 @@ import { ConfigListEntry, DataConfigPanelFieldProps, DataConfigPanelProps, + SelectedConfigItem, } from '../../../../../../../../common/types/explorer'; import { TabContext } from '../../../../../hooks'; import { changeQuery } from '../../../../../redux/slices/query_slice'; @@ -128,10 +130,15 @@ export const DataConfigPanelItem = ({ setIsAddConfigClicked(true); const list = { ...configList, - [name]: [ - ...configList[name], - name === AGGREGATIONS ? initialSeriesEntry : initialDimensionEntry, - ], + [name]: + name !== `${BREAKDOWNS}` + ? [ + ...configList[name], + name === AGGREGATIONS ? initialSeriesEntry : initialDimensionEntry, + ] + : configList[name] !== undefined + ? [...configList[name], initialDimensionEntry] + : [initialDimensionEntry], }; setSelectedConfigItem({ index: list[name].length - 1, name }); setConfigList(list); @@ -197,7 +204,7 @@ export const DataConfigPanelItem = ({ ...userConfigs.dataConfig, [GROUPBY]: updatedConfigList[GROUPBY], [AGGREGATIONS]: updatedConfigList[AGGREGATIONS], - breakdowns: updatedConfigList.breakdowns, + [BREAKDOWNS]: updatedConfigList[BREAKDOWNS], span: updatedConfigList.span, }, }, @@ -220,13 +227,15 @@ export const DataConfigPanelItem = ({ : visualizations.vis.name === VIS_CHART_TYPES.Line || visualizations.vis.name === VIS_CHART_TYPES.Scatter ? unselectedFields.filter((i) => i.type === 'timestamp') + : sectionName === BREAKDOWNS + ? configList[GROUPBY] : unselectedFields; }; const getCommonUI = (title: string) => { const { index, name } = selectedConfigItem; const selectedObj = configList[name][index]; - const isDimensions = name === GROUPBY; + const isAggregations = name === AGGREGATIONS; return ( <>
@@ -238,7 +247,7 @@ export const DataConfigPanelItem = ({ /> {/* Aggregation input for Series */} - {!isDimensions && ( + {isAggregations && ( )} {/* Show input fields for Series when aggregation is not empty */} - {!isDimensions && selectedObj.aggregation !== '' && ( + {isAggregations && selectedObj.aggregation !== '' && ( <> {getCommonDimensionsField(selectedObj, name)} @@ -273,7 +282,7 @@ export const DataConfigPanelItem = ({ )} {/* Show input fields for dimensions */} - {isDimensions && getCommonDimensionsField(selectedObj, name)} + {!isAggregations && getCommonDimensionsField(selectedObj, name)} {isPositionButtonVisible(name) && ( ); - const getBreakDownFields = useCallback( - (configList: ConfigList) => { - return configList[GROUPBY]; - }, - [configList[GROUPBY]] - ); - - const Breakdowns = () => { - return ( - <> -
-
- - - { - setConfigList((staleState) => { - return { - ...staleState, - breakdowns: fields, - }; - }); - }} - /> - - -
-
- - ); - }; - const DateHistogram = useMemo(() => { return ( <> @@ -455,7 +427,7 @@ export const DataConfigPanelItem = ({ const getRenderFieldsObj = (sectionName: string): DataConfigPanelFieldProps => { return { - list: configList[sectionName], + list: configList[sectionName] ?? [], sectionName, visType: visualizations.vis.name, addButtonText: 'Click to add', @@ -485,12 +457,7 @@ export const DataConfigPanelItem = ({ {(visualizations.vis.name === VIS_CHART_TYPES.Bar || visualizations.vis.name === VIS_CHART_TYPES.HorizontalBar) && ( - <> - -

Breakdowns

- - {Breakdowns} - + <>{DataConfigPanelFields(getRenderFieldsObj(BREAKDOWNS))} )} ) : ( diff --git a/public/components/visualizations/charts/bar/bar.tsx b/public/components/visualizations/charts/bar/bar.tsx index a892822523..833df28ae7 100644 --- a/public/components/visualizations/charts/bar/bar.tsx +++ b/public/components/visualizations/charts/bar/bar.tsx @@ -15,7 +15,7 @@ import { AvailabilityUnitType } from '../../../event_analytics/explorer/visualiz import { ThresholdUnitType } from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_thresholds'; import { getPropName, hexToRgb } from '../../../event_analytics/utils/utils'; import { EmptyPlaceholder } from '../../../event_analytics/explorer/visualizations/shared_components/empty_placeholder'; -import { AGGREGATIONS, GROUPBY } from '../../../../../common/constants/explorer'; +import { AGGREGATIONS, BREAKDOWNS, GROUPBY } from '../../../../../common/constants/explorer'; import { IVisualizationContainerProps } from '../../../../../common/types/explorer'; export const Bar = ({ visualizations, layout, config }: any) => { @@ -40,7 +40,7 @@ export const Bar = ({ visualizations, layout, config }: any) => { isEmpty(queriedVizData) || !Array.isArray(dataConfig[GROUPBY]) || !Array.isArray(dataConfig[AGGREGATIONS]) || - (dataConfig.breakdowns && !Array.isArray(dataConfig.breakdowns)) + (dataConfig[BREAKDOWNS] && !Array.isArray(dataConfig[BREAKDOWNS])) ) return ; @@ -79,11 +79,11 @@ export const Bar = ({ visualizations, layout, config }: any) => { */ const xaxes = useMemo(() => { // breakdown selections - if (dataConfig.breakdowns) { + if (dataConfig[BREAKDOWNS]) { return [ ...dataConfig[GROUPBY].filter( (dimension) => - !some(dataConfig.breakdowns, (breakdown) => breakdown.label === dimension.label) + !some(dataConfig[BREAKDOWNS], (breakdown) => breakdown.label === dimension.label) ), ]; } @@ -95,7 +95,7 @@ export const Bar = ({ visualizations, layout, config }: any) => { } return [...dataConfig[GROUPBY]]; - }, [dataConfig[GROUPBY], dataConfig.breakdowns]); + }, [dataConfig[GROUPBY], dataConfig[BREAKDOWNS]]); /** * determine y axis