From 1a95ba52bc72a2043510edd19284c2d36443b59e Mon Sep 17 00:00:00 2001 From: abasatwar Date: Tue, 26 Jul 2022 20:36:38 +0530 Subject: [PATCH] Sprint2 (#47) (#868) * graph style section UI schema Signed-off-by: rinku-kumar-psl # Conflicts: # dashboards-observability/public/components/visualizations/charts/lines/line_type.ts * changes for style mode and interpolation Signed-off-by: rinku-kumar-psl # Conflicts: # dashboards-observability/public/components/visualizations/charts/lines/line_type.ts # Conflicts: # dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/index.ts # Conflicts: # dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/index.ts # Conflicts: # dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/index.ts * lineWidth integration for line mode Signed-off-by: rinku-kumar-psl # Conflicts: # dashboards-observability/public/components/visualizations/charts/lines/line.tsx # dashboards-observability/public/components/visualizations/charts/lines/line_type.ts # Conflicts: # dashboards-observability/common/constants/shared.ts # dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_style_slider.tsx * changes for Legend and Orientation in Line Signed-off-by: rinku-kumar-psl # Conflicts: # dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_button_group.tsx # dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_legend.tsx # dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/index.ts # Conflicts: # dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_style_slider.tsx * point size and Bar Alignment changes Signed-off-by: rinku-kumar-psl # Conflicts: # dashboards-observability/public/components/visualizations/charts/lines/line.tsx # dashboards-observability/public/components/visualizations/charts/lines/line_type.ts # Conflicts: # dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/index.ts # Conflicts: # dashboards-observability/common/constants/shared.ts # dashboards-observability/common/types/explorer.ts * implemented fill opacity for line chart Signed-off-by: rinku-kumar-psl # Conflicts: # dashboards-observability/public/components/visualizations/charts/lines/line.tsx # Conflicts: # dashboards-observability/public/components/event_analytics/utils/utils.tsx * changes for line width and fill opacity in bar mode and removed mode from chartOption Signed-off-by: rinku-kumar-psl # Conflicts: # dashboards-observability/common/constants/shared.ts * updated bar mode opacity in line chart Signed-off-by: rinku-kumar-psl * refactored the config chart style code Signed-off-by: rinku-kumar-psl # Conflicts: # dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/index.ts # Conflicts: # dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/index.ts # Conflicts: # dashboards-observability/common/constants/shared.ts # dashboards-observability/common/types/explorer.ts * snapshot updated and code refactored Signed-off-by: rinku-kumar-psl # Conflicts: # dashboards-observability/public/components/event_analytics/utils/utils.tsx * type added to new component Signed-off-by: rinku-kumar-psl # Conflicts: # dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_button_group.tsx # Conflicts: # dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_style_slider.tsx * review comments addressed Signed-off-by: rinku-kumar-psl # Conflicts: # dashboards-observability/public/components/event_analytics/utils/utils.tsx # Conflicts: # dashboards-observability/common/constants/shared.ts * cypress test case added and resolve button label wraping issue Signed-off-by: rinku-kumar-psl # Conflicts: # dashboards-observability/.cypress/integration/1_event_analytics.spec.js # dashboards-observability/.cypress/utils/event_constants.js # Conflicts: # dashboards-observability/.cypress/integration/1_event_analytics.spec.js # Conflicts: # dashboards-observability/.cypress/integration/1_event_analytics.spec.js * multi matrices changes for Line Signed-off-by: rinku-kumar-psl * dimensions and metrics UI changes for time-series Signed-off-by: rinku-kumar-psl # Conflicts: # dashboards-observability/common/constants/explorer.ts # dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_config_panel_item.tsx # dashboards-observability/public/components/event_analytics/explorer/visualizations/index.tsx * made data config pannel collapsable and initial fields render Signed-off-by: rinku-kumar-psl # Conflicts: # dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_config_panel_item.tsx # dashboards-observability/public/components/event_analytics/explorer/visualizations/index.tsx * code refactored Signed-off-by: rinku-kumar-psl # Conflicts: # dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_config_panel_item.tsx * snapshot updated and handled corner cases Signed-off-by: rinku-kumar-psl * code styling fixes and added TODO comment Signed-off-by: rinku-kumar-psl * sequence change for dimensions and metrics Signed-off-by: Deepak Nevde * Sprint1 (#14) * graph style section UI schema Signed-off-by: rinku-kumar-psl # Conflicts: # dashboards-observability/public/components/visualizations/charts/lines/line_type.ts * changes for style mode and interpolation Signed-off-by: rinku-kumar-psl # Conflicts: # dashboards-observability/public/components/visualizations/charts/lines/line_type.ts # Conflicts: # dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/index.ts # Conflicts: # dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/index.ts # Conflicts: # dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/index.ts * lineWidth integration for line mode Signed-off-by: rinku-kumar-psl # Conflicts: # dashboards-observability/public/components/visualizations/charts/lines/line.tsx # dashboards-observability/public/components/visualizations/charts/lines/line_type.ts # Conflicts: # dashboards-observability/common/constants/shared.ts # dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_style_slider.tsx * changes for Legend and Orientation in Line Signed-off-by: rinku-kumar-psl # Conflicts: # dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_button_group.tsx # dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_legend.tsx # dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/index.ts # Conflicts: # dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_style_slider.tsx * point size and Bar Alignment changes Signed-off-by: rinku-kumar-psl # Conflicts: # dashboards-observability/public/components/visualizations/charts/lines/line.tsx # dashboards-observability/public/components/visualizations/charts/lines/line_type.ts # Conflicts: # dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/index.ts # Conflicts: # dashboards-observability/common/constants/shared.ts # dashboards-observability/common/types/explorer.ts * implemented fill opacity for line chart Signed-off-by: rinku-kumar-psl # Conflicts: # dashboards-observability/public/components/visualizations/charts/lines/line.tsx # Conflicts: # dashboards-observability/public/components/event_analytics/utils/utils.tsx * changes for line width and fill opacity in bar mode and removed mode from chartOption Signed-off-by: rinku-kumar-psl # Conflicts: # dashboards-observability/common/constants/shared.ts * updated bar mode opacity in line chart Signed-off-by: rinku-kumar-psl * refactored the config chart style code Signed-off-by: rinku-kumar-psl # Conflicts: # dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/index.ts # Conflicts: # dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/index.ts # Conflicts: # dashboards-observability/common/constants/shared.ts # dashboards-observability/common/types/explorer.ts * snapshot updated and code refactored Signed-off-by: rinku-kumar-psl # Conflicts: # dashboards-observability/public/components/event_analytics/utils/utils.tsx * type added to new component Signed-off-by: rinku-kumar-psl # Conflicts: # dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_button_group.tsx # Conflicts: # dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_style_slider.tsx * review comments addressed Signed-off-by: rinku-kumar-psl # Conflicts: # dashboards-observability/public/components/event_analytics/utils/utils.tsx # Conflicts: # dashboards-observability/common/constants/shared.ts * cypress test case added and resolve button label wraping issue Signed-off-by: rinku-kumar-psl # Conflicts: # dashboards-observability/.cypress/integration/1_event_analytics.spec.js # dashboards-observability/.cypress/utils/event_constants.js # Conflicts: # dashboards-observability/.cypress/integration/1_event_analytics.spec.js # Conflicts: # dashboards-observability/.cypress/integration/1_event_analytics.spec.js * multi matrices changes for Line Signed-off-by: rinku-kumar-psl * dimensions and metrics UI changes for time-series Signed-off-by: rinku-kumar-psl # Conflicts: # dashboards-observability/common/constants/explorer.ts # dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_config_panel_item.tsx # dashboards-observability/public/components/event_analytics/explorer/visualizations/index.tsx * made data config pannel collapsable and initial fields render Signed-off-by: rinku-kumar-psl # Conflicts: # dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_config_panel_item.tsx # dashboards-observability/public/components/event_analytics/explorer/visualizations/index.tsx * code refactored Signed-off-by: rinku-kumar-psl # Conflicts: # dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_config_panel_item.tsx * snapshot updated and handled corner cases Signed-off-by: rinku-kumar-psl * code styling fixes and added TODO comment Signed-off-by: rinku-kumar-psl * data config reviewed code added Signed-off-by: Deepak Nevde * Text correction Signed-off-by: Deepak Nevde * Conflicts resolved Signed-off-by: Deepak Nevde * table view: eui table replaced with ag-grid Signed-off-by: Ramneet Chopra * drag-drop issue fixed Signed-off-by: Ramneet Chopra * test case of data_table updated Signed-off-by: Ramneet Chopra * feedback comments resolved Signed-off-by: Ramneet Chopra * grid height issue:fixed Signed-off-by: Ramneet Chopra * column height, value getter for type double Signed-off-by: Ramneet Chopra * data_table elements moved to separate Signed-off-by: Ramneet Chopra * footer components Signed-off-by: Ramneet Chopra * cypress test cases for table view Signed-off-by: Ramneet Chopra * enhancement for heatmap with new UI Signed-off-by: Shankha Das * line chart test cases Signed-off-by: Shankha Das * console logs removed Signed-off-by: Shankha Das * updated value options ui for treemap Signed-off-by: Mrunal Zambre * removed console Signed-off-by: Mrunal Zambre * Fixes of sprint1 for new ui implementation (#12) Signed-off-by: ruchika-narang Co-authored-by: rinku-kumar-psl Co-authored-by: Deepak Nevde Co-authored-by: Ramneet Chopra Co-authored-by: Shankha Das Co-authored-by: Mrunal Zambre Co-authored-by: ruchika-narang <79983862+ruchika-narang@users.noreply.github.com> * Latest code added Signed-off-by: Deepak Nevde * Collapsapable button position change to top Signed-off-by: Deepak Nevde * table view: eui table replaced with ag-grid Signed-off-by: Ramneet Chopra * drag-drop issue fixed Signed-off-by: Ramneet Chopra * test case of data_table updated Signed-off-by: Ramneet Chopra * feedback comments resolved Signed-off-by: Ramneet Chopra * grid height issue:fixed Signed-off-by: Ramneet Chopra * column height, value getter for type double Signed-off-by: Ramneet Chopra * data_table elements moved to separate Signed-off-by: Ramneet Chopra * footer components Signed-off-by: Ramneet Chopra * cypress test cases for table view Signed-off-by: Ramneet Chopra * data config reviewed code added Signed-off-by: Deepak Nevde * Text correction Signed-off-by: Deepak Nevde * Conflicts resolved Signed-off-by: Deepak Nevde * enhancement for heatmap with new UI Signed-off-by: Shankha Das * line chart test cases Signed-off-by: Shankha Das * console logs removed Signed-off-by: Shankha Das * updated value options ui for treemap Signed-off-by: Mrunal Zambre * removed console Signed-off-by: Mrunal Zambre * sprint1-visualization-fixes. Signed-off-by: abasatwar * added colorscale config options for treemap Signed-off-by: Mrunal Zambre * code review comment resolved Signed-off-by: Deepak Nevde * added config option to sort treemap sectors Signed-off-by: Mrunal Zambre * changes to resctct duplicte options Signed-off-by: rinku-kumar-psl * Updated and Added test scripts for Treemap chart along with data config and worked on reassembling the event_constants.js file Signed-off-by: Pratibha Pandey * Removed unwanted code Signed-off-by: Pratibha Pandey * implementation of histogram with new UI Signed-off-by: ruchika-narang * gauge chart added Signed-off-by: Ramneet Chopra * Pie chart enhancement, multi labels change Signed-off-by: Deepak Nevde * threshold text fix Signed-off-by: Ramneet Chopra * cypress test cases added Signed-off-by: Ramneet Chopra * Code review comment resolved Signed-off-by: Deepak Nevde * reset fixed, unused imports removed, PR checks fixed Signed-off-by: Ramneet Chopra * single timestamp dimension, no data dsiplay, label rotate, label/legend size Signed-off-by: Ramneet Chopra * layout fixed for primary y axis Signed-off-by: Ramneet Chopra * change of screen size of no data found and visualization Signed-off-by: Shankha Das * changes for restriction of duplicate fields on Data Config and only numeric field selection to metrics Signed-off-by: rinku-kumar-psl * line label replaced with time series Signed-off-by: Ramneet Chopra * snapshot tests Signed-off-by: Ramneet Chopra * Removed unwanted spaces Signed-off-by: Pratibha Pandey * initialize default params for DimensonComponent and formatted the codes Signed-off-by: rinku-kumar-psl * pr review feedback Signed-off-by: Ramneet Chopra * updated preview functionality for charts Signed-off-by: Mrunal Zambre * updated snapshots Signed-off-by: Mrunal Zambre * Worked on review comments Signed-off-by: Pratibha Pandey * changed variable names Signed-off-by: Mrunal Zambre * code review changes done Signed-off-by: rinku-kumar-psl * added empty line at end. Signed-off-by: abasatwar * updated variable names Signed-off-by: Mrunal Zambre * updated snapshots Signed-off-by: Mrunal Zambre * Added pie chart test cases Signed-off-by: Pratibha Pandey * updated snapshots Signed-off-by: ruchika-narang * Removed consoles Signed-off-by: ruchika-narang * Worked on conflicts Signed-off-by: Pratibha Pandey * color selector added Signed-off-by: Ramneet Chopra * updated snapshots Signed-off-by: ruchika-narang * UI updated as recommended Signed-off-by: Shankha Das * Added legend to heatmap Signed-off-by: ruchika-narang * data_config_panel_item timeseries code removed Signed-off-by: Ramneet Chopra * bar chart with multiple dimension and metrics, timestamp Signed-off-by: abasatwar * limit no. of gauge option added Signed-off-by: Ramneet Chopra * threshold limit added, gauge default parameters moved to constants/explorer Signed-off-by: Ramneet Chopra * legend placement added Signed-off-by: Ramneet Chopra * yarn test Signed-off-by: Ramneet Chopra * snapshot updated Signed-off-by: abasatwar * snapshot updated Signed-off-by: abasatwar * Resolving issues after removal of preview functionality Signed-off-by: ruchika-narang * updated snapshots Signed-off-by: ruchika-narang * Updated snapshots Signed-off-by: ruchika-narang * changes for default timestamp data for time-series and corner cases Signed-off-by: rinku-kumar-psl * code review comment addressed Signed-off-by: rinku-kumar-psl * pr feedback Signed-off-by: Ramneet Chopra * dimensions, metrics length checks refined Signed-off-by: Ramneet Chopra * updated as per review comments Signed-off-by: abasatwar * fixing of data config corner cases Signed-off-by: rinku-kumar-psl * snapshot updated Signed-off-by: abasatwar * pr feedback Signed-off-by: Ramneet Chopra Co-authored-by: rinku-kumar-psl Co-authored-by: Deepak Nevde Co-authored-by: Ramneet Chopra Co-authored-by: Shankha Das Co-authored-by: Mrunal Zambre Co-authored-by: ruchika-narang <79983862+ruchika-narang@users.noreply.github.com> Co-authored-by: Pratibha Pandey Co-authored-by: ruchika-narang Co-authored-by: Shankha Das Co-authored-by: rinku-kumar-psl Co-authored-by: Deepak Nevde Co-authored-by: Ramneet Chopra Co-authored-by: Shankha Das Co-authored-by: Mrunal Zambre Co-authored-by: ruchika-narang <79983862+ruchika-narang@users.noreply.github.com> Co-authored-by: Pratibha Pandey Co-authored-by: ruchika-narang Co-authored-by: Shankha Das --- .../integration/1_event_analytics.spec.js | 181 +- .../.cypress/utils/event_constants.js | 117 +- .../common/constants/explorer.ts | 23 +- .../common/constants/shared.ts | 11 +- .../common/types/explorer.ts | 6 +- .../__snapshots__/utils.test.tsx.snap | 1382 +-- .../explorer/visualizations/app.scss | 29 + .../__snapshots__/config_panel.test.tsx.snap | 9929 ++++++++--------- .../config_panel/config_panel.scss | 15 +- .../config_panel/config_panel.tsx | 16 +- .../config_panel/config_panel_footer.tsx | 19 - .../config_bar_chart_styles.tsx | 27 +- .../config_controls/config_chart_options.tsx | 62 +- .../config_controls/config_color_theme.tsx | 210 +- .../config_controls/config_legend.tsx | 15 +- .../config_line_chart_styles.tsx | 101 +- .../config_controls/config_number_input.tsx | 39 +- .../config_panel_option_gauge.tsx | 52 + .../config_controls/config_panel_options.tsx | 58 +- .../config_controls/config_switch_button.tsx | 25 + .../config_controls/config_thresholds.tsx | 6 +- .../config_treemap_parents.tsx | 17 +- .../config_controls/config_value_options.tsx | 40 +- .../data_config_panel_item.tsx | 150 +- .../config_panes/config_controls/index.ts | 4 + .../treemap_config_panel_item.tsx | 62 +- .../config_panes/default_vis_editor.tsx | 1 + .../explorer/visualizations/index.tsx | 46 +- .../shared_components.test.tsx.snap | 10 +- .../shared_components/empty_placeholder.scss | 12 + .../shared_components/empty_placeholder.tsx | 7 +- .../__tests__/__snapshots__/bar.test.tsx.snap | 254 +- .../__snapshots__/heatmap.test.tsx.snap | 38 +- .../__snapshots__/histogram.test.tsx.snap | 612 + .../__snapshots__/line.test.tsx.snap | 259 +- .../__tests__/__snapshots__/pie.test.tsx.snap | 241 +- .../__snapshots__/text.test.tsx.snap | 28 +- .../__snapshots__/treemap.test.tsx.snap | 30 +- .../charts/__tests__/histogram.test.tsx | 30 + .../visualizations/charts/bar/bar.tsx | 170 +- .../visualizations/charts/bar/bar_type.ts | 53 +- .../charts/financial/gauge/gauge.tsx | 171 +- .../charts/financial/gauge/gauge_type.ts | 83 +- .../charts/helpers/viz_types.ts | 28 +- .../charts/histogram/histogram.tsx | 81 +- .../charts/histogram/histogram_type.ts | 80 +- .../visualizations/charts/lines/line.tsx | 116 +- .../visualizations/charts/lines/line_type.ts | 79 +- .../visualizations/charts/maps/heatmap.tsx | 5 +- .../charts/maps/heatmap_type.ts | 21 + .../charts/maps/treemap_type.ts | 38 + .../visualizations/charts/maps/treemaps.tsx | 14 +- .../visualizations/charts/pie/pie.tsx | 32 +- .../charts/shared/shared_configs.ts | 2 +- 54 files changed, 7671 insertions(+), 7466 deletions(-) create mode 100644 dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_panel_option_gauge.tsx create mode 100644 dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_switch_button.tsx create mode 100644 dashboards-observability/public/components/event_analytics/explorer/visualizations/shared_components/empty_placeholder.scss create mode 100644 dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/histogram.test.tsx.snap create mode 100644 dashboards-observability/public/components/visualizations/charts/__tests__/histogram.test.tsx diff --git a/dashboards-observability/.cypress/integration/1_event_analytics.spec.js b/dashboards-observability/.cypress/integration/1_event_analytics.spec.js index f2b0db3c6..3f43a6eb7 100644 --- a/dashboards-observability/.cypress/integration/1_event_analytics.spec.js +++ b/dashboards-observability/.cypress/integration/1_event_analytics.spec.js @@ -21,10 +21,29 @@ import { renderTreeMapchart, renderPieChart, renderLineChartForDataConfig, - DataConfigLineChart + renderDataConfig, + aggregationValues, + DataConfigLineChart, + renderAddParent, + renderGaugeChart, + renderAddParent } from '../utils/event_constants'; import { supressResizeObserverIssue } from '../utils/constants'; +const renderHistogramChart = () => { + querySearch(TEST_QUERIES[5].query, TEST_QUERIES[5].dateRangeDOM); + cy.get('[data-test-subj="configPane__vizTypeSelector"] [data-test-subj="comboBoxInput"]').type('Histogram').type('{enter}'); + cy.wait(delay); + cy.get('g.draglayer.cursor-crosshair').should('exist'); + cy.get('#configPanel__panelOptions .euiFieldText').click().type('Histogram chart'); + cy.get('.euiFlexItem .euiFormRow [placeholder="Description"]').click().type('This is the description for Histogram chart'); + cy.get('.euiIEFlexWrapFix').eq(1).contains('Chart Styles').should('exist'); + cy.get('.euiFormLabel.euiFormRow__label').eq(2).contains('Bucket Size'); + cy.get('.euiFieldNumber').eq(0).type('4'); + cy.get('.euiFormLabel.euiFormRow__label').eq(3).contains('Bucket Offset'); + cy.get('.euiFieldNumber').eq(0).type('6'); +}; + const vis_name_sub_string = Math.floor(Math.random() * 100); const saveVisualizationAndVerify = () => { cy.get('[data-test-subj="eventExplorer__saveManagementPopover"]').click(); @@ -857,3 +876,163 @@ describe('Render Time series chart/Line chart and verify Data configurations UI DataConfigLineChart(); }); }); + +describe('Renders Data Configurations section for Pie chart', () => { + beforeEach(() => { + landOnEventVisualizations(); + }); + + it('Renders Dimensions and Metrics under Data Configurations for Pie chart', () => { + renderPieChart(); + renderDataConfig(); + }); + + it('Validate "Add" and "X" buttons', () => { + renderPieChart(); + cy.get('.euiResizablePanel.euiResizablePanel--middle').contains('Data Configurations'); + cy.get('.euiButton.euiButton--primary.euiButton--fullWidth').contains('Add').click(); + cy.get('.euiFormRow__fieldWrapper .euiComboBox').eq(3).click(); + cy.get('.euiComboBoxOption__content').eq(2).click(); + cy.get('.first-division .euiFormLabel.euiFormRow__label').eq(4).click(); + cy.get('.euiComboBoxOption__content').eq(1).click(); + cy.get('.euiFieldText[placeholder="Custom label"]').eq(1).type('Demo field'); + cy.get('.euiIcon.euiIcon--medium.euiIcon--danger').eq(1).click(); + cy.get('.euiButton.euiButton--primary.euiButton--fullWidth').contains('Add').should('exist'); + }); + + it('Verify drop down values for Aggregation', () => { + renderPieChart(); + cy.get('.euiResizablePanel.euiResizablePanel--middle').contains('Data Configurations'); + cy.get('.euiTitle.euiTitle--xxsmall').eq(1).contains('Dimensions').should('exist'); + cy.get('.first-division .euiFormLabel.euiFormRow__label').eq(0).contains('Aggregation'); + cy.get('[data-test-subj="comboBoxSearchInput"]').eq(0).click(); + aggregationValues.forEach(function (value){ + cy.get('.euiComboBoxOption__content').contains(value); + }); + }); + + it('Collapsible mode for Data Configuration panel', () => { + renderPieChart(); + cy.get('.euiResizablePanel.euiResizablePanel--middle').contains('Data Configurations'); + cy.get('.euiResizableButton.euiResizableButton--horizontal').eq(1).click(); + cy.get('[data-test-subj="panel-1-toggle"]').click(); + cy.get('[class*="euiResizableToggleButton-isCollapsed"]').eq(1).should('exist'); +describe('Renders Histogram chart', () => { + beforeEach(() => { + landOnEventVisualizations(); +}); + +it('Renders Histogram chart and save visualization', () => { + renderHistogramChart(); + cy.get('.euiFlexItem.euiFlexItem--flexGrowZero .euiButton__text').eq(2).click(); + cy.wait(delay); + saveVisualizationAndVerify(); + }); + + it('Delete Visualization for Histogram chart from list of saved Visualizations on Event analytics page', () =>{ + deleteVisualization(); + }) + + it('Renders Histogram chart, add value parameters and verify Reset button click is working', () => { + renderHistogramChart(); + cy.get('[data-test-subj="visualizeEditorResetButton"]').click(); + }); +}); +describe('Render Gauge Chart and verify if data gets render', () => { + it('Render gauge chart and verify by default no data gets render', () => { + renderGaugeChart(); + cy.get('.main-svg').contains('BeatsWest').should('not.exist'); + }); + + it('Render gauge chart and verify data gets render after click on update chart', () => { + renderGaugeChart(); + cy.get('.euiButton__text').contains('Update chart').click(); + cy.get('.main-svg').contains('BeatsWest').should('exist'); + }); +}); + +describe('Render Gauge Chart and work with chart styles', () => { + it('Render gauge chart and change orientation to vertical', () => { + renderGaugeChart(); + cy.get('.euiButton__text').contains('Update chart').click(); + cy.get('.euiButton__text').contains('Vertical').click(); + cy.get('.euiButton__text').contains('Preview').click(); + }); + + it('Render gauge chart and change title size then verify the update on chart', () => { + renderGaugeChart(); + cy.get('.euiButton__text').contains('Update chart').click(); + cy.get('[data-test-subj="valueFieldNumber"]').eq(0).click(); + cy.get('[data-test-subj="valueFieldNumber"]').eq(0).type('30'); + cy.get('.euiButton__text').contains('Preview').click(); + }); + + it('Render gauge chart and change value size then verify the update on chart', () => { + renderGaugeChart(); + cy.get('.euiButton__text').contains('Update chart').click(); + cy.get('[data-test-subj="valueFieldNumber"]').eq(1).click(); + cy.get('[data-test-subj="valueFieldNumber"]').eq(1).type('20'); + cy.get('.euiButton__text').contains('Preview').click(); + }); +}); + +describe('Render Gauge Chart and work with threshold', () => { + it('Render gauge chart and add threshold then verify by default the threshold is not seen', () => { + renderGaugeChart(); + cy.get('.euiButton__text').contains('Update chart').click(); + cy.get('.euiButton__text').contains('+ Add threshold').click(); + cy.get('[data-test-subj="nameFieldText"]').type('Gauge Threshold'); + cy.get('[data-test-subj="valueFieldNumber"]').eq(2).type('50'); + cy.get('.euiButton__text').contains('Preview').click(); + cy.get('[data-unformatted="Gauge Threshold"]').should('not.be.visible'); + }); + + it('Render gauge chart and add threshold then verify the threshold label are seen after show threshold button enabled ', () => { + renderGaugeChart(); + cy.get('.euiButton__text').contains('Update chart').click(); + cy.get('.euiButton__text').contains('+ Add threshold').click(); + cy.get('[data-test-subj="nameFieldText"]').type('Gauge Threshold'); + cy.get('[data-test-subj="valueFieldNumber"]').eq(2).type('50'); + cy.get('.euiSwitch__label').contains('Show threshold labels').click(); + cy.get('.euiButton__text').contains('Preview').click(); + cy.get('[data-unformatted="Gauge Threshold"]').should('be.visible'); + }); + + it('Render gauge chart and add threshold then verify the threshold marker are seen after show threshold button enabled ', () => { + renderGaugeChart(); + cy.get('.euiButton__text').contains('Update chart').click(); + cy.get('.euiButton__text').contains('+ Add threshold').click(); + cy.get('[data-test-subj="nameFieldText"]').type('Gauge Threshold'); + cy.get('[data-test-subj="valueFieldNumber"]').eq(2).type('50'); + cy.get('.euiSwitch__label').contains('Show threshold markers').click(); + cy.get('.euiButton__text').contains('Preview').click(); + cy.get('path[style*="rgb(252, 5, 5)"]').eq(1).should('exist'); + cy.get('.bg-arc').find('path[style*="rgb(252, 5, 5)"]').should('have.length',4); + }); +}); + +describe('Render gauge chart and verify if reset works properly', () => { + it('Render gauge chart with all feild data then click on reset and verify reset works properly', () => { + renderGaugeChart(); + cy.get('.euiButton__text').contains('Update chart').click(); + cy.get('input[placeholder="Title"]').type('Gauge Chart'); + cy.get('textarea[placeholder="Description"]').type('Description For Gauge Chart'); + cy.get('.euiButton__text').contains('Vertical').click(); + cy.get('[data-test-subj="valueFieldNumber"]').eq(0).click(); + cy.get('[data-test-subj="valueFieldNumber"]').eq(0).type('30'); + cy.get('[data-test-subj="valueFieldNumber"]').eq(1).click(); + cy.get('[data-test-subj="valueFieldNumber"]').eq(1).type('20'); + cy.get('.euiButton__text').contains('+ Add threshold').click(); + cy.get('[data-test-subj="nameFieldText"]').type('Gauge Threshold'); + cy.get('[data-test-subj="valueFieldNumber"]').eq(2).type('50'); + cy.get('.euiSwitch__label').contains('Show threshold labels').click(); + cy.get('.euiSwitch__label').contains('Show threshold markers').click(); + cy.get('.euiButton__text').contains('Preview').click(); + cy.get('.euiButtonEmpty__text').contains('Reset').click(); + cy.get('input[placeholder="Title"]').should('not.have.value','Gauge Chart'); + cy.get('textarea[placeholder="Description"]').should('not.have.value','Description For Gauge Chart') + cy.get('[data-test-subj="valueFieldNumber"]').eq(0).should('have.value',''); + cy.get('[data-test-subj="valueFieldNumber"]').eq(1).should('have.value',''); + cy.get('button.euiSwitch__button[aria-checked="false"]').should('exist').should('have.length',3); + }); +}); diff --git a/dashboards-observability/.cypress/utils/event_constants.js b/dashboards-observability/.cypress/utils/event_constants.js index 4db8c146d..6d7ebbb05 100644 --- a/dashboards-observability/.cypress/utils/event_constants.js +++ b/dashboards-observability/.cypress/utils/event_constants.js @@ -33,7 +33,11 @@ export const TEST_QUERIES = [ dateRangeDOM: YEAR_TO_DATE_DOM_ID }, { - query:"source = opensearch_dashboards_sample_data_logs | where response='503' or response='404' | stats count() by span(timestamp,1d)", + query: "source = opensearch_dashboards_sample_data_logs | where response='503' or response='404' | stats count() by span(timestamp,1d)", + dateRangeDOM: YEAR_TO_DATE_DOM_ID + }, + { + query: 'source=opensearch_dashboards_sample_data_flights |where FlightDelayMin > 0 | stats sum(FlightDelayMin) as total_delay_min, count() as total_delayed by Carrier |eval avg_delay=total_delay_min / total_delayed | sort - avg_delay', dateRangeDOM: YEAR_TO_DATE_DOM_ID }, ]; @@ -44,6 +48,8 @@ export const SAVE_QUERY2 = 'Mock Flight count by destination'; export const SAVE_QUERY3 = 'Mock Flight count by destination save to panel'; export const SAVE_QUERY4 = 'Mock Flight peek'; +export const aggregationValues = ["COUNT", "SUM", "AVERAGE", "MAX", "MIN", "VAR_SAMP", "VAR_POP", "STDDEV_SAMP", "STDDEV_POP"]; + export const querySearch = (query, rangeSelected) => { cy.get('[data-test-subj="searchAutocompleteTextArea"]').type(query); cy.get('[data-test-subj="superDatePickerToggleQuickMenuButton"]').click(); @@ -80,21 +86,54 @@ export const landOnPanels = () => { cy.wait(delay); }; +const vis_name_sub_string = Math.floor(Math.random() * 100); +export 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 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 visualization` + vis_name_sub_string) + .type('{enter}'); + cy.get('.euiBasicTable .euiTableCellContent button').eq(0).click(); +}; + +export const deleteVisualization = () => { + cy.get('a[href = "#/event_analytics"]').click(); + cy.get('.euiFlexGroup .euiFormControlLayout__childrenWrapper input') + .eq(0) + .type(`Test visualization` + vis_name_sub_string) + .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'); +}; + 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(); + querySearch(TEST_QUERIES[7].query, TEST_QUERIES[7].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('.euiIEFlexWrapFix').eq(1).contains('Treemap').should('exist'); + cy.get('#configPanel__treemap_options').contains('Tiling Algorithm').should('exist'); + cy.get('[data-test-subj = "comboBoxInput"]').eq(3).click(); + cy.get('button[name="Slice Dice"]').click(); }; export const renderPieChart = () => { @@ -104,11 +143,25 @@ export const renderPieChart = () => { cy.wait(delay); cy.get('#configPanel__panelOptions .euiFieldText').click().type('Pie chart'); cy.get('.euiFlexItem .euiFormRow [placeholder="Description"]').click().type('This is the description for Pie chart'); - cy.get('.euiIEFlexWrapFix').eq(1).contains('Value options').should('exist'); - cy.get('[data-test-subj="comboBoxInput"]').eq(1).click(); - cy.get('[name="count()"]').eq(0).click(); - cy.get('[data-test-subj="comboBoxToggleListButton"]').eq(0).click(); - cy.get('[data-test-subj="comboBoxInput"]').eq(2).click(); + cy.get('[aria-controls="configPanel__legend"]').contains('Legend').should('exist'); + cy.get('#configPanel__legend .euiTitle.euiTitle--xxsmall').eq(0).contains('Show Legend'); + cy.get('span[data-text="Show"]').contains('Show').should('exist'); + cy.get('#configPanel__legend .euiTitle.euiTitle--xxsmall').eq(1).contains('Position'); + cy.get('span[data-text="Right"]').contains('Right').should('exist'); + cy.get('#configPanel__legend .euiTitle.euiTitle--xxsmall').eq(2).contains('Legend Size'); + cy.get('[aria-controls="configPanel__chartStyles"]').contains('Chart Styles').should('exist'); + cy.get('#configPanel__chartStyles .euiTitle.euiTitle--xxsmall').eq(0).contains('Mode').click(); + cy.get('#configPanel__chartStyles .euiComboBox__inputWrap.euiComboBox__inputWrap--noWrap.euiComboBox__inputWrap-isClearable').click(); + cy.get('.euiComboBoxOption__content').contains('Donut').click(); + cy.get('#configPanel__chartStyles .euiTitle.euiTitle--xxsmall').eq(1).contains('Label Size'); + cy.get('#configPanel__chartStyles input[type="number"]').click().type('10'); + cy.get('#configPanel__chartStyles .euiTitle.euiTitle--xxsmall').eq(2).contains('Color Theme'); + cy.get('.euiSuperSelectControl').click(); + cy.get('.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('.visEditorSidebar__controls [data-test-subj="visualizeEditorRenderButton"]').contains('Preview').click(); + cy.get('.plot-container.plotly').should('exist'); }; export const renderDataConfig = () => { @@ -136,5 +189,29 @@ export const renderDataConfig = () => { export const renderLineChart = () => { landOnEventVisualizations(); querySearch(TEST_QUERIES[5].query, TEST_QUERIES[5].dateRangeDOM); + cy.get('[data-test-subj="configPane__vizTypeSelector"] [data-test-subj="comboBoxInput"]') + .type('Line') + .type('{enter}'); +}; + +export const renderAddParent = () => { + cy.get(' [data-test-subj="addParentButton"] .euiButton__text').contains('+ Add Parent').click(); + cy.get('.first-division .euiFormLabel.euiFormRow__label').contains('Parent 1').should('exist'); + cy.get('p.euiComboBoxPlaceholder').eq(0).click({ force: true }); + cy.get('.euiComboBoxOption__content').eq(0).click(); + cy.get(' [data-test-subj="addParentButton"] .euiButton__text').contains('+ Add Parent').click(); + cy.get('.first-division .euiFormLabel.euiFormRow__label').contains('Parent 2').should('exist'); + cy.get('p.euiComboBoxPlaceholder').click({ force: true }); + cy.get('.euiComboBoxOption__content').eq(1).click(); + cy.get(' [data-test-subj="addParentButton"] .euiButton__text').contains('+ Add Parent').click(); + cy.get('.first-division .euiFormLabel.euiFormRow__label').contains('Parent 3').should('exist'); + cy.get('p.euiComboBoxPlaceholder').click({ force: true }); + cy.get('.euiComboBoxOption__content').eq(2).click(); cy.get('[data-test-subj="configPane__vizTypeSelector"] [data-test-subj="comboBoxInput"]').type('Line').type('{enter}'); }; + +export const renderGaugeChart = () => { + landOnEventVisualizations(); + querySearch(TEST_QUERIES[1].query, TEST_QUERIES[1].dateRangeDOM); + cy.get('[data-test-subj="configPane__vizTypeSelector"] [data-test-subj="comboBoxInput"]').type('Gauge').type('{enter}'); +}; diff --git a/dashboards-observability/common/constants/explorer.ts b/dashboards-observability/common/constants/explorer.ts index 17612c44e..9199fc8cd 100644 --- a/dashboards-observability/common/constants/explorer.ts +++ b/dashboards-observability/common/constants/explorer.ts @@ -75,7 +75,7 @@ export const REDUX_EXPL_SLICE_FIELDS = 'fields'; export const REDUX_EXPL_SLICE_QUERY_TABS = 'queryTabs'; export const REDUX_EXPL_SLICE_VISUALIZATION = 'explorerVisualization'; export const REDUX_EXPL_SLICE_COUNT_DISTRIBUTION = 'countDistributionVisualization'; -export const PLOTLY_GAUGE_COLUMN_NUMBER = 5; +export const PLOTLY_GAUGE_COLUMN_NUMBER = 4; export const APP_ANALYTICS_TAB_ID_REGEX = /application-analytics-tab.+/; export const DEFAULT_AVAILABILITY_QUERY = 'stats count() by span( timestamp, 1h )'; export const ADD_BUTTON_TEXT = '+ Add color theme'; @@ -118,6 +118,8 @@ export const AGGREGATION_OPTIONS = [ }, ]; +// numeric fields type for metrics +export const numericalTypes = ['float', 'double', 'bigint', 'long', 'octet', 'short', 'byte', 'integer']; // Data table constants export const GRID_HEADER_COLUMN_MAX_WIDTH = '150px'; export const GRID_PAGE_RANGE_DISPLAY = 5; @@ -130,3 +132,22 @@ export const ROW_DENSITIES = [ ]; export const HEADER_HEIGHT = 35; + +// gauge chart default parameters +export interface DefaultGaugeChartParametersProps { + GaugeTitleSize: number, + DisplayDefaultGauges: number, + OrientationDefault: string, + TickLength: number, + LegendPlacement: string, + ThresholdsMaxLimit: number +}; + +export const DefaultGaugeChartParameters: DefaultGaugeChartParametersProps = { + GaugeTitleSize: 14, + DisplayDefaultGauges: 1, + OrientationDefault: 'h', + TickLength: 5, + LegendPlacement: 'center', + ThresholdsMaxLimit: 1 +} diff --git a/dashboards-observability/common/constants/shared.ts b/dashboards-observability/common/constants/shared.ts index 00b6b3f14..d4021c350 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, visChartTypes.TreeMap]; +export const ENABLED_VIS_TYPES = [visChartTypes.Bar, visChartTypes.HorizontalBar, visChartTypes.Line, visChartTypes.Pie, visChartTypes.HeatMap, visChartTypes.Text, visChartTypes.TreeMap, visChartTypes.Gauge, visChartTypes.Histogram]; //Live tail constants export const LIVE_OPTIONS = [ @@ -156,7 +156,9 @@ export interface DefaultChartStylesProps { FillOpacity: number, MarkerSize: number, ShowLegend: string, - LegendPosition: string + LegendPosition: string, + LabelAngle: number, + DefaultSortSectors: string, }; export const DefaultChartStyles: DefaultChartStylesProps = { @@ -166,7 +168,10 @@ export const DefaultChartStyles: DefaultChartStylesProps = { FillOpacity: 40, MarkerSize: 5, ShowLegend: 'show', - LegendPosition: 'v' + LegendPosition: 'v', + LabelAngle: 0, + DefaultSortSectors: 'largest_to_smallest', } export const FILLOPACITY_DIV_FACTOR = 200; + diff --git a/dashboards-observability/common/types/explorer.ts b/dashboards-observability/common/types/explorer.ts index 2204a6ab4..ade2c6db3 100644 --- a/dashboards-observability/common/types/explorer.ts +++ b/dashboards-observability/common/types/explorer.ts @@ -239,8 +239,12 @@ export interface ConfigListEntry { side: string; type: string; } +export interface HistogramConfigList { + bucketSize: string; + bucketOffset: string; +} export interface ConfigList { - dimensions?: ConfigListEntry[]; + dimensions?: ConfigListEntry[] | HistogramConfigList[]; metrics?: ConfigListEntry[]; } diff --git a/dashboards-observability/public/components/custom_panels/helpers/__tests__/__snapshots__/utils.test.tsx.snap b/dashboards-observability/public/components/custom_panels/helpers/__tests__/__snapshots__/utils.test.tsx.snap index 3feb1f635..527aa9965 100644 --- a/dashboards-observability/public/components/custom_panels/helpers/__tests__/__snapshots__/utils.test.tsx.snap +++ b/dashboards-observability/public/components/custom_panels/helpers/__tests__/__snapshots__/utils.test.tsx.snap @@ -88,26 +88,6 @@ exports[`Utils helper functions renders displayVisualization function 1`] = ` "mapTo": "dataConfig", "name": "Data", "sections": Array [ - Object { - "editor": [Function], - "id": "value_options", - "mapTo": "valueOptions", - "name": "Value options", - "schemas": Array [ - Object { - "component": null, - "isSingleSelection": false, - "mapTo": "xaxis", - "name": "X-axis", - }, - Object { - "component": null, - "isSingleSelection": false, - "mapTo": "yaxis", - "name": "Y-axis", - }, - ], - }, Object { "editor": [Function], "id": "legend", @@ -216,6 +196,12 @@ exports[`Utils helper functions renders displayVisualization function 1`] = ` ], }, }, + Object { + "component": [Function], + "eleType": "input", + "mapTo": "labelSize", + "name": "Label Size", + }, Object { "component": [Function], "defaultState": 0, @@ -344,7 +330,7 @@ exports[`Utils helper functions renders displayVisualization function 1`] = ` }, "isUniColor": false, "layout": Object { - "height": 500, + "height": 1180, "legend": Object { "orientation": "v", "traceorder": "normal", @@ -449,26 +435,6 @@ exports[`Utils helper functions renders displayVisualization function 1`] = ` "mapTo": "dataConfig", "name": "Data", "sections": Array [ - Object { - "editor": [Function], - "id": "value_options", - "mapTo": "valueOptions", - "name": "Value options", - "schemas": Array [ - Object { - "component": null, - "isSingleSelection": false, - "mapTo": "xaxis", - "name": "X-axis", - }, - Object { - "component": null, - "isSingleSelection": false, - "mapTo": "yaxis", - "name": "Y-axis", - }, - ], - }, Object { "editor": [Function], "id": "legend", @@ -577,6 +543,12 @@ exports[`Utils helper functions renders displayVisualization function 1`] = ` ], }, }, + Object { + "component": [Function], + "eleType": "input", + "mapTo": "labelSize", + "name": "Label Size", + }, Object { "component": [Function], "defaultState": 0, @@ -705,7 +677,7 @@ exports[`Utils helper functions renders displayVisualization function 1`] = ` }, "isUniColor": false, "layout": Object { - "height": 500, + "height": 1180, "legend": Object { "orientation": "v", "traceorder": "normal", @@ -733,7 +705,7 @@ exports[`Utils helper functions renders displayVisualization function 1`] = ` } layout={ Object { - "height": 500, + "height": 1180, "legend": Object { "orientation": "v", "traceorder": "normal", @@ -833,26 +805,6 @@ exports[`Utils helper functions renders displayVisualization function 1`] = ` "mapTo": "dataConfig", "name": "Data", "sections": Array [ - Object { - "editor": [Function], - "id": "value_options", - "mapTo": "valueOptions", - "name": "Value options", - "schemas": Array [ - Object { - "component": null, - "isSingleSelection": false, - "mapTo": "xaxis", - "name": "X-axis", - }, - Object { - "component": null, - "isSingleSelection": false, - "mapTo": "yaxis", - "name": "Y-axis", - }, - ], - }, Object { "editor": [Function], "id": "legend", @@ -961,6 +913,12 @@ exports[`Utils helper functions renders displayVisualization function 1`] = ` ], }, }, + Object { + "component": [Function], + "eleType": "input", + "mapTo": "labelSize", + "name": "Label Size", + }, Object { "component": [Function], "defaultState": 0, @@ -1089,7 +1047,7 @@ exports[`Utils helper functions renders displayVisualization function 1`] = ` }, "isUniColor": false, "layout": Object { - "height": 500, + "height": 1180, "legend": Object { "orientation": "v", "traceorder": "normal", @@ -1108,180 +1066,83 @@ exports[`Utils helper functions renders displayVisualization function 1`] = ` } } > - -
- - + className="euiText euiText--extraSmall lnsChart__empty" + data-test-subj="vizWorkspace__noData" + > + +
+ +
+ + + + + + +
+ +

+ + + No results found + + +

+
+ +
+ +
+ + @@ -1296,19 +1157,18 @@ exports[`Utils helper functions renders displayVisualization function 2`] = ` "data": Object { "appData": Object {}, "defaultAxes": Object { - "xaxis": Array [ - Object { - "label": "Carrier", - "name": "Carrier", - "type": "keyword", - }, - ], + "xaxis": Array [], "yaxis": Array [ Object { "label": "avg(FlightDelayMin)", "name": "avg(FlightDelayMin)", "type": "double", }, + Object { + "label": "Carrier", + "name": "Carrier", + "type": "keyword", + }, ], }, "indexFields": Object {}, @@ -1427,6 +1287,13 @@ exports[`Utils helper functions renders displayVisualization function 2`] = ` ], }, }, + Object { + "component": [Function], + "eleType": "input", + "mapTo": "legendSize", + "name": "Legend Size", + "title": "Legend Size", + }, ], }, Object { @@ -1452,17 +1319,13 @@ exports[`Utils helper functions renders displayVisualization function 2`] = ` "id": "lines", "name": "Lines", }, - Object { - "id": "bar", - "name": "Bars", - }, Object { "id": "markers", - "name": "Points", + "name": "Marker", }, Object { "id": "lines+markers", - "name": "Lines + Points", + "name": "Lines + Markers", }, ], }, @@ -1529,8 +1392,56 @@ exports[`Utils helper functions renders displayVisualization function 2`] = ` "max": 40, }, }, + Object { + "component": [Function], + "eleType": "input", + "mapTo": "labelSize", + "name": "Label Size", + "title": "Label Size", + }, + Object { + "component": [Function], + "defaultState": 0, + "eleType": "slider", + "mapTo": "rotateLabels", + "name": "Rotate labels", + "props": Object { + "max": 90, + "min": -90, + "showTicks": true, + "ticks": Array [ + Object { + "label": "-90°", + "value": -90, + }, + Object { + "label": "-45°", + "value": -45, + }, + Object { + "label": "0°", + "value": 0, + }, + Object { + "label": "45°", + "value": 45, + }, + Object { + "label": "90°", + "value": 90, + }, + ], + }, + }, ], }, + Object { + "editor": [Function], + "id": "color-theme", + "mapTo": "colorTheme", + "name": "Color theme", + "schemas": Array [], + }, Object { "defaultState": Array [], "editor": [Function], @@ -1556,11 +1467,11 @@ exports[`Utils helper functions renders displayVisualization function 2`] = ` }, ], }, - "fullLabel": "Line", + "fullLabel": "Time series", "icon": [Function], "iconType": "visLine", "id": "line", - "label": "Line", + "label": "Time series", "name": "line", "selection": Object { "dataLoss": "nothing", @@ -1592,7 +1503,7 @@ exports[`Utils helper functions renders displayVisualization function 2`] = ` "#BD6F26", "#4C636F", ], - "height": 500, + "height": 1180, "legend": Object { "orientation": "v", "traceorder": "normal", @@ -1629,19 +1540,18 @@ exports[`Utils helper functions renders displayVisualization function 2`] = ` "data": Object { "appData": Object {}, "defaultAxes": Object { - "xaxis": Array [ - Object { - "label": "Carrier", - "name": "Carrier", - "type": "keyword", - }, - ], + "xaxis": Array [], "yaxis": Array [ Object { "label": "avg(FlightDelayMin)", "name": "avg(FlightDelayMin)", "type": "double", }, + Object { + "label": "Carrier", + "name": "Carrier", + "type": "keyword", + }, ], }, "indexFields": Object {}, @@ -1760,6 +1670,13 @@ exports[`Utils helper functions renders displayVisualization function 2`] = ` ], }, }, + Object { + "component": [Function], + "eleType": "input", + "mapTo": "legendSize", + "name": "Legend Size", + "title": "Legend Size", + }, ], }, Object { @@ -1785,17 +1702,13 @@ exports[`Utils helper functions renders displayVisualization function 2`] = ` "id": "lines", "name": "Lines", }, - Object { - "id": "bar", - "name": "Bars", - }, Object { "id": "markers", - "name": "Points", + "name": "Marker", }, Object { "id": "lines+markers", - "name": "Lines + Points", + "name": "Lines + Markers", }, ], }, @@ -1862,19 +1775,67 @@ exports[`Utils helper functions renders displayVisualization function 2`] = ` "max": 40, }, }, - ], - }, - Object { - "defaultState": Array [], - "editor": [Function], - "id": "thresholds", - "mapTo": "thresholds", - "name": "Thresholds", - "schemas": Array [], - }, - ], - }, - Object { + Object { + "component": [Function], + "eleType": "input", + "mapTo": "labelSize", + "name": "Label Size", + "title": "Label Size", + }, + Object { + "component": [Function], + "defaultState": 0, + "eleType": "slider", + "mapTo": "rotateLabels", + "name": "Rotate labels", + "props": Object { + "max": 90, + "min": -90, + "showTicks": true, + "ticks": Array [ + Object { + "label": "-90°", + "value": -90, + }, + Object { + "label": "-45°", + "value": -45, + }, + Object { + "label": "0°", + "value": 0, + }, + Object { + "label": "45°", + "value": 45, + }, + Object { + "label": "90°", + "value": 90, + }, + ], + }, + }, + ], + }, + Object { + "editor": [Function], + "id": "color-theme", + "mapTo": "colorTheme", + "name": "Color theme", + "schemas": Array [], + }, + Object { + "defaultState": Array [], + "editor": [Function], + "id": "thresholds", + "mapTo": "thresholds", + "name": "Thresholds", + "schemas": Array [], + }, + ], + }, + Object { "content": Array [], "editor": [Function], "id": "style-panel", @@ -1889,11 +1850,11 @@ exports[`Utils helper functions renders displayVisualization function 2`] = ` }, ], }, - "fullLabel": "Line", + "fullLabel": "Time series", "icon": [Function], "iconType": "visLine", "id": "line", - "label": "Line", + "label": "Time series", "name": "line", "selection": Object { "dataLoss": "nothing", @@ -1925,7 +1886,7 @@ exports[`Utils helper functions renders displayVisualization function 2`] = ` "#BD6F26", "#4C636F", ], - "height": 500, + "height": 1180, "legend": Object { "orientation": "v", "traceorder": "normal", @@ -1984,7 +1945,7 @@ exports[`Utils helper functions renders displayVisualization function 2`] = ` "#BD6F26", "#4C636F", ], - "height": 500, + "height": 1180, "legend": Object { "orientation": "v", "traceorder": "normal", @@ -2016,19 +1977,18 @@ exports[`Utils helper functions renders displayVisualization function 2`] = ` "data": Object { "appData": Object {}, "defaultAxes": Object { - "xaxis": Array [ - Object { - "label": "Carrier", - "name": "Carrier", - "type": "keyword", - }, - ], + "xaxis": Array [], "yaxis": Array [ Object { "label": "avg(FlightDelayMin)", "name": "avg(FlightDelayMin)", "type": "double", }, + Object { + "label": "Carrier", + "name": "Carrier", + "type": "keyword", + }, ], }, "indexFields": Object {}, @@ -2147,6 +2107,13 @@ exports[`Utils helper functions renders displayVisualization function 2`] = ` ], }, }, + Object { + "component": [Function], + "eleType": "input", + "mapTo": "legendSize", + "name": "Legend Size", + "title": "Legend Size", + }, ], }, Object { @@ -2172,17 +2139,13 @@ exports[`Utils helper functions renders displayVisualization function 2`] = ` "id": "lines", "name": "Lines", }, - Object { - "id": "bar", - "name": "Bars", - }, Object { "id": "markers", - "name": "Points", + "name": "Marker", }, Object { "id": "lines+markers", - "name": "Lines + Points", + "name": "Lines + Markers", }, ], }, @@ -2249,8 +2212,56 @@ exports[`Utils helper functions renders displayVisualization function 2`] = ` "max": 40, }, }, + Object { + "component": [Function], + "eleType": "input", + "mapTo": "labelSize", + "name": "Label Size", + "title": "Label Size", + }, + Object { + "component": [Function], + "defaultState": 0, + "eleType": "slider", + "mapTo": "rotateLabels", + "name": "Rotate labels", + "props": Object { + "max": 90, + "min": -90, + "showTicks": true, + "ticks": Array [ + Object { + "label": "-90°", + "value": -90, + }, + Object { + "label": "-45°", + "value": -45, + }, + Object { + "label": "0°", + "value": 0, + }, + Object { + "label": "45°", + "value": 45, + }, + Object { + "label": "90°", + "value": 90, + }, + ], + }, + }, ], }, + Object { + "editor": [Function], + "id": "color-theme", + "mapTo": "colorTheme", + "name": "Color theme", + "schemas": Array [], + }, Object { "defaultState": Array [], "editor": [Function], @@ -2276,11 +2287,11 @@ exports[`Utils helper functions renders displayVisualization function 2`] = ` }, ], }, - "fullLabel": "Line", + "fullLabel": "Time series", "icon": [Function], "iconType": "visLine", "id": "line", - "label": "Line", + "label": "Time series", "name": "line", "selection": Object { "dataLoss": "nothing", @@ -2312,7 +2323,7 @@ exports[`Utils helper functions renders displayVisualization function 2`] = ` "#BD6F26", "#4C636F", ], - "height": 500, + "height": 1180, "legend": Object { "orientation": "v", "traceorder": "normal", @@ -2343,226 +2354,83 @@ exports[`Utils helper functions renders displayVisualization function 2`] = ` } } > - -
- - + className="euiText euiText--extraSmall lnsChart__empty" + data-test-subj="vizWorkspace__noData" + > + +
+ +
+ + + + + + +
+ +

+ + + No results found + + +

+
+ +
+ +
+ + @@ -2762,7 +2630,7 @@ exports[`Utils helper functions renders displayVisualization function 3`] = ` }, "isUniColor": false, "layout": Object { - "height": 500, + "height": 1180, "legend": Object { "orientation": "v", "traceorder": "normal", @@ -2972,7 +2840,7 @@ exports[`Utils helper functions renders displayVisualization function 3`] = ` }, "isUniColor": false, "layout": Object { - "height": 500, + "height": 1180, "legend": Object { "orientation": "v", "traceorder": "normal", @@ -3000,7 +2868,7 @@ exports[`Utils helper functions renders displayVisualization function 3`] = ` } layout={ Object { - "height": 500, + "height": 1180, "legend": Object { "orientation": "v", "traceorder": "normal", @@ -3205,7 +3073,7 @@ exports[`Utils helper functions renders displayVisualization function 3`] = ` }, "isUniColor": false, "layout": Object { - "height": 500, + "height": 1180, "legend": Object { "orientation": "v", "traceorder": "normal", @@ -3224,180 +3092,83 @@ exports[`Utils helper functions renders displayVisualization function 3`] = ` } } > - -
- - + className="euiText euiText--extraSmall lnsChart__empty" + data-test-subj="vizWorkspace__noData" + > + +
+ +
+ + + + + + +
+ +

+ + + No results found + + +

+
+ +
+ +
+ + @@ -3570,7 +3341,7 @@ exports[`Utils helper functions renders displayVisualization function 4`] = ` }, "isUniColor": false, "layout": Object { - "height": 500, + "height": 1180, "legend": Object { "orientation": "v", "traceorder": "normal", @@ -3753,7 +3524,7 @@ exports[`Utils helper functions renders displayVisualization function 4`] = ` }, "isUniColor": false, "layout": Object { - "height": 500, + "height": 1180, "legend": Object { "orientation": "v", "traceorder": "normal", @@ -3781,7 +3552,7 @@ exports[`Utils helper functions renders displayVisualization function 4`] = ` } layout={ Object { - "height": 500, + "height": 1180, "legend": Object { "orientation": "v", "traceorder": "normal", @@ -3959,7 +3730,7 @@ exports[`Utils helper functions renders displayVisualization function 4`] = ` }, "isUniColor": false, "layout": Object { - "height": 500, + "height": 1180, "legend": Object { "orientation": "v", "traceorder": "normal", @@ -3978,160 +3749,83 @@ exports[`Utils helper functions renders displayVisualization function 4`] = ` } } > - -
- - + className="euiText euiText--extraSmall lnsChart__empty" + data-test-subj="vizWorkspace__noData" + > + +
+ +
+ + + + + + +
+ +

+ + + No results found + + +

+
+ +
+ +
+ + diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/app.scss b/dashboards-observability/public/components/event_analytics/explorer/visualizations/app.scss index 2f01e1b8e..ef67ba34b 100644 --- a/dashboards-observability/public/components/event_analytics/explorer/visualizations/app.scss +++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/app.scss @@ -32,6 +32,35 @@ flex-grow: 1; } +.containerPanel { + padding: 0 16px; +} + +.dataConfigContainer { + height: 1242px; + overflow: auto; +} + +::-webkit-scrollbar { + width: 10px; +} + +::-webkit-scrollbar-track { + background: #f1f1f1; +} + +::-webkit-scrollbar-thumb { + background: #c2c2c2; +} + +.euiResizableToggleButton:not(:focus):not(:active):not(.euiResizableToggleButton-isVisible):not(.euiResizableToggleButton-isCollapsed) { + height: 24px; + width: 24px; + top: 0; + left: inherit; + box-shadow: none; +} + .lensChartIcon__subdued { fill: $euiTextSubduedColor; 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 435c32d43..1cac93734 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 @@ -213,26 +213,6 @@ exports[`Config panel component Renders config panel with visualization data 1`] "mapTo": "dataConfig", "name": "Data", "sections": Array [ - Object { - "editor": [Function], - "id": "value_options", - "mapTo": "valueOptions", - "name": "Value options", - "schemas": Array [ - Object { - "component": null, - "isSingleSelection": false, - "mapTo": "xaxis", - "name": "X-axis", - }, - Object { - "component": null, - "isSingleSelection": false, - "mapTo": "yaxis", - "name": "Y-axis", - }, - ], - }, Object { "editor": [Function], "id": "legend", @@ -341,6 +321,12 @@ exports[`Config panel component Renders config panel with visualization data 1`] ], }, }, + Object { + "component": [Function], + "eleType": "input", + "mapTo": "labelSize", + "name": "Label Size", + }, Object { "component": [Function], "defaultState": 0, @@ -469,7 +455,7 @@ exports[`Config panel component Renders config panel with visualization data 1`] }, "isUniColor": false, "layout": Object { - "height": 500, + "height": 1180, "legend": Object { "orientation": "v", "traceorder": "normal", @@ -517,7 +503,7 @@ exports[`Config panel component Renders config panel with visualization data 1`] async={false} compressed={false} fullWidth={true} - isClearable={true} + isClearable={false} onChange={[Function]} options={ Array [ @@ -534,26 +520,6 @@ exports[`Config panel component Renders config panel with visualization data 1`] "mapTo": "dataConfig", "name": "Data", "sections": Array [ - Object { - "editor": [Function], - "id": "value_options", - "mapTo": "valueOptions", - "name": "Value options", - "schemas": Array [ - Object { - "component": null, - "isSingleSelection": false, - "mapTo": "xaxis", - "name": "X-axis", - }, - Object { - "component": null, - "isSingleSelection": false, - "mapTo": "yaxis", - "name": "Y-axis", - }, - ], - }, Object { "editor": [Function], "id": "legend", @@ -662,6 +628,12 @@ exports[`Config panel component Renders config panel with visualization data 1`] ], }, }, + Object { + "component": [Function], + "eleType": "input", + "mapTo": "labelSize", + "name": "Label Size", + }, Object { "component": [Function], "defaultState": 0, @@ -790,7 +762,7 @@ exports[`Config panel component Renders config panel with visualization data 1`] }, "isUniColor": false, "layout": Object { - "height": 500, + "height": 1180, "legend": Object { "orientation": "v", "traceorder": "normal", @@ -870,6 +842,13 @@ exports[`Config panel component Renders config panel with visualization data 1`] ], }, }, + Object { + "component": [Function], + "eleType": "input", + "mapTo": "legendSize", + "name": "Legend Size", + "title": "Legend Size", + }, ], }, Object { @@ -895,17 +874,13 @@ exports[`Config panel component Renders config panel with visualization data 1`] "id": "lines", "name": "Lines", }, - Object { - "id": "bar", - "name": "Bars", - }, Object { "id": "markers", - "name": "Points", + "name": "Marker", }, Object { "id": "lines+markers", - "name": "Lines + Points", + "name": "Lines + Markers", }, ], }, @@ -972,8 +947,56 @@ exports[`Config panel component Renders config panel with visualization data 1`] "max": 40, }, }, + Object { + "component": [Function], + "eleType": "input", + "mapTo": "labelSize", + "name": "Label Size", + "title": "Label Size", + }, + Object { + "component": [Function], + "defaultState": 0, + "eleType": "slider", + "mapTo": "rotateLabels", + "name": "Rotate labels", + "props": Object { + "max": 90, + "min": -90, + "showTicks": true, + "ticks": Array [ + Object { + "label": "-90°", + "value": -90, + }, + Object { + "label": "-45°", + "value": -45, + }, + Object { + "label": "0°", + "value": 0, + }, + Object { + "label": "45°", + "value": 45, + }, + Object { + "label": "90°", + "value": 90, + }, + ], + }, + }, ], }, + Object { + "editor": [Function], + "id": "color-theme", + "mapTo": "colorTheme", + "name": "Color theme", + "schemas": Array [], + }, Object { "defaultState": Array [], "editor": [Function], @@ -999,11 +1022,11 @@ exports[`Config panel component Renders config panel with visualization data 1`] }, ], }, - "fullLabel": "Line", + "fullLabel": "Time series", "icon": [Function], "iconType": "visLine", "id": "line", - "label": "Line", + "label": "Time series", "name": "line", "selection": Object { "dataLoss": "nothing", @@ -1035,7 +1058,7 @@ exports[`Config panel component Renders config panel with visualization data 1`] "#BD6F26", "#4C636F", ], - "height": 500, + "height": 1180, "legend": Object { "orientation": "v", "traceorder": "normal", @@ -1238,7 +1261,7 @@ exports[`Config panel component Renders config panel with visualization data 1`] "#BD6F26", "#4C636F", ], - "height": 500, + "height": 1180, "legend": Object { "orientation": "v", "traceorder": "normal", @@ -1277,6 +1300,37 @@ exports[`Config panel component Renders config panel with visualization data 1`] "mapTo": "dataConfig", "name": "Data", "sections": Array [ + Object { + "editor": [Function], + "id": "legend", + "mapTo": "legend", + "name": "Legend", + "schemas": Array [ + Object { + "component": null, + "mapTo": "showLegend", + "name": "Show Colorscale", + "props": Object { + "defaultSelections": Array [ + Object { + "id": "show", + "name": "Show", + }, + ], + "options": Array [ + Object { + "id": "show", + "name": "Show", + }, + Object { + "id": "hidden", + "name": "Hidden", + }, + ], + }, + }, + ], + }, Object { "editor": [Function], "id": "chart_styles", @@ -1579,7 +1633,7 @@ exports[`Config panel component Renders config panel with visualization data 1`] "responsive": true, }, "layout": Object { - "height": 500, + "height": 1180, "legend": Object { "orientation": "v", "traceorder": "normal", @@ -1652,7 +1706,7 @@ exports[`Config panel component Renders config panel with visualization data 1`] "#BD6F26", "#4C636F", ], - "height": 500, + "height": 1180, "legend": Object { "orientation": "v", "traceorder": "normal", @@ -1692,6 +1746,37 @@ exports[`Config panel component Renders config panel with visualization data 1`] "mapTo": "dataConfig", "name": "Data", "sections": Array [ + Object { + "editor": [Function], + "id": "legend", + "mapTo": "legend", + "name": "Legend", + "schemas": Array [ + Object { + "component": null, + "mapTo": "showLegend", + "name": "Show Colorscale", + "props": Object { + "defaultSelections": Array [ + Object { + "id": "show", + "name": "Show", + }, + ], + "options": Array [ + Object { + "id": "show", + "name": "Show", + }, + Object { + "id": "hidden", + "name": "Hidden", + }, + ], + }, + }, + ], + }, Object { "editor": [Function], "id": "treemap_options", @@ -1740,6 +1825,30 @@ exports[`Config panel component Renders config panel with visualization data 1`] "isClearable": false, }, }, + Object { + "component": [Function], + "eleType": "buttons", + "mapTo": "sort_sectors", + "name": "Sort Sectors", + "props": Object { + "defaultSelections": Array [ + Object { + "id": undefined, + "name": "Largest to Smallest", + }, + ], + "options": Array [ + Object { + "id": "largest_to_smallest", + "name": "Largest to Smallest", + }, + Object { + "id": "random", + "name": "Random", + }, + ], + }, + }, ], }, Object { @@ -2023,7 +2132,7 @@ exports[`Config panel component Renders config panel with visualization data 1`] }, "isUniColor": false, "layout": Object { - "height": 500, + "height": 1180, "legend": Object { "orientation": "v", "traceorder": "normal", @@ -2039,16 +2148,8 @@ exports[`Config panel component Renders config panel with visualization data 1`] }, }, }, - ] - } - placeholder="Select a chart" - renderOption={[Function]} - selectedOptions={ - Array [ Object { - "barWidth": 0.97, "category": "Visualizations", - "categoryAxis": "xaxis", "component": [Function], "editorConfig": Object { "panelTabs": Array [ @@ -2060,81 +2161,7 @@ exports[`Config panel component Renders config panel with visualization data 1`] "sections": Array [ Object { "editor": [Function], - "id": "value_options", - "mapTo": "valueOptions", - "name": "Value options", - "schemas": Array [ - Object { - "component": null, - "isSingleSelection": false, - "mapTo": "xaxis", - "name": "X-axis", - }, - Object { - "component": null, - "isSingleSelection": false, - "mapTo": "yaxis", - "name": "Y-axis", - }, - ], - }, - Object { - "editor": [Function], - "id": "legend", - "mapTo": "legend", - "name": "Legend", - "schemas": Array [ - Object { - "component": null, - "mapTo": "showLegend", - "name": "Show Legend", - "props": Object { - "defaultSelections": Array [ - Object { - "id": "show", - "name": "Show", - }, - ], - "options": Array [ - Object { - "id": "show", - "name": "Show", - }, - Object { - "id": "hidden", - "name": "Hidden", - }, - ], - }, - }, - Object { - "component": null, - "mapTo": "position", - "name": "Position", - "props": Object { - "defaultSelections": Array [ - Object { - "id": "v", - "name": "Right", - }, - ], - "options": Array [ - Object { - "id": "v", - "name": "Right", - }, - Object { - "id": "h", - "name": "Bottom", - }, - ], - }, - }, - ], - }, - Object { - "editor": [Function], - "id": "chart_styles", + "id": "chart-styles", "mapTo": "chartStyles", "name": "Chart styles", "schemas": Array [ @@ -2146,11 +2173,15 @@ exports[`Config panel component Renders config panel with visualization data 1`] "props": Object { "defaultSelections": Array [ Object { - "id": "v", - "name": "Vertical", + "id": "auto", + "name": "Auto", }, ], "options": Array [ + Object { + "id": "auto", + "name": "Auto", + }, Object { "id": "v", "name": "Vertical", @@ -2165,86 +2196,138 @@ exports[`Config panel component Renders config panel with visualization data 1`] Object { "component": [Function], "eleType": "buttons", - "mapTo": "mode", - "name": "Mode", + "mapTo": "legendPlacement", + "name": "Legend Placement", "props": Object { "defaultSelections": Array [ Object { - "id": "group", - "name": "Group", + "id": "center", + "name": "Center", }, ], "options": Array [ Object { - "id": "group", - "name": "Group", + "id": "center", + "name": "Center", }, Object { - "id": "stack", - "name": "Stack", + "id": "right", + "name": "Right", + }, + Object { + "id": "left", + "name": "Left", }, ], }, }, Object { "component": [Function], - "defaultState": 0, - "eleType": "slider", - "mapTo": "rotateBarLabels", - "name": "Rotate bar labels", - "props": Object { - "max": 90, - "min": -90, - "showTicks": true, - "ticks": Array [ - Object { - "label": "-90°", - "value": -90, - }, - Object { - "label": "-45°", - "value": -45, - }, - Object { - "label": "0°", - "value": 0, - }, - Object { - "label": "45°", - "value": 45, - }, - Object { - "label": "90°", - "value": 90, - }, - ], - }, + "eleType": "input", + "mapTo": "titleSize", + "name": "Title Size", + "title": "Title Size", }, Object { "component": [Function], - "defaultState": 0.7, - "eleType": "slider", - "mapTo": "groupWidth", - "name": "Group width", - "props": Object { - "max": 1, - "step": 0.01, - }, + "eleType": "input", + "mapTo": "valueSize", + "name": "Value Size", + "title": "Value Size", }, Object { "component": [Function], - "defaultState": 0.97, - "eleType": "slider", - "mapTo": "barWidth", - "name": "Bar width", - "props": Object { - "max": 1, - "step": 0.01, - }, + "currentValue": false, + "eleType": "switchButton", + "mapTo": "showThresholdLabels", + "name": "Show threshold labels", + "title": "Show threshold labels", }, Object { "component": [Function], - "defaultState": 1, + "currentValue": true, + "eleType": "switchButton", + "mapTo": "showThresholdMarkers", + "name": "Show threshold markers", + "title": "Show threshold markers", + }, + ], + }, + Object { + "defaultState": Array [], + "editor": [Function], + "id": "thresholds", + "mapTo": "thresholds", + "name": "Thresholds", + "props": Object { + "maxLimit": 1, + }, + "schemas": Array [], + }, + ], + }, + Object { + "content": Array [], + "editor": [Function], + "id": "style-panel", + "mapTo": "layoutConfig", + "name": "Layout", + }, + ], + }, + "fullLabel": "Gauge", + "icon": [Function], + "iconType": "visGauge", + "id": "gauge", + "label": "Gauge", + "name": "Gauge", + "selection": Object { + "dataLoss": "nothing", + }, + "type": "indicator", + "valueSeries": "yaxis", + "visConfig": Object { + "config": Object { + "displaylogo": false, + "responsive": true, + }, + "layout": Object { + "height": 1180, + "legend": Object { + "orientation": "v", + "traceorder": "normal", + }, + "margin": Object { + "b": 30, + "l": 60, + "pad": 0, + "r": 30, + "t": 50, + }, + "showlegend": true, + }, + }, + }, + Object { + "category": "Visualizations", + "component": [Function], + "editorConfig": Object { + "panelTabs": Array [ + Object { + "editor": [Function], + "id": "data-panel", + "mapTo": "dataConfig", + "name": "Data", + "sections": Array [ + Object { + "editor": [Function], + "id": "chart-styles", + "mapTo": "chartStyles", + "name": "Chart styles", + "schemas": Array [ + Object { + "component": [Function], + "defaultState": 2, "eleType": "slider", "mapTo": "lineWidth", "name": "Line width", @@ -2254,7 +2337,7 @@ exports[`Config panel component Renders config panel with visualization data 1`] }, Object { "component": [Function], - "defaultState": 80, + "defaultState": 40, "eleType": "slider", "mapTo": "fillOpacity", "name": "Fill Opacity", @@ -2271,6 +2354,60 @@ exports[`Config panel component Renders config panel with visualization data 1`] "name": "Color Theme", "schemas": Array [], }, + Object { + "editor": [Function], + "id": "legend", + "mapTo": "legend", + "name": "Legend", + "schemas": Array [ + Object { + "component": null, + "mapTo": "showLegend", + "name": "Show Legend", + "props": Object { + "defaultSelections": Array [ + Object { + "id": "show", + "name": "Show", + }, + ], + "options": Array [ + Object { + "id": "show", + "name": "Show", + }, + Object { + "id": "hidden", + "name": "Hidden", + }, + ], + }, + }, + Object { + "component": null, + "mapTo": "position", + "name": "Position", + "props": Object { + "defaultSelections": Array [ + Object { + "id": "v", + "name": "Right", + }, + ], + "options": Array [ + Object { + "id": "v", + "name": "Right", + }, + Object { + "id": "h", + "name": "Bottom", + }, + ], + }, + }, + ], + }, ], }, Object { @@ -2280,41 +2417,25 @@ exports[`Config panel component Renders config panel with visualization data 1`] "mapTo": "layoutConfig", "name": "Layout", }, - Object { - "editor": [Function], - "id": "availability-panel", - "mapTo": "availabilityConfig", - "name": "Availability", - }, ], }, - "fillOpacity": 80, - "fullLabel": "Bar", - "groupWidth": 0.7, - "icon": [Function], - "iconType": "visBarVerticalStacked", - "id": "bar", - "label": "Bar", - "labelAngle": 0, - "legendPosition": "v", - "lineWidth": 1, - "mode": "group", - "name": "bar", - "orientation": "v", + "fullLabel": "Histogram", + "iconType": "visArea", + "id": "histogram", + "label": "Histogram", + "name": "histogram", "selection": Object { "dataLoss": "nothing", }, - "seriesAxis": "yaxis", - "showLegend": "show", - "type": "bar", + "type": "histogram", + "valueSeries": "yaxis", "visConfig": Object { "config": Object { "displaylogo": false, "responsive": true, }, - "isUniColor": false, "layout": Object { - "height": 500, + "height": 1180, "legend": Object { "orientation": "v", "traceorder": "normal", @@ -2332,2504 +2453,326 @@ exports[`Config panel component Renders config panel with visualization data 1`] }, ] } - singleSelection={true} - sortMatchesBy="none" - > -
- - -
-
-
- - - - - - - Bar - - - - - - - - - - - - -
- -
-
- -
- -
- - - - - - - - -
- -
-
- - -
- - -
- -
- - -
- -
- , - "id": "data-panel", - "name": "Data", - } - } - tabs={ + Object { + "editor": [Function], + "id": "color-theme", + "mapTo": "colorTheme", + "name": "Color Theme", + "schemas": Array [], + }, + ], + }, + Object { + "content": Array [], + "editor": [Function], + "id": "style-panel", + "mapTo": "layoutConfig", + "name": "Layout", + }, + Object { + "editor": [Function], + "id": "availability-panel", + "mapTo": "availabilityConfig", + "name": "Availability", + }, + ], + }, + "fillOpacity": 80, + "fullLabel": "Bar", + "groupWidth": 0.7, + "icon": [Function], + "iconType": "visBarVerticalStacked", + "id": "bar", + "label": "Bar", + "labelAngle": 0, + "legendPosition": "v", + "lineWidth": 1, + "mode": "group", + "name": "bar", + "orientation": "v", + "selection": Object { + "dataLoss": "nothing", + }, + "seriesAxis": "yaxis", + "showLegend": "show", + "type": "bar", + "visConfig": Object { + "config": Object { + "displaylogo": false, + "responsive": true, + }, + "isUniColor": false, + "layout": Object { + "height": 1180, + "legend": Object { + "orientation": "v", + "traceorder": "normal", + }, + "margin": Object { + "b": 30, + "l": 60, + "pad": 0, + "r": 30, + "t": 50, + }, + "showlegend": true, + }, + }, + }, + ] + } + singleSelection={true} + sortMatchesBy="none" + > +
+ + +
+
+
+ , - "id": "data-panel", - "name": "Data", - }, - Object { - "content": , - "id": "style-panel", - "name": "Layout", - }, - Object { - "content": + + + + + + Bar + + + + + + + + + + + + , - "id": "availability-panel", - "name": "Availability", - }, - ] - } - > -
- -
- - - - - - - +
+
+ +
+ - - + + +
+
- -
- + + +
+ + +
+ +
+ + +
+ +
+ -
- -
- -
-
- - -
-
- -
-
- -
-
- -
- -
-
- - - -
-
- - -
-
- - - - -
-
- - - -
- Name your visualization. -
- -
-
- - -
-
- - - -
-
- - -