Design a horizontal funnel visualization that dynamically displays summary statistics with distinct user activity segments represented by vertical colored bands. The bands should be color-coded based on recency: the brightest for the last message within 24 hours, slightly dimmer for messages within the past week, further dimmer for messages within the past month, and the darkest for older messages beyond a month. The pipeline stages should be visually separated by different colors that blend seamlessly through smooth gradients. Provide two implementations of this funnel: one utilizing HTML Canvas and the other using SVG. Emphasize clarity in the visual distinctions and smooth color transitions while maintaining a focus on accessibility and responsiveness.
Pipeline stages:
Activated
Onboarding
Checkout
Started trial
Paid
Now let me read the existing project files to understand the current setup.
Now let me set up the task list and build this step by step.
Now update the @theme inline block to match:
Now let me build the summary stats component and the legend, then the main page that ties everything together.
Now let me build the main page:
Now let me update the layout metadata and ensure the dark theme is applied:
The funnel visualization dashboard is complete. Here's what was built:
Two implementations of the horizontal pipeline funnel (Canvas and SVG) that can be toggled via the tab buttons at the top. Both render the 5 pipeline stages (Activated through Paid) as a flowing, organic shape that narrows left-to-right, with 4 nested recency bands color-coded from brightest cyan (last 24h) to deepest purple (older than a month). Each band uses smooth bezier curves for seamless gradient-like transitions between stages. The Canvas version includes an animated entrance, and both show interactive tooltips on hover with per-segment breakdowns. Full accessibility is covered through ARIA labels, screen-reader-only data tables, and keyboard-navigable tab controls. Below the funnel, a legend identifies the recency colors, conversion rate pills show stage-to-stage drop-off percentages, and a summary card displays monthly/yearly revenue stats with regional breakdowns matching the reference design.