Merge pull request #508 from Groww-OSS/develop

Develop Merge PR | Sep 11

packages/react-charts/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@groww-tech/react-charts",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "description": "React charts library tailored as per Groww needs",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

packages/react-charts/src/BarGraph/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode, useState } from 'react';
 import { scaleBand } from '@visx/scale';
 import { AxisBottom } from '@visx/axis';
 import { isEmpty } from '../utils/helpers';
@@ -18,10 +18,20 @@ const BarGraph = (props: BarGraphProps) => {
     axisLabelFontSize,
     axisLabelColor,
     getBarTopTextUI,
+    getTooltipUI,
     showAxis,
+    showTooltip,
     bottomAxisHeight
   } = props;
 
+  const [ tooltipData, setTooltipData ] = useState<TooltipType>({
+    show: false,
+    x: 0,
+    y: 0,
+    barHeight: 0,
+    selectedIndex: 0
+  });
+
 
   const getXValue = (d: BarData) => d[0];
 
@@ -93,83 +103,114 @@ const BarGraph = (props: BarGraphProps) => {
   };
 
 
+  const handleMouseEnter = (textX: number, textY: number, barHeight: number, index: number) => {
+
+    setTooltipData({
+      show: true,
+      x: textX,
+      y: textY,
+      barHeight,
+      selectedIndex: index
+    });
+  };
+
+
+  const handleMouseOut = () => {
+    setTooltipData({
+      ...tooltipData,
+      show: false
+    });
+  };
+
   return (
-    <svg width={width}
-      height={height}
-    >
-      <rect width={width}
+    <div className='pos-rel'>
+      <svg width={width}
         height={height}
-        fill="rgba(0, 0, 0, 0)"
-        style={{ overflow: 'visible' }}
-      />
-      <g>
-        {
-          data.map(d => {
-            const y = getYValue(d);
-            const yScaleY = yScale(y);
-            const isNegative = y < 0;
-            const xval = getXValue(d);
-
-            let barBandwidth = xScale.bandwidth();
-
-            let barX = xScale(xval) ?? 0;
-
-            if (maxBarWidth && barBandwidth > maxBarWidth) {
-              barX = barX + (barBandwidth - maxBarWidth) / 2;
-              barBandwidth = maxBarWidth;
-            }
-
-            const barY = yScaleY;
-            const barHeight = isNegative ? Math.abs(yScaleY - yScale0) : yScale0 - barY;
-            const textX = barX + barBandwidth / 2;
-            const textY = isNegative ? barY + 12 : barY - 5;
-
-
-            return (
-              <React.Fragment key={getXValue(d) + getYValue(d)}>
-                {getBarTopTextUI(textX, textY, d)}
-                <line
-                  className='bar21animation'
-                  x1={textX}
-                  x2={textX}
-                  y1={yScale0}
-                  y2={barY}
-                  stroke-width={barBandwidth}
-                  height={barHeight}
-                  stroke={getBarColor(d)}
-                >
-                </line>
-              </React.Fragment>
-            );
-          })
-        }
-        <line
-          x1={0}
-          y1={yScale0 }
-          x2= {xMax}
-          y2= {yScale0 }
-          stroke={axisColor}
-          strokeWidth={1}
+      >
+        <rect width={width}
+          height={height}
+          fill="rgba(0, 0, 0, 0)"
+          style={{ overflow: 'visible' }}
         />
-
-      </g>
-
-      {showAxis && getBottomAxisUI()}
-    </svg>
+        <g>
+          {
+            data.map((d, i) => {
+              const y = getYValue(d);
+              const yScaleY = yScale(y);
+              const isNegative = y < 0;
+              const xval = getXValue(d);
+
+              let barBandwidth = xScale.bandwidth();
+
+              let barX = xScale(xval) ?? 0;
+
+              if (maxBarWidth && barBandwidth > maxBarWidth) {
+                barX = barX + (barBandwidth - maxBarWidth) / 2;
+                barBandwidth = maxBarWidth;
+              }
+
+              const barY = yScaleY;
+              const barHeight = isNegative ? Math.abs(yScaleY - yScale0) : yScale0 - barY;
+              const textX = barX + barBandwidth / 2;
+              const textY = isNegative ? barY + 12 : barY - 5;
+
+              return (
+                <React.Fragment key={getXValue(d) + getYValue(d)}>
+                  {getBarTopTextUI(textX, textY, d)}
+                  <line
+                    className='bar21animation'
+                    x1={textX}
+                    x2={textX}
+                    y1={yScale0}
+                    y2={barY}
+                    strokeWidth={barBandwidth}
+                    height={barHeight}
+                    stroke={getBarColor(d)}
+                    onMouseEnter={() => handleMouseEnter(textX, textY, barHeight, i)}
+                    onMouseOut={handleMouseOut}
+                  />
+                </React.Fragment>
+              );
+            })
+          }
+          <line
+            x1={0}
+            y1={yScale0}
+            x2={xMax}
+            y2={yScale0}
+            stroke={axisColor}
+            strokeWidth={1}
+          />
+        </g>
+
+        {showAxis && getBottomAxisUI()}
+      </svg>
+      {showTooltip && tooltipData.show && getTooltipUI(tooltipData.selectedIndex, tooltipData.x, tooltipData.y, tooltipData.barHeight)}
+    </div>
   );
 };
 
-
 export type BarData = [string, number, string]
- // xasis value, yaxis value, bar color
+ // xaxis value, yaxis value, bar color
+
+type TooltipType = {
+  show: boolean;
+  x: number;
+  y: number;
+  barHeight:number;
+  selectedIndex: number;
+}
+
 
 type DefaultProps = {
   axisColor: string;
   topMargin: number;
   bottomMargin: number;
   maxBarWidth: number;
   getBarTopTextUI: (textX : number, textY: number, barData: BarData) => SVGElement | null;
+  getTooltipUI: (index: number, x: number, y: number, barHeight: number) => ReactNode;
   showAxis: boolean;
+  showTooltip?: boolean;
   axisLabelFontSize?: number;
   axisLabelColor?: string;
   bottomAxisHeight: number;
@@ -188,7 +229,9 @@ BarGraph.defaultProps = {
   bottomMargin: 0,
   maxBarWidth: 20,
   getBarTopTextUI: () => null,
+  getTooltipUI: () => null,
   showAxis: false,
+  showTooltip: false,
   axisLabelFontSize: 11,
   axisLabelColor: 'var(--gray900)',
   bottomAxisHeight: 22

packages/ui-toolkit/stories/Calendar.stories.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { StoryFn } from '@storybook/react';
+import { Calendar } from '../src/components/molecules';
+import { Props as CalendarProps, CALENDAR_TYPE } from '../src/components/molecules/Calendar/Calendar';
+
+export default {
+  title: 'Calendar',
+  component: Calendar,
+  tags: [ 'autodocs' ]
+};
+
+
+const Template: StoryFn<CalendarProps> = (args) => <Calendar {...args} />;
+
+export const CalendarStory = {
+  render: (args) => {
+    const updatedArgs = { ...args };
+
+    // Adjust props based on the selected type (MONTH or DATE)
+    if (args.type === CALENDAR_TYPE.MONTH) {
+      updatedArgs.minMonth = new Date(args.minMonth ?? new Date());
+      updatedArgs.maxMonth = new Date(args.maxMonth ?? new Date());
+
+    } else if (args.type === CALENDAR_TYPE.DATE) {
+      updatedArgs.minDate = new Date(args.minDate ?? new Date());
+      updatedArgs.maxDate = new Date(args.maxDate ?? new Date());
+    }
+
+    return <Template {...updatedArgs} />;
+  },
+  args: {
+    type: CALENDAR_TYPE.MONTH,
+    minMonth: new Date(2021, 6, 6),
+    maxMonth: new Date(2031, 9, 6),
+    minDate: new Date(2021, 6, 6),
+    maxDate: new Date(2031, 6, 20)
+  },
+  argTypes: {
+    type: {
+      control: 'select',
+      options: Object.values(CALENDAR_TYPE)
+    },
+    minMonth: {
+      control: 'date',
+      if: { arg: 'type', eq: CALENDAR_TYPE.MONTH } // Only show when MONTH type is selected
+    },
+    maxMonth: {
+      control: 'date',
+      if: { arg: 'type', eq: CALENDAR_TYPE.MONTH } // Only show when MONTH type is selected
+    },
+    minDate: {
+      control: 'date',
+      if: { arg: 'type', eq: CALENDAR_TYPE.DATE } // Only show when DATE type is selected
+    },
+    maxDate: {
+      control: 'date',
+      if: { arg: 'type', eq: CALENDAR_TYPE.DATE } // Only show when DATE type is selected
+    }
+  }
+};