Weekly cohort grid where each cell's opacity scales with the retention percentage in the tone color.
Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.
import { Dashboard12 } from "@/components/beste/piece/dashboard12";
<Dashboard12
heading="Retention"
cohorts={[
"W0",
"W1",
"W2",
"W3"
]}
weeks={[
"W0",
"W1",
"W2",
"W3",
"W4"
]}
retention={[
[
100,
64,
48,
41,
38
],
[
100,
71,
55,
46,
0
],
[
100,
68,
52,
0,
0
],
[
100,
74,
0,
0,
0
]
]}
tone="violet"
/>Revenue split card with an SVG donut on the left showing weighted slices and a percentage legend on the right.
Side-by-side compare card with previous and current values separated by an arrow, and a semantic delta pill in the header.
Top-three ranking card with gold, silver, and bronze medal circles next to names and monospaced scores.
Target-tracking card with a target icon, current / goal values, a tone-colored progress bar, and a deadline footer.
Semi-circle gauge with a tone-colored arc that fills to the score, the number centered below, and a status line.
Three concentric SVG rings with their own progress levels and a matching legend of labels, values, and units.