From fa5b72e3cdb5ec4729828b3261f0cb08ae090926 Mon Sep 17 00:00:00 2001 From: ruchika-narang <79983862+ruchika-narang@users.noreply.github.com> Date: Tue, 20 Sep 2022 02:46:54 +0530 Subject: [PATCH] [Feature]: Timeseries/Scatter 2 way sync (#1030) * Fixed 2 way sync issues for line Signed-off-by: ruchika-narang * Updated snapshots Signed-off-by: ruchika-narang * Removed extra line Signed-off-by: ruchika-narang Signed-off-by: ruchika-narang Signed-off-by: Koustubh Karmalkar --- .../config_controls/data_config_panel_item.tsx | 11 ++++++++--- .../visualizations/charts/lines/line.tsx | 18 +++++++----------- 2 files changed, 15 insertions(+), 14 deletions(-) diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_config_panel_item.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_config_panel_item.tsx index 7e7d54f26..adf8a6b51 100644 --- a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_config_panel_item.tsx +++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_config_panel_item.tsx @@ -156,14 +156,17 @@ export const DataConfigPanelItem = ({ fieldOptionList, visualizations }: any) => }; const isPositionButtonVisible = (sectionName: string) => - sectionName === 'metrics' && visualizations.vis.name === visChartTypes.Line; + sectionName === 'metrics' && + (visualizations.vis.name === visChartTypes.Line || + visualizations.vis.name === visChartTypes.Scatter); const getOptionsAvailable = (sectionName: string) => { const selectedFields = {}; const unselectedFields = fieldOptionList.filter((field) => !selectedFields[field.label]); return sectionName === 'metrics' ? unselectedFields - : visualizations.vis.name === visChartTypes.Line + : visualizations.vis.name === visChartTypes.Line || + visualizations.vis.name === visChartTypes.Scatter ? unselectedFields.filter((i) => i.type === 'timestamp') : unselectedFields; }; @@ -285,7 +288,9 @@ export const DataConfigPanelItem = ({ fieldOptionList, visualizations }: any) => color="primary" onClick={() => handleServiceAdd(sectionName)} disabled={ - sectionName === 'dimensions' && visualizations.vis.name === visChartTypes.Line + sectionName === 'dimensions' && + (visualizations.vis.name === visChartTypes.Line || + visualizations.vis.name === visChartTypes.Scatter) } > Add diff --git a/dashboards-observability/public/components/visualizations/charts/lines/line.tsx b/dashboards-observability/public/components/visualizations/charts/lines/line.tsx index c5d55ffef..7234d4430 100644 --- a/dashboards-observability/public/components/visualizations/charts/lines/line.tsx +++ b/dashboards-observability/public/components/visualizations/charts/lines/line.tsx @@ -77,18 +77,14 @@ export const Line = ({ visualizations, layout, config }: any) => { dataConfig.colorTheme.find((colorSelected) => colorSelected.name.name === field.name) ?.color) || PLOTLY_COLOR[index % PLOTLY_COLOR.length]; - /** - * determine x axis - */ - const xaxis = useMemo(() => { - // span selection - const timestampField = find(fields, (field) => field.type === 'timestamp'); - if (dataConfig.span && dataConfig.span.time_field && timestampField) { - return [timestampField, ...dataConfig.dimensions]; - } + let xaxis; + const timestampField = find(fields, (field) => field.type === 'timestamp'); - return dataConfig.dimensions; - }, [dataConfig.dimensions]); + if (dataConfig.span && dataConfig.span.time_field && timestampField) { + xaxis = [timestampField, ...dataConfig.dimensions]; + } else { + xaxis = dataConfig.dimensions; + } if (isEmpty(xaxis) || isEmpty(yaxis)) return ;