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

HeatMap chart bug fixes #33525

Merged
merged 10 commits into from
Dec 31, 2024
Merged

HeatMap chart bug fixes #33525

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
12e2118
heatmap bug fixes
Anush2303 Dec 30, 2024
7ea9ee0
change in condition
Anush2303 Dec 30, 2024
a476f91
add change file
Anush2303 Dec 30, 2024
28fc8a5
add prop for sorting of string labels
Anush2303 Dec 30, 2024
e6d500c
update react-charting.api.md
Anush2303 Dec 30, 2024
3f89e3b
resolve comments
Anush2303 Dec 31, 2024
874d9ec
update snapshots
Anush2303 Dec 31, 2024
a14c18a
resolve comments
Anush2303 Dec 31, 2024
ea12cc5
revert changes
Anush2303 Dec 31, 2024
ac4ee65
Merge branch 'master' into usr/agupta/heatmap/bugFix
Anush2303 Dec 31, 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
1 change: 1 addition & 0 deletions packages/charts/react-charting/etc/react-charting.api.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -722,6 +722,7 @@ export interface IHeatMapChartProps extends Pick<ICartesianChartProps, Exclude<k
legendProps?: Partial<ILegendsProps>;
rangeValuesForColorScale: string[];
showYAxisLables?: boolean;
sortOrder?: string;
styles?: IStyleFunctionOrObject<IHeatMapChartStyleProps, IHeatMapChartStyles>;
xAxisDateFormatString?: string;
xAxisNumberFormatString?: string;
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 @@ -424,6 +424,7 @@ export const transformPlotlyJsonToHeatmapProps = (jsonObj: any): IHeatMapChartPr
rangeValuesForColorScale,
hideLegend: true,
showYAxisLables: true,
sortOrder: 'None',
};
};

Expand Down
78 changes: 42 additions & 36 deletions 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 @@ -601,42 +601,48 @@ export class HeatMapChartBase extends React.Component<IHeatMapChartProps, IHeatM
* rectangles and then format the x and y datapoints respectively
*/
Object.keys(yPoints).forEach((item: string) => {
if (this._xAxisType === XAxisTypes.StringAxis) {
yPoints[item].forEach((datapoint: IHeatMapChartDataPoint) => {
if (this._xAxisType === XAxisTypes.StringAxis) {
datapoint.x = this._getFormattedLabelForXAxisDataPoint(datapoint.x as string);
}
});
}
if (this._xAxisType !== XAxisTypes.StringAxis) {
yPoints[item]
.sort((a: IHeatMapChartDataPoint, b: IHeatMapChartDataPoint) => {
if (this._xAxisType === XAxisTypes.DateAxis) {
return (a.x as Date).getTime() - (b.x as Date).getTime();
} else if (this._xAxisType === XAxisTypes.NumericAxis) {
return +(a.x as string) > +(b.x as string) ? 1 : -1;
} else {
return a.x > b.x ? 1 : -1;
}
})
.forEach((datapoint: IHeatMapChartDataPoint) => {
if (this._xAxisType === XAxisTypes.DateAxis) {
datapoint.x = this._getStringFormattedDate(datapoint.x as string, xAxisDateFormatString);
}
if (this._xAxisType === XAxisTypes.NumericAxis) {
datapoint.x = this._getStringFormattedNumber(datapoint.x as string, xAxisNumberFormatString);
}
if (this._yAxisType === YAxisType.DateAxis) {
datapoint.y = this._getStringFormattedDate(datapoint.y as string, yAxisDateFormatString);
}
if (this._yAxisType === YAxisType.NumericAxis) {
datapoint.y = this._getStringFormattedNumber(datapoint.y as string, yAxisNumberFormatString);
}
if (this._yAxisType === YAxisType.StringAxis) {
datapoint.y = this._getFormattedLabelForYAxisDataPoint(datapoint.y as string);
this.props.sortOrder !== 'None'
? yPoints[item]
.sort((a: IHeatMapChartDataPoint, b: IHeatMapChartDataPoint) => {
if (this._xAxisType === XAxisTypes.StringAxis) {
return this.props.sortOrder === 'None'
? 0
: (a.x as string).toLowerCase() > (b.x as string).toLowerCase()
? 1
: -1;
Anush2303 marked this conversation as resolved.
Show resolved Hide resolved
} else if (this._xAxisType === XAxisTypes.DateAxis) {
return (a.x as Date).getTime() - (b.x as Date).getTime();
} else if (this._xAxisType === XAxisTypes.NumericAxis) {
return +(a.x as string) > +(b.x as string) ? 1 : -1;
} else {
return a.x > b.x ? 1 : -1;
}
})
.forEach((datapoint: IHeatMapChartDataPoint) => {
if (this._xAxisType === XAxisTypes.DateAxis) {
datapoint.x = this._getStringFormattedDate(datapoint.x as string, xAxisDateFormatString);
}
if (this._xAxisType === XAxisTypes.NumericAxis) {
datapoint.x = this._getStringFormattedNumber(datapoint.x as string, xAxisNumberFormatString);
}
if (this._xAxisType === XAxisTypes.StringAxis) {
datapoint.x = this._getFormattedLabelForXAxisDataPoint(datapoint.x as string);
}
if (this._yAxisType === YAxisType.DateAxis) {
datapoint.y = this._getStringFormattedDate(datapoint.y as string, yAxisDateFormatString);
}
if (this._yAxisType === YAxisType.NumericAxis) {
datapoint.y = this._getStringFormattedNumber(datapoint.y as string, yAxisNumberFormatString);
}
if (this._yAxisType === YAxisType.StringAxis) {
datapoint.y = this._getFormattedLabelForYAxisDataPoint(datapoint.y as string);
}
})
: yPoints[item].forEach((datapoint: IHeatMapChartDataPoint) => {
if (this._xAxisType === XAxisTypes.StringAxis) {
datapoint.x = this._getFormattedLabelForXAxisDataPoint(datapoint.x as string);
}
Anush2303 marked this conversation as resolved.
Show resolved Hide resolved
});
}
});
/**
* if y-axis data points are of type date or number or if we have string formatter,
Expand Down Expand Up @@ -691,7 +697,7 @@ export class HeatMapChartBase extends React.Component<IHeatMapChartProps, IHeatM
if (this._xAxisType === XAxisTypes.DateAxis || this._xAxisType === XAxisTypes.NumericAxis) {
return +a - +b;
} else {
return 0;
return this.props.sortOrder === 'None' ? 0 : a.toLowerCase() > b.toLowerCase() ? 1 : -1;
}
});
xAxisPoints = unFormattedXAxisDataPoints.map((xPoint: string) => {
Expand All @@ -718,7 +724,7 @@ export class HeatMapChartBase extends React.Component<IHeatMapChartProps, IHeatM
if (this._yAxisType === YAxisType.DateAxis || this._yAxisType === YAxisType.NumericAxis) {
return +a - +b;
} else {
return 0;
return this.props.sortOrder === 'None' ? 0 : a.toLowerCase() > b.toLowerCase() ? 1 : -1;
}
});
yAxisPoints = unFormattedYAxisDataPoints.map((yPoint: string) => {
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 @@ -113,6 +113,11 @@ export interface IHeatMapChartProps extends Pick<ICartesianChartProps, Exclude<k
*@default false
*Used for showing complete y axis lables */
showYAxisLables?: boolean;

/**
* The prop used to decide order of string axis labels
Anush2303 marked this conversation as resolved.
Show resolved Hide resolved
*/
sortOrder?: string;
Anush2303 marked this conversation as resolved.
Show resolved Hide resolved
}

/**
Expand Down
Loading