From 89d80f5e973c77da6ad97a9ea908f9c87e9c35b4 Mon Sep 17 00:00:00 2001 From: Rinku Kumar <103560761+rinku-kumar-psl@users.noreply.github.com> Date: Tue, 9 Aug 2022 20:34:33 +0530 Subject: [PATCH] Sprint2 code refactoring and warning minimization (#904) * changes to remove for unique key warning on Dom and code refactoring sprint2 Signed-off-by: rinku-kumar-psl * snapshot updated Signed-off-by: rinku-kumar-psl * no_results.test.tsx snapshot updated Signed-off-by: rinku-kumar-psl * added empty line at the end of the file Signed-off-by: rinku-kumar-psl --- .../common/types/explorer.ts | 6 +- .../__snapshots__/utils.test.tsx.snap | 180 +++---- .../__snapshots__/config_panel.test.tsx.snap | 491 +++++++++--------- .../config_panel/config_panel.tsx | 12 +- .../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_panel_item.tsx | 2 +- .../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 | 24 +- .../__snapshots__/heatmap.test.tsx.snap | 24 +- .../__snapshots__/histogram.test.tsx.snap | 24 +- .../__snapshots__/line.test.tsx.snap | 24 +- .../__tests__/__snapshots__/pie.test.tsx.snap | 24 +- .../__snapshots__/text.test.tsx.snap | 24 +- .../__snapshots__/treemap.test.tsx.snap | 24 +- .../visualizations/charts/bar/bar.tsx | 20 +- .../visualizations/charts/bar/bar_type.ts | 25 +- .../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 +- .../charts/logs_view/logs_view_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 | 4 +- .../test/event_analytics_constants.ts | 13 +- 45 files changed, 636 insertions(+), 629 deletions(-) diff --git a/dashboards-observability/common/types/explorer.ts b/dashboards-observability/common/types/explorer.ts index 4b21aa75f..9d3cb5072 100644 --- a/dashboards-observability/common/types/explorer.ts +++ b/dashboards-observability/common/types/explorer.ts @@ -225,13 +225,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; }; 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 9cfaa6638..0a003aefa 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 @@ -126,11 +126,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], @@ -355,25 +355,25 @@ exports[`Utils helper functions renders displayVisualization function 1`] = ` ], }, "fillOpacity": 80, - "fullLabel": "Vertical bar", - "groupWidth": 0.7, + "fulllabel": "Vertical bar", + "groupwidth": 0.7, "icon": [Function], - "iconType": "visBarVerticalStacked", + "icontype": "visBarVerticalStacked", "id": "bar", "label": "Vertical 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, @@ -523,11 +523,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], @@ -752,25 +752,25 @@ exports[`Utils helper functions renders displayVisualization function 1`] = ` ], }, "fillOpacity": 80, - "fullLabel": "Vertical bar", - "groupWidth": 0.7, + "fulllabel": "Vertical bar", + "groupwidth": 0.7, "icon": [Function], - "iconType": "visBarVerticalStacked", + "icontype": "visBarVerticalStacked", "id": "bar", "label": "Vertical 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, @@ -943,11 +943,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], @@ -1172,25 +1172,25 @@ exports[`Utils helper functions renders displayVisualization function 1`] = ` ], }, "fillOpacity": 80, - "fullLabel": "Vertical bar", - "groupWidth": 0.7, + "fulllabel": "Vertical bar", + "groupwidth": 0.7, "icon": [Function], - "iconType": "visBarVerticalStacked", + "icontype": "visBarVerticalStacked", "id": "bar", "label": "Vertical 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, @@ -1425,9 +1425,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], @@ -1667,18 +1667,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, @@ -1858,9 +1858,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], @@ -2100,18 +2100,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, @@ -2345,9 +2345,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], @@ -2587,18 +2587,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, @@ -2864,9 +2864,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], @@ -2961,9 +2961,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", @@ -2971,9 +2971,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, @@ -3124,9 +3124,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], @@ -3221,9 +3221,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", @@ -3231,9 +3231,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, @@ -3407,9 +3407,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], @@ -3504,9 +3504,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", @@ -3514,9 +3514,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, @@ -3698,9 +3698,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], @@ -3795,9 +3795,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", @@ -3805,9 +3805,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, @@ -3904,9 +3904,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], @@ -4001,9 +4001,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", @@ -4011,9 +4011,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, @@ -4133,9 +4133,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], @@ -4230,9 +4230,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", @@ -4240,9 +4240,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/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 291f64fe3..55a5c4d51 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], @@ -430,25 +430,25 @@ exports[`Config panel component Renders config panel with visualization data 1`] ], }, "fillOpacity": 80, - "fullLabel": "Vertical bar", - "groupWidth": 0.7, + "fulllabel": "Vertical bar", + "groupwidth": 0.7, "icon": [Function], - "iconType": "visBarVerticalStacked", + "icontype": "visBarVerticalStacked", "id": "bar", "label": "Vertical 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], @@ -737,25 +737,26 @@ exports[`Config panel component Renders config panel with visualization data 1`] ], }, "fillOpacity": 80, - "fullLabel": "Vertical bar", - "groupWidth": 0.7, + "fulllabel": "Vertical bar", + "groupwidth": 0.7, "icon": [Function], "iconType": "visBarVerticalStacked", + "icontype": "visBarVerticalStacked", "id": "bar", "label": "Vertical 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 +781,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 +1023,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 +1089,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 +1231,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 +1293,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 +1618,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 +1628,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 +1650,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 +1671,18 @@ exports[`Config panel component Renders config panel with visualization data 1`] }, ], }, - "fullLabel": "Markdown", + "fulllabel": "Markdown", "icon": [Function], - "iconType": "visText", + "icontype": "visText", "id": "text", "label": "Markdown", "name": "text", "selection": Object { "dataLoss": "nothing", }, - "seriesAxis": "yaxis", + "seriesaxis": "yaxis", "type": "text", - "visConfig": Object { + "visconfig": Object { "config": Object { "barmode": "line", "displaylogo": false, @@ -1736,9 +1737,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 +2114,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 +2124,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 +2152,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 +2276,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 +2286,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 +2312,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 +2420,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 +2429,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, @@ -2453,9 +2454,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], @@ -2695,18 +2696,18 @@ exports[`Config panel component Renders config panel with visualization data 1`] }, ], }, - "fullLabel": "Scatter", + "fulllabel": "Scatter", "icon": [Function], - "iconType": "visLine", + "icontype": "visLine", "id": "scatter", "label": "Scatter", "name": "scatter", "selection": Object { "dataLoss": "nothing", }, - "seriesAxis": "yaxis", + "seriesaxis": "yaxis", "type": "scatter", - "visConfig": Object { + "visconfig": Object { "config": Object { "barmode": "scatter", "displaylogo": false, @@ -2761,9 +2762,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], @@ -2774,18 +2775,18 @@ exports[`Config panel component Renders config panel with visualization data 1`] }, ], }, - "fullLabel": "Logs View", + "fulllabel": "Logs View", "icon": [Function], - "iconType": "visTable", + "icontype": "visTable", "id": "logs_view", "label": "Logs View", "name": "logs_view", "selection": Object { "dataLoss": "nothing", }, - "seriesAxis": "yaxis", + "seriesaxis": "yaxis", "type": "logs_view", - "visConfig": Object { + "visconfig": Object { "config": Object { "barmode": "line", "displaylogo": false, @@ -2845,11 +2846,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], @@ -3074,25 +3075,26 @@ exports[`Config panel component Renders config panel with visualization data 1`] ], }, "fillOpacity": 80, - "fullLabel": "Vertical bar", - "groupWidth": 0.7, + "fulllabel": "Vertical bar", + "groupwidth": 0.7, "icon": [Function], "iconType": "visBarVerticalStacked", + "icontype": "visBarVerticalStacked", "id": "bar", "label": "Vertical 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, @@ -3148,11 +3150,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], @@ -3377,25 +3379,26 @@ exports[`Config panel component Renders config panel with visualization data 1`] ], }, "fillOpacity": 80, - "fullLabel": "Vertical bar", - "groupWidth": 0.7, + "fulllabel": "Vertical bar", + "groupwidth": 0.7, "icon": [Function], "iconType": "visBarVerticalStacked", + "icontype": "visBarVerticalStacked", "id": "bar", "label": "Vertical 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, @@ -3454,12 +3457,12 @@ exports[`Config panel component Renders config panel with visualization data 1`] > @@ -10563,7 +10565,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, @@ -224,7 +224,7 @@ export const ConfigPanel = ({ content: , }; }); - }, [vis.editorConfig.panelTabs, params]); + }, [vis.editorconfig.panelTabs, params]); const [currTabId, setCurrTabId] = useState(tabs[0].id); @@ -255,11 +255,11 @@ export const ConfigPanel = ({ ); const vizSelectableItemRenderer = (option: EuiComboBoxOptionOption) => { - const { iconType = 'empty', label = '' } = option; + const { icontype = 'empty', label = '' } = option; return (
- +    {label}
@@ -268,9 +268,11 @@ export const ConfigPanel = ({ const getSelectedVisDById = useCallback( (visId) => { - return find(memorizedVisualizationTypes, (v) => { + const selectedOption = find(memorizedVisualizationTypes, (v) => { return v.id === visId; }); + selectedOption['iconType'] = selectedOption.icontype; + return selectedOption; }, [memorizedVisualizationTypes] ); 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 c88bd1973..19a5f03b8 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 8059a3565..bd36ea856 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'; @@ -103,10 +103,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_panel_item.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_panel_item.tsx index 0ab6fc7f2..a6be223f7 100644 --- a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_panel_item.tsx +++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_panel_item.tsx @@ -33,7 +33,7 @@ export const PanelItem = ({ id={uniqueId('axis-select-')} placeholder="Select a field" options={options} - selectedOptions={selectedAxis} + selectedOptions={Array.isArray(selectedAxis) ? selectedAxis : []} isInvalid={isInvalid ?? isEmpty(selectedAxis)} isClearable={isClearable} singleSelection={isSingleSelection} 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 6b55da846..3aa60c02b 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, Fragment } from 'react'; +import React, { Fragment, useCallback } from 'react'; import { EuiButton, EuiAccordion, @@ -108,7 +108,7 @@ export const ConfigThresholds = ({ {!isEmpty(vizState) && vizState.map((thr: ThresholdUnitType) => { return ( - <> + @@ -149,7 +149,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 6fb814957..8cfbeccae 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, @@ -194,7 +194,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 && ( @@ -287,7 +287,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 7ddc6e2d9..aed72dada 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], @@ -431,25 +431,25 @@ exports[`Bar component Renders bar component 1`] = ` ], }, "fillOpacity": 80, - "fullLabel": "Vertical bar", - "groupWidth": 0.7, + "fulllabel": "Vertical bar", + "groupwidth": 0.7, "icon": [Function], - "iconType": "visBarVerticalStacked", + "icontype": "visBarVerticalStacked", "id": "bar", "label": "Vertical 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 7198ea2ee..cf25ddc8c 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], @@ -431,25 +431,25 @@ exports[`Heatmap component Renders heatmap component 1`] = ` ], }, "fillOpacity": 80, - "fullLabel": "Vertical bar", - "groupWidth": 0.7, + "fulllabel": "Vertical bar", + "groupwidth": 0.7, "icon": [Function], - "iconType": "visBarVerticalStacked", + "icontype": "visBarVerticalStacked", "id": "bar", "label": "Vertical 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 98a4527c9..53831fbbd 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], @@ -431,25 +431,25 @@ exports[`Histogram component Renders histogram component 1`] = ` ], }, "fillOpacity": 80, - "fullLabel": "Vertical bar", - "groupWidth": 0.7, + "fulllabel": "Vertical bar", + "groupwidth": 0.7, "icon": [Function], - "iconType": "visBarVerticalStacked", + "icontype": "visBarVerticalStacked", "id": "bar", "label": "Vertical 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 8316c7ae5..840b871ae 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], @@ -431,25 +431,25 @@ exports[`Line component Renders line component 1`] = ` ], }, "fillOpacity": 80, - "fullLabel": "Vertical bar", - "groupWidth": 0.7, + "fulllabel": "Vertical bar", + "groupwidth": 0.7, "icon": [Function], - "iconType": "visBarVerticalStacked", + "icontype": "visBarVerticalStacked", "id": "bar", "label": "Vertical 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 3ac048178..f6017eb89 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], @@ -431,25 +431,25 @@ exports[`Pie component Renders pie component 1`] = ` ], }, "fillOpacity": 80, - "fullLabel": "Vertical bar", - "groupWidth": 0.7, + "fulllabel": "Vertical bar", + "groupwidth": 0.7, "icon": [Function], - "iconType": "visBarVerticalStacked", + "icontype": "visBarVerticalStacked", "id": "bar", "label": "Vertical 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 ee6a24bbc..eb5238505 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], @@ -414,25 +414,25 @@ exports[`Text component Renders text component 1`] = ` ], }, "fillOpacity": 80, - "fullLabel": "Vertical bar", - "groupWidth": 0.7, + "fulllabel": "Vertical bar", + "groupwidth": 0.7, "icon": [Function], - "iconType": "visBarVerticalStacked", + "icontype": "visBarVerticalStacked", "id": "bar", "label": "Vertical 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 185b4b3dc..9d6a3db08 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], @@ -431,25 +431,25 @@ exports[`Treemap component Renders treemap component 1`] = ` ], }, "fillOpacity": 80, - "fullLabel": "Vertical bar", - "groupWidth": 0.7, + "fulllabel": "Vertical bar", + "groupwidth": 0.7, "icon": [Function], - "iconType": "visBarVerticalStacked", + "icontype": "visBarVerticalStacked", "id": "bar", "label": "Vertical 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..d1d96ce37 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); + 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 462a0bdb7..da9f92e83 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: 'Vertical bar', - fullLabel: 'Vertical bar', - iconType: 'visBarVerticalStacked', + fulllabel: 'Vertical 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, + labelangle: 0, + linewidth: 1, fillOpacity: 80, - groupWidth: 0.7, - barWidth: 0.97, - showLegend: ShowLegend, - legendPosition: LegendPosition, + 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 e492dd053..feec396d5 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 6f72d1156..c26c72d4e 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 32e95b3bd..6da64fdaf 100644 --- a/dashboards-observability/public/components/visualizations/charts/lines/line.tsx +++ b/dashboards-observability/public/components/visualizations/charts/lines/line.tsx @@ -55,7 +55,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)) { @@ -197,14 +197,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 50633899f..ca0e3819f 100644 --- a/dashboards-observability/public/components/visualizations/charts/lines/line_type.ts +++ b/dashboards-observability/public/components/visualizations/charts/lines/line_type.ts @@ -28,16 +28,16 @@ export const createLineTypeDefinition = (params: any = {}) => ({ type: params.type, id: params.type, label: params.type === visChartTypes.Line ? 'Time series' : 'Scatter', - fullLabel: params.type === visChartTypes.Line ? 'Time series' : 'Scatter', - iconType: 'visLine', + fulllabel: params.type === visChartTypes.Line ? 'Time series' : 'Scatter', + 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', @@ -209,7 +209,7 @@ export const createLineTypeDefinition = (params: any = {}) => ({ }, ], }, - visConfig: { + visconfig: { layout: { ...sharedConfigs.layout, ...{ diff --git a/dashboards-observability/public/components/visualizations/charts/logs_view/logs_view_type.ts b/dashboards-observability/public/components/visualizations/charts/logs_view/logs_view_type.ts index e04997086..8a09d6782 100644 --- a/dashboards-observability/public/components/visualizations/charts/logs_view/logs_view_type.ts +++ b/dashboards-observability/public/components/visualizations/charts/logs_view/logs_view_type.ts @@ -17,16 +17,16 @@ export const createLogsViewTypeDefinition = (params: any = {}) => ({ type: 'logs_view', id: 'logs_view', label: 'Logs View', - fullLabel: 'Logs View', - iconType: 'visTable', + fulllabel: 'Logs View', + icontype: 'visTable', category: VIS_CATEGORY.BASICS, selection: { dataLoss: 'nothing', }, icon: LensIconChartDatatable, - categoryAxis: 'xaxis', - seriesAxis: 'yaxis', - editorConfig: { + categoryaxis: 'xaxis', + seriesaxis: 'yaxis', + editorconfig: { panelTabs: [ { id: 'data-panel', @@ -37,7 +37,7 @@ export const createLogsViewTypeDefinition = (params: any = {}) => ({ }, ], }, - visConfig: { + visconfig: { layout: { ...sharedConfigs.layout, colorway: PLOTLY_COLOR, 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 498b7c2e4..05e16fc23 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 cedd9bbf9..9ef04dd38 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 7de03ba27..431b5dd20 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 56d3d9476..e310ca9dc 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: 'Markdown', - fullLabel: 'Markdown', - iconType: 'visText', + fulllabel: 'Markdown', + 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 e724d515c..c3c13c4b9 100644 --- a/dashboards-observability/public/components/visualizations/visualization.tsx +++ b/dashboards-observability/public/components/visualizations/visualization.tsx @@ -27,7 +27,7 @@ export const Visualization = ({ visualizations }: IVisualizationProps) => { {vis?.type === visChartTypes.LogsView || (isVizDataValid && isVizFieldValid) ? ( ) : ( - + )} ); diff --git a/dashboards-observability/public/components/visualizations/visualization_chart.tsx b/dashboards-observability/public/components/visualizations/visualization_chart.tsx index 4365bee32..2b1b5bf6f 100644 --- a/dashboards-observability/public/components/visualizations/visualization_chart.tsx +++ b/dashboards-observability/public/components/visualizations/visualization_chart.tsx @@ -14,14 +14,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 } }; -