Skip to content

Commit

Permalink
[Feature]: Heatmap- Color theme implementation in config panel (#778)
Browse files Browse the repository at this point in the history 
* Implementation of color theme for heatmap

Signed-off-by: ruchika-narang <[email protected]>

* refactoring code

Signed-off-by: ruchika-narang <[email protected]>

* HeatMap Cypress TestCase

Signed-off-by: Nidhi Singhai <[email protected]>

* Cypress TestCase for HeatMap

Signed-off-by: Nidhi Singhai <[email protected]>

* Update Done according to Comment

Signed-off-by: Nidhi Singhai <[email protected]>

* Refactored code

Signed-off-by: ruchika-narang <[email protected]>

* Updated snapshot test case

Signed-off-by: ruchika-narang <[email protected]>

* Fixed toast implementation and no result found for heatmap

Signed-off-by: ruchika-narang <[email protected]>

* Undefined checks for value options

Signed-off-by: ruchika-narang <[email protected]>

Co-authored-by: Nidhi Singhai <[email protected]>
  • Loading branch information
@ruchika-narang @nidhisinghai
ruchika-narang and nidhisinghai authored Jun 16, 2022
1 parent 10abff2 commit 4a4c62a
Show file tree
Hide file tree
Showing 11 changed files with 640 additions and 56 deletions.
63 changes: 63 additions & 0 deletions dashboards-observability/.cypress/integration/1_event_analytics.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -848,3 +848,66 @@ describe('Render Pie chart for Legend and single color contrast change', () => {
});
});

describe('Renders heatmap chart for Chart Style', () => {
beforeEach(() => {
landOnEventVisualizations();
querySearch(TEST_QUERIES[4].query, TEST_QUERIES[4].dateRangeDOM);
cy.get('[data-test-subj="configPane__vizTypeSelector"] [data-test-subj="comboBoxInput"]').click();
cy.get('[data-test-subj="comboBoxOptionsList "] button span').contains('Heatmap').click();
});

it('Renders heatmap chart with default Color Mode and Scheme', () => {
cy.get('.ewdrag.drag.cursor-ew-resize').should('be.visible');
cy.get('g.g-gtitle text[data-unformatted|="avg(bytes)"]').should('exist');
});

it('Renders heatmap chart with default Chart Style and Z-axis count()', () => {
cy.get('#configPanel__value_options [data-test-subj="comboBoxInput"]').click();
cy.get('[data-test-subj="comboBoxOptionsList "] button span').contains('count()').click();
cy.get('[data-test-subj="visualizeEditorRenderButton"]').click();
cy.get('.ewdrag.drag.cursor-ew-resize').should('be.visible');
cy.get('g.g-gtitle text[data-unformatted|="count()"]').should('exist');
});

it('Renders heatmap chart with default Chart Style and Z-axis avg(bytes)', () => {
cy.get('#configPanel__value_options [data-test-subj="comboBoxInput"]').click();
cy.get('[data-test-subj="comboBoxOptionsList "] button span').contains('avg(bytes)').click();
cy.get('[data-test-subj="visualizeEditorRenderButton"]').click();
cy.get('.ewdrag.drag.cursor-ew-resize').should('be.visible');
cy.get('g.g-gtitle text[data-unformatted|="avg(bytes)"]').should('exist');
});

it('Renders heatmap chart and Verify if Color Mode is Spectrum then by default Scheme is Reds', () => {
cy.get('[data-test-subj="comboBoxInput"]').eq(2).should('contain','Spectrum');
cy.get('[aria-haspopup="true"]').eq(1).should('contain','Reds');
cy.get('stop[stop-color="rgb(178, 10, 28)"]').should('exist');
cy.get('[data-test-subj="visualizeEditorRenderButton"]').click();
});

it('Renders heatmap chart and Verify if Color Mode is opacity then by default Scheme is Color', () => {
cy.get('[data-test-subj="comboBoxInput"]').eq(2).click();
cy.get('.euiComboBoxOption__content').contains('opacity').click();
cy.get('.euiTitle.euiTitle--xxsmall').eq(2).should('contain','Color');
cy.get('[data-test-subj="visualizeEditorRenderButton"]').click();
cy.get('stop[stop-color="rgb(19, 19, 19)"]').should('exist');
});

it('Renders heatmap chart for Color Mode Spectrum and Change color of Scheme', () => {
cy.get('[aria-haspopup="true"]').eq(1).click();
cy.get('.euiColorPalettePicker__itemTitle').contains('Red-Blue').click();
cy.get('[data-test-subj="visualizeEditorRenderButton"]').click();
cy.get('stop[stop-color="rgb(5, 10, 172)"]').should('exist');
cy.get('stop[stop-color="rgb(178, 10, 28)"]').should('exist');
});

it('Renders heatmap chart for Color Mode opacity and Change color', () => {
cy.get('[data-test-subj="comboBoxInput"]').eq(2).click();
cy.get('.euiComboBoxOption__content').contains('opacity').click();
cy.get('[data-test-subj="euiColorPickerAnchor"]').click();
cy.get('.euiTitle.euiTitle--xxsmall').eq(2).should('contain','Color');
cy.get('[aria-label="Select #D6BF57 as the color"]').click();
cy.get('[data-test-subj="visualizeEditorRenderButton"]').click();
cy.get('stop[stop-color="rgb(255, 255, 214)"]').should('exist');
cy.get('stop[stop-color="rgb(214, 191, 87)"]').should('exist');
});
});
5 changes: 5 additions & 0 deletions dashboards-observability/common/constants/colors.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -179,3 +179,8 @@ export const PIE_PALETTES = [
type: 'text',
}
];

export const HEATMAP_PALETTE_COLOR = { name: REDS_PALETTE.label, color: REDS_PALETTE.label };
export const HEATMAP_SINGLE_COLOR = { name: 'singleColor', color: '#000000' };
export const OPACITY = 'opacity';
export const SPECTRUM = 'spectrum';
275 changes: 275 additions & 0 deletions ...s/explorer/visualizations/config_panel/__tests__/__snapshots__/config_panel.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -910,6 +910,281 @@ exports[`Config panel component Renders config panel with visualization data 1`]
},
],
},
Object {
"editor": [Function],
"id": "chart_styles",
"mapTo": "chartStyles",
"name": "Chart Styles",
"schemas": Array [
Object {
"component": [Function],
"defaultState": Array [
Object {
"label": "spectrum",
"name": "spectrum",
"value": "spectrum",
},
],
"eleType": "list",
"isSingleSelection": true,
"mapTo": "colorMode",
"name": "Color Mode",
"options": Array [
Object {
"label": "spectrum",
"name": "spectrum",
"value": "spectrum",
},
Object {
"label": "opacity",
"name": "opacity",
"value": "opacity",
},
],
"props": Object {
"isClearable": false,
},
},
Object {
"component": [Function],
"defaultState": Object {
"color": "Reds",
"name": "Reds",
},
"eleType": "palettePicker",
"mapTo": "scheme",
"name": "Scheme",
"options": Array [
Object {
"palette": Array [
"#050aac",
"#161cb2",
"#2029ba",
"#2835c2",
"#303fca",
"#384ad3",
"#4054db",
"#495ee2",
"#5368e9",
"#5f72ed",
"#6b7df0",
"#7887f0",
"#8692f0",
"#939cee",
"#a0a6ec",
"#adb1ea",
"#b9bce7",
"#c5c6e3",
"#d1d1e0",
"#dcdcdc",
],
"title": "Blues",
"type": "gradient",
"value": "Blues",
},
Object {
"palette": Array [
"#dcdcdc",
"#e8d0c1",
"#edc6ad",
"#efbb9c",
"#efb18e",
"#eea782",
"#eb9e77",
"#e9946d",
"#e68b64",
"#e2815c",
"#de7854",
"#da6e4c",
"#d56545",
"#d15b3e",
"#cc5138",
"#c74632",
"#c23b2c",
"#bd2f26",
"#b72021",
"#b20a1c",
],
"title": "Reds",
"type": "gradient",
"value": "Reds",
},
Object {
"palette": Array [
"#00441b",
"#014e1f",
"#035825",
"#09622a",
"#116d31",
"#1b7738",
"#25823f",
"#308c48",
"#3c9650",
"#49a15a",
"#57ab64",
"#66b56f",
"#76bf7b",
"#86c888",
"#98d296",
"#aadba6",
"#bde4b8",
"#d0ecca",
"#e3f4df",
"#f7fcf5",
],
"title": "Greens",
"type": "gradient",
"value": "Greens",
},
Object {
"palette": Array [
"#000000",
"#121212",
"#1d1d1d",
"#272727",
"#333333",
"#3e3e3e",
"#4a4a4a",
"#575757",
"#636363",
"#707070",
"#7e7e7e",
"#8b8b8b",
"#999999",
"#a7a7a7",
"#b5b5b5",
"#c3c3c3",
"#d2d2d2",
"#e1e1e1",
"#f0f0f0",
"#ffffff",
],
"title": "Greys",
"type": "gradient",
"value": "Greys",
},
Object {
"palette": Array [
"#0000ff",
"#3e00f7",
"#5800ee",
"#6c00e4",
"#7c00db",
"#8a00d1",
"#9600c6",
"#a200bb",
"#ac00b0",
"#b600a4",
"#bf0098",
"#c8008b",
"#d0007e",
"#d80071",
"#df0062",
"#e60054",
"#ed0045",
"#f30034",
"#f90021",
"#ff0000",
],
"title": "Blue-Red",
"type": "gradient",
"value": "Bluered",
},
Object {
"palette": Array [
"#050aac",
"#2522b6",
"#3835c0",
"#4946c8",
"#5957cf",
"#6967d4",
"#7978d7",
"#8a89d7",
"#9a9bd4",
"#acaccd",
"#df9b70",
"#dd8e62",
"#da8056",
"#d6734c",
"#d16542",
"#cb583a",
"#c54931",
"#bf3a2a",
"#b92723",
"#b20a1c",
],
"title": "Red-Blue",
"type": "gradient",
"value": "RdBu",
},
Object {
"palette": Array [
"#800026",
"#910126",
"#a10526",
"#b10e26",
"#c01b26",
"#cd2926",
"#d83728",
"#e2472a",
"#ea572e",
"#f16732",
"#f67738",
"#fa8740",
"#fd9849",
"#ffa753",
"#ffb760",
"#ffc76f",
"#ffd681",
"#ffe496",
"#fff2af",
"#ffffcc",
],
"title": "Yellow-Orange-Red",
"type": "gradient",
"value": "YlOrRd",
},
Object {
"palette": Array [
"#081d58",
"#11256a",
"#182f79",
"#1e3b86",
"#234791",
"#28539a",
"#2e60a2",
"#346da9",
"#3b7aaf",
"#4488b4",
"#4f95b7",
"#5ba2ba",
"#6aafbc",
"#7bbcbe",
"#8dc8bf",
"#a2d4c1",
"#b7e0c4",
"#ceebc9",
"#e6f5d0",
"#ffffd9",
],
"title": "Yellow-Green-Blue",
"type": "gradient",
"value": "YlGnBu",
},
],
},
Object {
"component": [Function],
"defaultState": Object {
"color": "#000000",
"name": "singleColor",
},
"eleType": "singleColorPicker",
"mapTo": "color",
"name": "Color",
},
],
},
],
},
Object {
Expand Down
4 changes: 3 additions & 1 deletion ...y/public/components/event_analytics/explorer/visualizations/config_panel/config_panel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,9 @@ export const ConfigPanel = ({ visualizations, setCurVisId, callback, changeIsVal
const [valueField] = data.defaultAxes?.yaxis ?? [];
if (curVisId === visChartTypes.TreeMap) {
chartBasedAxes["childField"] = data.defaultAxes.xaxis ?? [];
chartBasedAxes["valueField"] = [valueField];
chartBasedAxes["valueField"] = valueField && [valueField];
} else if(curVisId === visChartTypes.HeatMap){
chartBasedAxes["zaxis"] = valueField && [valueField];
} else {
chartBasedAxes = { ...data.defaultAxes };
}
Expand Down
Loading

0 comments on commit 4a4c62a

Please sign in to comment.