zias/stats
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix: improve how previous state is shown for funnels

Browse Source
This commit is contained in:
Carl-Gerhard Lindesvärd
2026-03-02 15:28:28 +01:00
parent 885f7225db
commit 83761638f2
5 changed files with 369 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
apps/start/src/components/delta-chip.tsx
View File

@@ -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,

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

@@ -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;
}

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

@@ -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>

458
apps/start/src/components/report-chart/funnel/chart.tsx
View File

@@ -1,20 +1,6 @@
import { ColorSquare } from '@/components/color-square';
import { Button } from '@/components/ui/button';
import { pushModal } from '@/modals';
import type { RouterOutputs } from '@/trpc/client';
import { cn } from '@/utils/cn';
import { ChevronRightIcon, InfoIcon, UsersIcon } from 'lucide-react';
import { alphabetIds } from '@openpanel/constants';
import { createChartTooltip } from '@/components/charts/chart-tooltip';
import { BarShapeBlue, BarShapeProps } from '@/components/charts/common-bar';
import { Tooltiper } from '@/components/ui/tooltip';
import { WidgetTable } from '@/components/widget-table';
import { useNumber } from '@/hooks/use-numer-formatter';
import type { IVisibleFunnelBreakdowns } from '@/hooks/use-visible-funnel-breakdowns';
import { getChartColor, getChartTranslucentColor } from '@/utils/theme';
import { getPreviousMetric } from '@openpanel/common';
import { alphabetIds } from '@openpanel/constants';
import { ChevronRightIcon, InfoIcon, UsersIcon } from 'lucide-react';
import { useCallback } from 'react';
import {
Bar,
@@ -31,12 +17,24 @@ import { PreviousDiffIndicatorPure } from '../common/previous-diff-indicator';
import { SerieIcon } from '../common/serie-icon';
import { SerieName } from '../common/serie-name';
import { useReportChartContext } from '../context';
import { createChartTooltip } from '@/components/charts/chart-tooltip';
import { BarShapeProps } from '@/components/charts/common-bar';
import { ColorSquare } from '@/components/color-square';
import { Button } from '@/components/ui/button';
import { Tooltiper } from '@/components/ui/tooltip';
import { WidgetTable } from '@/components/widget-table';
import { useNumber } from '@/hooks/use-numer-formatter';
import { pushModal } from '@/modals';
import type { RouterOutputs } from '@/trpc/client';
import { cn } from '@/utils/cn';
import { getChartColor, getChartTranslucentColor } from '@/utils/theme';
type Props = {
data: {
current: RouterOutputs['chart']['funnel']['current'][number];
previous: RouterOutputs['chart']['funnel']['current'][number] | null;
};
noTopBorderRadius?: boolean;
};
export const Metric = ({
@@ -50,20 +48,16 @@ export const Metric = ({
enhancer?: React.ReactNode;
className?: string;
}) => (
<div className={cn('gap-1 justify-between flex-1 col', className)}>
<div className="text-sm text-muted-foreground">{label}</div>
<div className="row items-center gap-2 justify-between">
<div className={cn('col flex-1 justify-between gap-1', className)}>
<div className="text-muted-foreground text-sm">{label}</div>
<div className="row items-center justify-between gap-2">
<div className="font-mono font-semibold">{value}</div>
{enhancer && <div>{enhancer}</div>}
</div>
</div>
);
export function Summary({
data,
}: {
data: RouterOutputs['chart']['funnel'];
}) {
export function Summary({ data }: { data: RouterOutputs['chart']['funnel'] }) {
const number = useNumber();
const highestConversion = data.current
.slice(0)
@@ -81,10 +75,10 @@ export function Summary({
<ChartName breakdowns={highestConversion.breakdowns ?? []} />
}
/>
<span className="text-xl font-semibold font-mono">
<span className="font-mono font-semibold text-xl">
{number.formatWithUnit(
highestConversion.lastStep.percent / 100,
'%',
'%'
)}
</span>
</div>
@@ -95,7 +89,7 @@ export function Summary({
label="Most conversions"
value={<ChartName breakdowns={highestCount.breakdowns ?? []} />}
/>
<span className="text-xl font-semibold font-mono">
<span className="font-mono font-semibold text-xl">
{number.format(highestCount.lastStep.count)}
</span>
</div>
@@ -107,7 +101,10 @@ export function Summary({
function ChartName({
breakdowns,
className,
}: { breakdowns: string[]; className?: string }) {
}: {
breakdowns: string[];
className?: string;
}) {
return (
<div className={cn('flex items-center gap-2 font-medium', className)}>
{breakdowns.map((name, index) => {
@@ -127,6 +124,7 @@ export function Tables({
current: { steps, mostDropoffsStep, lastStep, breakdowns },
previous: previousData,
},
noTopBorderRadius,
}: Props) {
const number = useNumber();
const hasHeader = breakdowns.length > 0;
@@ -145,11 +143,11 @@ export function Tables({
} = useReportChartContext();
const funnelOptions = options?.type === 'funnel' ? options : undefined;
const funnelWindow = funnelOptions?.funnelWindow;
const funnelGroup = funnelOptions?.funnelGroup;
const handleInspectStep = (step: (typeof steps)[0], stepIndex: number) => {
if (!projectId || !step.event.id) return;
if (!(projectId && step.event.id)) {
return;
}
// For funnels, we need to pass the step index so the modal can query
// users who completed at least that step in the funnel sequence
@@ -172,48 +170,56 @@ export function Tables({
});
};
return (
<div className={cn('col @container divide-y divide-border card')}>
<div
className={cn(
'col @container card divide-y divide-border',
noTopBorderRadius && 'rounded-t-none'
)}
>
{hasHeader && <ChartName breakdowns={breakdowns} className="p-4 py-3" />}
<div className={cn('bg-def-100', !hasHeader && 'rounded-t-md')}>
<div className="col max-md:divide-y md:row md:items-center md:divide-x divide-border">
<div
className={cn(
'bg-def-100',
!hasHeader && 'rounded-t-md',
noTopBorderRadius && 'rounded-t-none'
)}
>
<div className="col md:row divide-border max-md:divide-y md:items-center md:divide-x">
<Metric
className="p-4 py-3"
label="Conversion"
value={number.formatWithUnit(lastStep?.percent / 100, '%')}
enhancer={
previousData && (
<PreviousDiffIndicatorPure
{...getPreviousMetric(
lastStep?.percent,
previousData.lastStep?.percent,
previousData.lastStep?.percent
)}
/>
)
}
label="Conversion"
value={number.formatWithUnit(lastStep?.percent / 100, '%')}
/>
<Metric
className="p-4 py-3"
label="Completed"
value={number.format(lastStep?.count)}
enhancer={
previousData && (
<PreviousDiffIndicatorPure
{...getPreviousMetric(
lastStep?.count,
previousData.lastStep?.count,
previousData.lastStep?.count
)}
/>
)
}
label="Completed"
value={number.format(lastStep?.count)}
/>
{!!mostDropoffsStep && (
<Metric
className="p-4 py-3"
label="Most dropoffs after"
value={mostDropoffsStep?.event?.displayName}
enhancer={
<Tooltiper
tooltipClassName="max-w-xs"
content={
<span>
<span className="font-semibold">
@@ -223,44 +229,26 @@ export function Tables({
conversion rate will likely increase.
</span>
}
tooltipClassName="max-w-xs"
>
<InfoIcon className="size-3" />
</Tooltiper>
}
label="Most dropoffs after"
value={mostDropoffsStep?.event?.displayName}
/>
)}
</div>
</div>
<div className="col divide-y divide-def-200">
<WidgetTable
data={steps}
keyExtractor={(item) => item.event.id!}
className={'text-sm @container'}
className={'@container text-sm'}
columnClassName="px-2 group/row items-center"
eachRow={(item, index) => {
return (
<div className="absolute inset-px !p-0">
<div
className={cn(
'h-full bg-def-300 group-hover/row:bg-blue-200 dark:group-hover/row:bg-blue-900 transition-colors relative',
item.isHighestDropoff && [
'bg-red-500/20',
'group-hover/row:bg-red-500/70',
],
index === steps.length - 1 && 'rounded-bl-sm',
)}
style={{
width: `${item.percent}%`,
}}
/>
</div>
);
}}
columns={[
{
name: 'Event',
render: (item, index) => (
<div className="row items-center gap-2 min-w-0 relative">
<div className="row relative min-w-0 items-center gap-2">
<ColorSquare color={getChartColor(index)}>
{alphabetIds[index]}
</ColorSquare>
@@ -295,17 +283,17 @@ export function Tables({
name: '',
render: (item) => (
<Button
variant="ghost"
size="sm"
className="h-8 w-8 p-0"
onClick={(e) => {
e.stopPropagation();
const stepIndex = steps.findIndex(
(s) => s.event.id === item.event.id,
(s) => s.event.id === item.event.id
);
handleInspectStep(item, stepIndex);
}}
size="sm"
title="View users who completed this step"
variant="ghost"
>
<UsersIcon size={16} />
</Button>
@@ -314,6 +302,27 @@ export function Tables({
width: '48px',
},
]}
data={steps}
eachRow={(item, index) => {
return (
<div className="!p-0 absolute inset-px">
<div
className={cn(
'relative h-full bg-def-300 transition-colors group-hover/row:bg-blue-200 dark:group-hover/row:bg-blue-900',
item.isHighestDropoff && [
'bg-red-500/20',
'group-hover/row:bg-red-500/70',
],
index === steps.length - 1 && 'rounded-bl-sm'
)}
style={{
width: `${item.percent}%`,
}}
/>
</div>
);
}}
keyExtractor={(item) => item.event.id!}
/>
</div>
</div>
@@ -363,9 +372,11 @@ const useRechartData = ({
...visibleBreakdowns.reduce((acc, visibleItem, visibleIdx) => {
// Find the original index for this visible breakdown
const originalIndex = current.findIndex(
(item) => item.id === visibleItem.id,
(item) => item.id === visibleItem.id
);
if (originalIndex === -1) return acc;
if (originalIndex === -1) {
return acc;
}
const diff = previous?.[originalIndex];
return {
@@ -391,6 +402,47 @@ const useRechartData = ({
);
};
const StripedBarShape = (props: any) => {
const { x, y, width, height, fill, stroke, value } = props;
const patternId = `prev-stripes-${(fill || '').replace(/[^a-z0-9]/gi, '')}`;
return (
<g>
<defs>
<pattern
height="6"
id={patternId}
patternTransform="rotate(-45)"
patternUnits="userSpaceOnUse"
width="6"
>
<rect fill="transparent" height="6" width="6" />
<rect fill={fill} height="6" width="3" />
</pattern>
</defs>
<rect
fill={`url(#${patternId})`}
height={height}
rx={3}
width={width}
x={x}
y={y}
/>
{value > 0 && (
<rect
fill={stroke}
height={2}
opacity={0.6}
rx={2}
stroke="none"
width={width}
x={x}
y={y - 3}
/>
)}
</g>
);
};
export function Chart({
data,
visibleBreakdowns,
@@ -403,96 +455,162 @@ export function Chart({
const yAxisProps = useYAxisProps();
const hasBreakdowns = data.current.length > 1;
const hasVisibleBreakdowns = visibleBreakdowns.length > 1;
const hasPrevious =
data.previous !== null &&
data.previous !== undefined &&
data.previous.length > 0;
const showPreviousBars = hasPrevious && !hasBreakdowns;
const CustomLegend = useCallback(() => {
if (!hasVisibleBreakdowns) return null;
if (!hasVisibleBreakdowns) {
return null;
}
return (
<div className="flex flex-wrap justify-center gap-x-4 gap-y-1 text-xs mt-4 -mb-2">
{visibleBreakdowns.map((breakdown, idx) => (
<div
className="flex items-center gap-1"
key={breakdown.id}
style={{
color: getChartColor(idx),
}}
>
<SerieIcon name={breakdown.breakdowns ?? []} />
<SerieName
name={
breakdown.breakdowns && breakdown.breakdowns.length > 0
? breakdown.breakdowns
: ['Funnel']
}
className="font-semibold"
/>
</div>
))}
<div className="mt-4 -mb-2 flex flex-wrap justify-center gap-x-4 gap-y-1 text-xs">
{visibleBreakdowns.map((breakdown, idx) => {
const stableIndex = data.current.findIndex((b) => b.id === breakdown.id);
const colorIndex = stableIndex >= 0 ? stableIndex : idx;
return (
<div
className="flex items-center gap-1.5 rounded px-2 py-1"
key={breakdown.id}
style={{
color: getChartColor(colorIndex),
}}
>
<SerieIcon name={breakdown.breakdowns ?? []} />
<SerieName
className="font-semibold"
name={
breakdown.breakdowns && breakdown.breakdowns.length > 0
? breakdown.breakdowns
: ['Funnel']
}
/>
</div>
);
})}
</div>
);
}, [visibleBreakdowns, hasVisibleBreakdowns]);
const PreviousLegend = useCallback(() => {
if (!showPreviousBars) {
return null;
}
return (
<div className="mt-4 -mb-2 flex flex-wrap justify-center gap-x-4 gap-y-1.5 text-xs">
<div className="flex items-center gap-1.5 rounded px-2 py-1">
<div
className="h-3 w-3 rounded-[2px]"
style={{
background: 'rgba(59, 121, 255, 0.3)',
borderTop: '2px solid rgba(59, 121, 255, 1)',
}}
/>
<span className="font-medium text-muted-foreground">Current</span>
</div>
<div className="flex items-center gap-1.5 rounded px-2 py-1">
<svg height="12" viewBox="0 0 12 12" width="12">
<defs>
<pattern
height="4"
id="legend-stripes"
patternTransform="rotate(-45)"
patternUnits="userSpaceOnUse"
width="4"
>
<rect fill="transparent" height="4" width="4" />
<rect fill="rgba(59, 121, 255, 0.3)" height="4" width="2" />
</pattern>
</defs>
<rect fill="url(#legend-stripes)" height="12" rx="2" width="12" />
</svg>
<span className="font-medium text-muted-foreground">Previous</span>
</div>
</div>
);
}, [showPreviousBars]);
return (
<TooltipProvider
data={data.current}
hasBreakdowns={hasBreakdowns}
hasPrevious={hasPrevious}
visibleBreakdownIds={new Set(visibleBreakdowns.map((b) => b.id))}
>
<div className="aspect-video max-h-[250px] w-full p-4 card pb-1">
<div className="card aspect-video max-h-[250px] w-full p-4 pb-1">
<ResponsiveContainer>
<BarChart data={rechartData}>
<CartesianGrid
strokeDasharray="3 3"
horizontal={true}
vertical={true}
className="stroke-border"
horizontal={true}
strokeDasharray="3 3"
vertical={true}
/>
<XAxis
{...xAxisProps}
dataKey="id"
allowDuplicatedCategory={false}
type={'category'}
scale="auto"
dataKey="id"
domain={undefined}
interval="preserveStartEnd"
tickSize={0}
tickMargin={4}
scale="auto"
tickFormatter={(id) =>
data.current[0].steps.find((step) => step.event.id === id)
?.event.displayName ?? ''
}
tickMargin={4}
tickSize={0}
type={'category'}
/>
<YAxis {...yAxisProps} />
{hasBreakdowns ? (
visibleBreakdowns.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 />}
>
{hasBreakdowns &&
visibleBreakdowns.map((item, breakdownIndex) => {
const stableIndex = data.current.findIndex(
(b) => b.id === item.id,
);
const colorIndex =
stableIndex >= 0 ? stableIndex : breakdownIndex;
return (
<Bar
dataKey={`step:percent:${breakdownIndex}`}
key={`step:percent:${item.id}`}
shape={<BarShapeProps />}
>
{rechartData.map((row, stepIndex) => (
<Cell
fill={getChartTranslucentColor(colorIndex)}
key={`${row.name}-${breakdownIndex}`}
stroke={getChartColor(colorIndex)}
/>
))}
</Bar>
);
})}
{!hasBreakdowns && (
<Bar dataKey="step:percent:0" shape={<BarShapeProps />}>
{rechartData.map((item, index) => (
<Cell
key={item.name}
fill={getChartTranslucentColor(index)}
key={item.name}
stroke={getChartColor(index)}
/>
))}
</Bar>
)}
{showPreviousBars && (
<Bar dataKey="prev_step:percent:0" shape={<StripedBarShape />}>
{rechartData.map((item, index) => (
<Cell
fill={getChartTranslucentColor(index)}
key={`prev-${item.name}`}
stroke={getChartColor(index)}
/>
))}
</Bar>
)}
{hasVisibleBreakdowns && <Legend content={<CustomLegend />} />}
{showPreviousBars && <Legend content={<PreviousLegend />} />}
<Tooltip />
</BarChart>
</ResponsiveContainer>
@@ -506,27 +624,85 @@ const { Tooltip, TooltipProvider } = createChartTooltip<
{
data: RouterOutputs['chart']['funnel']['current'];
visibleBreakdownIds: Set<string>;
hasPrevious: boolean;
hasBreakdowns: boolean;
}
>(({ data: dataArray, context, ...props }) => {
const data = dataArray[0]!;
const data = dataArray[0];
const number = useNumber();
if (!data) {
return null;
}
const variants = Object.keys(data).filter((key) =>
key.startsWith('step:data:'),
key.startsWith('step:data:')
) as `step:data:${number}`[];
const index = context.data[0].steps.findIndex(
(step) => step.event.id === (data as any).id,
(step) => step.event.id === (data as any).id
);
// Filter variants to only show visible breakdowns
// The variant object contains the full breakdown item, so we can check its ID directly
const visibleVariants = variants.filter((key) => {
const variant = data[key];
if (!variant) return false;
if (!variant) {
return false;
}
// The variant is the breakdown item itself (with step added), so it has an id property
return context.visibleBreakdownIds.has(variant.id);
});
if (!context.hasBreakdowns && context.hasPrevious) {
const currentVariant = data['step:data:0'];
const previousVariant = data['prev_step:data:0'];
if (!currentVariant?.step) {
return null;
}
const metric = getPreviousMetric(
currentVariant.step.percent,
previousVariant?.step.percent
);
return (
<>
<div className="text-muted-foreground">{data.name}</div>
<div className="col gap-1.5">
<div className="flex justify-between gap-8 font-medium font-mono">
<span className="text-muted-foreground">Current</span>
<span>
{number.format(currentVariant.step.count)} (
{number.formatWithUnit(currentVariant.step.percent / 100, '%')})
</span>
</div>
{previousVariant?.step && (
<div className="flex justify-between gap-8 font-medium font-mono text-muted-foreground">
<span>Previous</span>
<span>
{number.format(previousVariant.step.count)} (
{number.formatWithUnit(previousVariant.step.percent / 100, '%')}
)
</span>
</div>
)}
{metric && metric.diff != null && (
<div className="mt-0.5 flex items-center justify-between gap-8 border-border border-t pt-1.5">
<span className="font-medium text-sm">
{metric.state === 'positive'
? 'Improvement'
: metric.state === 'negative'
? 'Decline'
: 'No change'}
</span>
<PreviousDiffIndicatorPure {...metric} size="xs" />
</div>
)}
</div>
</>
);
}
return (
<>
<div className="flex justify-between gap-8 text-muted-foreground">
@@ -538,30 +714,33 @@ const { Tooltip, TooltipProvider } = createChartTooltip<
if (!variant?.step) {
return null;
}
// Find the original breakdown index for color
// Find the original breakdown index for color (matches chart bar order)
const originalBreakdownIndex = context.data.findIndex(
(b) => b.id === variant.id,
(b) => b.id === variant.id
);
let colorIndex = index;
if (visibleVariants.length > 1) {
colorIndex =
originalBreakdownIndex >= 0 ? originalBreakdownIndex : visibleIndex;
}
return (
<div className="row gap-2" key={key}>
<div
className="w-[3px] rounded-full"
className="w-[3px] rounded-full shrink-0"
style={{
background: getChartColor(
visibleVariants.length > 1 ? visibleIndex : index,
),
background: getChartColor(colorIndex),
}}
/>
<div className="col flex-1 gap-1">
<div className="col flex-1 gap-1 min-w-0">
<div className="flex items-center gap-1">
<ChartName breakdowns={variant.breakdowns ?? []} />
</div>
<div className="flex justify-between gap-8 font-mono font-medium">
<div className="col gap-1">
<div className="flex items-center justify-between gap-4 font-mono font-medium">
<div className="col gap-0.5">
<span>
{number.formatWithUnit(variant.step.percent / 100, '%')}
</span>
<span className="text-muted-foreground">
<span className="text-muted-foreground text-xs">
({number.format(variant.step.count)})
</span>
</div>
@@ -569,8 +748,9 @@ const { Tooltip, TooltipProvider } = createChartTooltip<
<PreviousDiffIndicatorPure
{...getPreviousMetric(
variant.step.percent,
prevVariant?.step.percent,
prevVariant?.step.percent
)}
size="xs"
/>
</div>
</div>