From 948489497387d3f085742e94676bd2fe427a4be8 Mon Sep 17 00:00:00 2001 From: rinku-kumar-psl Date: Thu, 28 Jul 2022 19:20:44 +0530 Subject: [PATCH 1/4] changes to remove for unique key warning on Dom and code refactoring sprint2 Signed-off-by: rinku-kumar-psl --- .../common/types/explorer.ts | 8 +- .../__snapshots__/utils.test.tsx.snap | 186 +++--- .../__snapshots__/no_results.test.tsx.snap | 6 +- .../__snapshots__/config_panel.test.tsx.snap | 531 ++++++++---------- .../config_panel/config_panel.tsx | 6 +- .../config_bar_chart_styles.tsx | 24 +- .../config_controls/config_chart_options.tsx | 12 +- .../config_color_palette_picker.tsx | 2 +- .../config_controls/config_color_theme.tsx | 6 +- .../config_controls/config_gauge_options.tsx | 8 +- .../config_controls/config_legend.tsx | 8 +- .../config_line_chart_styles.tsx | 8 +- .../config_controls/config_thresholds.tsx | 6 +- .../config_treemap_parents.tsx | 6 +- .../config_controls/config_value_options.tsx | 6 +- .../data_config_panel_item.tsx | 6 +- .../__tests__/__snapshots__/bar.test.tsx.snap | 26 +- .../__snapshots__/heatmap.test.tsx.snap | 26 +- .../__snapshots__/histogram.test.tsx.snap | 26 +- .../__snapshots__/line.test.tsx.snap | 26 +- .../__tests__/__snapshots__/pie.test.tsx.snap | 26 +- .../__snapshots__/text.test.tsx.snap | 26 +- .../__snapshots__/treemap.test.tsx.snap | 26 +- .../visualizations/charts/bar/bar.tsx | 22 +- .../visualizations/charts/bar/bar_type.ts | 27 +- .../charts/bar/horizontal_bar_type.ts | 12 +- .../charts/bubble/bubble_type.ts | 6 +- .../charts/data_table/data_table_type.ts | 6 +- .../charts/financial/gauge/gauge.tsx | 2 +- .../charts/financial/gauge/gauge_type.ts | 10 +- .../charts/histogram/histogram.tsx | 34 +- .../charts/histogram/histogram_type.ts | 11 +- .../visualizations/charts/lines/line.tsx | 8 +- .../visualizations/charts/lines/line_type.ts | 12 +- .../visualizations/charts/maps/heatmap.tsx | 11 +- .../charts/maps/heatmap_type.ts | 8 +- .../charts/maps/treemap_type.ts | 12 +- .../visualizations/charts/maps/treemaps.tsx | 2 +- .../visualizations/charts/pie/pie.tsx | 76 +-- .../visualizations/charts/pie/pie_type.ts | 16 +- .../visualizations/charts/text/text_type.ts | 12 +- .../visualizations/visualization.tsx | 2 +- .../visualizations/visualization_chart.tsx | 5 +- .../test/event_analytics_constants.ts | 13 +- 44 files changed, 646 insertions(+), 672 deletions(-) diff --git a/dashboards-observability/common/types/explorer.ts b/dashboards-observability/common/types/explorer.ts index ade2c6db3..3a9341948 100644 --- a/dashboards-observability/common/types/explorer.ts +++ b/dashboards-observability/common/types/explorer.ts @@ -199,13 +199,13 @@ export interface IVisualizationTypeDefination { type: string; id: string; label: string; - fullLabel: string; + fulllabel: string; category: string; icon: React.ReactNode; - editorConfig: { + editorconfig: { panelTabs: IConfigPanelTab; }; - visConfig: { + visconfig: { layout: Partial; config: Partial; }; @@ -247,4 +247,4 @@ export interface HistogramConfigList { export interface ConfigList { dimensions?: ConfigListEntry[] | HistogramConfigList[]; metrics?: ConfigListEntry[]; -} +} \ No newline at end of file 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 527aa9965..8353e48cd 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 @@ -76,11 +76,11 @@ exports[`Utils helper functions renders displayVisualization function 1`] = ` "userConfigs": Object {}, }, "vis": Object { - "barWidth": 0.97, + "barwidth": 0.97, "category": "Visualizations", - "categoryAxis": "xaxis", + "categoryaxis": "xaxis", "component": [Function], - "editorConfig": Object { + "editorconfig": Object { "panelTabs": Array [ Object { "editor": [Function], @@ -304,26 +304,26 @@ exports[`Utils helper functions renders displayVisualization function 1`] = ` }, ], }, - "fillOpacity": 80, - "fullLabel": "Bar", - "groupWidth": 0.7, + "fillopacity": 80, + "fulllabel": "Bar", + "groupwidth": 0.7, "icon": [Function], - "iconType": "visBarVerticalStacked", + "icontype": "visBarVerticalStacked", "id": "bar", "label": "Bar", - "labelAngle": 0, - "legendPosition": "v", - "lineWidth": 1, + "labelangle": 0, + "legendposition": "v", + "linewidth": 1, "mode": "group", "name": "bar", "orientation": "v", "selection": Object { "dataLoss": "nothing", }, - "seriesAxis": "yaxis", - "showLegend": "show", + "seriesaxis": "yaxis", + "showlegend": "show", "type": "bar", - "visConfig": Object { + "visconfig": Object { "config": Object { "displaylogo": false, "responsive": true, @@ -423,11 +423,11 @@ exports[`Utils helper functions renders displayVisualization function 1`] = ` "userConfigs": Object {}, }, "vis": Object { - "barWidth": 0.97, + "barwidth": 0.97, "category": "Visualizations", - "categoryAxis": "xaxis", + "categoryaxis": "xaxis", "component": [Function], - "editorConfig": Object { + "editorconfig": Object { "panelTabs": Array [ Object { "editor": [Function], @@ -651,26 +651,26 @@ exports[`Utils helper functions renders displayVisualization function 1`] = ` }, ], }, - "fillOpacity": 80, - "fullLabel": "Bar", - "groupWidth": 0.7, + "fillopacity": 80, + "fulllabel": "Bar", + "groupwidth": 0.7, "icon": [Function], - "iconType": "visBarVerticalStacked", + "icontype": "visBarVerticalStacked", "id": "bar", "label": "Bar", - "labelAngle": 0, - "legendPosition": "v", - "lineWidth": 1, + "labelangle": 0, + "legendposition": "v", + "linewidth": 1, "mode": "group", "name": "bar", "orientation": "v", "selection": Object { "dataLoss": "nothing", }, - "seriesAxis": "yaxis", - "showLegend": "show", + "seriesaxis": "yaxis", + "showlegend": "show", "type": "bar", - "visConfig": Object { + "visconfig": Object { "config": Object { "displaylogo": false, "responsive": true, @@ -793,11 +793,11 @@ exports[`Utils helper functions renders displayVisualization function 1`] = ` "userConfigs": Object {}, }, "vis": Object { - "barWidth": 0.97, + "barwidth": 0.97, "category": "Visualizations", - "categoryAxis": "xaxis", + "categoryaxis": "xaxis", "component": [Function], - "editorConfig": Object { + "editorconfig": Object { "panelTabs": Array [ Object { "editor": [Function], @@ -1021,26 +1021,26 @@ exports[`Utils helper functions renders displayVisualization function 1`] = ` }, ], }, - "fillOpacity": 80, - "fullLabel": "Bar", - "groupWidth": 0.7, + "fillopacity": 80, + "fulllabel": "Bar", + "groupwidth": 0.7, "icon": [Function], - "iconType": "visBarVerticalStacked", + "icontype": "visBarVerticalStacked", "id": "bar", "label": "Bar", - "labelAngle": 0, - "legendPosition": "v", - "lineWidth": 1, + "labelangle": 0, + "legendposition": "v", + "linewidth": 1, "mode": "group", "name": "bar", "orientation": "v", "selection": Object { "dataLoss": "nothing", }, - "seriesAxis": "yaxis", - "showLegend": "show", + "seriesaxis": "yaxis", + "showlegend": "show", "type": "bar", - "visConfig": Object { + "visconfig": Object { "config": Object { "displaylogo": false, "responsive": true, @@ -1225,9 +1225,9 @@ exports[`Utils helper functions renders displayVisualization function 2`] = ` }, "vis": Object { "category": "Visualizations", - "categoryAxis": "xaxis", + "categoryaxis": "xaxis", "component": [Function], - "editorConfig": Object { + "editorconfig": Object { "panelTabs": Array [ Object { "editor": [Function], @@ -1467,18 +1467,18 @@ exports[`Utils helper functions renders displayVisualization function 2`] = ` }, ], }, - "fullLabel": "Time series", + "fulllabel": "Time series", "icon": [Function], - "iconType": "visLine", + "icontype": "visLine", "id": "line", "label": "Time series", "name": "line", "selection": Object { "dataLoss": "nothing", }, - "seriesAxis": "yaxis", + "seriesaxis": "yaxis", "type": "line", - "visConfig": Object { + "visconfig": Object { "config": Object { "barmode": "line", "displaylogo": false, @@ -1608,9 +1608,9 @@ exports[`Utils helper functions renders displayVisualization function 2`] = ` }, "vis": Object { "category": "Visualizations", - "categoryAxis": "xaxis", + "categoryaxis": "xaxis", "component": [Function], - "editorConfig": Object { + "editorconfig": Object { "panelTabs": Array [ Object { "editor": [Function], @@ -1850,18 +1850,18 @@ exports[`Utils helper functions renders displayVisualization function 2`] = ` }, ], }, - "fullLabel": "Time series", + "fulllabel": "Time series", "icon": [Function], - "iconType": "visLine", + "icontype": "visLine", "id": "line", "label": "Time series", "name": "line", "selection": Object { "dataLoss": "nothing", }, - "seriesAxis": "yaxis", + "seriesaxis": "yaxis", "type": "line", - "visConfig": Object { + "visconfig": Object { "config": Object { "barmode": "line", "displaylogo": false, @@ -2045,9 +2045,9 @@ exports[`Utils helper functions renders displayVisualization function 2`] = ` }, "vis": Object { "category": "Visualizations", - "categoryAxis": "xaxis", + "categoryaxis": "xaxis", "component": [Function], - "editorConfig": Object { + "editorconfig": Object { "panelTabs": Array [ Object { "editor": [Function], @@ -2287,18 +2287,18 @@ exports[`Utils helper functions renders displayVisualization function 2`] = ` }, ], }, - "fullLabel": "Time series", + "fulllabel": "Time series", "icon": [Function], - "iconType": "visLine", + "icontype": "visLine", "id": "line", "label": "Time series", "name": "line", "selection": Object { "dataLoss": "nothing", }, - "seriesAxis": "yaxis", + "seriesaxis": "yaxis", "type": "line", - "visConfig": Object { + "visconfig": Object { "config": Object { "barmode": "line", "displaylogo": false, @@ -2514,9 +2514,9 @@ exports[`Utils helper functions renders displayVisualization function 3`] = ` }, "vis": Object { "category": "Visualizations", - "categoryAxis": "xaxis", + "categoryaxis": "xaxis", "component": [Function], - "editorConfig": Object { + "editorconfig": Object { "panelTabs": Array [ Object { "editor": [Function], @@ -2611,9 +2611,9 @@ exports[`Utils helper functions renders displayVisualization function 3`] = ` }, ], }, - "fullLabel": "Bar", + "fulllabel": "Bar", "icon": [Function], - "iconType": "visBarVerticalStacked", + "icontype": "visBarVerticalStacked", "id": "horizontal_bar", "label": "Bar", "name": "horizontal_bar", @@ -2621,9 +2621,9 @@ exports[`Utils helper functions renders displayVisualization function 3`] = ` "selection": Object { "dataLoss": "nothing", }, - "seriesAxis": "yaxis", + "seriesaxis": "yaxis", "type": "bar", - "visConfig": Object { + "visconfig": Object { "config": Object { "displaylogo": false, "responsive": true, @@ -2724,9 +2724,9 @@ exports[`Utils helper functions renders displayVisualization function 3`] = ` }, "vis": Object { "category": "Visualizations", - "categoryAxis": "xaxis", + "categoryaxis": "xaxis", "component": [Function], - "editorConfig": Object { + "editorconfig": Object { "panelTabs": Array [ Object { "editor": [Function], @@ -2821,9 +2821,9 @@ exports[`Utils helper functions renders displayVisualization function 3`] = ` }, ], }, - "fullLabel": "Bar", + "fulllabel": "Bar", "icon": [Function], - "iconType": "visBarVerticalStacked", + "icontype": "visBarVerticalStacked", "id": "horizontal_bar", "label": "Bar", "name": "horizontal_bar", @@ -2831,9 +2831,9 @@ exports[`Utils helper functions renders displayVisualization function 3`] = ` "selection": Object { "dataLoss": "nothing", }, - "seriesAxis": "yaxis", + "seriesaxis": "yaxis", "type": "bar", - "visConfig": Object { + "visconfig": Object { "config": Object { "displaylogo": false, "responsive": true, @@ -2957,9 +2957,9 @@ exports[`Utils helper functions renders displayVisualization function 3`] = ` }, "vis": Object { "category": "Visualizations", - "categoryAxis": "xaxis", + "categoryaxis": "xaxis", "component": [Function], - "editorConfig": Object { + "editorconfig": Object { "panelTabs": Array [ Object { "editor": [Function], @@ -3054,9 +3054,9 @@ exports[`Utils helper functions renders displayVisualization function 3`] = ` }, ], }, - "fullLabel": "Bar", + "fulllabel": "Bar", "icon": [Function], - "iconType": "visBarVerticalStacked", + "icontype": "visBarVerticalStacked", "id": "horizontal_bar", "label": "Bar", "name": "horizontal_bar", @@ -3064,9 +3064,9 @@ exports[`Utils helper functions renders displayVisualization function 3`] = ` "selection": Object { "dataLoss": "nothing", }, - "seriesAxis": "yaxis", + "seriesaxis": "yaxis", "type": "bar", - "visConfig": Object { + "visconfig": Object { "config": Object { "displaylogo": false, "responsive": true, @@ -3225,9 +3225,9 @@ exports[`Utils helper functions renders displayVisualization function 4`] = ` }, "vis": Object { "category": "Visualizations", - "categoryAxis": "xaxis", + "categoryaxis": "xaxis", "component": [Function], - "editorConfig": Object { + "editorconfig": Object { "panelTabs": Array [ Object { "editor": [Function], @@ -3322,9 +3322,9 @@ exports[`Utils helper functions renders displayVisualization function 4`] = ` }, ], }, - "fullLabel": "Bar", + "fulllabel": "Bar", "icon": [Function], - "iconType": "visBarVerticalStacked", + "icontype": "visBarVerticalStacked", "id": "horizontal_bar", "label": "Bar", "name": "horizontal_bar", @@ -3332,9 +3332,9 @@ exports[`Utils helper functions renders displayVisualization function 4`] = ` "selection": Object { "dataLoss": "nothing", }, - "seriesAxis": "yaxis", + "seriesaxis": "yaxis", "type": "bar", - "visConfig": Object { + "visconfig": Object { "config": Object { "displaylogo": false, "responsive": true, @@ -3408,9 +3408,9 @@ exports[`Utils helper functions renders displayVisualization function 4`] = ` }, "vis": Object { "category": "Visualizations", - "categoryAxis": "xaxis", + "categoryaxis": "xaxis", "component": [Function], - "editorConfig": Object { + "editorconfig": Object { "panelTabs": Array [ Object { "editor": [Function], @@ -3505,9 +3505,9 @@ exports[`Utils helper functions renders displayVisualization function 4`] = ` }, ], }, - "fullLabel": "Bar", + "fulllabel": "Bar", "icon": [Function], - "iconType": "visBarVerticalStacked", + "icontype": "visBarVerticalStacked", "id": "horizontal_bar", "label": "Bar", "name": "horizontal_bar", @@ -3515,9 +3515,9 @@ exports[`Utils helper functions renders displayVisualization function 4`] = ` "selection": Object { "dataLoss": "nothing", }, - "seriesAxis": "yaxis", + "seriesaxis": "yaxis", "type": "bar", - "visConfig": Object { + "visconfig": Object { "config": Object { "displaylogo": false, "responsive": true, @@ -3614,9 +3614,9 @@ exports[`Utils helper functions renders displayVisualization function 4`] = ` }, "vis": Object { "category": "Visualizations", - "categoryAxis": "xaxis", + "categoryaxis": "xaxis", "component": [Function], - "editorConfig": Object { + "editorconfig": Object { "panelTabs": Array [ Object { "editor": [Function], @@ -3711,9 +3711,9 @@ exports[`Utils helper functions renders displayVisualization function 4`] = ` }, ], }, - "fullLabel": "Bar", + "fulllabel": "Bar", "icon": [Function], - "iconType": "visBarVerticalStacked", + "icontype": "visBarVerticalStacked", "id": "horizontal_bar", "label": "Bar", "name": "horizontal_bar", @@ -3721,9 +3721,9 @@ exports[`Utils helper functions renders displayVisualization function 4`] = ` "selection": Object { "dataLoss": "nothing", }, - "seriesAxis": "yaxis", + "seriesaxis": "yaxis", "type": "bar", - "visConfig": Object { + "visconfig": Object { "config": Object { "displaylogo": false, "responsive": true, 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 1cac93734..ac571be05 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 @@ -201,11 +201,11 @@ exports[`Config panel component Renders config panel with visualization data 1`] "userConfigs": Object {}, }, "vis": Object { - "barWidth": 0.97, + "barwidth": 0.97, "category": "Visualizations", - "categoryAxis": "xaxis", + "categoryaxis": "xaxis", "component": [Function], - "editorConfig": Object { + "editorconfig": Object { "panelTabs": Array [ Object { "editor": [Function], @@ -429,26 +429,26 @@ exports[`Config panel component Renders config panel with visualization data 1`] }, ], }, - "fillOpacity": 80, - "fullLabel": "Bar", - "groupWidth": 0.7, + "fillopacity": 80, + "fulllabel": "Bar", + "groupwidth": 0.7, "icon": [Function], - "iconType": "visBarVerticalStacked", + "icontype": "visBarVerticalStacked", "id": "bar", "label": "Bar", - "labelAngle": 0, - "legendPosition": "v", - "lineWidth": 1, + "labelangle": 0, + "legendposition": "v", + "linewidth": 1, "mode": "group", "name": "bar", "orientation": "v", "selection": Object { "dataLoss": "nothing", }, - "seriesAxis": "yaxis", - "showLegend": "show", + "seriesaxis": "yaxis", + "showlegend": "show", "type": "bar", - "visConfig": Object { + "visconfig": Object { "config": Object { "displaylogo": false, "responsive": true, @@ -508,11 +508,11 @@ exports[`Config panel component Renders config panel with visualization data 1`] options={ Array [ Object { - "barWidth": 0.97, + "barwidth": 0.97, "category": "Visualizations", - "categoryAxis": "xaxis", + "categoryaxis": "xaxis", "component": [Function], - "editorConfig": Object { + "editorconfig": Object { "panelTabs": Array [ Object { "editor": [Function], @@ -736,26 +736,26 @@ exports[`Config panel component Renders config panel with visualization data 1`] }, ], }, - "fillOpacity": 80, - "fullLabel": "Bar", - "groupWidth": 0.7, + "fillopacity": 80, + "fulllabel": "Bar", + "groupwidth": 0.7, "icon": [Function], - "iconType": "visBarVerticalStacked", + "icontype": "visBarVerticalStacked", "id": "bar", "label": "Bar", - "labelAngle": 0, - "legendPosition": "v", - "lineWidth": 1, + "labelangle": 0, + "legendposition": "v", + "linewidth": 1, "mode": "group", "name": "bar", "orientation": "v", "selection": Object { "dataLoss": "nothing", }, - "seriesAxis": "yaxis", - "showLegend": "show", + "seriesaxis": "yaxis", + "showlegend": "show", "type": "bar", - "visConfig": Object { + "visconfig": Object { "config": Object { "displaylogo": false, "responsive": true, @@ -780,9 +780,9 @@ exports[`Config panel component Renders config panel with visualization data 1`] }, Object { "category": "Visualizations", - "categoryAxis": "xaxis", + "categoryaxis": "xaxis", "component": [Function], - "editorConfig": Object { + "editorconfig": Object { "panelTabs": Array [ Object { "editor": [Function], @@ -1022,18 +1022,18 @@ exports[`Config panel component Renders config panel with visualization data 1`] }, ], }, - "fullLabel": "Time series", + "fulllabel": "Time series", "icon": [Function], - "iconType": "visLine", + "icontype": "visLine", "id": "line", "label": "Time series", "name": "line", "selection": Object { "dataLoss": "nothing", }, - "seriesAxis": "yaxis", + "seriesaxis": "yaxis", "type": "line", - "visConfig": Object { + "visconfig": Object { "config": Object { "barmode": "line", "displaylogo": false, @@ -1088,9 +1088,9 @@ exports[`Config panel component Renders config panel with visualization data 1`] }, Object { "category": "Visualizations", - "categoryAxis": "xaxis", + "categoryaxis": "xaxis", "component": [Function], - "editorConfig": Object { + "editorconfig": Object { "panelTabs": Array [ Object { "editor": [Function], @@ -1230,20 +1230,20 @@ exports[`Config panel component Renders config panel with visualization data 1`] }, ], }, - "fullLabel": "Pie", + "fulllabel": "Pie", "icon": [Function], - "iconType": "visPie", + "icontype": "visPie", "id": "pie", "label": "Pie", - "legendPosition": "v", + "legendposition": "v", "name": "pie", "selection": Object { "dataLoss": "nothing", }, - "seriesAxis": "yaxis", - "showLegend": true, + "seriesaxis": "yaxis", + "showlegend": true, "type": "pie", - "visConfig": Object { + "visconfig": Object { "config": Object { "displaylogo": false, "responsive": true, @@ -1292,7 +1292,7 @@ exports[`Config panel component Renders config panel with visualization data 1`] Object { "category": "Visualizations", "component": [Function], - "editorConfig": Object { + "editorconfig": Object { "panelTabs": Array [ Object { "editor": [Function], @@ -1617,9 +1617,9 @@ exports[`Config panel component Renders config panel with visualization data 1`] }, ], }, - "fullLabel": "Hubble", + "fulllabel": "Hubble", "icon": [Function], - "iconType": "heatmap", + "icontype": "heatmap", "id": "heatmap", "label": "Heatmap", "name": "heatmap", @@ -1627,7 +1627,7 @@ exports[`Config panel component Renders config panel with visualization data 1`] "dataLoss": "nothing", }, "type": "heatmap", - "visConfig": Object { + "visconfig": Object { "config": Object { "displaylogo": false, "responsive": true, @@ -1649,9 +1649,9 @@ exports[`Config panel component Renders config panel with visualization data 1`] }, Object { "category": "Visualizations", - "categoryAxis": "xaxis", + "categoryaxis": "xaxis", "component": [Function], - "editorConfig": Object { + "editorconfig": Object { "panelTabs": Array [ Object { "editor": [Function], @@ -1670,18 +1670,18 @@ exports[`Config panel component Renders config panel with visualization data 1`] }, ], }, - "fullLabel": "Text", + "fulllabel": "Text", "icon": [Function], - "iconType": "visText", + "icontype": "visText", "id": "text", "label": "Text", "name": "text", "selection": Object { "dataLoss": "nothing", }, - "seriesAxis": "yaxis", + "seriesaxis": "yaxis", "type": "text", - "visConfig": Object { + "visconfig": Object { "config": Object { "barmode": "line", "displaylogo": false, @@ -1736,9 +1736,9 @@ exports[`Config panel component Renders config panel with visualization data 1`] }, Object { "category": "Visualizations", - "categoryAxis": "xaxis", + "categoryaxis": "xaxis", "component": [Function], - "editorConfig": Object { + "editorconfig": Object { "panelTabs": Array [ Object { "editor": [Function], @@ -2113,9 +2113,9 @@ exports[`Config panel component Renders config panel with visualization data 1`] }, ], }, - "fullLabel": "Tree Map", + "fulllabel": "Tree Map", "icon": [Function], - "iconType": "heatmap", + "icontype": "heatmap", "id": "tree_map", "label": "Tree Map", "name": "tree_map", @@ -2123,9 +2123,9 @@ exports[`Config panel component Renders config panel with visualization data 1`] "selection": Object { "dataLoss": "nothing", }, - "seriesAxis": "yaxis", + "seriesaxis": "yaxis", "type": "tree_map", - "visConfig": Object { + "visconfig": Object { "config": Object { "displaylogo": false, "responsive": true, @@ -2151,7 +2151,7 @@ exports[`Config panel component Renders config panel with visualization data 1`] Object { "category": "Visualizations", "component": [Function], - "editorConfig": Object { + "editorconfig": Object { "panelTabs": Array [ Object { "editor": [Function], @@ -2275,9 +2275,9 @@ exports[`Config panel component Renders config panel with visualization data 1`] }, ], }, - "fullLabel": "Gauge", + "fulllabel": "Gauge", "icon": [Function], - "iconType": "visGauge", + "icontype": "visGauge", "id": "gauge", "label": "Gauge", "name": "Gauge", @@ -2285,8 +2285,8 @@ exports[`Config panel component Renders config panel with visualization data 1`] "dataLoss": "nothing", }, "type": "indicator", - "valueSeries": "yaxis", - "visConfig": Object { + "valueseries": "yaxis", + "visconfig": Object { "config": Object { "displaylogo": false, "responsive": true, @@ -2311,7 +2311,7 @@ exports[`Config panel component Renders config panel with visualization data 1`] Object { "category": "Visualizations", "component": [Function], - "editorConfig": Object { + "editorconfig": Object { "panelTabs": Array [ Object { "editor": [Function], @@ -2419,8 +2419,8 @@ exports[`Config panel component Renders config panel with visualization data 1`] }, ], }, - "fullLabel": "Histogram", - "iconType": "visArea", + "fulllabel": "Histogram", + "icontype": "visArea", "id": "histogram", "label": "Histogram", "name": "histogram", @@ -2428,8 +2428,8 @@ exports[`Config panel component Renders config panel with visualization data 1`] "dataLoss": "nothing", }, "type": "histogram", - "valueSeries": "yaxis", - "visConfig": Object { + "valueseries": "yaxis", + "visconfig": Object { "config": Object { "displaylogo": false, "responsive": true, @@ -2458,11 +2458,11 @@ exports[`Config panel component Renders config panel with visualization data 1`] selectedOptions={ Array [ Object { - "barWidth": 0.97, + "barwidth": 0.97, "category": "Visualizations", - "categoryAxis": "xaxis", + "categoryaxis": "xaxis", "component": [Function], - "editorConfig": Object { + "editorconfig": Object { "panelTabs": Array [ Object { "editor": [Function], @@ -2686,26 +2686,26 @@ exports[`Config panel component Renders config panel with visualization data 1`] }, ], }, - "fillOpacity": 80, - "fullLabel": "Bar", - "groupWidth": 0.7, + "fillopacity": 80, + "fulllabel": "Bar", + "groupwidth": 0.7, "icon": [Function], - "iconType": "visBarVerticalStacked", + "icontype": "visBarVerticalStacked", "id": "bar", "label": "Bar", - "labelAngle": 0, - "legendPosition": "v", - "lineWidth": 1, + "labelangle": 0, + "legendposition": "v", + "linewidth": 1, "mode": "group", "name": "bar", "orientation": "v", "selection": Object { "dataLoss": "nothing", }, - "seriesAxis": "yaxis", - "showLegend": "show", + "seriesaxis": "yaxis", + "showlegend": "show", "type": "bar", - "visConfig": Object { + "visconfig": Object { "config": Object { "displaylogo": false, "responsive": true, @@ -2761,11 +2761,11 @@ exports[`Config panel component Renders config panel with visualization data 1`] selectedOptions={ Array [ Object { - "barWidth": 0.97, + "barwidth": 0.97, "category": "Visualizations", - "categoryAxis": "xaxis", + "categoryaxis": "xaxis", "component": [Function], - "editorConfig": Object { + "editorconfig": Object { "panelTabs": Array [ Object { "editor": [Function], @@ -2989,26 +2989,26 @@ exports[`Config panel component Renders config panel with visualization data 1`] }, ], }, - "fillOpacity": 80, - "fullLabel": "Bar", - "groupWidth": 0.7, + "fillopacity": 80, + "fulllabel": "Bar", + "groupwidth": 0.7, "icon": [Function], - "iconType": "visBarVerticalStacked", + "icontype": "visBarVerticalStacked", "id": "bar", "label": "Bar", - "labelAngle": 0, - "legendPosition": "v", - "lineWidth": 1, + "labelangle": 0, + "legendposition": "v", + "linewidth": 1, "mode": "group", "name": "bar", "orientation": "v", "selection": Object { "dataLoss": "nothing", }, - "seriesAxis": "yaxis", - "showLegend": "show", + "seriesaxis": "yaxis", + "showlegend": "show", "type": "bar", - "visConfig": Object { + "visconfig": Object { "config": Object { "displaylogo": false, "responsive": true, @@ -3067,12 +3067,12 @@ exports[`Config panel component Renders config panel with visualization data 1`] > Bar - - - - - @@ -4760,11 +4735,11 @@ exports[`Config panel component Renders config panel with visualization data 1`] "userConfigs": Object {}, }, "vis": Object { - "barWidth": 0.97, + "barwidth": 0.97, "category": "Visualizations", - "categoryAxis": "xaxis", + "categoryaxis": "xaxis", "component": [Function], - "editorConfig": Object { + "editorconfig": Object { "panelTabs": Array [ Object { "editor": [Function], @@ -4988,26 +4963,26 @@ exports[`Config panel component Renders config panel with visualization data 1`] }, ], }, - "fillOpacity": 80, - "fullLabel": "Bar", - "groupWidth": 0.7, + "fillopacity": 80, + "fulllabel": "Bar", + "groupwidth": 0.7, "icon": [Function], - "iconType": "visBarVerticalStacked", + "icontype": "visBarVerticalStacked", "id": "bar", "label": "Bar", - "labelAngle": 0, - "legendPosition": "v", - "lineWidth": 1, + "labelangle": 0, + "legendposition": "v", + "linewidth": 1, "mode": "group", "name": "bar", "orientation": "v", "selection": Object { "dataLoss": "nothing", }, - "seriesAxis": "yaxis", - "showLegend": "show", + "seriesaxis": "yaxis", + "showlegend": "show", "type": "bar", - "visConfig": Object { + "visconfig": Object { "config": Object { "displaylogo": false, "responsive": true, @@ -5440,11 +5415,11 @@ exports[`Config panel component Renders config panel with visualization data 1`] "userConfigs": Object {}, }, "vis": Object { - "barWidth": 0.97, + "barwidth": 0.97, "category": "Visualizations", - "categoryAxis": "xaxis", + "categoryaxis": "xaxis", "component": [Function], - "editorConfig": Object { + "editorconfig": Object { "panelTabs": Array [ Object { "editor": [Function], @@ -5668,26 +5643,26 @@ exports[`Config panel component Renders config panel with visualization data 1`] }, ], }, - "fillOpacity": 80, - "fullLabel": "Bar", - "groupWidth": 0.7, + "fillopacity": 80, + "fulllabel": "Bar", + "groupwidth": 0.7, "icon": [Function], - "iconType": "visBarVerticalStacked", + "icontype": "visBarVerticalStacked", "id": "bar", "label": "Bar", - "labelAngle": 0, - "legendPosition": "v", - "lineWidth": 1, + "labelangle": 0, + "legendposition": "v", + "linewidth": 1, "mode": "group", "name": "bar", "orientation": "v", "selection": Object { "dataLoss": "nothing", }, - "seriesAxis": "yaxis", - "showLegend": "show", + "seriesaxis": "yaxis", + "showlegend": "show", "type": "bar", - "visConfig": Object { + "visconfig": Object { "config": Object { "displaylogo": false, "responsive": true, @@ -5934,11 +5909,11 @@ exports[`Config panel component Renders config panel with visualization data 1`] "userConfigs": Object {}, }, "vis": Object { - "barWidth": 0.97, + "barwidth": 0.97, "category": "Visualizations", - "categoryAxis": "xaxis", + "categoryaxis": "xaxis", "component": [Function], - "editorConfig": Object { + "editorconfig": Object { "panelTabs": Array [ Object { "editor": [Function], @@ -6162,26 +6137,26 @@ exports[`Config panel component Renders config panel with visualization data 1`] }, ], }, - "fillOpacity": 80, - "fullLabel": "Bar", - "groupWidth": 0.7, + "fillopacity": 80, + "fulllabel": "Bar", + "groupwidth": 0.7, "icon": [Function], - "iconType": "visBarVerticalStacked", + "icontype": "visBarVerticalStacked", "id": "bar", "label": "Bar", - "labelAngle": 0, - "legendPosition": "v", - "lineWidth": 1, + "labelangle": 0, + "legendposition": "v", + "linewidth": 1, "mode": "group", "name": "bar", "orientation": "v", "selection": Object { "dataLoss": "nothing", }, - "seriesAxis": "yaxis", - "showLegend": "show", + "seriesaxis": "yaxis", + "showlegend": "show", "type": "bar", - "visConfig": Object { + "visconfig": Object { "config": Object { "displaylogo": false, "responsive": true, @@ -6698,11 +6673,11 @@ exports[`Config panel component Renders config panel with visualization data 1`] "userConfigs": Object {}, }, "vis": Object { - "barWidth": 0.97, + "barwidth": 0.97, "category": "Visualizations", - "categoryAxis": "xaxis", + "categoryaxis": "xaxis", "component": [Function], - "editorConfig": Object { + "editorconfig": Object { "panelTabs": Array [ Object { "editor": [Function], @@ -6926,26 +6901,26 @@ exports[`Config panel component Renders config panel with visualization data 1`] }, ], }, - "fillOpacity": 80, - "fullLabel": "Bar", - "groupWidth": 0.7, + "fillopacity": 80, + "fulllabel": "Bar", + "groupwidth": 0.7, "icon": [Function], - "iconType": "visBarVerticalStacked", + "icontype": "visBarVerticalStacked", "id": "bar", "label": "Bar", - "labelAngle": 0, - "legendPosition": "v", - "lineWidth": 1, + "labelangle": 0, + "legendposition": "v", + "linewidth": 1, "mode": "group", "name": "bar", "orientation": "v", "selection": Object { "dataLoss": "nothing", }, - "seriesAxis": "yaxis", - "showLegend": "show", + "seriesaxis": "yaxis", + "showlegend": "show", "type": "bar", - "visConfig": Object { + "visconfig": Object { "config": Object { "displaylogo": false, "responsive": true, @@ -7188,11 +7163,11 @@ exports[`Config panel component Renders config panel with visualization data 1`] "userConfigs": Object {}, }, "vis": Object { - "barWidth": 0.97, + "barwidth": 0.97, "category": "Visualizations", - "categoryAxis": "xaxis", + "categoryaxis": "xaxis", "component": [Function], - "editorConfig": Object { + "editorconfig": Object { "panelTabs": Array [ Object { "editor": [Function], @@ -7416,26 +7391,26 @@ exports[`Config panel component Renders config panel with visualization data 1`] }, ], }, - "fillOpacity": 80, - "fullLabel": "Bar", - "groupWidth": 0.7, + "fillopacity": 80, + "fulllabel": "Bar", + "groupwidth": 0.7, "icon": [Function], - "iconType": "visBarVerticalStacked", + "icontype": "visBarVerticalStacked", "id": "bar", "label": "Bar", - "labelAngle": 0, - "legendPosition": "v", - "lineWidth": 1, + "labelangle": 0, + "legendposition": "v", + "linewidth": 1, "mode": "group", "name": "bar", "orientation": "v", "selection": Object { "dataLoss": "nothing", }, - "seriesAxis": "yaxis", - "showLegend": "show", + "seriesaxis": "yaxis", + "showlegend": "show", "type": "bar", - "visConfig": Object { + "visconfig": Object { "config": Object { "displaylogo": false, "responsive": true, @@ -7957,11 +7932,11 @@ exports[`Config panel component Renders config panel with visualization data 1`] "userConfigs": Object {}, }, "vis": Object { - "barWidth": 0.97, + "barwidth": 0.97, "category": "Visualizations", - "categoryAxis": "xaxis", + "categoryaxis": "xaxis", "component": [Function], - "editorConfig": Object { + "editorconfig": Object { "panelTabs": Array [ Object { "editor": [Function], @@ -8185,26 +8160,26 @@ exports[`Config panel component Renders config panel with visualization data 1`] }, ], }, - "fillOpacity": 80, - "fullLabel": "Bar", - "groupWidth": 0.7, + "fillopacity": 80, + "fulllabel": "Bar", + "groupwidth": 0.7, "icon": [Function], - "iconType": "visBarVerticalStacked", + "icontype": "visBarVerticalStacked", "id": "bar", "label": "Bar", - "labelAngle": 0, - "legendPosition": "v", - "lineWidth": 1, + "labelangle": 0, + "legendposition": "v", + "linewidth": 1, "mode": "group", "name": "bar", "orientation": "v", "selection": Object { "dataLoss": "nothing", }, - "seriesAxis": "yaxis", - "showLegend": "show", + "seriesaxis": "yaxis", + "showlegend": "show", "type": "bar", - "visConfig": Object { + "visconfig": Object { "config": Object { "displaylogo": false, "responsive": true, @@ -8329,7 +8304,6 @@ exports[`Config panel component Renders config panel with visualization data 1`] } handleButtonChange={[Function]} idSelected="show" - key="viz-series-0" legend="Show Legend" options={ Array [ @@ -8604,7 +8578,6 @@ exports[`Config panel component Renders config panel with visualization data 1`] } handleButtonChange={[Function]} idSelected="v" - key="viz-series-1" legend="Position" options={ Array [ @@ -9204,11 +9177,11 @@ exports[`Config panel component Renders config panel with visualization data 1`] "userConfigs": Object {}, }, "vis": Object { - "barWidth": 0.97, + "barwidth": 0.97, "category": "Visualizations", - "categoryAxis": "xaxis", + "categoryaxis": "xaxis", "component": [Function], - "editorConfig": Object { + "editorconfig": Object { "panelTabs": Array [ Object { "editor": [Function], @@ -9432,26 +9405,26 @@ exports[`Config panel component Renders config panel with visualization data 1`] }, ], }, - "fillOpacity": 80, - "fullLabel": "Bar", - "groupWidth": 0.7, + "fillopacity": 80, + "fulllabel": "Bar", + "groupwidth": 0.7, "icon": [Function], - "iconType": "visBarVerticalStacked", + "icontype": "visBarVerticalStacked", "id": "bar", "label": "Bar", - "labelAngle": 0, - "legendPosition": "v", - "lineWidth": 1, + "labelangle": 0, + "legendposition": "v", + "linewidth": 1, "mode": "group", "name": "bar", "orientation": "v", "selection": Object { "dataLoss": "nothing", }, - "seriesAxis": "yaxis", - "showLegend": "show", + "seriesaxis": "yaxis", + "showlegend": "show", "type": "bar", - "visConfig": Object { + "visconfig": Object { "config": Object { "displaylogo": false, "responsive": true, @@ -9576,7 +9549,6 @@ exports[`Config panel component Renders config panel with visualization data 1`] } handleButtonChange={[Function]} idSelected="v" - key="viz-series-0" legend="Orientation" options={ Array [ @@ -9851,7 +9823,6 @@ exports[`Config panel component Renders config panel with visualization data 1`] } handleButtonChange={[Function]} idSelected="group" - key="viz-series-1" legend="Mode" options={ Array [ @@ -10104,7 +10075,6 @@ exports[`Config panel component Renders config panel with visualization data 1`] @@ -10174,7 +10144,6 @@ exports[`Config panel component Renders config panel with visualization data 1`] { - return vis.editorConfig.panelTabs.map((tab: PanelTabType) => { + return vis.editorconfig.panelTabs.map((tab: PanelTabType) => { const Editor = tab.editor; return { id: tab.id, @@ -200,7 +200,7 @@ export const ConfigPanel = ({ visualizations, setCurVisId, callback, changeIsVal content: , }; }); - }, [vis.editorConfig.panelTabs, params]); + }, [vis.editorconfig.panelTabs, params]); const [currTabId, setCurrTabId] = useState(tabs[0].id); @@ -301,4 +301,4 @@ export const ConfigPanel = ({ visualizations, setCurVisId, callback, changeIsVal ); -}; +}; \ No newline at end of file diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_bar_chart_styles.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_bar_chart_styles.tsx index 2fb6465fc..4016c7b3f 100644 --- a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_bar_chart_styles.tsx +++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_bar_chart_styles.tsx @@ -3,7 +3,7 @@ * SPDX-License-Identifier: Apache-2.0 */ -import React, { useMemo, useCallback } from 'react'; +import React, { useMemo, useCallback, Fragment } from 'react'; import { EuiAccordion, EuiSpacer } from '@elastic/eui'; import { ButtonGroupItem } from './config_button_group'; import { IConfigPanelOptionSection } from '../../../../../../../../common/types/explorer'; @@ -49,10 +49,10 @@ export const ConfigBarChartStyles = ({ const DimensionComponent = schema.component || ButtonGroupItem; const createDimensionComponent = (dimProps) => ( - <> - + + - + ) if (schema.eleType === 'buttons') { params = { @@ -65,14 +65,14 @@ export const ConfigBarChartStyles = ({ return createDimensionComponent(params); } if (schema.eleType === 'input') { - params = { - title: schema.name, - currentValue: vizState[schema.mapTo] || '', - handleInputChange: handleConfigurationChange(schema.mapTo), - vizState, - ...schema.props, - }; - return createDimensionComponent(params); + params = { + title: schema.name, + currentValue: vizState[schema.mapTo] || '', + handleInputChange: handleConfigurationChange(schema.mapTo), + vizState, + ...schema.props, + }; + return createDimensionComponent(params); } if (schema.eleType === 'slider') { params = { 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 cacfe2660..69ee16004 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 @@ -3,7 +3,7 @@ * SPDX-License-Identifier: Apache-2.0 */ -import React, { useMemo, useCallback } from 'react'; +import React, { useMemo, useCallback, Fragment } from 'react'; import { EuiAccordion, EuiSpacer, EuiForm } from '@elastic/eui'; import { PanelItem } from './config_panel_item'; import { SPECTRUM, OPACITY } from '../../../../../../../../common/constants/colors'; @@ -15,8 +15,7 @@ export const ConfigChartOptions = ({ handleConfigChange, }: any) => { const { data } = visualizations; - const { data: vizData = {}, metadata: { fields = [] } = {}, tree_map } = data?.rawVizData; - const { dataConfig = {}, layoutConfig = {} } = visualizations?.data?.userConfigs; + const { metadata: { fields = [] } = {}, tree_map } = data?.rawVizData; const handleConfigurationChange = useCallback( (stateFiledName) => { @@ -126,13 +125,14 @@ export const ConfigChartOptions = ({ selectedAxis: vizState[schema.mapTo] || schema.defaultState, }; } + return ( - <> + - + - + ); }) ); 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 5a8a07999..26ea6995f 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 @@ -90,7 +90,7 @@ export const ColorPalettePicker = ({ Array(numberOfParents) .fill(0) .map((_, i) => ( - + { return ( - <> + @@ -115,7 +115,7 @@ export const ConfigColorTheme = ({ - + ); })} diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_gauge_options.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_gauge_options.tsx index fdb4b824b..2767c4682 100644 --- a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_gauge_options.tsx +++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_gauge_options.tsx @@ -3,7 +3,7 @@ * SPDX-License-Identifier: Apache-2.0 */ -import React, { useMemo, useCallback } from 'react'; +import React, { useMemo, useCallback, Fragment } from 'react'; import { indexOf } from 'lodash'; import { EuiAccordion, EuiSpacer } from '@elastic/eui'; import { PanelItem } from './config_panel_item'; @@ -62,10 +62,10 @@ export const ConfigGaugeValueOptions = ({ ...schema.props, }; return ( - <> - + + - + ); }); }, [schemas, vizState, handleConfigurationChange, dropdownLists]); diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_legend.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_legend.tsx index 7bfc2b10a..f048ab8ad 100644 --- a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_legend.tsx +++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_legend.tsx @@ -3,7 +3,7 @@ * SPDX-License-Identifier: Apache-2.0 */ -import React, { useCallback, useMemo } from 'react'; +import React, { Fragment, useCallback, useMemo } from 'react'; import { EuiAccordion, EuiSpacer } from '@elastic/eui'; import { ButtonGroupItem } from './config_button_group'; import { IConfigPanelOptionSection } from '../../../../../../../../common/types/explorer'; @@ -49,10 +49,10 @@ export const ConfigLegend = ({ schemas, vizState, handleConfigChange }: any) => }; } return ( - <> - + + - + ); }); }, [schemas, vizState, handleConfigurationChange]); diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_line_chart_styles.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_line_chart_styles.tsx index 5d85c64c0..ee66b399f 100644 --- a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_line_chart_styles.tsx +++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_line_chart_styles.tsx @@ -3,7 +3,7 @@ * SPDX-License-Identifier: Apache-2.0 */ -import React, { useMemo, useCallback } from 'react'; +import React, { useMemo, useCallback, Fragment } from 'react'; import { EuiAccordion, EuiSpacer } from '@elastic/eui'; import { ButtonGroupItem } from './config_button_group'; import { IConfigPanelOptionSection } from '../../../../../../../../common/types/explorer'; @@ -94,10 +94,10 @@ export const ConfigLineChartStyles = ({ }; } return ( - <> - + + - + ); }), [currentSchemas, vizState, handleConfigurationChange] diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_thresholds.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_thresholds.tsx index 7c342a027..f294b6870 100644 --- a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_thresholds.tsx +++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_thresholds.tsx @@ -3,7 +3,7 @@ * SPDX-License-Identifier: Apache-2.0 */ -import React, { useCallback } from 'react'; +import React, { Fragment, useCallback } from 'react'; import { EuiButton, EuiAccordion, @@ -98,7 +98,7 @@ export const ConfigThresholds = ({ {!isEmpty(vizState) && vizState.map((thr: ThresholdUnitType) => { return ( - <> + @@ -139,7 +139,7 @@ export const ConfigThresholds = ({ - + ); })} diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_treemap_parents.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_treemap_parents.tsx index 1312c328d..26e6e4a97 100644 --- a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_treemap_parents.tsx +++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_treemap_parents.tsx @@ -3,7 +3,7 @@ * SPDX-License-Identifier: Apache-2.0 */ -import React from 'react'; +import React, { Fragment } from 'react'; import { EuiButton, EuiFormRow, @@ -61,7 +61,7 @@ export const ConfigTreemapParentFields = ({ dropdownList, selectedAxis, onSelect {!isEmpty(selectedAxis) && selectedAxis.map((_, index: number) => { return ( - <> + - + ); })} 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 a2d97c369..97effbcc3 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 @@ -3,7 +3,7 @@ * SPDX-License-Identifier: Apache-2.0 */ -import React, { useMemo, useCallback } from 'react'; +import React, { useMemo, useCallback, Fragment } from 'react'; import { EuiAccordion, EuiSpacer } from '@elastic/eui'; import { PanelItem } from './config_panel_item'; @@ -65,10 +65,10 @@ export const ConfigValueOptions = ({ }; } return ( - <> + - + ); }); }, [schemas, fields, vizState, handleConfigurationChange]); diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_config_panel_item.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_config_panel_item.tsx index ea2e7d26b..2e18ede04 100644 --- a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_config_panel_item.tsx +++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_config_panel_item.tsx @@ -3,7 +3,7 @@ * SPDX-License-Identifier: Apache-2.0 */ -import React, { useEffect, useState, useContext } from 'react'; +import React, { useEffect, useState, useContext, Fragment } from 'react'; import { EuiTitle, EuiComboBox, @@ -192,7 +192,7 @@ export const DataConfigPanelItem = ({ fieldOptionList, visualizations }: any) => const getCommonUI = (lists, sectionName: string) => lists && lists.map((singleField, index: number) => ( - <> +
{sectionName === 'dimensions' && visualizations.vis.name === visChartTypes.HeatMap && ( @@ -283,7 +283,7 @@ export const DataConfigPanelItem = ({ fieldOptionList, visualizations }: any) =>
- + )); const getNumberField = (type: string) => ( diff --git a/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/bar.test.tsx.snap b/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/bar.test.tsx.snap index f27d2049a..a0032623c 100644 --- a/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/bar.test.tsx.snap +++ b/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/bar.test.tsx.snap @@ -202,11 +202,11 @@ exports[`Bar component Renders bar component 1`] = ` "userConfigs": Object {}, }, "vis": Object { - "barWidth": 0.97, + "barwidth": 0.97, "category": "Visualizations", - "categoryAxis": "xaxis", + "categoryaxis": "xaxis", "component": [Function], - "editorConfig": Object { + "editorconfig": Object { "panelTabs": Array [ Object { "editor": [Function], @@ -430,26 +430,26 @@ exports[`Bar component Renders bar component 1`] = ` }, ], }, - "fillOpacity": 80, - "fullLabel": "Bar", - "groupWidth": 0.7, + "fillopacity": 80, + "fulllabel": "Bar", + "groupwidth": 0.7, "icon": [Function], - "iconType": "visBarVerticalStacked", + "icontype": "visBarVerticalStacked", "id": "bar", "label": "Bar", - "labelAngle": 0, - "legendPosition": "v", - "lineWidth": 1, + "labelangle": 0, + "legendposition": "v", + "linewidth": 1, "mode": "group", "name": "bar", "orientation": "v", "selection": Object { "dataLoss": "nothing", }, - "seriesAxis": "yaxis", - "showLegend": "show", + "seriesaxis": "yaxis", + "showlegend": "show", "type": "bar", - "visConfig": Object { + "visconfig": Object { "config": Object { "displaylogo": false, "responsive": true, diff --git a/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/heatmap.test.tsx.snap b/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/heatmap.test.tsx.snap index debc9d64e..360a09c43 100644 --- a/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/heatmap.test.tsx.snap +++ b/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/heatmap.test.tsx.snap @@ -202,11 +202,11 @@ exports[`Heatmap component Renders heatmap component 1`] = ` "userConfigs": Object {}, }, "vis": Object { - "barWidth": 0.97, + "barwidth": 0.97, "category": "Visualizations", - "categoryAxis": "xaxis", + "categoryaxis": "xaxis", "component": [Function], - "editorConfig": Object { + "editorconfig": Object { "panelTabs": Array [ Object { "editor": [Function], @@ -430,26 +430,26 @@ exports[`Heatmap component Renders heatmap component 1`] = ` }, ], }, - "fillOpacity": 80, - "fullLabel": "Bar", - "groupWidth": 0.7, + "fillopacity": 80, + "fulllabel": "Bar", + "groupwidth": 0.7, "icon": [Function], - "iconType": "visBarVerticalStacked", + "icontype": "visBarVerticalStacked", "id": "bar", "label": "Bar", - "labelAngle": 0, - "legendPosition": "v", - "lineWidth": 1, + "labelangle": 0, + "legendposition": "v", + "linewidth": 1, "mode": "group", "name": "bar", "orientation": "v", "selection": Object { "dataLoss": "nothing", }, - "seriesAxis": "yaxis", - "showLegend": "show", + "seriesaxis": "yaxis", + "showlegend": "show", "type": "bar", - "visConfig": Object { + "visconfig": Object { "config": Object { "displaylogo": false, "responsive": true, diff --git a/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/histogram.test.tsx.snap b/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/histogram.test.tsx.snap index 321db5d7d..0d0497629 100644 --- a/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/histogram.test.tsx.snap +++ b/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/histogram.test.tsx.snap @@ -202,11 +202,11 @@ exports[`Histogram component Renders histogram component 1`] = ` "userConfigs": Object {}, }, "vis": Object { - "barWidth": 0.97, + "barwidth": 0.97, "category": "Visualizations", - "categoryAxis": "xaxis", + "categoryaxis": "xaxis", "component": [Function], - "editorConfig": Object { + "editorconfig": Object { "panelTabs": Array [ Object { "editor": [Function], @@ -430,26 +430,26 @@ exports[`Histogram component Renders histogram component 1`] = ` }, ], }, - "fillOpacity": 80, - "fullLabel": "Bar", - "groupWidth": 0.7, + "fillopacity": 80, + "fulllabel": "Bar", + "groupwidth": 0.7, "icon": [Function], - "iconType": "visBarVerticalStacked", + "icontype": "visBarVerticalStacked", "id": "bar", "label": "Bar", - "labelAngle": 0, - "legendPosition": "v", - "lineWidth": 1, + "labelangle": 0, + "legendposition": "v", + "linewidth": 1, "mode": "group", "name": "bar", "orientation": "v", "selection": Object { "dataLoss": "nothing", }, - "seriesAxis": "yaxis", - "showLegend": "show", + "seriesaxis": "yaxis", + "showlegend": "show", "type": "bar", - "visConfig": Object { + "visconfig": Object { "config": Object { "displaylogo": false, "responsive": true, diff --git a/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/line.test.tsx.snap b/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/line.test.tsx.snap index 24cba00da..0f99a6be5 100644 --- a/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/line.test.tsx.snap +++ b/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/line.test.tsx.snap @@ -202,11 +202,11 @@ exports[`Line component Renders line component 1`] = ` "userConfigs": Object {}, }, "vis": Object { - "barWidth": 0.97, + "barwidth": 0.97, "category": "Visualizations", - "categoryAxis": "xaxis", + "categoryaxis": "xaxis", "component": [Function], - "editorConfig": Object { + "editorconfig": Object { "panelTabs": Array [ Object { "editor": [Function], @@ -430,26 +430,26 @@ exports[`Line component Renders line component 1`] = ` }, ], }, - "fillOpacity": 80, - "fullLabel": "Bar", - "groupWidth": 0.7, + "fillopacity": 80, + "fulllabel": "Bar", + "groupwidth": 0.7, "icon": [Function], - "iconType": "visBarVerticalStacked", + "icontype": "visBarVerticalStacked", "id": "bar", "label": "Bar", - "labelAngle": 0, - "legendPosition": "v", - "lineWidth": 1, + "labelangle": 0, + "legendposition": "v", + "linewidth": 1, "mode": "group", "name": "bar", "orientation": "v", "selection": Object { "dataLoss": "nothing", }, - "seriesAxis": "yaxis", - "showLegend": "show", + "seriesaxis": "yaxis", + "showlegend": "show", "type": "bar", - "visConfig": Object { + "visconfig": Object { "config": Object { "displaylogo": false, "responsive": true, diff --git a/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/pie.test.tsx.snap b/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/pie.test.tsx.snap index 757f58b07..30c56c35e 100644 --- a/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/pie.test.tsx.snap +++ b/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/pie.test.tsx.snap @@ -202,11 +202,11 @@ exports[`Pie component Renders pie component 1`] = ` "userConfigs": Object {}, }, "vis": Object { - "barWidth": 0.97, + "barwidth": 0.97, "category": "Visualizations", - "categoryAxis": "xaxis", + "categoryaxis": "xaxis", "component": [Function], - "editorConfig": Object { + "editorconfig": Object { "panelTabs": Array [ Object { "editor": [Function], @@ -430,26 +430,26 @@ exports[`Pie component Renders pie component 1`] = ` }, ], }, - "fillOpacity": 80, - "fullLabel": "Bar", - "groupWidth": 0.7, + "fillopacity": 80, + "fulllabel": "Bar", + "groupwidth": 0.7, "icon": [Function], - "iconType": "visBarVerticalStacked", + "icontype": "visBarVerticalStacked", "id": "bar", "label": "Bar", - "labelAngle": 0, - "legendPosition": "v", - "lineWidth": 1, + "labelangle": 0, + "legendposition": "v", + "linewidth": 1, "mode": "group", "name": "bar", "orientation": "v", "selection": Object { "dataLoss": "nothing", }, - "seriesAxis": "yaxis", - "showLegend": "show", + "seriesaxis": "yaxis", + "showlegend": "show", "type": "bar", - "visConfig": Object { + "visconfig": Object { "config": Object { "displaylogo": false, "responsive": true, diff --git a/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/text.test.tsx.snap b/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/text.test.tsx.snap index c9f1aa121..b98b6e598 100644 --- a/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/text.test.tsx.snap +++ b/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/text.test.tsx.snap @@ -185,11 +185,11 @@ exports[`Text component Renders text component 1`] = ` "userConfigs": Object {}, }, "vis": Object { - "barWidth": 0.97, + "barwidth": 0.97, "category": "Visualizations", - "categoryAxis": "xaxis", + "categoryaxis": "xaxis", "component": [Function], - "editorConfig": Object { + "editorconfig": Object { "panelTabs": Array [ Object { "editor": [Function], @@ -413,26 +413,26 @@ exports[`Text component Renders text component 1`] = ` }, ], }, - "fillOpacity": 80, - "fullLabel": "Bar", - "groupWidth": 0.7, + "fillopacity": 80, + "fulllabel": "Bar", + "groupwidth": 0.7, "icon": [Function], - "iconType": "visBarVerticalStacked", + "icontype": "visBarVerticalStacked", "id": "bar", "label": "Bar", - "labelAngle": 0, - "legendPosition": "v", - "lineWidth": 1, + "labelangle": 0, + "legendposition": "v", + "linewidth": 1, "mode": "group", "name": "bar", "orientation": "v", "selection": Object { "dataLoss": "nothing", }, - "seriesAxis": "yaxis", - "showLegend": "show", + "seriesaxis": "yaxis", + "showlegend": "show", "type": "bar", - "visConfig": Object { + "visconfig": Object { "config": Object { "displaylogo": false, "responsive": true, 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 46538a490..1caf2f8b2 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 @@ -202,11 +202,11 @@ exports[`Treemap component Renders treemap component 1`] = ` "userConfigs": Object {}, }, "vis": Object { - "barWidth": 0.97, + "barwidth": 0.97, "category": "Visualizations", - "categoryAxis": "xaxis", + "categoryaxis": "xaxis", "component": [Function], - "editorConfig": Object { + "editorconfig": Object { "panelTabs": Array [ Object { "editor": [Function], @@ -430,26 +430,26 @@ exports[`Treemap component Renders treemap component 1`] = ` }, ], }, - "fillOpacity": 80, - "fullLabel": "Bar", - "groupWidth": 0.7, + "fillopacity": 80, + "fulllabel": "Bar", + "groupwidth": 0.7, "icon": [Function], - "iconType": "visBarVerticalStacked", + "icontype": "visBarVerticalStacked", "id": "bar", "label": "Bar", - "labelAngle": 0, - "legendPosition": "v", - "lineWidth": 1, + "labelangle": 0, + "legendposition": "v", + "linewidth": 1, "mode": "group", "name": "bar", "orientation": "v", "selection": Object { "dataLoss": "nothing", }, - "seriesAxis": "yaxis", - "showLegend": "show", + "seriesaxis": "yaxis", + "showlegend": "show", "type": "bar", - "visConfig": Object { + "visconfig": Object { "config": Object { "displaylogo": false, "responsive": true, diff --git a/dashboards-observability/public/components/visualizations/charts/bar/bar.tsx b/dashboards-observability/public/components/visualizations/charts/bar/bar.tsx index c28433922..3cb27cf43 100644 --- a/dashboards-observability/public/components/visualizations/charts/bar/bar.tsx +++ b/dashboards-observability/public/components/visualizations/charts/bar/bar.tsx @@ -3,7 +3,7 @@ * SPDX-License-Identifier: Apache-2.0 */ -import React from 'react'; +import React, { useMemo } from 'react'; import { isEmpty, last, take } from 'lodash'; import { Plt } from '../../plotly/plot'; import { LONG_CHART_COLOR, PLOTLY_COLOR } from '../../../../../common/constants/shared'; @@ -41,21 +41,21 @@ export const Bar = ({ visualizations, layout, config }: any) => { valueSeries = isVertical ? [...yaxis] : [...xaxis]; valueForXSeries = isVertical ? [...xaxis] : [...yaxis]; } else { - return ; + return ; } - const tickAngle = dataConfig?.chartStyles?.rotateBarLabels || vis.labelAngle; - const lineWidth = dataConfig?.chartStyles?.lineWidth || vis.lineWidth; + const tickAngle = dataConfig?.chartStyles?.rotateBarLabels || vis.labelangle; + const lineWidth = dataConfig?.chartStyles?.lineWidth || vis.linewidth; const fillOpacity = dataConfig?.chartStyles?.fillOpacity !== undefined ? dataConfig?.chartStyles?.fillOpacity / FILLOPACITY_DIV_FACTOR - : vis.fillOpacity / FILLOPACITY_DIV_FACTOR; - const barWidth = 1 - (dataConfig?.chartStyles?.barWidth || vis.barWidth); - const groupWidth = 1 - (dataConfig?.chartStyles?.groupWidth || vis.groupWidth); + : vis.fillopacity / FILLOPACITY_DIV_FACTOR; + const barWidth = 1 - (dataConfig?.chartStyles?.barWidth || vis.barwidth); + const groupWidth = 1 - (dataConfig?.chartStyles?.groupWidth || vis.groupwidth); const showLegend = !( - dataConfig?.legend?.showLegend && dataConfig.legend.showLegend !== vis.showLegend + dataConfig?.legend?.showLegend && dataConfig.legend.showLegend !== vis.showlegend ); - const legendPosition = dataConfig?.legend?.position || vis.legendPosition; + const legendPosition = dataConfig?.legend?.position || vis.legendposition; visualizations.data?.rawVizData?.dataConfig?.metrics ? visualizations.data?.rawVizData?.dataConfig?.metrics : []; @@ -219,10 +219,10 @@ export const Bar = ({ visualizations, layout, config }: any) => { mergedLayout.shapes = [...mapToLine(thresholds, { dash: 'dashdot' }), ...mapToLine(levels, {})]; bars = [...bars, thresholdTraces]; } - const mergedConfigs = { + const mergedConfigs = useMemo(() => ({ ...config, ...(layoutConfig.config && layoutConfig.config), - }; + }), [config, layoutConfig.config]); return ; }; diff --git a/dashboards-observability/public/components/visualizations/charts/bar/bar_type.ts b/dashboards-observability/public/components/visualizations/charts/bar/bar_type.ts index 584568a45..e3f0f038d 100644 --- a/dashboards-observability/public/components/visualizations/charts/bar/bar_type.ts +++ b/dashboards-observability/public/components/visualizations/charts/bar/bar_type.ts @@ -8,7 +8,6 @@ import { getPlotlySharedConfigs, getPlotlyCategory } from '../shared/shared_conf import { LensIconChartBar } from '../../assets/chart_bar'; import { VizDataPanel } from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/default_vis_editor'; import { ConfigEditor } from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/json_editor'; -import { ConfigValueOptions } from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/config_controls'; import { ConfigAvailability } from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_availability'; import { ButtonGroupItem } from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_button_group'; import { ConfigBarChartStyles } from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_bar_chart_styles'; @@ -29,26 +28,26 @@ export const createBarTypeDefinition = (params: any) => ({ type: 'bar', id: 'bar', label: 'Bar', - fullLabel: 'Bar', - iconType: 'visBarVerticalStacked', + fulllabel: 'Bar', + icontype: 'visBarVerticalStacked', selection: { dataLoss: 'nothing', }, category: VIS_CATEGORY.BASICS, icon: LensIconChartBar, - categoryAxis: 'xaxis', - seriesAxis: 'yaxis', + categoryaxis: 'xaxis', + seriesaxis: 'yaxis', orientation: 'v', mode: 'group', - labelAngle: 0, - lineWidth: 1, - fillOpacity: 80, - groupWidth: 0.7, - barWidth: 0.97, - showLegend: ShowLegend, - legendPosition: LegendPosition, + labelangle: 0, + linewidth: 1, + fillopacity: 80, + groupwidth: 0.7, + barwidth: 0.97, + showlegend: ShowLegend, + legendposition: LegendPosition, component: Bar, - editorConfig: { + editorconfig: { panelTabs: [ { id: 'data-panel', @@ -213,7 +212,7 @@ export const createBarTypeDefinition = (params: any) => ({ }, ], }, - visConfig: { + visconfig: { layout: { ...sharedConfigs.layout, }, diff --git a/dashboards-observability/public/components/visualizations/charts/bar/horizontal_bar_type.ts b/dashboards-observability/public/components/visualizations/charts/bar/horizontal_bar_type.ts index cbc25a1dc..9e96e1476 100644 --- a/dashboards-observability/public/components/visualizations/charts/bar/horizontal_bar_type.ts +++ b/dashboards-observability/public/components/visualizations/charts/bar/horizontal_bar_type.ts @@ -15,18 +15,18 @@ export const createHorizontalBarTypeDefinition = (params: BarTypeParams = {}) => name: 'horizontal_bar', type: 'bar', label: 'Bar', - fullLabel: 'Bar', - iconType: 'visBarVerticalStacked', + fulllabel: 'Bar', + icontype: 'visBarVerticalStacked', selection: { dataLoss: 'nothing', }, category: VIS_CATEGORY.BASICS, icon: LensIconChartBar, - categoryAxis: 'xaxis', - seriesAxis: 'yaxis', + categoryaxis: 'xaxis', + seriesaxis: 'yaxis', orientation: 'h', component: Bar, - editorConfig: { + editorconfig: { panelTabs: [ { id: 'data-panel', @@ -99,7 +99,7 @@ export const createHorizontalBarTypeDefinition = (params: BarTypeParams = {}) => }, ], }, - visConfig: { + visconfig: { layout: { ...sharedConfigs.layout, }, diff --git a/dashboards-observability/public/components/visualizations/charts/bubble/bubble_type.ts b/dashboards-observability/public/components/visualizations/charts/bubble/bubble_type.ts index 091298ce5..ed77e934d 100644 --- a/dashboards-observability/public/components/visualizations/charts/bubble/bubble_type.ts +++ b/dashboards-observability/public/components/visualizations/charts/bubble/bubble_type.ts @@ -18,12 +18,12 @@ export const createBubbleVisDefinition = () => ({ type: 'bubble', id: 'bubble', label: 'Bubble', - fullLabel: 'Bubble', + fulllabel: 'Bubble', category: VIS_CATEGORY.BASICS, selection: { dataLoss: 'nothing', }, - editorConfig: { + editorconfig: { panelTabs: [ { id: 'data-panel', @@ -63,7 +63,7 @@ export const createBubbleVisDefinition = () => ({ ], }, icon: LensIconChartPie, - visConfig: { + visconfig: { layout: { ...sharedConfigs.layout, }, diff --git a/dashboards-observability/public/components/visualizations/charts/data_table/data_table_type.ts b/dashboards-observability/public/components/visualizations/charts/data_table/data_table_type.ts index e3f03764a..d43b78f31 100644 --- a/dashboards-observability/public/components/visualizations/charts/data_table/data_table_type.ts +++ b/dashboards-observability/public/components/visualizations/charts/data_table/data_table_type.ts @@ -14,14 +14,14 @@ export const createDatatableTypeDefinition = (params: any = {}) => ({ type: 'data_table', id: 'data_table', label: 'Data Table', - fullLabel: 'Data Table', - iconType: 'visTable', + fulllabel: 'Data Table', + icontype: 'visTable', category: VIS_CATEGORY.BASICS, selection: { dataLoss: 'nothing', }, icon: LensIconChartDatatable, - editorConfig: { + editorconfig: { editor: null, schemas: [ { diff --git a/dashboards-observability/public/components/visualizations/charts/financial/gauge/gauge.tsx b/dashboards-observability/public/components/visualizations/charts/financial/gauge/gauge.tsx index ac05f6642..35fd54798 100644 --- a/dashboards-observability/public/components/visualizations/charts/financial/gauge/gauge.tsx +++ b/dashboards-observability/public/components/visualizations/charts/financial/gauge/gauge.tsx @@ -47,7 +47,7 @@ export const Gauge = ({ visualizations, layout, config }: any) => { const isEmptyPlot = !metricsLength; - if (isEmptyPlot) return ; + if (isEmptyPlot) return ; const gaugeData: Plotly.Data[] = useMemo(() => { let calculatedGaugeData: Plotly.Data[] = []; diff --git a/dashboards-observability/public/components/visualizations/charts/financial/gauge/gauge_type.ts b/dashboards-observability/public/components/visualizations/charts/financial/gauge/gauge_type.ts index 4b80cf307..fe4ef3b01 100644 --- a/dashboards-observability/public/components/visualizations/charts/financial/gauge/gauge_type.ts +++ b/dashboards-observability/public/components/visualizations/charts/financial/gauge/gauge_type.ts @@ -26,15 +26,15 @@ export const createGaugeTypeDefinition = (params: any = {}) => ({ type: 'indicator', id: 'gauge', label: 'Gauge', - fullLabel: 'Gauge', - iconType: 'visGauge', + fulllabel: 'Gauge', + icontype: 'visGauge', category: VIS_CATEGORY.BASICS, selection: { dataLoss: 'nothing', }, icon: LensIconChartLine, - valueSeries: 'yaxis', - editorConfig: { + valueseries: 'yaxis', + editorconfig: { panelTabs: [ { id: 'data-panel', @@ -130,7 +130,7 @@ export const createGaugeTypeDefinition = (params: any = {}) => ({ }, ], }, - visConfig: { + visconfig: { layout: { ...sharedConfigs.layout, }, diff --git a/dashboards-observability/public/components/visualizations/charts/histogram/histogram.tsx b/dashboards-observability/public/components/visualizations/charts/histogram/histogram.tsx index 99686e60b..e4a78a183 100644 --- a/dashboards-observability/public/components/visualizations/charts/histogram/histogram.tsx +++ b/dashboards-observability/public/components/visualizations/charts/histogram/histogram.tsx @@ -3,13 +3,14 @@ * SPDX-License-Identifier: Apache-2.0 */ -import React from 'react'; +import React, { useMemo } from 'react'; import { take, isEmpty, last } from 'lodash'; import { Plt } from '../../plotly/plot'; import { DefaultChartStyles, PLOTLY_COLOR, FILLOPACITY_DIV_FACTOR, + visChartTypes, } from '../../../../../common/constants/shared'; import { hexToRgb } from '../../../../components/event_analytics/utils/utils'; @@ -50,21 +51,20 @@ export const Histogram = ({ visualizations, layout, config }: any) => { return hexToRgb(newColor ? newColor.color : PLOTLY_COLOR[index % PLOTLY_COLOR.length], opacity); }; - const hisValues = valueSeries.map((field: any, index: number) => { - return { - x: data[field.name], - type: 'histogram', - name: field.name, - marker: { - color: selectedColorTheme(field, index, fillOpacity), - line: { - color: selectedColorTheme(field, index), - width: lineWidth, - }, + const hisValues = useMemo(() => valueSeries.map((field: any, index: number) => ({ + x: data[field.name], + type: visChartTypes.Histogram, + name: field.name, + marker: { + color: selectedColorTheme(field, index, fillOpacity), + line: { + color: selectedColorTheme(field, index), + width: lineWidth, }, - xbins: !isEmpty(xbins) ? xbins : undefined, - }; - }); + }, + xbins: !isEmpty(xbins) ? xbins : undefined, + })) + , [valueSeries, data, fillOpacity, lineWidth, xbins, selectedColorTheme]); const mergedLayout = { ...layout, @@ -78,10 +78,10 @@ export const Histogram = ({ visualizations, layout, config }: any) => { showlegend: showLegend, }; - const mergedConfigs = { + const mergedConfigs = useMemo(() => ({ ...config, ...(layoutConfig.config && layoutConfig.config), - }; + }), [config, layoutConfig.config]); return ; }; diff --git a/dashboards-observability/public/components/visualizations/charts/histogram/histogram_type.ts b/dashboards-observability/public/components/visualizations/charts/histogram/histogram_type.ts index dccaf45d7..794be2a94 100644 --- a/dashboards-observability/public/components/visualizations/charts/histogram/histogram_type.ts +++ b/dashboards-observability/public/components/visualizations/charts/histogram/histogram_type.ts @@ -12,7 +12,6 @@ import { ConfigLegend, SliderConfig, ConfigColorTheme, - ConfigThresholds, } from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/config_controls'; import { DefaultChartStyles } from '../../../../../common/constants/shared'; @@ -25,14 +24,14 @@ export const createHistogramVisDefinition = (params = {}) => ({ type: 'histogram', id: 'histogram', label: 'Histogram', - fullLabel: 'Histogram', + fulllabel: 'Histogram', category: VIS_CATEGORY.BASICS, selection: { dataLoss: 'nothing', }, - valueSeries: 'yaxis', - iconType: 'visArea', - editorConfig: { + valueseries: 'yaxis', + icontype: 'visArea', + editorconfig: { panelTabs: [ { id: 'data-panel', @@ -118,7 +117,7 @@ export const createHistogramVisDefinition = (params = {}) => ({ }, ], }, - visConfig: { + visconfig: { layout: { ...sharedConfigs.layout, }, diff --git a/dashboards-observability/public/components/visualizations/charts/lines/line.tsx b/dashboards-observability/public/components/visualizations/charts/lines/line.tsx index c2429b14f..fe6880b8f 100644 --- a/dashboards-observability/public/components/visualizations/charts/lines/line.tsx +++ b/dashboards-observability/public/components/visualizations/charts/lines/line.tsx @@ -69,7 +69,7 @@ export const Line = ({ visualizations, layout, config }: any) => { PLOTLY_COLOR[index % PLOTLY_COLOR.length]; if (isEmpty(xaxis) || isEmpty(yaxis)) - return ; + return ; let valueSeries; if (!isEmpty(xaxis) && !isEmpty(yaxis)) { @@ -211,14 +211,14 @@ export const Line = ({ visualizations, layout, config }: any) => { return [mergedLayout, calculatedLineValues]; }, [data, fields, lastIndex, layout, layoutConfig, xaxis, yaxis, mode, valueSeries]); - const mergedConfigs = { + const mergedConfigs = useMemo(() => ({ ...config, ...(layoutConfig.config && layoutConfig.config), - }; + }), [config, layoutConfig.config]); return isDimensionTimestamp ? ( ) : ( - + ); }; diff --git a/dashboards-observability/public/components/visualizations/charts/lines/line_type.ts b/dashboards-observability/public/components/visualizations/charts/lines/line_type.ts index 9413b0322..04d6b3cdb 100644 --- a/dashboards-observability/public/components/visualizations/charts/lines/line_type.ts +++ b/dashboards-observability/public/components/visualizations/charts/lines/line_type.ts @@ -38,16 +38,16 @@ export const createLineTypeDefinition = (params: any = {}) => ({ type: 'line', id: 'line', label: 'Time series', - fullLabel: 'Time series', - iconType: 'visLine', + fulllabel: 'Time series', + icontype: 'visLine', category: VIS_CATEGORY.BASICS, selection: { dataLoss: 'nothing', }, icon: LensIconChartLine, - categoryAxis: 'xaxis', - seriesAxis: 'yaxis', - editorConfig: { + categoryaxis: 'xaxis', + seriesaxis: 'yaxis', + editorconfig: { panelTabs: [ { id: 'data-panel', @@ -219,7 +219,7 @@ export const createLineTypeDefinition = (params: any = {}) => ({ }, ], }, - visConfig: { + visconfig: { layout: { ...sharedConfigs.layout, ...{ diff --git a/dashboards-observability/public/components/visualizations/charts/maps/heatmap.tsx b/dashboards-observability/public/components/visualizations/charts/maps/heatmap.tsx index 7eea24a4e..96f8aa05a 100644 --- a/dashboards-observability/public/components/visualizations/charts/maps/heatmap.tsx +++ b/dashboards-observability/public/components/visualizations/charts/maps/heatmap.tsx @@ -23,11 +23,9 @@ export const HeatMap = ({ visualizations, layout, config }: any) => { data, metadata: { fields }, } = visualizations.data.rawVizData; - const { defaultAxes } = visualizations.data; const { dataConfig = {}, layoutConfig = {} } = visualizations?.data?.userConfigs; - const yaxis = defaultAxes.yaxis ?? []; - if (fields.length < 3) return ; + if (fields.length < 3) return ; const xaxisField = visualizations.data?.rawVizData?.heatmap?.dataConfig?.dimensions[0]; const yaxisField = visualizations.data?.rawVizData?.heatmap?.dataConfig?.dimensions[1]; @@ -42,7 +40,7 @@ export const HeatMap = ({ visualizations, layout, config }: any) => { isEmpty(data[zMetrics.label]) || indexOf(NUMERICAL_FIELDS, zMetrics.type) < 0 ) - return ; + return ; const uniqueYaxis = uniq(data[yaxisField.label]); const uniqueXaxis = uniq(data[xaxisField.label]); @@ -124,10 +122,11 @@ export const HeatMap = ({ visualizations, layout, config }: any) => { title: dataConfig?.panelOptions?.title || layoutConfig.layout?.title || '', }; - const mergedConfigs = { + + const mergedConfigs = useMemo(() => ({ ...config, ...(layoutConfig.config && layoutConfig.config), - }; + }), [config, layoutConfig.config]); return ; }; diff --git a/dashboards-observability/public/components/visualizations/charts/maps/heatmap_type.ts b/dashboards-observability/public/components/visualizations/charts/maps/heatmap_type.ts index 74aa9948e..9c568fe97 100644 --- a/dashboards-observability/public/components/visualizations/charts/maps/heatmap_type.ts +++ b/dashboards-observability/public/components/visualizations/charts/maps/heatmap_type.ts @@ -30,14 +30,14 @@ export const createMapsVisDefinition = () => ({ type: 'heatmap', id: 'heatmap', label: 'Heatmap', - fullLabel: 'Hubble', - iconType: 'heatmap', + fulllabel: 'Hubble', + icontype: 'heatmap', category: VIS_CATEGORY.BASICS, selection: { dataLoss: 'nothing', }, icon: LensIconChartPie, - editorConfig: { + editorconfig: { panelTabs: [ { id: 'data-panel', @@ -114,7 +114,7 @@ export const createMapsVisDefinition = () => ({ }, ], }, - visConfig: { + visconfig: { layout: { ...sharedConfigs.layout, ...{ 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 57d14cc7b..55b495a9c 100644 --- a/dashboards-observability/public/components/visualizations/charts/maps/treemap_type.ts +++ b/dashboards-observability/public/components/visualizations/charts/maps/treemap_type.ts @@ -30,18 +30,18 @@ export const createTreeMapDefinition = (params: BarTypeParams = {}) => ({ type: 'tree_map', id: 'tree_map', label: 'Tree Map', - fullLabel: 'Tree Map', + fulllabel: 'Tree Map', selection: { dataLoss: 'nothing', }, category: VIS_CATEGORY.BASICS, - iconType: 'heatmap', + icontype: 'heatmap', icon: LensIconChartBar, - categoryAxis: 'xaxis', - seriesAxis: 'yaxis', + categoryaxis: 'xaxis', + seriesaxis: 'yaxis', orientation: 'v', component: TreeMap, - editorConfig: { + editorconfig: { panelTabs: [ { id: 'data-panel', @@ -136,7 +136,7 @@ export const createTreeMapDefinition = (params: BarTypeParams = {}) => ({ }, ], }, - visConfig: { + visconfig: { layout: { ...sharedConfigs.layout, }, diff --git a/dashboards-observability/public/components/visualizations/charts/maps/treemaps.tsx b/dashboards-observability/public/components/visualizations/charts/maps/treemaps.tsx index 0572d9563..39adf9390 100644 --- a/dashboards-observability/public/components/visualizations/charts/maps/treemaps.tsx +++ b/dashboards-observability/public/components/visualizations/charts/maps/treemaps.tsx @@ -68,7 +68,7 @@ export const TreeMap = ({ visualizations, layout, config }: any) => { indexOf(NUMERICAL_FIELDS, valueField.type) < 0 || areParentFieldsInvalid ) - return ; + return ; const [treemapData, mergedLayout] = useMemo(() => { let labelsArray: string[] = [], diff --git a/dashboards-observability/public/components/visualizations/charts/pie/pie.tsx b/dashboards-observability/public/components/visualizations/charts/pie/pie.tsx index 3a1856361..2e32281d1 100644 --- a/dashboards-observability/public/components/visualizations/charts/pie/pie.tsx +++ b/dashboards-observability/public/components/visualizations/charts/pie/pie.tsx @@ -3,7 +3,7 @@ * SPDX-License-Identifier: Apache-2.0 */ -import React from 'react'; +import React, { useMemo } from 'react'; import { take, isEmpty } from 'lodash'; import { Plt } from '../../plotly/plot'; import { DEFAULT_PALETTE, HEX_CONTRAST_COLOR } from '../../../../../common/constants/colors'; @@ -17,42 +17,42 @@ export const Pie = ({ visualizations, layout, config }: any) => { } = visualizations.data.rawVizData; const { defaultAxes } = visualizations.data; const { dataConfig = {}, layoutConfig = {} } = visualizations?.data?.userConfigs; - const xaxis = visualizations.data?.rawVizData?.pie?.dataConfig?.dimensions - ? visualizations.data?.rawVizData?.pie?.dataConfig?.dimensions.filter((item) => item.label) + const xaxis = visualizations.data?.rawVizData?.pie?.dataConfig?.dimensions + ? visualizations.data?.rawVizData?.pie?.dataConfig?.dimensions.filter((item) => item.label) : []; const yaxis = visualizations.data?.rawVizData?.pie?.dataConfig?.metrics - ? visualizations.data?.rawVizData?.pie?.dataConfig?.metrics.filter((item) => item.label) + ? visualizations.data?.rawVizData?.pie?.dataConfig?.metrics.filter((item) => item.label) : []; const type = dataConfig?.chartStyles?.mode ? dataConfig?.chartStyles?.mode[0]?.modeId : 'pie'; const lastIndex = fields.length - 1; const colorTheme = dataConfig?.chartStyles?.colorTheme ? dataConfig?.chartStyles?.colorTheme : { name: DEFAULT_PALETTE }; - const showLegend = dataConfig?.legend?.showLegend === 'hidden' ? false : vis.showLegend; - const legendPosition = dataConfig?.legend?.position || vis.legendPosition; + const showLegend = dataConfig?.legend?.showLegend === 'hidden' ? false : vis.showlegend; + const legendPosition = dataConfig?.legend?.position || vis.legendposition; const legendSize = dataConfig?.legend?.size || vis.legendSize; const labelSize = dataConfig?.chartStyles?.labelSize || vis.labelSize; if (isEmpty(xaxis) || isEmpty(yaxis)) - return ; + return ; - let valueSeries; - if (!isEmpty(xaxis) && !isEmpty(yaxis)) { - valueSeries = [...yaxis]; - } else { - valueSeries = defaultAxes.yaxis || take(fields, lastIndex > 0 ? lastIndex : 1); - } + let valueSeries; + if (!isEmpty(xaxis) && !isEmpty(yaxis)) { + valueSeries = [...yaxis]; + } else { + valueSeries = defaultAxes.yaxis || take(fields, lastIndex > 0 ? lastIndex : 1); + } const invertHex = (hex: string) => (Number(`0x1${hex}`) ^ HEX_CONTRAST_COLOR).toString(16).substr(1).toUpperCase(); - const createLegendLabels = (dimLabels: string[], xaxisLables:string[] ) => { - return dimLabels.map((label:string, index:number) => { + const createLegendLabels = (dimLabels: string[], xaxisLables: string[]) => { + return dimLabels.map((label: string, index: number) => { return [xaxisLables[index], label].join(','); }); }; - - const labelsOfXAxis = () => { + + const labelsOfXAxis = useMemo(() => { let legendLabels = []; if (xaxis.length > 0) { let dimLabelsArray = data[xaxis[0].label]; @@ -64,23 +64,24 @@ export const Pie = ({ visualizations, layout, config }: any) => { legendLabels = data[fields[lastIndex].name]; } return legendLabels; - }; + }, [xaxis, data, fields, createLegendLabels]); - const pies = valueSeries.map((field: any, index) => { + const hexColor = invertHex(colorTheme); + const pies = useMemo(() => valueSeries.map((field: any, index: number) => { const marker = colorTheme.name !== DEFAULT_PALETTE ? { - marker: { - colors: [...Array(data[field.name].length).fill(colorTheme.childColor)], - line: { - color: invertHex(colorTheme), - width: 1, - }, + marker: { + colors: [...Array(data[field.name].length).fill(colorTheme.childColor)], + line: { + color: hexColor, + width: 1, }, - } + }, + } : undefined; return { - labels: labelsOfXAxis(), + labels: labelsOfXAxis, values: data[field.label], type: 'pie', name: field.name, @@ -98,11 +99,12 @@ export const Pie = ({ visualizations, layout, config }: any) => { size: labelSize, }, }; - }); + }) + , [valueSeries, valueSeries, data, labelSize, labelsOfXAxis, colorTheme]); const isAtleastOneFullRow = Math.floor(valueSeries.length / 3) > 0; - const mergedLayout = { + const mergedLayout = useMemo(() => ({ grid: { rows: Math.floor(valueSeries.length / 3) + 1, columns: isAtleastOneFullRow ? 3 : valueSeries.length, @@ -116,12 +118,22 @@ export const Pie = ({ visualizations, layout, config }: any) => { font: { size: legendSize }, }, showlegend: showLegend, - }; + }), + [ + valueSeries, + isAtleastOneFullRow, + layoutConfig.layout, + dataConfig?.panelOptions?.title, + layoutConfig.layout?.title, + layout.legend, + legendPosition, + legendSize + ]); - const mergedConfigs = { + const mergedConfigs = useMemo(() => ({ ...config, ...(layoutConfig.config && layoutConfig.config), - }; + }), [config, layoutConfig.config]); return ; }; diff --git a/dashboards-observability/public/components/visualizations/charts/pie/pie_type.ts b/dashboards-observability/public/components/visualizations/charts/pie/pie_type.ts index 60a765cd8..7720bbc60 100644 --- a/dashboards-observability/public/components/visualizations/charts/pie/pie_type.ts +++ b/dashboards-observability/public/components/visualizations/charts/pie/pie_type.ts @@ -26,18 +26,18 @@ export const createPieTypeDefinition = (params: any) => ({ type: 'pie', id: 'pie', label: 'Pie', - fullLabel: 'Pie', - iconType: 'visPie', + fulllabel: 'Pie', + icontype: 'visPie', category: VIS_CATEGORY.BASICS, - showLegend: true, - legendPosition: 'v', + showlegend: true, + legendposition: 'v', selection: { dataLoss: 'nothing', }, - categoryAxis: 'xaxis', - seriesAxis: 'yaxis', + categoryaxis: 'xaxis', + seriesaxis: 'yaxis', icon: LensIconChartPie, - editorConfig: { + editorconfig: { panelTabs: [ { id: 'data-panel', @@ -130,7 +130,7 @@ export const createPieTypeDefinition = (params: any) => ({ }, ], }, - visConfig: { + visconfig: { layout: { ...sharedConfigs.layout, ...{ diff --git a/dashboards-observability/public/components/visualizations/charts/text/text_type.ts b/dashboards-observability/public/components/visualizations/charts/text/text_type.ts index bc6b90ca9..788896cfd 100644 --- a/dashboards-observability/public/components/visualizations/charts/text/text_type.ts +++ b/dashboards-observability/public/components/visualizations/charts/text/text_type.ts @@ -18,16 +18,16 @@ export const createTextTypeDefinition = (params: any = {}) => ({ type: 'text', id: 'text', label: 'Text', - fullLabel: 'Text', - iconType: 'visText', + fulllabel: 'Text', + icontype: 'visText', category: VIS_CATEGORY.BASICS, selection: { dataLoss: 'nothing', }, icon: LensIconChartLine, - categoryAxis: 'xaxis', - seriesAxis: 'yaxis', - editorConfig: { + categoryaxis: 'xaxis', + seriesaxis: 'yaxis', + editorconfig: { panelTabs: [ { id: 'data-panel', @@ -46,7 +46,7 @@ export const createTextTypeDefinition = (params: any = {}) => ({ }, ], }, - visConfig: { + visconfig: { layout: { ...sharedConfigs.layout, ...{ diff --git a/dashboards-observability/public/components/visualizations/visualization.tsx b/dashboards-observability/public/components/visualizations/visualization.tsx index 329e6881b..1c8c58f70 100644 --- a/dashboards-observability/public/components/visualizations/visualization.tsx +++ b/dashboards-observability/public/components/visualizations/visualization.tsx @@ -26,7 +26,7 @@ export const Visualization = ({ visualizations }: IVisualizationProps) => { {isVizDataValid && isVizFieldValid ? ( ) : ( - + )} ); diff --git a/dashboards-observability/public/components/visualizations/visualization_chart.tsx b/dashboards-observability/public/components/visualizations/visualization_chart.tsx index 88bb34edd..b284ee95d 100644 --- a/dashboards-observability/public/components/visualizations/visualization_chart.tsx +++ b/dashboards-observability/public/components/visualizations/visualization_chart.tsx @@ -4,7 +4,6 @@ */ import React, { useMemo } from 'react'; -import { take, merge, isEmpty } from 'lodash'; interface IVisualizationChart {} @@ -18,14 +17,14 @@ export const VisualizationChart = ({ visualizations }: IVisualizationChart) => { const finalFigureConfig = useMemo(() => { return { - ...vis.visConfig?.config, + ...vis.visconfig?.config, ...config, }; }, [config, vis]); const finalFigureLayout = useMemo(() => { return { - ...vis.visConfig?.layout, + ...vis.visconfig?.layout, ...layout, }; }, [layout, vis]); diff --git a/dashboards-observability/test/event_analytics_constants.ts b/dashboards-observability/test/event_analytics_constants.ts index a8a3a70a6..f885dd37e 100644 --- a/dashboards-observability/test/event_analytics_constants.ts +++ b/dashboards-observability/test/event_analytics_constants.ts @@ -437,31 +437,31 @@ export const SAMPLE_VISUALIZATIONS = { export const VISUALIZATION_TYPES = [ { - fullLabel: 'Bar', + fulllabel: 'Bar', id: 'bar', label: 'bar', selection: { dataLoss: 'nothing' }, - visualizationId: 'vis-bar-6636' + visualizationid: 'vis-bar-6636' }, { - fullLabel: 'H. Bar', + fulllabel: 'H. Bar', id: 'horizontal_bar', label: 'H. Bar', selection: { dataLoss: 'nothing' }, - visualizationId: 'vis-bar-6637' + visualizationid: 'vis-bar-6637' }, { - fullLabel: 'Line', + fulllabel: 'Line', id: 'line', label: 'line', selection: { dataLoss: 'nothing' }, - visualizationId: 'vis-bar-6638' + visualizationid: 'vis-bar-6638' } ]; @@ -532,4 +532,3 @@ export const PIE_TEST_VISUALIZATIONS_DATA = { ...TEST_VISUALIZATIONS_DATA.vis } }; - From ea9b4705f1bdd152be30fd89f548ef9ff9ac018f Mon Sep 17 00:00:00 2001 From: rinku-kumar-psl Date: Fri, 29 Jul 2022 11:07:32 +0530 Subject: [PATCH 2/4] snapshot updated Signed-off-by: rinku-kumar-psl --- .../__tests__/__snapshots__/no_results.test.tsx.snap | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) 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..8f18176fc 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

From 1576b246283d893ba470f1b57d5a9bdc92a5638f Mon Sep 17 00:00:00 2001 From: rinku-kumar-psl Date: Fri, 29 Jul 2022 11:39:21 +0530 Subject: [PATCH 3/4] no_results.test.tsx snapshot updated Signed-off-by: rinku-kumar-psl --- .../__tests__/__snapshots__/no_results.test.tsx.snap | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 8f18176fc..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 @@ -196,7 +196,7 @@ exports[`No result component Renders No result component 1`] = ` id="discover.noResults.queryMayNotMatchTitle" values={Object {}} > - 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

From cb856b8e2d0f8e36038e2f8d7a366674f6dc2427 Mon Sep 17 00:00:00 2001 From: rinku-kumar-psl Date: Fri, 29 Jul 2022 13:20:42 +0000 Subject: [PATCH 4/4] added empty line at the end of the file Signed-off-by: rinku-kumar-psl --- dashboards-observability/common/types/explorer.ts | 2 +- .../explorer/visualizations/config_panel/config_panel.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/dashboards-observability/common/types/explorer.ts b/dashboards-observability/common/types/explorer.ts index 3a9341948..9e4063093 100644 --- a/dashboards-observability/common/types/explorer.ts +++ b/dashboards-observability/common/types/explorer.ts @@ -247,4 +247,4 @@ export interface HistogramConfigList { export interface ConfigList { dimensions?: ConfigListEntry[] | HistogramConfigList[]; metrics?: ConfigListEntry[]; -} \ No newline at end of file +} 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 225a0efbc..856fe71a5 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 @@ -301,4 +301,4 @@ export const ConfigPanel = ({ visualizations, setCurVisId, callback, changeIsVal ); -}; \ No newline at end of file +};