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

[WIP]: [Feature]: Histogram Support in Event Analytics with Config Options #743

Closed
wants to merge 17 commits into from
Closed

[WIP]: [Feature]: Histogram Support in Event Analytics with Config Options #743

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
57e4334
Initial commit for histogram
ruchika-narang May 17, 2022
8464700
Initial commit for histogram visualization
ruchika-narang Apr 22, 2022
1175456
Added test cases for histogram
pratibhapandey16 Apr 22, 2022
991b4f1
Resolved code review comments
pratibhapandey16 Apr 26, 2022
76fa85f
Added new line at the end
pratibhapandey16 Apr 26, 2022
6ba027b
Implementation of legend config option
ruchika-narang May 17, 2022
8fca8e1
Added Chart styles config option
ruchika-narang May 18, 2022
40ae0c1
Fixing typos
ruchika-narang May 18, 2022
843c059
Updated test cases
ruchika-narang May 19, 2022
d407a12
Updated Cypress test scripts for histogram chart
pratibhapandey16 May 23, 2022
b72fdca
Removed unwanted changes
pratibhapandey16 May 23, 2022
024757e
Review comments resolved
pratibhapandey16 May 26, 2022
ab7794e
Worked on refactoring of code
ruchika-narang May 30, 2022
0cb0940
Updated snapshots after resolving conflicts
ruchika-narang Jun 16, 2022
fa8d9e6
Updated name of function
ruchika-narang Jun 20, 2022
6617167
updated snapshots
ruchika-narang Jun 27, 2022
8667e83
Refactored code
ruchika-narang Jun 29, 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
25 changes: 24 additions & 1 deletion 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 @@ -19,7 +19,8 @@ import {
landOnEventVisualizations,
landOnPanels,
renderTreeMapchart,
renderPieChart
renderPieChart,
renderHistogramChart
} from '../utils/event_constants';
import { supressResizeObserverIssue } from '../utils/constants';

Expand Down Expand Up @@ -970,3 +971,25 @@ describe('Renders Tree Map for Parent Fields Multicolor Option', () => {
cy.get('.euiFormHelpText.euiFormRow__text').contains('Parent 2 field').should('exist');
});
});

describe('Renders Histogram chart', () =>{
beforeEach(() => {
landOnEventVisualizations();
});

it('Renders Histogram chart and save visualization', () => {
renderHistogramChart();
cy.get('.euiFlexItem.euiFlexItem--flexGrowZero .euiButton__text').eq(2).click();
cy.wait(delay);
saveVisualizationAndVerify();
});

it('Delete Visualization for Histogram chart from list of saved Visualizations on Event analytics page', () =>{
deleteVisualization();
})

it('Renders Histogram chart, add value parameters and verify Reset button click is working', () => {
renderHistogramChart();
cy.get('[data-test-subj="visualizeEditorResetButton"]').click();
});
});
22 changes: 16 additions & 6 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 @@ -59,24 +59,21 @@ export const landOnEventHome = () => {

export const landOnEventExplorer = () => {
cy.visit(
`${Cypress.env('opensearchDashboards')}/app/observability-dashboards#/event_analytics/explorer`
);
`${Cypress.env('opensearchDashboards')}/app/observability-dashboards#/event_analytics/explorer`);
cy.wait(delay);
};

export const landOnEventVisualizations = () => {
cy.visit(
`${Cypress.env('opensearchDashboards')}/app/observability-dashboards#/event_analytics/explorer`
);
`${Cypress.env('opensearchDashboards')}/app/observability-dashboards#/event_analytics/explorer`);
cy.get('button[id="main-content-vis"]').contains('Visualizations').click();
supressResizeObserverIssue();
cy.wait(delay);
};

export const landOnPanels = () => {
cy.visit(
`${Cypress.env('opensearchDashboards')}/app/observability-dashboards#/operational_panels`
);
`${Cypress.env('opensearchDashboards')}/app/observability-dashboards#/operational_panels`);
cy.wait(delay);
};

Expand Down Expand Up @@ -109,4 +106,17 @@ export const renderPieChart = () => {
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();
}
export const renderHistogramChart = () => {
querySearch(TEST_QUERIES[5].query, TEST_QUERIES[5].dateRangeDOM);
cy.get('[data-test-subj="configPane__vizTypeSelector"] [data-test-subj="comboBoxInput"]').type('Histogram').type('{enter}');
cy.wait(delay);
cy.get('g.draglayer.cursor-crosshair').should('exist');
cy.get('#configPanel__panelOptions .euiFieldText').click().type('Histogram chart');
cy.get('.euiFlexItem .euiFormRow [placeholder="Description"]').click().type('This is the description for Histogram chart');
cy.get('.euiIEFlexWrapFix').eq(1).contains('Chart Styles').should('exist');
cy.get('.euiFormLabel.euiFormRow__label').eq(2).contains('Bucket Size');
cy.get('.euiFieldNumber').eq(0).type('4');
cy.get('.euiFormLabel.euiFormRow__label').eq(3).contains('Bucket Offset');
cy.get('.euiFieldNumber').eq(0).type('6');
};
5 changes: 3 additions & 2 deletions dashboards-observability/common/constants/shared.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,7 @@ export interface ValueOptionsAxes {

export const NUMERICAL_FIELDS = ['short', 'integer', 'long', 'float', 'double'];

export const ENABLED_VIS_TYPES = [visChartTypes.Bar, visChartTypes.HorizontalBar, visChartTypes.Line, visChartTypes.Pie, visChartTypes.HeatMap, visChartTypes.Text, visChartTypes.TreeMap];
export const ENABLED_VIS_TYPES = [visChartTypes.Bar, visChartTypes.HorizontalBar, visChartTypes.Line, visChartTypes.Pie, visChartTypes.HeatMap, visChartTypes.Text, visChartTypes.TreeMap, visChartTypes.Histogram];

//Live tail constants
export const LIVE_OPTIONS = [
Expand Down Expand Up @@ -169,4 +169,5 @@ export const DefaultChartStyles: DefaultChartStylesProps = {
LegendPosition: 'v'
}

export const FILLOPACITY_DIV_FACTOR = 200;
export const FILLOPACITY_DIV_FACTOR = 200;
export const HISTOGRAM_CHART_MODE = 'group';
155 changes: 155 additions & 0 deletions ...s/explorer/visualizations/config_panel/__tests__/__snapshots__/config_panel.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1979,6 +1979,161 @@ exports[`Config panel component Renders config panel with visualization data 1`]
},
},
},
Object {
"category": "Visualizations",
"component": [Function],
"editorConfig": Object {
"panelTabs": Array [
Object {
"editor": [Function],
"id": "data-panel",
"mapTo": "dataConfig",
"name": "Data",
"sections": Array [
Object {
"editor": [Function],
"id": "chart-styles",
"mapTo": "chartStyles",
"name": "Chart styles",
"schemas": Array [
Object {
"component": [Function],
"eleType": "input",
"mapTo": "bucketSize",
"name": "Bucket Size",
},
Object {
"component": [Function],
"eleType": "input",
"mapTo": "bucketOffset",
"name": "Bucket Offset",
},
Object {
"component": [Function],
"defaultState": 2,
"eleType": "slider",
"mapTo": "lineWidth",
"name": "Line width",
"props": Object {
"max": 10,
},
},
Object {
"component": [Function],
"defaultState": 40,
"eleType": "slider",
"mapTo": "fillOpacity",
"name": "Fill Opacity",
"props": Object {
"max": 100,
},
},
],
},
Object {
"editor": [Function],
"id": "color-theme",
"mapTo": "colorTheme",
"name": "Color Theme",
"schemas": Array [],
},
Object {
"editor": [Function],
"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 {
"content": Array [],
"editor": [Function],
"id": "style-panel",
"mapTo": "layoutConfig",
"name": "Layout",
},
],
},
"fullLabel": "Histogram",
"iconType": "visArea",
"id": "histogram",
"label": "Histogram",
"name": "histogram",
"selection": Object {
"dataLoss": "nothing",
},
"type": "histogram",
"valueSeries": "yaxis",
"visConfig": Object {
"config": Object {
"displaylogo": false,
"responsive": true,
},
"layout": Object {
"height": 500,
"legend": Object {
"orientation": "v",
"traceorder": "normal",
},
"margin": Object {
"b": 30,
"l": 60,
"pad": 0,
"r": 30,
"t": 50,
},
"showlegend": true,
},
},
},
]
}
placeholder="Select a chart"
Expand Down
9 changes: 9 additions & 0 deletions ...xplorer/visualizations/config_panel/config_panes/config_controls/config_chart_options.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,6 +92,15 @@ export const ConfigChartOptions = ({
vizState,
...schema.props,
};
} else if (schema.eleType === 'slider') {
params = {
maxRange: schema.max,
title: schema.name,
currentRange: vizState[schema.mapTo] || schema?.defaultState,
handleSliderChange: handleConfigurationChange(schema.mapTo),
vizState,
...schema.props,
};
} else {
params = {
paddingTitle: schema.name,
Expand Down
Loading