[Backport 2.6] Upgrade vega tooltips to use custom tooltip format

public/app.scss

@@ -11,6 +11,9 @@ $euiColorGhost: #FFF !default;
 $euiColorInk: #000 !default;
 $euiTextColor: $euiColorDarkestShade !default;
 
+@import "./components/Charts/ChartContainer.scss";
+@import "./pages/Overview/components/Widgets/WidgetContainer.scss";
+
 .selected-radio-panel {
   background-color: tintOrShade($euiColorPrimary, 90%, 70%);
   border-color: $euiColorPrimary;
@@ -45,5 +48,71 @@ $euiTextColor: $euiColorDarkestShade !default;
   text-decoration: none;
 }
 
-@import "./components/Charts/ChartContainer.scss";
-@import "./pages/Overview/components/Widgets/WidgetContainer.scss";
+.vg-tooltip {
+  background-color: #404040 !important;
+  border-radius: 4px !important;
+  color: #FFFFFF !important;
+  border: none !important;
+  padding: 0 !important;
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol" !important;
+  font-weight: 600 !important;
+  font-size: 12px !important;
+
+  .vg-tooltip-innerContainer {
+    .vg-tooltip-header {
+      padding: 4px;
+      border-bottom: 1px solid gray;
+
+      table tr:nth-child(odd) {
+        background-color: #535353 !important;
+      }
+
+      td:nth-child(1) {
+        position: relative;
+        width: 6px;
+        padding: 0 0 0 2px !important;
+
+        .vg-tooltip-color {
+          width: 4px;
+          position: absolute;
+          top: 2px;
+          height: calc(100% - 4px);
+        }
+      }
+
+      td:nth-child(3) {
+        padding-right: 8px !important;
+        text-align: right;
+      }
+    }
+
+    .vg-tooltip-body {
+      padding: 4px;
+
+      table tr:nth-child(even) {
+        background-color: #535353 !important;
+      }
+
+      td:nth-child(2) {
+        text-align: right;
+      }
+    }
+
+    table {
+      width: 100%;
+
+      tbody tr {
+        td {
+          height: 28px;
+          padding: 4px !important;
+          vertical-align: middle !important;
+        }
+
+        td:nth-child(1) {
+          padding-right: 10px !important;
+          font-weight: 400 !important;
+        }
+      }
+    }
+  }
+}

public/pages/Overview/utils/__snapshots__/helper.test.ts.snap

@@ -378,7 +378,7 @@ Object {
             "format": "%Y-%m-%d %H:%M",
             "grid": false,
           },
-          "band": 0.5,
+          "bandPosition": 0.5,
           "field": "time",
           "scale": Object {
             "domain": undefined,

public/pages/Overview/utils/helpers.ts

@@ -194,7 +194,7 @@ export function getOverviewVisualizationSpec(
         },
         encoding: {
           x: getXAxis(dateOpts, {
-            band: 0.5,
+            bandPosition: 0.5,
           }),
           y: getYAxis('alert', 'Count'),
           tooltip: [getYAxis('alert', 'Alerts'), getTimeTooltip(dateOpts)],

public/utils/helpers.tsx

@@ -29,6 +29,7 @@ import { NotificationsStart } from 'opensearch-dashboards/public';
 import { OpenSearchService } from '../services';
 import { ruleTypes } from '../pages/Rules/utils/constants';
 import { Handler } from 'vega-tooltip';
+import _ from 'lodash';
 
 export const parseStringsToOptions = (strings: string[]) => {
   return strings.map((str) => ({ id: str, label: str }));
@@ -166,14 +167,64 @@ export function renderVisualization(spec: TopLevelSpec, containerId: string) {
   }
 
   function renderVegaSpec(spec: {}) {
-    const handler = new Handler();
+    let chartColoredItems: any[] = [];
+    const handler = new Handler({
+      formatTooltip: (value, sanitize) => {
+        let tooltipData = { ...value };
+        let values = Object.entries(tooltipData);
+        if (!values.length) return '';
+        const tooltipItem = chartColoredItems.filter((groupItem: any) =>
+          _.isEqual(groupItem.tooltip, tooltipData)
+        );
+        const color = tooltipItem.length
+          ? tooltipItem[0].fill || tooltipItem[0].stroke
+          : 'transparent';
+
+        const firstItem = values.pop() || ['', ''];
+
+        let rowData = '';
+        values.forEach((item: any) => {
+          rowData += `
+            <tr>
+              <td>${sanitize(item[0])}</td>
+              <td>${sanitize(item[1])}</td>
+            </tr>
+          `;
+        });
+
+        return `
+          <div class="vg-tooltip-innerContainer">
+            <div class="vg-tooltip-header">
+              <table>
+                <tr>
+                  <td><div class="vg-tooltip-color" style="background-color: ${color}"></div></td>
+                  <td>${sanitize(firstItem[0])}</td>
+                  <td>${sanitize(firstItem[1])}</td>
+                </tr>
+              </table>
+            </div>
+            <div class="vg-tooltip-body">
+             <table>${rowData}</table>
+            </div>
+          </div>
+        `;
+      },
+    });
     view = new View(parse(spec, null, { expr: vegaExpressionInterpreter }), {
       renderer: 'canvas', // renderer (canvas or svg)
       container: `#${containerId}`, // parent DOM container
       hover: true, // enable hover processing
     });
     view.tooltip(handler.call);
-    return view.runAsync();
+    return view.runAsync().then((view: any) => {
+      const items = view.scenegraph().root.items[0].items || [];
+      const groups = items.filter(
+        (item: any) => item.name && item.name.match(/^(layer_).*(_marks)$/)
+      );
+      for (let item of groups) {
+        chartColoredItems = chartColoredItems.concat(item.items);
+      }
+    });
   }
 }