A marketing-attribution chart that splits conversion credit across touchpoints and lets you switch between first-touch, last-touch, linear, time-decay and position-based models.
"use client";
import { Attribution, type Journey } from "@/components/ui/attribution";
const JOURNEYS: Journey[] = Array.from({ length: 40 }, (_, index) => {
const paths = [
["Organic search", "Email", "Direct"],
["Paid search", "Direct"],
["Social", "Organic search", "Email", "Direct"],
["Referral", "Paid search", "Direct"],
["Email", "Direct"],
["Organic search", "Direct"],
];
const path = paths[index % paths.length];
const base = new Date("2026-03-01T09:00:00").getTime();
return {
id: `j${index}`,
value: 100 + (index % 7) * 45,
touchpoints: path.map((channel, step) => ({
channel,
at: new Date(base + index * 86_400_000 + step * 36_000_000),
})),
};
});
export default function AttributionDemo() {
return (
<div className="flex w-full max-w-xl items-center justify-center p-6">
<Attribution
className="w-full"
journeys={JOURNEYS}
valueFormat={(value) => `$${value.toFixed(0)}`}
/>
</div>
);
}