"use client";

import { SpokeAreaChart } from "./index";

export interface DemoProps {
  accent?: string;
  fillOpacity?: number;
  rings?: number;
  strokeWidth?: number;
  animate?: boolean;
}

const data = [
  { label: "Apr", value: 210 },
  { label: "May", value: 265 },
  { label: "Jun", value: 240 },
  { label: "Jul", value: 320 },
  { label: "Aug", value: 298 },
  { label: "Sep", value: 356 },
];

/** Demo props mirror meta.json controls; defaults must match the control defaults. */
export default function Demo({ accent = "#FF6A1F", fillOpacity = 0.55, rings = 4, strokeWidth = 2, animate = true }: DemoProps) {
  return (
    <div className="flex w-full items-center justify-center p-6">
      <SpokeAreaChart data={data} accent={accent} fillOpacity={fillOpacity} rings={rings} strokeWidth={strokeWidth} animate={animate} />
    </div>
  );
}

1d:T211f, 1e:T1cd40,

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

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

const props = withDefaults(
  defineProps<{
    accent?: string;
    fillOpacity?: number;
    rings?: number;
    strokeWidth?: number;
    animate?: boolean;
  }>(),
  { accent: "#FF6A1F", fillOpacity: 0.55, rings: 4, strokeWidth: 2, animate: true },
);

const data: Datum[] = [
  { label: "Apr", value: 210 },
  { label: "May", value: 265 },
  { label: "Jun", value: 240 },
  { label: "Jul", value: 320 },
  { label: "Aug", value: 298 },
  { label: "Sep", value: 356 },
];

const SIZE = 260;
const CENTER = SIZE / 2;
const RADIUS = 96;
const LABEL_RADIUS = RADIUS + 22;
const count = data.length;
const maxValue = Math.max(...data.map((d) => d.value), 1);
const scaleMax = maxValue * 1.25;

function normalizeAngle(deg: number): number {
  const x = deg % 360;
  return x < 0 ? x + 360 : x;
}
function angleFor(index: number): number {
  return -90 + (360 / count) * index;
}
function pointFor(angleDeg: number, radius: number) {
  const rad = (angleDeg * Math.PI) / 180;
  return { x: CENTER + radius * Math.cos(rad), y: CENTER + radius * Math.sin(rad) };
}

const vertices = computed(() =>
  data.map((d, i) => {
    const normalized = Math.min(d.value / scaleMax, 1);
    return { ...pointFor(angleFor(i), normalized * RADIUS), label: d.label, value: d.value };
  }),
);

const outerVertices = computed(() => data.map((_, i) => pointFor(angleFor(i), RADIUS)));

const pathD = computed(() => vertices.value.map((v, i) => `${i === 0 ? "M" : "L"}${v.x.toFixed(2)},${v.y.toFixed(2)}`).join(" ") + " Z");

const ringPolygons = computed(() => {
  const list: string[] = [];
  for (let r = 1; r <= props.rings; r++) {
    const rr = (r / props.rings) * RADIUS;
    list.push(
      data
        .map((_, i) => pointFor(angleFor(i), rr))
        .map((p) => `${p.x.toFixed(2)},${p.y.toFixed(2)}`)
        .join(" "),
    );
  }
  return list;
});

const labelPositions = computed(() =>
  data.map((d, i) => {
    const angle = angleFor(i);
    const p = pointFor(angle, LABEL_RADIUS);
    const cos = Math.cos((angle * Math.PI) / 180);
    const anchor = cos > 0.3 ? "start" : cos < -0.3 ? "end" : "middle";
    return { ...p, anchor, label: d.label };
  }),
);

const activeIndex = ref<number | null>(null);
const svgEl = ref<SVGSVGElement | null>(null);
const active = computed(() => (activeIndex.value !== null ? vertices.value[activeIndex.value] : null));

function updateFromPointer(clientX: number, clientY: number) {
  const svg = svgEl.value;
  if (!svg) return;
  const rect = svg.getBoundingClientRect();
  const x = ((clientX - rect.left) / rect.width) * SIZE;
  const y = ((clientY - rect.top) / rect.height) * SIZE;
  const dx = x - CENTER;
  const dy = y - CENTER;
  if (Math.hypot(dx, dy) < 4) return;
  const angle = normalizeAngle((Math.atan2(dy, dx) * 180) / Math.PI);
  let bestIndex = 0;
  let bestDiff = Infinity;
  for (let i = 0; i < count; i++) {
    const spoke = normalizeAngle(angleFor(i));
    const diff = Math.min(Math.abs(angle - spoke), 360 - Math.abs(angle - spoke));
    if (diff < bestDiff) {
      bestDiff = diff;
      bestIndex = i;
    }
  }
  activeIndex.value = bestIndex;
}

function onKeydown(event: KeyboardEvent) {
  if (event.key === "ArrowRight") {
    event.preventDefault();
    activeIndex.value = ((activeIndex.value ?? -1) + 1 + count) % count;
  } else if (event.key === "ArrowLeft") {
    event.preventDefault();
    activeIndex.value = ((activeIndex.value ?? 1) - 1 + count) % count;
  } else if (event.key === "Escape") {
    activeIndex.value = null;
  }
}
function onFocus() {
  activeIndex.value = activeIndex.value ?? 0;
}
function onLeave() {
  activeIndex.value = null;
}
</script>

<template>
  <div class="spoke-chart">
    <div class="spoke-chart__head">
      <h3 class="spoke-chart__title">Sessions</h3>
      <span class="spoke-chart__subtitle">Last 6 months</span>
    </div>
    <div
      class="spoke-chart__plot"
      tabindex="0"
      role="img"
      :aria-label="`Sessions, radar chart with ${count} categories`"
      @keydown="onKeydown"
      @pointermove="(e) => updateFromPointer(e.clientX, e.clientY)"
      @pointerleave="onLeave"
      @focus="onFocus"
      @blur="onLeave"
    >
      <svg ref="svgEl" :viewBox="`0 0 ${SIZE} ${SIZE}`" class="spoke-chart__svg">
        <polygon v-for="(points, i) in ringPolygons" :key="`ring-${i}`" :points="points" class="spoke-chart__ring" />
        <line v-for="(p, i) in outerVertices" :key="`spoke-${i}`" :x1="CENTER" :y1="CENTER" :x2="p.x" :y2="p.y" class="spoke-chart__spoke" />
        <g class="spoke-chart__shape" :class="{ 'spoke-chart__shape--grow': animate }" :style="{ transformOrigin: `${CENTER}px ${CENTER}px` }">
          <path :d="pathD" :fill="accent" :fill-opacity="fillOpacity" :stroke="accent" :stroke-width="strokeWidth" stroke-linejoin="round" />
        </g>
        <circle v-for="(v, i) in vertices" :key="`marker-${i}`" :cx="v.x" :cy="v.y" :r="activeIndex === i ? 4.5 : 0" :fill="accent" class="spoke-chart__marker" />
        <text
          v-for="(lp, i) in labelPositions"
          :key="`label-${i}`"
          :x="lp.x"
          :y="lp.y"
          :text-anchor="lp.anchor"
          dominant-baseline="middle"
          class="spoke-chart__label"
          :class="{ 'spoke-chart__label--active': activeIndex === i }"
        >
          {{ lp.label }}
        </text>
      </svg>
      <div v-if="active" class="spoke-chart__tooltip" :style="{ left: (active.x / SIZE) * 100 + '%', top: (active.y / SIZE) * 100 + '%' }">
        <div class="spoke-chart__tooltip-label">{{ active.label }}</div>
        <div class="spoke-chart__tooltip-value">{{ active.value }} sessions</div>
      </div>
      <span class="sr-only" aria-live="polite">{{ active ? `${active.label}: ${active.value} sessions` : "" }}</span>
    </div>
    <p class="spoke-chart__foot">Hover a spoke, or use arrow keys.</p>
  </div>
</template>

<style scoped>
.spoke-chart {
  box-sizing: border-box;
  width: 100%;
  max-width: 420px;
  border-radius: 14px;
  border: 1px solid rgb(255 255 255 / 0.1);
  background: #101317;
  color: #fff;
  padding: 20px;
  font-family: system-ui, sans-serif;
}
.spoke-chart__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.spoke-chart__title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.spoke-chart__subtitle {
  font-size: 12px;
  color: rgb(255 255 255 / 0.4);
}
.spoke-chart__plot {
  position: relative;
  margin: 16px auto 0;
  width: 100%;
  max-width: 250px;
  aspect-ratio: 1 / 1;
  outline: none;
  border-radius: 10px;
  cursor: crosshair;
  user-select: none;
}
.spoke-chart__plot:focus-visible {
  box-shadow: 0 0 0 2px rgb(255 255 255 / 0.3);
}
.spoke-chart__svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.spoke-chart__ring {
  fill: none;
  stroke: rgb(255 255 255 / 0.1);
  stroke-width: 1;
}
.spoke-chart__spoke {
  stroke: rgb(255 255 255 / 0.06);
  stroke-width: 1;
}
.spoke-chart__shape--grow {
  animation: spoke-grow 700ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes spoke-grow {
  from {
    opacity: 0;
    transform: scale(0);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .spoke-chart__shape--grow {
    animation: none;
  }
}
.spoke-chart__marker {
  stroke: #101317;
  stroke-width: 1.5;
  transition: r 150ms ease;
}
.spoke-chart__label {
  font-size: 9px;
  fill: rgb(255 255 255 / 0.4);
  transition: fill 150ms ease;
}
.spoke-chart__label--active {
  fill: #fff;
}
.spoke-chart__tooltip {
  position: absolute;
  z-index: 2;
  transform: translate(-50%, calc(-100% - 10px));
  border-radius: 6px;
  border: 1px solid rgb(255 255 255 / 0.15);
  background: rgb(11 13 16 / 0.95);
  padding: 6px 10px;
  font-size: 12px;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 10px 24px rgb(0 0 0 / 0.4);
}
.spoke-chart__tooltip-label {
  font-weight: 500;
  color: #fff;
}
.spoke-chart__tooltip-value {
  color: rgb(255 255 255 / 0.6);
  font-variant-numeric: tabular-nums;
}
.spoke-chart__foot {
  margin: 12px 0 0;
  text-align: center;
  font-size: 11px;
  color: rgb(255 255 255 / 0.35);
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
</style>

Sessions

Nearby

Sessions