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/changelog.txt b/changelog.txt index 744e805f..c0e0ca17 100644 --- a/changelog.txt +++ b/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. 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/src/components/area-chart/area-chart.tsx b/src/components/area-chart/area-chart.tsx index fe9f1c13..a4b24b98 100644 --- a/src/components/area-chart/area-chart.tsx +++ b/src/components/area-chart/area-chart.tsx @@ -188,6 +188,7 @@ const AreaChart = ( { fill: xAxisFontColor, } } hide={ ! showXAxis } + interval="preserveStartEnd" /> ) } -
+
{ item[ nameKey ] || item.dataKey } { formatter 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'], diff --git a/src/components/line-chart/chart-tooltip-content.tsx b/src/components/line-chart/chart-tooltip-content.tsx index 11200ff1..11cd1d37 100644 --- a/src/components/line-chart/chart-tooltip-content.tsx +++ b/src/components/line-chart/chart-tooltip-content.tsx @@ -112,7 +112,7 @@ const ChartTooltipContent = React.forwardRef< } } /> ) } -
+
{ 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 ( + + ); + } ) } ); 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" }