[FEATURE] Add chart tooltips (opensearch-project#225)

* [FEATURE] Add chart tooltips opensearch-project#198

Signed-off-by: Jovan Cvetkovic <[email protected]>

* [FEATURE] Add chart tooltips opensearch-project#198

Signed-off-by: Jovan Cvetkovic <[email protected]>

* [FEATURE] Add interactive legend into charts opensearch-project#199

Signed-off-by: Jovan Cvetkovic <[email protected]>

* Reverting, pushed to wrong branch

Signed-off-by: Jovan Cvetkovic <[email protected]>

Signed-off-by: Jovan Cvetkovic <[email protected]>

Author: jovancvetkovic3006

cypress/integration/4_findings.spec.js

@@ -136,7 +136,7 @@ describe('Findings', () => {
     cy.contains('sample_detector').click({ force: true }, { timeout: 2000 });
 
     // Click "Actions" button, the click "Delete"
-    cy.get('button').contains('Actions').click({ force: true });
+    cy.get('button').contains('Actions').click({ force: true }, { timeout: 2000 });
     cy.contains('Delete').click({ force: true });
 
     // Search for sample_detector, presumably deleted

cypress/integration/5_integrations.spec.js

@@ -19,11 +19,14 @@ describe('Integration tests', () => {
   const indexName = 'cypress-index-windows';
   const dnsName = 'cypress-index-dns';
 
-  before(() => {
-    // Create custom rules
+  const cleanUpTests = () => {
     cy.deleteAllCustomRules();
     cy.deleteAllDetectors();
     cy.deleteAllIndices();
+  };
+
+  before(() => {
+    cleanUpTests();
 
     // Create custom rules
     cy.createRule(windows_usb_rule_data).then((response) => {
@@ -80,6 +83,8 @@ describe('Integration tests', () => {
     );
   });
 
+  after(() => cleanUpTests());
+
   it('...can navigate to findings page', () => {
     cy.intercept({
       method: 'GET',

public/pages/Overview/utils/helpers.ts

@@ -58,12 +58,21 @@ export function getOverviewVisualizationSpec(
       title: 'Count',
       axis: { grid: true, ticks: false },
     },
+    tooltip: [{ field: 'finding', aggregate: 'sum', type: 'quantitative', title: 'Findings' }],
   };
 
-  if (groupBy === 'log_type') {
-    findingsEncoding['color'] = { field: 'logType', type: 'nominal', title: 'Log type' };
+  if (groupBy === 'logType') {
+    findingsEncoding['color'] = {
+      field: 'logType',
+      type: 'nominal',
+      title: 'Log type',
+      scale: {
+        range: euiPaletteColorBlind(),
+      },
+    };
   }
 
+  const lineColor = '#ff0000';
   return getVisualizationSpec(
     'Plot showing average data with raw values in the background.',
     visualizationData,
@@ -75,11 +84,16 @@ export function getOverviewVisualizationSpec(
       {
         mark: {
           type: 'line',
-          color: '#ff0000',
+          color: lineColor,
+          point: {
+            filled: true,
+            fill: lineColor,
+          },
         },
         encoding: {
           x: { timeUnit, field: 'time', title: '', axis: { grid: false, ticks: false } },
           y: { aggregate, field: 'alert', title: 'Count', axis: { grid: true, ticks: false } },
+          tooltip: [{ field: 'alert', aggregate: 'sum', title: 'Alerts' }],
         },
       },
     ]
@@ -135,6 +149,7 @@ export function getFindingsVisualizationSpec(
     {
       mark: 'bar',
       encoding: {
+        tooltip: [{ field: 'finding', aggregate: 'sum', type: 'quantitative', title: 'Findings' }],
         x: {
           timeUnit: dateOpts.timeUnit,
           field: 'time',
@@ -176,6 +191,7 @@ export function getAlertsVisualizationSpec(
     {
       mark: 'bar',
       encoding: {
+        tooltip: [{ field: 'alert', aggregate: 'sum', title: 'Alerts' }],
         x: {
           timeUnit: dateOpts.timeUnit,
           field: 'time',
@@ -210,7 +226,30 @@ export function getTopRulesVisualizationSpec(visualizationData: any[]) {
   return getVisualizationSpec('Most frequent detection rules', visualizationData, [
     {
       mark: { type: 'arc', innerRadius: 90 },
+      transform: [
+        {
+          joinaggregate: [
+            {
+              op: 'sum',
+              field: 'count',
+              as: 'total',
+            },
+          ],
+        },
+        {
+          calculate: 'datum.count/datum.total',
+          as: 'percentage',
+        },
+      ],
       encoding: {
+        tooltip: [
+          {
+            field: 'percentage',
+            title: 'Percentage',
+            type: 'quantitative',
+            format: '2.0%',
+          },
+        ],
         theta: { aggregate: 'sum', field: 'count', type: 'quantitative' },
         color: {
           field: 'ruleName',