From 8cd3b89fa313883e347e4bd643791f1c2ce0f429 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Carl-Gerhard=20Lindesva=CC=88rd?= <lindesvard@gmail.com>
Date: Tue, 25 Nov 2025 22:33:58 +0100
Subject: [PATCH] funnel

---
 .../components/report-chart/funnel/chart.tsx  | 55 +++++++++++++------
 apps/start/src/modals/view-chart-users.tsx    |  1 -
 2 files changed, 38 insertions(+), 18 deletions(-)

diff --git a/apps/start/src/components/report-chart/funnel/chart.tsx b/apps/start/src/components/report-chart/funnel/chart.tsx
index 5c7aa4d4..e48fce13 100644
--- a/apps/start/src/components/report-chart/funnel/chart.tsx
+++ b/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,19 +392,37 @@ export function Chart({ data }: { data: RouterOutputs['chart']['funnel'] }) {
               }
             />
             <YAxis {...yAxisProps} />
-            <Bar
-              data={rechartData}
-              dataKey="step:percent:0"
-              shape={<BarShapeProps />}
-            >
-              {rechartData.map((item, index) => (
-                <Cell
-                  key={item.name}
-                  fill={getChartTranslucentColor(index)}
-                  stroke={getChartColor(index)}
-                />
-              ))}
-            </Bar>
+            {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"
+                shape={<BarShapeProps />}
+              >
+                {rechartData.map((item, index) => (
+                  <Cell
+                    key={item.name}
+                    fill={getChartTranslucentColor(index)}
+                    stroke={getChartColor(index)}
+                  />
+                ))}
+              </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">
diff --git a/apps/start/src/modals/view-chart-users.tsx b/apps/start/src/modals/view-chart-users.tsx
index 2c591c89..31c7f760 100644
--- a/apps/start/src/modals/view-chart-users.tsx
+++ b/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}