Skip to content

Commit

Permalink
Feature/Pie chart legend, chart style, color theme and cypress test c…
Browse files Browse the repository at this point in the history
…ases for same. (#776)

* pie chart legends, chart color contrast and cypress test cases

Signed-off-by: Deepak Nevde <deepak_nevde@persistent.com>

* Added color code in constants

Signed-off-by: Deepak Nevde <deepak_nevde@persistent.com>

* Snapshots updated

Signed-off-by: Deepak Nevde <deepak_nevde@persistent.com>

* Conflicts resolved

Signed-off-by: Deepak Nevde <deepak_nevde@persistent.com>

* Review comment addressed

Signed-off-by: Deepak Nevde <deepak_nevde@persistent.com>

* color variable changes

Signed-off-by: Deepak Nevde <deepak_nevde@persistent.com>
  • Loading branch information
deepaknevdepsl authored Jun 16, 2022
1 parent ccee0d3 commit 10abff2
Show file tree
Hide file tree
Showing 11 changed files with 344 additions and 20 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,8 @@ import {
landOnEventExplorer,
landOnEventVisualizations,
landOnPanels,
renderTreeMapchart
renderTreeMapchart,
renderPieChart
} from '../utils/event_constants';
import { supressResizeObserverIssue } from '../utils/constants';

Expand Down Expand Up @@ -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"]')
Expand Down Expand Up @@ -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);
});
});

26 changes: 22 additions & 4 deletions dashboards-observability/.cypress/utils/event_constants.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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();
};
13 changes: 13 additions & 0 deletions dashboards-observability/common/constants/colors.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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',
}
];
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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",
},
],
},
],
},
],
Expand All @@ -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 {
Expand Down
Original file line number Diff line number Diff line change
@@ -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>
</>
);
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
Original file line number Diff line number Diff line change
@@ -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>
);
};
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Original file line number Diff line number Diff line change
Expand Up @@ -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": "",
}
}
Expand Down Expand Up @@ -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,
Expand All @@ -452,7 +454,7 @@ exports[`Pie component Renders pie component 1`] = `
"r": 10,
"t": 30,
},
"showlegend": true,
"showlegend": undefined,
"title": "",
"xaxis": Object {
"automargin": true,
Expand Down
Loading

0 comments on commit 10abff2

Please sign in to comment.