[Feature]: Timeseries/Scatter 2 way sync (opensearch-project#1030)

* Fixed 2 way sync issues for line Signed-off-by: ruchika-narang <[email protected]> * Updated snapshots Signed-off-by: ruchika-narang <[email protected]> * Removed extra line Signed-off-by: ruchika-narang <[email protected]> Signed-off-by: ruchika-narang <[email protected]> Signed-off-by: Koustubh Karmalkar <[email protected]>
Koustubh5585 · Sep 27, 2022 · fa5b72e · fa5b72e
1 parent 3eb04cc
commit fa5b72e
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 14 deletions.
diff --git a/...lorer/visualizations/config_panel/config_panes/config_controls/data_config_panel_item.tsx b/...lorer/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
@@ -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 <EmptyPlaceholder icon={visualizations?.vis?.icontype} />;