Skip to content

Commit

Permalink
resolve comments
Browse files Browse the repository at this point in the history
  • Loading branch information
@Anush2303
Anush2303 committed Dec 31, 2024
1 parent 874d9ec commit a14c18a
Show file tree
Hide file tree
Showing 4 changed files with 123 additions and 57 deletions.
9 changes: 1 addition & 8 deletions packages/charts/react-charting/src/components/DeclarativeChart/DeclarativeChart.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -244,14 +244,7 @@ export const DeclarativeChart: React.FunctionComponent<DeclarativeChartProps> =
/>
);
case 'heatmap':
return (
<HeatMapChart
{...transformPlotlyJsonToHeatmapProps(plotlySchema)}
legendProps={{ onChange: onActiveLegendsChange, canSelectMultipleLegends: false, selectedLegends: [] }}
componentRef={chartRef}
calloutProps={{ layerProps: { eventBubblingEnabled: true } }}
/>
);
return <HeatMapChart {...transformPlotlyJsonToHeatmapProps(plotlySchema)} />;
case 'sankey':
return (
<SankeyChart
Expand Down
75 changes: 36 additions & 39 deletions packages/charts/react-charting/src/components/HeatMapChart/HeatMapChart.base.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -601,45 +601,42 @@ export class HeatMapChartBase extends React.Component<IHeatMapChartProps, IHeatM
* rectangles and then format the x and y datapoints respectively
*/
Object.keys(yPoints).forEach((item: 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._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);
}
});
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);
}
});
});
/**
* if y-axis data points are of type date or number or if we have string formatter,
Expand Down
4 changes: 2 additions & 2 deletions packages/charts/react-charting/src/components/HeatMapChart/HeatMapChart.types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -115,8 +115,8 @@ export interface IHeatMapChartProps extends Pick<ICartesianChartProps, Exclude<k
showYAxisLables?: boolean;

/**
* The prop used to decide order of string axis labels
*/
* @default alphabetical
* The prop used to decide order of string axis labels */
sortOrder?: 'none' | 'alphabetical';
}

Expand Down
92 changes: 84 additions & 8 deletions ...ts/react-charting/src/components/HeatMapChart/__snapshots__/HeatMapChartRTL.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1410,56 +1410,132 @@ exports[`HeatMapChart snapshot tests should render axis labels correctly When cu
</g>
</g>
<g
aria-label="xPoint p3, yPoint p2. , No data available."
aria-label="xPoint p3, yPoint p2. Nasty, 25."
data-is-focusable="true"
fill-opacity="1"
role="img"
tabindex="0"
transform="translate(45.8415841584158, 22.34653465346534)"
>
<rect
fill="#ffffff"
fill="rgb(166, 207, 226)"
height="114.98019801980197"
width="286.23762376237624"
/>
<text
class=
{
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
fill: #ffffff;
font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
font-size: 14px;
font-weight: 600;
pointer-events: none;
}
dominant-baseline="middle"
text-anchor="middle"
transform="translate(143.11881188118812, 57.49009900990099)"
>
25
</text>
</g>
<g
aria-label="xPoint p4, yPoint p2. , No data available."
aria-label="xPoint p4, yPoint p2. Excellent, 100."
data-is-focusable="true"
fill-opacity="1"
role="img"
tabindex="-1"
transform="translate(337.9207920792079, 22.34653465346534)"
>
<rect
fill="#ffffff"
fill="rgb(144, 180, 215)"
height="114.98019801980197"
width="286.23762376237624"
/>
<text
class=
{
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
fill: #ffffff;
font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
font-size: 14px;
font-weight: 600;
pointer-events: none;
}
dominant-baseline="middle"
text-anchor="middle"
transform="translate(143.11881188118812, 57.49009900990099)"
>
100
</text>
</g>
<g
aria-label="xPoint p3, yPoint p1. , No data available."
aria-label="xPoint p3, yPoint p1. Excellent, 75."
data-is-focusable="true"
fill-opacity="1"
role="img"
tabindex="-1"
transform="translate(45.8415841584158, 139.67326732673268)"
>
<rect
fill="#ffffff"
fill="rgb(151, 189, 219)"
height="114.98019801980197"
width="286.23762376237624"
/>
<text
class=
{
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
fill: #ffffff;
font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
font-size: 14px;
font-weight: 600;
pointer-events: none;
}
dominant-baseline="middle"
text-anchor="middle"
transform="translate(143.11881188118812, 57.49009900990099)"
>
75
</text>
</g>
<g
aria-label="xPoint p4, yPoint p1. , No data available."
aria-label="xPoint p4, yPoint p1. Nasty, 50."
data-is-focusable="true"
fill-opacity="1"
role="img"
tabindex="-1"
transform="translate(337.9207920792079, 139.67326732673268)"
>
<rect
fill="#ffffff"
fill="rgb(159, 198, 222)"
height="114.98019801980197"
width="286.23762376237624"
/>
<text
class=
{
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
fill: #ffffff;
font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
font-size: 14px;
font-weight: 600;
pointer-events: none;
}
dominant-baseline="middle"
text-anchor="middle"
transform="translate(143.11881188118812, 57.49009900990099)"
>
50
</text>
</g>
</svg>
</div>
Expand Down

0 comments on commit a14c18a

Please sign in to comment.