code refactored

Signed-off-by: rinku-kumar-psl <[email protected]>

# Conflicts:
#	dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_config_panel_item.tsx

dashboards-observability/.cypress/integration/1_event_analytics.spec.js

@@ -870,6 +870,7 @@ describe('Render Pie chart for Legend and single color contrast change', () => {
   beforeEach(() => {
     landOnEventVisualizations();
   });
+
   it('Render Pie chart and verify legends for Position Right and Bottom', () => {
     renderPieChart();
 

dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_button_group.tsx

@@ -19,21 +19,22 @@ interface ToggleGroupProps {
 export const ButtonGroupItem: React.FC<ToggleGroupProps> = ({
   title, legend, groupOptions, idSelected, handleButtonChange
 }) => (
-    <>
-        <EuiTitle size="xxs">
-            <h3>{title}</h3>
-        </EuiTitle>
-        <EuiSpacer size="s" />
-
-        <EuiButtonGroup
-            id={htmlIdGenerator('button-select')()}
-            name={title}
-            legend={legend}
-            options={groupOptions}
-            idSelected={idSelected}
-            onChange={handleButtonChange}
-            buttonSize="compressed"
-            isFullWidth={false}
-        />
-    </>
+  <>
+    <EuiTitle size="xxs">
+      <h3>{title}</h3>
+    </EuiTitle>
+    <EuiSpacer size="s" />
+    <div style={{ width: "fit-content" }}>
+    <EuiButtonGroup
+      id={htmlIdGenerator('button-select')()}
+      name={title}
+      legend={legend}
+      options={groupOptions}
+      idSelected={idSelected}
+      onChange={handleButtonChange}
+      buttonSize="compressed"
+      isFullWidth={false}
+    />
+    </div>
+  </>
 );

dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_config_panel_item.tsx

@@ -57,35 +57,17 @@ export const DataConfigPanelItem = ({ fieldOptionList, visualizations, tabID }:
     let list = { ...configList };
     let listItem = { ...list[name][index] };
     listItem = { ...listItem, [field]: value };
-    const x = {
+    const newList = {
       ...list,
       [name]: [
         ...list[name].slice(0, index),
         listItem,
         ...list[name].slice(index + 1, list[name].length),
       ],
     };
-    setConfigList(x);
+    setConfigList(newList);
   }
 
-  const onfieldOptionChange = (e, index: number, name: string) => {
-    let label = e.length > 0 ? e[0].label : '';
-    updateList(label, index, name, 'label');
-  };
-
-  const onAggregationChange = (e, index: number, name: string) => {
-    let label = e.length > 0 ? e[0].label : '';
-    updateList(label, index, name, 'aggregation');
-  };
-
-  const onCustomLabelChange = (e, index: number, name: string) => {
-    updateList(e.target.value, index, name, 'custom_label');
-  };
-
-  const handleSideChange = (id: string, index: number, name: string) => {
-    updateList(id, index, name, 'side');
-  };
-
   const handleServiceRemove = (index: number, name: string) => {
     const list = { ...configList };
     const arr = [...list[name]];
@@ -114,97 +96,89 @@ export const DataConfigPanelItem = ({ fieldOptionList, visualizations, tabID }:
     );
   };
 
-  const getCommonUI = (lists, sectionName: string) =>
-    lists.map((singleField, index: number) => (
-      <>
-        <div key={index} className="services">
-          <div className="first-division">
-            <EuiPanel color="subdued">
-              <EuiFormRow
-                label="Aggregation"
-                labelAppend={
-                  lists.length !== 1 && (
-                    <EuiText size="xs">
-                      <EuiIcon
-                        type="cross"
-                        color="danger"
-                        onClick={() => handleServiceRemove(index, sectionName)}
-                      />
-                    </EuiText>
-                  )
-                }
-              >
-                <EuiComboBox
-                  aria-label="Accessible screen reader label"
-                  placeholder="Select a aggregation"
-                  singleSelection={{ asPlainText: true }}
-                  options={AGGREGATION_OPTIONS}
-                  selectedOptions={
-                    singleField.aggregation ? [{ label: singleField.aggregation }] : []
-                  }
-                  onChange={(e) => onAggregationChange(e, index, sectionName)}
-                />
-              </EuiFormRow>
-              <EuiFormRow label="Field">
-                <EuiComboBox
-                  aria-label="Accessible screen reader label"
-                  placeholder="Select a field"
-                  singleSelection={{ asPlainText: true }}
-                  options={fieldOptionList}
-                  selectedOptions={singleField.label ? [{ label: singleField.label }] : []}
-                  onChange={(e) => onfieldOptionChange(e, index, sectionName)}
-                />
-              </EuiFormRow>
-
-              <EuiFormRow label="Custom label">
-                <EuiFieldText
-                  placeholder="Custom label"
-                  value={singleField.custom_label}
-                  onChange={(e) => onCustomLabelChange(e, index, sectionName)}
-                  aria-label="Use aria labels when no actual label is in use"
+  const getCommonUI = (lists, sectionName: string) => lists.map((singleField, index: number) => (
+    <>
+      <div key={index} className="services">
+        <div className="first-division">
+          <EuiPanel color="subdued">
+            <EuiFormRow
+              label="Aggregation"
+              labelAppend={
+                lists.length !== 1 && (
+                  <EuiText size="xs">
+                    <EuiIcon type="cross" color="danger" onClick={() => handleServiceRemove(index, sectionName)} />
+                  </EuiText>
+                )
+              }
+            >
+              <EuiComboBox
+                aria-label="Accessible screen reader label"
+                placeholder="Select a aggregation"
+                singleSelection={{ asPlainText: true }}
+                options={AGGREGATION_OPTIONS}
+                selectedOptions={singleField.aggregation ? [{ 'label': singleField.aggregation }] : []}
+                onChange={(e) => updateList(e.length > 0 ? e[0].label : '', index, sectionName, 'aggregation')}
+              />
+
+            </EuiFormRow>
+            <EuiFormRow
+              label="Field"
+            >
+              <EuiComboBox
+                aria-label="Accessible screen reader label"
+                placeholder="Select a field"
+                singleSelection={{ asPlainText: true }}
+                options={fieldOptionList}
+                selectedOptions={singleField.label ? [{ 'label': singleField.label }] : []}
+                onChange={(e) => updateList(e.length > 0 ? e[0].label : '', index, sectionName, 'label')}
+              />
+            </EuiFormRow>
+
+            <EuiFormRow
+              label="Custom label"
+            >
+              <EuiFieldText
+                placeholder="Custom label"
+                value={singleField.custom_label}
+                onChange={(e) => updateList(e.target.value, index, sectionName, 'custom_label')}
+                aria-label="Use aria labels when no actual label is in use" />
+            </EuiFormRow>
+
+            {sectionName === 'metrics' && visualizations.vis.name === visChartTypes.Line && (
+              <EuiFormRow label="Side">
+                <ButtonGroupItem
+                  legend="Side"
+                  groupOptions={[{ id: 'left', label: 'Left' }, { id: 'right', label: 'Right' }]}
+                  idSelected={index === 0 ? 'left' : singleField.side || "right"}
+                  handleButtonChange={(id: string) => updateList(id, index, sectionName, 'side')}
                 />
               </EuiFormRow>
-
-              {sectionName === 'metrics' && visualizations.vis.name === visChartTypes.Line && (
-                <EuiFormRow label="Side">
-                  <ButtonGroupItem
-                    legend="Side"
-                    groupOptions={[
-                      { id: 'left', label: 'Left' },
-                      { id: 'right', label: 'Right' },
-                    ]}
-                    idSelected="left"
-                    handleButtonChange={(id: string) =>
-                      handleSideChange(id, value, index, sectionName)
-                    }
-                  />
-                </EuiFormRow>
-              )}
-
-              <EuiSpacer size="s" />
-              {lists.length - 1 === index && (
-                <EuiFlexItem grow={true}>
-                  <EuiButton
-                    fullWidth
-                    iconType="plusInCircleFilled"
-                    color="primary"
-                    onClick={() => handleServiceAdd(sectionName)}
-                  >
-                    Add
-                  </EuiButton>
-                </EuiFlexItem>
-              )}
-            </EuiPanel>
-          </div>
+            )}
+
+            <EuiSpacer size="s" />
+            {lists.length - 1 === index &&
+              <EuiFlexItem grow={true}>
+                <EuiButton
+                  fullWidth
+                  iconType="plusInCircleFilled"
+                  color='primary'
+                  onClick={() => handleServiceAdd(sectionName)}
+                >
+                  Add
+                </EuiButton>
+              </EuiFlexItem>
+            }
+          </EuiPanel>
         </div>
-        <EuiSpacer size="s" />
-      </>
-    ));
+      </div>
+      <EuiSpacer size="s" />
+    </>
+  ))
 
   return (
     <>
       <EuiTitle size="xxs">
-        <h3>Data Configurations</h3>
+        <h3>Data Cofigurations</h3>
       </EuiTitle>
       <EuiSpacer size="s" />
       <EuiTitle size="xxs">
@@ -230,4 +204,4 @@ export const DataConfigPanelItem = ({ fieldOptionList, visualizations, tabID }:
       </EuiFlexItem>
     </>
   );
-};
+};

dashboards-observability/public/components/visualizations/charts/lines/line.tsx

@@ -9,10 +9,9 @@ import { Plt } from '../../plotly/plot';
 import { AvailabilityUnitType } from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_availability';
 import { ThresholdUnitType } from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_thresholds';
 import { DefaultChartStyles, FILLOPACITY_DIV_FACTOR, PLOTLY_COLOR } from '../../../../../common/constants/shared';
-import { hexToRgba } from '../../../../components/event_analytics/utils/utils';
+import { hexToRgb } from '../../../../components/event_analytics/utils/utils';
 
 export const Line = ({ visualizations, layout, config }: any) => {
-  console.log("visualizations:################:", visualizations);
   const { DefaultMode, Interpolation, LineWidth, FillOpacity, MarkerSize, LegendPosition, ShowLegend } = DefaultChartStyles;
   const {
     data = {},
@@ -34,7 +33,7 @@ export const Line = ({ visualizations, layout, config }: any) => {
   const mode = dataConfig?.chartStyles?.style || DefaultMode;
   const lineShape = dataConfig?.chartStyles?.interpolation || Interpolation;
   const lineWidth = dataConfig?.chartStyles?.lineWidth || LineWidth;
-  const showLegend = dataConfig?.legend?.showLegend && dataConfig.legend.showLegend !== ShowLegend ? false : true;
+  const showLegend = !(dataConfig?.legend?.showLegend && dataConfig.legend.showLegend !== ShowLegend);
   const legendPosition = dataConfig?.legend?.position || LegendPosition;
   const markerSize = dataConfig?.chartStyles?.pointSize || MarkerSize;
   const fillOpacity = dataConfig?.chartStyles?.fillOpacity !== undefined ? dataConfig?.chartStyles?.fillOpacity / FILLOPACITY_DIV_FACTOR : FillOpacity / FILLOPACITY_DIV_FACTOR;
@@ -51,7 +50,7 @@ export const Line = ({ visualizations, layout, config }: any) => {
     const isBarMode = mode === 'bar';
 
     let calculatedLineValues = valueSeries.map((field: any, index: number) => {
-      const fillColor = hexToRgba(PLOTLY_COLOR[index % PLOTLY_COLOR.length], fillOpacity);
+      const fillColor = hexToRgb(PLOTLY_COLOR[index % PLOTLY_COLOR.length], fillOpacity);
       const barMarker = {
         color: fillColor,
         line: {