Donut Chart

import { DonutChart } from "@smallest-inc/ui";

export default function DonutChartDefault() {
  return (
    <div className="w-full max-w-[556px]">
      <DonutChart
        title="Call outcomes"
        slices={[
          { id: "answered", label: "Answered", value: 1122, color: "#22C55E" },
          { id: "unanswered", label: "Unanswered", value: 214, color: "#CBD5E1" },
          { id: "cancelled", label: "Cancelled", value: 76, color: "#FACC15" },
          { id: "failed", label: "Failed", value: 38, color: "#F87171" },
        ]}
      />
    </div>
  );
}

import { useState } from "react";
import { DonutChart, type DonutChartSlice } from "@smallest-inc/ui";

const RANGES = [
  { id: "1d", label: "1D", secs: 86_400 },
  { id: "7d", label: "7D", secs: 604_800 },
  { id: "1m", label: "1M", secs: 2_592_000 },
];

/** Totals per range. In product, fetch these when the range changes. */
const CHANNELS: Record<string, DonutChartSlice[]> = {
  "1d": [
    { id: "inbound", label: "Inbound", value: 76, color: "#0069F5" },
    { id: "outbound", label: "Outbound", value: 50, color: "#8B5CF6" },
    { id: "callback", label: "Callback", value: 17, color: "#14B8A6" },
  ],
  "7d": [
    { id: "inbound", label: "Inbound", value: 420, color: "#0069F5" },
    { id: "outbound", label: "Outbound", value: 280, color: "#8B5CF6" },
    { id: "callback", label: "Callback", value: 95, color: "#14B8A6" },
  ],
  "1m": [
    { id: "inbound", label: "Inbound", value: 1344, color: "#0069F5" },
    { id: "outbound", label: "Outbound", value: 1120, color: "#8B5CF6" },
    { id: "callback", label: "Callback", value: 304, color: "#14B8A6" },
  ],
};

export default function DonutChartRanges() {
  const [range, setRange] = useState("7d");

  return (
    <div className="w-full max-w-[556px]">
      <DonutChart
        title="Call channels"
        slices={CHANNELS[range]}
        ranges={RANGES}
        rangeId={range}
        onRangeChange={setRange}
      />
    </div>
  );
}