funnel

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

@@ -363,6 +363,7 @@ export function Chart({ data }: { data: RouterOutputs['chart']['funnel'] }) {
   const rechartData = useRechartData(data);
   const xAxisProps = useXAxisProps();
   const yAxisProps = useYAxisProps();
+  const hasBreakdowns = data.current.length > 1;
 
   return (
     <TooltipProvider data={data.current}>
@@ -391,6 +392,23 @@ export function Chart({ data }: { data: RouterOutputs['chart']['funnel'] }) {
               }
             />
             <YAxis {...yAxisProps} />
+            {hasBreakdowns ? (
+              data.current.map((item, breakdownIndex) => (
+                <Bar
+                  key={`step:percent:${item.id}`}
+                  dataKey={`step:percent:${breakdownIndex}`}
+                  shape={<BarShapeProps />}
+                >
+                  {rechartData.map((item, stepIndex) => (
+                    <Cell
+                      key={`${item.name}-${breakdownIndex}`}
+                      fill={getChartTranslucentColor(breakdownIndex)}
+                      stroke={getChartColor(breakdownIndex)}
+                    />
+                  ))}
+                </Bar>
+              ))
+            ) : (
               <Bar
                 data={rechartData}
                 dataKey="step:percent:0"
@@ -404,6 +422,7 @@ export function Chart({ data }: { data: RouterOutputs['chart']['funnel'] }) {
                   />
                 ))}
               </Bar>
+            )}
             <Tooltip />
           </BarChart>
         </ResponsiveContainer>
@@ -412,8 +431,6 @@ export function Chart({ data }: { data: RouterOutputs['chart']['funnel'] }) {
   );
 }
 
-type Hej = RouterOutputs['chart']['funnel']['current'];
-
 const { Tooltip, TooltipProvider } = createChartTooltip<
   RechartData,
   {
@@ -435,7 +452,7 @@ const { Tooltip, TooltipProvider } = createChartTooltip<
       <div className="flex justify-between gap-8 text-muted-foreground">
         <div>{data.name}</div>
       </div>
-      {variants.map((key) => {
+      {variants.map((key, breakdownIndex) => {
         const variant = data[key];
         const prevVariant = data[`prev_${key}`];
         if (!variant?.step) {
@@ -445,7 +462,11 @@ const { Tooltip, TooltipProvider } = createChartTooltip<
           <div className="row gap-2" key={key}>
             <div
               className="w-[3px] rounded-full"
-              style={{ background: getChartColor(index) }}
+              style={{
+                background: getChartColor(
+                  variants.length > 1 ? breakdownIndex : index,
+                ),
+              }}
             />
             <div className="col flex-1 gap-1">
               <div className="flex items-center gap-1">

apps/start/src/modals/view-chart-users.tsx

@@ -22,7 +22,6 @@ import { ModalHeader } from './Modal/Container';
 import { ScrollableModal, useScrollableModal } from './Modal/scrollable-modal';
 
 const ProfileItem = ({ profile }: { profile: any }) => {
-  console.log('ProfileItem', profile.id);
   return (
     <ProjectLink
       preload={false}