created svg graph component

Author: GokulSNath

src/constants.ts

@@ -0,0 +1 @@
+export const DEFAULT_BAR_WIDTH = 20;

src/index.css

@@ -1,9 +1,10 @@
 html,
-body {
+body, #root {
   margin: 0;
   padding: 0;
   font-family: sans-serif;
   height: 100%;
+  width: 100%;
 }
 
 h1 {

src/stories/Component.stories.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import Component from '../waterfall-chart';
+
+export default {
+  title: 'Example/WaterFallChart',
+  component: Component,
+  parameters: {
+    // More on Story layout: https://storybook.js.org/docs/react/configure/story-layout
+    layout: 'fullscreen'
+  }
+} as ComponentMeta<typeof Component>;
+
+const Template: ComponentStory<typeof Component> = (args) => (
+  <Component {...args} />
+);
+
+export const WaterFallChart = Template.bind({});
+WaterFallChart.args = {
+  transactions: [{
+    label: 'Income',
+    value: 300
+  },{
+  label: 'Expense1',
+  value: -60
+},{
+  label: 'Gain1',
+  value: 200
+},{
+  label: 'Expense2',
+  value: -100
+},{
+  label: 'Gain2',
+  value: 200
+}
+]
+};

src/types/types.d.ts

@@ -0,0 +1,21 @@
+export type IWaterfallGraphProps = {
+  transactions: Array<ITransaction>;
+}
+
+export type ITransaction = {
+  label: string;
+  value: number;
+  color?: string;
+}
+
+export type IChartElement = {
+  name: string;
+  value: number;
+  yVal: number;
+  cumulativeSum: number;
+}
+export type IUseWaterfallChartReturnType = {
+  chartElements: Array<IChartElement>;
+  yAxisUnitsPerPixel: number;
+  yValueForZeroLine: number
+}

src/waterfall-chart/WaterFallChart.tsx

@@ -0,0 +1,88 @@
+import React, { FC, useEffect, useRef, useState } from "react";
+import { IWaterfallGraphProps } from "../types/types";
+import { useWaterfallChart } from  './utils';
+import styles from './styles.module.scss';
+import '../index.css';
+import { DEFAULT_BAR_WIDTH } from "../constants";
+
+const WaterFallChart:FC<IWaterfallGraphProps> = (props) => {
+  const { transactions } = props;
+
+  const wrapperRef = useRef<HTMLDivElement | null>(null);
+  const [wrapperHeight, setWrapperHeight] = useState(0);
+
+  useEffect(() => {
+    // Function to calculate wrapper height
+    const calculateWrapperHeight = (): void => {
+      if (wrapperRef.current) {
+        const height = wrapperRef?.current?.offsetHeight; // Use offsetHeight to get the height
+        setWrapperHeight(height); // Update state with calculated height
+      }
+    };
+
+    calculateWrapperHeight(); // Call the function initially
+
+    // Add event listener for window resize to recalculate wrapper height
+    window.addEventListener('resize', calculateWrapperHeight);
+
+    return () => {
+      // Cleanup: remove event listener on component unmount
+      window.removeEventListener('resize', calculateWrapperHeight);
+    };
+  }, []);
+  const { chartElements, yAxisUnitsPerPixel, yValueForZeroLine } = useWaterfallChart(transactions, wrapperHeight);
+
+  return (
+    <div
+      ref={wrapperRef}
+      className={styles.chartWrapper}
+    >
+      <svg className={styles.svgContainer}>
+        {/* y-axis */}
+        <line x1="0" y1="0" x2="0" y2="100%" style={{ strokeDasharray: 1, stroke: 'rgb(158, 158, 158)', strokeWidth: 2}} />
+        {/* x-axis */}
+        <line x1="0" y1="100%" x2="100%" y2="100%" style={{ strokeDasharray: 1, stroke: 'rgb(158, 158, 158)', strokeWidth: 2}} />
+        {yValueForZeroLine > 0 && (
+          // zero line if negative values present
+          <line
+            x1="0"
+            y1={yValueForZeroLine}
+            x2="100%"
+            y2={yValueForZeroLine}
+            style={{ strokeDasharray: 1, stroke: 'rgb(158, 158, 158)', strokeWidth: 2}}
+          />
+        )}
+        {chartElements?.map((chartElement, index) => (
+          <>
+            <rect
+              key={chartElement?.name}
+              width={DEFAULT_BAR_WIDTH}
+              height={Math.abs(chartElement?.value / yAxisUnitsPerPixel)}
+              y={chartElement?.yVal}
+              x={((2*index)+1) * DEFAULT_BAR_WIDTH}
+              style={{
+                fill: chartElement?.value > 0 ? '#00B050' : '#FF0000',
+                strokeWidth: 2,
+                stroke: chartElement?.value > 0 ? '#00B050' : '#FF0000',
+                zIndex: 1,
+                transition: 'all 0.3s ease-in-out'
+              }} />
+            <line
+              key={chartElement?.name}
+              x1={((2*index)+2) * DEFAULT_BAR_WIDTH}
+              y1={wrapperHeight - (chartElement?.cumulativeSum / yAxisUnitsPerPixel) - (wrapperHeight - yValueForZeroLine)}
+              x2={((2*index)+3) * DEFAULT_BAR_WIDTH}
+              y2={wrapperHeight - (chartElement?.cumulativeSum / yAxisUnitsPerPixel) - (wrapperHeight - yValueForZeroLine)}
+              style={{
+                stroke: '#545453',
+                strokeWidth: 2,
+                zIndex: 1
+              }} />
+          </>
+        ))}
+      </svg>
+    </div>
+  );
+};
+
+export default WaterFallChart;

src/waterfall-chart/index.js

@@ -0,0 +1,3 @@
+import WaterFallChart from "./WaterFallChart";
+
+export default WaterFallChart;

src/waterfall-chart/styles.module.scss

@@ -0,0 +1,20 @@
+#root {
+  width: 100%;
+  height: 100%;
+}
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+.chartWrapper {
+  height: calc(100% - 40px);
+  width: calc(100% - 40px);
+  margin: 20px;
+}
+
+.svgContainer {
+  height: 100%;
+  width: 100%;
+  display: block;
+}

src/waterfall-chart/utils.ts

@@ -0,0 +1,61 @@
+import { IChartElement, ITransaction, IUseWaterfallChartReturnType } from "../types/types";
+
+export const useWaterfallChart = (transactions: Array<ITransaction>, chartHeight: number): IUseWaterfallChartReturnType => {
+  const largestCumulativeVal = getLargestCumulativeSum(transactions); // this will be the highest y point in the graph
+  const smallestCumulativeVal = getSmallestCumulativeSum(transactions);
+  // const pixelPerYUnit = 20;
+  let cumulativeSum = transactions[0]?.value || 0;
+  let chartElements: Array<IChartElement> = [];
+  let yAxisUnitsPerPixel = 0;
+  let yValueForZeroLine = 0;
+  if (chartHeight && chartHeight > 0) {
+    yAxisUnitsPerPixel = (largestCumulativeVal - smallestCumulativeVal) / chartHeight;
+    yValueForZeroLine = largestCumulativeVal / yAxisUnitsPerPixel;
+
+    chartElements = transactions.map((transaction, index) => {
+      const {label, value} = transaction;
+      let yVal=0;
+      if (value < 0 || index === 0) yVal = chartHeight - ((cumulativeSum) / yAxisUnitsPerPixel) - (chartHeight - yValueForZeroLine);
+      else yVal = chartHeight - ((cumulativeSum + value) / yAxisUnitsPerPixel) - (chartHeight - yValueForZeroLine);
+      if (index > 0) cumulativeSum += value;
+      return ({
+        name: label,
+        value,
+        yVal,
+        cumulativeSum
+      });
+    });
+  }
+  return({ chartElements, yAxisUnitsPerPixel, yValueForZeroLine});
+};
+
+function getLargestCumulativeSum(arr: Array<ITransaction>): number {
+  let maxSum = arr[0]?.value; // Initialize maxSum and currentSum with the first element of the array
+  let currentSum = arr[0]?.value;
+
+  for (let i = 1; i < arr.length; i++) {
+    currentSum += arr[i]?.value;
+
+    if (currentSum > maxSum) {
+      maxSum = currentSum;
+    }
+  }
+
+  return maxSum;
+}
+
+
+function getSmallestCumulativeSum(arr: Array<ITransaction>): number {
+  let minSum = arr[0]?.value; // Initialize minSum and currentSum with the first element of the array
+  let currentSum = arr[0]?.value;
+
+  for (let i = 1; i < arr.length; i++) {
+    currentSum += arr[i]?.value;
+
+    if (currentSum < minSum) {
+      minSum = currentSum;
+    }
+  }
+  if(minSum > 0) return 0; // if chart never goes below zero then smallest value will be zero
+  return minSum;
+}

tsconfig.json

@@ -9,7 +9,6 @@
       "sourceMap": true,
       "noEmit": false,
       "declaration": true,
-      "suppressImplicitAnyIndexErrors": true,
       "allowSyntheticDefaultImports": true,
       "lib": ["es2018", "dom"],
       "moduleResolution": "node",