feat: grouping time 2d

libs/shared/lib/vis/visualizations/vis1D/Vis1D.tsx

@@ -168,6 +168,9 @@ const Vis1DSettings = ({ settings, graphMetadata, updateSettings }: Visualizatio
             options={mutablePlotTypes}
             onChange={(value: string | number) => {
               updateSettings({ plotType: value as (typeof plotTypeOptions)[number] });
+              if (value === 'bar' || value === 'histogram' || value === 'pie') {
+                updateSettings({ yAxisLabel: '' });
+              }
             }}
           />
         </div>
@@ -208,7 +211,7 @@ const Vis1DSettings = ({ settings, graphMetadata, updateSettings }: Visualizatio
               type="dropdown"
               label="Group Time:"
               value={settings.groupData}
-              options={['monthly', 'quarterly', 'yearly']}
+              options={['', 'monthly', 'quarterly', 'yearly']}
               onChange={(value) => {
                 updateSettings({ groupData: value as string });
               }}

libs/shared/lib/vis/visualizations/vis1D/components/CustomChartPlotly.tsx

@@ -24,7 +24,7 @@ export interface CustomChartPlotlyProps {
   groupBy?: string;
 }
 
-const groupByTime = (xAxisData: string[], groupBy: string) => {
+const groupByTime = (xAxisData: string[], groupBy: string, additionalVariableData?: (string | number)[]) => {
   // Function to parse the date-time string into a JavaScript Date object
   const parseDate = (dateStr: string) => {
     // Remove nanoseconds part and use just the standard "YYYY-MM-DD HH:MM:SS" part
@@ -34,7 +34,7 @@ const groupByTime = (xAxisData: string[], groupBy: string) => {
 
   // Grouping logic
   const groupedData = xAxisData.reduce(
-    (acc, dateStr) => {
+    (acc, dateStr, index) => {
       const date = parseDate(dateStr);
       let groupKey: string;
 
@@ -52,14 +52,30 @@ const groupByTime = (xAxisData: string[], groupBy: string) => {
         groupKey = date.getFullYear().toString();
       }
 
+      // Initialize the group if it doesn't exist
       if (!acc[groupKey]) {
-        acc[groupKey] = 0;
+        acc[groupKey] = additionalVariableData
+          ? typeof additionalVariableData[0] === 'number'
+            ? 0 // Initialize sum for numbers
+            : [] // Initialize array for strings
+          : 0; // Initialize count for no additional data
+      }
+
+      // Aggregate additional variable if provided
+      if (additionalVariableData) {
+        if (typeof additionalVariableData[index] === 'number') {
+          acc[groupKey] = (acc[groupKey] as number) + (additionalVariableData[index] as number);
+        } else if (typeof additionalVariableData[index] === 'string') {
+          acc[groupKey] = [...(acc[groupKey] as string[]), additionalVariableData[index] as string];
+        }
+      } else {
+        // Increment the count if no additionalVariableData
+        acc[groupKey] = (acc[groupKey] as number) + 1;
       }
-      acc[groupKey] += 1; // You can modify this line to aggregate based on other criteria.
 
       return acc;
     },
-    {} as Record<string, number>,
+    {} as Record<string, number | string[]>,
   );
 
   // Extract grouped data into arrays for Plotly
@@ -98,7 +114,8 @@ export const preparePlotData = (
   let xValues: (string | number)[] = [];
   let yValues: (string | number)[] = [];
 
-  if (plotType === 'scatter' || plotType === 'line') {
+  //if (plotType === 'scatter' || plotType === 'line') {
+  if (!groupBy) {
     if (xAxisData.length !== 0 && yAxisData && yAxisData.length !== 0) {
       xValues = xAxisData;
       yValues = yAxisData;
@@ -113,9 +130,16 @@ export const preparePlotData = (
     // case: bar, histogram, pie
 
     if (groupBy) {
-      const { xValuesGrouped, yValuesGrouped } = groupByTime(xAxisData as string[], groupBy);
-      xValues = xValuesGrouped;
-      yValues = yValuesGrouped;
+      if (yAxisData && yAxisData.length !== 0) {
+        const { xValuesGrouped, yValuesGrouped } = groupByTime(xAxisData as string[], groupBy, yAxisData);
+        xValues = xValuesGrouped;
+        yValues = yValuesGrouped;
+      } else {
+        const { xValuesGrouped, yValuesGrouped } = groupByTime(xAxisData as string[], groupBy);
+        xValues = xValuesGrouped;
+        yValues = yValuesGrouped;
+      }
+      console.log(xValues, yValues);
     } else {
       xValues = xAxisData;
       yValues = xAxisData.map((_, index) => index + 1);