Fix months not showing up in the correct order

components/Infographic.tsx

@@ -3,6 +3,7 @@
 import { useState } from "react";
 import dynamic from "next/dynamic";
 import { ChartData, ChartOptions } from "chart.js";
+import { getUniqueMonths } from "@/lib/getUniqueMonths";
 import { stringToUniqueColour } from "@/lib/stringToUniqueColour";
 import { transformDataToDatasets } from "@/lib/transformDataToDatasets";
 import type { Car, ChartDataset, Dataset } from "@/types";
@@ -25,7 +26,7 @@ export const Infographic = ({ electricCars }: InfographicProps) => {
   const [datasets, setDatasets] = useState(initialDatasets);
 
   const data: ChartData<"line"> = {
-    labels: [...new Set(electricCars.map(({ month }) => month))],
+    labels: getUniqueMonths(electricCars),
     datasets: datasets.filter(({ checked }) => checked),
   };
 
@@ -94,8 +95,8 @@ export const Infographic = ({ electricCars }: InfographicProps) => {
           return (
             <div key={key} className="flex items-center gap-2">
               <input
-                type="checkbox"
                 id={key}
+                type="checkbox"
                 value={label}
                 defaultChecked={checked}
                 onChange={handleMakeChange(index)}

lib/getUniqueMonths.test.ts

@@ -0,0 +1,19 @@
+import { getUniqueMonths } from "@/lib/getUniqueMonths";
+
+describe("getUniqueMonths", () => {
+  it("should return a unique set of dates", () => {
+    const dates = [
+      { key: "2023-04" },
+      { key: "2023-04" },
+      { key: "2023-04" },
+      { key: "2023-01" },
+      { key: "2023-02" },
+      { key: "2023-03" },
+    ];
+
+    const result = ["2023-01", "2023-02", "2023-03", "2023-04"];
+
+    expect(getUniqueMonths(dates, "key")).toHaveLength(4);
+    expect(getUniqueMonths(dates, "key")).toEqual(result);
+  });
+});

lib/getUniqueMonths.ts

@@ -0,0 +1,9 @@
+import { parseISO } from "date-fns";
+
+export const getUniqueMonths = (data: any[], sortKey: string = "month") =>
+  [...new Set(data.map((item) => item[sortKey]))].sort((a, b) => {
+    const monthA = parseISO(a);
+    const monthB = parseISO(b);
+
+    return monthA.getTime() - monthB.getTime();
+  });

package.json

@@ -14,6 +14,7 @@
     "chart.js": "^4.4.0",
     "classnames": "^2.3.2",
     "d3": "^7.8.5",
+    "date-fns": "^2.30.0",
     "next": "14.0.0",
     "react": "^18",
     "react-chartjs-2": "^5.2.0",