"use client";

import { PlainTrendLine } from "./index";

export interface DemoProps {
  accentColor?: string;
  strokeWidth?: number;
  showGrid?: boolean;
  animate?: boolean;
}

/** Demo props mirror meta.json controls; defaults must match the control defaults. */
export default function Demo({ accentColor = "#38BDF8", strokeWidth = 2, showGrid = true, animate = true }: DemoProps) {
  return (
    <div className="w-full max-w-[420px] p-5 sm:p-6">
      <PlainTrendLine
        label="Monthly signups"
        rangeLabel="Apr - Sep 2026"
        months={["Apr", "May", "Jun", "Jul", "Aug", "Sep"]}
        data={[412, 468, 445, 512, 588, 641]}
        accentColor={accentColor}
        strokeWidth={strokeWidth}
        showGrid={showGrid}
        animate={animate}
      />
    </div>
  );
}

1d:T27ee, 1e:T2564d,

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

interface Point {
  x: number;
  y: number;
}

const VB_W = 480;
const CHART_H = 180;
const LABEL_H = 24;
const VB_H = CHART_H + LABEL_H;
const PAD_X = 14;
const PAD_Y = 16;
const INNER_PAD = 8;
const GRID_FRACTIONS = [0, 1 / 3, 2 / 3, 1];

const props = withDefaults(
  defineProps<{
    label?: string;
    rangeLabel?: string;
    months?: string[];
    data?: number[];
    prefix?: string;
    suffix?: string;
    accentColor?: string;
    strokeWidth?: number;
    showGrid?: boolean;
    animate?: boolean;
  }>(),
  {
    label: "Monthly signups",
    rangeLabel: "Apr - Sep 2026",
    months: () => ["Apr", "May", "Jun", "Jul", "Aug", "Sep"],
    data: () => [412, 468, 445, 512, 588, 641],
    prefix: "",
    suffix: "",
    accentColor: "#38BDF8",
    strokeWidth: 2,
    showGrid: true,
    animate: true,
  },
);

/** Grouped digits without leaning on locale data, so server and client agree. */
function fmt(v: number): string {
  const neg = v < 0;
  const whole = Math.round(Math.abs(v))
    .toString()
    .replace(/\B(?=(\d{3})+(?!\d))/g, ",");
  return `${neg ? "-" : ""}${whole}`;
}

function project(data: number[]): Point[] {
  const lo = Math.min(...data);
  const hi = Math.max(...data);
  const span = hi - lo || 1;
  const usableW = VB_W - PAD_X * 2;
  const usableH = CHART_H - PAD_Y * 2 - INNER_PAD * 2;
  const last = Math.max(data.length - 1, 1);
  return data.map((v, i) => ({
    x: PAD_X + (i / last) * usableW,
    y: PAD_Y + INNER_PAD + (1 - (v - lo) / span) * usableH,
  }));
}

/** Catmull-Rom control points, tensioned down so peaks do not overshoot the frame. */
function toPath(pts: Point[]): string {
  if (pts.length < 2) return "";
  const r = (n: number) => Math.round(n * 100) / 100;
  let d = `M ${r(pts[0].x)} ${r(pts[0].y)}`;
  for (let i = 0; i < pts.length - 1; i++) {
    const p1 = pts[i];
    const p2 = pts[i + 1];
    const p0 = i > 0 ? pts[i - 1] : p1;
    const p3 = i + 2 < pts.length ? pts[i + 2] : p2;
    const t = 0.82;
    d +=
      ` C ${r(p1.x + ((p2.x - p0.x) / 6) * t)} ${r(p1.y + ((p2.y - p0.y) / 6) * t)}` +
      ` ${r(p2.x - ((p3.x - p1.x) / 6) * t)} ${r(p2.y - ((p3.y - p1.y) / 6) * t)}` +
      ` ${r(p2.x)} ${r(p2.y)}`;
  }
  return d;
}

const hostEl = ref<HTMLElement | null>(null);
const active = ref<number | null>(null);

const n = computed(() => props.data.length);
const pts = computed(() => (n.value > 1 ? project(props.data) : []));
const linePath = computed(() => toPath(pts.value));
const cursor = computed(() => (active.value !== null ? (pts.value[active.value] ?? null) : null));
const gridLines = computed(() => GRID_FRACTIONS.map((f) => PAD_Y + f * (CHART_H - PAD_Y * 2)));

const first = computed(() => props.data[0] ?? 0);
const last = computed(() => props.data[n.value - 1] ?? 0);
const delta = computed(() => (first.value === 0 ? 0 : ((last.value - first.value) / Math.abs(first.value)) * 100));
const deltaText = computed(() => `${delta.value >= 0 ? "+" : "-"}${Math.abs(delta.value).toFixed(1)}%`);
const liveText = computed(() =>
  active.value !== null ? `${props.months[active.value]}: ${props.prefix}${fmt(props.data[active.value])}${props.suffix}` : "",
);
const chipLeftPct = computed(() => (cursor.value ? Math.min(Math.max(cursor.value.x / VB_W, 0.08), 0.92) * 100 : 0));
const ariaLabel = computed(
  () => `${props.label} line chart, ${props.months[0]} through ${props.months[n.value - 1]}, use left and right arrow keys to inspect each month`,
);

function pick(clientX: number) {
  const el = hostEl.value;
  if (!el || pts.value.length < 2) return;
  const rect = el.getBoundingClientRect();
  const ratio = (clientX - rect.left) / Math.max(rect.width, 1);
  active.value = Math.round(Math.min(Math.max(ratio, 0), 1) * (n.value - 1));
}

function onKeydown(e: KeyboardEvent) {
  if (pts.value.length < 2) return;
  if (e.key === "ArrowRight") {
    e.preventDefault();
    active.value = Math.min((active.value ?? -1) + 1, n.value - 1);
  } else if (e.key === "ArrowLeft") {
    e.preventDefault();
    active.value = Math.max((active.value ?? n.value) - 1, 0);
  } else if (e.key === "Home") {
    e.preventDefault();
    active.value = 0;
  } else if (e.key === "End") {
    e.preventDefault();
    active.value = n.value - 1;
  } else if (e.key === "Escape") {
    active.value = null;
  }
}
</script>

<template>
  <div class="ptl-card">
    <div class="ptl-head">
      <h3 class="ptl-title">{{ label }}</h3>
      <span class="ptl-range">{{ rangeLabel }}</span>
    </div>

    <div
      ref="hostEl"
      role="img"
      tabindex="0"
      class="ptl-plot"
      :style="{ height: VB_H + 'px' }"
      :aria-label="ariaLabel"
      @pointermove="pick($event.clientX)"
      @pointerleave="active = null"
      @blur="active = null"
      @keydown="onKeydown"
    >
      <span class="ptl-live" aria-live="polite">{{ liveText }}</span>

      <svg :viewBox="`0 0 ${VB_W} ${VB_H}`" preserveAspectRatio="none" class="ptl-svg" aria-hidden="true">
        <template v-if="showGrid">
          <line
            v-for="(y, i) in gridLines"
            :key="'g' + i"
            :x1="PAD_X"
            :x2="VB_W - PAD_X"
            :y1="y"
            :y2="y"
            class="ptl-grid"
            vector-effect="non-scaling-stroke"
          />
        </template>
        <line v-if="cursor" :x1="cursor.x" :x2="cursor.x" y1="4" :y2="CHART_H - 4" class="ptl-guide" vector-effect="non-scaling-stroke" />
        <path
          v-if="pts.length > 1"
          :d="linePath"
          fill="none"
          :stroke="accentColor"
          :stroke-width="strokeWidth"
          stroke-linecap="round"
          stroke-linejoin="round"
          pathLength="1"
          vector-effect="non-scaling-stroke"
          :class="['ptl-line', { 'ptl-line--animate': animate }]"
        />
        <text v-for="(m, i) in months" :key="m" :x="pts[i]?.x ?? 0" :y="CHART_H + LABEL_H - 8" text-anchor="middle" class="ptl-month">{{ m }}</text>
      </svg>

      <div v-if="cursor && active !== null" class="ptl-chip" :style="{ left: chipLeftPct + '%', top: Math.max(cursor.y - 34, 2) + 'px' }">
        <span class="ptl-chip-month">{{ months[active] }}</span>{{ prefix }}{{ fmt(data[active]) }}{{ suffix }}
      </div>
    </div>

    <div class="ptl-footer">
      <svg
        width="11"
        height="11"
        viewBox="0 0 24 24"
        fill="none"
        :stroke="accentColor"
        stroke-width="2.5"
        stroke-linecap="round"
        stroke-linejoin="round"
        aria-hidden="true"
        :style="{ transform: delta < 0 ? 'scaleY(-1)' : undefined }"
      >
        <path d="M4 17 10 11 14 15 20 7" />
        <path d="M14 7h6v6" />
      </svg>
      <span class="ptl-delta" :style="{ color: accentColor }">{{ deltaText }}</span>
      <span>since {{ months[0] }}</span>
    </div>
  </div>
</template>

<style scoped>
.ptl-card {
  position: relative;
  width: 100%;
  border-radius: 16px;
  border: 1px solid rgb(0 0 0 / 0.1);
  background: #fff;
  padding: 1.25rem;
  color: #0f172a;
  font-family: system-ui, sans-serif;
  box-sizing: border-box;
}
@media (prefers-color-scheme: dark) {
  .ptl-card {
    border-color: rgb(255 255 255 / 0.1);
    background: rgb(255 255 255 / 0.03);
    color: #fff;
  }
}
.ptl-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}
.ptl-title {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: rgb(15 23 42 / 0.9);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ptl-range {
  flex-shrink: 0;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: rgb(15 23 42 / 0.5);
}
@media (prefers-color-scheme: dark) {
  .ptl-title {
    color: rgb(255 255 255 / 0.85);
  }
  .ptl-range {
    color: rgb(255 255 255 / 0.4);
  }
}
.ptl-plot {
  position: relative;
  margin-top: 0.75rem;
  width: 100%;
  cursor: crosshair;
  border-radius: 10px;
  outline: none;
}
.ptl-plot:focus-visible {
  box-shadow: 0 0 0 2px rgb(15 23 42 / 0.3);
}
@media (prefers-color-scheme: dark) {
  .ptl-plot:focus-visible {
    box-shadow: 0 0 0 2px rgb(255 255 255 / 0.3);
  }
}
.ptl-live {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.ptl-svg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.ptl-grid {
  stroke: rgb(0 0 0 / 0.1);
  stroke-width: 1;
}
.ptl-guide {
  stroke: rgb(0 0 0 / 0.2);
  stroke-width: 1;
}
@media (prefers-color-scheme: dark) {
  .ptl-grid {
    stroke: rgb(255 255 255 / 0.1);
  }
  .ptl-guide {
    stroke: rgb(255 255 255 / 0.25);
  }
}
.ptl-line {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}
.ptl-line--animate {
  animation: ptl-draw 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.ptl-month {
  font-size: 10px;
  font-weight: 500;
  fill: rgb(15 23 42 / 0.5);
}
@media (prefers-color-scheme: dark) {
  .ptl-month {
    fill: rgb(255 255 255 / 0.35);
  }
}
.ptl-chip {
  position: absolute;
  transform: translateX(-50%);
  pointer-events: none;
  white-space: nowrap;
  border-radius: 7px;
  border: 1px solid rgb(0 0 0 / 0.1);
  background: #fff;
  padding: 0.25rem 0.5rem;
  font-size: 11px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: #0f172a;
  box-shadow: 0 4px 14px rgb(0 0 0 / 0.12);
}
.ptl-chip-month {
  margin-right: 0.25rem;
  color: rgb(15 23 42 / 0.5);
}
@media (prefers-color-scheme: dark) {
  .ptl-chip {
    border-color: rgb(255 255 255 / 0.15);
    background: #12151a;
    color: #fff;
    box-shadow: 0 4px 14px rgb(0 0 0 / 0.45);
  }
  .ptl-chip-month {
    color: rgb(255 255 255 / 0.45);
  }
}
.ptl-footer {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 0.75rem;
  font-size: 11px;
  color: rgb(15 23 42 / 0.5);
}
@media (prefers-color-scheme: dark) {
  .ptl-footer {
    color: rgb(255 255 255 / 0.4);
  }
}
.ptl-delta {
  font-weight: 600;
}
@keyframes ptl-draw {
  from {
    stroke-dashoffset: 1;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ptl-line--animate {
    animation-duration: 1ms;
  }
}
</style>

Monthly signups

Nearby

Monthly signups