Radial Chart

"use client";
import * as Chart from "@kind-ui/charts";
import "@kind-ui/charts/styles.css";

const data = [
  { period: "Design", label: "Design 92%", progress: 92 },
  { period: "Build", label: "Build 76%", progress: 76 },
  { period: "Review", label: "Review 58%", progress: 58 },
];
const config = {
  Design: { label: "Design", color: "#733bff", formatValue: (value: unknown) => `${value}%` },
  Build: { label: "Build", color: "#008b83", formatValue: (value: unknown) => `${value}%` },
  Review: { label: "Review", color: "#b85c13", formatValue: (value: unknown) => `${value}%` },
} satisfies Chart.SeriesConfig;

export function ProjectProgressChart() {
  return (
    <Chart.Root config={config}>
      <Chart.ResponsiveContainer width="100%" height={280}>
        <Chart.RadialBarChart
          data={data}
          categoryKey="period"
          animate
          animationDirection="clockwise"
          startAngle={90}
          endAngle={-270}
          innerRadius="18%"
          outerRadius="94%"
          barCategoryGap="4%"
          aria-label="Project completion: Design 92%, Build 76%, Review 58%"
        >
          <Chart.PolarAngleAxis type="number" domain={[0, 100]} tick={false} />
          <Chart.PolarRadiusAxis type="category" dataKey="period" tick={false} axisLine={false} />
          <Chart.RadialBarSeries
            dataKey="progress"
            background={{ fill: "#e9e5f1" }}
            cornerRadius={5}
          >
            <Chart.LabelList
              fill="white"
              dataKey="label"
              content={<Chart.RadialBarLabel fontSize={11} />}
            />
          </Chart.RadialBarSeries>
          <Chart.Tooltip itemKey={(entry) => String(entry.payload?.period ?? entry.name)} />
        </Chart.RadialBarChart>
      </Chart.ResponsiveContainer>
    </Chart.Root>
  );
}

"use client";
import * as Chart from "@kind-ui/charts";
import "@kind-ui/charts/styles.css";

const data = [
  { key: "move", value: 350, domain: [0, 500] as const },
  { key: "exercise", value: 30, domain: [0, 60] as const },
  { key: "stand", value: 9, domain: [0, 12] as const },
];
const config = {
  move: { label: "Move", color: "#e02266", formatValue: (value: unknown) => `${value} kcal` },
  exercise: {
    label: "Exercise",
    color: "#327448",
    formatValue: (value: unknown) => `${value} min`,
  },
  stand: { label: "Stand", color: "#2469d4", formatValue: (value: unknown) => `${value} hours` },
} satisfies Chart.SeriesConfig;

export function DailyActivityChart() {
  return <Chart.ActivityRings rings={data} config={config} aria-label="Daily activity" />;
}

"use client";
import * as Chart from "@kind-ui/charts";
import "@kind-ui/charts/styles.css";

const data = [{ period: "Storage", used: 72 }];
const config = {
  used: {
    label: "Used storage",
    color: "#008b83",
    formatValue: (value: unknown) => `${value} of 100 GB`,
  },
} satisfies Chart.SeriesConfig;

export function StorageGaugeChart({
  direction = "clockwise",
}: {
  direction?: "clockwise" | "anticlockwise";
}) {
  return (
    <Chart.Root config={config}>
      <Chart.ResponsiveContainer width="100%" height={280}>
        <Chart.RadialBarChart
          key={direction}
          data={data}
          animate={{ revealDurationMs: 1200 }}
          animationDirection={direction}
          startAngle={180}
          endAngle={0}
          cy="72%"
          innerRadius="62%"
          outerRadius="92%"
          barCategoryGap="10%"
          aria-label="Storage capacity: 72 of 100 GB used, 28 GB available"
        >
          <Chart.PolarAngleAxis type="number" domain={[0, 100]} tick={false} />
          <Chart.PolarRadiusAxis type="category" dataKey="period" tick={false} axisLine={false}>
            <Chart.Label
              value={data[0].used}
              content={({ viewBox }) => {
                if (!viewBox || !("cx" in viewBox)) return null;
                return (
                  <text x={viewBox.cx} y={viewBox.cy - 28} textAnchor="middle" fill="currentColor">
                    <tspan x={viewBox.cx} fontSize={28} fontWeight={650}>
                      72 GB
                    </tspan>
                    <tspan x={viewBox.cx} dy={24} fontSize={12}>
                      of 100 GB used
                    </tspan>
                  </text>
                );
              }}
            />
          </Chart.PolarRadiusAxis>
          <Chart.RadialBarSeries dataKey="used" background={{ fill: "#dfeeea" }} cornerRadius={6} />
          <Chart.Tooltip />
        </Chart.RadialBarChart>
      </Chart.ResponsiveContainer>
    </Chart.Root>
  );
}

"use client";
import * as Chart from "@kind-ui/charts";
import "@kind-ui/charts/styles.css";
import { useState } from "react";

const data = [{ period: "October", committed: 64, reserved: 22 }];
const config = {
  committed: {
    label: "Committed",
    color: "#733bff",
    formatValue: (value: unknown) => `${value} hours`,
  },
  reserved: {
    label: "Reserved",
    color: "#008b83",
    formatValue: (value: unknown) => `${value} hours`,
  },
} satisfies Chart.SeriesConfig;

export function TeamCapacityChart() {
  const [visible, setVisible] = useState<string[]>(["committed", "reserved"]);
  return (
    <Chart.Root config={config} visibleSeries={visible} onVisibleSeriesChange={setVisible}>
      <Chart.Legend aria-label="Capacity allocation" />
      <Chart.ResponsiveContainer width="100%" height={280}>
        <Chart.RadialBarChart
          data={data}
          animate
          startAngle={210}
          endAngle={-30}
          innerRadius="62%"
          outerRadius="90%"
          barCategoryGap="10%"
          aria-label="October team capacity: 64 hours committed and 22 reserved out of 100 hours"
        >
          <Chart.PolarAngleAxis type="number" domain={[0, 100]} tick={false} />
          <Chart.PolarRadiusAxis type="category" dataKey="period" tick={false} axisLine={false} />
          <Chart.RadialBarSeries
            dataKey="committed"
            stackId="capacity"
            background={{ fill: "#e9e5f1" }}
          />
          <Chart.RadialBarSeries dataKey="reserved" stackId="capacity" />
          <Chart.Tooltip />
        </Chart.RadialBarChart>
      </Chart.ResponsiveContainer>
    </Chart.Root>
  );
}