feat: add stacked option for histogram

apps/start/src/components/report-chart/histogram/chart.tsx

@@ -61,9 +61,14 @@ export function Chart({ data }: Props) {
       range,
       series: reportSeries,
       breakdowns,
+      options: reportOptions,
     },
     options: { hideXAxis, hideYAxis },
   } = useReportChartContext();
+
+  const histogramOptions =
+    reportOptions?.type === 'histogram' ? reportOptions : undefined;
+  const isStacked = histogramOptions?.stacked ?? false;
   const trpc = useTRPC();
   const references = useQuery(
     trpc.reference.getChartReferences.queryOptions(
@@ -176,6 +181,7 @@ export function Chart({ data }: Props) {
                         fill={getChartColor(serie.index)}
                         fillOpacity={0.3}
                         radius={5}
+                        stackId={isStacked ? 'prev' : undefined}
                       />
                     );
                   })
@@ -187,8 +193,9 @@ export function Chart({ data }: Props) {
                     name={serie.id}
                     dataKey={`${serie.id}:count`}
                     fill={getChartColor(serie.index)}
-                  radius={5}
+                    radius={isStacked ? 0 : 4}
                     fillOpacity={1}
+                    stackId={isStacked ? 'current' : undefined}
                   />
                 );
               })}

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';
 
@@ -33,6 +34,9 @@ export function ReportSettings() {
   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>
   );

packages/validation/src/index.ts

@@ -126,14 +126,21 @@ export const zSankeyOptions = z.object({
   include: z.array(z.string()).optional(),
 });
 
+export const zHistogramOptions = z.object({
+  type: z.literal('histogram'),
+  stacked: z.boolean().default(false),
+});
+
 export const zReportOptions = z.discriminatedUnion('type', [
   zFunnelOptions,
   zRetentionOptions,
   zSankeyOptions,
+  zHistogramOptions,
 ]);
 
 export type IReportOptions = z.infer<typeof zReportOptions>;
 export type ISankeyOptions = z.infer<typeof zSankeyOptions>;
+export type IHistogramOptions = z.infer<typeof zHistogramOptions>;
 
 export const zWidgetType = z.enum(['realtime', 'counter']);
 export type IWidgetType = z.infer<typeof zWidgetType>;