Fix drilldown prevalence by month sorting and trellis chart sorting in data characterization (#3024)

* sort data for prevalence by month chart

* numerically sort trellis charts

* use sortedData in drilldown prevalence by month chart

Author: maggie-li-yd

plugins/ui/apps/portal/src/components/Charts/Common/Drilldown/DrilldownPrevalenceByMonthChart/DrilldownPrevalenceByMonthChart.tsx

@@ -28,16 +28,21 @@ const DrilldownPrevalenceByMonthChart: FC<DrilldownPrevalenceByMonthChartProps>
     );
   }
 
+  // Sort data by XCALENDARMONTH
+  const sortedData = [...data].sort((a: any, b: any) => {
+    return Number(a["XCALENDARMONTH"]) - Number(b["XCALENDARMONTH"]);
+  });
+
   // Parse and format line chart data
   // Parse XCALENDARMONTH from e.g 200910 -> 10/2009
-  const lineChartXAxisData = data.map(
+  const lineChartXAxisData = sortedData.map(
     (obj: any) => obj["XCALENDARMONTH"].toString().slice(-2) + "/" + obj["XCALENDARMONTH"].toString().slice(0, 4)
   );
 
   const series = [
     {
       type: "line",
-      data: data.map((obj: any) => Number(obj["YPREVALENCE1000PP"]).toFixed()),
+      data: sortedData.map((obj: any) => Number(obj["YPREVALENCE1000PP"]).toFixed()),
     },
   ];
 

plugins/ui/apps/portal/src/components/Charts/Common/Drilldown/DrilldownTrellisChart/DrilldownTrellisChart.tsx

@@ -56,8 +56,9 @@ const DrilldownTrellisChart: FC<DrilldownTrellisChartProps> = ({
   const TITLE_OFFSET = 6 / numRows; // Dynamic offset for grid titles
   const ROW_LABEL_OFFSET = 9 / numRows; // Dynamic offset for row labels
 
-  // Get keys from trellisData sorted
-  const sortedTrellisNames = Object.keys(trellisData).sort();
+  // Get keys from trellisData sorted naturally, so numeric ranges are ordered by value
+  // instead of lexicographically
+  const sortedTrellisNames = Object.keys(trellisData).sort((a, b) => a.localeCompare(b, undefined, { numeric: true }));
 
   // Calculate global y-axis range for harmonization across all plots
   const allYValues = data.map((obj: any) => Number(obj[trellisXAxisKey])).filter((v: number) => !isNaN(v));