"use client";

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

const DATA: DonutSlice[] = [
  { label: "Organic search", value: 18400 },
  { label: "Direct", value: 9600 },
  { label: "Paid social", value: 5200 },
  { label: "Referral", value: 3100 },
  { label: "Email", value: 1700 },
];

export interface DemoProps {
  accent?: string;
  hueRange?: number;
  holeRatio?: number;
  gap?: number;
  showTooltip?: boolean;
}

/** Demo props mirror meta.json controls; defaults must match the control defaults. */
export default function Demo({ accent = "#FF6A1F", hueRange = 90, holeRatio = 0.55, gap = 2, showTooltip = true }: DemoProps) {
  return (
    <div className="flex w-full items-center justify-center p-6">
      <DonutShareChart
        data={DATA}
        title="Traffic by source"
        caption="Last 30 days"
        accent={accent}
        hueRange={hueRange}
        holeRatio={holeRatio}
        gap={gap}
        showTooltip={showTooltip}
      />
    </div>
  );
}

1d:T398b, 1e:T3361e,

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

interface DonutSlice {
  label: string;
  value: number;
}
interface Slice extends DonutSlice {
  a0: number;
  a1: number;
  color: string;
  share: number;
}

const VB = 240;
const CENTER = VB / 2;
const OUTER_R = 94;
const WIDEN = 5;
const SWEEP_MS = 800;

const DATA: DonutSlice[] = [
  { label: "Organic search", value: 18400 },
  { label: "Direct", value: 9600 },
  { label: "Paid social", value: 5200 },
  { label: "Referral", value: 3100 },
  { label: "Email", value: 1700 },
];

const props = withDefaults(
  defineProps<{
    accent?: string;
    hueRange?: number;
    holeRatio?: number;
    gap?: number;
    showTooltip?: boolean;
  }>(),
  { accent: "#FF6A1F", hueRange: 90, holeRatio: 0.55, gap: 2, showTooltip: true },
);

function alpha(hex: string, a: number): string {
  const m = /^#?([0-9a-f]{6})$/i.exec(hex.trim());
  if (!m) return hex;
  const n = parseInt(m[1], 16);
  return `rgba(${(n >> 16) & 255}, ${(n >> 8) & 255}, ${n & 255}, ${a})`;
}
function hexToHsl(hex: string): { h: number; s: number; l: number } {
  const m = /^#?([0-9a-f]{6})$/i.exec(hex.trim());
  if (!m) return { h: 24, s: 100, l: 56 };
  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 hslToHex(h: number, s: number, l: number): string {
  const hue = ((h % 360) + 360) % 360;
  const sf = s / 100;
  const lf = l / 100;
  const c = (1 - Math.abs(2 * lf - 1)) * sf;
  const x = c * (1 - Math.abs(((hue / 60) % 2) - 1));
  const m = lf - c / 2;
  let seg: [number, number, number];
  if (hue < 60) seg = [c, x, 0];
  else if (hue < 120) seg = [x, c, 0];
  else if (hue < 180) seg = [0, c, x];
  else if (hue < 240) seg = [0, x, c];
  else if (hue < 300) seg = [x, 0, c];
  else seg = [c, 0, x];
  const toHex = (v: number) =>
    Math.round((v + m) * 255)
      .toString(16)
      .padStart(2, "0");
  return `#${toHex(seg[0])}${toHex(seg[1])}${toHex(seg[2])}`;
}
function fmt(v: number): string {
  return Math.round(Math.max(v, 0))
    .toString()
    .replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
function polar(r: number, deg: number): { x: number; y: number } {
  const rad = (deg * Math.PI) / 180;
  return { x: CENTER + r * Math.sin(rad), y: CENTER - r * Math.cos(rad) };
}
function arcPath(r: number, a0: number, a1: number): string {
  const p0 = polar(r, a0);
  const p1 = polar(r, a1);
  const large = a1 - a0 > 180 ? 1 : 0;
  const f = (v: number) => Math.round(v * 100) / 100;
  return `M ${f(p0.x)} ${f(p0.y)} A ${f(r)} ${f(r)} 0 ${large} 1 ${f(p1.x)} ${f(p1.y)}`;
}

const n = DATA.length;
const total = DATA.reduce((s, d) => s + Math.max(d.value, 0), 0);

const slices = computed<Slice[]>(() => {
  const ranked = [...DATA].sort((a, b) => b.value - a.value);
  const base = hexToHsl(props.accent);
  const steps = Math.max(ranked.length - 1, 1);
  const available = Math.max(360 - props.gap * ranked.length, 0);
  let cum = 0;
  return ranked.map((d, rank) => {
    const angle = total > 0 ? (Math.max(d.value, 0) / total) * available : available / Math.max(ranked.length, 1);
    const a0 = cum;
    const a1 = a0 + angle;
    cum = a1 + props.gap;
    const color = rank === 0 ? props.accent : hslToHex(base.h + (props.hueRange / steps) * rank, base.s, base.l);
    return { label: d.label, value: d.value, a0, a1, color, share: total > 0 ? Math.max(d.value, 0) / total : 0 };
  });
});

const holeFraction = computed(() => Math.min(Math.max(props.holeRatio, 0.05), 0.9));
const innerR = computed(() => OUTER_R * holeFraction.value);
const thickness = computed(() => Math.max(OUTER_R - innerR.value, 2));
const centerR = computed(() => (OUTER_R + innerR.value) / 2);

const hoverIndex = ref<number | null>(null);
const heldIndex = ref<number | null>(null);
const focusIndex = ref(0);
const reduce = ref(false);
const drawn = ref(false);
const pathEls = reactive<(SVGPathElement | null)[]>([]);

function setPathRef(i: number, el: unknown) {
  pathEls[i] = (el as SVGPathElement | null) ?? null;
}

const active = computed(() => hoverIndex.value ?? heldIndex.value);
const activeSlice = computed(() => (active.value !== null ? slices.value[active.value] : null));
const chipVisible = computed(() => !!activeSlice.value && props.showTooltip);
const top = computed(() => slices.value[0]);
const topPct = computed(() => (top.value ? Math.round(top.value.share * 100) : 0));
const liveText = computed(() => (chipVisible.value && activeSlice.value ? `${activeSlice.value.label}, ${fmt(activeSlice.value.value)}, ${(activeSlice.value.share * 100).toFixed(1)} percent` : ""));

function pathStyle(i: number, s: Slice) {
  const isActive = active.value === i;
  const dimmed = active.value !== null && !isActive;
  const len = Math.max((centerR.value * (s.a1 - s.a0) * Math.PI) / 180, 0.01);
  const delay = (s.a0 / 360) * SWEEP_MS;
  const dur = Math.max(((s.a1 - s.a0) / 360) * SWEEP_MS, 40);
  return {
    opacity: dimmed ? 0.35 : 1,
    strokeDasharray: `${len} ${len}`,
    strokeDashoffset: drawn.value ? 0 : len,
    transitionProperty: "stroke-dashoffset, stroke-width, opacity",
    transitionDuration: reduce.value ? "1ms, 1ms, 160ms" : `${dur}ms, 180ms, 180ms`,
    transitionDelay: reduce.value ? "0ms, 0ms, 0ms" : `${delay}ms, 0ms, 0ms`,
    transitionTimingFunction: "cubic-bezier(0.22,1,0.36,1), ease, ease",
  };
}
function strokeWidthFor(i: number): number {
  const isActive = active.value === i;
  return !reduce.value && isActive ? thickness.value + WIDEN * 2 : thickness.value;
}

function clearActive() {
  hoverIndex.value = null;
  heldIndex.value = null;
}
function moveFocus(next: number) {
  const idx = ((next % n) + n) % n;
  focusIndex.value = idx;
  heldIndex.value = idx;
  pathEls[idx]?.focus();
}
function onPointerEnter(e: PointerEvent, i: number) {
  if (e.pointerType === "mouse") hoverIndex.value = i;
}
function onPointerLeave(e: PointerEvent) {
  if (e.pointerType === "mouse") hoverIndex.value = null;
}
function onPointerDown(e: PointerEvent, i: number) {
  if (e.pointerType !== "mouse") {
    e.stopPropagation();
    focusIndex.value = i;
    heldIndex.value = i;
  }
}
function onFocusSlice(i: number) {
  focusIndex.value = i;
  heldIndex.value = i;
}
function onKeydownSlice(e: KeyboardEvent, i: number) {
  if (e.key === "ArrowRight" || e.key === "ArrowDown") {
    e.preventDefault();
    moveFocus(i + 1);
  } else if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
    e.preventDefault();
    moveFocus(i - 1);
  } else if (e.key === "Enter" || e.key === " ") {
    e.preventDefault();
    heldIndex.value = i;
  } else if (e.key === "Escape") {
    clearActive();
  }
}
function onGroupKeydown(e: KeyboardEvent) {
  if (e.key === "Escape") clearActive();
}
function onGroupFocusout(e: FocusEvent) {
  const related = e.relatedTarget as Node | null;
  const current = e.currentTarget as Node;
  if (!related || !current.contains(related)) hoverIndex.value = null;
}

let mq: MediaQueryList | undefined;
let raf1 = 0;
let raf2 = 0;

function onScheme() {
  reduce.value = !!mq?.matches;
}

onMounted(async () => {
  mq = window.matchMedia("(prefers-reduced-motion: reduce)");
  reduce.value = mq.matches;
  mq.addEventListener("change", onScheme);
  await nextTick();
  if (reduce.value) {
    drawn.value = true;
    return;
  }
  raf1 = requestAnimationFrame(() => {
    raf2 = requestAnimationFrame(() => {
      drawn.value = true;
    });
  });
});
onBeforeUnmount(() => {
  mq?.removeEventListener("change", onScheme);
  cancelAnimationFrame(raf1);
  cancelAnimationFrame(raf2);
});
</script>

<template>
  <div class="dsc">
    <div class="dsc__head">
      <h3 class="dsc__title">Traffic by source</h3>
      <p class="dsc__caption">Last 30 days</p>
    </div>

    <div
      class="dsc__plot"
      role="group"
      :aria-label="`Traffic by source donut chart, ${n} categories`"
      @click="clearActive"
      @keydown="onGroupKeydown"
      @focusout="onGroupFocusout"
    >
      <svg :viewBox="`0 0 ${VB} ${VB}`" class="dsc__svg">
        <path
          v-for="(s, i) in slices"
          :key="s.label"
          :ref="(el) => setPathRef(i, el)"
          :d="arcPath(centerR, s.a0, s.a1)"
          fill="none"
          :stroke="s.color"
          :stroke-width="strokeWidthFor(i)"
          stroke-linecap="butt"
          role="button"
          :tabindex="focusIndex === i ? 0 : -1"
          :aria-label="`${s.label}, ${fmt(s.value)}, ${(s.share * 100).toFixed(1)} percent`"
          :aria-pressed="active === i"
          class="dsc__arc"
          :style="pathStyle(i, s)"
          @pointerenter="onPointerEnter($event, i)"
          @pointerleave="onPointerLeave"
          @pointerdown="onPointerDown($event, i)"
          @focus="onFocusSlice(i)"
          @keydown="onKeydownSlice($event, i)"
        />
      </svg>

      <div v-if="innerR > 32" class="dsc__hole" :style="{ opacity: drawn || reduce ? 1 : 0, transitionDelay: reduce ? '0ms' : `${SWEEP_MS}ms` }">
        <span class="dsc__total">{{ fmt(total) }}</span>
        <span class="dsc__total-label">total</span>
      </div>
    </div>

    <div class="dsc__readout">
      <div class="dsc__summary" :style="{ opacity: chipVisible ? 0 : 1, pointerEvents: chipVisible ? 'none' : 'auto' }">
        <p class="dsc__summary-line">{{ `${fmt(total)} total across ${n} ${n === 1 ? "category" : "categories"}.` }}</p>
        <p v-if="top" class="dsc__summary-sub">{{ `${top.label} leads at ${topPct}%.` }}</p>
      </div>
      <div class="dsc__chip-wrap" :style="{ opacity: chipVisible ? 1 : 0, pointerEvents: chipVisible ? 'auto' : 'none' }">
        <span v-if="activeSlice" class="dsc__chip" :style="{ borderColor: alpha(activeSlice.color, 0.35), background: alpha(activeSlice.color, 0.1) }">
          <span class="dsc__chip-swatch" :style="{ background: activeSlice.color }" />
          <span class="dsc__chip-label">{{ activeSlice.label }}</span>
          <span class="dsc__chip-value">{{ `${fmt(activeSlice.value)} · ${(activeSlice.share * 100).toFixed(1)}%` }}</span>
        </span>
      </div>
    </div>

    <div aria-live="polite" class="dsc__sr">{{ liveText }}</div>
  </div>
</template>

<style scoped>
.dsc {
  position: relative;
  width: 100%;
  max-width: 380px;
  margin: 0 auto;
  box-sizing: border-box;
  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);
  color: #1e293b;
  font-family: system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  .dsc {
    border-color: rgb(255 255 255 / 0.1);
    background: linear-gradient(180deg, rgb(255 255 255 / 0.05), rgb(255 255 255 / 0.012));
    box-shadow: inset 0 1px 0 0 rgb(255 255 255 / 0.07);
    color: #fff;
  }
}
.dsc__head {
  text-align: center;
}
.dsc__title {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(100 116 139 / 0.9);
}
@media (prefers-color-scheme: dark) {
  .dsc__title {
    color: rgb(255 255 255 / 0.45);
  }
}
.dsc__caption {
  margin: 0.25rem 0 0;
  font-size: 11px;
  color: rgb(148 163 184 / 0.9);
}
@media (prefers-color-scheme: dark) {
  .dsc__caption {
    color: rgb(255 255 255 / 0.35);
  }
}
.dsc__plot {
  position: relative;
  width: 100%;
  max-width: 216px;
  aspect-ratio: 1 / 1;
  margin: 1rem auto 0;
  outline: none;
}
.dsc__svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.dsc__arc {
  cursor: pointer;
  outline: none;
}
.dsc__arc:focus-visible {
  outline: 2px solid rgba(0, 0, 0, 0.6);
  outline-offset: 3px;
}
@media (prefers-color-scheme: dark) {
  .dsc__arc:focus-visible {
    outline-color: rgba(255, 255, 255, 0.8);
  }
}
.dsc__hole {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
  transition: opacity 260ms ease;
}
.dsc__total {
  font-size: 20px;
  line-height: 1;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: #1e293b;
}
@media (prefers-color-scheme: dark) {
  .dsc__total {
    color: #fff;
  }
}
.dsc__total-label {
  margin-top: 0.25rem;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(148 163 184 / 0.9);
}
@media (prefers-color-scheme: dark) {
  .dsc__total-label {
    color: rgb(255 255 255 / 0.4);
  }
}
.dsc__readout {
  position: relative;
  min-height: 2.75rem;
  margin-top: 1rem;
}
.dsc__summary {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: opacity 150ms ease;
}
.dsc__summary-line {
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
  color: rgb(71 85 105 / 0.9);
}
@media (prefers-color-scheme: dark) {
  .dsc__summary-line {
    color: rgb(255 255 255 / 0.6);
  }
}
.dsc__summary-sub {
  margin: 0.125rem 0 0;
  font-size: 12px;
  line-height: 1.4;
  color: rgb(148 163 184 / 0.9);
}
@media (prefers-color-scheme: dark) {
  .dsc__summary-sub {
    color: rgb(255 255 255 / 0.35);
  }
}
.dsc__chip-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 150ms ease;
}
.dsc__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.625rem;
  border: 1px solid transparent;
  border-radius: 0.5rem;
}
.dsc__chip-swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
}
.dsc__chip-label {
  font-size: 12px;
  font-weight: 500;
  color: rgb(51 65 85 / 0.95);
}
@media (prefers-color-scheme: dark) {
  .dsc__chip-label {
    color: rgb(255 255 255 / 0.85);
  }
}
.dsc__chip-value {
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: #1e293b;
}
@media (prefers-color-scheme: dark) {
  .dsc__chip-value {
    color: #fff;
  }
}
.dsc__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
@media (prefers-reduced-motion: reduce) {
  .dsc__arc {
    transition-duration: 1ms !important;
  }
}
</style>

Traffic by source

Nearby

Traffic by source