Revert "[Feature] Move series side config from data config panel to c…

…hart styles (#1199)" This reverts commit 284db6c.
opensearch-project · Nov 2, 2022 · 2626a85 · 2626a85
1 parent 284db6c
commit 2626a85
Show file tree

Hide file tree

Showing 8 changed files with 42 additions and 217 deletions.
diff --git a/common/constants/explorer.ts b/common/constants/explorer.ts
@@ -82,7 +82,6 @@ export const PLOTLY_GAUGE_COLUMN_NUMBER = 4;
 export const APP_ANALYTICS_TAB_ID_REGEX = /application-analytics-tab.+/;
 export const DEFAULT_AVAILABILITY_QUERY = 'stats count() by span( timestamp, 1h )';
 export const ADD_BUTTON_TEXT = '+ Add color theme';
-export const ADD_SERIES_POSITION_TEXT = '+ Add label position';
 export const NUMBER_INPUT_MIN_LIMIT = 1;
 
 export const VIZ_CONTAIN_XY_AXIS = [
@@ -281,7 +280,3 @@ export const DATA_CONFIG_HINTS_INFO = {
   [BREAKDOWNS]:
     "Defines how each series is broken down. Breakdowns are 'by' clauses that subdivide the existing series.",
 };
-export const SERIES_POSITION_OPTIONS = [
-  { id: htmlIdGenerator('ct')(), label: 'Left', side: 'left' },
-  { id: htmlIdGenerator('ct')(), label: 'Right', side: 'right' },
-];
diff --git a/public/components/custom_panels/helpers/__tests__/__snapshots__/utils.test.tsx.snap b/public/components/custom_panels/helpers/__tests__/__snapshots__/utils.test.tsx.snap
@@ -1885,13 +1885,6 @@ exports[`Utils helper functions renders displayVisualization function 2`] = `
                       },
                     ],
                   },
-                  Object {
-                    "editor": [Function],
-                    "id": "yaxis-side",
-                    "mapTo": "seriesPosition",
-                    "name": "Series label position",
-                    "schemas": Array [],
-                  },
                   Object {
                     "editor": [Function],
                     "id": "color-theme",
@@ -2393,13 +2386,6 @@ exports[`Utils helper functions renders displayVisualization function 2`] = `
                         },
                       ],
                     },
-                    Object {
-                      "editor": [Function],
-                      "id": "yaxis-side",
-                      "mapTo": "seriesPosition",
-                      "name": "Series label position",
-                      "schemas": Array [],
-                    },
                     Object {
                       "editor": [Function],
                       "id": "color-theme",
@@ -2915,13 +2901,6 @@ exports[`Utils helper functions renders displayVisualization function 2`] = `
                           },
                         ],
                       },
-                      Object {
-                        "editor": [Function],
-                        "id": "yaxis-side",
-                        "mapTo": "seriesPosition",
-                        "name": "Series label position",
-                        "schemas": Array [],
-                      },
                       Object {
                         "editor": [Function],
                         "id": "color-theme",

diff --git a/...s/explorer/visualizations/config_panel/__tests__/__snapshots__/config_panel.test.tsx.snap b/...s/explorer/visualizations/config_panel/__tests__/__snapshots__/config_panel.test.tsx.snap
@@ -1410,13 +1410,6 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                           },
                         ],
                       },
-                      Object {
-                        "editor": [Function],
-                        "id": "yaxis-side",
-                        "mapTo": "seriesPosition",
-                        "name": "Series label position",
-                        "schemas": Array [],
-                      },
                       Object {
                         "editor": [Function],
                         "id": "color-theme",

diff --git a/...s/explorer/visualizations/config_panel/config_panes/config_controls/config_yaxis_side.tsx b/...s/explorer/visualizations/config_panel/config_panes/config_controls/config_yaxis_side.tsx
diff --git a/...er/visualizations/config_panel/config_panes/config_controls/data_configurations_panel.tsx b/...er/visualizations/config_panel/config_panes/config_controls/data_configurations_panel.tsx
@@ -306,6 +306,11 @@ export const DataConfigPanelItem = ({
     fillVisDataInStore({ visData: visData, query, visConfMetadata, visMeta });
   };
 
+  const isPositionButtonVisible = (sectionName: string) =>
+    sectionName === AGGREGATIONS &&
+    (visualizations.vis.name === VIS_CHART_TYPES.Line ||
+      visualizations.vis.name === VIS_CHART_TYPES.Scatter);
+
   const getTimeStampFilteredFields = (options: IField[]) =>
     filter(options, (i: IField) => i.type !== TIMESTAMP);
 
@@ -376,6 +381,19 @@ export const DataConfigPanelItem = ({
               )}
               {/* Show input fields for dimensions */}
               {!isAggregations && getCommonDimensionsField(selectedObj, name)}
+              {isPositionButtonVisible(name) && (
+                <EuiFormRow label="Side">
+                  <ButtonGroupItem
+                    legend="Side"
+                    groupOptions={[
+                      { id: 'left', label: 'Left' },
+                      { id: 'right', label: 'Right' },
+                    ]}
+                    idSelected={selectedObj.side || 'right'}
+                    handleButtonChange={(id: string) => updateList(id, 'side')}
+                  />
+                </EuiFormRow>
+              )}
             </EuiPanel>
             <EuiSpacer size="s" />
           </div>

diff --git a/...vent_analytics/explorer/visualizations/config_panel/config_panes/config_controls/index.ts b/...vent_analytics/explorer/visualizations/config_panel/config_panes/config_controls/index.ts
@@ -26,4 +26,3 @@ export { ButtonGroupItem } from './config_button_group';
 export { TextInputFieldItem } from './config_text_input';
 export { ConfigBarChartStyles } from './config_bar_chart_styles';
 export { ConfigAvailability } from './config_availability';
-export { ConfigYAxisSide } from './config_yaxis_side';
diff --git a/public/components/visualizations/charts/lines/line.tsx b/public/components/visualizations/charts/lines/line.tsx
@@ -44,7 +44,6 @@ export const Line = ({ visualizations, layout, config }: any) => {
       userConfigs: {
         dataConfig: {
           chartStyles = {},
-          seriesPosition = [],
           legend = {},
           span = {},
           colorTheme = [],
@@ -86,8 +85,7 @@ export const Line = ({ visualizations, layout, config }: any) => {
       colorTheme.find((colorSelected) => colorSelected.name.name === field)?.color) ||
     PLOTLY_COLOR[index % PLOTLY_COLOR.length];
   const timestampField = find(fields, (field) => field.type === 'timestamp');
-  const xaxis = [timestampField];
-  let multiYAxisLayout = {};
+  let xaxis = [timestampField];
 
   if (!timestampField || isEmpty(series)) return <EmptyPlaceholder icon={icontype} />;
 
@@ -96,48 +94,31 @@ export const Line = ({ visualizations, layout, config }: any) => {
     return traces.map((trace, idx: number) => {
       const selectedColor = getSelectedColorTheme(trace.aggName, idx);
       const fillColor = hexToRgb(selectedColor, fillOpacity);
-      const side = seriesPosition.find((seriesItem) => seriesItem.label === trace.name);
-      const multiYaxis = { yaxis: `y${idx + 1}` };
-
-      multiYAxisLayout = {
-        ...multiYAxisLayout,
-        [`yaxis${idx > 0 ? idx + 1 : ''}`]: {
-          titlefont: {
-            color: selectedColor,
-          },
-          automargin: true,
-          tickfont: {
-            color: selectedColor,
-            ...(labelSize && {
-              size: labelSize,
-            }),
-          },
-          ...(idx > 0 && { overlaying: 'y' }),
-          side: side ? side.side : 'left',
-        },
-      };
 
       return {
         ...trace,
         hoverinfo: tooltipMode === 'hidden' ? 'none' : tooltipText,
         type: 'line',
         mode,
-        fill: 'tozeroy',
-        fillcolor: fillColor,
+        ...{
+          fill: 'tozeroy',
+          fillcolor: fillColor,
+        },
         line: {
           shape: lineShape,
           width: lineWidth,
           color: selectedColor,
         },
         marker: {
           size: markerSize,
-          color: fillColor,
-          line: {
-            color: selectedColor,
-            width: lineWidth,
+          ...{
+            color: fillColor,
+            line: {
+              color: selectedColor,
+              width: lineWidth,
+            },
           },
         },
-        ...(idx >= 1 && multiYaxis),
       };
     });
   };
@@ -162,7 +143,16 @@ export const Line = ({ visualizations, layout, config }: any) => {
       transformPreprocessedDataToTraces(preprocessJsonData(jsonData, visConfig), visConfig),
       traceStyles
     );
-  }, [chartStyles, jsonData, dimensions, series, span, breakdowns, panelOptions, tooltipOptions]);
+  }, [
+    chartStyles,
+    jsonData,
+    dimensions,
+    series,
+    span,
+    breakdowns,
+    panelOptions,
+    tooltipOptions,
+  ]);
 
   const mergedLayout = useMemo(() => {
     const axisLabelsStyle = {
@@ -191,7 +181,9 @@ export const Line = ({ visualizations, layout, config }: any) => {
         tickangle: tickAngle,
         ...axisLabelsStyle,
       },
-      ...multiYAxisLayout,
+      yaxis: {
+        ...axisLabelsStyle,
+      },
       showlegend: showLegend,
       margin: PLOT_MARGIN,
     };

diff --git a/public/components/visualizations/charts/lines/line_type.ts b/public/components/visualizations/charts/lines/line_type.ts
@@ -14,7 +14,6 @@ import {
   ConfigLegend,
   InputFieldItem,
   ConfigColorTheme,
-  ConfigYAxisSide,
 } from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/config_controls';
 import { ConfigAvailability } from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_availability';
 import {
@@ -205,13 +204,6 @@ export const createLineTypeDefinition = (params: any = {}) => ({
               },
             ],
           },
-          {
-            id: 'yaxis-side',
-            name: 'Series label position',
-            editor: ConfigYAxisSide,
-            mapTo: 'seriesPosition',
-            schemas: [],
-          },
           {
             id: 'color-theme',
             name: 'Color theme',