Added basic customization props

Author: GokulSNath

src/constants.ts

@@ -1,3 +1,9 @@
 export const DEFAULT_BAR_WIDTH = 50;
 
 export const DEFAULT_PIXELS_PER_Y_UNIT = 30;
+
+export const DEFAULT_SUMMARY_LABEL = 'Total';
+
+export const FINAL_SUMMARY_GRAPH_KEY = 'final-summary-bar';
+
+export const FINAL_SUMMARY_X_LABEL_KEY = 'final-summary-x-point'

src/stories/Component.stories.tsx

@@ -12,7 +12,7 @@ export default {
 } as ComponentMeta<typeof Component>;
 
 const Template: ComponentStory<typeof Component> = (args) => (
-  <div style={{ width: '100%', height: '100%', padding: '10% 20%' }}>
+  <div style={{ width: '100%', height: '100%', padding: '100px 200px' }}>
     <Component {...args} />
   </div>
 );

src/types/types.d.ts

@@ -1,6 +1,17 @@
+import { CSSProperties } from "react";
+
 export type IWaterfallGraphProps = {
   transactions: Array<ITransaction>;
   barWidth?: number;
+  showBridgeLines?  : boolean;
+  showYAxisScaleLines?: boolean;
+  yAxisPixelsPerUnit?: number;
+  showFinalSummary?: boolean;
+  summaryXLabel?: string;
+  summaryBarStyles?: CSSProperties;
+  positiveBarStyles?: CSSProperties;
+  negativeBarStyles?: CSSProperties;
+  onChartClick?: IOnChartClick;
 };
 
 export type ITransaction = {
@@ -14,6 +25,7 @@ export type IChartElement = {
   value: number;
   yVal: number;
   cumulativeSum: number;
+  barHeight: number;
 };
 
 export type IUseWaterfallChartReturnType = {
@@ -30,3 +42,10 @@ export type IGetIntervalAndYPointsReturnType = {
 };
 
 export type ICalculateBarWidth = (graphWidth: number) => number;
+
+export type IOnChartClick = (chartElement: IChartElement | { name: 'summary'}) => void;
+
+export enum chartTypes {
+  transaction,
+  summary
+}

src/waterfall-chart/WaterFallChart.tsx

@@ -3,25 +3,44 @@ import { IWaterfallGraphProps } from '../types/types';
 import { useWaterfallChart } from './utils';
 import styles from './styles.module.scss';
 import '../index.css';
-import { DEFAULT_BAR_WIDTH, DEFAULT_PIXELS_PER_Y_UNIT } from '../constants';
+import { DEFAULT_BAR_WIDTH,
+  DEFAULT_PIXELS_PER_Y_UNIT,
+  DEFAULT_SUMMARY_LABEL,
+  FINAL_SUMMARY_GRAPH_KEY,
+  FINAL_SUMMARY_X_LABEL_KEY
+} from '../constants';
 
 const WaterFallChart: FC<IWaterfallGraphProps> = (props) => {
-  const { transactions, barWidth } = props;
+  const {
+    transactions,
+    barWidth,
+    showBridgeLines = true,
+    showYAxisScaleLines = false,
+    yAxisPixelsPerUnit = DEFAULT_PIXELS_PER_Y_UNIT,
+    showFinalSummary = true,
+    summaryXLabel = DEFAULT_SUMMARY_LABEL,
+    summaryBarStyles = {},
+    positiveBarStyles = {},
+    negativeBarStyles = {},
+    onChartClick
+  } = props;
 
   const wrapperRef = useRef<HTMLDivElement | null>(null);
   const [wrapperHeight, setWrapperHeight] = useState(0);
   const [barWidthVal, setBarWidthVal] = useState(barWidth ?? DEFAULT_BAR_WIDTH);
 
   const { chartElements, yValueForZeroLine, yAxisPoints, yAxisScale, calculateBarWidth } = useWaterfallChart(
     transactions,
-    wrapperHeight
+    wrapperHeight,
+    yAxisPixelsPerUnit,
+    showFinalSummary
   );
 
   useEffect(() => {
     const onWrapperDimensionsChange = (): void => {
       if (wrapperRef.current) {
         setWrapperHeight(wrapperRef?.current?.offsetHeight);
-        if (!barWidth) setBarWidthVal(calculateBarWidth(wrapperRef?.current?.offsetWidth));
+        if (!barWidth || barWidth <= 0 ) setBarWidthVal(calculateBarWidth(wrapperRef?.current?.offsetWidth));
       }
     };
 
@@ -32,21 +51,45 @@ const WaterFallChart: FC<IWaterfallGraphProps> = (props) => {
     return () => window.removeEventListener('resize', onWrapperDimensionsChange);
   }, [barWidth, calculateBarWidth]);
 
+  const renderSummaryBar = (): JSX.Element => {
+    const value = Math.abs(chartElements[chartElements?.length - 1]?.cumulativeSum);
+    const barHeight =  Math.abs((value/ yAxisScale) * yAxisPixelsPerUnit);
+    const chartElement = {
+      name: summaryXLabel,
+      value,
+      yVal: yValueForZeroLine - (value / yAxisScale) * yAxisPixelsPerUnit,
+      cumulativeSum: 0,
+      barHeight: barHeight
+    }
+
+    return (
+      <rect
+        key={FINAL_SUMMARY_GRAPH_KEY}
+        width={barWidthVal}
+        height={chartElement?.barHeight}
+        y={chartElement?.yVal}
+        x={(2 * chartElements?.length + 1 ) * barWidthVal}
+        className={`${styles.graphBar} ${styles.summaryGraphBar}`}
+        onClick={(): void => onChartClick && onChartClick(chartElement)}
+      />
+    )
+  };
+
   return (
     <div ref={wrapperRef} className={styles.chartWrapper}>
       <svg className={styles.svgContainer}>
         {/* y-axis */}
         <line x1='0' y1='0' x2='0' y2='100%' className={styles.axisLines} />
         {/* x-axis */}
         <line x1='0' y1='100%' x2='100%' y2='100%' className={styles.axisLines} />
-        {/* zero line if negative values present */}
-        {yAxisPoints?.map((yPoint, index) => (
+        {/*y axis scale lines */}
+        {showYAxisScaleLines && yAxisPoints?.map((yPoint, index) => (
           <line
             key={yPoint}
             x1='0'
-            y1={wrapperHeight - index * DEFAULT_PIXELS_PER_Y_UNIT}
+            y1={wrapperHeight - index * yAxisPixelsPerUnit}
             x2='100%'
-            y2={wrapperHeight - index * DEFAULT_PIXELS_PER_Y_UNIT}
+            y2={wrapperHeight - index * yAxisPixelsPerUnit}
             className={`${styles.axisLines}`}
           />
         ))}
@@ -55,37 +98,61 @@ const WaterFallChart: FC<IWaterfallGraphProps> = (props) => {
             <rect
               key={chartElement?.name}
               width={barWidthVal}
-              height={(Math.abs(chartElement?.value) / yAxisScale) * DEFAULT_PIXELS_PER_Y_UNIT}
+              height={chartElement?.barHeight}
               y={chartElement?.yVal}
               x={(2 * index + 1) * barWidthVal}
               className={`${styles.graphBar} ${chartElement?.value >= 0 ? styles.positiveGraph : styles.negativeGraph}`}
+              style={chartElement?.value >= 0 ? positiveBarStyles : negativeBarStyles}
+              onClick={(): void => onChartClick && onChartClick(chartElement)}
             />
-            <line
-              key={chartElement?.name}
-              x1={(2 * index + 2) * barWidthVal}
-              y1={
-                wrapperHeight -
-                (chartElement?.cumulativeSum / yAxisScale) * DEFAULT_PIXELS_PER_Y_UNIT -
-                (wrapperHeight - yValueForZeroLine)
-              }
-              x2={(2 * index + 3) * barWidthVal}
-              y2={
-                wrapperHeight -
-                (chartElement?.cumulativeSum / yAxisScale) * DEFAULT_PIXELS_PER_Y_UNIT -
-                (wrapperHeight - yValueForZeroLine)
-              }
-              className={styles.bridgeLine}
-            />
+            {showBridgeLines
+            && (showFinalSummary
+            ||index !== chartElements?.length - 1)
+            && (
+              <line
+                key={chartElement?.name}
+                className={styles.bridgeLine}
+                x1={(2 * index + 2) * barWidthVal}
+                y1={yValueForZeroLine - (chartElement?.cumulativeSum / yAxisScale) * yAxisPixelsPerUnit}
+                x2={(2 * index + 3) * barWidthVal}
+                y2={yValueForZeroLine - (chartElement?.cumulativeSum / yAxisScale) * yAxisPixelsPerUnit}
+              />
+            )}
           </>
         ))}
+        {showFinalSummary && renderSummaryBar()}
       </svg>
       <div className={styles.yPoints}>
         {yAxisPoints?.map((yAxisPoint, index) => (
-          <div key={yAxisPoint} className={styles.yPoint} style={{ bottom: index * DEFAULT_PIXELS_PER_Y_UNIT - 8 }}>
+          <div
+            key={yAxisPoint}
+            className={styles.yPoint}
+            style={{ bottom: index * yAxisPixelsPerUnit - 8 }}
+          >
             {yAxisPoint}
           </div>
         ))}
       </div>
+      <div className={styles.xPoints}>
+        {transactions?.map((transaction, index) => (
+          <div
+            key={transaction?.label}
+            className={styles.xPoint}
+            style={{ left: (2 * index + 1.25) * barWidthVal }}
+          >
+            {transaction?.label}
+          </div>
+        ))}
+        {showFinalSummary && (
+          <div
+            key={FINAL_SUMMARY_X_LABEL_KEY}
+            className={styles.xPoint}
+            style={{ ...summaryBarStyles, left: (2 * chartElements?.length + 1.25) * barWidthVal }}
+          >
+            {summaryXLabel}
+          </div>
+        )}
+      </div>
     </div>
   );
 };

src/waterfall-chart/styles.module.scss

@@ -32,6 +32,10 @@
     z-index: 1;
     transition: all 0.3s ease-in-out;
   }
+  .summaryGraphBar {
+    fill: #076aff;
+    stroke: #076aff;
+  }
   .positiveGraph {
     fill: #00b050;
     stroke: #00b050;
@@ -58,3 +62,16 @@
     text-align: right;
   }
 }
+
+.xPoints {
+  position: relative;
+  height: 0px;
+  .xPoint {
+    position: absolute;
+    font-size: 11px;
+    line-height: 14px;
+    color: #545453;
+    top: 5px;
+    text-align: center;
+  }
+}

src/waterfall-chart/utils.ts

@@ -1,4 +1,3 @@
-import { DEFAULT_BAR_WIDTH, DEFAULT_PIXELS_PER_Y_UNIT } from '../constants';
 import {
   IChartElement,
   IGetIntervalAndYPointsReturnType,
@@ -8,13 +7,15 @@ import {
 
 export const useWaterfallChart = (
   transactions: Array<ITransaction>,
-  chartHeight: number
+  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 / DEFAULT_PIXELS_PER_Y_UNIT);
+  const maxLabelsCount = Math.ceil(chartHeight / yAxisPixelsPerUnit);
 
   let yAxisPoints: Array<number> = [];
   let yAxisScale = 0;
@@ -29,28 +30,31 @@ export const useWaterfallChart = (
     // yAxisScale is the number of Y units per 30px
     // lowestYAxisValue is the yAxisValue for origin (0, 0)
 
-    yValueForZeroLine = chartHeight - (Math.abs(lowestYAxisValue) / yAxisScale) * DEFAULT_PIXELS_PER_Y_UNIT;
+    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) * DEFAULT_PIXELS_PER_Y_UNIT;
-      const offsetHeight = (cumulativeSum / yAxisScale) * DEFAULT_PIXELS_PER_Y_UNIT;
+      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 };
+      return { name: label, value, yVal, cumulativeSum, barHeight: Math.abs(barHeight) };
     });
   }
 
   const calculateBarWidth = (chartWidth: number): number => {
-    let barWidth = DEFAULT_BAR_WIDTH;
-    if (chartWidth && transactions?.length > 0) barWidth = chartWidth / (2 * transactions?.length + 1);
+    let barWidth = 0;
+    if (chartWidth && transactions?.length > 0) {
+      if (showFinalSummary) barWidth = chartWidth / (2 * transactions?.length + 2);
+      else barWidth = chartWidth / (2 * transactions?.length + 1);
+    }
     return barWidth;
   };
 
@@ -100,7 +104,7 @@ function getIntervalAndYPoints(
 ): IGetIntervalAndYPointsReturnType {
   let yAxisScale = Math.pow(10, Math.ceil(Math.log10((maxVal - minVal) / maxLabelsCount)) - 1);
   let roundedMinVal = roundMinVal(minVal, yAxisScale);
-  let roundedMaxVal = roundMaxVal(maxVal, yAxisScale);
+  const roundedMaxVal = roundMaxVal(maxVal, yAxisScale);
   let isScaleSufficient = checkIfScaleSufficient(yAxisScale, maxLabelsCount, roundedMaxVal - roundedMinVal);
 
   let isMultipleOfFiveChecked = false;
@@ -113,7 +117,6 @@ function getIntervalAndYPoints(
       isMultipleOfFiveChecked = true;
     }
     roundedMinVal = roundMinVal(minVal, yAxisScale);
-    roundedMaxVal = roundMaxVal(maxVal, yAxisScale);
     isScaleSufficient = checkIfScaleSufficient(yAxisScale, maxLabelsCount, maxVal - roundedMinVal);
   }
 
@@ -127,6 +130,7 @@ function getIntervalAndYPoints(
 }
 
 function checkIfScaleSufficient(scale: number, maxLabelsCount: number, valueRange: number): boolean {
+  if (maxLabelsCount === 0) return true; // to stop the while loop from checking for sufficient scale with zero maxLabelsCount
   if (scale * maxLabelsCount >= valueRange) return true;
   return false;
 }