"use client";

import { DonutWithTotal, type DonutSlice } from "./index";

export interface DemoProps {
  accent?: string;
  caption?: string;
  holeRatio?: number;
  hueRange?: number;
  countUp?: boolean;
}

const SESSIONS: DonutSlice[] = [
  { label: "Organic search", value: 7420 },
  { label: "Direct", value: 4310 },
  { label: "Referral", value: 3005 },
  { label: "Social", value: 2380 },
  { label: "Email", value: 1425 },
];

/** Demo props mirror meta.json controls; defaults must match the control defaults. */
export default function Demo({ accent = "#9BE15D", caption = "Sessions", holeRatio = 0.58, hueRange = 90, countUp = true }: DemoProps) {
  return (
    <div className="flex w-full justify-center p-6">
      <div className="w-full max-w-[320px]">
        <DonutWithTotal data={SESSIONS} accent={accent} caption={caption} holeRatio={holeRatio} hueRange={hueRange} countUp={countUp} />
      </div>
    </div>
  );
}

1d:T3452, 1e:T2d023,

<script setup lang="ts">
import { computed, onBeforeUnmount, onMounted, ref } from "vue";

interface DonutSlice {
  label: string;
  value: number;
}

const props = withDefaults(
  defineProps<{
    data?: DonutSlice[];
    title?: string;
    period?: string;
    caption?: string;
    accent?: string;
    holeRatio?: number;
    hueRange?: number;
    countUp?: boolean;
  }>(),
  {
    title: "Traffic sources",
    period: "Last 30 days",
    caption: "Sessions",
    accent: "#9BE15D",
    holeRatio: 0.58,
    hueRange: 90,
    countUp: true,
  },
);

const SAMPLE: DonutSlice[] = [
  { label: "Organic search", value: 7420 },
  { label: "Direct", value: 4310 },
  { label: "Referral", value: 3005 },
  { label: "Social", value: 2380 },
  { label: "Email", value: 1425 },
];

const VB = 200;
const CENTER = VB / 2;
const OUTER_R = 84;
const GAP_PX = 4;
const PLOT_PX = 208;

function hexToHsl(hex: string): { h: number; s: number; l: number } {
  const m = /^#?([0-9a-f]{6})$/i.exec(hex.trim());
  if (!m) return { h: 100, s: 55, l: 55 };
  const n = parseInt(m[1], 16);
  const r = ((n >> 16) & 255) / 255;
  const g = ((n >> 8) & 255) / 255;
  const b = (n & 255) / 255;
  const max = Math.max(r, g, b);
  const min = Math.min(r, g, b);
  const l = (max + min) / 2;
  let h = 0;
  let s = 0;
  if (max !== min) {
    const d = max - min;
    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
    if (max === r) h = (g - b) / d + (g < b ? 6 : 0);
    else if (max === g) h = (b - r) / d + 2;
    else h = (r - g) / d + 4;
    h *= 60;
  }
  return { h, s: s * 100, l: l * 100 };
}

function sliceColors(accent: string, count: number, hueRange: number): string[] {
  const { h, s, l } = hexToHsl(accent);
  const sat = Math.min(Math.max(s, 48), 92);
  const light = Math.min(Math.max(l, 44), 64);
  if (count <= 1) return [accent];
  const step = hueRange / (count - 1);
  return Array.from({ length: count }, (_, i) => {
    const hue = (h - hueRange / 2 + step * i + 360) % 360;
    return `hsl(${hue.toFixed(1)} ${sat.toFixed(0)}% ${light.toFixed(0)}%)`;
  });
}

function fmt(v: number): string {
  const whole = Math.round(Math.abs(v)).toString();
  return `${v < 0 ? "-" : ""}${whole.replace(/\B(?=(\d{3})+(?!\d))/g, ",")}`;
}

function easeOutCubic(t: number): number {
  return 1 - Math.pow(1 - t, 3);
}

/** Drives a value from `from` to `to` over `duration` ms, calling back each frame. */
function tween(from: number, to: number, duration: number, onUpdate: (v: number) => void): () => void {
  const start = performance.now();
  let raf = 0;
  const frame = (now: number) => {
    const t = Math.min((now - start) / duration, 1);
    onUpdate(from + (to - from) * easeOutCubic(t));
    if (t < 1) raf = requestAnimationFrame(frame);
  };
  raf = requestAnimationFrame(frame);
  return () => cancelAnimationFrame(raf);
}

const rows = computed<DonutSlice[]>(() => (props.data && props.data.length ? props.data : SAMPLE));
const total = computed(() => rows.value.reduce((sum, d) => sum + Math.max(d.value, 0), 0));
const reduce = ref(false);

const progress = ref(0);
const displayed = ref(0);
const hovered = ref<number | null>(null);
const focused = ref<number | null>(null);
const activeIndex = computed(() => (hovered.value ?? focused.value));
const circleRefs: Array<SVGCircleElement | null> = [];
let cancelTween: (() => void) | null = null;
let firstActiveChange = true;

function setCircleRef(i: number, el: Element | null) {
  circleRefs[i] = (el as SVGCircleElement | null) ?? null;
}

function focusSelf(e: Event) {
  (e.currentTarget as SVGCircleElement).focus();
}

const colors = computed(() => sliceColors(props.accent, rows.value.length, props.hueRange));
const innerR = computed(() => OUTER_R * Math.min(Math.max(props.holeRatio, 0.2), 0.85));
const strokeW = computed(() => OUTER_R - innerR.value);
const midR = computed(() => (OUTER_R + innerR.value) / 2);
const circumference = computed(() => 2 * Math.PI * midR.value);

const segs = computed(() => {
  let cum = 0;
  return rows.value.map((d, i) => {
    const frac = total.value > 0 ? Math.max(d.value, 0) / total.value : 0;
    const start = cum;
    cum += frac;
    return { ...d, frac, start, end: cum, color: colors.value[i] ?? props.accent };
  });
});

/** Per-segment dash geometry, recomputed as `progress` sweeps the ring open on mount. */
const drawSegs = computed(() => {
  const c = circumference.value;
  return segs.value.map((s) => {
    const fullLen = Math.max(c * s.frac - GAP_PX, 0);
    const visible = s.frac > 0 ? Math.max(0, Math.min(s.end, progress.value) - s.start) / s.frac : 0;
    return { ...s, dashArray: `${fullLen * visible} ${c}`, dashOffset: -(s.start * c) - GAP_PX / 2 };
  });
});

const focusRing = computed(() => {
  if (focused.value === null) return null;
  const s = segs.value[focused.value];
  const c = circumference.value;
  return { dashArray: `${Math.max(c * s.frac - GAP_PX, 0)} ${c}`, dashOffset: -(s.start * c) - GAP_PX / 2 };
});

function runMount() {
  if (reduce.value) {
    progress.value = 1;
    displayed.value = total.value;
    return;
  }
  cancelTween = tween(0, 1, 1150, (v) => {
    progress.value = v;
    if (props.countUp) displayed.value = Math.round(v * total.value);
  });
  if (!props.countUp) displayed.value = total.value;
}

function onActiveChange() {
  if (firstActiveChange) {
    firstActiveChange = false;
    return;
  }
  const target = activeIndex.value === null ? total.value : rows.value[activeIndex.value].value;
  cancelTween?.();
  if (reduce.value || !props.countUp) {
    displayed.value = target;
    return;
  }
  const from = displayed.value;
  cancelTween = tween(from, target, 400, (v) => {
    displayed.value = Math.round(v);
  });
}

function setHovered(i: number | null) {
  hovered.value = i;
  onActiveChange();
}
function setFocused(i: number | null) {
  focused.value = i;
  onActiveChange();
}

function stepFocus(dir: number) {
  const n = rows.value.length;
  if (n === 0) return;
  const cur = focused.value ?? 0;
  circleRefs[(cur + dir + n) % n]?.focus();
}

function onKeydown(e: KeyboardEvent) {
  if (e.key === "ArrowRight" || e.key === "ArrowDown") {
    e.preventDefault();
    stepFocus(1);
  } else if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
    e.preventDefault();
    stepFocus(-1);
  } else if (e.key === "Escape") {
    circleRefs[focused.value ?? 0]?.blur();
  }
}

const activeCaption = computed(() => (activeIndex.value === null ? props.caption : rows.value[activeIndex.value].label));
const totalText = computed(() => fmt(displayed.value));
const settledValue = computed(() => (activeIndex.value === null ? total.value : rows.value[activeIndex.value].value));
const settled = computed(() => Math.round(displayed.value) === settledValue.value);
const announcement = computed(() => {
  if (!settled.value) return "";
  if (activeIndex.value === null) return `${fmt(total.value)} ${props.caption}`;
  const row = rows.value[activeIndex.value];
  return `${row.label}, ${fmt(row.value)} ${props.caption.toLowerCase()}`;
});
const numSize = computed(() => {
  const holePx = PLOT_PX * (innerR.value / OUTER_R);
  let size = Math.round(holePx * 0.34);
  if (totalText.value.length * size * 0.6 > holePx * 0.82) size = Math.round(size * 0.76);
  return size;
});
const ariaSummary = computed(
  () => `${props.title}, ${fmt(total.value)} ${props.caption.toLowerCase()} total. ${rows.value.map((d) => `${d.label} ${fmt(d.value)}`).join(", ")}.`,
);

onMounted(() => {
  reduce.value = window.matchMedia?.("(prefers-reduced-motion: reduce)")?.matches ?? false;
  runMount();
});
onBeforeUnmount(() => cancelTween?.());
</script>

<template>
  <div class="dwt-card">
    <div class="dwt-head">
      <h3 class="dwt-title">{{ title }}</h3>
      <span class="dwt-period">{{ period }}</span>
    </div>

    <p class="dwt-sr">{{ ariaSummary }}</p>

    <div class="dwt-plot">
      <svg class="dwt-svg" :viewBox="`0 0 ${VB} ${VB}`" role="group" :aria-label="`${title} donut chart`" @keydown="onKeydown">
        <g :transform="`rotate(-90 ${CENTER} ${CENTER})`">
          <circle class="dwt-track" :cx="CENTER" :cy="CENTER" :r="midR" fill="none" :stroke-width="strokeW" />
          <circle
            v-if="focusRing"
            class="dwt-focus-ring"
            aria-hidden="true"
            :cx="CENTER"
            :cy="CENTER"
            :r="midR + strokeW / 2 + 5"
            fill="none"
            stroke-width="2"
            stroke-linecap="round"
            :stroke-dasharray="focusRing.dashArray"
            :stroke-dashoffset="focusRing.dashOffset"
          />
          <circle
            v-for="(s, i) in drawSegs"
            :key="s.label"
            :ref="(el) => setCircleRef(i, el)"
            class="dwt-arc"
            role="button"
            :tabindex="(focused ?? 0) === i ? 0 : -1"
            :aria-label="`${s.label}, ${fmt(s.value)} ${caption.toLowerCase()}, ${Math.round(s.frac * 100)} percent`"
            :cx="CENTER"
            :cy="CENTER"
            :r="midR"
            fill="none"
            :stroke="s.color"
            :stroke-width="activeIndex === i ? strokeW + 6 : strokeW"
            stroke-linecap="butt"
            :stroke-dasharray="s.dashArray"
            :stroke-dashoffset="s.dashOffset"
            :style="{ opacity: activeIndex !== null && activeIndex !== i ? 0.4 : 1 }"
            @mouseenter="setHovered(i)"
            @mouseleave="hovered === i && setHovered(null)"
            @focus="setFocused(i)"
            @blur="focused === i && setFocused(null)"
            @click="focusSelf"
          />
        </g>
      </svg>

      <div class="dwt-readout" aria-hidden="true">
        <span class="dwt-total" :style="{ fontSize: `${numSize}px` }">{{ totalText }}</span>
        <span class="dwt-caption">{{ activeCaption }}</span>
      </div>
      <span class="dwt-sr" aria-live="polite" aria-atomic="true">{{ announcement }}</span>
    </div>

    <ul class="dwt-legend">
      <li v-for="(s, i) in segs" :key="s.label" class="dwt-legend-item" :style="{ opacity: activeIndex !== null && activeIndex !== i ? 0.5 : 1 }">
        <span class="dwt-dot" :style="{ background: s.color }" />
        <span class="dwt-legend-label">{{ s.label }}</span>
        <span class="dwt-legend-value">{{ fmt(s.value) }}</span>
      </li>
    </ul>
  </div>
</template>

<style scoped>
.dwt-card {
  box-sizing: border-box;
  width: 100%;
  padding: 1.25rem;
  border: 1px solid rgb(0 0 0 / 0.1);
  border-radius: 1rem;
  background: #fcfcfd;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
  font-family: system-ui, sans-serif;
  --dwt-track: rgb(15 23 42 / 0.08);
  --dwt-focus: rgb(15 23 42 / 0.55);
}
@media (prefers-color-scheme: dark) {
  .dwt-card {
    border-color: rgb(255 255 255 / 0.1);
    background: rgb(255 255 255 / 0.04);
    box-shadow: inset 0 1px 0 0 rgb(255 255 255 / 0.07);
    --dwt-track: rgb(255 255 255 / 0.12);
    --dwt-focus: rgb(255 255 255 / 0.85);
  }
}
.dwt-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}
.dwt-title {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: #1e293b;
}
@media (prefers-color-scheme: dark) {
  .dwt-title {
    color: #fff;
  }
}
.dwt-period {
  font-size: 11px;
  color: rgb(148 163 184 / 0.9);
}
@media (prefers-color-scheme: dark) {
  .dwt-period {
    color: rgb(255 255 255 / 0.4);
  }
}
.dwt-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.dwt-plot {
  position: relative;
  width: 100%;
  max-width: 208px;
  margin: 1rem auto 0;
  aspect-ratio: 1 / 1;
}
.dwt-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.dwt-track {
  stroke: var(--dwt-track);
}
.dwt-focus-ring {
  stroke: var(--dwt-focus);
}
.dwt-arc {
  cursor: pointer;
  outline: none;
  transition:
    stroke-width 180ms ease,
    opacity 180ms ease;
}
.dwt-readout {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
}
.dwt-total {
  line-height: 1;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #0f172a;
}
@media (prefers-color-scheme: dark) {
  .dwt-total {
    color: #fff;
  }
}
.dwt-caption {
  margin-top: 0.375rem;
  font-size: 11px;
  color: rgb(148 163 184 / 0.9);
}
@media (prefers-color-scheme: dark) {
  .dwt-caption {
    color: rgb(255 255 255 / 0.45);
  }
}
.dwt-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  column-gap: 1rem;
  row-gap: 0.375rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}
.dwt-legend-item {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 11px;
  transition: opacity 180ms ease;
}
.dwt-dot {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  border-radius: 9999px;
}
.dwt-legend-label {
  color: #475569;
}
@media (prefers-color-scheme: dark) {
  .dwt-legend-label {
    color: rgb(255 255 255 / 0.7);
  }
}
.dwt-legend-value {
  color: rgb(148 163 184 / 0.9);
  font-variant-numeric: tabular-nums;
}
@media (prefers-color-scheme: dark) {
  .dwt-legend-value {
    color: rgb(255 255 255 / 0.35);
  }
}
@media (prefers-reduced-motion: reduce) {
  .dwt-arc {
    transition-duration: 1ms;
  }
}
</style>

Traffic sources

Nearby

Traffic sources