"use client";

import { NamedPointLine, type NamedPoint } from "./index";

export interface DemoProps {
  accent?: string;
  labelSize?: number;
  dotRadius?: number;
  strokeWidth?: number;
  showGrid?: boolean;
}

const CHANNELS: NamedPoint[] = [
  { name: "Chat", value: 92 },
  { name: "Email", value: 81 },
  { name: "Phone", value: 88 },
  { name: "Social", value: 74 },
  { name: "In-app", value: 95 },
];

/** Demo props mirror meta.json controls; defaults must match the control defaults. */
export default function Demo({ accent = "#FF4D8D", labelSize = 12, dotRadius = 4, strokeWidth = 2, showGrid = true }: DemoProps) {
  return (
    <div className="w-full p-4 sm:p-6">
      <NamedPointLine
        data={CHANNELS}
        title="Customer satisfaction"
        caption="By support channel, last 7 days"
        suffix="%"
        accent={accent}
        labelSize={labelSize}
        dotRadius={dotRadius}
        strokeWidth={strokeWidth}
        showGrid={showGrid}
      />
    </div>
  );
}

1d:T31d3, 1e:T2f192,

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

interface NamedPoint {
  name: string;
  value: number;
}
interface Pt {
  x: number;
  y: number;
}

const VB_W = 680;
const VB_H = 234;
const PAD_L = 56;
const PAD_R = 56;
const PAD_T = 40;
const PAD_B = 24;
const PLOT_W = VB_W - PAD_L - PAD_R;
const PLOT_H = VB_H - PAD_T - PAD_B;
const LINE_MS = 820;
const STEP_MS = 70;
const GRID_FRACTIONS = [0.18, 0.4, 0.62, 0.84];

const DATA: NamedPoint[] = [
  { name: "Chat", value: 92 },
  { name: "Email", value: 81 },
  { name: "Phone", value: 88 },
  { name: "Social", value: 74 },
  { name: "In-app", value: 95 },
];
const SUFFIX = "%";

const props = withDefaults(
  defineProps<{
    accent?: string;
    labelSize?: number;
    dotRadius?: number;
    strokeWidth?: number;
    showGrid?: boolean;
  }>(),
  { accent: "#FF4D8D", labelSize: 12, dotRadius: 4, strokeWidth: 2, showGrid: 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 buildSmoothPath(pts: Pt[]): string {
  const n = pts.length;
  if (n < 2) return "";
  const r = (v: number) => Math.round(v * 100) / 100;
  if (n === 2) return `M ${r(pts[0].x)} ${r(pts[0].y)} L ${r(pts[1].x)} ${r(pts[1].y)}`;
  const h: number[] = [];
  const slope: number[] = [];
  for (let i = 0; i < n - 1; i++) {
    h.push(pts[i + 1].x - pts[i].x);
    slope.push((pts[i + 1].y - pts[i].y) / (pts[i + 1].x - pts[i].x));
  }
  const m: number[] = new Array(n);
  m[0] = slope[0];
  m[n - 1] = slope[n - 2];
  for (let i = 1; i < n - 1; i++) {
    if (slope[i - 1] * slope[i] <= 0) m[i] = 0;
    else {
      const w1 = 2 * h[i] + h[i - 1];
      const w2 = h[i] + 2 * h[i - 1];
      m[i] = (w1 + w2) / (w1 / slope[i - 1] + w2 / slope[i]);
    }
  }
  let d = `M ${r(pts[0].x)} ${r(pts[0].y)}`;
  for (let i = 0; i < n - 1; i++) {
    d +=
      ` C ${r(pts[i].x + h[i] / 3)} ${r(pts[i].y + (m[i] * h[i]) / 3)}` +
      ` ${r(pts[i + 1].x - h[i] / 3)} ${r(pts[i + 1].y - (m[i + 1] * h[i]) / 3)}` +
      ` ${r(pts[i + 1].x)} ${r(pts[i + 1].y)}`;
  }
  return d;
}
function glyphWidth(size: number): number {
  return size * 0.58;
}
function fitLabel(name: string, budget: number, size: number): string {
  const max = Math.max(3, Math.floor(budget / glyphWidth(size)));
  if (name.length <= max) return name;
  return `${name.slice(0, Math.max(1, max - 1))}…`;
}
function fitLabelX(x: number, text: string, size: number): number {
  const half = (text.length * glyphWidth(size)) / 2;
  const edge = 6;
  if (x - half < edge) return half + edge;
  if (x + half > VB_W - edge) return VB_W - edge - half;
  return x;
}

const hostEl = ref<HTMLElement | null>(null);
const pathEl = ref<SVGPathElement | null>(null);
const hoverIndex = ref<number | null>(null);
const heldIndex = ref<number | null>(null);
const reduce = ref(false);
const revealed = ref(false);
const drawn = ref(false);
const pathLen = ref(0);

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

const pts = computed<Pt[]>(() => {
  const n = DATA.length;
  const values = DATA.map((d) => d.value);
  const max = Math.max(...values);
  const min = Math.min(...values);
  const span = max - min || Math.abs(max) || 1;
  const lo = min - span * 0.2;
  const hi = max + span * 0.35;
  const range = hi - lo || 1;
  return DATA.map((d, i) => ({
    x: PAD_L + (n > 1 ? i / (n - 1) : 0.5) * PLOT_W,
    y: PAD_T + (1 - (d.value - lo) / range) * PLOT_H,
  }));
});
const linePath = computed(() => buildSmoothPath(pts.value));
const spacing = DATA.length > 1 ? PLOT_W / (DATA.length - 1) : PLOT_W * 0.7;
const labels = computed(() => DATA.map((d) => fitLabel(d.name, spacing * 0.92, props.labelSize)));
const active = computed(() => heldIndex.value ?? hoverIndex.value);
const ariaLabel = computed(() => `Customer satisfaction. ${DATA.map((d) => `${d.name} ${d.value}${SUFFIX}`).join(", ")}`);
const liveText = computed(() => (active.value !== null ? `${DATA[active.value].name}: ${DATA[active.value].value}${SUFFIX}` : ""));

const lineStyle = computed(() => ({
  strokeDasharray: `${pathLen.value}`,
  strokeDashoffset: drawn.value ? 0 : pathLen.value,
  transitionProperty: "stroke-dashoffset",
  transitionDuration: reduce.value ? "1ms" : `${LINE_MS}ms`,
  transitionTimingFunction: "cubic-bezier(0.22,1,0.36,1)",
}));

function radiusFor(i: number): number {
  return active.value === i ? props.dotRadius * 1.6 : props.dotRadius;
}
function dotStyle(i: number) {
  const dimmed = active.value !== null && active.value !== i;
  return {
    transformBox: "fill-box" as const,
    transformOrigin: "center",
    transform: revealed.value ? "scale(1)" : "scale(0)",
    opacity: !revealed.value ? 0 : dimmed ? 0.5 : 1,
    transitionProperty: "transform, opacity, r",
    transitionDuration: reduce.value ? "1ms" : "220ms",
    transitionTimingFunction: "cubic-bezier(0.22,1,0.36,1)",
    transitionDelay: !reduce.value && !revealed.value ? `${i * STEP_MS}ms` : "0ms",
  };
}
function labelStyle(i: number) {
  const isActive = active.value === i;
  const dimmed = active.value !== null && !isActive;
  return {
    fontWeight: isActive ? 700 : 500,
    opacity: !revealed.value ? 0 : dimmed ? 0.4 : 1,
    transform: revealed.value ? "translateY(0px)" : "translateY(6px)",
    transformBox: "fill-box" as const,
    transformOrigin: "center",
    transitionProperty: "opacity, transform",
    transitionDuration: reduce.value ? "1ms" : "280ms",
    transitionTimingFunction: "cubic-bezier(0.22,1,0.36,1)",
    transitionDelay: !reduce.value && !revealed.value ? `${i * STEP_MS}ms` : "0ms",
  };
}
function labelXFor(i: number): number {
  return fitLabelX(pts.value[i].x, labels.value[i], props.labelSize);
}
function labelYFor(i: number): number {
  return pts.value[i].y - props.dotRadius - 10;
}
const tipStyle = computed(() => {
  const i = active.value;
  if (i === null) return {};
  const pt = pts.value[i];
  return {
    left: `${Math.min(Math.max((pt.x / VB_W) * 100, 8), 92)}%`,
    top: `${(pt.y / VB_H) * 100}%`,
    transform: "translate(-50%, 16px)",
    borderColor: alpha(props.accent, 0.35),
  };
});

function ratioFromClientX(clientX: number): number {
  const el = hostEl.value;
  if (!el) return 0.5;
  const rect = el.getBoundingClientRect();
  const px = ((clientX - rect.left) / Math.max(rect.width, 1)) * VB_W;
  return (px - PAD_L) / PLOT_W;
}
function onPointerMove(e: PointerEvent) {
  if (e.pointerType !== "mouse") return;
  const ratio = Math.max(0, Math.min(1, ratioFromClientX(e.clientX)));
  hoverIndex.value = Math.round(ratio * (DATA.length - 1));
}
function onPointerLeave() {
  hoverIndex.value = null;
}
function onPointerDown(e: PointerEvent) {
  if (e.pointerType === "mouse") return;
  const ratio = ratioFromClientX(e.clientX);
  if (ratio < -0.08 || ratio > 1.08) {
    heldIndex.value = null;
    return;
  }
  heldIndex.value = Math.round(Math.max(0, Math.min(1, ratio)) * (DATA.length - 1));
}
function onFocusOut() {
  hoverIndex.value = null;
}
function nudge(dir: number) {
  const from = heldIndex.value ?? hoverIndex.value ?? (dir > 0 ? -1 : DATA.length);
  heldIndex.value = Math.max(0, Math.min(from + dir, DATA.length - 1));
}
function onKeydown(e: KeyboardEvent) {
  if (e.key === "ArrowRight" || e.key === "ArrowLeft") {
    e.preventDefault();
    nudge(e.key === "ArrowRight" ? 1 : -1);
  } else if (e.key === "Home") {
    e.preventDefault();
    heldIndex.value = 0;
  } else if (e.key === "End") {
    e.preventDefault();
    heldIndex.value = DATA.length - 1;
  } else if (e.key === "Escape") {
    heldIndex.value = null;
    hoverIndex.value = null;
  }
}

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();
  pathLen.value = pathEl.value?.getTotalLength() ?? 0;

  if (reduce.value) {
    drawn.value = true;
    revealed.value = true;
    return;
  }
  raf1 = requestAnimationFrame(() => {
    raf2 = requestAnimationFrame(() => {
      drawn.value = true;
    });
  });
  revealTimer = window.setTimeout(() => {
    revealed.value = true;
  }, LINE_MS);
});
onBeforeUnmount(() => {
  mq?.removeEventListener("change", onScheme);
  if (revealTimer) window.clearTimeout(revealTimer);
  cancelAnimationFrame(raf1);
  cancelAnimationFrame(raf2);
});
</script>

<template>
  <div class="npl">
    <h3 class="npl__title">Customer satisfaction</h3>
    <p class="npl__caption">By support channel, last 7 days</p>

    <div
      ref="hostEl"
      role="img"
      tabindex="0"
      class="npl__host"
      :aria-label="ariaLabel"
      @pointermove="onPointerMove"
      @pointerleave="onPointerLeave"
      @pointerdown="onPointerDown"
      @focusout="onFocusOut"
      @keydown="onKeydown"
    >
      <svg :viewBox="`0 0 ${VB_W} ${VB_H}`" class="npl__svg" aria-hidden="true">
        <template v-if="showGrid">
          <line v-for="f in GRID_FRACTIONS" :key="f" class="npl__grid" :x1="PAD_L" :x2="PAD_L + PLOT_W" :y1="PAD_T + f * PLOT_H" :y2="PAD_T + f * PLOT_H" />
        </template>

        <path ref="pathEl" :d="linePath" fill="none" :stroke="accent" :stroke-width="strokeWidth" stroke-linecap="round" stroke-linejoin="round" :style="lineStyle" />

        <g v-for="(pt, i) in pts" :key="i">
          <circle v-if="active === i" :cx="pt.x" :cy="pt.y" :r="radiusFor(i) + 3.5" fill="none" :stroke="accent" stroke-width="1.5" />
          <circle :cx="pt.x" :cy="pt.y" :r="radiusFor(i)" :fill="accent" :style="dotStyle(i)" />
          <text :x="labelXFor(i)" :y="labelYFor(i)" text-anchor="middle" :font-size="labelSize" class="npl__label" :style="labelStyle(i)">{{ labels[i] }}</text>
        </g>
      </svg>

      <div v-if="active !== null" class="npl__tip" :style="tipStyle">
        <span class="npl__tip-bar" :style="{ background: accent }" />
        <span class="npl__tip-value">{{ DATA[active].value }}{{ SUFFIX }}</span>
      </div>
    </div>

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

<style scoped>
.npl {
  position: relative;
  width: 100%;
  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) {
  .npl {
    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;
  }
}
.npl__title {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
}
.npl__caption {
  margin: 0.25rem 0 0;
  font-size: 11px;
  color: rgb(100 116 139 / 0.8);
}
@media (prefers-color-scheme: dark) {
  .npl__caption {
    color: rgb(255 255 255 / 0.4);
  }
}
.npl__host {
  position: relative;
  width: 100%;
  margin-top: 1rem;
  border-radius: 0.5rem;
  cursor: pointer;
  outline: none;
}
.npl__host:focus-visible {
  box-shadow: 0 0 0 2px rgba(255, 77, 141, 0.45);
}
.npl__svg {
  display: block;
  width: 100%;
  height: auto;
}
.npl__grid {
  stroke: rgb(0 0 0 / 0.06);
  stroke-width: 1;
}
@media (prefers-color-scheme: dark) {
  .npl__grid {
    stroke: rgb(255 255 255 / 0.07);
  }
}
.npl__label {
  fill: #475569;
}
@media (prefers-color-scheme: dark) {
  .npl__label {
    fill: rgb(255 255 255 / 0.85);
  }
}
.npl__tip {
  position: absolute;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  pointer-events: none;
  white-space: nowrap;
  padding: 0.25rem 0.5rem;
  border: 1px solid transparent;
  border-radius: 0.375rem;
  background: #fff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.16);
}
@media (prefers-color-scheme: dark) {
  .npl__tip {
    background: #0b0d10;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5);
  }
}
.npl__tip-bar {
  display: inline-block;
  width: 3px;
  height: 12px;
  border-radius: 9999px;
  flex-shrink: 0;
}
.npl__tip-value {
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: #1e293b;
}
@media (prefers-color-scheme: dark) {
  .npl__tip-value {
    color: #fff;
  }
}
.npl__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) {
  .npl__host * {
    transition-duration: 1ms !important;
  }
}
</style>

Customer satisfaction

Nearby

Customer satisfaction