Merge pull request #218 from mercedes-benz/VULCAN-1719/y-axis-custom-hover

Vulcan 1719/y axis custom hover

Author: suhasmatapathi

src/chart/bar/BarChart.tsx

@@ -8,7 +8,8 @@ import { convertRecordObjectToString, recordToNative } from '../ChartUtils';
 import { themeNivo, themeNivoCanvas } from '../Utils';
 import { extensionEnabled } from '../../utils/ReportUtils';
 import { getPageNumbersAndNamesList, getRule, performActionOnElement } from '../../extensions/advancedcharts/Utils';
-import { getOriginalRecordForNivoClickEvent } from './util';
+import { formatToolTipValue, getOriginalRecordForNivoClickEvent, getRecordByCategory } from './util';
+import { BarChartTooltip } from './BarChartTooltip';
 
 const NeoBarChart = (props: ChartProps) => {
   const { records, selection } = props;
@@ -40,6 +41,8 @@ const NeoBarChart = (props: ChartProps) => {
   const labelSkipHeight = settings.labelSkipHeight ? settings.labelSkipHeight : 0;
   const enableLabel = settings.barValues ? settings.barValues : false;
   const positionLabel = settings.positionLabel ? settings.positionLabel : 'off';
+  // New configurable tooltip property (name of field to show on hover instead of default value)
+  const { tooltipField } = settings;
 
   // New value toggle related settings (primary vs alternate numeric field)
   const { alternateValueField } = settings; // optional second numeric field name
@@ -395,6 +398,46 @@ const NeoBarChart = (props: ChartProps) => {
         overflowY: 'auto',
       };
 
+  const handleToolTipRendering =
+    settings.tooltipField || settings.alternateValueField
+      ? (
+          bar: {
+            id: string | number;
+            value: number;
+            formattedValue: string;
+            index: number;
+            indexValue: string | number;
+            data: object;
+          },
+          _color: string,
+          _label: string
+        ) => {
+          // Find the original record by matching category and group (not value, since value changes with toggle)
+          const record = getRecordByCategory(bar, records, selection, bar);
+          // Priority1: Display tooltipField value if available, otherwise fall back to bar.value
+          // Format bar.value if it's an array
+          let content = `${bar.id} - ${bar.indexValue}: <strong>${formatToolTipValue(bar.value)}</strong>`;
+          if (tooltipField && record && record[tooltipField] !== undefined) {
+            content = `${tooltipField}: <strong>${formatToolTipValue(record[tooltipField])}</strong>`;
+          } else if (record) {
+            // Priority 2: Show field based on current mode (alternate or primary)
+            if (valueFieldMode === 'alternate' && alternateValueField && record[alternateValueField] !== undefined) {
+              // Alternate mode: show alternate field
+              content = `${alternateValueField} - ${bar.indexValue}: <strong>${formatToolTipValue(
+                record[alternateValueField]
+              )}</strong>`;
+            } else if (selection?.value && record[selection.value] !== undefined) {
+              // Primary mode: show primary field
+              content = `${selection.value} - ${bar.indexValue}: <strong>${formatToolTipValue(
+                record[selection.value]
+              )}</strong>`;
+            }
+          }
+          const isDarkMode = props.theme === 'dark';
+          return <BarChartTooltip content={content} isDarkMode={isDarkMode} barColor={bar.color} />;
+        }
+      : undefined;
+
   const chart = (
     <div style={barChartStyle}>
       <div style={scrollableWrapperStyle}>
@@ -427,6 +470,7 @@ const NeoBarChart = (props: ChartProps) => {
             tickPadding: 5,
             tickRotation: 0,
           }}
+          tooltip={handleToolTipRendering}
           labelSkipWidth={labelSkipWidth}
           labelSkipHeight={labelSkipHeight}
           labelTextColor={{ from: 'color', modifiers: [['darker', 1.6]] }}

src/chart/bar/BarChartTooltip.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+
+/**
+ * Custom tooltip component for bar charts that adapts to light/dark theme
+ * Styling follows the Nivo chart library defaults for consistency
+ */
+export const BarChartTooltip = ({ content, isDarkMode, barColor }) => {
+  const tooltipStyle: React.CSSProperties = isDarkMode
+    ? {
+        font: 'Nunito Sans, sans-serif !important',
+        background: '#25354d',
+        color: '#ffffff',
+        padding: '9px 12px',
+        border: 'none',
+        borderRadius: 2,
+        boxShadow: '0 1px 2px rgba(0, 0, 0, 0.25)',
+        whiteSpace: 'nowrap',
+      }
+    : {
+        font: "'Nunito Sans', sans-serif !important",
+        background: '#dadde3',
+        color: 'rgb(var(--palette-neutral-text-default))',
+        padding: '9px 12px',
+        border: '1px solid rgba(0, 0, 0, 0.1)',
+        borderRadius: 2,
+        boxShadow: '0 1px 2px rgba(0, 0, 0, 0.1)',
+        whiteSpace: 'nowrap',
+      };
+
+  const colorBoxStyle: React.CSSProperties = {
+    display: 'inline-block',
+    width: 12,
+    height: 12,
+    backgroundColor: barColor,
+    marginRight: 8,
+    verticalAlign: 'middle',
+  };
+
+  const indexStyle: React.CSSProperties = {
+    fontWeight: 600,
+    marginRight: 8,
+  };
+
+  return (
+    <div style={tooltipStyle}>
+      <span style={colorBoxStyle} />
+      <span dangerouslySetInnerHTML={{ __html: content }} />
+    </div>
+  );
+};

src/chart/bar/util.ts

@@ -1,3 +1,5 @@
+import { convertRecordObjectToString, recordToNative } from '../ChartUtils';
+
 /**
  * Utility function to reverse engineer, from an event on a Nivo bar chart, what the original Neo4j record was the data came from.
  * Once we have this record, we can pass it to the action rule handler, so that users can define report actions on any variable
@@ -43,3 +45,60 @@ export function getOriginalRecordForNivoClickEvent(e, records, selection) {
     }
   }
 }
+
+/**
+ * Get the original record for a Nivo click event.
+ * @param e The click event on the bar chart.
+ * @param records The Neo4j records used to build the visualization.
+ * @param selection The selection made by the user (category, index, group*).
+ * @param bar The bar object from the Nivo chart.
+ * @returns The original record as a dictionary or null if not found.
+ */
+export function getRecordByCategory(e, records, selection, bar) {
+  let record: Record<string, any> | null = null;
+  const category = bar.indexValue;
+  const group = bar.id;
+  const usesGroups = selection.key !== '(none)';
+  // Search for matching record
+  for (const r of records) {
+    try {
+      const recordCategory = convertRecordObjectToString(r.get(selection.index));
+
+      if (usesGroups) {
+        const recordGroup = recordToNative(r.get(selection.key));
+        if (recordCategory == category && recordGroup == group) {
+          // Build dictionary of all fields from this record
+          const dict: Record<string, any> = {};
+          r.keys.forEach((key) => {
+            if (typeof key === 'string') {
+              dict[key] = recordToNative(r.get(key));
+            }
+          });
+          record = dict;
+          break;
+        }
+      } else if (recordCategory == category) {
+        // Build dictionary of all fields from this record
+        const dict: Record<string, any> = {};
+        r.keys.forEach((key) => {
+          if (typeof key === 'string') {
+            dict[key] = recordToNative(r.get(key));
+          }
+        });
+        record = dict;
+        break;
+      }
+    } catch (e) {
+      // Skip records that don't have required fields
+      continue;
+    }
+  }
+  return record;
+}
+
+export const formatToolTipValue = (value: any): string => {
+  if (Array.isArray(value)) {
+    return value.join(', ');
+  }
+  return String(value);
+};

src/chart/line/LineChart.tsx

@@ -55,7 +55,7 @@ const NeoLineChart = (props: ChartProps) => {
   const curve = settings.curve ? settings.curve : 'linear';
   const marginRight = settings.marginRight ? settings.marginRight : 24;
   const marginLeft = settings.marginLeft ? settings.marginLeft : 36;
-  const marginTop = settings.marginTop ? settings.marginTop : 24;
+  const marginTop = settings.marginTop ? settings.marginTop : 40;
   const marginBottom = settings.marginBottom ? settings.marginBottom : 40;
   const lineWidth = settings.type == 'scatter' ? 0 : settings.lineWidth || 2;
   const pointSize = settings.pointSize ? settings.pointSize : 10;