+
{ item[ nameKey ] || item.dataKey }
{ formatter
diff --git a/src/components/line-chart/line-chart.stories.tsx b/src/components/line-chart/line-chart.stories.tsx
index fa211bc1..c270c89e 100644
--- a/src/components/line-chart/line-chart.stories.tsx
+++ b/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 },
+ },
+ },
+};
diff --git a/src/components/line-chart/line-chart.tsx b/src/components/line-chart/line-chart.tsx
index 3fdf2be4..ba160144 100644
--- a/src/components/line-chart/line-chart.tsx
+++ b/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"
/>
+ { biaxial && dataKeys.length > 1 && (
+
+ ) }
+
{ showTooltip && (
) }
- { dataKeys.map( ( key, index ) => (
-
- ) ) }
+ { dataKeys.map( ( key, index ) => {
+ // Determine which Y-axis this line should use
+ let axisId = 'left';
+ if ( biaxial && index > 0 ) {
+ axisId = 'right';
+ }
+
+ return (
+
+ );
+ } ) }
);
From 7efbf430db29dc2c1277f2cf28b904c96d6d2d5e Mon Sep 17 00:00:00 2001
From: jaieds <87969327+jaieds@users.noreply.github.com>
Date: Thu, 10 Apr 2025 15:06:02 +0600
Subject: [PATCH 2/4] fix: Outside days are not visible
---
changelog.txt | 1 +
src/components/datepicker/datepicker-component.tsx | 11 +++++++----
2 files changed, 8 insertions(+), 4 deletions(-)
diff --git a/changelog.txt b/changelog.txt
index d60fc39c..0060f5fb 100644
--- a/changelog.txt
+++ b/changelog.txt
@@ -1,5 +1,6 @@
Version 1.6.1 - xth 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.
diff --git a/src/components/datepicker/datepicker-component.tsx b/src/components/datepicker/datepicker-component.tsx
index 58319a9a..83fcc9ba 100644
--- a/src/components/datepicker/datepicker-component.tsx
+++ b/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 && (
) }
@@ -553,6 +555,7 @@ const DatePickerComponent = ( {
...classNames,
} }
numberOfMonths={ numberOfMonths }
+ showOutsideDays={ true }
components={ {
MonthCaption:
CustomMonthCaption as unknown as CustomComponents['MonthCaption'],
From 298ba29c99e63b36d9c552595d848cc488a412bd Mon Sep 17 00:00:00 2001
From: jaieds <87969327+jaieds@users.noreply.github.com>
Date: Thu, 10 Apr 2025 15:08:59 +0600
Subject: [PATCH 3/4] Update changelog.txt
---
changelog.txt | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/changelog.txt b/changelog.txt
index 0060f5fb..c0e0ca17 100644
--- a/changelog.txt
+++ b/changelog.txt
@@ -1,4 +1,4 @@
-Version 1.6.1 - xth April, 2025
+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.
From 347b8fc1336e3623502bc06012e7d4e4a8313808 Mon Sep 17 00:00:00 2001
From: jaieds <87969327+jaieds@users.noreply.github.com>
Date: Thu, 10 Apr 2025 15:09:49 +0600
Subject: [PATCH 4/4] Bump version to `v1.6.1`
---
README.md | 4 ++--
package-lock.json | 4 ++--
package.json | 2 +-
version.json | 2 +-
4 files changed, 6 insertions(+), 6 deletions(-)
diff --git a/README.md b/README.md
index 1ec364cd..9d8f2e29 100644
--- a/README.md
+++ b/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
```
diff --git a/package-lock.json b/package-lock.json
index bfc0a1f9..ff173138 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
{
"name": "@bsf/force-ui",
- "version": "1.6.0",
+ "version": "1.6.1",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "@bsf/force-ui",
- "version": "1.6.0",
+ "version": "1.6.1",
"license": "ISC",
"dependencies": {
"@emotion/is-prop-valid": "^1.3.0",
diff --git a/package.json b/package.json
index 48870db4..642a6425 100644
--- a/package.json
+++ b/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",
diff --git a/version.json b/version.json
index 27da130c..1e5bf995 100644
--- a/version.json
+++ b/version.json
@@ -1,3 +1,3 @@
{
- "force-ui": "1.6.0"
+ "force-ui": "1.6.1"
}