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

Merged
merged 8 commits into from
Dec 26, 2024
Merged

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 @@
{
AtishayMsft marked this conversation as resolved.
Show resolved Hide resolved
"type": "patch",
"comment": "Full Yaxis labels in HeatMap chart",
"packageName": "@fluentui/react-charting",
"email": "74965306+Anush2303@users.noreply.github.com",
"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;
AtishayMsft marked this conversation as resolved.
Show resolved Hide resolved
}

/**
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