Skip to content

Minimum height feature for bar chart #29359

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
AtishayMsft merged 15 commits into from
Oct 4, 2023
Merged

Minimum height feature for bar chart #29359

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
83c6e64
Sets scaled height to 1 if value is relatively very small
Shubhabrata08 Oct 2, 2023
e767474
Minor code cleanup
Shubhabrata08 Oct 2, 2023
0fb963a
Merge branch 'master' of https://github.com/microsoft/fluentui into m…
Shubhabrata08 Oct 2, 2023
60703df
Removed unnecessary line
Shubhabrata08 Oct 2, 2023
0bdaa2c
Restored debugging changes
Shubhabrata08 Oct 2, 2023
fb2803b
Updated scaling logic
Shubhabrata08 Oct 2, 2023
e67d71b
Merge branch 'master' of https://github.com/microsoft/fluentui into m…
Shubhabrata08 Oct 3, 2023
384b2ad
yarn change
Shubhabrata08 Oct 3, 2023
4a6c3b4
Added the feature to Vertical Stacked Charts as well
Shubhabrata08 Oct 3, 2023
d891733
Merge branch 'master' of https://github.com/microsoft/fluentui into m…
Shubhabrata08 Oct 4, 2023
385197e
Merge branch 'master' into minimum-height-feature-bar-chart
Shubhabrata08 Oct 4, 2023
cfa9fa4
Merge branch 'master' of https://github.com/microsoft/fluentui into m…
Shubhabrata08 Oct 4, 2023
3c3b857
Rremoving redundant code
Shubhabrata08 Oct 4, 2023
6124318
Merge branch 'minimum-height-feature-bar-chart' of https://github.com…
Shubhabrata08 Oct 4, 2023
40e3863
Merge branch 'master' of https://github.com/microsoft/fluentui into m…
Shubhabrata08 Oct 4, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions change/@fluentui-react-charting-8bdce3b1-3bbd-4a1d-8000-3cd8b50e1d0c.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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": "[email protected]",
"dependentChangeType": "patch"
}
22 changes: 16 additions & 6 deletions packages/react-charting/src/components/VerticalBarChart/VerticalBarChart.base.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -536,11 +536,16 @@ export class VerticalBarChartBase extends React.Component<IVerticalBarChartProps
shouldHighlight: shouldHighlight,
});
const barHeight: number = Math.max(yBarScale(point.y), 0);
if (barHeight < 1) {
let adjustedBarHeight = 0;
if (barHeight <= 0) {
return <React.Fragment key={point.x}> </React.Fragment>;
} 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 as number);
const yPoint = containerHeight - this.margins.bottom! - yBarScale(point.y);
const yPoint = containerHeight - this.margins.bottom! - adjustedBarHeight;
return (
<g key={point.x}>
<rect
Expand All @@ -550,7 +555,7 @@ export class VerticalBarChartBase extends React.Component<IVerticalBarChartProps
y={yPoint}
width={this._barWidth}
data-is-focusable={!this.props.hideTooltip}
height={barHeight}
height={adjustedBarHeight}
ref={(e: SVGRectElement) => {
this._refCallback(e, point.legend!);
}}
Expand Down Expand Up @@ -596,19 +601,24 @@ export class VerticalBarChartBase extends React.Component<IVerticalBarChartProps
const colorScale = this._createColors();
const bars = this._points.map((point: IVerticalBarChartDataPoint, index: number) => {
const barHeight: number = Math.max(yBarScale(point.y), 0);
if (barHeight < 1) {
let adjustedBarHeight = 0;
if (barHeight <= 0) {
return <React.Fragment key={point.x}> </React.Fragment>;
} 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 (
<g key={point.x} transform={`translate(${0.5 * (xBarScale.bandwidth() - this._barWidth)}, 0)`}>
<rect
id={getId('_VBC_bar_')}
x={xPoint}
y={yPoint}
width={this._barWidth}
height={barHeight}
height={adjustedBarHeight}
aria-label={this._getAriaLabel(point)}
role="img"
ref={(e: SVGRectElement) => {
Expand Down
6 changes: 3 additions & 3 deletions ...es/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.base.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -810,7 +810,7 @@ export class VerticalStackedBarChartBase extends React.Component<
/>
);
}
if (barHeight < 1) {
if (barHeight < 0) {
return <React.Fragment key={index + indexNumber}> </React.Fragment>;
}
return (
Expand Down