feat: added onMouseEnter and onMouseLeave callbacks to handle bar hover states, refactored waterfallchart component, util and hook files, fixed an issue where component was getting stuck when value 0 is passed for yAxisPixelsPerUnit

arjunrtk-kv · arjunrtk-kv · commit 1ac28b2ab961 · 2023-11-30T10:16:22.000+05:30
diff --git a/src/types/types.ts b/src/types/types.ts
@@ -1,7 +1,7 @@
 import { CSSProperties } from 'react';
 
 export type IWaterfallGraphProps = {
-  dataPoints: Array<ITransaction>;
+  dataPoints: Array<IDataPoint>;
   barWidth?: number;
   showBridgeLines?: boolean;
   showYAxisScaleLines?: boolean;
@@ -10,6 +10,8 @@ export type IWaterfallGraphProps = {
   summaryXLabel?: string;
   styles?: ICustomizationStyles;
   onChartClick?: IOnChartClick;
+  onMouseEnter?: onMouseEnter;
+  onMouseLeave?: onMouseLeave;
 };
 
 export type ICustomizationStyles = {
@@ -18,7 +20,7 @@ export type ICustomizationStyles = {
   negativeBar?: CSSProperties;
 };
 
-export type ITransaction = {
+export type IDataPoint = {
   label: string;
   value: number;
 };
@@ -48,6 +50,9 @@ export type ICalculateBarWidth = (graphWidth: number) => number;
 
 export type IOnChartClick = (chartElement: IChartElement) => void;
 
+export type onMouseEnter = (e: React.MouseEvent<SVGRectElement, MouseEvent>, chartElement: IChartElement) => void;
+export type onMouseLeave = (e: React.MouseEvent<SVGRectElement, MouseEvent>, chartElement: IChartElement) => void;
+
 export enum chartTypes {
   transaction,
   summary
diff --git a/src/waterfall-chart/WaterFallChart.tsx b/src/waterfall-chart/WaterFallChart.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useEffect, useRef, useState } from 'react';
+import React, { FC, Fragment, useEffect, useRef, useState } from 'react';
 import { IWaterfallGraphProps } from '../types/types';
 import useWaterfallChart from './useWaterFallChart';
 import classes from './styles.module.scss';
@@ -14,21 +14,30 @@ import {
 const WaterFallChart: FC<IWaterfallGraphProps> = (props) => {
   const {
     dataPoints,
-    barWidth,
+    barWidth: initialBarWidth = DEFAULT_BAR_WIDTH,
     showBridgeLines = true,
     showYAxisScaleLines = false,
-    yAxisPixelsPerUnit = DEFAULT_PIXELS_PER_Y_UNIT,
+    yAxisPixelsPerUnit: initialYAxisPixelsPerUnit,
     showFinalSummary = true,
     summaryXLabel = DEFAULT_SUMMARY_LABEL,
     styles = {},
-    onChartClick
+    onChartClick,
+    onMouseEnter,
+    onMouseLeave
   } = props;
 
   const wrapperRef = useRef<HTMLDivElement | null>(null);
   const [wrapperHeight, setWrapperHeight] = useState(0);
-  const [barWidthVal, setBarWidthVal] = useState(barWidth ?? DEFAULT_BAR_WIDTH);
+  const [barWidth, setBarWidth] = useState(initialBarWidth);
+  const yAxisPixelsPerUnit = initialYAxisPixelsPerUnit ? initialYAxisPixelsPerUnit : DEFAULT_PIXELS_PER_Y_UNIT;
 
-  const { chartElements, yValueForZeroLine, yAxisPoints, yAxisScale, calculateBarWidth } = useWaterfallChart(
+  const {
+    chartElements,
+    yValueForZeroLine,
+    yAxisPoints,
+    yAxisScale,
+    calculateBarWidth
+  } = useWaterfallChart(
     dataPoints,
     wrapperHeight,
     yAxisPixelsPerUnit,
@@ -39,7 +48,9 @@ const WaterFallChart: FC<IWaterfallGraphProps> = (props) => {
     const onWrapperDimensionsChange = (): void => {
       if (wrapperRef.current) {
         setWrapperHeight(wrapperRef?.current?.offsetHeight);
-        if (!barWidth || barWidth <= 0) setBarWidthVal(calculateBarWidth(wrapperRef?.current?.offsetWidth));
+        if (!initialBarWidth || initialBarWidth <= 0) {
+          setBarWidth(calculateBarWidth(wrapperRef?.current?.offsetWidth));
+        }
       }
     };
 
@@ -48,7 +59,8 @@ const WaterFallChart: FC<IWaterfallGraphProps> = (props) => {
     window.addEventListener('resize', onWrapperDimensionsChange);
 
     return () => window.removeEventListener('resize', onWrapperDimensionsChange);
-  }, [barWidth, calculateBarWidth]);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [initialBarWidth]);
 
   const summaryValue = Math.abs(chartElements[chartElements?.length - 1]?.cumulativeSum);
   const summaryBarHeight = Math.abs((summaryValue / yAxisScale) * yAxisPixelsPerUnit);
@@ -61,7 +73,7 @@ const WaterFallChart: FC<IWaterfallGraphProps> = (props) => {
   };
 
   return (
-    <div ref={wrapperRef} className={classes.chartWrapper}>
+    <div ref={wrapperRef} className={classes.chartWrapper} id='graph-svg-wrapper'>
       <svg className={classes.svgContainer}>
         {/* y-axis */}
         <line x1='0' y1='0' x2='0' y2='100%' className={classes.axisLines} id='yAxisLine' />
@@ -80,51 +92,54 @@ const WaterFallChart: FC<IWaterfallGraphProps> = (props) => {
           />
         ))}
         {chartElements?.map((chartElement, index) => (
-          <>
+          <Fragment key={`${chartElement?.name}-bar-graph`}>
             <rect
-              key={`${chartElement?.name}-bar-graph`}
-              width={barWidthVal}
+              width={barWidth}
               height={chartElement?.barHeight}
               y={chartElement?.yVal}
-              x={(2 * index + 1) * barWidthVal}
-              className={`${classes.graphBar} ${chartElement?.value >= 0 ? classes.positiveGraph : classes.negativeGraph}`}
+              x={(2 * index + 1) * barWidth}
+              className={`${classes.graphBar} ${
+                chartElement?.value >= 0 ? classes.positiveGraph : classes.negativeGraph
+              }`}
               style={chartElement?.value >= 0 ? styles?.positiveBar : styles?.negativeBar}
               onClick={(): void => onChartClick && onChartClick(chartElement)}
+              onMouseEnter={(e: React.MouseEvent<SVGRectElement, MouseEvent>):void => onMouseEnter && onMouseEnter(e, chartElement)}
+              onMouseLeave={(e: React.MouseEvent<SVGRectElement, MouseEvent>):void => onMouseLeave && onMouseLeave(e, chartElement)}
               id={`chartBar-${index}`}
+              data-testid={`data-point`}
             />
-            {showBridgeLines && (showFinalSummary || index !== chartElements?.length - 1) && (
+            {showBridgeLines &&
+              (showFinalSummary || index !== chartElements?.length - 1) && (
               <line
                 key={`${chartElement?.name}-bridge-line`}
                 className={classes.bridgeLine}
-                x1={(2 * index + 2) * barWidthVal}
+                x1={(2 * index + 2) * barWidth}
                 y1={yValueForZeroLine - (chartElement?.cumulativeSum / yAxisScale) * yAxisPixelsPerUnit}
-                x2={(2 * index + 3) * barWidthVal}
+                x2={(2 * index + 3) * barWidth}
                 y2={yValueForZeroLine - (chartElement?.cumulativeSum / yAxisScale) * yAxisPixelsPerUnit}
                 id={`chartBarBridgeLine-${index}`}
               />
             )}
-          </>
+          </Fragment>
         ))}
         {showFinalSummary && summaryBarHeight > 0 && (
           <rect
             key={FINAL_SUMMARY_GRAPH_KEY}
-            width={barWidthVal}
+            width={barWidth}
             height={summaryChartElement?.barHeight}
             y={summaryChartElement?.yVal}
-            x={(2 * chartElements?.length + 1) * barWidthVal}
+            x={(2 * chartElements?.length + 1) * barWidth}
             className={`${classes.graphBar} ${classes.summaryGraphBar}`}
             onClick={(): void => onChartClick && onChartClick(summaryChartElement)}
             id='summaryBar'
+            onMouseEnter={(e: React.MouseEvent<SVGRectElement, MouseEvent>):void => onMouseEnter && onMouseEnter(e, summaryChartElement)}
+            onMouseLeave={(e: React.MouseEvent<SVGRectElement, MouseEvent>):void => onMouseLeave && onMouseLeave(e, summaryChartElement)}
           />
         )}
       </svg>
       <div className={classes.yPoints}>
         {yAxisPoints?.map((yAxisPoint, index) => (
-          <div
-            key={yAxisPoint}
-            className={classes.yPoint}
-            style={{ bottom: index * yAxisPixelsPerUnit - 7 }}
-          >
+          <div key={yAxisPoint} className={classes.yPoint} style={{ bottom: index * yAxisPixelsPerUnit - 7 }}>
             {yAxisPoint}
           </div>
         ))}
@@ -134,7 +149,7 @@ const WaterFallChart: FC<IWaterfallGraphProps> = (props) => {
           <div
             key={transaction?.label}
             className={classes.xPoint}
-            style={{ left: (2 * index + 1.25) * barWidthVal }}
+            style={{ left: (2 * index + 1.25) * barWidth }}
             // the 1.25 is to reduce chances for the label to overflow to right
           >
             {transaction?.label}
@@ -144,7 +159,7 @@ const WaterFallChart: FC<IWaterfallGraphProps> = (props) => {
           <div
             key={FINAL_SUMMARY_X_LABEL_KEY}
             className={classes.xPoint}
-            style={{ ...styles?.summaryBar, left: (2 * chartElements?.length + 1.25) * barWidthVal }}
+            style={{ ...styles?.summaryBar, left: (2 * chartElements?.length + 1.25) * barWidth }}
           >
             {summaryXLabel}
           </div>
diff --git a/src/waterfall-chart/useWaterFallChart.ts b/src/waterfall-chart/useWaterFallChart.ts
@@ -1,60 +1,51 @@
-import { IChartElement, ITransaction, IUseWaterfallChartReturnType } from '../types/types';
+import { IChartElement, IDataPoint, IUseWaterfallChartReturnType } from '../types/types';
 import { getIntervalAndYPoints, getLargestCumulativeSum, getSmallestCumulativeSum } from './utils';
 
 const useWaterfallChart = (
-  transactions: Array<ITransaction>,
+  dataPoints: Array<IDataPoint>,
   chartHeight: number,
   yAxisPixelsPerUnit: number,
   showFinalSummary: boolean
 ): IUseWaterfallChartReturnType => {
-  const largestCumulativeVal = getLargestCumulativeSum(transactions); // this will be the highest y point in the graph
-  const smallestCumulativeVal = getSmallestCumulativeSum(transactions);
-  let chartElements: Array<IChartElement> = [];
-
-  const maxLabelsCount = Math.ceil(chartHeight / yAxisPixelsPerUnit);
-
-  let yAxisPoints: Array<number> = [];
-  let yAxisScale = 0;
-  let lowestYAxisValue = 0;
-  let yValueForZeroLine = 0;
-
-  if (chartHeight && chartHeight > 0) {
-    const InterValAndYPoints = getIntervalAndYPoints(smallestCumulativeVal, largestCumulativeVal, maxLabelsCount);
-    yAxisPoints = InterValAndYPoints?.yAxisPoints;
-    yAxisScale = InterValAndYPoints?.yAxisScale;
-    lowestYAxisValue = InterValAndYPoints?.yAxisPoints[0];
-    // yAxisScale is the number of Y units per 30px
-    // lowestYAxisValue is the yAxisValue for origin (0, 0)
-
-    yValueForZeroLine = chartHeight - (Math.abs(lowestYAxisValue) / yAxisScale) * yAxisPixelsPerUnit;
-    let cumulativeSum = 0;
-
-    chartElements = transactions.map((transaction) => {
-      const { label, value } = transaction;
-      let yVal = 0;
-      const barHeight = (value / yAxisScale) * yAxisPixelsPerUnit;
-      const offsetHeight = (cumulativeSum / yAxisScale) * yAxisPixelsPerUnit;
-      // minimum distance from zero line to the floating bar for the transaction
-      if (value < 0) {
-        yVal = yValueForZeroLine - offsetHeight;
-      } else yVal = yValueForZeroLine - (offsetHeight + barHeight);
-
-      cumulativeSum += value;
-
-      return { name: label, value, yVal, cumulativeSum, barHeight: Math.abs(barHeight) };
-    });
+  if (chartHeight <= 0) {
+    return {
+      chartElements: [],
+      yValueForZeroLine: 0,
+      yAxisPoints: [],
+      yAxisScale: 0,
+      calculateBarWidth: () => 0
+    };
   }
 
+  const largestCumulativeVal = getLargestCumulativeSum(dataPoints);
+  const smallestCumulativeVal = getSmallestCumulativeSum(dataPoints);
+
+  const { yAxisPoints, yAxisScale } = getIntervalAndYPoints(smallestCumulativeVal, largestCumulativeVal, Math.ceil(chartHeight / yAxisPixelsPerUnit));
+  const lowestYAxisValue = yAxisPoints[0];
+  const yValueForZeroLine = chartHeight - (Math.abs(lowestYAxisValue) / yAxisScale) * yAxisPixelsPerUnit;
+
+  let cumulativeSum = 0;
+  const chartElements: Array<IChartElement> = dataPoints.map((dataPoint) => {
+    const { label, value } = dataPoint;
+    const barHeight = (value / yAxisScale) * yAxisPixelsPerUnit;
+    const offsetHeight = (cumulativeSum / yAxisScale) * yAxisPixelsPerUnit;
+    const yVal = value < 0 ? yValueForZeroLine - offsetHeight : yValueForZeroLine - (offsetHeight + barHeight);
+
+    cumulativeSum += value;
+
+    return { name: label, value, yVal, cumulativeSum, barHeight: Math.abs(barHeight) };
+  });
+
   const calculateBarWidth = (chartWidth: number): number => {
-    let barWidth = 0;
-    if (chartWidth && transactions?.length > 0) {
-      if (showFinalSummary) barWidth = chartWidth / (2 * transactions?.length + 2);
-      else barWidth = chartWidth / (2 * transactions?.length + 1);
+    if (chartWidth <= 0 || dataPoints.length === 0) {
+      return 0;
     }
-    return barWidth;
+
+    const divisor = showFinalSummary ? 2 * dataPoints.length + 2 : 2 * dataPoints.length + 1;
+    return chartWidth / divisor;
   };
 
   return { chartElements, yValueForZeroLine, yAxisPoints, yAxisScale, calculateBarWidth };
 };
 
-export default useWaterfallChart;
+export default useWaterfallChart;
diff --git a/src/waterfall-chart/utils.ts b/src/waterfall-chart/utils.ts
@@ -1,6 +1,6 @@
-import { IGetIntervalAndYPointsReturnType, ITransaction } from '../types/types';
+import { IGetIntervalAndYPointsReturnType, IDataPoint } from '../types/types';
 
-export function getLargestCumulativeSum(arr: Array<ITransaction>): number {
+export function getLargestCumulativeSum(arr: Array<IDataPoint>): number {
   let maxSum = arr[0]?.value; // Initialize maxSum and currentSum with the first element of the array
   let currentSum = arr[0]?.value;
 
@@ -13,7 +13,7 @@ export function getLargestCumulativeSum(arr: Array<ITransaction>): number {
   return maxSum;
 }
 
-export function getSmallestCumulativeSum(arr: Array<ITransaction>): number {
+export function getSmallestCumulativeSum(arr: Array<IDataPoint>): number {
   let minSum = arr[0]?.value; // Initialize minSum and currentSum with the first element of the array
   let currentSum = arr[0]?.value;
 
