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 5a89819ca..6d4936430 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 @@ -108,6 +108,64 @@ exports[`Utils helper functions renders displayVisualization function 1`] = ` }, ], }, + Object { + "editor": [Function], + "id": "tooltip_options", + "mapTo": "tooltipOptions", + "name": "Tooltip options", + "schemas": Array [ + Object { + "component": null, + "mapTo": "tooltipMode", + "name": "Tooltip mode", + "props": Object { + "defaultSelections": Array [ + Object { + "id": "show", + "name": "Show", + }, + ], + "options": Array [ + Object { + "id": "show", + "name": "Show", + }, + Object { + "id": "hidden", + "name": "Hidden", + }, + ], + }, + }, + Object { + "component": null, + "mapTo": "tooltipText", + "name": "Tooltip text", + "props": Object { + "defaultSelections": Array [ + Object { + "id": "all", + "name": "All", + }, + ], + "options": Array [ + Object { + "id": "all", + "name": "All", + }, + Object { + "id": "x", + "name": "Dimension", + }, + Object { + "id": "y", + "name": "Metrics", + }, + ], + }, + }, + ], + }, Object { "editor": [Function], "id": "legend", @@ -469,6 +527,64 @@ exports[`Utils helper functions renders displayVisualization function 1`] = ` }, ], }, + Object { + "editor": [Function], + "id": "tooltip_options", + "mapTo": "tooltipOptions", + "name": "Tooltip options", + "schemas": Array [ + Object { + "component": null, + "mapTo": "tooltipMode", + "name": "Tooltip mode", + "props": Object { + "defaultSelections": Array [ + Object { + "id": "show", + "name": "Show", + }, + ], + "options": Array [ + Object { + "id": "show", + "name": "Show", + }, + Object { + "id": "hidden", + "name": "Hidden", + }, + ], + }, + }, + Object { + "component": null, + "mapTo": "tooltipText", + "name": "Tooltip text", + "props": Object { + "defaultSelections": Array [ + Object { + "id": "all", + "name": "All", + }, + ], + "options": Array [ + Object { + "id": "all", + "name": "All", + }, + Object { + "id": "x", + "name": "Dimension", + }, + Object { + "id": "y", + "name": "Metrics", + }, + ], + }, + }, + ], + }, Object { "editor": [Function], "id": "legend", @@ -853,6 +969,64 @@ exports[`Utils helper functions renders displayVisualization function 1`] = ` }, ], }, + Object { + "editor": [Function], + "id": "tooltip_options", + "mapTo": "tooltipOptions", + "name": "Tooltip options", + "schemas": Array [ + Object { + "component": null, + "mapTo": "tooltipMode", + "name": "Tooltip mode", + "props": Object { + "defaultSelections": Array [ + Object { + "id": "show", + "name": "Show", + }, + ], + "options": Array [ + Object { + "id": "show", + "name": "Show", + }, + Object { + "id": "hidden", + "name": "Hidden", + }, + ], + }, + }, + Object { + "component": null, + "mapTo": "tooltipText", + "name": "Tooltip text", + "props": Object { + "defaultSelections": Array [ + Object { + "id": "all", + "name": "All", + }, + ], + "options": Array [ + Object { + "id": "all", + "name": "All", + }, + Object { + "id": "x", + "name": "Dimension", + }, + Object { + "id": "y", + "name": "Metrics", + }, + ], + }, + }, + ], + }, Object { "editor": [Function], "id": "legend", @@ -1118,6 +1292,7 @@ exports[`Utils helper functions renders displayVisualization function 1`] = ` data={ Array [ Object { + "hoverinfo": "all", "marker": Object { "color": "rgba(60,161,199,0.4)", "line": Object { @@ -1192,6 +1367,7 @@ exports[`Utils helper functions renders displayVisualization function 1`] = ` data={ Array [ Object { + "hoverinfo": "all", "marker": Object { "color": "rgba(60,161,199,0.4)", "line": Object { @@ -1435,6 +1611,64 @@ exports[`Utils helper functions renders displayVisualization function 2`] = ` }, ], }, + Object { + "editor": [Function], + "id": "tooltip_options", + "mapTo": "tooltipOptions", + "name": "Tooltip options", + "schemas": Array [ + Object { + "component": null, + "mapTo": "tooltipMode", + "name": "Tooltip mode", + "props": Object { + "defaultSelections": Array [ + Object { + "id": "show", + "name": "Show", + }, + ], + "options": Array [ + Object { + "id": "show", + "name": "Show", + }, + Object { + "id": "hidden", + "name": "Hidden", + }, + ], + }, + }, + Object { + "component": null, + "mapTo": "tooltipText", + "name": "Tooltip text", + "props": Object { + "defaultSelections": Array [ + Object { + "id": "all", + "name": "All", + }, + ], + "options": Array [ + Object { + "id": "all", + "name": "All", + }, + Object { + "id": "x", + "name": "Dimension", + }, + Object { + "id": "y", + "name": "Metrics", + }, + ], + }, + }, + ], + }, Object { "editor": [Function], "id": "chart_styles", @@ -1818,6 +2052,64 @@ exports[`Utils helper functions renders displayVisualization function 2`] = ` }, ], }, + Object { + "editor": [Function], + "id": "tooltip_options", + "mapTo": "tooltipOptions", + "name": "Tooltip options", + "schemas": Array [ + Object { + "component": null, + "mapTo": "tooltipMode", + "name": "Tooltip mode", + "props": Object { + "defaultSelections": Array [ + Object { + "id": "show", + "name": "Show", + }, + ], + "options": Array [ + Object { + "id": "show", + "name": "Show", + }, + Object { + "id": "hidden", + "name": "Hidden", + }, + ], + }, + }, + Object { + "component": null, + "mapTo": "tooltipText", + "name": "Tooltip text", + "props": Object { + "defaultSelections": Array [ + Object { + "id": "all", + "name": "All", + }, + ], + "options": Array [ + Object { + "id": "all", + "name": "All", + }, + Object { + "id": "x", + "name": "Dimension", + }, + Object { + "id": "y", + "name": "Metrics", + }, + ], + }, + }, + ], + }, Object { "editor": [Function], "id": "chart_styles", @@ -2255,6 +2547,64 @@ exports[`Utils helper functions renders displayVisualization function 2`] = ` }, ], }, + Object { + "editor": [Function], + "id": "tooltip_options", + "mapTo": "tooltipOptions", + "name": "Tooltip options", + "schemas": Array [ + Object { + "component": null, + "mapTo": "tooltipMode", + "name": "Tooltip mode", + "props": Object { + "defaultSelections": Array [ + Object { + "id": "show", + "name": "Show", + }, + ], + "options": Array [ + Object { + "id": "show", + "name": "Show", + }, + Object { + "id": "hidden", + "name": "Hidden", + }, + ], + }, + }, + Object { + "component": null, + "mapTo": "tooltipText", + "name": "Tooltip text", + "props": Object { + "defaultSelections": Array [ + Object { + "id": "all", + "name": "All", + }, + ], + "options": Array [ + Object { + "id": "all", + "name": "All", + }, + Object { + "id": "x", + "name": "Dimension", + }, + Object { + "id": "y", + "name": "Metrics", + }, + ], + }, + }, + ], + }, Object { "editor": [Function], "id": "chart_styles", @@ -3241,6 +3591,7 @@ exports[`Utils helper functions renders displayVisualization function 3`] = ` data={ Array [ Object { + "hoverinfo": "all", "marker": Object { "color": "rgba(60,161,199,NaN)", "line": Object { @@ -3315,6 +3666,7 @@ exports[`Utils helper functions renders displayVisualization function 3`] = ` data={ Array [ Object { + "hoverinfo": "all", "marker": Object { "color": "rgba(60,161,199,NaN)", "line": Object { @@ -3995,6 +4347,7 @@ exports[`Utils helper functions renders displayVisualization function 4`] = ` data={ Array [ Object { + "hoverinfo": "all", "marker": Object { "color": "rgba(60,161,199,NaN)", "line": Object { @@ -4059,6 +4412,7 @@ exports[`Utils helper functions renders displayVisualization function 4`] = ` data={ Array [ Object { + "hoverinfo": "all", "marker": Object { "color": "rgba(60,161,199,NaN)", "line": Object { 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 1f9eada2f..78466bea7 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 @@ -233,6 +233,64 @@ exports[`Config panel component Renders config panel with visualization data 1`] }, ], }, + Object { + "editor": [Function], + "id": "tooltip_options", + "mapTo": "tooltipOptions", + "name": "Tooltip options", + "schemas": Array [ + Object { + "component": null, + "mapTo": "tooltipMode", + "name": "Tooltip mode", + "props": Object { + "defaultSelections": Array [ + Object { + "id": "show", + "name": "Show", + }, + ], + "options": Array [ + Object { + "id": "show", + "name": "Show", + }, + Object { + "id": "hidden", + "name": "Hidden", + }, + ], + }, + }, + Object { + "component": null, + "mapTo": "tooltipText", + "name": "Tooltip text", + "props": Object { + "defaultSelections": Array [ + Object { + "id": "all", + "name": "All", + }, + ], + "options": Array [ + Object { + "id": "all", + "name": "All", + }, + Object { + "id": "x", + "name": "Dimension", + }, + Object { + "id": "y", + "name": "Metrics", + }, + ], + }, + }, + ], + }, Object { "editor": [Function], "id": "legend", @@ -554,6 +612,64 @@ exports[`Config panel component Renders config panel with visualization data 1`] }, ], }, + Object { + "editor": [Function], + "id": "tooltip_options", + "mapTo": "tooltipOptions", + "name": "Tooltip options", + "schemas": Array [ + Object { + "component": null, + "mapTo": "tooltipMode", + "name": "Tooltip mode", + "props": Object { + "defaultSelections": Array [ + Object { + "id": "show", + "name": "Show", + }, + ], + "options": Array [ + Object { + "id": "show", + "name": "Show", + }, + Object { + "id": "hidden", + "name": "Hidden", + }, + ], + }, + }, + Object { + "component": null, + "mapTo": "tooltipText", + "name": "Tooltip text", + "props": Object { + "defaultSelections": Array [ + Object { + "id": "all", + "name": "All", + }, + ], + "options": Array [ + Object { + "id": "all", + "name": "All", + }, + Object { + "id": "x", + "name": "Dimension", + }, + Object { + "id": "y", + "name": "Metrics", + }, + ], + }, + }, + ], + }, Object { "editor": [Function], "id": "legend", @@ -879,6 +995,64 @@ exports[`Config panel component Renders config panel with visualization data 1`] }, ], }, + Object { + "editor": [Function], + "id": "tooltip_options", + "mapTo": "tooltipOptions", + "name": "Tooltip options", + "schemas": Array [ + Object { + "component": null, + "mapTo": "tooltipMode", + "name": "Tooltip mode", + "props": Object { + "defaultSelections": Array [ + Object { + "id": "show", + "name": "Show", + }, + ], + "options": Array [ + Object { + "id": "show", + "name": "Show", + }, + Object { + "id": "hidden", + "name": "Hidden", + }, + ], + }, + }, + Object { + "component": null, + "mapTo": "tooltipText", + "name": "Tooltip text", + "props": Object { + "defaultSelections": Array [ + Object { + "id": "all", + "name": "All", + }, + ], + "options": Array [ + Object { + "id": "all", + "name": "All", + }, + Object { + "id": "x", + "name": "Dimension", + }, + Object { + "id": "y", + "name": "Metrics", + }, + ], + }, + }, + ], + }, Object { "editor": [Function], "id": "chart_styles", @@ -1186,6 +1360,68 @@ exports[`Config panel component Renders config panel with visualization data 1`] }, ], }, + Object { + "editor": [Function], + "id": "tooltip_options", + "mapTo": "tooltipOptions", + "name": "Tooltip options", + "schemas": Array [ + Object { + "component": null, + "mapTo": "tooltipMode", + "name": "Tooltip mode", + "props": Object { + "defaultSelections": Array [ + Object { + "id": "show", + "name": "Show", + }, + ], + "options": Array [ + Object { + "id": "show", + "name": "Show", + }, + Object { + "id": "hidden", + "name": "Hidden", + }, + ], + }, + }, + Object { + "component": null, + "mapTo": "tooltipText", + "name": "Tooltip text", + "props": Object { + "defaultSelections": Array [ + Object { + "id": "all", + "name": "All", + }, + ], + "options": Array [ + Object { + "id": "all", + "name": "All", + }, + Object { + "id": "label", + "name": "Label", + }, + Object { + "id": "value", + "name": "Value", + }, + Object { + "id": "percent", + "name": "Percent", + }, + ], + }, + }, + ], + }, Object { "editor": [Function], "id": "chart_styles", @@ -1328,6 +1564,68 @@ exports[`Config panel component Renders config panel with visualization data 1`] "mapTo": "dataConfig", "name": "Data", "sections": Array [ + Object { + "editor": [Function], + "id": "tooltip_options", + "mapTo": "tooltipOptions", + "name": "Tooltip options", + "schemas": Array [ + Object { + "component": null, + "mapTo": "tooltipMode", + "name": "Tooltip mode", + "props": Object { + "defaultSelections": Array [ + Object { + "id": "show", + "name": "Show", + }, + ], + "options": Array [ + Object { + "id": "show", + "name": "Show", + }, + Object { + "id": "hidden", + "name": "Hidden", + }, + ], + }, + }, + Object { + "component": null, + "mapTo": "tooltipText", + "name": "Tooltip text", + "props": Object { + "defaultSelections": Array [ + Object { + "id": "all", + "name": "All", + }, + ], + "options": Array [ + Object { + "id": "all", + "name": "All", + }, + Object { + "id": "x", + "name": "Dim 1", + }, + Object { + "id": "y", + "name": "Dim 2", + }, + Object { + "id": "z", + "name": "Metrics", + }, + ], + }, + }, + ], + }, Object { "editor": [Function], "id": "legend", @@ -1776,14 +2074,14 @@ exports[`Config panel component Renders config panel with visualization data 1`] "sections": Array [ Object { "editor": [Function], - "id": "legend", - "mapTo": "legend", - "name": "Legend", + "id": "tooltip_options", + "mapTo": "tooltipOptions", + "name": "Tooltip options", "schemas": Array [ Object { "component": null, - "mapTo": "showLegend", - "name": "Show Colorscale", + "mapTo": "tooltipMode", + "name": "Tooltip mode", "props": Object { "defaultSelections": Array [ Object { @@ -1803,25 +2101,83 @@ exports[`Config panel component Renders config panel with visualization data 1`] ], }, }, + Object { + "component": null, + "mapTo": "tooltipText", + "name": "Tooltip text", + "props": Object { + "defaultSelections": Array [ + Object { + "id": "all", + "name": "All", + }, + ], + "options": Array [ + Object { + "id": "all", + "name": "All", + }, + Object { + "id": "label", + "name": "Label", + }, + Object { + "id": "value", + "name": "Value", + }, + ], + }, + }, ], }, Object { "editor": [Function], - "id": "treemap_options", - "mapTo": "treemapOptions", - "name": "Treemap", + "id": "legend", + "mapTo": "legend", + "name": "Legend", "schemas": Array [ Object { "component": null, - "defaultState": Array [ - Object { - "label": "Squarify", - "name": "Squarify", - "value": "squarify", - }, - ], - "isSingleSelection": true, - "mapTo": "tilingAlgorithm", + "mapTo": "showLegend", + "name": "Show Colorscale", + "props": Object { + "defaultSelections": Array [ + Object { + "id": "show", + "name": "Show", + }, + ], + "options": Array [ + Object { + "id": "show", + "name": "Show", + }, + Object { + "id": "hidden", + "name": "Hidden", + }, + ], + }, + }, + ], + }, + Object { + "editor": [Function], + "id": "treemap_options", + "mapTo": "treemapOptions", + "name": "Treemap", + "schemas": Array [ + Object { + "component": null, + "defaultState": Array [ + Object { + "label": "Squarify", + "name": "Squarify", + "value": "squarify", + }, + ], + "isSingleSelection": true, + "mapTo": "tilingAlgorithm", "name": "Tiling Algorithm", "options": Array [ Object { @@ -2351,6 +2707,64 @@ exports[`Config panel component Renders config panel with visualization data 1`] "name": "Color Theme", "schemas": Array [], }, + Object { + "editor": [Function], + "id": "tooltip_options", + "mapTo": "tooltipOptions", + "name": "Tooltip options", + "schemas": Array [ + Object { + "component": null, + "mapTo": "tooltipMode", + "name": "Tooltip mode", + "props": Object { + "defaultSelections": Array [ + Object { + "id": "show", + "name": "Show", + }, + ], + "options": Array [ + Object { + "id": "show", + "name": "Show", + }, + Object { + "id": "hidden", + "name": "Hidden", + }, + ], + }, + }, + Object { + "component": null, + "mapTo": "tooltipText", + "name": "Tooltip text", + "props": Object { + "defaultSelections": Array [ + Object { + "id": "all", + "name": "All", + }, + ], + "options": Array [ + Object { + "id": "all", + "name": "All", + }, + Object { + "id": "x", + "name": "Dimension", + }, + Object { + "id": "y", + "name": "Metrics", + }, + ], + }, + }, + ], + }, Object { "editor": [Function], "id": "legend", @@ -2487,6 +2901,64 @@ exports[`Config panel component Renders config panel with visualization data 1`] }, ], }, + Object { + "editor": [Function], + "id": "tooltip_options", + "mapTo": "tooltipOptions", + "name": "Tooltip options", + "schemas": Array [ + Object { + "component": null, + "mapTo": "tooltipMode", + "name": "Tooltip mode", + "props": Object { + "defaultSelections": Array [ + Object { + "id": "show", + "name": "Show", + }, + ], + "options": Array [ + Object { + "id": "show", + "name": "Show", + }, + Object { + "id": "hidden", + "name": "Hidden", + }, + ], + }, + }, + Object { + "component": null, + "mapTo": "tooltipText", + "name": "Tooltip text", + "props": Object { + "defaultSelections": Array [ + Object { + "id": "all", + "name": "All", + }, + ], + "options": Array [ + Object { + "id": "all", + "name": "All", + }, + Object { + "id": "x", + "name": "Dimension", + }, + Object { + "id": "y", + "name": "Metrics", + }, + ], + }, + }, + ], + }, Object { "editor": [Function], "id": "legend", @@ -2804,6 +3276,64 @@ exports[`Config panel component Renders config panel with visualization data 1`] }, ], }, + Object { + "editor": [Function], + "id": "tooltip_options", + "mapTo": "tooltipOptions", + "name": "Tooltip options", + "schemas": Array [ + Object { + "component": null, + "mapTo": "tooltipMode", + "name": "Tooltip mode", + "props": Object { + "defaultSelections": Array [ + Object { + "id": "show", + "name": "Show", + }, + ], + "options": Array [ + Object { + "id": "show", + "name": "Show", + }, + Object { + "id": "hidden", + "name": "Hidden", + }, + ], + }, + }, + Object { + "component": null, + "mapTo": "tooltipText", + "name": "Tooltip text", + "props": Object { + "defaultSelections": Array [ + Object { + "id": "all", + "name": "All", + }, + ], + "options": Array [ + Object { + "id": "all", + "name": "All", + }, + Object { + "id": "x", + "name": "Dimension", + }, + Object { + "id": "y", + "name": "Metrics", + }, + ], + }, + }, + ], + }, Object { "editor": [Function], "id": "legend", @@ -3126,6 +3656,64 @@ exports[`Config panel component Renders config panel with visualization data 1`] }, ], }, + Object { + "editor": [Function], + "id": "tooltip_options", + "mapTo": "tooltipOptions", + "name": "Tooltip options", + "schemas": Array [ + Object { + "component": null, + "mapTo": "tooltipMode", + "name": "Tooltip mode", + "props": Object { + "defaultSelections": Array [ + Object { + "id": "show", + "name": "Show", + }, + ], + "options": Array [ + Object { + "id": "show", + "name": "Show", + }, + Object { + "id": "hidden", + "name": "Hidden", + }, + ], + }, + }, + Object { + "component": null, + "mapTo": "tooltipText", + "name": "Tooltip text", + "props": Object { + "defaultSelections": Array [ + Object { + "id": "all", + "name": "All", + }, + ], + "options": Array [ + Object { + "id": "all", + "name": "All", + }, + Object { + "id": "x", + "name": "Dimension", + }, + Object { + "id": "y", + "name": "Metrics", + }, + ], + }, + }, + ], + }, Object { "editor": [Function], "id": "legend", @@ -3383,6 +3971,64 @@ exports[`Config panel component Renders config panel with visualization data 1`] }, ], }, + Object { + "editor": [Function], + "id": "tooltip_options", + "mapTo": "tooltipOptions", + "name": "Tooltip options", + "schemas": Array [ + Object { + "component": null, + "mapTo": "tooltipMode", + "name": "Tooltip mode", + "props": Object { + "defaultSelections": Array [ + Object { + "id": "show", + "name": "Show", + }, + ], + "options": Array [ + Object { + "id": "show", + "name": "Show", + }, + Object { + "id": "hidden", + "name": "Hidden", + }, + ], + }, + }, + Object { + "component": null, + "mapTo": "tooltipText", + "name": "Tooltip text", + "props": Object { + "defaultSelections": Array [ + Object { + "id": "all", + "name": "All", + }, + ], + "options": Array [ + Object { + "id": "all", + "name": "All", + }, + Object { + "id": "x", + "name": "Dimension", + }, + Object { + "id": "y", + "name": "Metrics", + }, + ], + }, + }, + ], + }, Object { "editor": [Function], "id": "legend", @@ -3708,7 +4354,65 @@ exports[`Config panel component Renders config panel with visualization data 1`] }, Object { "editor": [Function], - "id": "legend", + "id": "tooltip_options", + "mapTo": "tooltipOptions", + "name": "Tooltip options", + "schemas": Array [ + Object { + "component": null, + "mapTo": "tooltipMode", + "name": "Tooltip mode", + "props": Object { + "defaultSelections": Array [ + Object { + "id": "show", + "name": "Show", + }, + ], + "options": Array [ + Object { + "id": "show", + "name": "Show", + }, + Object { + "id": "hidden", + "name": "Hidden", + }, + ], + }, + }, + Object { + "component": null, + "mapTo": "tooltipText", + "name": "Tooltip text", + "props": Object { + "defaultSelections": Array [ + Object { + "id": "all", + "name": "All", + }, + ], + "options": Array [ + Object { + "id": "all", + "name": "All", + }, + Object { + "id": "x", + "name": "Dimension", + }, + Object { + "id": "y", + "name": "Metrics", + }, + ], + }, + }, + ], + }, + Object { + "editor": [Function], + "id": "legend", "mapTo": "legend", "name": "Legend", "schemas": Array [ @@ -3999,6 +4703,64 @@ exports[`Config panel component Renders config panel with visualization data 1`] }, ], }, + Object { + "editor": [Function], + "id": "tooltip_options", + "mapTo": "tooltipOptions", + "name": "Tooltip options", + "schemas": Array [ + Object { + "component": null, + "mapTo": "tooltipMode", + "name": "Tooltip mode", + "props": Object { + "defaultSelections": Array [ + Object { + "id": "show", + "name": "Show", + }, + ], + "options": Array [ + Object { + "id": "show", + "name": "Show", + }, + Object { + "id": "hidden", + "name": "Hidden", + }, + ], + }, + }, + Object { + "component": null, + "mapTo": "tooltipText", + "name": "Tooltip text", + "props": Object { + "defaultSelections": Array [ + Object { + "id": "all", + "name": "All", + }, + ], + "options": Array [ + Object { + "id": "all", + "name": "All", + }, + Object { + "id": "x", + "name": "Dimension", + }, + Object { + "id": "y", + "name": "Metrics", + }, + ], + }, + }, + ], + }, Object { "editor": [Function], "id": "legend", @@ -4475,6 +5237,64 @@ exports[`Config panel component Renders config panel with visualization data 1`] }, ], }, + Object { + "editor": [Function], + "id": "tooltip_options", + "mapTo": "tooltipOptions", + "name": "Tooltip options", + "schemas": Array [ + Object { + "component": null, + "mapTo": "tooltipMode", + "name": "Tooltip mode", + "props": Object { + "defaultSelections": Array [ + Object { + "id": "show", + "name": "Show", + }, + ], + "options": Array [ + Object { + "id": "show", + "name": "Show", + }, + Object { + "id": "hidden", + "name": "Hidden", + }, + ], + }, + }, + Object { + "component": null, + "mapTo": "tooltipText", + "name": "Tooltip text", + "props": Object { + "defaultSelections": Array [ + Object { + "id": "all", + "name": "All", + }, + ], + "options": Array [ + Object { + "id": "all", + "name": "All", + }, + Object { + "id": "x", + "name": "Dimension", + }, + Object { + "id": "y", + "name": "Metrics", + }, + ], + }, + }, + ], + }, Object { "editor": [Function], "id": "legend", @@ -4886,6 +5706,64 @@ exports[`Config panel component Renders config panel with visualization data 1`] }, ], }, + Object { + "editor": [Function], + "id": "tooltip_options", + "mapTo": "tooltipOptions", + "name": "Tooltip options", + "schemas": Array [ + Object { + "component": null, + "mapTo": "tooltipMode", + "name": "Tooltip mode", + "props": Object { + "defaultSelections": Array [ + Object { + "id": "show", + "name": "Show", + }, + ], + "options": Array [ + Object { + "id": "show", + "name": "Show", + }, + Object { + "id": "hidden", + "name": "Hidden", + }, + ], + }, + }, + Object { + "component": null, + "mapTo": "tooltipText", + "name": "Tooltip text", + "props": Object { + "defaultSelections": Array [ + Object { + "id": "all", + "name": "All", + }, + ], + "options": Array [ + Object { + "id": "all", + "name": "All", + }, + Object { + "id": "x", + "name": "Dimension", + }, + Object { + "id": "y", + "name": "Metrics", + }, + ], + }, + }, + ], + }, Object { "editor": [Function], "id": "legend", @@ -5183,6 +6061,64 @@ exports[`Config panel component Renders config panel with visualization data 1`] }, ], }, + Object { + "editor": [Function], + "id": "tooltip_options", + "mapTo": "tooltipOptions", + "name": "Tooltip options", + "schemas": Array [ + Object { + "component": null, + "mapTo": "tooltipMode", + "name": "Tooltip mode", + "props": Object { + "defaultSelections": Array [ + Object { + "id": "show", + "name": "Show", + }, + ], + "options": Array [ + Object { + "id": "show", + "name": "Show", + }, + Object { + "id": "hidden", + "name": "Hidden", + }, + ], + }, + }, + Object { + "component": null, + "mapTo": "tooltipText", + "name": "Tooltip text", + "props": Object { + "defaultSelections": Array [ + Object { + "id": "all", + "name": "All", + }, + ], + "options": Array [ + Object { + "id": "all", + "name": "All", + }, + Object { + "id": "x", + "name": "Dimension", + }, + Object { + "id": "y", + "name": "Metrics", + }, + ], + }, + }, + ], + }, Object { "editor": [Function], "id": "legend", @@ -5596,14 +6532,14 @@ exports[`Config panel component Renders config panel with visualization data 1`] }, Object { "editor": [Function], - "id": "legend", - "mapTo": "legend", - "name": "Legend", + "id": "tooltip_options", + "mapTo": "tooltipOptions", + "name": "Tooltip options", "schemas": Array [ Object { "component": null, - "mapTo": "showLegend", - "name": "Show Legend", + "mapTo": "tooltipMode", + "name": "Tooltip mode", "props": Object { "defaultSelections": Array [ Object { @@ -5625,23 +6561,27 @@ exports[`Config panel component Renders config panel with visualization data 1`] }, Object { "component": null, - "mapTo": "position", - "name": "Position", + "mapTo": "tooltipText", + "name": "Tooltip text", "props": Object { "defaultSelections": Array [ Object { - "id": "v", - "name": "Right", + "id": "all", + "name": "All", }, ], "options": Array [ Object { - "id": "v", - "name": "Right", + "id": "all", + "name": "All", }, Object { - "id": "h", - "name": "Bottom", + "id": "x", + "name": "Dimension", + }, + Object { + "id": "y", + "name": "Metrics", }, ], }, @@ -5650,30 +6590,84 @@ exports[`Config panel component Renders config panel with visualization data 1`] }, Object { "editor": [Function], - "id": "chart_styles", - "mapTo": "chartStyles", - "name": "Chart styles", + "id": "legend", + "mapTo": "legend", + "name": "Legend", "schemas": Array [ Object { - "component": [Function], - "eleType": "buttons", - "mapTo": "orientation", - "name": "Orientation", + "component": null, + "mapTo": "showLegend", + "name": "Show Legend", "props": Object { "defaultSelections": Array [ Object { - "id": "v", - "name": "Vertical", + "id": "show", + "name": "Show", }, ], "options": Array [ Object { - "id": "v", - "name": "Vertical", + "id": "show", + "name": "Show", }, Object { - "id": "h", - "name": "Horizontal", + "id": "hidden", + "name": "Hidden", + }, + ], + }, + }, + Object { + "component": null, + "mapTo": "position", + "name": "Position", + "props": Object { + "defaultSelections": Array [ + Object { + "id": "v", + "name": "Right", + }, + ], + "options": Array [ + Object { + "id": "v", + "name": "Right", + }, + Object { + "id": "h", + "name": "Bottom", + }, + ], + }, + }, + ], + }, + Object { + "editor": [Function], + "id": "chart_styles", + "mapTo": "chartStyles", + "name": "Chart styles", + "schemas": Array [ + Object { + "component": [Function], + "eleType": "buttons", + "mapTo": "orientation", + "name": "Orientation", + "props": Object { + "defaultSelections": Array [ + Object { + "id": "v", + "name": "Vertical", + }, + ], + "options": Array [ + Object { + "id": "v", + "name": "Vertical", + }, + Object { + "id": "h", + "name": "Horizontal", }, ], }, @@ -6102,6 +7096,64 @@ exports[`Config panel component Renders config panel with visualization data 1`] }, ], }, + Object { + "editor": [Function], + "id": "tooltip_options", + "mapTo": "tooltipOptions", + "name": "Tooltip options", + "schemas": Array [ + Object { + "component": null, + "mapTo": "tooltipMode", + "name": "Tooltip mode", + "props": Object { + "defaultSelections": Array [ + Object { + "id": "show", + "name": "Show", + }, + ], + "options": Array [ + Object { + "id": "show", + "name": "Show", + }, + Object { + "id": "hidden", + "name": "Hidden", + }, + ], + }, + }, + Object { + "component": null, + "mapTo": "tooltipText", + "name": "Tooltip text", + "props": Object { + "defaultSelections": Array [ + Object { + "id": "all", + "name": "All", + }, + ], + "options": Array [ + Object { + "id": "all", + "name": "All", + }, + Object { + "id": "x", + "name": "Dimension", + }, + Object { + "id": "y", + "name": "Metrics", + }, + ], + }, + }, + ], + }, Object { "editor": [Function], "id": "legend", @@ -6483,6 +7535,64 @@ exports[`Config panel component Renders config panel with visualization data 1`] }, ], }, + Object { + "editor": [Function], + "id": "tooltip_options", + "mapTo": "tooltipOptions", + "name": "Tooltip options", + "schemas": Array [ + Object { + "component": null, + "mapTo": "tooltipMode", + "name": "Tooltip mode", + "props": Object { + "defaultSelections": Array [ + Object { + "id": "show", + "name": "Show", + }, + ], + "options": Array [ + Object { + "id": "show", + "name": "Show", + }, + Object { + "id": "hidden", + "name": "Hidden", + }, + ], + }, + }, + Object { + "component": null, + "mapTo": "tooltipText", + "name": "Tooltip text", + "props": Object { + "defaultSelections": Array [ + Object { + "id": "all", + "name": "All", + }, + ], + "options": Array [ + Object { + "id": "all", + "name": "All", + }, + Object { + "id": "x", + "name": "Dimension", + }, + Object { + "id": "y", + "name": "Metrics", + }, + ], + }, + }, + ], + }, Object { "editor": [Function], "id": "legend", @@ -6894,6 +8004,64 @@ exports[`Config panel component Renders config panel with visualization data 1`] }, ], }, + Object { + "editor": [Function], + "id": "tooltip_options", + "mapTo": "tooltipOptions", + "name": "Tooltip options", + "schemas": Array [ + Object { + "component": null, + "mapTo": "tooltipMode", + "name": "Tooltip mode", + "props": Object { + "defaultSelections": Array [ + Object { + "id": "show", + "name": "Show", + }, + ], + "options": Array [ + Object { + "id": "show", + "name": "Show", + }, + Object { + "id": "hidden", + "name": "Hidden", + }, + ], + }, + }, + Object { + "component": null, + "mapTo": "tooltipText", + "name": "Tooltip text", + "props": Object { + "defaultSelections": Array [ + Object { + "id": "all", + "name": "All", + }, + ], + "options": Array [ + Object { + "id": "all", + "name": "All", + }, + Object { + "id": "x", + "name": "Dimension", + }, + Object { + "id": "y", + "name": "Metrics", + }, + ], + }, + }, + ], + }, Object { "editor": [Function], "id": "legend", @@ -7398,6 +8566,64 @@ exports[`Config panel component Renders config panel with visualization data 1`] }, ], }, + Object { + "editor": [Function], + "id": "tooltip_options", + "mapTo": "tooltipOptions", + "name": "Tooltip options", + "schemas": Array [ + Object { + "component": null, + "mapTo": "tooltipMode", + "name": "Tooltip mode", + "props": Object { + "defaultSelections": Array [ + Object { + "id": "show", + "name": "Show", + }, + ], + "options": Array [ + Object { + "id": "show", + "name": "Show", + }, + Object { + "id": "hidden", + "name": "Hidden", + }, + ], + }, + }, + Object { + "component": null, + "mapTo": "tooltipText", + "name": "Tooltip text", + "props": Object { + "defaultSelections": Array [ + Object { + "id": "all", + "name": "All", + }, + ], + "options": Array [ + Object { + "id": "all", + "name": "All", + }, + Object { + "id": "x", + "name": "Dimension", + }, + Object { + "id": "y", + "name": "Metrics", + }, + ], + }, + }, + ], + }, Object { "editor": [Function], "id": "legend", @@ -8148,14 +9374,14 @@ exports[`Config panel component Renders config panel with visualization data 1`] }, Object { "editor": [Function], - "id": "legend", - "mapTo": "legend", - "name": "Legend", + "id": "tooltip_options", + "mapTo": "tooltipOptions", + "name": "Tooltip options", "schemas": Array [ Object { "component": null, - "mapTo": "showLegend", - "name": "Show Legend", + "mapTo": "tooltipMode", + "name": "Tooltip mode", "props": Object { "defaultSelections": Array [ Object { @@ -8177,23 +9403,27 @@ exports[`Config panel component Renders config panel with visualization data 1`] }, Object { "component": null, - "mapTo": "position", - "name": "Position", + "mapTo": "tooltipText", + "name": "Tooltip text", "props": Object { "defaultSelections": Array [ Object { - "id": "v", - "name": "Right", + "id": "all", + "name": "All", }, ], "options": Array [ Object { - "id": "v", - "name": "Right", + "id": "all", + "name": "All", }, Object { - "id": "h", - "name": "Bottom", + "id": "x", + "name": "Dimension", + }, + Object { + "id": "y", + "name": "Metrics", }, ], }, @@ -8202,19 +9432,73 @@ exports[`Config panel component Renders config panel with visualization data 1`] }, Object { "editor": [Function], - "id": "chart_styles", - "mapTo": "chartStyles", - "name": "Chart styles", + "id": "legend", + "mapTo": "legend", + "name": "Legend", "schemas": Array [ Object { - "component": [Function], - "eleType": "buttons", - "mapTo": "orientation", - "name": "Orientation", + "component": null, + "mapTo": "showLegend", + "name": "Show Legend", "props": Object { "defaultSelections": Array [ Object { - "id": "v", + "id": "show", + "name": "Show", + }, + ], + "options": Array [ + Object { + "id": "show", + "name": "Show", + }, + Object { + "id": "hidden", + "name": "Hidden", + }, + ], + }, + }, + Object { + "component": null, + "mapTo": "position", + "name": "Position", + "props": Object { + "defaultSelections": Array [ + Object { + "id": "v", + "name": "Right", + }, + ], + "options": Array [ + Object { + "id": "v", + "name": "Right", + }, + Object { + "id": "h", + "name": "Bottom", + }, + ], + }, + }, + ], + }, + Object { + "editor": [Function], + "id": "chart_styles", + "mapTo": "chartStyles", + "name": "Chart styles", + "schemas": Array [ + Object { + "component": [Function], + "eleType": "buttons", + "mapTo": "orientation", + "name": "Orientation", + "props": Object { + "defaultSelections": Array [ + Object { + "id": "v", "name": "Vertical", }, ], @@ -8933,71 +10217,1403 @@ exports[`Config panel component Renders config panel with visualization data 1`] compressed={false} icon={ Object { - "aria-label": "Open list of options", - "data-test-subj": "comboBoxToggleListButton", - "disabled": undefined, - "onClick": [Function], - "ref": [Function], - "side": "right", - "type": "arrowDown", + "aria-label": "Open list of options", + "data-test-subj": "comboBoxToggleListButton", + "disabled": undefined, + "onClick": [Function], + "ref": [Function], + "side": "right", + "type": "arrowDown", + } + } + > +
+ + + +
+ + + + + + + + + +
+ +
+ + + + + + + + + + +
+
+ + +
+
+ +
+
+ +
+
+ + +

+ Tooltip mode +

+ + +
+ +
+ +
+ + + Tooltip mode + + +
+ + + + + + + + + + +
+
+ +
+ + +
+ + + +

+ Tooltip text +

+ + +
+ +
+ +
+ + + Tooltip text + + +
+ + + + + + + + + + + + +
-
- - -
- - + + Metrics + + + + + + +
+ + +
+ @@ -9011,7 +11627,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
- +
@@ -9302,6 +11918,64 @@ exports[`Config panel component Renders config panel with visualization data 1`] }, ], }, + Object { + "editor": [Function], + "id": "tooltip_options", + "mapTo": "tooltipOptions", + "name": "Tooltip options", + "schemas": Array [ + Object { + "component": null, + "mapTo": "tooltipMode", + "name": "Tooltip mode", + "props": Object { + "defaultSelections": Array [ + Object { + "id": "show", + "name": "Show", + }, + ], + "options": Array [ + Object { + "id": "show", + "name": "Show", + }, + Object { + "id": "hidden", + "name": "Hidden", + }, + ], + }, + }, + Object { + "component": null, + "mapTo": "tooltipText", + "name": "Tooltip text", + "props": Object { + "defaultSelections": Array [ + Object { + "id": "all", + "name": "All", + }, + ], + "options": Array [ + Object { + "id": "all", + "name": "All", + }, + Object { + "id": "x", + "name": "Dimension", + }, + Object { + "id": "y", + "name": "Metrics", + }, + ], + }, + }, + ], + }, Object { "editor": [Function], "id": "legend", @@ -10556,6 +13230,64 @@ exports[`Config panel component Renders config panel with visualization data 1`] }, ], }, + Object { + "editor": [Function], + "id": "tooltip_options", + "mapTo": "tooltipOptions", + "name": "Tooltip options", + "schemas": Array [ + Object { + "component": null, + "mapTo": "tooltipMode", + "name": "Tooltip mode", + "props": Object { + "defaultSelections": Array [ + Object { + "id": "show", + "name": "Show", + }, + ], + "options": Array [ + Object { + "id": "show", + "name": "Show", + }, + Object { + "id": "hidden", + "name": "Hidden", + }, + ], + }, + }, + Object { + "component": null, + "mapTo": "tooltipText", + "name": "Tooltip text", + "props": Object { + "defaultSelections": Array [ + Object { + "id": "all", + "name": "All", + }, + ], + "options": Array [ + Object { + "id": "all", + "name": "All", + }, + Object { + "id": "x", + "name": "Dimension", + }, + Object { + "id": "y", + "name": "Metrics", + }, + ], + }, + }, + ], + }, Object { "editor": [Function], "id": "legend", @@ -13367,6 +16099,64 @@ exports[`Config panel component Renders config panel with visualization data 1`] }, ], }, + Object { + "editor": [Function], + "id": "tooltip_options", + "mapTo": "tooltipOptions", + "name": "Tooltip options", + "schemas": Array [ + Object { + "component": null, + "mapTo": "tooltipMode", + "name": "Tooltip mode", + "props": Object { + "defaultSelections": Array [ + Object { + "id": "show", + "name": "Show", + }, + ], + "options": Array [ + Object { + "id": "show", + "name": "Show", + }, + Object { + "id": "hidden", + "name": "Hidden", + }, + ], + }, + }, + Object { + "component": null, + "mapTo": "tooltipText", + "name": "Tooltip text", + "props": Object { + "defaultSelections": Array [ + Object { + "id": "all", + "name": "All", + }, + ], + "options": Array [ + Object { + "id": "all", + "name": "All", + }, + Object { + "id": "x", + "name": "Dimension", + }, + Object { + "id": "y", + "name": "Metrics", + }, + ], + }, + }, + ], + }, Object { "editor": [Function], "id": "legend", diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_tooltip.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_tooltip.tsx new file mode 100644 index 000000000..3697d29f6 --- /dev/null +++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_tooltip.tsx @@ -0,0 +1,54 @@ +/* + * Copyright OpenSearch Contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +import React, { useCallback, useMemo } from 'react'; +import { EuiAccordion, EuiSpacer } from '@elastic/eui'; +import { ButtonGroupItem } from './config_button_group'; +import { IConfigPanelOptionSection } from '../../../../../../../../common/types/explorer'; + +export const ConfigTooltip = ({ schemas, vizState, handleConfigChange }: any) => { + const handleConfigurationChange = useCallback( + (stateFiledName) => { + return (changes) => { + handleConfigChange({ + ...vizState, + [stateFiledName]: changes, + }); + }; + }, + [handleConfigChange, vizState] + ); + + + const dimensions = useMemo(() => { + return schemas.map((schema: IConfigPanelOptionSection, index: number) => { + const DimensionComponent = schema.component || ButtonGroupItem; + const params = { + title: schema.name, + legend: schema.name, + groupOptions: schema?.props?.options.map((btn: { name: string }) => ({ + ...btn, + label: btn.name, + })), + idSelected: vizState[schema.mapTo] || schema?.props?.defaultSelections[0]?.id, + handleButtonChange: handleConfigurationChange(schema.mapTo), + vizState, + ...schema.props, + }; + return ( + <> + + + + ); + }); + }, [schemas, vizState, handleConfigurationChange]); + + return ( + + {dimensions} + + ); +}; diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/index.ts b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/index.ts index 42a95839d..eb3507d85 100644 --- a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/index.ts +++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/index.ts @@ -13,6 +13,7 @@ export { ConfigGaugeValueOptions } from './config_gauge_options'; export { ColorPalettePicker } from './config_color_palette_picker'; export { ConfigLineChartStyles } from './config_line_chart_styles'; export { ConfigLegend } from './config_legend'; +export { ConfigTooltip } from './config_tooltip'; export { HeatmapColorPalettePicker } from './config_heatmap_color_palette_picker'; export { SingleColorPicker } from './config_single_color_picker'; export { PanelItem } from './config_panel_item'; 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 1d19db62f..df57922d2 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 @@ -234,6 +234,64 @@ exports[`Bar component Renders bar component 1`] = ` }, ], }, + Object { + "editor": [Function], + "id": "tooltip_options", + "mapTo": "tooltipOptions", + "name": "Tooltip options", + "schemas": Array [ + Object { + "component": null, + "mapTo": "tooltipMode", + "name": "Tooltip mode", + "props": Object { + "defaultSelections": Array [ + Object { + "id": "show", + "name": "Show", + }, + ], + "options": Array [ + Object { + "id": "show", + "name": "Show", + }, + Object { + "id": "hidden", + "name": "Hidden", + }, + ], + }, + }, + Object { + "component": null, + "mapTo": "tooltipText", + "name": "Tooltip text", + "props": Object { + "defaultSelections": Array [ + Object { + "id": "all", + "name": "All", + }, + ], + "options": Array [ + Object { + "id": "all", + "name": "All", + }, + Object { + "id": "x", + "name": "Dimension", + }, + Object { + "id": "y", + "name": "Metrics", + }, + ], + }, + }, + ], + }, Object { "editor": [Function], "id": "legend", @@ -494,6 +552,7 @@ exports[`Bar component Renders bar component 1`] = ` data={ Array [ Object { + "hoverinfo": "all", "marker": Object { "color": "rgba(60,161,199,0.4)", "line": Object { @@ -560,6 +619,7 @@ exports[`Bar component Renders bar component 1`] = ` data={ Array [ Object { + "hoverinfo": "all", "marker": Object { "color": "rgba(60,161,199,0.4)", "line": Object { 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 edcc736fb..48807a3fb 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 @@ -234,6 +234,64 @@ exports[`Heatmap component Renders heatmap component 1`] = ` }, ], }, + Object { + "editor": [Function], + "id": "tooltip_options", + "mapTo": "tooltipOptions", + "name": "Tooltip options", + "schemas": Array [ + Object { + "component": null, + "mapTo": "tooltipMode", + "name": "Tooltip mode", + "props": Object { + "defaultSelections": Array [ + Object { + "id": "show", + "name": "Show", + }, + ], + "options": Array [ + Object { + "id": "show", + "name": "Show", + }, + Object { + "id": "hidden", + "name": "Hidden", + }, + ], + }, + }, + Object { + "component": null, + "mapTo": "tooltipText", + "name": "Tooltip text", + "props": Object { + "defaultSelections": Array [ + Object { + "id": "all", + "name": "All", + }, + ], + "options": Array [ + Object { + "id": "all", + "name": "All", + }, + Object { + "id": "x", + "name": "Dimension", + }, + Object { + "id": "y", + "name": "Metrics", + }, + ], + }, + }, + ], + }, Object { "editor": [Function], "id": "legend", 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 f33447ece..dc43d1569 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 @@ -234,6 +234,64 @@ exports[`Histogram component Renders histogram component 1`] = ` }, ], }, + Object { + "editor": [Function], + "id": "tooltip_options", + "mapTo": "tooltipOptions", + "name": "Tooltip options", + "schemas": Array [ + Object { + "component": null, + "mapTo": "tooltipMode", + "name": "Tooltip mode", + "props": Object { + "defaultSelections": Array [ + Object { + "id": "show", + "name": "Show", + }, + ], + "options": Array [ + Object { + "id": "show", + "name": "Show", + }, + Object { + "id": "hidden", + "name": "Hidden", + }, + ], + }, + }, + Object { + "component": null, + "mapTo": "tooltipText", + "name": "Tooltip text", + "props": Object { + "defaultSelections": Array [ + Object { + "id": "all", + "name": "All", + }, + ], + "options": Array [ + Object { + "id": "all", + "name": "All", + }, + Object { + "id": "x", + "name": "Dimension", + }, + Object { + "id": "y", + "name": "Metrics", + }, + ], + }, + }, + ], + }, Object { "editor": [Function], "id": "legend", @@ -494,6 +552,7 @@ exports[`Histogram component Renders histogram component 1`] = ` data={ Array [ Object { + "hoverinfo": "all", "marker": Object { "color": "rgba(60,161,199,0.2)", "line": Object { @@ -546,6 +605,7 @@ exports[`Histogram component Renders histogram component 1`] = ` data={ Array [ Object { + "hoverinfo": "all", "marker": Object { "color": "rgba(60,161,199,0.2)", "line": Object { 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 6a486d18d..9f53e16ac 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 @@ -234,6 +234,64 @@ exports[`Line component Renders line component 1`] = ` }, ], }, + Object { + "editor": [Function], + "id": "tooltip_options", + "mapTo": "tooltipOptions", + "name": "Tooltip options", + "schemas": Array [ + Object { + "component": null, + "mapTo": "tooltipMode", + "name": "Tooltip mode", + "props": Object { + "defaultSelections": Array [ + Object { + "id": "show", + "name": "Show", + }, + ], + "options": Array [ + Object { + "id": "show", + "name": "Show", + }, + Object { + "id": "hidden", + "name": "Hidden", + }, + ], + }, + }, + Object { + "component": null, + "mapTo": "tooltipText", + "name": "Tooltip text", + "props": Object { + "defaultSelections": Array [ + Object { + "id": "all", + "name": "All", + }, + ], + "options": Array [ + Object { + "id": "all", + "name": "All", + }, + Object { + "id": "x", + "name": "Dimension", + }, + Object { + "id": "y", + "name": "Metrics", + }, + ], + }, + }, + ], + }, Object { "editor": [Function], "id": "legend", 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 9e7b4976a..e3707e754 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 @@ -234,6 +234,64 @@ exports[`Pie component Renders pie component 1`] = ` }, ], }, + Object { + "editor": [Function], + "id": "tooltip_options", + "mapTo": "tooltipOptions", + "name": "Tooltip options", + "schemas": Array [ + Object { + "component": null, + "mapTo": "tooltipMode", + "name": "Tooltip mode", + "props": Object { + "defaultSelections": Array [ + Object { + "id": "show", + "name": "Show", + }, + ], + "options": Array [ + Object { + "id": "show", + "name": "Show", + }, + Object { + "id": "hidden", + "name": "Hidden", + }, + ], + }, + }, + Object { + "component": null, + "mapTo": "tooltipText", + "name": "Tooltip text", + "props": Object { + "defaultSelections": Array [ + Object { + "id": "all", + "name": "All", + }, + ], + "options": Array [ + Object { + "id": "all", + "name": "All", + }, + Object { + "id": "x", + "name": "Dimension", + }, + Object { + "id": "y", + "name": "Metrics", + }, + ], + }, + }, + ], + }, Object { "editor": [Function], "id": "legend", 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 1438329ba..0cfcf048c 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 @@ -217,6 +217,64 @@ exports[`Text component Renders text component 1`] = ` }, ], }, + Object { + "editor": [Function], + "id": "tooltip_options", + "mapTo": "tooltipOptions", + "name": "Tooltip options", + "schemas": Array [ + Object { + "component": null, + "mapTo": "tooltipMode", + "name": "Tooltip mode", + "props": Object { + "defaultSelections": Array [ + Object { + "id": "show", + "name": "Show", + }, + ], + "options": Array [ + Object { + "id": "show", + "name": "Show", + }, + Object { + "id": "hidden", + "name": "Hidden", + }, + ], + }, + }, + Object { + "component": null, + "mapTo": "tooltipText", + "name": "Tooltip text", + "props": Object { + "defaultSelections": Array [ + Object { + "id": "all", + "name": "All", + }, + ], + "options": Array [ + Object { + "id": "all", + "name": "All", + }, + Object { + "id": "x", + "name": "Dimension", + }, + Object { + "id": "y", + "name": "Metrics", + }, + ], + }, + }, + ], + }, Object { "editor": [Function], "id": "legend", 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 183c9b4ad..ab90316ec 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 @@ -234,6 +234,64 @@ exports[`Treemap component Renders treemap component 1`] = ` }, ], }, + Object { + "editor": [Function], + "id": "tooltip_options", + "mapTo": "tooltipOptions", + "name": "Tooltip options", + "schemas": Array [ + Object { + "component": null, + "mapTo": "tooltipMode", + "name": "Tooltip mode", + "props": Object { + "defaultSelections": Array [ + Object { + "id": "show", + "name": "Show", + }, + ], + "options": Array [ + Object { + "id": "show", + "name": "Show", + }, + Object { + "id": "hidden", + "name": "Hidden", + }, + ], + }, + }, + Object { + "component": null, + "mapTo": "tooltipText", + "name": "Tooltip text", + "props": Object { + "defaultSelections": Array [ + Object { + "id": "all", + "name": "All", + }, + ], + "options": Array [ + Object { + "id": "all", + "name": "All", + }, + Object { + "id": "x", + "name": "Dimension", + }, + Object { + "id": "y", + "name": "Metrics", + }, + ], + }, + }, + ], + }, Object { "editor": [Function], "id": "legend", @@ -494,6 +552,7 @@ exports[`Treemap component Renders treemap component 1`] = ` data={ Array [ Object { + "hoverinfo": "all", "labels": Array [ "error", "info", @@ -556,6 +615,7 @@ exports[`Treemap component Renders treemap component 1`] = ` data={ Array [ Object { + "hoverinfo": "all", "labels": Array [ "error", "info", diff --git a/dashboards-observability/public/components/visualizations/charts/bar/bar.tsx b/dashboards-observability/public/components/visualizations/charts/bar/bar.tsx index 1969401fa..2e4999e31 100644 --- a/dashboards-observability/public/components/visualizations/charts/bar/bar.tsx +++ b/dashboards-observability/public/components/visualizations/charts/bar/bar.tsx @@ -33,6 +33,8 @@ export const Bar = ({ visualizations, layout, config }: any) => { const { defaultAxes } = visualizations.data; const tickAngle = dataConfig?.chartStyles?.rotateBarLabels || vis.labelAngle const lineWidth = dataConfig?.chartStyles?.lineWidth || vis.lineWidth; + const tooltipMode = dataConfig?.tooltipOptions?.tooltipMode !== undefined ? dataConfig?.tooltipOptions?.tooltipMode : 'show'; + const tooltipText = dataConfig?.tooltipOptions?.tooltipText !== undefined ? dataConfig?.tooltipOptions?.tooltipText : 'all'; 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); @@ -69,6 +71,7 @@ export const Bar = ({ visualizations, layout, config }: any) => { } }, name: field.name, + hoverinfo: tooltipMode === 'hidden' ? 'none' : tooltipText, orientation: barOrientation, }; }); 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 eef1db58c..5c289404b 100644 --- a/dashboards-observability/public/components/visualizations/charts/bar/bar_type.ts +++ b/dashboards-observability/public/components/visualizations/charts/bar/bar_type.ts @@ -16,6 +16,7 @@ import { SliderConfig } from '../../../event_analytics/explorer/visualizations/c import { ConfigLegend } from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_legend'; import { DefaultChartStyles } from '../../../../../common/constants/shared'; import { ConfigColorTheme } from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_color_theme'; +import { fetchConfigObject } from '../shared/helper'; const sharedConfigs = getPlotlySharedConfigs(); const VIS_CATEGORY = getPlotlyCategory(); @@ -72,6 +73,14 @@ export const createBarTypeDefinition = (params: any) => ({ }, ], }, + fetchConfigObject('Tooltip', { + options: [ + { name: 'All', id: 'all' }, + { name: 'Dimension', id: 'x' }, + { name: 'Metrics', id: 'y' }, + ], + defaultSelections: [{ name: 'All', id: 'all' }], + }), { id: 'legend', name: 'Legend', @@ -84,8 +93,8 @@ export const createBarTypeDefinition = (params: any) => ({ component: null, props: { options: [ - { name: 'Show', id: "show" }, - { name: 'Hidden', id: "hidden" }, + { name: 'Show', id: 'show' }, + { name: 'Hidden', id: 'hidden' }, ], defaultSelections: [{ name: 'Show', id: ShowLegend }], }, @@ -143,17 +152,16 @@ export const createBarTypeDefinition = (params: any) => ({ eleType: 'slider', defaultState: 0, props: { - ticks: - [ - { label: '-90°', value: -90 }, - { label: '-45°', value: -45 }, - { label: '0°', value: 0 }, - { label: '45°', value: 45 }, - { label: '90°', value: 90 }, - ], + ticks: [ + { label: '-90°', value: -90 }, + { label: '-45°', value: -45 }, + { label: '0°', value: 0 }, + { label: '45°', value: 45 }, + { label: '90°', value: 90 }, + ], showTicks: true, min: -90, - max: 90 + max: 90, }, }, { diff --git a/dashboards-observability/public/components/visualizations/charts/histogram/histogram.tsx b/dashboards-observability/public/components/visualizations/charts/histogram/histogram.tsx index 99686e60b..ed8be9a94 100644 --- a/dashboards-observability/public/components/visualizations/charts/histogram/histogram.tsx +++ b/dashboards-observability/public/components/visualizations/charts/histogram/histogram.tsx @@ -28,6 +28,8 @@ export const Histogram = ({ visualizations, layout, config }: any) => { const legendPosition = dataConfig?.legend?.position || LegendPosition; const fillOpacity = (dataConfig?.chartStyles?.fillOpacity || FillOpacity) / FILLOPACITY_DIV_FACTOR; + const tooltipMode = dataConfig?.tooltipOptions?.tooltipMode !== undefined ? dataConfig?.tooltipOptions?.tooltipMode : 'show'; + const tooltipText = dataConfig?.tooltipOptions?.tooltipText !== undefined ? dataConfig?.tooltipOptions?.tooltipText : 'all'; const valueSeries = defaultAxes?.yaxis || take(fields, lastIndex > 0 ? lastIndex : 1); @@ -55,6 +57,7 @@ export const Histogram = ({ visualizations, layout, config }: any) => { x: data[field.name], type: 'histogram', name: field.name, + hoverinfo: tooltipMode === 'hidden' ? 'none' : tooltipText, marker: { color: selectedColorTheme(field, index, fillOpacity), line: { 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..8be3c3144 100644 --- a/dashboards-observability/public/components/visualizations/charts/histogram/histogram_type.ts +++ b/dashboards-observability/public/components/visualizations/charts/histogram/histogram_type.ts @@ -12,9 +12,9 @@ import { ConfigLegend, SliderConfig, ConfigColorTheme, - ConfigThresholds, } from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/config_controls'; import { DefaultChartStyles } from '../../../../../common/constants/shared'; +import { fetchConfigObject } from '../shared/helper'; const sharedConfigs = getPlotlySharedConfigs(); const VIS_CATEGORY = getPlotlyCategory(); @@ -75,6 +75,14 @@ export const createHistogramVisDefinition = (params = {}) => ({ mapTo: 'colorTheme', schemas: [], }, + fetchConfigObject('Tooltip', { + options: [ + { name: 'All', id: 'all' }, + { name: 'Dimension', id: 'x' }, + { name: 'Metrics', id: 'y' }, + ], + defaultSelections: [{ name: 'All', id: 'all' }], + }), { id: 'legend', name: 'Legend', diff --git a/dashboards-observability/public/components/visualizations/charts/lines/line.tsx b/dashboards-observability/public/components/visualizations/charts/lines/line.tsx index c2429b14f..3f7e0092f 100644 --- a/dashboards-observability/public/components/visualizations/charts/lines/line.tsx +++ b/dashboards-observability/public/components/visualizations/charts/lines/line.tsx @@ -38,11 +38,11 @@ export const Line = ({ visualizations, layout, config }: any) => { availabilityConfig = {}, } = visualizations?.data?.userConfigs; - const dataConfigTab = - visualizations.data?.rawVizData?.line?.dataConfig && - visualizations.data.rawVizData.line.dataConfig; - const xaxis = dataConfigTab?.dimensions ? dataConfigTab?.dimensions.filter((item) => item.label) : []; - const yaxis = dataConfigTab?.metrics ? dataConfigTab?.metrics.filter((item) => item.label) : []; + const dataConfigTab = visualizations.data?.rawVizData?.line?.dataConfig && visualizations.data.rawVizData.line.dataConfig; + const xaxis = dataConfigTab?.dimensions ? dataConfigTab?.dimensions.filter((item) => item.label) : []; + const yaxis = dataConfigTab?.metrics ? dataConfigTab?.metrics.filter((item) => item.label) : []; + const tooltipMode = dataConfig?.tooltipOptions?.tooltipMode !== undefined ? dataConfig?.tooltipOptions?.tooltipMode : 'show'; + const tooltipText = dataConfig?.tooltipOptions?.tooltipText !== undefined ? dataConfig?.tooltipOptions?.tooltipText : 'all'; const lastIndex = fields.length - 1; @@ -130,6 +130,7 @@ export const Line = ({ visualizations, layout, config }: any) => { width: lineWidth, color: selectedColor, }, + hoverinfo: tooltipMode === 'hidden' ? 'none' : tooltipText, marker: { size: markerSize, ...(isBarMode && barMarker), 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..2597dafe9 100644 --- a/dashboards-observability/public/components/visualizations/charts/lines/line_type.ts +++ b/dashboards-observability/public/components/visualizations/charts/lines/line_type.ts @@ -20,6 +20,7 @@ import { ConfigAvailability } from '../../../event_analytics/explorer/visualizat import { DefaultChartStyles } from '../../../../../common/constants/shared'; import { ButtonGroupItem } from '../../../../../public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_button_group'; import { SliderConfig } from '../../../../../public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_style_slider'; +import { fetchConfigObject } from '../shared/helper'; const sharedConfigs = getPlotlySharedConfigs(); const VIS_CATEGORY = getPlotlyCategory(); const { @@ -94,6 +95,14 @@ export const createLineTypeDefinition = (params: any = {}) => ({ }, ], }, + fetchConfigObject('Tooltip', { + options: [ + { name: 'All', id: 'all' }, + { name: 'Dimension', id: 'x' }, + { name: 'Metrics', id: 'y' }, + ], + defaultSelections: [{ name: 'All', id: 'all' }], + }), { id: 'chart_styles', name: 'Chart styles', diff --git a/dashboards-observability/public/components/visualizations/charts/maps/heatmap.tsx b/dashboards-observability/public/components/visualizations/charts/maps/heatmap.tsx index 7eea24a4e..e1feffa03 100644 --- a/dashboards-observability/public/components/visualizations/charts/maps/heatmap.tsx +++ b/dashboards-observability/public/components/visualizations/charts/maps/heatmap.tsx @@ -48,6 +48,8 @@ export const HeatMap = ({ visualizations, layout, config }: any) => { const uniqueXaxis = uniq(data[xaxisField.label]); const uniqueYaxisLength = uniqueYaxis.length; const uniqueXaxisLength = uniqueXaxis.length; + const tooltipMode = dataConfig?.tooltipOptions?.tooltipMode !== undefined ? dataConfig?.tooltipOptions?.tooltipMode : 'show'; + const tooltipText = dataConfig?.tooltipOptions?.tooltipText !== undefined ? dataConfig?.tooltipOptions?.tooltipText : 'all'; const colorField = dataConfig?.chartStyles ? dataConfig?.chartStyles.colorMode && dataConfig?.chartStyles.colorMode[0].name === OPACITY @@ -112,6 +114,7 @@ export const HeatMap = ({ visualizations, layout, config }: any) => { z: calculatedHeapMapZaxis, x: uniqueXaxis, y: uniqueYaxis, + hoverinfo: tooltipMode === 'hidden' ? 'none' : tooltipText, colorscale: colorField.name === SINGLE_COLOR_PALETTE ? traceColor : colorField.name, type: 'heatmap', showscale: showColorscale === 'show', 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..cce5cee2d 100644 --- a/dashboards-observability/public/components/visualizations/charts/maps/heatmap_type.ts +++ b/dashboards-observability/public/components/visualizations/charts/maps/heatmap_type.ts @@ -9,7 +9,6 @@ import { LensIconChartPie } from '../../assets/chart_pie'; 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, HeatmapColorPalettePicker, ConfigChartOptions, PanelItem, @@ -21,6 +20,7 @@ import { HEATMAP_SINGLE_COLOR, HEATMAP_PALETTE_COLOR, } from '../../../../../common/constants/colors'; +import { fetchConfigObject } from '../shared/helper'; const sharedConfigs = getPlotlySharedConfigs(); const VIS_CATEGORY = getPlotlyCategory(); @@ -45,6 +45,15 @@ export const createMapsVisDefinition = () => ({ mapTo: 'dataConfig', editor: VizDataPanel, sections: [ + fetchConfigObject('Tooltip', { + options: [ + { name: 'All', id: 'all' }, + { name: 'Dim 1', id: 'x' }, + { name: 'Dim 2', id: 'y' }, + { name: 'Metrics', id: 'z' }, + ], + defaultSelections: [{ name: 'All', id: 'all' }], + }), { id: 'legend', name: 'Legend', 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..0554e71e6 100644 --- a/dashboards-observability/public/components/visualizations/charts/maps/treemap_type.ts +++ b/dashboards-observability/public/components/visualizations/charts/maps/treemap_type.ts @@ -17,6 +17,7 @@ import { import { DEFAULT_PALETTE, COLOR_PALETTES } from '../../../../../common/constants/colors'; import { ButtonGroupItem } from '../../../../../public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_button_group'; import { DefaultChartStyles } from '../../../../../common/constants/shared'; +import { fetchConfigObject } from '../shared/helper'; const sharedConfigs = getPlotlySharedConfigs(); const VIS_CATEGORY = getPlotlyCategory(); @@ -49,6 +50,14 @@ export const createTreeMapDefinition = (params: BarTypeParams = {}) => ({ mapTo: 'dataConfig', editor: VizDataPanel, sections: [ + fetchConfigObject('Tooltip', { + options: [ + { name: 'All', id: 'all' }, + { name: 'Label', id: 'label' }, + { name: 'Value', id: 'value' }, + ], + defaultSelections: [{ name: 'All', id: 'all' }], + }), { id: 'legend', name: 'Legend', diff --git a/dashboards-observability/public/components/visualizations/charts/maps/treemaps.tsx b/dashboards-observability/public/components/visualizations/charts/maps/treemaps.tsx index 0572d9563..094ab58af 100644 --- a/dashboards-observability/public/components/visualizations/charts/maps/treemaps.tsx +++ b/dashboards-observability/public/components/visualizations/charts/maps/treemaps.tsx @@ -37,6 +37,9 @@ export const TreeMap = ({ visualizations, layout, config }: any) => { ? visualizations.data?.rawVizData?.tree_map?.dataConfig?.dimensions[0].parentFields : []; + const tooltipMode = dataConfig?.tooltipOptions?.tooltipMode !== undefined ? dataConfig?.tooltipOptions?.tooltipMode : 'show'; + const tooltipText = dataConfig?.tooltipOptions?.tooltipText !== undefined ? dataConfig?.tooltipOptions?.tooltipText : 'all'; + const valueField = visualizations.data?.rawVizData?.tree_map?.dataConfig?.metrics && visualizations.data?.rawVizData?.tree_map?.dataConfig.metrics[0].valueField @@ -165,6 +168,7 @@ export const TreeMap = ({ visualizations, layout, config }: any) => { labels: labelsArray, parents: parentsArray, values: valuesArray, + hoverinfo: tooltipMode === 'hidden' ? 'none' : tooltipText, textinfo: 'label+value+percent parent+percent entry', tiling: { packing: tilingAlgorithm.value, diff --git a/dashboards-observability/public/components/visualizations/charts/pie/pie.tsx b/dashboards-observability/public/components/visualizations/charts/pie/pie.tsx index 3a1856361..3a73cb70d 100644 --- a/dashboards-observability/public/components/visualizations/charts/pie/pie.tsx +++ b/dashboards-observability/public/components/visualizations/charts/pie/pie.tsx @@ -32,6 +32,8 @@ export const Pie = ({ visualizations, layout, config }: any) => { const legendPosition = dataConfig?.legend?.position || vis.legendPosition; const legendSize = dataConfig?.legend?.size || vis.legendSize; const labelSize = dataConfig?.chartStyles?.labelSize || vis.labelSize; + const tooltipMode = dataConfig?.tooltipOptions?.tooltipMode !== undefined ? dataConfig?.tooltipOptions?.tooltipMode : 'show'; + const tooltipText = dataConfig?.tooltipOptions?.tooltipText !== undefined ? dataConfig?.tooltipOptions?.tooltipText : 'all'; if (isEmpty(xaxis) || isEmpty(yaxis)) return ; @@ -87,6 +89,7 @@ export const Pie = ({ visualizations, layout, config }: any) => { hole: type === 'pie' ? 0 : 0.5, text: field.name, textinfo: 'percent', + hoverinfo: tooltipMode === 'hidden' ? 'none' : tooltipText, automargin: true, textposition: 'outside', domain: { 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..4da9317bf 100644 --- a/dashboards-observability/public/components/visualizations/charts/pie/pie_type.ts +++ b/dashboards-observability/public/components/visualizations/charts/pie/pie_type.ts @@ -16,6 +16,7 @@ import { InputFieldItem, } from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/config_controls'; import { DEFAULT_PALETTE, PIE_PALETTES } from '../../../../../common/constants/colors'; +import { fetchConfigObject } from '../shared/helper'; const sharedConfigs = getPlotlySharedConfigs(); @@ -83,6 +84,15 @@ export const createPieTypeDefinition = (params: any) => ({ }, ], }, + fetchConfigObject('Tooltip', { + options: [ + { name: 'All', id: 'all' }, + { name: 'Label', id: 'label' }, + { name: 'Value', id: 'value' }, + { name: 'Percent', id: 'percent' }, + ], + defaultSelections: [{ name: 'All', id: 'all' }], + }), { id: 'chart_styles', name: 'Chart Styles', diff --git a/dashboards-observability/public/components/visualizations/charts/shared/helper.ts b/dashboards-observability/public/components/visualizations/charts/shared/helper.ts new file mode 100644 index 000000000..2b1f54a2f --- /dev/null +++ b/dashboards-observability/public/components/visualizations/charts/shared/helper.ts @@ -0,0 +1,40 @@ +/* + * Copyright OpenSearch Contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +import { ConfigTooltip } from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/config_controls'; + +export const fetchConfigObject = (editor: string, propsOptions: any) => { + switch (editor) { + case 'Tooltip': + return { + id: 'tooltip_options', + name: 'Tooltip options', + editor: ConfigTooltip, + mapTo: 'tooltipOptions', + schemas: [ + { + name: 'Tooltip mode', + component: null, + mapTo: 'tooltipMode', + props: { + options: [ + { name: 'Show', id: 'show' }, + { name: 'Hidden', id: 'hidden' }, + ], + defaultSelections: [{ name: 'Show', id: 'show' }], + }, + }, + { + name: 'Tooltip text', + component: null, + mapTo: 'tooltipText', + props: propsOptions, + }, + ], + }; + default: + return null; + } +};