From e20163ac488629265456f0755f1c5714c31f7561 Mon Sep 17 00:00:00 2001 From: Chinmay Srivastava Date: Mon, 9 Sep 2024 14:29:41 +0530 Subject: [PATCH 1/6] feat: added hover state in BarGraph --- packages/react-charts/src/BarGraph/index.tsx | 169 ++++++++++++------- 1 file changed, 106 insertions(+), 63 deletions(-) diff --git a/packages/react-charts/src/BarGraph/index.tsx b/packages/react-charts/src/BarGraph/index.tsx index ddee614a..84a0f752 100644 --- a/packages/react-charts/src/BarGraph/index.tsx +++ b/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 [ tooltip, setTooltip ] = useState({ + show: false, + x: 0, + y: 0, + barHeight: 0, + selectedIndex: 0 + }); + const getXValue = (d: BarData) => d[0]; @@ -93,75 +103,104 @@ const BarGraph = (props: BarGraphProps) => { }; + const handleMouseEnter = (textX: number, textY: number, barHeight: number, index: number) => { + + setTooltip({ + show: true, + x: textX, + y: textY, + barHeight, + selectedIndex: index + }); + }; + + + const handleMouseOut = () => { + setTooltip({ + ...tooltip, + show: false + }); + }; + return ( - - + - - { - 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 ( - - {getBarTopTextUI(textX, textY, d)} - - - - ); - }) - } - + - - - - {showAxis && getBottomAxisUI()} - + + { + 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 ( + + {getBarTopTextUI(textX, textY, d)} + handleMouseEnter(textX, textY, barHeight, i)} + onMouseOut={handleMouseOut} + /> + + ); + }) + } + + + + {showAxis && getBottomAxisUI()} + + {showTooltip && tooltip.show && getTooltipUI(tooltip.selectedIndex, tooltip.x, tooltip.y, tooltip.barHeight)} + ); }; - 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; @@ -169,7 +208,9 @@ type DefaultProps = { 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 From 64b7b5a8340b071d02d6f66057fdad08ee40868e Mon Sep 17 00:00:00 2001 From: Chinmay Srivastava Date: Mon, 9 Sep 2024 14:35:15 +0530 Subject: [PATCH 2/6] refactor: make props optional --- packages/react-charts/src/BarGraph/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react-charts/src/BarGraph/index.tsx b/packages/react-charts/src/BarGraph/index.tsx index 84a0f752..5279df73 100644 --- a/packages/react-charts/src/BarGraph/index.tsx +++ b/packages/react-charts/src/BarGraph/index.tsx @@ -208,9 +208,9 @@ type DefaultProps = { bottomMargin: number; maxBarWidth: number; getBarTopTextUI: (textX : number, textY: number, barData: BarData) => SVGElement | null; - getTooltipUI: (index: number, x: number, y: number, barHeight: number) => ReactNode; + getTooltipUI?: (index: number, x: number, y: number, barHeight: number) => ReactNode; showAxis: boolean; - showTooltip: boolean; + showTooltip?: boolean; axisLabelFontSize?: number; axisLabelColor?: string; bottomAxisHeight: number; From 31f4a3da3ecb31bd809fb14a7f3105eda47f6bb2 Mon Sep 17 00:00:00 2001 From: Chinmay Srivastava Date: Mon, 9 Sep 2024 15:04:33 +0530 Subject: [PATCH 3/6] refactor: tooltip variable name --- packages/react-charts/src/BarGraph/index.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/react-charts/src/BarGraph/index.tsx b/packages/react-charts/src/BarGraph/index.tsx index 5279df73..eed3a96b 100644 --- a/packages/react-charts/src/BarGraph/index.tsx +++ b/packages/react-charts/src/BarGraph/index.tsx @@ -24,7 +24,7 @@ const BarGraph = (props: BarGraphProps) => { bottomAxisHeight } = props; - const [ tooltip, setTooltip ] = useState({ + const [ tooltipData, setTooltipData ] = useState({ show: false, x: 0, y: 0, @@ -105,7 +105,7 @@ const BarGraph = (props: BarGraphProps) => { const handleMouseEnter = (textX: number, textY: number, barHeight: number, index: number) => { - setTooltip({ + setTooltipData({ show: true, x: textX, y: textY, @@ -116,8 +116,8 @@ const BarGraph = (props: BarGraphProps) => { const handleMouseOut = () => { - setTooltip({ - ...tooltip, + setTooltipData({ + ...tooltipData, show: false }); }; @@ -185,7 +185,7 @@ const BarGraph = (props: BarGraphProps) => { {showAxis && getBottomAxisUI()} - {showTooltip && tooltip.show && getTooltipUI(tooltip.selectedIndex, tooltip.x, tooltip.y, tooltip.barHeight)} + {showTooltip && tooltipData.show && getTooltipUI(tooltipData.selectedIndex, tooltipData.x, tooltipData.y, tooltipData.barHeight)} ); }; @@ -208,7 +208,7 @@ type DefaultProps = { bottomMargin: number; maxBarWidth: number; getBarTopTextUI: (textX : number, textY: number, barData: BarData) => SVGElement | null; - getTooltipUI?: (index: number, x: number, y: number, barHeight: number) => ReactNode; + getTooltipUI: (index: number, x: number, y: number, barHeight: number) => ReactNode; showAxis: boolean; showTooltip?: boolean; axisLabelFontSize?: number; From d651045612f8d60e7b88abddac7c5664baedf17a Mon Sep 17 00:00:00 2001 From: harshpathakzz Date: Tue, 10 Sep 2024 00:39:30 +0530 Subject: [PATCH 4/6] added min max props --- .../ui-toolkit/stories/Calander.stories.tsx | 57 ++++++++++++++----- 1 file changed, 43 insertions(+), 14 deletions(-) diff --git a/packages/ui-toolkit/stories/Calander.stories.tsx b/packages/ui-toolkit/stories/Calander.stories.tsx index 0ee916ce..a5e1409d 100644 --- a/packages/ui-toolkit/stories/Calander.stories.tsx +++ b/packages/ui-toolkit/stories/Calander.stories.tsx @@ -1,7 +1,5 @@ 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'; @@ -12,20 +10,51 @@ export default { }; -const Template: StoryFn = (args) => ( - -); +const Template: StoryFn = (args) => ; -export const Month = { - render: Template, - args: { - type: CALENDAR_TYPE.MONTH - } -}; +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); + updatedArgs.maxMonth = new Date(args.maxMonth); + + } else if (args.type === CALENDAR_TYPE.DATE) { + updatedArgs.minDate = new Date(args.minDate); + updatedArgs.maxDate = new Date(args.maxDate); + } -export const Date = { - render: Template, + return