Skip to content
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

Full y axis labels in Heatmap chart #33509

Open
wants to merge 8 commits into
base: master
Choose a base branch
from
+110 −23
Open

Full y axis labels in Heatmap chart #33509

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
6a7bc5a
Full Y Axis labels in Heatmap chart
Anush2303 Dec 23, 2024
e2e1983
Add change file
Anush2303 Dec 23, 2024
70b1890
Merge branch 'master' into usr/agupta/heatmap/fullYAxislabels
Anush2303 Dec 23, 2024
414037c
update snapshots
Anush2303 Dec 23, 2024
8fd80a7
update react-charting.api.md
Anush2303 Dec 23, 2024
f7bf794
resolve comments
Anush2303 Dec 23, 2024
7b10c8c
resolve comments
Anush2303 Dec 23, 2024
51ce06c
revert change
Anush2303 Dec 23, 2024
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-4a2b4230-b5e3-4cea-9777-4e1670b33156.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
Copy link
Collaborator

@fabricteam fabricteam Dec 23, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🕵🏾‍♀️ visual regressions to review in the fluentuiv8 Visual Regression Report

Callout 6 screenshots
Image Name Diff(in Pixels) Image Type
Callout.Left center.chromium.png 2616 Changed
Callout.Top center.chromium.png 2178 Changed
Callout.Top left edge.chromium.png 2307 Changed
Callout.No callout width specified.chromium.png 2319 Changed
Callout.Bottom auto edge.chromium.png 2309 Changed
Callout.No beak.chromium.png 2306 Changed
Keytip 1 screenshots
Image Name Diff(in Pixels) Image Type
Keytip.Offset.chromium.png 121 Changed
react-charting-HeatMapChart 2 screenshots
Image Name Diff(in Pixels) Image Type
react-charting-HeatMapChart.Basic.chromium.png 307 Changed
react-charting-HeatMapChart.Basic Dark Mode.chromium.png 320 Changed
react-charting-LineChart 2 screenshots
Image Name Diff(in Pixels) Image Type
react-charting-LineChart.Events.chromium.png 2 Changed
react-charting-LineChart.Gaps.chromium.png 1 Changed
react-charting-VerticalBarChart 1 screenshots
Image Name Diff(in Pixels) Image Type
react-charting-VerticalBarChart.Basic - Secondary Y Axis.chromium.png 4 Changed

"type": "patch",
"comment": "Full Yaxis labels in HeatMap chart",
"packageName": "@fluentui/react-charting",
"email": "[email protected]",
"dependentChangeType": "patch"
}
41 changes: 29 additions & 12 deletions packages/charts/react-charting/src/components/CommonComponents/CartesianChart.base.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import {
IModifiedCartesianChartProps,
IYValueHover,
IHorizontalBarChartWithAxisDataPoint,
IHeatMapChartDataPoint,
} from '../../index';
import { convertToLocaleString } from '../../utilities/locale-util';
import {
Expand Down Expand Up @@ -142,14 +143,22 @@ export class CartesianChartBase
public componentDidMount(): void {
this._fitParentContainer();
if (
this.props.chartType === ChartTypes.HorizontalBarChartWithAxis &&
[ChartTypes.HorizontalBarChartWithAxis, ChartTypes.HeatMapChart].includes(this.props.chartType) &&
Anush2303 marked this conversation as resolved.
Show resolved Hide resolved
this.props.showYAxisLables &&
this.yAxisElement
) {
const maxYAxisLabelLength = calculateLongestLabelWidth(
this.props.points.map((point: IHorizontalBarChartWithAxisDataPoint) => point.y),
`.${this._classNames.yAxis} text`,
);
let maxYAxisLabelLength = 0;
if (this.props.chartType === ChartTypes.HeatMapChart) {
maxYAxisLabelLength = calculateLongestLabelWidth(
this.props.points[0].data.map((point: IHeatMapChartDataPoint) => point.y),
`.${this._classNames.yAxis} text`,
);
} else {
maxYAxisLabelLength = calculateLongestLabelWidth(
this.props.points.map((point: IHorizontalBarChartWithAxisDataPoint) => point.y),
`.${this._classNames.yAxis} text`,
);
}
Anush2303 marked this conversation as resolved.
Show resolved Hide resolved
if (this.state.startFromX !== maxYAxisLabelLength) {
this.setState({
startFromX: maxYAxisLabelLength,
Expand Down Expand Up @@ -195,14 +204,22 @@ export class CartesianChartBase
}
}
if (
this.props.chartType === ChartTypes.HorizontalBarChartWithAxis &&
[ChartTypes.HorizontalBarChartWithAxis, ChartTypes.HeatMapChart].includes(this.props.chartType) &&
this.props.showYAxisLables &&
this.yAxisElement
) {
const maxYAxisLabelLength = calculateLongestLabelWidth(
this.props.points.map((point: IHorizontalBarChartWithAxisDataPoint) => point.y),
`.${this._classNames.yAxis} text`,
);
let maxYAxisLabelLength = 0;
if (this.props.chartType === ChartTypes.HeatMapChart) {
maxYAxisLabelLength = calculateLongestLabelWidth(
this.props.points[0].data.map((point: IHeatMapChartDataPoint) => point.y),
`.${this._classNames.yAxis} text`,
);
} else {
maxYAxisLabelLength = calculateLongestLabelWidth(
this.props.points.map((point: IHorizontalBarChartWithAxisDataPoint) => point.y),
`.${this._classNames.yAxis} text`,
);
}
if (this.state.startFromX !== maxYAxisLabelLength) {
this.setState({
startFromX: maxYAxisLabelLength,
Expand Down Expand Up @@ -238,7 +255,7 @@ export class CartesianChartBase
}

const margin = { ...this.margins };
if (this.props.chartType === ChartTypes.HorizontalBarChartWithAxis) {
if ([ChartTypes.HorizontalBarChartWithAxis, ChartTypes.HeatMapChart].includes(this.props.chartType)) {
if (!this._isRtl) {
margin.left! += this.state.startFromX;
} else {
Expand Down Expand Up @@ -415,7 +432,7 @@ export class CartesianChartBase
truncating the rest of the text and showing elipsis
or showing the whole string,
* */
this.props.chartType === ChartTypes.HorizontalBarChartWithAxis &&
[ChartTypes.HorizontalBarChartWithAxis, ChartTypes.HeatMapChart].includes(this.props.chartType) &&
yScale &&
createYAxisLabels(
this.yAxisElement,
Expand Down
1 change: 1 addition & 0 deletions packages/charts/react-charting/src/components/DeclarativeChart/PlotlySchemaAdapter.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -391,6 +391,7 @@ export const transformPlotlyJsonToHeatmapProps = (jsonObj: any): IHeatMapChartPr
domainValuesForColorScale,
rangeValuesForColorScale,
hideLegend: true,
showYAxisLables: true,
};
};

Expand Down
8 changes: 7 additions & 1 deletion packages/charts/react-charting/src/components/HeatMapChart/HeatMapChart.base.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,6 +114,7 @@ export class HeatMapChartBase extends React.Component<IHeatMapChartProps, IHeatM
private _yAxisType: YAxisType;
private _calloutAnchorPoint: FlattenData | null;
private _emptyChartId: string;
private margins: IMargins;
private _cartesianChartRef: React.RefObject<IChart>;

public constructor(props: IHeatMapChartProps) {
Expand Down Expand Up @@ -210,6 +211,7 @@ export class HeatMapChartBase extends React.Component<IHeatMapChartProps, IHeatM
createStringYAxis={createStringYAxis}
getDomainNRangeValues={this._getDomainNRangeValues}
getMinMaxOfYAxis={this._getMinMaxOfYAxis}
getmargins={this._getMargins}
xAxisTickCount={this._stringXAxisDataPoints.length}
xAxistickSize={0}
xAxisPadding={0.02}
Expand Down Expand Up @@ -261,7 +263,7 @@ export class HeatMapChartBase extends React.Component<IHeatMapChartProps, IHeatM
if (xAxisType === XAxisTypes.NumericAxis || xAxisType === XAxisTypes.DateAxis) {
domainNRangeValue = { dStartValue: 0, dEndValue: 0, rStartValue: 0, rEndValue: 0 };
} else {
domainNRangeValue = domainRangeOfXStringAxis(margins, width, isRTL);
domainNRangeValue = domainRangeOfXStringAxis(this.margins, width, isRTL);
}
return domainNRangeValue;
};
Expand All @@ -279,6 +281,10 @@ export class HeatMapChartBase extends React.Component<IHeatMapChartProps, IHeatM
return { x, y };
};

private _getMargins = (margins: IMargins) => {
this.margins = margins;
};

private _getOpacity = (legendTitle: string): string => {
const opacity = this._legendHighlighted(legendTitle) || this._noLegendHighlighted() ? '1' : '0.1';
return opacity;
Expand Down
5 changes: 5 additions & 0 deletions packages/charts/react-charting/src/components/HeatMapChart/HeatMapChart.types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,6 +108,11 @@ export interface IHeatMapChartProps extends Pick<ICartesianChartProps, Exclude<k
* The prop used to define the culture to localized the numbers
*/
culture?: string;

/**
*@default false
*Used for showing complete y axis lables */
showYAxisLables?: boolean;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

showYAxisLables

his prop is already part of cartesian. Should not be needed here.

Copy link
Contributor Author

@Anush2303 Anush2303 Dec 23, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Build is failing without this. Because, in plotlyadapter file, we don't have reference to ICartesianchartProps. This prop is defined in HBCWithAxis also, so I think it is needed.

}

/**
Expand Down
60 changes: 56 additions & 4 deletions ...ts/react-charting/src/components/HeatMapChart/__snapshots__/HeatMapChartRTL.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -760,9 +760,22 @@ exports[`HeatMapChart snapshot tests should render HeatMapChart correctly with n
<text
dy="0.32em"
fill="currentColor"
text-align="start"
x="-10"
>
10
<tspan
data-="10"
dy="0.32em"
id="BaseSpan"
x="-10"
/>
<tspan
dx="1em"
id="LessLength"
x="-10"
>
10
</tspan>
</text>
</g>
<g
Expand All @@ -777,9 +790,22 @@ exports[`HeatMapChart snapshot tests should render HeatMapChart correctly with n
<text
dy="0.32em"
fill="currentColor"
text-align="start"
x="-10"
>
20
<tspan
data-="20"
dy="0.32em"
id="BaseSpan"
x="-10"
/>
<tspan
dx="1em"
id="LessLength"
x="-10"
>
20
</tspan>
</text>
</g>
</g>
Expand Down Expand Up @@ -1334,9 +1360,22 @@ exports[`HeatMapChart snapshot tests should render axis labels correctly When cu
<text
dy="0.32em"
fill="currentColor"
text-align="start"
x="-10"
>
yPoint p1
<tspan
data-="yPoint p1"
dy="0.32em"
id="BaseSpan"
x="-10"
/>
<tspan
dx="1em"
id="LessLength"
x="-10"
>
yPoint p1
</tspan>
</text>
</g>
<g
Expand All @@ -1351,9 +1390,22 @@ exports[`HeatMapChart snapshot tests should render axis labels correctly When cu
<text
dy="0.32em"
fill="currentColor"
text-align="start"
x="-10"
>
yPoint p2
<tspan
data-="yPoint p2"
dy="0.32em"
id="BaseSpan"
x="-10"
/>
<tspan
dx="1em"
id="LessLength"
x="-10"
>
yPoint p2
</tspan>
</text>
</g>
</g>
Expand Down
Loading