diff --git a/change/@fluentui-react-charting-d2171258-9397-47d2-b063-9e1b96df4f2d.json b/change/@fluentui-react-charting-d2171258-9397-47d2-b063-9e1b96df4f2d.json new file mode 100644 index 00000000000000..00e6d7bf7d5211 --- /dev/null +++ b/change/@fluentui-react-charting-d2171258-9397-47d2-b063-9e1b96df4f2d.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "HeatMap chart bug fixes", + "packageName": "@fluentui/react-charting", + "email": "74965306+Anush2303@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/packages/charts/react-charting/etc/react-charting.api.md b/packages/charts/react-charting/etc/react-charting.api.md index aab87b0a2ee122..9a02db813cebf4 100644 --- a/packages/charts/react-charting/etc/react-charting.api.md +++ b/packages/charts/react-charting/etc/react-charting.api.md @@ -722,6 +722,7 @@ export interface IHeatMapChartProps extends Pick; rangeValuesForColorScale: string[]; showYAxisLables?: boolean; + sortOrder?: 'none' | 'alphabetical'; styles?: IStyleFunctionOrObject; xAxisDateFormatString?: string; xAxisNumberFormatString?: string; diff --git a/packages/charts/react-charting/src/components/DeclarativeChart/DeclarativeChart.tsx b/packages/charts/react-charting/src/components/DeclarativeChart/DeclarativeChart.tsx index b5ca557356d86e..4ddf1a198b19d6 100644 --- a/packages/charts/react-charting/src/components/DeclarativeChart/DeclarativeChart.tsx +++ b/packages/charts/react-charting/src/components/DeclarativeChart/DeclarativeChart.tsx @@ -247,7 +247,6 @@ export const DeclarativeChart: React.FunctionComponent = return ( diff --git a/packages/charts/react-charting/src/components/DeclarativeChart/PlotlySchemaAdapter.ts b/packages/charts/react-charting/src/components/DeclarativeChart/PlotlySchemaAdapter.ts index da6c97e12fbdb9..e5b3966e86d2f5 100644 --- a/packages/charts/react-charting/src/components/DeclarativeChart/PlotlySchemaAdapter.ts +++ b/packages/charts/react-charting/src/components/DeclarativeChart/PlotlySchemaAdapter.ts @@ -399,6 +399,7 @@ export const transformPlotlyJsonToHeatmapProps = (jsonObj: any): IHeatMapChartPr x: layout.xaxis?.type === 'date' ? new Date(xVal) : xVal, y: layout.yaxis?.type === 'date' ? new Date(yVal) : yVal, value: zVal, + rectText: zVal, }); zMin = Math.min(zMin, zVal); @@ -423,6 +424,7 @@ export const transformPlotlyJsonToHeatmapProps = (jsonObj: any): IHeatMapChartPr rangeValuesForColorScale, hideLegend: true, showYAxisLables: true, + sortOrder: 'none', }; }; diff --git a/packages/charts/react-charting/src/components/HeatMapChart/HeatMapChart.base.tsx b/packages/charts/react-charting/src/components/HeatMapChart/HeatMapChart.base.tsx index d9cb9969c73c70..cbd89e2e80b38f 100644 --- a/packages/charts/react-charting/src/components/HeatMapChart/HeatMapChart.base.tsx +++ b/packages/charts/react-charting/src/components/HeatMapChart/HeatMapChart.base.tsx @@ -604,7 +604,11 @@ export class HeatMapChartBase extends React.Component { if (this._xAxisType === XAxisTypes.StringAxis) { - return (a.x as string).toLowerCase() > (b.x as string).toLowerCase() ? 1 : -1; + return this.props.sortOrder === 'none' + ? 0 + : (a.x as string).toLowerCase() > (b.x as string).toLowerCase() + ? 1 + : -1; } else if (this._xAxisType === XAxisTypes.DateAxis) { return (a.x as Date).getTime() - (b.x as Date).getTime(); } else if (this._xAxisType === XAxisTypes.NumericAxis) { @@ -687,7 +691,7 @@ export class HeatMapChartBase extends React.Component b.toLowerCase() ? 1 : -1; + return this.props.sortOrder === 'none' ? 0 : a.toLowerCase() > b.toLowerCase() ? 1 : -1; } }); xAxisPoints = unFormattedXAxisDataPoints.map((xPoint: string) => { @@ -714,7 +718,7 @@ export class HeatMapChartBase extends React.Component b.toLowerCase() ? 1 : -1; + return this.props.sortOrder === 'none' ? 0 : a.toLowerCase() > b.toLowerCase() ? 1 : -1; } }); yAxisPoints = unFormattedYAxisDataPoints.map((yPoint: string) => { diff --git a/packages/charts/react-charting/src/components/HeatMapChart/HeatMapChart.types.ts b/packages/charts/react-charting/src/components/HeatMapChart/HeatMapChart.types.ts index 6593212253b7cd..2dcc3dbee94fd5 100644 --- a/packages/charts/react-charting/src/components/HeatMapChart/HeatMapChart.types.ts +++ b/packages/charts/react-charting/src/components/HeatMapChart/HeatMapChart.types.ts @@ -113,6 +113,11 @@ export interface IHeatMapChartProps extends Pick