SUR-453 - [Dashboard] Site Search Traffic

README.md

@@ -14,7 +14,7 @@ Using Force UI as a dependency in package.json -
 
 ```json
 "dependencies": {
-  "@bsf/force-ui": "git+https://github.com/brainstormforce/force-ui#1.6.0"
+  "@bsf/force-ui": "git+https://github.com/brainstormforce/force-ui#1.6.1"
 }
 ```
 
@@ -28,7 +28,7 @@ npm install
 Or you can directly run the following command to install the package -
 
 ```bash
-npm i -S @bsf/force-ui@git+https://github.com/brainstormforce/force-ui.git#1.6.0
+npm i -S @bsf/force-ui@git+https://github.com/brainstormforce/force-ui.git#1.6.1
 ```
 
 <br />

changelog.txt

@@ -1,3 +1,7 @@
+Version 1.6.1 - 11th April, 2025
+- Improvement - Added a new prop to the LineChart component to enable Biaxial Line chart functionality, along with various UI enhancements for improved user experience.
+- Fix - Corrected the positioning of days in the DatePicker component to ensure accurate display and improved user experience.
+
 Version 1.6.0 - 8th April, 2025
 - New - Introduced a versatile Text component that supports multiple HTML elements and customizable styles for enhanced typography flexibility.
 - Improvement - Display xAxis data on the tooltip when hovering.

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@bsf/force-ui",
-    "version": "1.6.0",
+    "version": "1.6.1",
     "description": "Library of components for the BSF project",
     "main": "./dist/force-ui.cjs.js",
     "module": "./dist/force-ui.es.js",

src/components/area-chart/area-chart.tsx

@@ -188,6 +188,7 @@ const AreaChart = ( {
 						fill: xAxisFontColor,
 					} }
 					hide={ ! showXAxis }
+					interval="preserveStartEnd"
 				/>
 				<YAxis
 					dataKey={ yAxisDataKey }

src/components/area-chart/chart-tooltip-content.tsx

@@ -119,7 +119,7 @@ const ChartTooltipContent = forwardRef<
 										} }
 									/>
 								) }
-								<div className="flex-1 flex justify-between items-center">
+								<div className="flex-1 flex justify-between items-center gap-1">
 									<span>{ item[ nameKey ] || item.dataKey }</span>
 									<span className="font-mono font-medium">
 										{ formatter

src/components/datepicker/datepicker-component.tsx

@@ -349,7 +349,10 @@ const DatePickerComponent = ( {
 
 		const shouldShowDay =
 			isThisMonth || isRangeEndInCurrentMonth || isPartOfRange;
-		const showOutsideDates = ! showOutsideDays && isOutside;
+
+		// Fix: Corrected the logic for hiding outside dates
+		// Only hide outside days when showOutsideDays is false AND the day is outside
+		const hideOutsideDay = ! showOutsideDays && isOutside;
 
 		// Common class for disabled outside days
 		const disabledOutsideClass =
@@ -398,7 +401,7 @@ const DatePickerComponent = ( {
 				className={ cn(
 					buttonClasses,
 					isToday && 'font-semibold',
-					showOutsideDates && 'opacity-0',
+					hideOutsideDay && 'opacity-0',
 					isRangeStart && 'fui-range-start',
 					isRangeEnd && 'fui-range-end',
 					isRangeMiddle && 'fui-range-middle',
@@ -415,8 +418,7 @@ const DatePickerComponent = ( {
 				data-selected={ isSelected }
 				data-day={ format( day.date, 'yyyy-MM-dd' ) }
 			>
-				{ ( ! showOutsideDates || ( isPartOfRange && shouldShowDay ) ) &&
-					customDayProps.children }
+				{ customDayProps.children }
 				{ isToday && shouldShowDay && (
 					<span className="absolute h-1 w-1 bg-background-brand rounded-full bottom-1"></span>
 				) }
@@ -553,6 +555,7 @@ const DatePickerComponent = ( {
 					...classNames,
 				} }
 				numberOfMonths={ numberOfMonths }
+				showOutsideDays={ true }
 				components={ {
 					MonthCaption:
 						CustomMonthCaption as unknown as CustomComponents['MonthCaption'],

src/components/line-chart/chart-tooltip-content.tsx

@@ -112,7 +112,7 @@ const ChartTooltipContent = React.forwardRef<
 										} }
 									/>
 								) }
-								<div className="flex-1 flex justify-between items-center">
+								<div className="flex-1 flex justify-between items-center gap-1">
 									<span>{ item[ nameKey ] || item.dataKey }</span>
 									<span className="font-mono font-medium">
 										{ formatter

src/components/line-chart/line-chart.stories.tsx

@@ -19,7 +19,18 @@ const chartDataMultiple = [
 	{ month: 'June', desktop: 214, mobile: 140 },
 ];
 
+// Data for biaxial chart with different scales
+const biaxialChartData = [
+	{ month: 'January', visits: 186, revenue: 5800 },
+	{ month: 'February', visits: 305, revenue: 9200 },
+	{ month: 'March', visits: 237, revenue: 7400 },
+	{ month: 'April', visits: 173, revenue: 5100 },
+	{ month: 'May', visits: 209, revenue: 6300 },
+	{ month: 'June', visits: 214, revenue: 6800 },
+];
+
 const dataKeys = [ 'desktop', 'mobile' ];
+const biaxialDataKeys = [ 'visits', 'revenue' ];
 
 const colors = [ { stroke: '#2563EB' }, { stroke: '#38BDF8' } ];
 
@@ -86,3 +97,25 @@ export const LineChartMultiple: Story = {
 		withDots: false,
 	},
 };
+
+export const BiaxialLineChart: Story = {
+	args: {
+		data: biaxialChartData,
+		dataKeys: biaxialDataKeys,
+		colors: [ { stroke: '#2563EB' }, { stroke: '#10B981' } ],
+		showXAxis: true,
+		showYAxis: true,
+		showTooltip: true,
+		showCartesianGrid: true,
+		tickFormatter: monthFormatter,
+		xAxisDataKey: 'month',
+		xAxisFontSize: 'sm',
+		withDots: true,
+		biaxial: true,
+		chartWidth: 500,
+		chartHeight: 300,
+		lineChartWrapperProps: {
+			margin: { top: 5, right: 5, bottom: 5, left: 5 },
+		},
+	},
+};

src/components/line-chart/line-chart.tsx

@@ -93,6 +93,11 @@ interface LineChartProps {
 	 * @default '#E5E7EB'
 	 */
 	gridColor?: string;
+
+	/**
+	 * Biaxial chart.
+	 */
+	biaxial?: boolean;
 }
 
 const LineChart = ( {
@@ -117,6 +122,7 @@ const LineChart = ( {
 	lineChartWrapperProps,
 	strokeDasharray = '3 3',
 	gridColor = '#E5E7EB',
+	biaxial = false,
 }: LineChartProps ) => {
 	const defaultColors = [ { stroke: '#2563EB' }, { stroke: '#38BDF8' } ];
 
@@ -159,9 +165,11 @@ const LineChart = ( {
 						fill: xAxisFontColor,
 					} }
 					hide={ ! showXAxis }
+					interval="equidistantPreserveStart"
 				/>
 				<YAxis
-					dataKey={ yAxisDataKey }
+					yAxisId="left"
+					dataKey={ biaxial ? dataKeys[ 0 ] : yAxisDataKey }
 					tickLine={ false }
 					axisLine={ false }
 					tickMargin={ 8 }
@@ -170,8 +178,25 @@ const LineChart = ( {
 						fill: yAxisFontColor,
 					} }
 					hide={ ! showYAxis }
+					orientation="left"
 				/>
 
+				{ biaxial && dataKeys.length > 1 && (
+					<YAxis
+						yAxisId="right"
+						dataKey={ dataKeys[ 1 ] }
+						tickLine={ false }
+						axisLine={ false }
+						tickMargin={ 8 }
+						tick={ {
+							fontSize: fontSizeVariant,
+							fill: yAxisFontColor,
+						} }
+						orientation="right"
+						hide={ ! showYAxis }
+					/>
+				) }
+
 				{ showTooltip && (
 					<Tooltip
 						content={
@@ -183,17 +208,26 @@ const LineChart = ( {
 					/>
 				) }
 
-				{ dataKeys.map( ( key, index ) => (
-					<Line
-						key={ key }
-						type="natural"
-						dataKey={ key }
-						stroke={ appliedColors[ index ].stroke }
-						fill={ appliedColors[ index ].stroke }
-						strokeWidth={ 2 }
-						dot={ withDots }
-					/>
-				) ) }
+				{ dataKeys.map( ( key, index ) => {
+					// Determine which Y-axis this line should use
+					let axisId = 'left';
+					if ( biaxial && index > 0 ) {
+						axisId = 'right';
+					}
+
+					return (
+						<Line
+							key={ key }
+							type="natural"
+							dataKey={ key }
+							stroke={ appliedColors[ index ].stroke }
+							fill={ appliedColors[ index ].stroke }
+							strokeWidth={ 2 }
+							dot={ withDots }
+							yAxisId={ axisId }
+						/>
+					);
+				} ) }
 			</LineChartWrapper>
 		</ResponsiveContainer>
 	);

version.json

@@ -1,3 +1,3 @@
 {
-	"force-ui": "1.6.0"
+	"force-ui": "1.6.1"
 }