fix: improve how previous state is shown for funnels

Author: lindesvard

apps/start/src/components/delta-chip.tsx

@@ -3,7 +3,7 @@ import { type VariantProps, cva } from 'class-variance-authority';
 import { ArrowDownIcon, ArrowUpIcon } from 'lucide-react';
 
 const deltaChipVariants = cva(
-  'flex items-center gap-1 rounded-full px-2 py-1 text-sm font-semibold',
+  'flex items-center justify-center gap-1 rounded-full font-semibold',
   {
     variants: {
       variant: {
@@ -12,9 +12,10 @@ const deltaChipVariants = cva(
         default: 'bg-muted text-muted-foreground',
       },
       size: {
-        sm: 'text-xs',
-        md: 'text-sm',
-        lg: 'text-base',
+        xs: 'px-1.5 py-0 leading-none text-[10px]',
+        sm: 'px-2 py-1 text-xs',
+        md: 'px-2 py-1 text-sm',
+        lg: 'px-2 py-1 text-base',
       },
     },
     defaultVariants: {
@@ -30,6 +31,7 @@ type DeltaChipProps = VariantProps<typeof deltaChipVariants> & {
 };
 
 const iconVariants: Record<NonNullable<DeltaChipProps['size']>, number> = {
+  xs: 8,
   sm: 12,
   md: 16,
   lg: 20,

apps/start/src/components/report-chart/common/previous-diff-indicator.tsx

@@ -97,7 +97,7 @@ interface PreviousDiffIndicatorPureProps {
   diff?: number | null | undefined;
   state?: string | null | undefined;
   inverted?: boolean;
-  size?: 'sm' | 'lg' | 'md';
+  size?: 'xs' | 'sm' | 'lg' | 'md';
   className?: string;
   showPrevious?: boolean;
 }

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

@@ -3,8 +3,10 @@ import { useNumber } from '@/hooks/use-numer-formatter';
 import type { RouterOutputs } from '@/trpc/client';
 import { cn } from '@/utils/cn';
 import { getChartColor } from '@/utils/theme';
+import { getPreviousMetric } from '@openpanel/common';
 import { ChevronDown, ChevronRight } from 'lucide-react';
 import { useState } from 'react';
+import { PreviousDiffIndicatorPure } from '../common/previous-diff-indicator';
 import { Tables } from './chart';
 
 interface BreakdownListProps {
@@ -48,10 +50,9 @@ export function BreakdownList({
     });
   };
 
-  // Get the color index for a breakdown based on its position in the
-  // visible series list (so colors match the chart bars)
-  const getVisibleIndex = (id: string) => {
-    return visibleSeriesIds.indexOf(id);
+  // Get the stable color index for a breakdown (position in full list, matches chart)
+  const getStableColorIndex = (id: string) => {
+    return allBreakdowns.findIndex((b) => b.id === id);
   };
 
   if (allBreakdowns.length === 0) {
@@ -81,14 +82,12 @@ export function BreakdownList({
       {allBreakdowns.map((item, index) => {
         const isExpanded = expandedIds.has(item.id);
         const isVisible = visibleSeriesIds.includes(item.id);
-        const visibleIndex = getVisibleIndex(item.id);
+        const stableColorIndex = getStableColorIndex(item.id);
         const previousItem = previousData[index] ?? null;
         const hasBreakdownName =
           item.breakdowns && item.breakdowns.length > 0;
         const color =
-          isVisible && visibleIndex !== -1
-            ? getChartColor(visibleIndex)
-            : undefined;
+          stableColorIndex >= 0 ? getChartColor(stableColorIndex) : undefined;
 
         return (
           <div key={item.id} className="col">
@@ -107,7 +106,7 @@ export function BreakdownList({
                   className="shrink-0"
                   style={{
                     borderColor: color,
-                    backgroundColor: isVisible ? color : 'transparent',
+                    backgroundColor: isVisible && color ? color : 'transparent',
                   }}
                 />
               )}
@@ -141,6 +140,14 @@ export function BreakdownList({
                       '%',
                     )}
                   </div>
+                  {previousItem && (
+                    <PreviousDiffIndicatorPure
+                      {...getPreviousMetric(
+                        item.lastStep.percent,
+                        previousItem.lastStep.percent,
+                      )}
+                    />
+                  )}
                 </div>
                 <div className="text-right row gap-2 items-center">
                   <div className="text-muted-foreground text-sm">
@@ -149,6 +156,14 @@ export function BreakdownList({
                   <div className="font-mono font-semibold text-sm">
                     {number.format(item.lastStep.count)}
                   </div>
+                  {previousItem && (
+                    <PreviousDiffIndicatorPure
+                      {...getPreviousMetric(
+                        item.lastStep.count,
+                        previousItem.lastStep.count,
+                      )}
+                    />
+                  )}
                 </div>
               </div>
             </div>
@@ -160,6 +175,7 @@ export function BreakdownList({
                   current: item,
                   previous: previousItem,
                 }}
+                noTopBorderRadius
               />
             )}
           </div>