Skip to content

Commit

Permalink
add prop for sorting of string labels
Browse files Browse the repository at this point in the history
  • Loading branch information
Anush2303 committed Dec 30, 2024
1 parent a476f91 commit 28fc8a5
Show file tree
Hide file tree
Showing 3 changed files with 48 additions and 36 deletions.
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
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;
} 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);
}
});
}
});
/**
* 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
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
*/
sortOrder?: string;
}

/**
Expand Down

0 comments on commit 28fc8a5

Please sign in to comment.