Merge pull request #2149 from topcoder-platform/PM-5879

PM-5879 Fix rating charts label

Author: himaniraghav3

src/apps/profiles/src/member-profile/about-me/MemberRatingCard/MemberRatingInfoModal/MemberRatingInfoModal.spec.tsx

@@ -212,4 +212,23 @@ describe('MemberRatingInfoModal', () => {
         expect(parseFloat(marker.style.left))
             .toBeCloseTo((3.5 / 6) * 100)
     })
+
+    it('hides the 2200+ axis label when the distribution has no elite buckets', () => {
+        render(
+            <MemberRatingInfoModal
+                audienceLabel='developers'
+                onClose={jest.fn()}
+                percentile={15}
+                profile={baseProfile}
+                rating={1646}
+                ratingDistribution={ratingDistribution}
+            />,
+        )
+
+        expect(screen.getByText('1500'))
+            .toBeInTheDocument()
+        expect(screen.queryByText('2200+'))
+            .not
+            .toBeInTheDocument()
+    })
 })

src/apps/profiles/src/member-profile/about-me/MemberRatingCard/MemberRatingInfoModal/MemberRatingInfoModal.tsx

@@ -292,6 +292,29 @@ const getAxisLabelPosition = (
     return 100
 }
 
+/**
+ * Returns axis labels that fall within the visible distribution ranges.
+ *
+ * Hides labels such as `2200+` when the trimmed histogram has no elite buckets,
+ * which otherwise stack on top of the final label (e.g. `1500`).
+ *
+ * @param {RatingDistributionRange[]} ranges - Visible rating distribution ranges.
+ * @returns {Array<{ label: string, value: number }>} Axis labels to render.
+ */
+const getVisibleAxisLabels = (
+    ranges: RatingDistributionRange[],
+): Array<{ label: string, value: number }> => {
+    if (ranges.length === 0) {
+        return chartAxisLabels
+    }
+
+    const chartEnd = ranges[ranges.length - 1].end
+
+    return chartAxisLabels.filter((axisLabel: { label: string, value: number }) => (
+        axisLabel.value <= chartEnd
+    ))
+}
+
 /**
  * Calculates a bar height for a histogram count.
  *
@@ -359,6 +382,9 @@ const MemberRatingInfoModal: FC<MemberRatingInfoModalProps> = (props: MemberRati
     const markerPosition: number = props.rating !== undefined
         ? getMarkerPosition(props.rating, distributionRanges)
         : 0
+    const visibleAxisLabels: Array<{ label: string, value: number }> = useMemo(() => (
+        getVisibleAxisLabels(distributionRanges)
+    ), [distributionRanges])
     const shouldStackMarkerRating: boolean = props.rating !== undefined && (
         markerPosition >= stackedMarkerPositionThreshold
         || props.rating >= stackedMarkerRatingThreshold
@@ -476,7 +502,7 @@ const MemberRatingInfoModal: FC<MemberRatingInfoModalProps> = (props: MemberRati
                             )}
 
                             <div className={styles.axisLabels}>
-                                {chartAxisLabels.map((axisLabel: { label: string, value: number }) => (
+                                {visibleAxisLabels.map((axisLabel: { label: string, value: number }) => (
                                     <span
                                         key={axisLabel.label}
                                         style={{