shadcn.io is not affiliated with official shadcn/ui
Comparison Timeline Block for React
Two migration plans on one vertical week axis, Big bang beside a chosen alternative (Phased or Pilot first), with phases as bars, a counterpart highlight on press and derived finish week, effort and downtime.
Installation
Overview
Put two plans side by side on one calendar with this comparison timeline for React with Base UI. It is written for Twinplan, a fictional migration planner. A hairline frame with a plus mark on each corner holds one axis of eight weeks down the centre, W1 to W8 with their dates. "Big bang" sits at the start of it, and at the end sits the plan you compare it with, chosen by two radio buttons, "Phased" or "Pilot first"; each phase is a bar that spans its weeks and says how many people work on it. Pressing a phase lights it and its counterpart in the other plan, or says it has none, as in "Cutover has no counterpart in Phased". Under the figure a list of facts is worked out from the phases for both plans: the week it finishes, the effort in person-weeks and the days of downtime. The figure and the facts keep their height for either choice. It is built from Guides, native radio buttons and buttons, with a CSS entrance and your theme's tokens for every colour. For migration plans, scenario planning and any decision between two schedules. The plans are example data.
FAQ
How do I change the plans?
Edit BIG_BANG, PHASED and PILOT at the top of the file. A phase has an id, a name, a kind, the from and to week, the number of people and the downtime in days. Phases of the same kind in two plans are counterparts, so give them the same kind to pair them. To add a plan, write one more constant and put it in PLANS; the radio buttons follow.
How are the facts worked out?
From the phases only. The finish week is the latest to, the effort is the sum of people times weeks for each phase, and the downtime is the sum of each phase's downtime. Change a phase and every figure moves with it.
How does the counterpart highlight work?
Pressing a phase finds the phase of the other plan with the same kind and presses it too, so both are drawn in the strong style and both report as pressed. If there is none, the status line says so. Press the same phase again to clear it. Changing the compared plan clears the selection.
Is it accessible?
The two plans are named by their headings and the radio group has a legend, "Compare with". Each phase is a button with its name and people count, and its pressed state is announced. The week axis is for sighted readers and is hidden from screen readers; the facts and the status line carry the same information in words.