Demand Forecasting

Model historical demand, apply growth assumptions, and compare forecast scenarios in one browser-based tool.

Overview

This app helps supply chain and planning teams project future demand from historical sales data. View historical and forecast quantities in an AG Grid, tune growth rate and seasonality assumptions, and switch between Base, Optimistic, and Pessimistic scenarios. Chart.js visualizations show demand trends and scenario totals; Excel import brings in external history. Everything runs in a single self-contained HTML page with data saved locally in your browser.

Key features

Historical & forecast grid

• AG Grid registry — Period, type (Historical / Forecast), historical quantity, forecast quantity, and variance vs last historical month.
• Two sample products — Widget Pro and Gadget Lite with 12 months of 2025 history each.
• Row styling — Historical and forecast rows are visually distinct.

Growth assumptions

• Alpine.js inputs — Base growth rate (%), seasonality index, and number of forecast periods.
• Live preview — Last historical average and next-month forecast update as you change assumptions.
• Recalculate — Regenerate forecasts from current settings and active scenario.

Scenarios & charts

• Three scenarios — Base (as entered), Optimistic (+5 pts growth), and Pessimistic (−5 pts growth).
• Demand trend chart — Line chart of historical vs forecast quantities for the selected product.
• Scenario comparison — Bar chart of total forecast quantity across all three scenarios.

Summary KPIs

• Total forecast — Sum of forecast periods for the active scenario.
• Historical total — Sum of all historical quantities for the selected product.
• YoY growth — Year-over-year or period-over-period growth percentage.
• Peak month — Period with the highest historical or forecast quantity.

Data management

• Import history — Upload Excel (`.xlsx`) with Product, Period, and Historical columns via SheetJS.
• localStorage — History, assumptions, product selection, and scenario persist across sessions.
• Reset data — Restore sample dataset with confirmation.
• Dark mode — Toggle light/dark theme; AG Grid and Chart.js adapt; preference is remembered.

Data & persistence

Sample data includes 24 historical rows (12 months × 2 products). Forecasts are generated from a rolling 3-month average with monthly compounding growth and Q4 seasonality uplift. State saves to `localStorage` under `demand-forecasting-data`.

Charts & reporting

The line chart connects historical data to the active scenario forecast. The bar chart compares total forecast volume across Base, Optimistic, and Pessimistic scenarios.

Built with

Tailwind CSS (CDN), AG Grid Community, Alpine.js, Chart.js, and SheetJS — all loaded from CDN in a single HTML file.

Try the interactive walkthrough below. Click Walk through features and use Next / Back (or arrow keys) to explore every feature.