From 83c6e643c173fb6d8a373803a6b6a52b411cb530 Mon Sep 17 00:00:00 2001 From: Shubhabrata Ghosh Date: Mon, 2 Oct 2023 20:20:19 +0530 Subject: [PATCH 1/8] Sets scaled height to 1 if value is relatively very small --- .../VerticalBarChart/VerticalBarChart.base.tsx | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/packages/react-charting/src/components/VerticalBarChart/VerticalBarChart.base.tsx b/packages/react-charting/src/components/VerticalBarChart/VerticalBarChart.base.tsx index 830eef808829d9..5ebb0c868a6ba0 100644 --- a/packages/react-charting/src/components/VerticalBarChart/VerticalBarChart.base.tsx +++ b/packages/react-charting/src/components/VerticalBarChart/VerticalBarChart.base.tsx @@ -111,6 +111,7 @@ export class VerticalBarChartBase extends React.Component point.y)!, this.props.yMaxValue || 0, ); + // const minVisibleValue=0 const legendBars: JSX.Element = this._getLegendData(this._points, this.props.theme!.palette); this._classNames = getClassNames(this.props.styles!, { theme: this.props.theme!, @@ -536,11 +537,17 @@ export class VerticalBarChartBase extends React.Component ; + } else if (barHeight <= 1) { + adjustedBarHeight = 1; + } else { + adjustedBarHeight = barHeight; } const xPoint = xBarScale(point.x as number); - const yPoint = containerHeight - this.margins.bottom! - yBarScale(point.y); + const yPoint = containerHeight - this.margins.bottom! - adjustedBarHeight; return ( Date: Mon, 2 Oct 2023 20:26:50 +0530 Subject: [PATCH 2/8] Minor code cleanup --- .../src/components/VerticalBarChart/VerticalBarChart.base.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/react-charting/src/components/VerticalBarChart/VerticalBarChart.base.tsx b/packages/react-charting/src/components/VerticalBarChart/VerticalBarChart.base.tsx index 5ebb0c868a6ba0..1d2e83df14dc82 100644 --- a/packages/react-charting/src/components/VerticalBarChart/VerticalBarChart.base.tsx +++ b/packages/react-charting/src/components/VerticalBarChart/VerticalBarChart.base.tsx @@ -111,7 +111,6 @@ export class VerticalBarChartBase extends React.Component point.y)!, this.props.yMaxValue || 0, ); - // const minVisibleValue=0 const legendBars: JSX.Element = this._getLegendData(this._points, this.props.theme!.palette); this._classNames = getClassNames(this.props.styles!, { theme: this.props.theme!, From 60703df4c23449fde3ca3830576864b82fe522bd Mon Sep 17 00:00:00 2001 From: Shubhabrata Ghosh Date: Mon, 2 Oct 2023 20:53:25 +0530 Subject: [PATCH 3/8] Removed unnecessary line --- .../src/components/VerticalBarChart/VerticalBarChart.base.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/react-charting/src/components/VerticalBarChart/VerticalBarChart.base.tsx b/packages/react-charting/src/components/VerticalBarChart/VerticalBarChart.base.tsx index 1d2e83df14dc82..7c1318c894d369 100644 --- a/packages/react-charting/src/components/VerticalBarChart/VerticalBarChart.base.tsx +++ b/packages/react-charting/src/components/VerticalBarChart/VerticalBarChart.base.tsx @@ -536,7 +536,6 @@ export class VerticalBarChartBase extends React.Component ; @@ -546,7 +545,7 @@ export class VerticalBarChartBase extends React.Component Date: Mon, 2 Oct 2023 20:55:24 +0530 Subject: [PATCH 4/8] Restored debugging changes --- .../src/components/VerticalBarChart/VerticalBarChart.base.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-charting/src/components/VerticalBarChart/VerticalBarChart.base.tsx b/packages/react-charting/src/components/VerticalBarChart/VerticalBarChart.base.tsx index 7c1318c894d369..cdbf5f44552e36 100644 --- a/packages/react-charting/src/components/VerticalBarChart/VerticalBarChart.base.tsx +++ b/packages/react-charting/src/components/VerticalBarChart/VerticalBarChart.base.tsx @@ -545,7 +545,7 @@ export class VerticalBarChartBase extends React.Component Date: Mon, 2 Oct 2023 21:24:02 +0530 Subject: [PATCH 5/8] Updated scaling logic --- .../components/VerticalBarChart/VerticalBarChart.base.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/react-charting/src/components/VerticalBarChart/VerticalBarChart.base.tsx b/packages/react-charting/src/components/VerticalBarChart/VerticalBarChart.base.tsx index cdbf5f44552e36..faddaa76f586ed 100644 --- a/packages/react-charting/src/components/VerticalBarChart/VerticalBarChart.base.tsx +++ b/packages/react-charting/src/components/VerticalBarChart/VerticalBarChart.base.tsx @@ -539,8 +539,8 @@ export class VerticalBarChartBase extends React.Component ; - } else if (barHeight <= 1) { - adjustedBarHeight = 1; + } else if (barHeight <= Math.ceil(yBarScale(this._yMax) / 100.0)) { + adjustedBarHeight = Math.ceil(yBarScale(this._yMax) / 100.0); } else { adjustedBarHeight = barHeight; } @@ -555,7 +555,7 @@ export class VerticalBarChartBase extends React.Component { this._refCallback(e, point.legend!); }} From 384b2ada5be199bdfe2cbf19270cc5f6263197b9 Mon Sep 17 00:00:00 2001 From: Shubhabrata Ghosh Date: Tue, 3 Oct 2023 16:50:33 +0530 Subject: [PATCH 6/8] yarn change --- ...eact-charting-8bdce3b1-3bbd-4a1d-8000-3cd8b50e1d0c.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@fluentui-react-charting-8bdce3b1-3bbd-4a1d-8000-3cd8b50e1d0c.json diff --git a/change/@fluentui-react-charting-8bdce3b1-3bbd-4a1d-8000-3cd8b50e1d0c.json b/change/@fluentui-react-charting-8bdce3b1-3bbd-4a1d-8000-3cd8b50e1d0c.json new file mode 100644 index 00000000000000..8f798c9c3ef7af --- /dev/null +++ b/change/@fluentui-react-charting-8bdce3b1-3bbd-4a1d-8000-3cd8b50e1d0c.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "Minimum height of non zero positive values set to 1% of Max barHeight", + "packageName": "@fluentui/react-charting", + "email": "shubhabrata08@gmail.com", + "dependentChangeType": "patch" +} From 4a6c3b4847826f93c89e57ba915b580deae15dd7 Mon Sep 17 00:00:00 2001 From: Shubhabrata Ghosh Date: Tue, 3 Oct 2023 23:24:39 +0530 Subject: [PATCH 7/8] Added the feature to Vertical Stacked Charts as well --- .../VerticalBarChart/VerticalBarChart.base.tsx | 11 ++++++++--- .../VerticalStackedBarChart.base.tsx | 14 ++++++++++---- 2 files changed, 18 insertions(+), 7 deletions(-) diff --git a/packages/react-charting/src/components/VerticalBarChart/VerticalBarChart.base.tsx b/packages/react-charting/src/components/VerticalBarChart/VerticalBarChart.base.tsx index faddaa76f586ed..ada727396eecd2 100644 --- a/packages/react-charting/src/components/VerticalBarChart/VerticalBarChart.base.tsx +++ b/packages/react-charting/src/components/VerticalBarChart/VerticalBarChart.base.tsx @@ -601,11 +601,16 @@ export class VerticalBarChartBase extends React.Component { const barHeight: number = Math.max(yBarScale(point.y), 0); - if (barHeight < 1) { + let adjustedBarHeight = 0; + if (barHeight <= 0) { return ; + } else if (barHeight <= Math.ceil(yBarScale(this._yMax) / 100.0)) { + adjustedBarHeight = Math.ceil(yBarScale(this._yMax) / 100.0); + } else { + adjustedBarHeight = barHeight; } const xPoint = xBarScale(point.x); - const yPoint = containerHeight - this.margins.bottom! - yBarScale(point.y); + const yPoint = containerHeight - this.margins.bottom! - adjustedBarHeight; return ( { diff --git a/packages/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.base.tsx b/packages/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.base.tsx index 7dd1a5a5a85e94..8b579ad54d46bb 100644 --- a/packages/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.base.tsx +++ b/packages/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.base.tsx @@ -782,8 +782,8 @@ export class VerticalStackedBarChartBase extends React.Component< }; let barHeight = heightValueScale * point.data; - if (barHeight < barMinimumHeight) { - barHeight = barMinimumHeight; + if (barHeight < Math.max(Math.ceil(this._yMax / 100.0), barMinimumHeight)) { + barHeight = Math.max(Math.ceil(this._yMax / 100.0), barMinimumHeight); } yPoint = yPoint - barHeight - (index ? gapHeight : 0); barTotalValue += point.data; @@ -810,8 +810,14 @@ export class VerticalStackedBarChartBase extends React.Component< /> ); } - if (barHeight < 1) { + let adjustedBarHeight = 0; + // For stacked charts, even zero values should be depicted graphically as the data class exists + if (barHeight < 0) { return ; + } else if (barHeight <= Math.ceil(yBarScale(this._yMax) / 100.0)) { + adjustedBarHeight = Math.ceil(yBarScale(this._yMax) / 100.0); + } else { + adjustedBarHeight = barHeight; } return ( (ref.refElement = e)} {...rectFocusProps} From 3c3b857f4d77cc1b8eaac2956afa2e0689517a61 Mon Sep 17 00:00:00 2001 From: Shubhabrata Ghosh Date: Wed, 4 Oct 2023 16:44:26 +0530 Subject: [PATCH 8/8] Rremoving redundant code --- .../VerticalStackedBarChart.base.tsx | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/packages/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.base.tsx b/packages/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.base.tsx index 8b579ad54d46bb..b13c9fce252376 100644 --- a/packages/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.base.tsx +++ b/packages/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.base.tsx @@ -810,14 +810,8 @@ export class VerticalStackedBarChartBase extends React.Component< /> ); } - let adjustedBarHeight = 0; - // For stacked charts, even zero values should be depicted graphically as the data class exists if (barHeight < 0) { return ; - } else if (barHeight <= Math.ceil(yBarScale(this._yMax) / 100.0)) { - adjustedBarHeight = Math.ceil(yBarScale(this._yMax) / 100.0); - } else { - adjustedBarHeight = barHeight; } return ( (ref.refElement = e)} {...rectFocusProps}