"use client";

import { ValueLabeledLine } from "./index";

export interface DemoProps {
  accent?: string;
  showValues?: boolean;
  labelOffset?: number;
  strokeWidth?: number;
  showGrid?: boolean;
}

/** Demo props mirror meta.json controls; defaults must match the control defaults. */
export default function Demo({ accent = "#F5C542", showValues = true, labelOffset = 12, strokeWidth = 2, showGrid = true }: DemoProps) {
  return (
    <div className="w-full p-4 sm:p-6">
      <ValueLabeledLine
        title="Monthly recurring revenue"
        caption="Apr - Sep 2026"
        months={["Apr", "May", "Jun", "Jul", "Aug", "Sep"]}
        data={[86, 94, 91, 108, 121, 134]}
        prefix="$"
        suffix="k"
        accent={accent}
        showValues={showValues}
        labelOffset={labelOffset}
        strokeWidth={strokeWidth}
        showGrid={showGrid}
      />
    </div>
  );
}

1d:T2d48, 1e:T27788,

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

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

const VB_W = 560;
const CHART_H = 200;
const PAD_X = 14;
const PAD_BOTTOM = 26;
const GRID_FRACTIONS = [0, 1 / 3, 2 / 3, 1];
const DRAW_DURATION = 0.9;

const props = withDefaults(
  defineProps<{
    title?: string;
    caption?: string;
    months?: string[];
    data?: number[];
    prefix?: string;
    suffix?: string;
    accent?: string;
    showValues?: boolean;
    labelOffset?: number;
    strokeWidth?: number;
    showGrid?: boolean;
  }>(),
  {
    title: "Monthly recurring revenue",
    caption: "Apr - Sep 2026",
    months: () => ["Apr", "May", "Jun", "Jul", "Aug", "Sep"],
    data: () => [86, 94, 91, 108, 121, 134],
    prefix: "$",
    suffix: "k",
    accent: "#F5C542",
    showValues: true,
    labelOffset: 12,
    strokeWidth: 2,
    showGrid: 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}`;
}

/** Where each point lands inside the plot, with the top padding grown by the label offset. */
function project(values: number[], padTop: number): Point[] {
  const lo = Math.min(...values);
  const hi = Math.max(...values);
  const span = hi - lo || 1;
  const usableW = VB_W - PAD_X * 2;
  const plotH = CHART_H - padTop - PAD_BOTTOM;
  const last = Math.max(values.length - 1, 1);
  return values.map((v, i) => ({
    x: PAD_X + (i / last) * usableW,
    y: padTop + (1 - (v - lo) / span) * plotH,
  }));
}

/** A smooth curve through every point using a midpoint-tangent cubic between neighbours. */
function buildPath(pts: Point[]): string {
  if (pts.length < 2) return pts.length ? `M ${pts[0].x} ${pts[0].y}` : "";
  let d = `M ${pts[0].x.toFixed(2)} ${pts[0].y.toFixed(2)}`;
  for (let i = 0; i < pts.length - 1; i++) {
    const a = pts[i];
    const b = pts[i + 1];
    const cx = (a.x + b.x) / 2;
    d += ` C ${cx.toFixed(2)} ${a.y.toFixed(2)} ${cx.toFixed(2)} ${b.y.toFixed(2)} ${b.x.toFixed(2)} ${b.y.toFixed(2)}`;
  }
  return d;
}

/** "start" for the first point and "end" for the last so their labels never spill past the frame. */
function anchorFor(index: number, count: number): "start" | "middle" | "end" {
  if (index === 0) return "start";
  if (index === count - 1) return "end";
  return "middle";
}

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

const n = computed(() => props.data.length);
const padTop = computed(() => Math.max(props.labelOffset + 18, 24));
const pts = computed(() => (n.value > 0 ? project(props.data, padTop.value) : []));
const linePath = computed(() => buildPath(pts.value));
const cursor = computed(() => (active.value !== null ? (pts.value[active.value] ?? null) : null));
const gridLines = computed(() => GRID_FRACTIONS.map((f) => padTop.value + f * (CHART_H - padTop.value - PAD_BOTTOM)));

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 chipBelow = computed(() => (cursor.value ? cursor.value.y < CHART_H * 0.4 : false));
const ariaLabel = computed(() => `${props.title} line chart, ${props.months[0]} through ${props.months[n.value - 1]}, use left and right arrow keys to inspect each month`);

function labelDelay(i: number): number {
  return 0.12 + (i / Math.max(n.value - 1, 1)) * DRAW_DURATION * 0.85;
}

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 (n.value < 1) 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="vll-card">
    <div class="vll-head">
      <h3 class="vll-title">{{ title }}</h3>
      <span class="vll-caption">{{ caption }}</span>
    </div>

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

      <svg :viewBox="`0 0 ${VB_W} ${CHART_H}`" preserveAspectRatio="none" class="vll-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="vll-grid" />
        </template>

        <path
          v-if="pts.length > 1"
          :d="linePath"
          fill="none"
          :stroke="accent"
          :stroke-width="strokeWidth"
          stroke-linecap="round"
          stroke-linejoin="round"
          path-length="1"
          class="vll-line"
        />

        <g v-for="(p, i) in pts" :key="'mark' + i">
          <circle v-if="active === i" class="vll-ring" :cx="p.x" :cy="p.y" r="9" fill="none" :stroke="accent" stroke-width="2" />
          <circle class="vll-dot" :cx="p.x" :cy="p.y" :r="active === i ? 4 : 3" :fill="accent" />
        </g>

        <template v-if="showValues">
          <text
            v-for="(p, i) in pts"
            :key="'val' + i"
            class="vll-value"
            :class="{ 'vll-value--active': active === i, 'vll-value--dim': active !== null && active !== i }"
            :x="p.x"
            :y="p.y - labelOffset"
            :text-anchor="anchorFor(i, n)"
            :style="{ animationDelay: labelDelay(i) + 's' }"
          >{{ prefix }}{{ fmt(data[i]) }}{{ suffix }}</text>
        </template>

        <text v-for="(m, i) in months" :key="'m' + i" class="vll-month" :x="pts[i]?.x ?? 0" :y="CHART_H - 8" :text-anchor="anchorFor(i, n)">{{ m }}</text>
      </svg>

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

    <div class="vll-footer">
      <svg width="11" height="11" viewBox="0 0 24 24" fill="none" :stroke="accent" 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="vll-delta" :style="{ color: accent }">{{ deltaText }}</span>
      <span>since {{ months[0] }}</span>
    </div>
  </div>
</template>

<style scoped>
.vll-card {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  padding: 1.25rem;
  border: 1px solid color-mix(in srgb, currentColor 10%, transparent);
  border-radius: 1rem;
  background: color-mix(in srgb, currentColor 3%, transparent);
  color: inherit;
  font-family: system-ui, sans-serif;
}
.vll-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}
.vll-title {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: color-mix(in srgb, currentColor 85%, transparent);
}
.vll-caption {
  flex-shrink: 0;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, currentColor 40%, transparent);
}
.vll-plot {
  position: relative;
  margin-top: 1rem;
  width: 100%;
  cursor: crosshair;
  border-radius: 10px;
  outline: none;
}
.vll-plot:focus-visible {
  box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 40%, transparent);
}
.vll-live {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.vll-svg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.vll-grid {
  stroke: color-mix(in srgb, currentColor 8%, transparent);
  stroke-width: 1;
}
.vll-line {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: vll-draw v-bind(DRAW_DURATION + "s") cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.vll-ring {
  transform-box: fill-box;
  transform-origin: center;
  animation: vll-pop 0.16s ease-out;
}
.vll-dot {
  transition: r 0.16s ease;
}
.vll-value {
  font-size: 12px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  fill: currentColor;
  opacity: 0;
  transform: translateY(6px);
  animation: vll-rise 0.32s ease forwards;
  transition: opacity 0.15s ease, font-weight 0.15s ease;
}
.vll-value--active {
  font-weight: 700;
}
.vll-value--dim {
  opacity: 0.35 !important;
}
.vll-month {
  font-size: 10px;
  font-weight: 500;
  fill: color-mix(in srgb, currentColor 35%, transparent);
}
.vll-chip {
  position: absolute;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  transform: translateX(-50%);
  white-space: nowrap;
  pointer-events: none;
  border: 1px solid color-mix(in srgb, currentColor 15%, transparent);
  border-radius: 7px;
  background: color-mix(in srgb, currentColor 8%, transparent);
  padding: 0.25rem 0.5rem;
  font-size: 11px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: currentColor;
  box-shadow: 0 4px 10px rgb(0 0 0 / 0.12);
}
.vll-chip-bar {
  display: inline-block;
  width: 3px;
  height: 12px;
  border-radius: 9999px;
}
.vll-chip-month {
  color: color-mix(in srgb, currentColor 45%, transparent);
}
.vll-chip-value {
  font-weight: 600;
}
.vll-footer {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 0.75rem;
  font-size: 11px;
  color: color-mix(in srgb, currentColor 40%, transparent);
}
.vll-delta {
  font-weight: 600;
}
@keyframes vll-draw {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes vll-pop {
  from {
    transform: scale(0.4);
    opacity: 0.4;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes vll-rise {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .vll-line {
    animation-duration: 1ms;
  }
  .vll-value {
    animation-duration: 1ms;
    opacity: 1;
    transform: translateY(0);
  }
  .vll-ring {
    animation-duration: 1ms;
  }
}
</style>

Monthly recurring revenue

Nearby

Monthly recurring revenue