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

Jump to bottom

[Feature]: Heatmap- Color theme implementation in config panel #778

Merged
merged 9 commits into from
Jun 16, 2022
Merged

[Feature]: Heatmap- Color theme implementation in config panel #778

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
7b69969
Implementation of color theme for heatmap
ruchika-narang May 27, 2022
e2a3961
refactoring code
ruchika-narang May 27, 2022
b554f42
HeatMap Cypress TestCase
nidhisinghai May 27, 2022
576e61e
Cypress TestCase for HeatMap
nidhisinghai May 31, 2022
3d10a55
Update Done according to Comment
nidhisinghai Jun 1, 2022
caeee6d
Refactored code
ruchika-narang Jun 1, 2022
06b214c
Updated snapshot test case
ruchika-narang Jun 2, 2022
3822cb3
Fixed toast implementation and no result found for heatmap
ruchika-narang Jun 8, 2022
2b6406e
Undefined checks for value options
ruchika-narang Jun 10, 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
63 changes: 63 additions & 0 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 @@ -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
Open in desktop
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
Open in desktop
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
Open in desktop
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