People analytics

import { DonutChart, HistogramChart, LegendItem, TreemapChart } from "@nexera-ui/react";

// 248 people at Northwind, counted three ways.
const DEPARTMENTS = [
  {
    name: "Engineering",
    children: [
      { name: "Platform", value: 34 },
      { name: "Product engineering", value: 31 },
      { name: "Data", value: 15 },
      { name: "QA", value: 12 },
    ],
  },
  {
    name: "Customer",
    children: [
      { name: "Support", value: 28 },
      { name: "Success", value: 18 },
    ],
  },
  {
    name: "Sales",
    children: [
      { name: "Enterprise", value: 22 },
      { name: "Mid-market", value: 16 },
    ],
  },
  { name: "Product", value: 18 },
  { name: "People Ops", value: 16 },
  { name: "Design", value: 14 },
  { name: "Finance", value: 12 },
  { name: "Marketing", value: 12 },
];

const TYPES = [
  { name: "Full-time", value: 212 },
  { name: "Part-time", value: 14 },
  { name: "Contractor", value: 22 },
];

// People per year of tenure (0-1, 1-2, ... 8+), spread evenly inside each year.
const TENURE_COUNTS = [52, 48, 41, 33, 26, 18, 12, 8, 10];
const TENURES = TENURE_COUNTS.flatMap((count, year) =>
  Array.from({ length: count }, (_, i) => year + (i + 0.5) / count),
);

const ARRANGEMENT = [
  { label: "Hybrid", value: 104, bar: "bg-chart-1" },
  { label: "Office", value: 96, bar: "bg-chart-2" },
  { label: "Remote", value: 48, bar: "bg-chart-3" },
];
const TOTAL = 248;
const share = new Intl.NumberFormat("en-US", { style: "percent", maximumFractionDigits: 0 });

/** People analytics: headcount by department and team, by employment type, by tenure and by work arrangement. */
export default function PeopleAnalytics() {
  return (
    <div className="@container bg-page px-4 py-8 @3xl:px-8">
      <div className="mx-auto grid max-w-6xl gap-6">
        <header className="grid gap-1">
          <h2 className="text-heading-h2 text-primary">People analytics</h2>
          <p className="text-body-default text-secondary">
            {TOTAL} people at Northwind on 30 September 2026
          </p>
        </header>

        <TreemapChart
          title="Headcount by department"
          description="Teams are grouped inside their department"
          summary="Engineering is the largest department with 92 of 248 people; Platform is the largest team with 34."
          data={DEPARTMENTS}
          valueLabel="People"
          height={300}
        />

        <div className="grid gap-4 @3xl:grid-cols-2">
          <DonutChart
            title="Employment type"
            description="All departments"
            summary="212 of 248 people (85%) are full-time; 22 are contractors and 14 work part-time."
            slices={TYPES}
            centerLabel="People"
            valueLabel="People"
          />
          <HistogramChart
            title="Tenure"
            description="Years at Northwind"
            summary="Most people joined in the last three years; the median tenure is 2.6 years and 10 people have been here 8 years or more."
            values={TENURES}
            thresholds={[1, 2, 3, 4, 5, 6, 7, 8]}
            valueLabel="People"
            xAxisLabel="Years at Northwind"
            markers={[{ value: 2.6, label: "Median 2.6 yrs" }]}
          />
        </div>

        <section
          aria-labelledby="arrangement-title"
          className="grid gap-4 rounded-lg border border-default bg-surface p-4 @3xl:p-6"
        >
          <div className="grid gap-1">
            <h3 id="arrangement-title" className="text-heading-h4 text-primary">
              Work arrangement
            </h3>
            <p className="text-body-small text-muted">Where people chose to work this quarter</p>
          </div>
          <div aria-hidden="true" className="flex h-3 overflow-hidden rounded-full bg-sunken">
            {ARRANGEMENT.map((item) => (
              <div
                key={item.label}
                className={item.bar}
                style={{ width: `${(item.value / TOTAL) * 100}%` }}
              />
            ))}
          </div>
          <ul className="flex flex-wrap gap-x-6 gap-y-2">
            {ARRANGEMENT.map((item, index) => (
              <li key={item.label}>
                <LegendItem
                  label={item.label}
                  seriesIndex={index}
                  shape="square"
                  value={`${item.value} · ${share.format(item.value / TOTAL)}`}
                />
              </li>
            ))}
          </ul>
        </section>
      </div>
    </div>
  );
}