feat: add stacked option for histogram

apps/start/src/components/report/reportSlice.ts

@@ -361,6 +361,17 @@ export const reportSlice = createSlice({
         state.options.include = action.payload;
       }
     },
+    changeStacked(state, action: PayloadAction<boolean>) {
+      state.dirty = true;
+      if (!state.options || state.options.type !== 'histogram') {
+        state.options = {
+          type: 'histogram',
+          stacked: action.payload,
+        };
+      } else {
+        state.options.stacked = action.payload;
+      }
+    },
     reorderEvents(
       state,
       action: PayloadAction<{ fromIndex: number; toIndex: number }>,
@@ -406,6 +417,7 @@ export const {
   changeSankeySteps,
   changeSankeyExclude,
   changeSankeyInclude,
+  changeStacked,
   reorderEvents,
 } = reportSlice.actions;
 

apps/start/src/components/report/sidebar/ReportSettings.tsx

@@ -17,6 +17,7 @@ import {
   changeSankeyInclude,
   changeSankeyMode,
   changeSankeySteps,
+  changeStacked,
   changeUnit,
 } from '../reportSlice';
 
@@ -25,14 +26,17 @@ export function ReportSettings() {
   const previous = useSelector((state) => state.report.previous);
   const unit = useSelector((state) => state.report.unit);
   const options = useSelector((state) => state.report.options);
-  
+
   const retentionOptions = options?.type === 'retention' ? options : undefined;
   const criteria = retentionOptions?.criteria ?? 'on_or_after';
-  
+
   const funnelOptions = options?.type === 'funnel' ? options : undefined;
   const funnelGroup = funnelOptions?.funnelGroup;
   const funnelWindow = funnelOptions?.funnelWindow;
 
+  const histogramOptions = options?.type === 'histogram' ? options : undefined;
+  const stacked = histogramOptions?.stacked ?? false;
+
   const dispatch = useDispatch();
   const { projectId } = useAppParams();
   const eventNames = useEventNames({ projectId });
@@ -61,6 +65,10 @@ export function ReportSettings() {
       fields.push('sankeyInclude');
     }
 
+    if (chartType === 'histogram') {
+      fields.push('stacked');
+    }
+
     return fields;
   }, [chartType]);
 
@@ -259,6 +267,15 @@ export function ReportSettings() {
             />
           </div>
         )}
+        {fields.includes('stacked') && (
+          <Label className="flex items-center justify-between mb-0">
+            <span className="whitespace-nowrap">Stack series</span>
+            <Switch
+              checked={stacked}
+              onCheckedChange={(val) => dispatch(changeStacked(!!val))}
+            />
+          </Label>
+        )}
       </div>
     </div>
   );