Feature/Pie chart legend, chart style, color theme and cypress test cases for same.

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

@@ -18,7 +18,8 @@ import {
   landOnEventExplorer,
   landOnEventVisualizations,
   landOnPanels,
-  renderTreeMapchart
+  renderTreeMapchart,
+  renderPieChart
 } from '../utils/event_constants';
 import { supressResizeObserverIssue } from '../utils/constants';
 
@@ -645,7 +646,6 @@ describe('Renders chart and verify Toast message if X-axis and Y-axis values are
   beforeEach(() => {
     landOnEventVisualizations();
   });
-
   it('Renders chart, clear X-axis and Y-axis value and click on Apply button, Toast message should display with error message', () => {
     querySearch(TEST_QUERIES[4].query, TEST_QUERIES[4].dateRangeDOM);
     cy.get('[data-test-subj="configPane__vizTypeSelector"] [data-test-subj="comboBoxInput"]')
@@ -811,5 +811,40 @@ describe('Renders Tree Map', () => {
     cy.get('.euiFormHelpText.euiFormRow__text').contains('Parent field').should('not.exist');
     cy.get('.euiButton__text').contains('Preview').click();
     cy.get('.trace.treemap path[style*="rgb(211, 96, 134)"]').should('exist');
+  })
+});
+
+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();
+    cy.get('[data-text="Right"]').should('have.text', 'Right');
+    cy.get('[data-text="Right"] [data-test-subj="v"]').should('have.attr', 'checked');
+    cy.get('[data-text="Bottom"]').should('have.text', 'Bottom').click();
+    cy.get('[data-text="Bottom"] [data-test-subj="h"]').should('not.have.attr', 'checked');
+    cy.get('[data-test-subj="visualizeEditorRenderButton"]').click({ force: true });
+  });
+
+  it('Render Pie chart and verify legends for Show and Hidden', () => {
+    renderPieChart();
+    cy.get('[data-text="Show"]').should('have.text', 'Show');
+    cy.get('[data-text="Show"] [data-test-subj="show"]').should('have.attr', 'checked');
+    cy.get('[data-text="Hidden"]').should('have.text', 'Hidden').click();
+    cy.get('[data-text="Hidden"] [data-test-subj="hidden"]').should('not.have.attr', 'checked');
+    cy.get('[data-test-subj="visualizeEditorRenderButton"]').click({ force: true });
+  });
+
+  it('Renders Pie chart with single color', () => {
+    renderPieChart();
+    cy.get('.euiIEFlexWrapFix').eq(3).contains('Chart Styles').should('exist');
+    cy.get('[data-test-subj="comboBoxInput"]').eq(3).click();
+    cy.get('[name="Pie"]').click();
+    cy.get('.euiSuperSelectControl').click();
+    cy.get('.euiContextMenuItem.euiSuperSelect__item.euiSuperSelect__item--hasDividers').eq(1).click();
+    cy.get('.euiFlexItem.euiFlexItem--flexGrowZero .euiButton__text').eq(2).click();
+    cy.wait(delay);
   });
 });
+

dashboards-observability/.cypress/utils/event_constants.js

@@ -28,10 +28,14 @@ export const TEST_QUERIES = [
     query: 'source = opensearch_dashboards_sample_data_logs | stats count(), avg(bytes) by host, tags',
     dateRangeDOM: YEAR_TO_DATE_DOM_ID
   },
- {
-  query: 'source=opensearch_dashboards_sample_data_flights | stats avg(FlightDelayMin) by DestCountry, DestCityName',
-  dateRangeDOM: YEAR_TO_DATE_DOM_ID
-},
+  {
+    query: 'source=opensearch_dashboards_sample_data_flights | stats avg(FlightDelayMin) by DestCountry, DestCityName',
+    dateRangeDOM: YEAR_TO_DATE_DOM_ID
+  },
+  {
+    query:"source = opensearch_dashboards_sample_data_logs | where response='503' or response='404' | stats count() by span(timestamp,1d)", 
+    dateRangeDOM: YEAR_TO_DATE_DOM_ID
+  },
 ];
 
 export const TESTING_PANEL = 'Mock Testing Panels';
@@ -92,3 +96,17 @@ export const renderTreeMapchart = () => {
     cy.get('[data-test-subj = "comboBoxInput"]').eq(4).click();
     cy.get('button[name="Slice Dice"]').click();
 };
+
+export const renderPieChart = () => {
+  querySearch(TEST_QUERIES[5].query, TEST_QUERIES[5].dateRangeDOM);
+  cy.get('[data-test-subj="configPane__vizTypeSelector"] [data-test-subj="comboBoxInput"]').click();
+  cy.get('[data-test-subj="comboBoxOptionsList "] button span').contains('Pie').click();
+  cy.wait(delay);
+    cy.get('#configPanel__panelOptions .euiFieldText').click().type('Pie chart');
+    cy.get('.euiFlexItem .euiFormRow [placeholder="Description"]').click().type('This is the description for Pie chart');
+    cy.get('.euiIEFlexWrapFix').eq(1).contains('Value options').should('exist');
+    cy.get('[data-test-subj="comboBoxInput"]').eq(1).click();
+    cy.get('[name="count()"]').eq(0).click();
+    cy.get('[data-test-subj="comboBoxToggleListButton"]').eq(0).click();
+    cy.get('[data-test-subj="comboBoxInput"]').eq(2).click();
+};

dashboards-observability/common/constants/colors.ts

@@ -166,3 +166,16 @@ export const COLOR_PALETTES = [
     type: 'gradient',
   },
 ];
+export const HEX_CONTRAST_COLOR = 0xFFFFFF;
+export const PIE_PALETTES = [
+  {
+    value: DEFAULT_PALETTE,
+    title: 'Default',
+    type: 'text',
+  },
+  {
+    value: SINGLE_COLOR_PALETTE,
+    title: 'Single Color',
+    type: 'text',
+  }
+];

dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/__tests__/__snapshots__/config_panel.test.tsx.snap

@@ -709,9 +709,63 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                           },
                           Object {
                             "editor": [Function],
-                            "id": "chart_options",
-                            "mapTo": "chartOptions",
-                            "name": "Chart options",
+                            "id": "legend",
+                            "mapTo": "legend",
+                            "name": "Legend",
+                            "schemas": Array [
+                              Object {
+                                "component": null,
+                                "mapTo": "showLegend",
+                                "name": "Show Legend",
+                                "props": Object {
+                                  "defaultSelections": Array [
+                                    Object {
+                                      "id": "show",
+                                      "name": "Show",
+                                    },
+                                  ],
+                                  "options": Array [
+                                    Object {
+                                      "id": "show",
+                                      "name": "Show",
+                                    },
+                                    Object {
+                                      "id": "hidden",
+                                      "name": "Hidden",
+                                    },
+                                  ],
+                                },
+                              },
+                              Object {
+                                "component": null,
+                                "mapTo": "position",
+                                "name": "Position",
+                                "props": Object {
+                                  "defaultSelections": Array [
+                                    Object {
+                                      "id": "v",
+                                      "name": "Right",
+                                    },
+                                  ],
+                                  "options": Array [
+                                    Object {
+                                      "id": "v",
+                                      "name": "Right",
+                                    },
+                                    Object {
+                                      "id": "h",
+                                      "name": "Bottom",
+                                    },
+                                  ],
+                                },
+                              },
+                            ],
+                          },
+                          Object {
+                            "editor": [Function],
+                            "id": "chart_styles",
+                            "mapTo": "chartStyles",
+                            "name": "Chart Styles",
                             "schemas": Array [
                               Object {
                                 "component": null,
@@ -737,6 +791,28 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                   ],
                                 },
                               },
+                              Object {
+                                "component": [Function],
+                                "defaultState": Object {
+                                  "name": "default",
+                                },
+                                "eleType": "colorpicker",
+                                "isSingleSelection": true,
+                                "mapTo": "colorTheme",
+                                "name": "Color Theme",
+                                "options": Array [
+                                  Object {
+                                    "title": "Default",
+                                    "type": "text",
+                                    "value": "default",
+                                  },
+                                  Object {
+                                    "title": "Single Color",
+                                    "type": "text",
+                                    "value": "singleColor",
+                                  },
+                                ],
+                              },
                             ],
                           },
                         ],
@@ -755,11 +831,13 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                   "iconType": "visPie",
                   "id": "pie",
                   "label": "Pie",
+                  "legendPosition": "v",
                   "name": "pie",
                   "selection": Object {
                     "dataLoss": "nothing",
                   },
                   "seriesAxis": "yaxis",
+                  "showLegend": true,
                   "type": "pie",
                   "visConfig": Object {
                     "config": Object {

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

@@ -0,0 +1,41 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { uniqueId } from 'lodash';
+import { EuiTitle, EuiSpacer, EuiButtonGroup } from '@elastic/eui';
+interface ToggleButtonOptions {
+  id: string;
+  label: string;
+}
+interface ToggleGroupProps {
+  title: string;
+  legend: string;
+  groupOptions: ToggleButtonOptions[];
+  idSelected: string;
+  handleButtonChange: (id: string, value?: any) => void;
+}
+export const ButtonGroupItem: React.FC<ToggleGroupProps> = ({
+  title, legend, groupOptions, idSelected, handleButtonChange
+}) => (
+  <>
+    <EuiTitle size="xxs">
+      <h3>{title}</h3>
+    </EuiTitle>
+    <EuiSpacer size="s" />
+    <div style={{ width: "fit-content" }}>
+      <EuiButtonGroup
+        id={uniqueId('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/config_chart_options.tsx

@@ -45,6 +45,15 @@ export const ConfigChartOptions = ({
           vizState,
           ...schema.props,
         };
+      } else if (schema.eleType === 'colorpicker') {
+        params = {
+          title: schema.name,
+          selectedColor: vizState[schema.mapTo] || schema?.defaultState,
+          colorPalettes: schema.options || [],
+          onSelectChange: handleConfigurationChange(schema.mapTo),
+          vizState,
+          ...schema.props,
+        };
       } else {
         params = {
           paddingTitle: schema.name,

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

@@ -0,0 +1,50 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useCallback, useMemo } from 'react';
+import { EuiAccordion, EuiSpacer } from '@elastic/eui';
+import { ButtonGroupItem } from './config_button_group';
+import { IConfigPanelOptionSection } from '../../../../../../../../common/types/explorer';
+
+export const ConfigLegend = ({ schemas, vizState, handleConfigChange }: any) => {
+  const handleConfigurationChange = useCallback(
+    (stateFiledName) => {
+      return (changes) => {
+        handleConfigChange({
+          ...vizState,
+          [stateFiledName]: changes,
+        });
+      };
+    },
+    [handleConfigChange, vizState]
+  );
+
+  const dimensions = useMemo(() => {
+    return schemas.map((schema: IConfigPanelOptionSection, index: number) => {
+      const DimensionComponent = schema.component || ButtonGroupItem;
+      const params = {
+        title: schema.name,
+        legend: schema.name,
+        groupOptions: schema?.props?.options.map((btn: { name: string }) => ({ ...btn, label: btn.name })),
+        idSelected: vizState[schema.mapTo] || schema?.props?.defaultSelections[0]?.id,
+        handleButtonChange: handleConfigurationChange(schema.mapTo),
+        vizState,
+        ...schema.props,
+      };
+      return (
+        <>
+          <DimensionComponent key={`viz-series-${index}`} {...params} />
+          <EuiSpacer size="s" />
+        </>
+      );
+    });
+  }, [schemas, vizState, handleConfigurationChange]);;
+
+  return (
+    <EuiAccordion initialIsOpen id="configPanel__legend" buttonContent="Legend" paddingSize="s">
+      {dimensions}
+    </EuiAccordion>
+  );
+};

dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/index.ts

@@ -11,3 +11,4 @@ export { ConfigThresholds } from './config_thresholds';
 export { ConfigText } from './config_text';
 export { ConfigGaugeValueOptions } from './config_gauge_options';
 export { ColorPalettePicker } from './config_color_palette_picker';
+export { ConfigLegend } from './config_legend';

dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/pie.test.tsx.snap

@@ -382,14 +382,17 @@ exports[`Pie component Renders pie component 1`] = `
           "rows": 1,
         },
         "height": 220,
+        "legend": Object {
+          "orientation": undefined,
+        },
         "margin": Object {
           "b": 15,
           "l": 60,
           "pad": 0,
           "r": 10,
           "t": 30,
         },
-        "showlegend": true,
+        "showlegend": undefined,
         "title": "",
       }
     }
@@ -442,8 +445,7 @@ exports[`Pie component Renders pie component 1`] = `
           "height": 220,
           "hovermode": "closest",
           "legend": Object {
-            "orientation": "h",
-            "traceorder": "normal",
+            "orientation": undefined,
           },
           "margin": Object {
             "b": 15,
@@ -452,7 +454,7 @@ exports[`Pie component Renders pie component 1`] = `
             "r": 10,
             "t": 30,
           },
-          "showlegend": true,
+          "showlegend": undefined,
           "title": "",
           "xaxis": Object {
             "automargin": true,