feat: correct order on weeks

src/lib/vis/visualizations/vis1D/components/MakePlot.ts

@@ -20,8 +20,6 @@ const getWeekNumber = (date: Date): string => {
 };
 
 const groupByTime = (xAxisData: string[], groupBy: string, additionalVariableData?: (string | number)[]) => {
-  // Function to parse the date-time string into a JavaScript Date object
-
   console.log('xAxisData ', xAxisData);
   console.log('additionalVariableData ', additionalVariableData);
 
@@ -85,46 +83,61 @@ const groupByTime = (xAxisData: string[], groupBy: string, additionalVariableDat
         acc[groupKey] = (acc[groupKey] as number) + 1;
       }
 
-      // sort date
-
-      const sortedAcc = Object.keys(acc)
-        .sort((a, b) => {
-          const parseKey = (key: string) => {
-            if (key.includes('Q')) {
-              // For quarterly (e.g., "2024-Q1")
-              return new Date(key.split('-')[0], (parseInt(key.split('-')[1].replace('Q', ''), 10) - 1) * 3);
-            } else if (key.includes('-')) {
-              // For monthly (e.g., "2024-01")
-              return new Date(key + '-01');
-            } else if (key.includes('W')) {
-              // For weekly (e.g., "2024-W04")
-              const year = key.split('-')[0];
-              const week = parseInt(key.split('-')[1].replace('W', ''), 10);
-              const date = new Date(year, 0, 1 + (week - 1) * 7); // Get the first date of the week
-              return date;
-            }
-            return new Date(key); // Fallback for other date formats
-          };
-
-          return parseKey(a).getTime() - parseKey(b).getTime();
-        })
-        .reduce(
-          (sortedAcc, key) => {
-            sortedAcc[key] = acc[key];
-            return sortedAcc;
-          },
-          {} as Record<string, number | string[]>,
-        );
-
-      return sortedAcc;
-      //return acc;
+      return acc;
     },
     {} as Record<string, number | string[]>,
   );
-  console.log('groupedData ', groupedData);
-  // Extract grouped data into arrays for Plotly
-  const xValuesGrouped = Object.keys(groupedData);
-  const yValuesGrouped = Object.values(groupedData);
+
+  // Sorting logic outside the reduce block
+  /*
+  const sortedAcc = Object.keys(groupedData)
+    .sort((a, b) => {
+      const parseKey = (key: string) => {
+        if (key.includes('Q')) {
+          // For quarterly (e.g., "2024-Q1")
+          return new Date(key.split('-')[0], (parseInt(key.split('-')[1].replace('Q', ''), 10) - 1) * 3);
+        } else if (key.includes('-')) {
+          // For monthly (e.g., "2024-01")
+          return new Date(key + '-01');
+        } else if (key.includes('W')) {
+          // For weekly (e.g., "2024-W04")
+          const [year, week] = key.split('-W').map(Number);
+          const jan1 = new Date(year, 0, 1);
+          return new Date(year, 0, jan1.getDate() + (week - 1) * 7);
+        }
+        return new Date(key); // Fallback for other date formats
+      };
+
+      return parseKey(a).getTime() - parseKey(b).getTime();
+    })
+    .reduce(
+      (sortedAcc, key) => {
+        sortedAcc[key] = groupedData[key];
+        return sortedAcc;
+      },
+      {} as Record<string, number | string[]>,
+    );
+    */
+  const sortedArray = Object.entries(groupedData)
+    .map(([key, value]) => ({
+      x: key,
+      y: value,
+      dateObj: (() => {
+        if (key.includes('Q')) {
+          return new Date(parseInt(key.split('-')[0], 10), (parseInt(key.split('-')[1].replace('Q', ''), 10) - 1) * 3);
+        } else if (key.includes('-W')) {
+          const [year, week] = key.split('-W').map(Number);
+          const jan1 = new Date(year, 0, 1);
+          return new Date(year, 0, jan1.getDate() + (week - 1) * 7);
+        } else {
+          return new Date(key);
+        }
+      })(),
+    }))
+    .sort((a, b) => a.dateObj.getTime() - b.dateObj.getTime());
+
+  const xValuesGrouped = sortedArray.map(({ x }) => x);
+  const yValuesGrouped = sortedArray.map(({ y }) => y);
 
   return { xValuesGrouped, yValuesGrouped };
 };
@@ -221,10 +234,12 @@ export const preparePlotData = (params: {
     if (groupBy) {
       if (yAxisData && yAxisData.length !== 0) {
         const { xValuesGrouped, yValuesGrouped } = groupByTime(xAxisData as string[], groupBy, yAxisData);
+        console.log('1', xValuesGrouped);
         xValues = xValuesGrouped;
         yValues = yValuesGrouped.flat();
       } else {
         const { xValuesGrouped, yValuesGrouped } = groupByTime(xAxisData as string[], groupBy);
+        console.log('2', xValuesGrouped);
         xValues = xValuesGrouped;
         yValues = yValuesGrouped.flat();
       }
@@ -249,8 +264,6 @@ export const preparePlotData = (params: {
     truncatedYLabels = computeStringTickValues(yValues, 2, lengthLabelsY);
   }
 
-  console.log('typeof xAxisData[0] ', typeof xAxisData[0], xAxisType);
-
   const plotData = (() => {
     switch (plotType) {
       case 'bar':
@@ -295,6 +308,8 @@ export const preparePlotData = (params: {
               marker: {
                 color: colorDataZ?.length != 0 ? colorDataZ : primaryColor,
               },
+              customdata: xValues,
+              hovertemplate: '<b>%{customdata}</b>: %{y}<extra></extra>',
             },
           ];
         } else {