Calendar Chart

The calendar chart is composable. <BeeCalendarChart> is the container — pass a chartConfig whose keys match your utilization series. Map daily availableHours and assignedHours with prepareCalendarWorkloadCells(), then compose <Calendar /> with the resulting cells. Add <Tooltip /> and <Legend /> when you want the shared BeeCharts chrome.

import {
  BeeCalendarChart,
  Calendar,
  Tooltip,
  Legend,
} from "@/components/beecharts/charts/calendar-chart";
import { prepareCalendarWorkloadCells } from "@/lib/chart-recipes";

const workloadDays = [
  { date: "2025-06-02", availableHours: 8, assignedHours: 6.5 },
  { date: "2025-06-03", availableHours: 8, assignedHours: 9.5 },
  // …
];
 
const { cells, min, max, range } = prepareCalendarWorkloadCells(workloadDays);
 
const chartConfig = {
  utilization: {
    label: "Utilization",
    colors: {
      light: ["#ecfdf5", "#34d399", "#b45309", "#dc2626"],
      dark: ["#064e3b", "#34d399", "#fbbf24", "#f87171"],
    },
  },
} satisfies ChartConfig;
 
<BeeCalendarChart config={chartConfig} className="h-80 w-full">
  <Calendar
    dataKey="utilization"
    data={cells}
    range={range}
    min={min}
    max={max}
  />
  <Legend />
  <Tooltip />
</BeeCalendarChart>

Each cell's value is utilization % — assignedHours ÷ availableHours × 100. Values above 100 indicate overbooking. The tooltip shows assigned, available, and utilization for each day.

Managers typically monitor assigned hours vs available hours per period. Available comes from contracts, shifts, or PTO-adjusted capacity; assigned comes from project allocations, tickets, or scheduled work. Color encodes the ratio — not raw hours — so part-time and full-time staff are comparable.

Workload dashboard (wired)

KPI summary, view toggle (team week vs employee month), and employee filter — calendar and heatmap share the same utilization scale and demo data.

Employee workload (calendar)

One designer's June 2025 — weekday capacity 8h, weekends off. Green days are under capacity; amber/red days are at or above 100%.

Team workload (heatmap)

Same metric across five team members for one work week. Rows are people; columns are days. Use this when a manager needs to rebalance assignments before the week starts.

The chart is composed of a root container and declarative parts. Render the root, then compose the slots you need as children.

The root container. Owns chartConfig, the ECharts canvas, and the part registry that compiles calendar options.

Registers day cells and calendar layout with the ECharts compiler. Renders no DOM of its own.

Enables the shared BeeCharts HTML tooltip layer. Built-in formatter shows date, assigned hours, available hours, and utilization %.

Hides the built-in ECharts legend and reserves space for the shared BeeCharts legend chrome when composed.