EMS Schedule
A 24-hour timeline visualization for Energy Management System schedules.
Interactive Demo
Today's Schedule
00:0006:0012:0018:0024:00
Idle
Self-Consumption
Charging
Exporting
Discharging
Adjust Current Hour
14:00
Schedule Modes
Idle
System is inactive, no energy management
Self-Consumption
Maximize use of self-generated solar power
Charging
Battery charging from grid (low price hours)
Exporting
Exporting excess solar to grid
Discharging
Battery discharge during peak prices
Features
- 24-hour timeline visualization
- 5 schedule modes with distinct colors
- Current hour indicator with ring highlight
- Optional legend display
- Hover tooltips showing hour and mode
- Dark mode support
- Customizable title
Usage
import { EMSSchedule, generateDemoSchedule } from "@/components/ui/ems-schedule"
// Basic usage with generated demo data
<EMSSchedule
slots={generateDemoSchedule()}
currentHour={14}
title="Today's Schedule"
/>
// Custom schedule
<EMSSchedule
slots={[
{ hour: 0, mode: "charging" },
{ hour: 6, mode: "self-consumption" },
{ hour: 12, mode: "exporting" },
{ hour: 18, mode: "discharging" },
]}
currentHour={new Date().getHours()}
showLegend={true}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| slots | ScheduleSlot[] | - | Array of schedule slots with hour and mode |
| currentHour | number | - | Current hour to highlight (0-23) |
| showLegend | boolean | true | Whether to show the legend |
| title | string | "Schedule" | Card title |
| className | string | - | Additional CSS classes |