Component Lead Time Planner¶
Specification¶
The full specification below is extracted from Chapter 19: Budgeting, Sourcing, and Classroom Logistics.
Type: timeline
**sim-id:** component-lead-time-planner<br/>
**Library:** vis-timeline<br/>
**Status:** Specified
Learning objective: Students will *evaluate* (Bloom L5: Evaluate) sourcing options based on lead time to decide when a classroom order must be placed relative to a unit's start date.
Canvas: 700x320px, responsive — vis-timeline's built-in responsive container sizing combined with a `window.addEventListener('resize', () => timeline.redraw())` call.
Layout: a horizontal timeline with "today" marked at the left edge and a fixed "Unit Start Date" marker (configurable, default 6 weeks out) drawn as a vertical reference line. Four horizontal bands, one per sourcing option, each drawn as a colored bar starting at "today" and extending for that option's typical lead time: "Manufacturer direct (in shortage)" (8-10 weeks), "Manufacturer direct (normal)" (2-3 weeks), "Specialized distributor" (1-2 weeks), "General marketplace" (2-5 days).
Controls: a `<input type="range">` HTML slider labeled "Weeks Until Unit Start" (range 1-12, default 6) that moves the "Unit Start Date" reference line.
Interaction: any sourcing band whose bar extends past the current "Unit Start Date" line is automatically highlighted in a warning color (matching the book's warning-admonition tone) with a small icon reading "Order now or choose a faster option," recalculated live as the slider moves. Clicking any band opens an infobox with a one-sentence description of that sourcing option, matched to the vendor comparison table earlier in the chapter.
Implementation: vis-timeline `DataSet` of four range items with `start` fixed at "today" and `end` computed from each option's lead time in days. Recompute the "Unit Start Date" reference line's `Date` object whenever the slider changes, and recheck each band's end date against it to toggle the warning style.