From 03ea5bdacef2a2cad6d511d12bcd6675c51b2166 Mon Sep 17 00:00:00 2001 From: Mrunal Zambre Date: Fri, 22 Apr 2022 16:22:58 +0530 Subject: [PATCH 01/12] Initial commit for treemap visualization Signed-off-by: Mrunal Zambre --- .../common/constants/shared.ts | 2 +- .../__snapshots__/treemap.test.tsx.snap | 486 ++++++++++++++++++ .../charts/__tests__/treemap.test.tsx | 30 ++ .../charts/maps/treemap_type.ts | 17 +- .../visualizations/charts/maps/treemaps.tsx | 122 +++-- 5 files changed, 604 insertions(+), 53 deletions(-) create mode 100644 dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/treemap.test.tsx.snap create mode 100644 dashboards-observability/public/components/visualizations/charts/__tests__/treemap.test.tsx diff --git a/dashboards-observability/common/constants/shared.ts b/dashboards-observability/common/constants/shared.ts index c27d2bab1..a051d4424 100644 --- a/dashboards-observability/common/constants/shared.ts +++ b/dashboards-observability/common/constants/shared.ts @@ -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]; +export const ENABLED_VIS_TYPES = [visChartTypes.Bar, visChartTypes.HorizontalBar, visChartTypes.Line, visChartTypes.Pie, visChartTypes.HeatMap, visChartTypes.Text, visChartTypes.TreeMap]; //Live tail constants export const LIVE_OPTIONS = [ diff --git a/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/treemap.test.tsx.snap b/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/treemap.test.tsx.snap new file mode 100644 index 000000000..881bd6eb7 --- /dev/null +++ b/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/treemap.test.tsx.snap @@ -0,0 +1,486 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Treemap component Renders treemap component 1`] = ` + + + +
+ + + +`; diff --git a/dashboards-observability/public/components/visualizations/charts/__tests__/treemap.test.tsx b/dashboards-observability/public/components/visualizations/charts/__tests__/treemap.test.tsx new file mode 100644 index 000000000..5210bd416 --- /dev/null +++ b/dashboards-observability/public/components/visualizations/charts/__tests__/treemap.test.tsx @@ -0,0 +1,30 @@ +/* + * Copyright OpenSearch Contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +import { configure, mount } from 'enzyme'; +import Adapter from 'enzyme-adapter-react-16'; +import React from 'react'; +import { waitFor } from '@testing-library/react'; +import { TreeMap } from '../maps/treemaps'; +import { + LAYOUT_CONFIG, + TEST_VISUALIZATIONS_DATA, +} from '../../../../../test/event_analytics_constants'; + +describe('Treemap component', () => { + configure({ adapter: new Adapter() }); + + it('Renders treemap component', async () => { + const wrapper = mount( + + ); + + wrapper.update(); + + await waitFor(() => { + expect(wrapper).toMatchSnapshot(); + }); + }); +}); diff --git a/dashboards-observability/public/components/visualizations/charts/maps/treemap_type.ts b/dashboards-observability/public/components/visualizations/charts/maps/treemap_type.ts index 74330f342..d5f257e1e 100644 --- a/dashboards-observability/public/components/visualizations/charts/maps/treemap_type.ts +++ b/dashboards-observability/public/components/visualizations/charts/maps/treemap_type.ts @@ -25,6 +25,7 @@ export const createTreeMapDefinition = (params: BarTypeParams = {}) => ({ dataLoss: 'nothing', }, category: VIS_CATEGORY.BASICS, + iconType: 'heatmap', icon: LensIconChartBar, categoryAxis: 'xaxis', seriesAxis: 'yaxis', @@ -45,16 +46,22 @@ export const createTreeMapDefinition = (params: BarTypeParams = {}) => ({ mapTo: 'valueOptions', schemas: [ { - name: 'X-axis', + name: 'Label Field', isSingleSelection: true, component: null, - mapTo: 'xaxis', + mapTo: 'labelField', }, { - name: 'Y-axis', - isSingleSelection: false, + name: 'Parent Field', + isSingleSelection: true, + component: null, + mapTo: 'parentField', + }, + { + name: 'Value Field', + isSingleSelection: true, component: null, - mapTo: 'yaxis', + mapTo: 'valueField', }, ], }, diff --git a/dashboards-observability/public/components/visualizations/charts/maps/treemaps.tsx b/dashboards-observability/public/components/visualizations/charts/maps/treemaps.tsx index bdd014e64..8ce07f8e1 100644 --- a/dashboards-observability/public/components/visualizations/charts/maps/treemaps.tsx +++ b/dashboards-observability/public/components/visualizations/charts/maps/treemaps.tsx @@ -3,57 +3,85 @@ * SPDX-License-Identifier: Apache-2.0 */ -import React from 'react'; +import React, { useMemo } from 'react'; +import { indexOf, isEmpty, isEqual, isNull, uniq } from 'lodash'; import { Plt } from '../../plotly/plot'; +import { EmptyPlaceholder } from '../../../event_analytics/explorer/visualizations/shared_components/empty_placeholder'; +import { NUMERICAL_FIELDS } from '../../../../../common/constants/shared'; -export const TreeMap = ({ visualizations, layout, config }) => { - const labels = ['Eve', 'Cain', 'Seth', 'Enos', 'Noam', 'Abel', 'Awan', 'Enoch', 'Azura']; - const parents = ['', 'Eve', 'Eve', 'Seth', 'Seth', 'Eve', 'Eve', 'Awan', 'Eve']; - const treemapData = [ - { - type: 'treemap', - labels, - parents, - values: [10, 14, 12, 10, 2, 6, 6, 1, 4], - textinfo: 'label+value+percent parent+percent entry', - domain: { x: [0, 0.48] }, - outsidetextfont: { size: 20, color: '#377eb8' }, - marker: { line: { width: 2 } }, - pathbar: { visible: false }, - }, - { - type: 'treemap', - branchvalues: 'total', - labels, - parents, - domain: { x: [0.52, 1] }, - values: [65, 14, 12, 10, 2, 6, 6, 1, 4], - textinfo: 'label+value+percent parent+percent entry', - outsidetextfont: { size: 20, color: '#377eb8' }, - marker: { line: { width: 2 } }, - pathbar: { visible: false }, - }, - ]; - const finalLayout = { - annotations: [ - { - showarrow: false, - text: 'branchvalues: remainder', - x: 0.25, - xanchor: 'center', - y: 1.1, - yanchor: 'bottom', - }, +export const TreeMap = ({ visualizations, layout, config }: any) => { + const { + data, + metadata: { fields }, + } = visualizations.data.rawVizData; + const { dataConfig = {}, layoutConfig = {} } = visualizations?.data?.userConfigs; + + const labelField = + dataConfig?.valueOptions && + dataConfig?.valueOptions.labelField && + !isEmpty(dataConfig?.valueOptions.labelField) + ? dataConfig?.valueOptions.labelField[0] + : fields[fields.length - 1]; + + const parentField = + dataConfig?.valueOptions && + dataConfig?.valueOptions.parentField && + !isEmpty(dataConfig?.valueOptions.parentField) + ? dataConfig?.valueOptions.parentField[0] + : null; + + const valueField = + dataConfig?.valueOptions && + dataConfig?.valueOptions.valueField && + !isEmpty(dataConfig?.valueOptions.valueField) + ? dataConfig?.valueOptions.valueField[0] + : fields[0]; + + if ( + isEmpty(data[labelField.name]) || + isEmpty(data[valueField.name]) || + (!isNull(parentField) && isEmpty(data[parentField.name])) || + isEqual(labelField, parentField) || + indexOf(NUMERICAL_FIELDS, valueField.type) < 0 + ) + return ; + + const treemapData = useMemo(() => { + let labelsArray, parentsArray, valuesArray; + + if (parentField === null) { + labelsArray = [...data[labelField.name]]; + parentsArray = [...Array(labelsArray.length).fill('')]; + valuesArray = [...data[valueField.name]]; + } else { + const uniqueParents = uniq(data[parentField.name]); + labelsArray = [...data[labelField.name], ...uniqueParents]; + parentsArray = [...data[parentField.name], ...Array(uniqueParents.length).fill('')]; + valuesArray = [...data[valueField.name], ...Array(uniqueParents.length).fill(0)]; + } + + return [ { - showarrow: false, - text: 'branchvalues: total', - x: 0.75, - xanchor: 'center', - y: 1.1, - yanchor: 'bottom', + type: 'treemap', + labels: labelsArray, + parents: parentsArray, + values: valuesArray, + textinfo: 'label+value+percent parent+percent entry', }, - ], + ]; + }, [data, labelField, valueField, parentField]); + + const mergedLayout = { + ...layout, + ...(layoutConfig.layout && layoutConfig.layout), + title: dataConfig?.panelOptions?.title || layoutConfig.layout?.title || '', }; - return ; + + const mergedConfigs = { + ...config, + ...(layoutConfig.config && layoutConfig.config), + }; + + return ; }; From 302a1cb7134218e4a03658c8f8964bb5d582fe58 Mon Sep 17 00:00:00 2001 From: Mrunal Zambre Date: Tue, 26 Apr 2022 13:34:42 +0530 Subject: [PATCH 02/12] changes to labelField, layout and config Signed-off-by: Mrunal Zambre --- .../charts/maps/treemap_type.ts | 4 ++-- .../visualizations/charts/maps/treemaps.tsx | 22 +++++++++---------- 2 files changed, 13 insertions(+), 13 deletions(-) diff --git a/dashboards-observability/public/components/visualizations/charts/maps/treemap_type.ts b/dashboards-observability/public/components/visualizations/charts/maps/treemap_type.ts index d5f257e1e..639bf4b3c 100644 --- a/dashboards-observability/public/components/visualizations/charts/maps/treemap_type.ts +++ b/dashboards-observability/public/components/visualizations/charts/maps/treemap_type.ts @@ -46,10 +46,10 @@ export const createTreeMapDefinition = (params: BarTypeParams = {}) => ({ mapTo: 'valueOptions', schemas: [ { - name: 'Label Field', + name: 'Child Field', isSingleSelection: true, component: null, - mapTo: 'labelField', + mapTo: 'childField', }, { name: 'Parent Field', diff --git a/dashboards-observability/public/components/visualizations/charts/maps/treemaps.tsx b/dashboards-observability/public/components/visualizations/charts/maps/treemaps.tsx index 8ce07f8e1..571001be8 100644 --- a/dashboards-observability/public/components/visualizations/charts/maps/treemaps.tsx +++ b/dashboards-observability/public/components/visualizations/charts/maps/treemaps.tsx @@ -17,11 +17,11 @@ export const TreeMap = ({ visualizations, layout, config }: any) => { } = visualizations.data.rawVizData; const { dataConfig = {}, layoutConfig = {} } = visualizations?.data?.userConfigs; - const labelField = + const childField = dataConfig?.valueOptions && - dataConfig?.valueOptions.labelField && - !isEmpty(dataConfig?.valueOptions.labelField) - ? dataConfig?.valueOptions.labelField[0] + dataConfig?.valueOptions.childField && + !isEmpty(dataConfig?.valueOptions.childField) + ? dataConfig?.valueOptions.childField[0] : fields[fields.length - 1]; const parentField = @@ -39,10 +39,10 @@ export const TreeMap = ({ visualizations, layout, config }: any) => { : fields[0]; if ( - isEmpty(data[labelField.name]) || + isEmpty(data[childField.name]) || isEmpty(data[valueField.name]) || (!isNull(parentField) && isEmpty(data[parentField.name])) || - isEqual(labelField, parentField) || + isEqual(childField, parentField) || indexOf(NUMERICAL_FIELDS, valueField.type) < 0 ) return ; @@ -51,12 +51,12 @@ export const TreeMap = ({ visualizations, layout, config }: any) => { let labelsArray, parentsArray, valuesArray; if (parentField === null) { - labelsArray = [...data[labelField.name]]; + labelsArray = [...data[childField.name]]; parentsArray = [...Array(labelsArray.length).fill('')]; valuesArray = [...data[valueField.name]]; } else { const uniqueParents = uniq(data[parentField.name]); - labelsArray = [...data[labelField.name], ...uniqueParents]; + labelsArray = [...data[childField.name], ...uniqueParents]; parentsArray = [...data[parentField.name], ...Array(uniqueParents.length).fill('')]; valuesArray = [...data[valueField.name], ...Array(uniqueParents.length).fill(0)]; } @@ -70,17 +70,17 @@ export const TreeMap = ({ visualizations, layout, config }: any) => { textinfo: 'label+value+percent parent+percent entry', }, ]; - }, [data, labelField, valueField, parentField]); + }, [data, childField, valueField, parentField]); const mergedLayout = { ...layout, - ...(layoutConfig.layout && layoutConfig.layout), + ...layoutConfig.layout, title: dataConfig?.panelOptions?.title || layoutConfig.layout?.title || '', }; const mergedConfigs = { ...config, - ...(layoutConfig.config && layoutConfig.config), + ...layoutConfig.config, }; return ; From 094a8b74d158093173f62dec3e7b4372dd456faa Mon Sep 17 00:00:00 2001 From: Mrunal Zambre Date: Wed, 27 Apr 2022 12:57:24 +0530 Subject: [PATCH 03/12] reverted changes of layoutConfig Signed-off-by: Mrunal Zambre --- .../public/components/visualizations/charts/maps/treemaps.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/dashboards-observability/public/components/visualizations/charts/maps/treemaps.tsx b/dashboards-observability/public/components/visualizations/charts/maps/treemaps.tsx index 571001be8..7f44b2060 100644 --- a/dashboards-observability/public/components/visualizations/charts/maps/treemaps.tsx +++ b/dashboards-observability/public/components/visualizations/charts/maps/treemaps.tsx @@ -74,13 +74,13 @@ export const TreeMap = ({ visualizations, layout, config }: any) => { const mergedLayout = { ...layout, - ...layoutConfig.layout, + ...(layoutConfig.layout && layoutConfig.layout), title: dataConfig?.panelOptions?.title || layoutConfig.layout?.title || '', }; const mergedConfigs = { ...config, - ...layoutConfig.config, + ...(layoutConfig.config && layoutConfig.config), }; return ; From 6584792114fccee52cd27c0fd18965f6be052bad Mon Sep 17 00:00:00 2001 From: Nidhi Singhai Date: Thu, 28 Apr 2022 11:57:34 +0530 Subject: [PATCH 04/12] Cypress TestCase for TreeMap Signed-off-by: Nidhi Singhai --- .../integration/1_event_analytics.spec.js | 86 +++++++++++++++++++ .../.cypress/utils/event_constants.js | 2 +- 2 files changed, 87 insertions(+), 1 deletion(-) diff --git a/dashboards-observability/.cypress/integration/1_event_analytics.spec.js b/dashboards-observability/.cypress/integration/1_event_analytics.spec.js index d8dbde877..5a3161358 100644 --- a/dashboards-observability/.cypress/integration/1_event_analytics.spec.js +++ b/dashboards-observability/.cypress/integration/1_event_analytics.spec.js @@ -21,6 +21,30 @@ import { } from '../utils/event_constants'; import { supressResizeObserverIssue } from '../utils/constants'; +const vis_name_sub_string = Math.floor(Math.random() * 100); +const saveVisulizationAndVerify = () => { + cy.get('[data-test-subj="eventExplorer__saveManagementPopover"]').click(); + cy.get('[data-test-subj="eventExplorer__querySaveComboBox"]').click() + cy.get('.euiComboBoxOptionsList__rowWrap .euiFilterSelectItem').eq(0).click(); + cy.get('.euiPopover__panel .euiFormControlLayoutIcons [data-test-subj="comboBoxToggleListButton"]').eq(0).click(); + cy.get('.euiPopover__panel input').eq(1).type(`Test visulization_Gauge` + vis_name_sub_string); + cy.get('[data-test-subj="eventExplorer__querySaveConfirm"]').click(); + cy.wait(delay); + + cy.get('.euiHeaderBreadcrumbs a').eq(1).click(); + cy.get('.euiFlexGroup .euiFormControlLayout__childrenWrapper input').eq(0).type(`Test visulization_Gauge` + vis_name_sub_string).type('{enter}'); + cy.get('.euiBasicTable .euiTableCellContent button').eq(0).click(); +} +const deleteVisulaization = () => { + cy.get('a[href = "#/event_analytics"]').click(); + cy.get('.euiFlexGroup .euiFormControlLayout__childrenWrapper input').eq(0).type(`Test visulization_Gauge`).type('{enter}'); + cy.get('input[data-test-subj = "checkboxSelectAll"]').click(); + cy.get('.euiButtonContent.euiButtonContent--iconRight.euiButton__content').click(); + cy.get('.euiContextMenuItem .euiContextMenuItem__text').eq(0).click(); + cy.get('input[placeholder = "delete"]').clear().type('delete'); + cy.get('button[data-test-subj = "popoverModal__deleteButton"]').click(); + cy.get('.euiToastHeader').should('exist'); +} describe('Adding sample data and visualization', () => { it('Adds sample flights data for event analytics', () => { cy.visit(`${Cypress.env('opensearchDashboards')}/app/home#/tutorial_directory/sampleData`); @@ -659,4 +683,66 @@ 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('Renders Tree Map', () => { + beforeEach(() => { + landOnEventVisualizations(); + }); + + it('Renders Tree Map', () => { + querySearch(TEST_QUERIES[3].query, TEST_QUERIES[3].dateRangeDOM); + cy.get('[data-test-subj="configPane__vizTypeSelector"] [data-test-subj="comboBoxInput"]').type('Tree Map').type('{enter}'); + cy.get('#configPanel__panelOptions .euiFieldText').click().type('Tree Map'); + cy.get('.euiFlexItem .euiFormRow [placeholder="Description"]').click().type('This is the description for Tree Map'); + cy.get('.euiComboBox__inputWrap.euiComboBox__inputWrap-isClearable').eq(0).click(); + cy.get('.euiFormControlLayoutIcons [data-test-subj ="comboBoxToggleListButton"]').eq(1).click(); + cy.get('.euiComboBoxOption__content').eq(2).click(); + cy.get('.euiFormControlLayoutIcons [data-test-subj ="comboBoxToggleListButton"]').eq(2).click(); + cy.get('.euiComboBoxOption__content').eq(3).click(); + cy.get('.euiFormControlLayoutIcons [data-test-subj ="comboBoxToggleListButton"]').eq(3).click(); + cy.get('.euiComboBoxOption__content').eq(1).click(); + cy.get('.euiFlexItem.euiFlexItem--flexGrowZero .euiButton__text').eq(2).click(); + }); + + it('Renders Tree Map, add value parameters and verify Reset button click is working', () => { + querySearch(TEST_QUERIES[3].query, TEST_QUERIES[3].dateRangeDOM); + cy.get('[data-test-subj="configPane__vizTypeSelector"] [data-test-subj="comboBoxInput"]').type('Tree Map').type('{enter}'); + cy.wait(delay); + cy.get('#configPanel__panelOptions .euiFieldText').click().type('Tree Map'); + cy.get('.euiFlexItem .euiFormRow [placeholder="Description"]').click().type('This is the description for Tree Map'); + cy.get('.euiComboBox__inputWrap.euiComboBox__inputWrap-isClearable').eq(0).click(); + cy.get('.euiFormControlLayoutIcons [data-test-subj ="comboBoxToggleListButton"]').eq(1).click(); + cy.get('.euiComboBoxOption__content').eq(0).click(); + cy.get('.euiFormControlLayoutIcons [data-test-subj ="comboBoxToggleListButton"]').eq(2).click(); + cy.get('.euiComboBoxOption__content').eq(0).click(); + cy.get('.euiFlexItem.euiFlexItem--flexGrowZero .euiButton__text').eq(2).click(); + cy.get('[data-test-subj="visualizeEditorResetButton"]').click(); + cy.get('#configPanel__panelOptions .euiFieldText').should('have.value', ''); + cy.get('.euiFlexItem .euiFormRow [placeholder="Description"]').should('have.value', ''); + cy.get('.euiComboBox__inputWrap.euiComboBox__inputWrap-isClearable').eq(1).should('have.value', ''); + cy.get('.euiComboBox__inputWrap.euiComboBox__inputWrap-isClearable').eq(2).should('have.value', ''); + cy.get('.euiComboBox__inputWrap.euiComboBox__inputWrap-isClearable').eq(3).should('have.value', ''); + }); + + it('Renders Tree Map and Save Visulization', () => { + querySearch(TEST_QUERIES[3].query, TEST_QUERIES[3].dateRangeDOM); + cy.get('[data-test-subj="configPane__vizTypeSelector"] [data-test-subj="comboBoxInput"]').type('Tree Map').type('{enter}'); + cy.get('#configPanel__panelOptions .euiFieldText').click().type('Tree Map'); + cy.get('.euiFlexItem .euiFormRow [placeholder="Description"]').click().type('This is the description for Tree Map'); + cy.get('.euiComboBox__inputWrap.euiComboBox__inputWrap-isClearable').eq(0).click(); + cy.get('.euiFormControlLayoutIcons [data-test-subj ="comboBoxToggleListButton"]').eq(1).click(); + cy.get('.euiComboBoxOption__content').eq(2).click(); + cy.get('.euiFormControlLayoutIcons [data-test-subj ="comboBoxToggleListButton"]').eq(2).click(); + cy.get('.euiComboBoxOption__content').eq(3).click(); + cy.get('.euiFormControlLayoutIcons [data-test-subj ="comboBoxToggleListButton"]').eq(3).click(); + cy.get('.euiComboBoxOption__content').eq(1).click(); + cy.get('.euiFlexItem.euiFlexItem--flexGrowZero .euiButton__text').eq(2).click(); + saveVisulizationAndVerify(); + }); + + + it('Delete All the Random Created Visulization Gauge Chart', () => { + deleteVisulaization(); + }); }); \ No newline at end of file diff --git a/dashboards-observability/.cypress/utils/event_constants.js b/dashboards-observability/.cypress/utils/event_constants.js index 130d32590..eb33bd509 100644 --- a/dashboards-observability/.cypress/utils/event_constants.js +++ b/dashboards-observability/.cypress/utils/event_constants.js @@ -21,7 +21,7 @@ export const TEST_QUERIES = [ query: 'source = opensearch_dashboards_sample_data_logs' }, { - query: 'source = opensearch_dashboards_sample_data_logs | stats count() by host', + query: 'source=opensearch_dashboards_sample_data_flights | stats max(AvgTicketPrice) by DestCountry, DestCityName, Carrier', dateRangeDOM: YEAR_TO_DATE_DOM_ID }, { From 64ae51b904f1a27afdb4e9c722e48058c2337d4a Mon Sep 17 00:00:00 2001 From: Mrunal Zambre Date: Thu, 28 Apr 2022 19:15:18 +0530 Subject: [PATCH 05/12] added new line Signed-off-by: Mrunal Zambre --- .../.cypress/integration/1_event_analytics.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/dashboards-observability/.cypress/integration/1_event_analytics.spec.js b/dashboards-observability/.cypress/integration/1_event_analytics.spec.js index 5a3161358..644f350f2 100644 --- a/dashboards-observability/.cypress/integration/1_event_analytics.spec.js +++ b/dashboards-observability/.cypress/integration/1_event_analytics.spec.js @@ -745,4 +745,4 @@ describe('Renders Tree Map', () => { it('Delete All the Random Created Visulization Gauge Chart', () => { deleteVisulaization(); }); -}); \ No newline at end of file +}); From 27cc76569e14aaa1961045321aadfd4a805a49be Mon Sep 17 00:00:00 2001 From: Mrunal Zambre Date: Thu, 28 Apr 2022 19:32:13 +0530 Subject: [PATCH 06/12] updated test cases Signed-off-by: Mrunal Zambre --- .../custom_panel_table.test.tsx.snap | 16 ++-- .../helpers/__tests__/utils.test.tsx | 4 +- .../__snapshots__/no_results.test.tsx.snap | 6 +- .../__snapshots__/config_panel.test.tsx.snap | 84 +++++++++++++++++++ .../__snapshots__/para_input.test.tsx.snap | 4 +- .../__snapshots__/para_output.test.tsx.snap | 2 +- 6 files changed, 101 insertions(+), 15 deletions(-) diff --git a/dashboards-observability/public/components/custom_panels/__tests__/__snapshots__/custom_panel_table.test.tsx.snap b/dashboards-observability/public/components/custom_panels/__tests__/__snapshots__/custom_panel_table.test.tsx.snap index 879d250c5..e3dce471b 100644 --- a/dashboards-observability/public/components/custom_panels/__tests__/__snapshots__/custom_panel_table.test.tsx.snap +++ b/dashboards-observability/public/components/custom_panels/__tests__/__snapshots__/custom_panel_table.test.tsx.snap @@ -1907,7 +1907,7 @@ exports[`Panels Table Component renders panel table container 1`] = `
- 11/04/2021 06:10 PM + 11/04/2021 11:40 PM
@@ -1939,7 +1939,7 @@ exports[`Panels Table Component renders panel table container 1`] = `
- 11/02/2021 07:26 PM + 11/03/2021 12:56 AM
@@ -2073,7 +2073,7 @@ exports[`Panels Table Component renders panel table container 1`] = `
- 11/03/2021 10:51 PM + 11/04/2021 04:21 AM
@@ -2105,7 +2105,7 @@ exports[`Panels Table Component renders panel table container 1`] = `
- 11/02/2021 09:44 PM + 11/03/2021 03:14 AM
@@ -2239,7 +2239,7 @@ exports[`Panels Table Component renders panel table container 1`] = `
- 11/03/2021 10:37 PM + 11/04/2021 04:07 AM
@@ -2271,7 +2271,7 @@ exports[`Panels Table Component renders panel table container 1`] = `
- 10/29/2021 10:15 PM + 10/30/2021 03:45 AM
@@ -2405,7 +2405,7 @@ exports[`Panels Table Component renders panel table container 1`] = `
- 11/03/2021 09:26 PM + 11/04/2021 02:56 AM
@@ -2437,7 +2437,7 @@ exports[`Panels Table Component renders panel table container 1`] = `
- 11/03/2021 09:26 PM + 11/04/2021 02:56 AM
diff --git a/dashboards-observability/public/components/custom_panels/helpers/__tests__/utils.test.tsx b/dashboards-observability/public/components/custom_panels/helpers/__tests__/utils.test.tsx index e1d1f1dbb..82395680f 100644 --- a/dashboards-observability/public/components/custom_panels/helpers/__tests__/utils.test.tsx +++ b/dashboards-observability/public/components/custom_panels/helpers/__tests__/utils.test.tsx @@ -38,10 +38,10 @@ describe('Utils helper functions', () => { it('validates convertDateTime function', () => { expect(convertDateTime('2022-01-30T18:44:40.577Z')).toBe( - moment('2022-01-30T18:44:40.577Z').format(PPL_DATE_FORMAT) + moment.utc('2022-01-30T18:44:40.577Z').format(PPL_DATE_FORMAT) ); expect(convertDateTime('2022-02-25T19:18:33.075Z', true)).toBe( - moment('2022-02-25T19:18:33.075Z').format(PPL_DATE_FORMAT) + moment.utc('2022-02-25T19:18:33.075Z').format(PPL_DATE_FORMAT) ); }); diff --git a/dashboards-observability/public/components/event_analytics/__tests__/__snapshots__/no_results.test.tsx.snap b/dashboards-observability/public/components/event_analytics/__tests__/__snapshots__/no_results.test.tsx.snap index a128191e4..33f8d184e 100644 --- a/dashboards-observability/public/components/event_analytics/__tests__/__snapshots__/no_results.test.tsx.snap +++ b/dashboards-observability/public/components/event_analytics/__tests__/__snapshots__/no_results.test.tsx.snap @@ -192,11 +192,13 @@ exports[`No result component Renders No result component 1`] = `

- Your query may not match anything in the current time range, or there may not be any data at all in the currently selected time range. Try change time range, query filters or choose different time fields + Your query may not match anything in the current time range, or there may not be any data at all in + the currently selected time range. Try change time range, query filters or choose different time fields

diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/__tests__/__snapshots__/config_panel.test.tsx.snap b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/__tests__/__snapshots__/config_panel.test.tsx.snap index babb55222..134eff76a 100644 --- a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/__tests__/__snapshots__/config_panel.test.tsx.snap +++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/__tests__/__snapshots__/config_panel.test.tsx.snap @@ -960,6 +960,90 @@ exports[`Config panel component Renders config panel with visualization data 1`] }, }, }, + Object { + "category": "Visualizations", + "categoryAxis": "xaxis", + "component": [Function], + "editorConfig": Object { + "panelTabs": Array [ + Object { + "editor": [Function], + "id": "data-panel", + "mapTo": "dataConfig", + "name": "Data", + "sections": Array [ + Object { + "editor": [Function], + "id": "value_options", + "mapTo": "valueOptions", + "name": "Value options", + "schemas": Array [ + Object { + "component": null, + "isSingleSelection": true, + "mapTo": "childField", + "name": "Child Field", + }, + Object { + "component": null, + "isSingleSelection": true, + "mapTo": "parentField", + "name": "Parent Field", + }, + Object { + "component": null, + "isSingleSelection": true, + "mapTo": "valueField", + "name": "Value Field", + }, + ], + }, + ], + }, + Object { + "content": Array [], + "editor": [Function], + "id": "style-panel", + "mapTo": "layoutConfig", + "name": "Layout", + }, + ], + }, + "fullLabel": "Tree Map", + "icon": [Function], + "iconType": "heatmap", + "id": "tree_map", + "label": "Tree Map", + "name": "tree_map", + "orientation": "v", + "selection": Object { + "dataLoss": "nothing", + }, + "seriesAxis": "yaxis", + "type": "tree_map", + "visConfig": Object { + "config": Object { + "displaylogo": false, + "responsive": true, + }, + "isUniColor": false, + "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" diff --git a/dashboards-observability/public/components/notebooks/components/paragraph_components/__tests__/__snapshots__/para_input.test.tsx.snap b/dashboards-observability/public/components/notebooks/components/paragraph_components/__tests__/__snapshots__/para_input.test.tsx.snap index 813c41868..0929413ba 100644 --- a/dashboards-observability/public/components/notebooks/components/paragraph_components/__tests__/__snapshots__/para_input.test.tsx.snap +++ b/dashboards-observability/public/components/notebooks/components/paragraph_components/__tests__/__snapshots__/para_input.test.tsx.snap @@ -274,7 +274,7 @@ exports[` spec renders the visualization component 1`] = ` data-test-subj="superDatePickerstartDatePopoverButton" title="2020-07-21T18:37:44.710Z" > - 2020-07-21T18:37:44+00:00 + 2020-07-22T00:07:44+05:30 @@ -298,7 +298,7 @@ exports[` spec renders the visualization component 1`] = ` data-test-subj="superDatePickerendDatePopoverButton" title="2020-08-20T18:37:44.710Z" > - 2020-08-20T18:37:44+00:00 + 2020-08-21T00:07:44+05:30 diff --git a/dashboards-observability/public/components/notebooks/components/paragraph_components/__tests__/__snapshots__/para_output.test.tsx.snap b/dashboards-observability/public/components/notebooks/components/paragraph_components/__tests__/__snapshots__/para_output.test.tsx.snap index 0828c3f4c..7e6ed5737 100644 --- a/dashboards-observability/public/components/notebooks/components/paragraph_components/__tests__/__snapshots__/para_output.test.tsx.snap +++ b/dashboards-observability/public/components/notebooks/components/paragraph_components/__tests__/__snapshots__/para_output.test.tsx.snap @@ -72,6 +72,6 @@ exports[` spec renders visualization outputs 1`] = ` class="euiText euiText--small" style="margin-left: 9px;" > - 2020-07-21T18:37:44+00:00 - 2020-08-20T18:37:44+00:00 + 2020-07-22T00:07:44+05:30 - 2020-08-21T00:07:44+05:30 `; From d527f8cfc4bcb318fb2b706a4d095e5dcbb0998e Mon Sep 17 00:00:00 2001 From: Mrunal Zambre Date: Mon, 2 May 2022 10:23:16 +0000 Subject: [PATCH 07/12] reverted snapshots Signed-off-by: Mrunal Zambre --- .../custom_panel_table.test.tsx.snap | 16 ++++++++-------- .../helpers/__tests__/utils.test.tsx | 4 ++-- .../__snapshots__/no_results.test.tsx.snap | 6 ++---- .../__snapshots__/para_input.test.tsx.snap | 4 ++-- .../__snapshots__/para_output.test.tsx.snap | 2 +- 5 files changed, 15 insertions(+), 17 deletions(-) diff --git a/dashboards-observability/public/components/custom_panels/__tests__/__snapshots__/custom_panel_table.test.tsx.snap b/dashboards-observability/public/components/custom_panels/__tests__/__snapshots__/custom_panel_table.test.tsx.snap index e3dce471b..879d250c5 100644 --- a/dashboards-observability/public/components/custom_panels/__tests__/__snapshots__/custom_panel_table.test.tsx.snap +++ b/dashboards-observability/public/components/custom_panels/__tests__/__snapshots__/custom_panel_table.test.tsx.snap @@ -1907,7 +1907,7 @@ exports[`Panels Table Component renders panel table container 1`] = `
- 11/04/2021 11:40 PM + 11/04/2021 06:10 PM
@@ -1939,7 +1939,7 @@ exports[`Panels Table Component renders panel table container 1`] = `
- 11/03/2021 12:56 AM + 11/02/2021 07:26 PM
@@ -2073,7 +2073,7 @@ exports[`Panels Table Component renders panel table container 1`] = `
- 11/04/2021 04:21 AM + 11/03/2021 10:51 PM
@@ -2105,7 +2105,7 @@ exports[`Panels Table Component renders panel table container 1`] = `
- 11/03/2021 03:14 AM + 11/02/2021 09:44 PM
@@ -2239,7 +2239,7 @@ exports[`Panels Table Component renders panel table container 1`] = `
- 11/04/2021 04:07 AM + 11/03/2021 10:37 PM
@@ -2271,7 +2271,7 @@ exports[`Panels Table Component renders panel table container 1`] = `
- 10/30/2021 03:45 AM + 10/29/2021 10:15 PM
@@ -2405,7 +2405,7 @@ exports[`Panels Table Component renders panel table container 1`] = `
- 11/04/2021 02:56 AM + 11/03/2021 09:26 PM
@@ -2437,7 +2437,7 @@ exports[`Panels Table Component renders panel table container 1`] = `
- 11/04/2021 02:56 AM + 11/03/2021 09:26 PM
diff --git a/dashboards-observability/public/components/custom_panels/helpers/__tests__/utils.test.tsx b/dashboards-observability/public/components/custom_panels/helpers/__tests__/utils.test.tsx index 82395680f..e1d1f1dbb 100644 --- a/dashboards-observability/public/components/custom_panels/helpers/__tests__/utils.test.tsx +++ b/dashboards-observability/public/components/custom_panels/helpers/__tests__/utils.test.tsx @@ -38,10 +38,10 @@ describe('Utils helper functions', () => { it('validates convertDateTime function', () => { expect(convertDateTime('2022-01-30T18:44:40.577Z')).toBe( - moment.utc('2022-01-30T18:44:40.577Z').format(PPL_DATE_FORMAT) + moment('2022-01-30T18:44:40.577Z').format(PPL_DATE_FORMAT) ); expect(convertDateTime('2022-02-25T19:18:33.075Z', true)).toBe( - moment.utc('2022-02-25T19:18:33.075Z').format(PPL_DATE_FORMAT) + moment('2022-02-25T19:18:33.075Z').format(PPL_DATE_FORMAT) ); }); diff --git a/dashboards-observability/public/components/event_analytics/__tests__/__snapshots__/no_results.test.tsx.snap b/dashboards-observability/public/components/event_analytics/__tests__/__snapshots__/no_results.test.tsx.snap index 33f8d184e..a128191e4 100644 --- a/dashboards-observability/public/components/event_analytics/__tests__/__snapshots__/no_results.test.tsx.snap +++ b/dashboards-observability/public/components/event_analytics/__tests__/__snapshots__/no_results.test.tsx.snap @@ -192,13 +192,11 @@ exports[`No result component Renders No result component 1`] = `

- Your query may not match anything in the current time range, or there may not be any data at all in - the currently selected time range. Try change time range, query filters or choose different time fields + Your query may not match anything in the current time range, or there may not be any data at all in the currently selected time range. Try change time range, query filters or choose different time fields

diff --git a/dashboards-observability/public/components/notebooks/components/paragraph_components/__tests__/__snapshots__/para_input.test.tsx.snap b/dashboards-observability/public/components/notebooks/components/paragraph_components/__tests__/__snapshots__/para_input.test.tsx.snap index 0929413ba..813c41868 100644 --- a/dashboards-observability/public/components/notebooks/components/paragraph_components/__tests__/__snapshots__/para_input.test.tsx.snap +++ b/dashboards-observability/public/components/notebooks/components/paragraph_components/__tests__/__snapshots__/para_input.test.tsx.snap @@ -274,7 +274,7 @@ exports[` spec renders the visualization component 1`] = ` data-test-subj="superDatePickerstartDatePopoverButton" title="2020-07-21T18:37:44.710Z" > - 2020-07-22T00:07:44+05:30 + 2020-07-21T18:37:44+00:00 @@ -298,7 +298,7 @@ exports[` spec renders the visualization component 1`] = ` data-test-subj="superDatePickerendDatePopoverButton" title="2020-08-20T18:37:44.710Z" > - 2020-08-21T00:07:44+05:30 + 2020-08-20T18:37:44+00:00 diff --git a/dashboards-observability/public/components/notebooks/components/paragraph_components/__tests__/__snapshots__/para_output.test.tsx.snap b/dashboards-observability/public/components/notebooks/components/paragraph_components/__tests__/__snapshots__/para_output.test.tsx.snap index 7e6ed5737..0828c3f4c 100644 --- a/dashboards-observability/public/components/notebooks/components/paragraph_components/__tests__/__snapshots__/para_output.test.tsx.snap +++ b/dashboards-observability/public/components/notebooks/components/paragraph_components/__tests__/__snapshots__/para_output.test.tsx.snap @@ -72,6 +72,6 @@ exports[` spec renders visualization outputs 1`] = ` class="euiText euiText--small" style="margin-left: 9px;" > - 2020-07-22T00:07:44+05:30 - 2020-08-21T00:07:44+05:30 + 2020-07-21T18:37:44+00:00 - 2020-08-20T18:37:44+00:00 `; From 06440ddd843023e6ca0c4d9e9b21a8c3f84a877c Mon Sep 17 00:00:00 2001 From: Mrunal Zambre <79525611+mrunal-z@users.noreply.github.com> Date: Fri, 20 May 2022 19:37:10 +0530 Subject: [PATCH 08/12] implemented treemap config options Signed-off-by: Mrunal Zambre --- .../integration/1_event_analytics.spec.js | 99 +++--- .../.cypress/utils/event_constants.js | 23 +- .../common/constants/colors.ts | 162 ++++++++++ .../__snapshots__/config_panel.test.tsx.snap | 293 ++++++++++++++++++ .../config_controls/config_chart_options.tsx | 36 ++- .../config_color_palette_picker.tsx | 72 +++++ .../config_controls/config_value_options.tsx | 4 +- .../config_panes/config_controls/index.ts | 1 + .../__snapshots__/treemap.test.tsx.snap | 14 + .../charts/maps/treemap_type.ts | 47 ++- .../visualizations/charts/maps/treemaps.tsx | 45 ++- 11 files changed, 736 insertions(+), 60 deletions(-) create mode 100644 dashboards-observability/common/constants/colors.ts create mode 100644 dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_color_palette_picker.tsx diff --git a/dashboards-observability/.cypress/integration/1_event_analytics.spec.js b/dashboards-observability/.cypress/integration/1_event_analytics.spec.js index 644f350f2..540bbf564 100644 --- a/dashboards-observability/.cypress/integration/1_event_analytics.spec.js +++ b/dashboards-observability/.cypress/integration/1_event_analytics.spec.js @@ -17,27 +17,27 @@ import { landOnEventHome, landOnEventExplorer, landOnEventVisualizations, - landOnPanels + landOnPanels, + renderTreeMapchart } from '../utils/event_constants'; import { supressResizeObserverIssue } from '../utils/constants'; const vis_name_sub_string = Math.floor(Math.random() * 100); -const saveVisulizationAndVerify = () => { +const saveVisualizationAndVerify = () => { cy.get('[data-test-subj="eventExplorer__saveManagementPopover"]').click(); cy.get('[data-test-subj="eventExplorer__querySaveComboBox"]').click() cy.get('.euiComboBoxOptionsList__rowWrap .euiFilterSelectItem').eq(0).click(); cy.get('.euiPopover__panel .euiFormControlLayoutIcons [data-test-subj="comboBoxToggleListButton"]').eq(0).click(); - cy.get('.euiPopover__panel input').eq(1).type(`Test visulization_Gauge` + vis_name_sub_string); + cy.get('.euiPopover__panel input').eq(1).type(`Test visualization` + vis_name_sub_string); cy.get('[data-test-subj="eventExplorer__querySaveConfirm"]').click(); cy.wait(delay); - cy.get('.euiHeaderBreadcrumbs a').eq(1).click(); - cy.get('.euiFlexGroup .euiFormControlLayout__childrenWrapper input').eq(0).type(`Test visulization_Gauge` + vis_name_sub_string).type('{enter}'); + cy.get('.euiFlexGroup .euiFormControlLayout__childrenWrapper input').eq(0).type(`Test visualization` + vis_name_sub_string).type('{enter}'); cy.get('.euiBasicTable .euiTableCellContent button').eq(0).click(); } -const deleteVisulaization = () => { +const deleteVisualization = () => { cy.get('a[href = "#/event_analytics"]').click(); - cy.get('.euiFlexGroup .euiFormControlLayout__childrenWrapper input').eq(0).type(`Test visulization_Gauge`).type('{enter}'); + cy.get('.euiFlexGroup .euiFormControlLayout__childrenWrapper input').eq(0).type(`Test visualization`).type('{enter}'); cy.get('input[data-test-subj = "checkboxSelectAll"]').click(); cy.get('.euiButtonContent.euiButtonContent--iconRight.euiButton__content').click(); cy.get('.euiContextMenuItem .euiContextMenuItem__text').eq(0).click(); @@ -691,31 +691,13 @@ describe('Renders Tree Map', () => { }); it('Renders Tree Map', () => { - querySearch(TEST_QUERIES[3].query, TEST_QUERIES[3].dateRangeDOM); - cy.get('[data-test-subj="configPane__vizTypeSelector"] [data-test-subj="comboBoxInput"]').type('Tree Map').type('{enter}'); - cy.get('#configPanel__panelOptions .euiFieldText').click().type('Tree Map'); - cy.get('.euiFlexItem .euiFormRow [placeholder="Description"]').click().type('This is the description for Tree Map'); - cy.get('.euiComboBox__inputWrap.euiComboBox__inputWrap-isClearable').eq(0).click(); - cy.get('.euiFormControlLayoutIcons [data-test-subj ="comboBoxToggleListButton"]').eq(1).click(); - cy.get('.euiComboBoxOption__content').eq(2).click(); - cy.get('.euiFormControlLayoutIcons [data-test-subj ="comboBoxToggleListButton"]').eq(2).click(); - cy.get('.euiComboBoxOption__content').eq(3).click(); - cy.get('.euiFormControlLayoutIcons [data-test-subj ="comboBoxToggleListButton"]').eq(3).click(); - cy.get('.euiComboBoxOption__content').eq(1).click(); + renderTreeMapchart(); cy.get('.euiFlexItem.euiFlexItem--flexGrowZero .euiButton__text').eq(2).click(); + cy.get('path.surface').should('have.length', 176); }); it('Renders Tree Map, add value parameters and verify Reset button click is working', () => { - querySearch(TEST_QUERIES[3].query, TEST_QUERIES[3].dateRangeDOM); - cy.get('[data-test-subj="configPane__vizTypeSelector"] [data-test-subj="comboBoxInput"]').type('Tree Map').type('{enter}'); - cy.wait(delay); - cy.get('#configPanel__panelOptions .euiFieldText').click().type('Tree Map'); - cy.get('.euiFlexItem .euiFormRow [placeholder="Description"]').click().type('This is the description for Tree Map'); - cy.get('.euiComboBox__inputWrap.euiComboBox__inputWrap-isClearable').eq(0).click(); - cy.get('.euiFormControlLayoutIcons [data-test-subj ="comboBoxToggleListButton"]').eq(1).click(); - cy.get('.euiComboBoxOption__content').eq(0).click(); - cy.get('.euiFormControlLayoutIcons [data-test-subj ="comboBoxToggleListButton"]').eq(2).click(); - cy.get('.euiComboBoxOption__content').eq(0).click(); + renderTreeMapchart(); cy.get('.euiFlexItem.euiFlexItem--flexGrowZero .euiButton__text').eq(2).click(); cy.get('[data-test-subj="visualizeEditorResetButton"]').click(); cy.get('#configPanel__panelOptions .euiFieldText').should('have.value', ''); @@ -725,8 +707,31 @@ describe('Renders Tree Map', () => { cy.get('.euiComboBox__inputWrap.euiComboBox__inputWrap-isClearable').eq(3).should('have.value', ''); }); - it('Renders Tree Map and Save Visulization', () => { - querySearch(TEST_QUERIES[3].query, TEST_QUERIES[3].dateRangeDOM); + it('Renders Tree Map, Save and Delete Visualization', () => { + renderTreeMapchart(); + cy.get('.euiFlexItem.euiFlexItem--flexGrowZero .euiButton__text').eq(2).click(); + saveVisualizationAndVerify(); + cy.wait(delay * 4); + deleteVisualization(); + }); + + it('Render Tree Map chart and verify color theme under Chart styles options', () =>{ + renderTreeMapchart(); + cy.get('.euiTitle.euiTitle--xxsmall').contains('Color Theme').should('exist'); + cy.get('.euiSuperSelectControl').contains('Default').click(); + cy.get('.euiContextMenuItem__text .euiColorPalettePicker__item').eq(1).contains('Single Color').click(); + cy.get('.euiFieldText.euiColorPicker__input.euiFieldText--withIcon').click(); + cy.get('[aria-label="Select #D36086 as the color"]').click(); + cy.get('.euiButton__text').contains('Preview').should('exist').click(); + cy.get('path[style*="rgb(29, 30, 36)"]').eq(0).should('exist'); + cy.get('.euiSuperSelectControl').click(); + cy.get('.euiColorPalettePicker__item').eq(7).contains('Red-Blue').click(); + cy.get('.euiButton__text').contains('Preview').should('exist').click(); + cy.get('path[style*="rgb(68, 68, 68)"]').eq(0).should('exist'); + }); + + it('Traverse between root and parent node in Tree Map chart', () => { + querySearch(TEST_QUERIES[5].query, TEST_QUERIES[5].dateRangeDOM); cy.get('[data-test-subj="configPane__vizTypeSelector"] [data-test-subj="comboBoxInput"]').type('Tree Map').type('{enter}'); cy.get('#configPanel__panelOptions .euiFieldText').click().type('Tree Map'); cy.get('.euiFlexItem .euiFormRow [placeholder="Description"]').click().type('This is the description for Tree Map'); @@ -734,15 +739,35 @@ describe('Renders Tree Map', () => { cy.get('.euiFormControlLayoutIcons [data-test-subj ="comboBoxToggleListButton"]').eq(1).click(); cy.get('.euiComboBoxOption__content').eq(2).click(); cy.get('.euiFormControlLayoutIcons [data-test-subj ="comboBoxToggleListButton"]').eq(2).click(); - cy.get('.euiComboBoxOption__content').eq(3).click(); - cy.get('.euiFormControlLayoutIcons [data-test-subj ="comboBoxToggleListButton"]').eq(3).click(); cy.get('.euiComboBoxOption__content').eq(1).click(); - cy.get('.euiFlexItem.euiFlexItem--flexGrowZero .euiButton__text').eq(2).click(); - saveVisulizationAndVerify(); + cy.get('.euiFormControlLayoutIcons [data-test-subj ="comboBoxToggleListButton"]').eq(3).click(); + cy.get('.euiComboBoxOption__content').eq(0).click(); + cy.wait(delay); + cy.get('.euiSuperSelectControl').click(); + cy.get('.euiColorPalettePicker__item').eq(7).contains('Red-Blue').click(); + cy.get('.euiButton__text').contains('Preview').should('exist').click(); + cy.get('.slicetext[data-unformatted="US"]').click({force:true}); + cy.wait(delay); + cy.get('.slicetext[data-unformatted*="Cleveland"]').click({force:true}); + cy.get('text.slicetext').contains('100% of entry').should('exist'); + cy.get('.pathbar.cursor-pointer .slicetext[data-unformatted="US"]').click({force:true}); + cy.wait(delay); + cy.get('.pathbar.cursor-pointer .slicetext[data-unformatted=" "]').click({force:true}); }); - - it('Delete All the Random Created Visulization Gauge Chart', () => { - deleteVisulaization(); + it('"No results found" message when user fails to select proper fields', () =>{ + querySearch(TEST_QUERIES[5].query, TEST_QUERIES[5].dateRangeDOM); + cy.get('[data-test-subj="configPane__vizTypeSelector"] [data-test-subj="comboBoxInput"]').type('Tree Map').type('{enter}'); + cy.get('#configPanel__panelOptions .euiFieldText').click().type('Tree Map'); + cy.get('.euiFlexItem .euiFormRow [placeholder="Description"]').click().type('This is the description for Tree Map'); + cy.get('.euiComboBox__inputWrap.euiComboBox__inputWrap-isClearable').eq(0).click(); + cy.get('.euiFormControlLayoutIcons [data-test-subj ="comboBoxToggleListButton"]').eq(3).click(); + cy.get('.euiComboBoxOption__content').eq(1).click(); + cy.wait(delay); + cy.get('.euiSuperSelectControl').click(); + cy.get('.euiColorPalettePicker__item').eq(7).contains('Red-Blue').click(); + cy.get('.euiButton__text').contains('Preview').should('exist').click(); + cy.get('.euiTextColor.euiTextColor--subdued').contains('No results found').should('exist'); }); }); + diff --git a/dashboards-observability/.cypress/utils/event_constants.js b/dashboards-observability/.cypress/utils/event_constants.js index eb33bd509..0155a5d19 100644 --- a/dashboards-observability/.cypress/utils/event_constants.js +++ b/dashboards-observability/.cypress/utils/event_constants.js @@ -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_flights | stats avg(FlightDelayMin) by DestCountry, DestCityName', + dateRangeDOM: YEAR_TO_DATE_DOM_ID +}, ]; export const TESTING_PANEL = 'Mock Testing Panels'; @@ -70,4 +74,21 @@ export const landOnPanels = () => { `${Cypress.env('opensearchDashboards')}/app/observability-dashboards#/operational_panels` ); cy.wait(delay); -}; \ No newline at end of file +}; + +export const renderTreeMapchart = () => { + querySearch(TEST_QUERIES[5].query, TEST_QUERIES[5].dateRangeDOM); + cy.get('[data-test-subj="configPane__vizTypeSelector"] [data-test-subj="comboBoxInput"]').type('Tree Map').type('{enter}'); + cy.get('#configPanel__panelOptions .euiFieldText').click().type('Tree Map'); + cy.get('.euiFlexItem .euiFormRow [placeholder="Description"]').click().type('This is the description for Tree Map'); + cy.get('.euiFormControlLayoutIcons [data-test-subj ="comboBoxToggleListButton"]').eq(1).click(); + cy.get('.euiComboBoxOption__content').eq(2).click(); + cy.get('.euiFormControlLayoutIcons [data-test-subj ="comboBoxToggleListButton"]').eq(2).click(); + cy.get('.euiComboBoxOption__content').eq(1).click(); + cy.get('.euiFormControlLayoutIcons [data-test-subj ="comboBoxToggleListButton"]').eq(3).click(); + cy.get('.euiComboBoxOption__content').eq(0).click(); + cy.get('.euiIEFlexWrapFix').eq(2).contains('Treemap').should('exist'); + cy.get('#configPanel__treemap_options').contains('Tiling Algorithm').should('exist'); + cy.get('[data-test-subj = "comboBoxInput"]').eq(4).click(); + cy.get('button[name="Slice Dice"]').click(); +}; diff --git a/dashboards-observability/common/constants/colors.ts b/dashboards-observability/common/constants/colors.ts new file mode 100644 index 000000000..ea598f676 --- /dev/null +++ b/dashboards-observability/common/constants/colors.ts @@ -0,0 +1,162 @@ +/* + * Copyright OpenSearch Contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +import { colorPalette } from '@elastic/eui'; + +export const BLUES_PALETTE = { + name: 'Blues', + label: 'Blues', + colors: [ + 'rgb(5,10,172)', + 'rgb(40,60,190)', + 'rgb(70,100,245)', + 'rgb(90,120,245)', + 'rgb(106,137,247)', + 'rgb(220,220,220)', + ], +}; + +export const REDS_PALETTE = { + name: 'Reds', + label: 'Reds', + colors: ['rgb(220,220,220)', 'rgb(245,195,157)', 'rgb(245,160,105)', 'rgb(178,10,28)'], +}; + +export const GREENS_PALETTE = { + name: 'Greens', + label: 'Greens', + colors: [ + 'rgb(0,68,27)', + 'rgb(0,109,44)', + 'rgb(35,139,69)', + 'rgb(65,171,93)', + 'rgb(116,196,118)', + 'rgb(161,217,155)', + 'rgb(199,233,192)', + 'rgb(229,245,224)', + 'rgb(247,252,245)', + ], +}; + +export const GREYS_PALETTE = { + name: 'Greys', + label: 'Greys', + colors: ['rgb(0,0,0)', 'rgb(255,255,255)'], +}; + +export const BLUERED_PALETTE = { + name: 'Bluered', + label: 'Blue-Red', + colors: ['rgb(0,0,255)', 'rgb(255,0,0)'], +}; + +export const RdBu_PALETTE = { + name: 'RdBu', + label: 'Red-Blue', + colors: [ + 'rgb(5,10,172)', + 'rgb(106,137,247)', + 'rgb(190,190,190)', + 'rgb(220,170,132)', + 'rgb(230,145,90)', + 'rgb(178,10,28)', + ], +}; + +export const YlOrRd_PALETTE = { + name: 'YlOrRd', + label: 'Yellow-Orange-Red', + colors: [ + 'rgb(128,0,38)', + 'rgb(189,0,38)', + 'rgb(227,26,28)', + 'rgb(252,78,42)', + 'rgb(253,141,60)', + 'rgb(254,178,76)', + 'rgb(254,217,118)', + 'rgb(255,237,160)', + 'rgb(255,255,204)', + ], +}; + +export const YlGnBu_PALETTE = { + name: 'YlGnBu', + label: 'Yellow-Green-Blue', + colors: [ + 'rgb(8,29,88)', + 'rgb(37,52,148)', + 'rgb(34,94,168)', + 'rgb(29,145,192)', + 'rgb(65,182,196)', + 'rgb(127,205,187)', + 'rgb(199,233,180)', + 'rgb(237,248,217)', + 'rgb(255,255,217)', + ], +}; + +export const DEFAULT_PALETTE = 'default'; +export const SINGLE_COLOR_PALETTE = 'singleColor'; + +export const TREEMAP_PALETTES = [ + { + value: DEFAULT_PALETTE, + title: 'Default', + type: 'text', + }, + { + value: SINGLE_COLOR_PALETTE, + title: 'Single Color', + type: 'text', + }, + { + value: BLUES_PALETTE.name, + title: BLUES_PALETTE.label, + palette: colorPalette(BLUES_PALETTE.colors, 20), + type: 'gradient', + }, + { + value: REDS_PALETTE.name, + title: REDS_PALETTE.label, + palette: colorPalette(REDS_PALETTE.colors, 20), + type: 'gradient', + }, + { + value: GREENS_PALETTE.name, + title: GREENS_PALETTE.label, + palette: colorPalette(GREENS_PALETTE.colors, 20), + type: 'gradient', + }, + { + value: GREYS_PALETTE.name, + title: GREYS_PALETTE.label, + palette: colorPalette(GREYS_PALETTE.colors, 20), + type: 'gradient', + }, + { + value: BLUERED_PALETTE.name, + title: BLUERED_PALETTE.label, + palette: colorPalette(BLUERED_PALETTE.colors, 20), + type: 'gradient', + }, + { + value: RdBu_PALETTE.name, + title: RdBu_PALETTE.label, + palette: colorPalette(RdBu_PALETTE.colors, 20, true), + type: 'gradient', + }, + { + value: YlOrRd_PALETTE.name, + title: YlOrRd_PALETTE.label, + palette: colorPalette(YlOrRd_PALETTE.colors, 20), + type: 'gradient', + }, + { + value: YlGnBu_PALETTE.name, + title: YlGnBu_PALETTE.label, + palette: colorPalette(YlGnBu_PALETTE.colors, 20), + type: 'gradient', + }, +]; diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/__tests__/__snapshots__/config_panel.test.tsx.snap b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/__tests__/__snapshots__/config_panel.test.tsx.snap index 134eff76a..9bedcaeb4 100644 --- a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/__tests__/__snapshots__/config_panel.test.tsx.snap +++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/__tests__/__snapshots__/config_panel.test.tsx.snap @@ -998,6 +998,299 @@ exports[`Config panel component Renders config panel with visualization data 1`] }, ], }, + Object { + "editor": [Function], + "id": "treemap_options", + "mapTo": "treemapOptions", + "name": "Treemap", + "schemas": Array [ + Object { + "component": null, + "defaultState": Array [ + Object { + "label": "Squarify", + "name": "Squarify", + "value": "squarify", + }, + ], + "isSingleSelection": true, + "mapTo": "tilingAlgorithm", + "name": "Tiling Algorithm", + "options": Array [ + Object { + "name": "Squarify", + "value": "squarify", + }, + Object { + "name": "Binary", + "value": "binary", + }, + Object { + "name": "Dice", + "value": "dice", + }, + Object { + "name": "Slice", + "value": "slice", + }, + Object { + "name": "Slice Dice", + "value": "slice-dice", + }, + Object { + "name": "Dice Slice", + "value": "dice-slice", + }, + ], + }, + ], + }, + Object { + "editor": [Function], + "id": "chart_styles", + "mapTo": "chartStyles", + "name": "Chart Styles", + "schemas": Array [ + 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", + }, + 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 { diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_chart_options.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_chart_options.tsx index 2f946ccb2..38f6187d9 100644 --- a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_chart_options.tsx +++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_chart_options.tsx @@ -4,7 +4,7 @@ */ import React, { useMemo, useCallback } from 'react'; -import { EuiAccordion, EuiSpacer } from '@elastic/eui'; +import { EuiAccordion, EuiSpacer, EuiForm } from '@elastic/eui'; import { PanelItem } from './config_panel_item'; export const ConfigChartOptions = ({ @@ -13,8 +13,6 @@ export const ConfigChartOptions = ({ vizState, handleConfigChange, }: any) => { - const { data } = visualizations; - const { data: vizData = {}, metadata: { fields = [] } = {} } = data?.rawVizData; const handleConfigurationChange = useCallback( (stateFiledName) => { return (changes) => { @@ -29,30 +27,34 @@ export const ConfigChartOptions = ({ const dimensions = useMemo(() => { return schemas.map((schema, index) => { + let params = {}; const DimensionComponent = schema.component || PanelItem; - const params = { - paddingTitle: schema.name, - advancedTitle: 'advancedTitle', - dropdownList: schema?.options?.map((option) => ({ name: option })) || fields, - onSelectChange: handleConfigurationChange(schema.mapTo), - isSingleSelection: schema.isSingleSelection, - selectedAxis: vizState[schema.mapTo], - ...schema.props, - }; + if (schema.eleType === 'colorpicker') { + params = { + title: schema.name, + selectedColor: vizState[schema.mapTo] || schema?.defaultState, + colorPalettes: schema.options || [], + onSelectChange: handleConfigurationChange(schema.mapTo), + vizState, + ...schema.props, + }; + } return ( <> - - + + + + ); }); - }, [schemas, fields, vizState, handleConfigurationChange]); + }, [vizState, handleConfigurationChange]); return ( {dimensions} diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_color_palette_picker.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_color_palette_picker.tsx new file mode 100644 index 000000000..44632bf4a --- /dev/null +++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_color_palette_picker.tsx @@ -0,0 +1,72 @@ +/* + * Copyright OpenSearch Contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +import React, { useState } from 'react'; +import { + EuiTitle, + EuiSpacer, + EuiFlexItem, + EuiFlexGroup, + EuiColorPalettePicker, + EuiColorPicker, + EuiFormRow, +} from '@elastic/eui'; +import { + DEFAULT_PALETTE, + SINGLE_COLOR_PALETTE, +} from '../../../../../../../../common/constants/colors'; + +export const ColorPalettePicker = ({ + title, + selectedColor, + colorPalettes, + onSelectChange, +}: any) => { + const getColorObject = (name: string = DEFAULT_PALETTE, color?: string) => { + return { + name, + color: color ?? name, + }; + }; + + const [singleColor, setSingleColor] = useState('#000000'); + + const onPaletteChange = (value: string) => { + if (value === SINGLE_COLOR_PALETTE) + onSelectChange(getColorObject(SINGLE_COLOR_PALETTE, singleColor)); + else onSelectChange(getColorObject(value)); + }; + + const onColorChange = (value: string) => { + setSingleColor(value); + onSelectChange(getColorObject(SINGLE_COLOR_PALETTE, value)); + }; + + return ( + <> + +

{title}

+ + + + {selectedColor.name === SINGLE_COLOR_PALETTE && ( + + + + + + )} + + + + + + ); +}; diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_value_options.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_value_options.tsx index 7f0c75de5..d86467f85 100644 --- a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_value_options.tsx +++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_value_options.tsx @@ -36,11 +36,11 @@ export const ConfigValueOptions = ({ paddingTitle: schema.name, advancedTitle: 'advancedTitle', dropdownList: - schema?.options?.map((option) => ({ name: option })) || + schema?.options?.map((option) => ({ ...option })) || fields.map((item) => ({ ...item })), onSelectChange: handleConfigurationChange(schema.mapTo), isSingleSelection: schema.isSingleSelection, - selectedAxis: vizState[schema.mapTo], + selectedAxis: vizState[schema.mapTo] || schema?.defaultState, vizState, ...schema.props, }; diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/index.ts b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/index.ts index f75c9126b..ead2f05d5 100644 --- a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/index.ts +++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/index.ts @@ -10,3 +10,4 @@ export { ConfigDataLinks } from './config_data_links'; export { ConfigThresholds } from './config_thresholds'; export { ConfigText } from './config_text'; export { ConfigGaugeValueOptions } from './config_gauge_options'; +export { ColorPalettePicker } from './config_color_palette_picker'; diff --git a/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/treemap.test.tsx.snap b/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/treemap.test.tsx.snap index 881bd6eb7..e2a25bbb0 100644 --- a/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/treemap.test.tsx.snap +++ b/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/treemap.test.tsx.snap @@ -298,6 +298,12 @@ exports[`Treemap component Renders treemap component 1`] = ` "mapTo": "layoutConfig", "name": "Layout", }, + Object { + "editor": [Function], + "id": "availability-panel", + "mapTo": "availabilityConfig", + "name": "Availability", + }, ], }, "fullLabel": "Bar", @@ -360,6 +366,9 @@ exports[`Treemap component Renders treemap component 1`] = ` "", ], "textinfo": "label+value+percent parent+percent entry", + "tiling": Object { + "packing": undefined, + }, "type": "treemap", "values": Array [ 154, @@ -416,6 +425,9 @@ exports[`Treemap component Renders treemap component 1`] = ` "", ], "textinfo": "label+value+percent parent+percent entry", + "tiling": Object { + "packing": undefined, + }, "type": "treemap", "values": Array [ 154, @@ -429,6 +441,7 @@ exports[`Treemap component Renders treemap component 1`] = ` ] } debug={false} + divId="explorerPlotComponent" layout={ Object { "autosize": true, @@ -473,6 +486,7 @@ exports[`Treemap component Renders treemap component 1`] = ` useResizeHandler={true} >
({ }, ], }, + { + id: 'treemap_options', + name: 'Treemap', + editor: ConfigValueOptions, + mapTo: 'treemapOptions', + schemas: [ + { + name: 'Tiling Algorithm', + isSingleSelection: true, + component: null, + mapTo: 'tilingAlgorithm', + options: [ + { name: 'Squarify', value: 'squarify' }, + { name: 'Binary', value: 'binary' }, + { name: 'Dice', value: 'dice' }, + { name: 'Slice', value: 'slice' }, + { name: 'Slice Dice', value: 'slice-dice' }, + { name: 'Dice Slice', value: 'dice-slice' }, + ], + defaultState: [{ name: 'Squarify', label: 'Squarify', value: 'squarify' }], + }, + ], + }, + { + id: 'chart_styles', + name: 'Chart Styles', + editor: ConfigChartOptions, + mapTo: 'chartStyles', + schemas: [ + { + name: 'Color Theme', + isSingleSelection: true, + component: ColorPalettePicker, + mapTo: 'colorTheme', + eleType: 'colorpicker', + options: TREEMAP_PALETTES, + defaultState: { name: DEFAULT_PALETTE }, + }, + ], + }, ], }, { diff --git a/dashboards-observability/public/components/visualizations/charts/maps/treemaps.tsx b/dashboards-observability/public/components/visualizations/charts/maps/treemaps.tsx index 7f44b2060..6cf0bce7b 100644 --- a/dashboards-observability/public/components/visualizations/charts/maps/treemaps.tsx +++ b/dashboards-observability/public/components/visualizations/charts/maps/treemaps.tsx @@ -9,6 +9,7 @@ import { indexOf, isEmpty, isEqual, isNull, uniq } from 'lodash'; import { Plt } from '../../plotly/plot'; import { EmptyPlaceholder } from '../../../event_analytics/explorer/visualizations/shared_components/empty_placeholder'; import { NUMERICAL_FIELDS } from '../../../../../common/constants/shared'; +import { DEFAULT_PALETTE, SINGLE_COLOR_PALETTE } from '../../../../../common/constants/colors'; export const TreeMap = ({ visualizations, layout, config }: any) => { const { @@ -38,11 +39,23 @@ export const TreeMap = ({ visualizations, layout, config }: any) => { ? dataConfig?.valueOptions.valueField[0] : fields[0]; + const colorField = + dataConfig?.chartStyles && dataConfig?.chartStyles.colorTheme + ? dataConfig?.chartStyles.colorTheme + : { name: DEFAULT_PALETTE }; + + const tilingAlgorithm = + dataConfig?.treemapOptions && + dataConfig?.treemapOptions.tilingAlgorithm && + !isEmpty(dataConfig?.treemapOptions.tilingAlgorithm) + ? dataConfig?.treemapOptions.tilingAlgorithm[0] + : 'squarify'; + if ( isEmpty(data[childField.name]) || isEmpty(data[valueField.name]) || (!isNull(parentField) && isEmpty(data[parentField.name])) || - isEqual(childField, parentField) || + isEqual(childField.name, parentField?.name) || indexOf(NUMERICAL_FIELDS, valueField.type) < 0 ) return ; @@ -61,6 +74,30 @@ export const TreeMap = ({ visualizations, layout, config }: any) => { valuesArray = [...data[valueField.name], ...Array(uniqueParents.length).fill(0)]; } + const marker = + colorField.name === SINGLE_COLOR_PALETTE + ? { + marker: { + colorscale: [ + [0, colorField.color], + [1, colorField.color], + ], + colorbar: { + len: 1, + }, + }, + } + : colorField.name !== DEFAULT_PALETTE + ? { + marker: { + colorscale: colorField.name, + colorbar: { + len: 1, + }, + }, + } + : undefined; + return [ { type: 'treemap', @@ -68,9 +105,13 @@ export const TreeMap = ({ visualizations, layout, config }: any) => { parents: parentsArray, values: valuesArray, textinfo: 'label+value+percent parent+percent entry', + tiling: { + packing: tilingAlgorithm.value, + }, + ...marker, }, ]; - }, [data, childField, valueField, parentField]); + }, [data, childField, valueField, parentField, colorField, tilingAlgorithm]); const mergedLayout = { ...layout, From 1ca37077c654e84cb7239db4543e976063f30814 Mon Sep 17 00:00:00 2001 From: Mrunal Zambre Date: Tue, 31 May 2022 14:00:58 +0530 Subject: [PATCH 09/12] added multicolored theme option Signed-off-by: Mrunal Zambre --- .../common/constants/colors.ts | 42 +++++----- .../config_controls/config_chart_options.tsx | 22 +++++- .../config_color_palette_picker.tsx | 48 +++++++---- .../charts/maps/treemap_type.ts | 6 +- .../visualizations/charts/maps/treemaps.tsx | 79 ++++++++++++------- 5 files changed, 132 insertions(+), 65 deletions(-) diff --git a/dashboards-observability/common/constants/colors.ts b/dashboards-observability/common/constants/colors.ts index ea598f676..5f9304ff2 100644 --- a/dashboards-observability/common/constants/colors.ts +++ b/dashboards-observability/common/constants/colors.ts @@ -46,13 +46,13 @@ export const GREYS_PALETTE = { colors: ['rgb(0,0,0)', 'rgb(255,255,255)'], }; -export const BLUERED_PALETTE = { +export const BLUE_RED_PALETTE = { name: 'Bluered', label: 'Blue-Red', colors: ['rgb(0,0,255)', 'rgb(255,0,0)'], }; -export const RdBu_PALETTE = { +export const RED_BLUE_PALETTE = { name: 'RdBu', label: 'Red-Blue', colors: [ @@ -65,7 +65,7 @@ export const RdBu_PALETTE = { ], }; -export const YlOrRd_PALETTE = { +export const YELLOW_ORANGE_RED_PALETTE = { name: 'YlOrRd', label: 'Yellow-Orange-Red', colors: [ @@ -81,7 +81,7 @@ export const YlOrRd_PALETTE = { ], }; -export const YlGnBu_PALETTE = { +export const YELLOW_GREEN_BLUE_PALETTE = { name: 'YlGnBu', label: 'Yellow-Green-Blue', colors: [ @@ -99,8 +99,9 @@ export const YlGnBu_PALETTE = { export const DEFAULT_PALETTE = 'default'; export const SINGLE_COLOR_PALETTE = 'singleColor'; +export const MULTI_COLOR_PALETTE = 'multicolor'; -export const TREEMAP_PALETTES = [ +export const COLOR_PALETTES = [ { value: DEFAULT_PALETTE, title: 'Default', @@ -108,7 +109,12 @@ export const TREEMAP_PALETTES = [ }, { value: SINGLE_COLOR_PALETTE, - title: 'Single Color', + title: 'Single color', + type: 'text', + }, + { + value: MULTI_COLOR_PALETTE, + title: 'Multicolored', type: 'text', }, { @@ -136,27 +142,27 @@ export const TREEMAP_PALETTES = [ type: 'gradient', }, { - value: BLUERED_PALETTE.name, - title: BLUERED_PALETTE.label, - palette: colorPalette(BLUERED_PALETTE.colors, 20), + value: BLUE_RED_PALETTE.name, + title: BLUE_RED_PALETTE.label, + palette: colorPalette(BLUE_RED_PALETTE.colors, 20), type: 'gradient', }, { - value: RdBu_PALETTE.name, - title: RdBu_PALETTE.label, - palette: colorPalette(RdBu_PALETTE.colors, 20, true), + value: RED_BLUE_PALETTE.name, + title: RED_BLUE_PALETTE.label, + palette: colorPalette(RED_BLUE_PALETTE.colors, 20, true), type: 'gradient', }, { - value: YlOrRd_PALETTE.name, - title: YlOrRd_PALETTE.label, - palette: colorPalette(YlOrRd_PALETTE.colors, 20), + value: YELLOW_ORANGE_RED_PALETTE.name, + title: YELLOW_ORANGE_RED_PALETTE.label, + palette: colorPalette(YELLOW_ORANGE_RED_PALETTE.colors, 20), type: 'gradient', }, { - value: YlGnBu_PALETTE.name, - title: YlGnBu_PALETTE.label, - palette: colorPalette(YlGnBu_PALETTE.colors, 20), + value: YELLOW_GREEN_BLUE_PALETTE.name, + title: YELLOW_GREEN_BLUE_PALETTE.label, + palette: colorPalette(YELLOW_GREEN_BLUE_PALETTE.colors, 20), type: 'gradient', }, ]; diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_chart_options.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_chart_options.tsx index 38f6187d9..668a0302c 100644 --- a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_chart_options.tsx +++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_chart_options.tsx @@ -13,6 +13,10 @@ export const ConfigChartOptions = ({ vizState, handleConfigChange, }: any) => { + const { data } = visualizations; + const { data: vizData = {}, metadata: { fields = [] } = {} } = data?.rawVizData; + const { dataConfig = {}, layoutConfig = {} } = visualizations?.data?.userConfigs; + const handleConfigurationChange = useCallback( (stateFiledName) => { return (changes) => { @@ -29,12 +33,28 @@ export const ConfigChartOptions = ({ return schemas.map((schema, index) => { let params = {}; const DimensionComponent = schema.component || PanelItem; - if (schema.eleType === 'colorpicker') { + if (schema.eleType === 'treemapColorPicker') { params = { title: schema.name, selectedColor: vizState[schema.mapTo] || schema?.defaultState, colorPalettes: schema.options || [], + showParentColorPicker: + dataConfig?.valueOptions?.parentField !== undefined && + dataConfig?.valueOptions?.parentField.length > 0, + onSelectChange: handleConfigurationChange(schema.mapTo), + vizState, + ...schema.props, + }; + } else { + params = { + paddingTitle: schema.name, + advancedTitle: 'advancedTitle', + dropdownList: + schema?.options?.map((option) => ({ ...option })) || + fields.map((item) => ({ ...item })), onSelectChange: handleConfigurationChange(schema.mapTo), + isSingleSelection: schema.isSingleSelection, + selectedAxis: vizState[schema.mapTo] || schema.defaultState, vizState, ...schema.props, }; diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_color_palette_picker.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_color_palette_picker.tsx index 44632bf4a..2db11b3b3 100644 --- a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_color_palette_picker.tsx +++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_color_palette_picker.tsx @@ -15,33 +15,46 @@ import { } from '@elastic/eui'; import { DEFAULT_PALETTE, + MULTI_COLOR_PALETTE, SINGLE_COLOR_PALETTE, } from '../../../../../../../../common/constants/colors'; export const ColorPalettePicker = ({ title, selectedColor, + showParentColorPicker, colorPalettes, onSelectChange, }: any) => { - const getColorObject = (name: string = DEFAULT_PALETTE, color?: string) => { - return { - name, - color: color ?? name, - }; - }; + const getColorObject = ( + name: string = DEFAULT_PALETTE, + childColor?: string, + parentColor?: string + ) => ({ + name, + childColor: childColor ?? name, + parentColor: parentColor ?? name, + }); - const [singleColor, setSingleColor] = useState('#000000'); + const [childColor, setChildColor] = useState('#000000'); + const [parentColor, setParentColor] = useState('#000000'); const onPaletteChange = (value: string) => { if (value === SINGLE_COLOR_PALETTE) - onSelectChange(getColorObject(SINGLE_COLOR_PALETTE, singleColor)); + onSelectChange(getColorObject(SINGLE_COLOR_PALETTE, childColor)); + else if (value === MULTI_COLOR_PALETTE) + onSelectChange(getColorObject(MULTI_COLOR_PALETTE, childColor, parentColor)); else onSelectChange(getColorObject(value)); }; - const onColorChange = (value: string) => { - setSingleColor(value); - onSelectChange(getColorObject(SINGLE_COLOR_PALETTE, value)); + const onChildColorChange = (value: string) => { + setChildColor(value); + onSelectChange(getColorObject(selectedColor.name, value, parentColor)); + }; + + const onParentColorChange = (value: string) => { + setParentColor(value); + onSelectChange(getColorObject(selectedColor.name, childColor, value)); }; return ( @@ -51,10 +64,17 @@ export const ColorPalettePicker = ({ - {selectedColor.name === SINGLE_COLOR_PALETTE && ( + {[SINGLE_COLOR_PALETTE, MULTI_COLOR_PALETTE].includes(selectedColor.name) && ( + + + + + + )} + {selectedColor.name === MULTI_COLOR_PALETTE && showParentColorPicker && ( - - + + )} diff --git a/dashboards-observability/public/components/visualizations/charts/maps/treemap_type.ts b/dashboards-observability/public/components/visualizations/charts/maps/treemap_type.ts index c157f5476..87761eb38 100644 --- a/dashboards-observability/public/components/visualizations/charts/maps/treemap_type.ts +++ b/dashboards-observability/public/components/visualizations/charts/maps/treemap_type.ts @@ -13,7 +13,7 @@ import { ColorPalettePicker, ConfigChartOptions, } from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/config_controls'; -import { DEFAULT_PALETTE, TREEMAP_PALETTES } from '../../../../../common/constants/colors'; +import { DEFAULT_PALETTE, COLOR_PALETTES } from '../../../../../common/constants/colors'; const sharedConfigs = getPlotlySharedConfigs(); const VIS_CATEGORY = getPlotlyCategory(); @@ -104,8 +104,8 @@ export const createTreeMapDefinition = (params: BarTypeParams = {}) => ({ isSingleSelection: true, component: ColorPalettePicker, mapTo: 'colorTheme', - eleType: 'colorpicker', - options: TREEMAP_PALETTES, + eleType: 'treemapColorPicker', + options: COLOR_PALETTES, defaultState: { name: DEFAULT_PALETTE }, }, ], diff --git a/dashboards-observability/public/components/visualizations/charts/maps/treemaps.tsx b/dashboards-observability/public/components/visualizations/charts/maps/treemaps.tsx index 6cf0bce7b..3026851d2 100644 --- a/dashboards-observability/public/components/visualizations/charts/maps/treemaps.tsx +++ b/dashboards-observability/public/components/visualizations/charts/maps/treemaps.tsx @@ -9,7 +9,11 @@ import { indexOf, isEmpty, isEqual, isNull, uniq } from 'lodash'; import { Plt } from '../../plotly/plot'; import { EmptyPlaceholder } from '../../../event_analytics/explorer/visualizations/shared_components/empty_placeholder'; import { NUMERICAL_FIELDS } from '../../../../../common/constants/shared'; -import { DEFAULT_PALETTE, SINGLE_COLOR_PALETTE } from '../../../../../common/constants/colors'; +import { + DEFAULT_PALETTE, + MULTI_COLOR_PALETTE, + SINGLE_COLOR_PALETTE, +} from '../../../../../common/constants/colors'; export const TreeMap = ({ visualizations, layout, config }: any) => { const { @@ -60,45 +64,57 @@ export const TreeMap = ({ visualizations, layout, config }: any) => { ) return ; - const treemapData = useMemo(() => { - let labelsArray, parentsArray, valuesArray; + const [treemapData, mergedLayout] = useMemo(() => { + let labelsArray, parentsArray, valuesArray, colorsArray; if (parentField === null) { labelsArray = [...data[childField.name]]; parentsArray = [...Array(labelsArray.length).fill('')]; valuesArray = [...data[valueField.name]]; + if (colorField.name === MULTI_COLOR_PALETTE) { + colorsArray = [...Array(data[childField.name].length).fill(colorField.childColor)]; + } } else { const uniqueParents = uniq(data[parentField.name]); labelsArray = [...data[childField.name], ...uniqueParents]; parentsArray = [...data[parentField.name], ...Array(uniqueParents.length).fill('')]; valuesArray = [...data[valueField.name], ...Array(uniqueParents.length).fill(0)]; + if (colorField.name === MULTI_COLOR_PALETTE) { + colorsArray = [ + ...Array(data[childField.name].length).fill(colorField.childColor), + ...Array(uniqueParents.length).fill(colorField.parentColor), + ]; + } } - const marker = - colorField.name === SINGLE_COLOR_PALETTE + if (colorField.name === SINGLE_COLOR_PALETTE) { + colorsArray = [...Array(valuesArray.length).fill(colorField.childColor)]; + } + + const markerColors = + colorField.name === MULTI_COLOR_PALETTE ? { - marker: { - colorscale: [ - [0, colorField.color], - [1, colorField.color], - ], - colorbar: { - len: 1, - }, - }, + colors: colorsArray, } - : colorField.name !== DEFAULT_PALETTE + : ![DEFAULT_PALETTE, SINGLE_COLOR_PALETTE].includes(colorField.name) ? { - marker: { - colorscale: colorField.name, - colorbar: { - len: 1, - }, + colorscale: colorField.name, + colorbar: { + len: 1, }, } - : undefined; + : {}; + + const colorway = colorField.name === SINGLE_COLOR_PALETTE ? colorsArray : {}; - return [ + const mapLayout = { + ...layout, + ...(layoutConfig.layout && layoutConfig.layout), + title: dataConfig?.panelOptions?.title || layoutConfig.layout?.title || '', + treemapcolorway: colorway, + }; + + const mapData = [ { type: 'treemap', labels: labelsArray, @@ -108,16 +124,21 @@ export const TreeMap = ({ visualizations, layout, config }: any) => { tiling: { packing: tilingAlgorithm.value, }, - ...marker, + marker: markerColors, }, ]; - }, [data, childField, valueField, parentField, colorField, tilingAlgorithm]); - const mergedLayout = { - ...layout, - ...(layoutConfig.layout && layoutConfig.layout), - title: dataConfig?.panelOptions?.title || layoutConfig.layout?.title || '', - }; + return [mapData, mapLayout]; + }, [ + data, + childField, + valueField, + parentField, + colorField, + tilingAlgorithm, + dataConfig, + layoutConfig, + ]); const mergedConfigs = { ...config, From c263052713a41574d014abf2c815d196d218c597 Mon Sep 17 00:00:00 2001 From: Mrunal Zambre Date: Tue, 31 May 2022 08:39:47 +0000 Subject: [PATCH 10/12] updated snapshots Signed-off-by: Mrunal Zambre --- .../__tests__/__snapshots__/config_panel.test.tsx.snap | 9 +++++++-- .../charts/__tests__/__snapshots__/treemap.test.tsx.snap | 4 ++++ 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/__tests__/__snapshots__/config_panel.test.tsx.snap b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/__tests__/__snapshots__/config_panel.test.tsx.snap index 9bedcaeb4..3affb05fb 100644 --- a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/__tests__/__snapshots__/config_panel.test.tsx.snap +++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/__tests__/__snapshots__/config_panel.test.tsx.snap @@ -1056,7 +1056,7 @@ exports[`Config panel component Renders config panel with visualization data 1`] "defaultState": Object { "name": "default", }, - "eleType": "colorpicker", + "eleType": "treemapColorPicker", "isSingleSelection": true, "mapTo": "colorTheme", "name": "Color Theme", @@ -1067,10 +1067,15 @@ exports[`Config panel component Renders config panel with visualization data 1`] "value": "default", }, Object { - "title": "Single Color", + "title": "Single color", "type": "text", "value": "singleColor", }, + Object { + "title": "Multicolored", + "type": "text", + "value": "multicolor", + }, Object { "palette": Array [ "#050aac", diff --git a/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/treemap.test.tsx.snap b/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/treemap.test.tsx.snap index e2a25bbb0..2f8495c0d 100644 --- a/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/treemap.test.tsx.snap +++ b/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/treemap.test.tsx.snap @@ -357,6 +357,7 @@ exports[`Treemap component Renders treemap component 1`] = ` "success", "warning", ], + "marker": Object {}, "parents": Array [ "", "", @@ -396,6 +397,7 @@ exports[`Treemap component Renders treemap component 1`] = ` }, "showlegend": true, "title": "", + "treemapcolorway": Object {}, } } > @@ -416,6 +418,7 @@ exports[`Treemap component Renders treemap component 1`] = ` "success", "warning", ], + "marker": Object {}, "parents": Array [ "", "", @@ -464,6 +467,7 @@ exports[`Treemap component Renders treemap component 1`] = ` }, "showlegend": true, "title": "", + "treemapcolorway": Object {}, "xaxis": Object { "automargin": true, "rangemode": "normal", From 9768259d772d4edbef6b0743ce06e3a431511a8a Mon Sep 17 00:00:00 2001 From: Pratibha Pandey Date: Wed, 1 Jun 2022 19:50:37 +0530 Subject: [PATCH 11/12] Updated test scripts for multicolored section Signed-off-by: Pratibha Pandey --- .../integration/1_event_analytics.spec.js | 52 +++++++++++++++++-- 1 file changed, 47 insertions(+), 5 deletions(-) diff --git a/dashboards-observability/.cypress/integration/1_event_analytics.spec.js b/dashboards-observability/.cypress/integration/1_event_analytics.spec.js index 540bbf564..4cfa67727 100644 --- a/dashboards-observability/.cypress/integration/1_event_analytics.spec.js +++ b/dashboards-observability/.cypress/integration/1_event_analytics.spec.js @@ -719,13 +719,13 @@ describe('Renders Tree Map', () => { renderTreeMapchart(); cy.get('.euiTitle.euiTitle--xxsmall').contains('Color Theme').should('exist'); cy.get('.euiSuperSelectControl').contains('Default').click(); - cy.get('.euiContextMenuItem__text .euiColorPalettePicker__item').eq(1).contains('Single Color').click(); + cy.get('.euiContextMenuItem__text .euiColorPalettePicker__item').eq(1).contains('Single color').click(); cy.get('.euiFieldText.euiColorPicker__input.euiFieldText--withIcon').click(); cy.get('[aria-label="Select #D36086 as the color"]').click(); cy.get('.euiButton__text').contains('Preview').should('exist').click(); cy.get('path[style*="rgb(29, 30, 36)"]').eq(0).should('exist'); cy.get('.euiSuperSelectControl').click(); - cy.get('.euiColorPalettePicker__item').eq(7).contains('Red-Blue').click(); + cy.get('.euiColorPalettePicker__itemTitle').eq(1).contains('Reds').click(); cy.get('.euiButton__text').contains('Preview').should('exist').click(); cy.get('path[style*="rgb(68, 68, 68)"]').eq(0).should('exist'); }); @@ -744,7 +744,7 @@ describe('Renders Tree Map', () => { cy.get('.euiComboBoxOption__content').eq(0).click(); cy.wait(delay); cy.get('.euiSuperSelectControl').click(); - cy.get('.euiColorPalettePicker__item').eq(7).contains('Red-Blue').click(); + cy.get('.euiColorPalettePicker__itemTitle').eq(1).contains('Reds').click(); cy.get('.euiButton__text').contains('Preview').should('exist').click(); cy.get('.slicetext[data-unformatted="US"]').click({force:true}); cy.wait(delay); @@ -765,9 +765,51 @@ describe('Renders Tree Map', () => { cy.get('.euiComboBoxOption__content').eq(1).click(); cy.wait(delay); cy.get('.euiSuperSelectControl').click(); - cy.get('.euiColorPalettePicker__item').eq(7).contains('Red-Blue').click(); + cy.get('.euiColorPalettePicker__itemTitle').eq(1).contains('Reds').click(); cy.get('.euiButton__text').contains('Preview').should('exist').click(); cy.get('.euiTextColor.euiTextColor--subdued').contains('No results found').should('exist'); }); -}); + it('Verify multicolored option under color theme',() =>{ + renderTreeMapchart(); + cy.get('.euiTitle.euiTitle--xxsmall').contains('Color Theme').should('exist'); + cy.get('.euiSuperSelectControl').contains('Default').click(); + cy.get('.euiContextMenuItem__text .euiColorPalettePicker__item').eq(1).contains('Single color').click(); + cy.get('.euiFieldText.euiColorPicker__input.euiFieldText--withIcon').click(); + cy.get('[aria-label="Select #54B399 as the color"]').should('exist').click(); + cy.get('.euiButton__text').contains('Preview').click(); + cy.get('.euiSuperSelectControl').click(); + cy.get('.euiContextMenuItem__text .euiColorPalettePicker__item').eq(2).contains('Multicolored').click(); + cy.wait(delay); + cy.get('.euiFormHelpText.euiFormRow__text').eq(1).contains('Child field').should('exist'); + cy.get('.euiFieldText.euiColorPicker__input.euiFieldText--withIcon').eq(0).click(); + cy.get('[aria-label="Select #D36086 as the color"]').click(); + cy.get('.euiFormHelpText.euiFormRow__text').eq(2).contains('Parent field').should('exist'); + cy.get('.euiFieldText.euiColorPicker__input.euiFieldText--withIcon').eq(1).click(); + cy.get('[aria-label="Select #CA8EAE as the color"]').click(); + cy.get('.euiButton__text').contains('Preview').click(); + cy.get('.trace.treemap path[style*="rgb(202, 142, 174)"]').should('exist'); + }); + + it('Parent field not available under color theme', () => { + querySearch(TEST_QUERIES[5].query, TEST_QUERIES[5].dateRangeDOM); + cy.get('[data-test-subj="configPane__vizTypeSelector"] [data-test-subj="comboBoxInput"]').type('Tree Map').type('{enter}'); + cy.get('#configPanel__panelOptions .euiFieldText').click().type('Tree Map'); + cy.get('.euiFlexItem .euiFormRow [placeholder="Description"]').click().type('This is the description for Tree Map'); + cy.get('.euiTitle.euiTitle--xxsmall').contains('Color Theme').should('exist'); + cy.get('.euiSuperSelectControl').contains('Default').click(); + cy.get('.euiContextMenuItem__text .euiColorPalettePicker__item').eq(1).contains('Single color').click(); + cy.get('.euiFieldText.euiColorPicker__input.euiFieldText--withIcon').click(); + cy.get('[aria-label="Select #54B399 as the color"]').should('exist').click(); + cy.get('.euiButton__text').contains('Preview').click(); + cy.get('.euiSuperSelectControl').click(); + cy.get('.euiContextMenuItem__text .euiColorPalettePicker__item').eq(2).contains('Multicolored').click(); + cy.wait(delay); + cy.get('.euiFormHelpText.euiFormRow__text').eq(1).contains('Child field').should('exist'); + cy.get('.euiFieldText.euiColorPicker__input.euiFieldText--withIcon').eq(0).click(); + cy.get('[aria-label="Select #D36086 as the color"]').click(); + 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'); + }); +}); From 7536d93bd121118a06803d06fe9da305c5c1ab55 Mon Sep 17 00:00:00 2001 From: Mrunal Zambre Date: Wed, 8 Jun 2022 14:38:11 +0000 Subject: [PATCH 12/12] Fixed default selection for treemap Signed-off-by: Mrunal Zambre --- .../__tests__/__snapshots__/config_panel.test.tsx.snap | 6 ++++++ .../explorer/visualizations/config_panel/config_panel.tsx | 2 +- .../config_panes/config_controls/config_panel_item.tsx | 5 ++++- .../components/visualizations/charts/maps/treemap_type.ts | 6 ++++++ 4 files changed, 17 insertions(+), 2 deletions(-) diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/__tests__/__snapshots__/config_panel.test.tsx.snap b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/__tests__/__snapshots__/config_panel.test.tsx.snap index 3affb05fb..a6d447094 100644 --- a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/__tests__/__snapshots__/config_panel.test.tsx.snap +++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/__tests__/__snapshots__/config_panel.test.tsx.snap @@ -989,6 +989,9 @@ exports[`Config panel component Renders config panel with visualization data 1`] "isSingleSelection": true, "mapTo": "parentField", "name": "Parent Field", + "props": Object { + "isInvalid": false, + }, }, Object { "component": null, @@ -1042,6 +1045,9 @@ exports[`Config panel component Renders config panel with visualization data 1`] "value": "dice-slice", }, ], + "props": Object { + "isClearable": false, + }, }, ], }, diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panel.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panel.tsx index d1e8d25a8..c0e9f83e1 100644 --- a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panel.tsx +++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panel.tsx @@ -92,7 +92,7 @@ export const ConfigPanel = ({ visualizations, setCurVisId, callback, changeIsVal useEffect(() => { setVizConfigs({ ...userConfigs, - dataConfig: { ...vizConfigs.dataConfig, ...(userConfigs?.dataConfig ? userConfigs.dataConfig : getDefaultAxisSelected()) }, + dataConfig: { ...(userConfigs?.dataConfig ? userConfigs.dataConfig : getDefaultAxisSelected()) }, layoutConfig: userConfigs?.layoutConfig ? hjson.stringify({ ...userConfigs.layoutConfig }, HJSON_STRINGIFY_OPTIONS) : getDefaultSpec(), diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_panel_item.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_panel_item.tsx index 681096a63..0ab6fc7f2 100644 --- a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_panel_item.tsx +++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_panel_item.tsx @@ -12,7 +12,9 @@ export const PanelItem = ({ selectedAxis, dropdownList, onSelectChange, + isInvalid, isSingleSelection = false, + isClearable = true, }: any) => { const options = dropdownList.map((item) => { return { @@ -32,7 +34,8 @@ export const PanelItem = ({ placeholder="Select a field" options={options} selectedOptions={selectedAxis} - isInvalid={isEmpty(selectedAxis)} + isInvalid={isInvalid ?? isEmpty(selectedAxis)} + isClearable={isClearable} singleSelection={isSingleSelection} onChange={onSelectChange} aria-label="Use aria labels when no actual label is in use" diff --git a/dashboards-observability/public/components/visualizations/charts/maps/treemap_type.ts b/dashboards-observability/public/components/visualizations/charts/maps/treemap_type.ts index 87761eb38..5eefda629 100644 --- a/dashboards-observability/public/components/visualizations/charts/maps/treemap_type.ts +++ b/dashboards-observability/public/components/visualizations/charts/maps/treemap_type.ts @@ -61,6 +61,9 @@ export const createTreeMapDefinition = (params: BarTypeParams = {}) => ({ isSingleSelection: true, component: null, mapTo: 'parentField', + props: { + isInvalid: false, + } }, { name: 'Value Field', @@ -90,6 +93,9 @@ export const createTreeMapDefinition = (params: BarTypeParams = {}) => ({ { name: 'Dice Slice', value: 'dice-slice' }, ], defaultState: [{ name: 'Squarify', label: 'Squarify', value: 'squarify' }], + props: { + isClearable: false, + } }, ], },