diff --git a/dashboards-observability/common/types/explorer.ts b/dashboards-observability/common/types/explorer.ts index ade2c6db3..9e4063093 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; }; 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/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); 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 } }; -