Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Line chart: Legend, Chart styles features implementation on config panel - 697 #784

Closed
wants to merge 13 commits into from
Closed

Line chart: Legend, Chart styles features implementation on config panel - 697 #784

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
73b3a7e
graph style section UI schema
rinku-kumar-psl May 18, 2022
4a17136
changes for style mode and interpolation
rinku-kumar-psl May 18, 2022
21503a9
lineWidth integration for line mode
rinku-kumar-psl May 18, 2022
057e25c
changes for Legend and Orientation in Line
rinku-kumar-psl May 11, 2022
342ceb7
point size and Bar Alignment changes
rinku-kumar-psl May 18, 2022
70514cc
implemented fill opacity for line chart
rinku-kumar-psl May 18, 2022
d394875
changes for line width and fill opacity in bar mode and removed mode …
rinku-kumar-psl May 12, 2022
5fdd86f
updated bar mode opacity in line chart
rinku-kumar-psl May 13, 2022
98a6d2f
refactored the config chart style code
rinku-kumar-psl May 17, 2022
35d4c6c
snapshot updated and code refactored
rinku-kumar-psl May 18, 2022
3a25256
type added to new component
rinku-kumar-psl May 19, 2022
fced894
review comments addressed
rinku-kumar-psl May 23, 2022
8e742ac
cypress test case added and resolve button label wraping issue
rinku-kumar-psl May 24, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
197 changes: 194 additions & 3 deletions dashboards-observability/.cypress/integration/1_event_analytics.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -305,7 +305,7 @@ describe('Override timestamp for an index', () => {
cy.wait(delay);

cy.get('[data-attr-field="utc_time"] [data-test-subj="eventFields__default-timestamp-mark"')
.contains('Default Timestamp').should('exist');
.contains('Default Timestamp').should('exist');
cy.get('[data-attr-field="timestamp"] [data-test-subj="eventFields__default-timestamp-mark"').should('not.exist');
});
});
Expand Down Expand Up @@ -426,8 +426,8 @@ describe('Live tail stop automatically', () => {
cy.get('[data-test-subj="eventExplorer__topLevelTabbing"]')
.find('button.euiTab')
.should('have.length', initialLength + 1);
});
});
});

it('Click to switch to another tab', () => {
cy.get('[data-test-subj="eventExplorer__addNewTab"]').click();
Expand Down Expand Up @@ -659,4 +659,195 @@ describe('Renders chart and verify Toast message if X-axis and Y-axis values are
cy.get('[data-test-subj="eventExplorer__querySaveConfirm"]').click();
cy.get('[data-test-subj="euiToastHeader"]').contains('Invalid value options configuration selected.').should('exist');
});
});
});

describe('Render line chart for value options ', () => {
beforeEach(() => {
landOnEventVisualizations();
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="configPane__vizTypeSelector"] [data-test-subj="comboBoxInput"]').type('Line').type('{enter}')
});

it('Render line chart and add value Options ', () => {
cy.get('#configPanel__panelOptions .euiFieldText').click().type('Line Chart');
cy.get('.euiFlexItem .euiFormRow [placeholder="Description"]').click().type('This is the description for Line chart with value adding Parameter');
cy.get('.euiComboBox__inputWrap.euiComboBox__inputWrap-isClearable').eq(1).click();
cy.get('.euiComboBoxOption__content').eq(0).click();
cy.get('.euiComboBox__inputWrap.euiComboBox__inputWrap-isClearable').eq(2).click();
cy.get('.euiComboBoxOption__content').eq(0).click();
cy.get('[data-test-subj="visualizeEditorRenderButton"]').click({ force: true });
cy.get('.nsewdrag.drag.cursor-pointer').should('be.visible')
});
});

describe('Render line chart for Legend ', () => {
beforeEach(() => {
cy.wait(2000);
landOnEventVisualizations();
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('Line').click();
});

it('Render line chart and verify legends for Show and Hidden', () => {
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 });
cy.wait(delay);
cy.get('.nsewdrag.drag.cursor-pointer').should('be.visible')
.and(chart => {
expect(chart.height()).to.be.greaterThan(200)
})
});

it('Render line chart and verify legends for Position Right and Bottom', () => {
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 });
})
});

describe('Render line chart for Chart Styles ', () => {
beforeEach(() => {
landOnEventVisualizations();
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="configPane__vizTypeSelector"] [data-test-subj="comboBoxInput"]').type('Line').type('{enter}')
});

it('Render line chart and Verify Chart Style of Lines Mode with Smooth Interpolation ', () => {
cy.get('#configPanel__panelOptions .euiFieldText').click().type('Line Chart');
cy.get('.euiFlexItem .euiFormRow [placeholder="Description"]').click().type('This is the description for Line chart with Line Mode and Smooth Interpolation');
cy.get('[data-text="Lines"]').should('have.text', 'Lines');
cy.get('[data-text="Lines"] [data-test-subj="lines"]').should('have.attr', 'checked');
cy.get('[data-text="Smooth"]').should('have.text', 'Smooth');
cy.get('[data-text="Smooth"] [data-test-subj="spline"]').should('have.attr', 'checked');
cy.get('[data-test-subj="visualizeEditorRenderButton"]').click({ force: true });
});

it('Render line chart and Verify Chart Style of Lines Mode with Smooth Interpolation with higher Line width and Fill Opacity ', () => {
cy.get('#configPanel__panelOptions .euiFieldText').click().type('Line Chart');
cy.get('.euiFlexItem .euiFormRow [placeholder="Description"]').click().type('This is the description for Line chart with Line Mode and Smooth Interpolation');
cy.get('[data-text="Lines"]').should('have.text', 'Lines');
cy.get('[data-text="Lines"] [data-test-subj="lines"]').should('have.attr', 'checked');
cy.get('[data-text="Smooth"]').should('have.text', 'Smooth');
cy.get('[data-text="Smooth"] [data-test-subj="spline"]').should('have.attr', 'checked');
cy.get('input[type="range"]').eq(0)
.then($el => $el[0].stepUp(4))
.trigger('change')
cy.get('.euiRangeSlider').eq(0).should('have.value', 6)
cy.get('input[type="range"]').eq(1)
.then($el => $el[0].stepUp(40))
.trigger('change')
cy.get('.euiRangeSlider').eq(1).should('have.value', 80)
cy.get('[data-test-subj="visualizeEditorRenderButton"]').click({ force: true });
});

it('Render line chart and Verify Chart Style of Lines Mode with Linear Interpolation ', () => {
cy.get('#configPanel__panelOptions .euiFieldText').click().type('Line Chart');
cy.get('.euiFlexItem .euiFormRow [placeholder="Description"]').click().type('This is the description for Line chart with Line Mode and Linear Interpolation');
cy.get('[data-text="Lines"]').should('have.text', 'Lines');
cy.get('[data-text="Lines"] [data-test-subj="lines"]').should('have.attr', 'checked');
cy.get('[data-text="Linear"]').should('have.text', 'Linear').click();
cy.get('[data-text="Linear"]').should('have.text', 'Linear');
cy.get('[data-text="Linear"] [data-test-subj="linear"]').should('not.have.attr', 'checked');
cy.get('[data-test-subj="visualizeEditorRenderButton"]').click({ force: true });
});

it('Render line chart and Verify Chart Style of Lines Mode with Step before Interpolation ', () => {
cy.get('#configPanel__panelOptions .euiFieldText').click().type('Line Chart');
cy.get('.euiFlexItem .euiFormRow [placeholder="Description"]').click().type('This is the description for Line chart with Line Mode and Step before Interpolation');
cy.get('[data-text="Lines"]').should('have.text', 'Lines');
cy.get('[data-text="Lines"] [data-test-subj="lines"]').should('have.attr', 'checked');
cy.get('[data-text="Step before"]').should('have.text', 'Step before').click();
cy.get('[data-text="Step before"] [data-test-subj="Step before"]').should('not.have.attr', 'checked');
cy.get('[data-test-subj="visualizeEditorRenderButton"]').click({ force: true });
});

it('Render line chart and Verify Chart Style of Lines Mode with Step after Interpolation ', () => {
cy.get('#configPanel__panelOptions .euiFieldText').click().type('Line Chart');
cy.get('.euiFlexItem .euiFormRow [placeholder="Description"]').click().type('This is the description for Line chart with Line Mode and Step after Interpolation');
cy.get('[data-text="Lines"]').should('have.text', 'Lines');
cy.get('[data-text="Lines"] [data-test-subj="lines"]').should('have.attr', 'checked');
cy.get('[data-text="Step after"]').should('have.text', 'Step after').click();
cy.get('[data-text="Step after"] [data-test-subj="Step after"]').should('not.have.attr', 'checked');
cy.get('[data-test-subj="visualizeEditorRenderButton"]').click({ force: true });
});

it('Render line chart and Verify Chart Style of Bars Mode with Center bar alignment ', () => {
cy.get('#configPanel__panelOptions .euiFieldText').click().type('Line Chart');
cy.get('.euiFlexItem .euiFormRow [placeholder="Description"]').click().type('This is the description for Line chart with chart style of Bars');
cy.get('[data-text="Bars"]').should('have.text', 'Bars').click();
cy.get('[data-text="Center"] [data-test-subj="center"]').should('have.attr', 'checked');
cy.get('[data-test-subj="visualizeEditorRenderButton"]').click({ force: true });
});

it('Render line chart and Verify Chart Style of Bars Mode with Before bar alignment ', () => {
cy.get('#configPanel__panelOptions .euiFieldText').click().type('Line Chart');
cy.get('.euiFlexItem .euiFormRow [placeholder="Description"]').click().type('This is the description for Line chart with chart style of Bars');
cy.get('[data-text="Bars"]').should('have.text', 'Bars').click();
cy.get('[data-text="Before"] [data-test-subj="before"]').should('not.have.attr', 'checked');
cy.get('[data-test-subj="visualizeEditorRenderButton"]').click({ force: true });
});

it('Render line chart and Verify Chart Style of Bars Mode with After bar alignment ', () => {
cy.get('#configPanel__panelOptions .euiFieldText').click().type('Line Chart');
cy.get('.euiFlexItem .euiFormRow [placeholder="Description"]').click().type('This is the description for Line chart with chart style of Bars');
cy.get('[data-text="Bars"]').should('have.text', 'Bars').click();
cy.get('[data-text="After"] [data-test-subj="after"]').should('not.have.attr', 'checked');
cy.get('[data-test-subj="visualizeEditorRenderButton"]').click({ force: true });
});

it('Render line chart and Verify Chart Style of Points Mode', () => {
cy.get('#configPanel__panelOptions .euiFieldText').click().type('Line Chart');
cy.get('.euiFlexItem .euiFormRow [placeholder="Description"]').click().type('This is the description for Line chart with chart style of Points');
cy.get('[data-text="Points"]').should('have.text', 'Points').click();
cy.get('[data-text="Points"] [data-test-subj="markers"]').should('not.have.attr', 'checked');
cy.get('[data-test-subj="visualizeEditorRenderButton"]').click({ force: true });
});

it('Render line chart and Verify Chart Style of Points Mode with larger Point size', () => {
cy.get('#configPanel__panelOptions .euiFieldText').click().type('Line Chart');
cy.get('.euiFlexItem .euiFormRow [placeholder="Description"]').click().type('This is the description for Line chart with chart style of Points');
cy.get('[data-text="Points"]').should('have.text', 'Points').click();
cy.get('[data-text="Points"] [data-test-subj="markers"]').should('not.have.attr', 'checked');
cy.get('input[type="range"]')
.then($el => $el[0].stepUp(30))
.trigger('change')
cy.get('.euiRangeSlider').should('have.value', 35)
cy.get('[data-test-subj="visualizeEditorRenderButton"]').click({ force: true });
});

it('Render line chart and Verify Chart Style of Lines+Points Mode', () => {
cy.get('#configPanel__panelOptions .euiFieldText').click().type('Line Chart');
cy.get('.euiFlexItem .euiFormRow [placeholder="Description"]').click().type('This is the description for Line chart with chart style of Lines and Points');
cy.get('[data-text="Lines + Points"]').should('have.text', 'Lines + Points').click();
cy.get('[data-text="Lines + Points"] [data-test-subj="lines+markers"]').should('not.have.attr', 'checked');
cy.get('[data-test-subj="visualizeEditorRenderButton"]').click({ force: true });
});

it('Render line chart and Verify Chart Style of Lines+Points Mode with Line Width, Fill Opacity and Point Size', () => {
cy.get('#configPanel__panelOptions .euiFieldText').click().type('Line Chart');
cy.get('.euiFlexItem .euiFormRow [placeholder="Description"]').click().type('This is the description for Line chart with chart style of Lines and Points');
cy.get('[data-text="Lines + Points"]').should('have.text', 'Lines + Points').click();
cy.get('[data-text="Lines + Points"] [data-test-subj="lines+markers"]').should('not.have.attr', 'checked');
cy.get('input[type="range"]').eq(0)
.then($el => $el[0].stepUp(4))
.trigger('change')
cy.get('.euiRangeSlider').eq(0).should('have.value', 6)
cy.get('input[type="range"]').eq(1)
.then($el => $el[0].stepUp(40))
.trigger('change')
cy.get('.euiRangeSlider').eq(1).should('have.value', 80)
cy.get('input[type="range"]').eq(2)
.then($el => $el[0].stepUp(15))
.trigger('change')
cy.get('.euiRangeSlider').eq(2).should('have.value', 20)
cy.get('[data-test-subj="visualizeEditorRenderButton"]').click({ force: true });
});
});
4 changes: 4 additions & 0 deletions dashboards-observability/.cypress/utils/event_constants.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,10 @@ 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_logs | where response="503" or response="404" | stats count() as ip_count, sum(bytes) as sum_bytes by host, response | rename response as resp_code | sort - ip_count, + sum_bytes | eval per_ip_bytes=sum_bytes/ip_count, double_per_ip_bytes = 2 * per_ip_bytes',
dateRangeDOM: YEAR_TO_DATE_DOM_ID
},
];

export const TESTING_PANEL = 'Mock Testing Panels';
Expand Down
24 changes: 23 additions & 1 deletion dashboards-observability/common/constants/shared.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -148,4 +148,26 @@ export const LIVE_OPTIONS = [
},
];

export const LIVE_END_TIME ='now';
export const LIVE_END_TIME ='now';

export interface DefaultChartStylesProps {
DefaultMode: string,
Interpolation: string,
LineWidth: number,
FillOpacity: number,
MarkerSize: number,
ShowLegend: string,
LegendPosition: string
};

export const DefaultChartStyles: DefaultChartStylesProps = {
DefaultMode: 'lines',
Interpolation: 'spline',
LineWidth: 2,
FillOpacity: 40,
MarkerSize: 5,
ShowLegend: 'show',
LegendPosition: 'v'
}

export const FILLOPACITY_DIV_FACTOR = 200;
4 changes: 3 additions & 1 deletion dashboards-observability/common/types/explorer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -187,9 +187,11 @@ export interface IConfigPanelOptions {
export interface IConfigPanelOptionSection {
name: string;
component: null;
mapTo: 'mode';
mapTo: 'mode' | string;
props?: any;
isSingleSelection?: boolean;
defaultState?: number;
eleType?: string;
}

export interface IVisualizationTypeDefination {
Expand Down
Loading