Feature/tooltip-section: Added tooltip options for various charts (#952)

* Fix for app crash and dimension disaapearing Signed-off-by: ruchika-narang <[email protected]> * optimized the code and updated snapshots Signed-off-by: Shankha Das <[email protected]> * resolved PR comments Signed-off-by: Shankha Das <[email protected]> * added tooltip options Signed-off-by: Shankha Das <[email protected]> * removed log Signed-off-by: Shankha Das <[email protected]> Signed-off-by: ruchika-narang <[email protected]> Signed-off-by: Shankha Das <[email protected]> Co-authored-by: ruchika-narang <[email protected]>
opensearch-project · Aug 26, 2022 · 79197db · 79197db
1 parent d5745db
commit 79197db
Show file tree

Hide file tree

Showing 24 changed files with 3,899 additions and 140 deletions.
diff --git a/...ility/public/components/custom_panels/helpers/__tests__/__snapshots__/utils.test.tsx.snap b/...ility/public/components/custom_panels/helpers/__tests__/__snapshots__/utils.test.tsx.snap
diff --git a/...s/explorer/visualizations/config_panel/__tests__/__snapshots__/config_panel.test.tsx.snap b/...s/explorer/visualizations/config_panel/__tests__/__snapshots__/config_panel.test.tsx.snap
diff --git a/...tics/explorer/visualizations/config_panel/config_panes/config_controls/config_tooltip.tsx b/...tics/explorer/visualizations/config_panel/config_panes/config_controls/config_tooltip.tsx
@@ -0,0 +1,58 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useCallback, useMemo } from 'react';
+import { EuiAccordion, EuiSpacer, htmlIdGenerator } 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: any) => {
+        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 (
+        <div id={htmlIdGenerator('dimension__component')()}>
+          <DimensionComponent key={`viz-series-${index}`} {...params} />
+          <EuiSpacer size="s" />
+        </div>
+      );
+    });
+  }, [schemas, vizState, handleConfigurationChange]);
+
+  return (
+    <EuiAccordion
+      initialIsOpen
+      id={htmlIdGenerator('configPanel__tooltip')()}
+      buttonContent="Tooltip options"
+      paddingSize="s"
+    >
+      {dimensions}
+    </EuiAccordion>
+  );
+};
diff --git a/...vent_analytics/explorer/visualizations/config_panel/config_panes/config_controls/index.ts b/...vent_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/event_analytics/utils/utils.tsx b/dashboards-observability/public/components/event_analytics/utils/utils.tsx
@@ -14,6 +14,7 @@ import { HttpStart } from '../../../../../../src/core/public';
 import PPLService from '../../../services/requests/ppl';
 import { TIME_INTERVAL_OPTIONS } from '../../../../common/constants/explorer';
 import { PPL_DATE_FORMAT, PPL_INDEX_REGEX } from '../../../../common/constants/shared';
+import { ConfigTooltip } from '../explorer/visualizations/config_panel/config_panes/config_controls';
 
 // Create Individual table rows for events datagrid and flyouts
 export const getTrs = (
@@ -318,3 +319,38 @@ export const lightenColor = (color: string, percent: number) => {
       .slice(1)
   );
 };
+
+// Get config objects according to specific editor
+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;
+  }
+};
diff --git a/...ability/public/components/visualizations/charts/__tests__/__snapshots__/bar.test.tsx.snap b/...ability/public/components/visualizations/charts/__tests__/__snapshots__/bar.test.tsx.snap
@@ -214,6 +214,64 @@ exports[`Bar component Renders bar component 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": "Dimension",
+                          },
+                          Object {
+                            "id": "y",
+                            "name": "Metrics",
+                          },
+                        ],
+                      },
+                    },
+                  ],
+                },
                 Object {
                   "editor": [Function],
                   "id": "legend",

diff --git a/...ity/public/components/visualizations/charts/__tests__/__snapshots__/heatmap.test.tsx.snap b/...ity/public/components/visualizations/charts/__tests__/__snapshots__/heatmap.test.tsx.snap
@@ -214,6 +214,64 @@ exports[`Heatmap component Renders heatmap component 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": "Dimension",
+                          },
+                          Object {
+                            "id": "y",
+                            "name": "Metrics",
+                          },
+                        ],
+                      },
+                    },
+                  ],
+                },
                 Object {
                   "editor": [Function],
                   "id": "legend",

diff --git a/...y/public/components/visualizations/charts/__tests__/__snapshots__/histogram.test.tsx.snap b/...y/public/components/visualizations/charts/__tests__/__snapshots__/histogram.test.tsx.snap
@@ -214,6 +214,64 @@ exports[`Histogram component Renders histogram component 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": "Dimension",
+                          },
+                          Object {
+                            "id": "y",
+                            "name": "Metrics",
+                          },
+                        ],
+                      },
+                    },
+                  ],
+                },
                 Object {
                   "editor": [Function],
                   "id": "legend",
@@ -480,6 +538,7 @@ exports[`Histogram component Renders histogram component 1`] = `
     data={
       Array [
         Object {
+          "hoverinfo": "all",
           "marker": Object {
             "color": "rgba(60,161,199,0.2)",
             "line": Object {
@@ -532,6 +591,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/...bility/public/components/visualizations/charts/__tests__/__snapshots__/line.test.tsx.snap b/...bility/public/components/visualizations/charts/__tests__/__snapshots__/line.test.tsx.snap
@@ -214,6 +214,64 @@ exports[`Line component Renders line component 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": "Dimension",
+                          },
+                          Object {
+                            "id": "y",
+                            "name": "Metrics",
+                          },
+                        ],
+                      },
+                    },
+                  ],
+                },
                 Object {
                   "editor": [Function],
                   "id": "legend",