"use client";

import { ConcentricRingChart, type RingDatum } from "./index";

export interface DemoProps {
  strokeWidth?: number;
  ringGap?: number;
  accent?: string;
  animationSpeed?: number;
  showCenterLabel?: boolean;
}

const CHANNELS: RingDatum[] = [
  { label: "Organic search", value: 82, total: 8400 },
  { label: "Paid ads", value: 64, total: 6200 },
  { label: "Referral", value: 91, total: 3100 },
  { label: "Email", value: 47, total: 2350 },
];

/** Demo props mirror meta.json controls; defaults must match the control defaults. */
export default function Demo({
  strokeWidth = 14,
  ringGap = 6,
  accent = "#7C5CFF",
  animationSpeed = 1100,
  showCenterLabel = true,
}: DemoProps) {
  return (
    <div className="flex w-full items-center justify-center p-6">
      <ConcentricRingChart
        data={CHANNELS}
        strokeWidth={strokeWidth}
        ringGap={ringGap}
        accent={accent}
        animationSpeed={animationSpeed}
        showCenterLabel={showCenterLabel}
        centerLabel="Sessions"
        className="max-w-sm"
      />
    </div>
  );
}

1e:T22bc, 1f:T19521,

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

interface RingDatum {
  label: string;
  value: number;
  total: number;
  color?: string;
}

const props = withDefaults(
  defineProps<{
    strokeWidth?: number;
    ringGap?: number;
    accent?: string;
    animationSpeed?: number;
    showCenterLabel?: boolean;
  }>(),
  {
    strokeWidth: 14,
    ringGap: 6,
    accent: "#7C5CFF",
    animationSpeed: 1100,
    showCenterLabel: true,
  },
);

const SIZE = 240;
const CENTER = SIZE / 2;
const PADDING = 8;
const PALETTE = ["#38BDF8", "#F5C542", "#FF4D8D", "#9BE15D"];

const data: RingDatum[] = [
  { label: "Organic search", value: 82, total: 8400 },
  { label: "Paid ads", value: 64, total: 6200 },
  { label: "Referral", value: 91, total: 3100 },
  { label: "Email", value: 47, total: 2350 },
];
const combinedTotal = data.reduce((sum, d) => sum + d.total, 0);

const ready = ref(false);
const hovered = ref<number | null>(null);
// Two independent counters, one per numeric domain (raw total vs. 0-100 percent),
// so a hover swap never interpolates a total-sized number through the "%" formatter.
const displayTotal = ref(0);
const displayPercent = ref(0);

const activeIndex = computed(() => (hovered.value !== null && hovered.value < data.length ? hovered.value : null));
const percentTarget = computed(() => (activeIndex.value === null ? 0 : data[activeIndex.value].value));
const centerText = computed(() =>
  activeIndex.value === null ? Math.round(displayTotal.value).toLocaleString() : `${Math.round(displayPercent.value)}%`,
);
const centerCaption = computed(() => (activeIndex.value === null ? "Sessions" : data[activeIndex.value as number].label));

function makeAnimator(target: import("vue").Ref<number>) {
  let rafId = 0;
  return {
    run(to: number, duration: number) {
      if (typeof cancelAnimationFrame !== "undefined") cancelAnimationFrame(rafId);
      const from = target.value;
      const start = performance.now();
      const step = (now: number) => {
        const t = Math.min((now - start) / duration, 1);
        const eased = 1 - Math.pow(1 - t, 3);
        target.value = from + (to - from) * eased;
        if (t < 1 && typeof requestAnimationFrame !== "undefined") rafId = requestAnimationFrame(step);
      };
      if (typeof requestAnimationFrame !== "undefined") rafId = requestAnimationFrame(step);
    },
    stop() {
      if (typeof cancelAnimationFrame !== "undefined") cancelAnimationFrame(rafId);
    },
  };
}

const totalAnimator = makeAnimator(displayTotal);
const percentAnimator = makeAnimator(displayPercent);

watch(
  () => combinedTotal,
  (target) => totalAnimator.run(target, props.animationSpeed),
  { immediate: true },
);
watch(
  percentTarget,
  (target) => percentAnimator.run(target, 500),
  { immediate: true },
);

function ringColor(ring: RingDatum, i: number) {
  return ring.color ?? (i === 0 ? props.accent : PALETTE[(i - 1) % PALETTE.length]);
}
function radiusFor(i: number) {
  const step = props.strokeWidth + props.ringGap;
  const maxRadius = CENTER - props.strokeWidth / 2 - PADDING;
  return Math.max(maxRadius - i * step, props.strokeWidth / 2 + 2);
}
function circumferenceFor(i: number) {
  return 2 * Math.PI * radiusFor(i);
}
function dashOffsetFor(ring: RingDatum, i: number) {
  return circumferenceFor(i) * (1 - Math.min(Math.max(ring.value, 0), 100) / 100);
}
function setHovered(i: number | null) {
  hovered.value = i;
}

let rafReady = 0;
onMounted(() => {
  if (typeof requestAnimationFrame !== "undefined") {
    rafReady = requestAnimationFrame(() => {
      ready.value = true;
    });
  }
});
onUnmounted(() => {
  totalAnimator.stop();
  percentAnimator.stop();
  if (typeof cancelAnimationFrame !== "undefined") {
    cancelAnimationFrame(rafReady);
  }
});
</script>

<template>
  <div class="ring-chart">
    <div class="ring-chart__stage">
      <svg :viewBox="`0 0 ${SIZE} ${SIZE}`" class="ring-chart__svg" role="img" :aria-label="`Sessions: ${combinedTotal.toLocaleString()}`">
        <g
          v-for="(ring, i) in data"
          :key="ring.label"
          class="ring-chart__ring"
          :class="{ 'is-dimmed': activeIndex !== null && activeIndex !== i }"
          :style="{
            opacity: ready ? 1 : 0,
            transitionDelay: `${i * 90}ms`,
            transform: activeIndex === i ? 'scale(1.045)' : 'scale(1)',
            filter: activeIndex === i ? `drop-shadow(0 0 10px ${ringColor(ring, i)}99)` : 'none',
          }"
        >
          <circle :cx="CENTER" :cy="CENTER" :r="radiusFor(i)" fill="none" stroke="#ffffff" stroke-opacity="0.08" :stroke-width="props.strokeWidth" />
          <circle
            :cx="CENTER"
            :cy="CENTER"
            :r="radiusFor(i)"
            fill="none"
            :stroke="ringColor(ring, i)"
            :stroke-width="props.strokeWidth"
            stroke-linecap="round"
            :stroke-dasharray="circumferenceFor(i)"
            :stroke-dashoffset="ready ? dashOffsetFor(ring, i) : circumferenceFor(i)"
            :transform="`rotate(-90 ${CENTER} ${CENTER})`"
            class="ring-chart__arc"
            :style="{ transitionDelay: `${i * 90 + 180}ms`, transitionDuration: `${props.animationSpeed}ms` }"
          />
          <circle
            :cx="CENTER"
            :cy="CENTER"
            :r="radiusFor(i)"
            fill="none"
            stroke="transparent"
            :stroke-width="props.strokeWidth + 16"
            class="ring-chart__hit"
            @mouseenter="setHovered(i)"
            @mouseleave="setHovered(null)"
          />
        </g>
      </svg>
      <div v-if="props.showCenterLabel" class="ring-chart__center">
        <span class="ring-chart__value">{{ centerText }}</span>
        <span class="ring-chart__caption">{{ centerCaption }}</span>
      </div>
    </div>
    <div class="ring-chart__legend">
      <button
        v-for="(ring, i) in data"
        :key="ring.label"
        type="button"
        class="ring-chart__chip"
        :class="{ 'is-active': activeIndex === i }"
        @mouseenter="setHovered(i)"
        @mouseleave="setHovered(null)"
        @focus="setHovered(i)"
        @blur="setHovered(null)"
      >
        <span class="ring-chart__dot" :style="{ background: ringColor(ring, i) }"></span>
        {{ ring.label }}
        <span class="ring-chart__pct">{{ Math.round(ring.value) }}%</span>
      </button>
    </div>
  </div>
</template>

<style scoped>
.ring-chart {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  border-radius: 1rem;
  border: 1px solid rgb(255 255 255 / 0.1);
  background: #111318;
  padding: 1.5rem;
  font-family: system-ui, sans-serif;
}
.ring-chart__stage {
  position: relative;
  width: 100%;
  max-width: 240px;
  aspect-ratio: 1 / 1;
}
.ring-chart__svg {
  width: 100%;
  height: 100%;
}
.ring-chart__ring {
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity 260ms ease, transform 220ms ease, filter 220ms ease;
}
.ring-chart__ring.is-dimmed {
  opacity: 0.32 !important;
}
.ring-chart__arc {
  transition-property: stroke-dashoffset;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
.ring-chart__hit {
  pointer-events: stroke;
  cursor: pointer;
}
.ring-chart__center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
}
.ring-chart__value {
  font-size: 1.75rem;
  font-weight: 700;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.ring-chart__caption {
  margin-top: 0.25rem;
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgb(255 255 255 / 0.45);
}
.ring-chart__legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
.ring-chart__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border-radius: 9999px;
  border: 1px solid rgb(255 255 255 / 0.1);
  background: rgb(255 255 255 / 0.04);
  padding: 0.3rem 0.7rem;
  font-size: 0.75rem;
  color: rgb(255 255 255 / 0.7);
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}
.ring-chart__chip:hover {
  background: rgb(255 255 255 / 0.08);
}
.ring-chart__chip:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgb(255 255 255 / 0.4);
}
.ring-chart__chip.is-active {
  border-color: rgb(255 255 255 / 0.25);
  background: rgb(255 255 255 / 0.1);
  color: #fff;
}
.ring-chart__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
}
.ring-chart__pct {
  color: rgb(255 255 255 / 0.4);
}
@media (prefers-reduced-motion: reduce) {
  .ring-chart__ring,
  .ring-chart__arc {
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
  }
}
</style>

Nearby