"use client";

import { SessionsLineStatCard } from "./index";

export interface DemoProps {
  title?: string;
  accentColor?: string;
  strokeWidth?: number;
  smoothing?: number;
  trend?: number;
}

/** Demo props mirror meta.json controls; defaults must match the control defaults. */
export default function Demo({ title = "Active Sessions", accentColor = "#9BE15D", strokeWidth = 2.5, smoothing = 0.8, trend = 8.2 }: DemoProps) {
  return (
    <div className="flex w-full items-center justify-center p-8">
      <SessionsLineStatCard title={title} accentColor={accentColor} strokeWidth={strokeWidth} smoothing={smoothing} trend={trend} className="w-full" />
    </div>
  );
}

1d:T2c88, 1e:T2770a,

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

const props = withDefaults(
  defineProps<{
    title?: string;
    accentColor?: string;
    strokeWidth?: number;
    smoothing?: number;
    trend?: number;
  }>(),
  { title: "Active Sessions", accentColor: "#9BE15D", strokeWidth: 2.5, smoothing: 0.8, trend: 8.2 },
);

interface DayPoint {
  label: string;
  value: number;
}
interface Pt {
  x: number;
  y: number;
}

const VB_W = 400;
const VB_H = 160;
const PAD_Y = 18;
const ROW_H = 34;
const DIGITS = Array.from({ length: 10 }, (_, i) => i);
const WEEKDAYS = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];
const NOISE = [0.03, -0.05, 0.07, -0.02, 0.09, -0.07, 0.04];
const BASE_SESSIONS = 640;
const NEGATIVE_COLOR = "#FB7185";

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 buildWeek(trend: number): { week: DayPoint[]; baseline: number } {
  const week = WEEKDAYS.map((label, i) => {
    const t = i / (WEEKDAYS.length - 1);
    const trendFactor = 1 + (trend / 100) * t;
    const value = Math.round(BASE_SESSIONS * trendFactor * (1 + NOISE[i]));
    return { label, value };
  });
  return { week, baseline: BASE_SESSIONS };
}

function buildPath(pts: Pt[], smoothing: number): string {
  if (pts.length < 2) return "";
  const r = (v: number) => Math.round(v * 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;
    d +=
      ` C ${r(p1.x + ((p2.x - p0.x) / 6) * smoothing)} ${r(p1.y + ((p2.y - p0.y) / 6) * smoothing)}` +
      ` ${r(p2.x - ((p3.x - p1.x) / 6) * smoothing)} ${r(p2.y - ((p3.y - p1.y) / 6) * smoothing)}` +
      ` ${r(p2.x)} ${r(p2.y)}`;
  }
  return d;
}

const reduce = ref(false);
const revealed = ref(false);
const active = ref<number | null>(null);
const liveText = ref("");
const lastActive = ref(0);
const hostEl = ref<HTMLDivElement | null>(null);
/** 0 to 1 draw progress; the path uses pathLength="1" so this is independent of its actual geometry. */
const progress = ref(0);
let rafId = 0;

const built = computed(() => buildWeek(props.trend));
const week = computed(() => built.value.week);
const baseline = computed(() => built.value.baseline);
const n = computed(() => week.value.length);
const values = computed(() => week.value.map((d) => d.value));
const lo = computed(() => Math.min(...values.value));
const hi = computed(() => Math.max(...values.value));
const span = computed(() => hi.value - lo.value || 1);
const pts = computed<Pt[]>(() =>
  week.value.map((d, i) => ({
    x: (i / (n.value - 1)) * VB_W,
    y: PAD_Y + (1 - (d.value - lo.value) / span.value) * (VB_H - PAD_Y * 2),
  })),
);
const pathD = computed(() => buildPath(pts.value, props.smoothing));
const weeklyAvg = computed(() => Math.round(values.value.reduce((a, b) => a + b, 0) / n.value));

const dotIndex = computed(() => active.value ?? lastActive.value);
const dotPt = computed(() => pts.value[dotIndex.value]);

const displayValue = computed(() => (active.value === null ? weeklyAvg.value : week.value[active.value].value));
const displayDigits = computed(() => String(revealed.value ? displayValue.value : 0).split("").map(Number));
const caption = computed(() => (active.value === null ? "Weekly avg" : week.value[active.value].label));
const changePct = computed(() => {
  const a = active.value;
  if (a === null) return props.trend;
  if (a === 0) return ((week.value[0].value - baseline.value) / baseline.value) * 100;
  return ((week.value[a].value - week.value[a - 1].value) / week.value[a - 1].value) * 100;
});
const positive = computed(() => changePct.value >= 0);
const pillLabel = computed(() => `${positive.value ? "+" : "-"}${Math.abs(changePct.value).toFixed(1)}%`);
const pillColor = computed(() => (positive.value ? props.accentColor : NEGATIVE_COLOR));
const ariaLabel = computed(
  () => `${props.title}. ${caption.value}, ${displayValue.value} sessions. Use arrow keys to scrub the week, Home and End for the ends, Escape to reset.`,
);

watch([active, caption, displayValue, positive, changePct], () => {
  if (!revealed.value) return;
  liveText.value = `${caption.value}, ${displayValue.value} sessions, ${positive.value ? "up" : "down"} ${Math.abs(changePct.value).toFixed(1)} percent`;
});

function setActive(v: number | null) {
  if (v !== null) lastActive.value = v;
  active.value = v;
}

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

function nudge(dir: number) {
  const cur = active.value;
  const from = cur === null ? (dir > 0 ? -1 : n.value) : cur;
  setActive(Math.max(0, Math.min(from + dir, n.value - 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();
    setActive(0);
  } else if (e.key === "End") {
    e.preventDefault();
    setActive(n.value - 1);
  } else if (e.key === "Escape") {
    setActive(null);
  }
}

onMounted(() => {
  reduce.value = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
  if (reduce.value) {
    progress.value = 1;
    revealed.value = true;
    return;
  }
  const duration = 1050;
  const start = performance.now();
  const ease = (t: number) => 1 - Math.pow(1 - t, 3);
  const step = (now: number) => {
    const t = Math.min((now - start) / duration, 1);
    progress.value = ease(t);
    if (t < 1) {
      rafId = requestAnimationFrame(step);
    } else {
      revealed.value = true;
    }
  };
  rafId = requestAnimationFrame(step);
});

onUnmounted(() => cancelAnimationFrame(rafId));
</script>

<template>
  <div class="slsc" :style="{ '--slsc-accent': accentColor }">
    <div class="slsc__head">
      <h3 class="slsc__title">{{ title }}</h3>
      <span class="slsc__pill" :style="{ color: pillColor, background: alpha(pillColor, 0.12) }">
        <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" :style="{ transform: positive ? undefined : 'rotate(180deg)' }">
          <path d="M12 19.5V5" />
          <path d="M5.5 11.5 12 5l6.5 6.5" />
        </svg>
        {{ pillLabel }}
      </span>
    </div>

    <div
      ref="hostEl"
      class="slsc__plot"
      role="img"
      tabindex="0"
      :aria-label="ariaLabel"
      @pointermove="pick($event.clientX)"
      @pointerleave="setActive(null)"
      @blur="setActive(null)"
      @keydown="onKeyDown"
    >
      <svg :viewBox="`0 0 ${VB_W} ${VB_H}`" preserveAspectRatio="none" class="slsc__svg" aria-hidden="true">
        <path
          :d="pathD"
          fill="none"
          :stroke="accentColor"
          :stroke-width="strokeWidth"
          stroke-linecap="round"
          stroke-linejoin="round"
          pathLength="1"
          :style="{ strokeDasharray: 1, strokeDashoffset: 1 - progress }"
        />
        <circle
          v-if="dotPt"
          :cx="dotPt.x"
          :cy="dotPt.y"
          r="5"
          stroke="var(--slsc-surface)"
          stroke-width="3"
          :fill="accentColor"
          class="slsc__dot"
          :class="{ 'slsc__dot--on': active !== null }"
        />
      </svg>

      <div class="slsc__reading">
        <span class="slsc__sr">{{ displayValue }} sessions</span>
        <span class="slsc__value" aria-hidden="true">
          <span v-for="(d, i) in displayDigits" :key="i" class="slsc__digit">
            <span class="slsc__digit-track" :style="{ transform: `translateY(${-d * ROW_H}px)` }">
              <span v-for="n in DIGITS" :key="n" class="slsc__digit-cell">{{ n }}</span>
            </span>
          </span>
        </span>
        <span class="slsc__caption">{{ caption }}</span>
      </div>
    </div>

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

<style scoped>
.slsc {
  position: relative;
  width: 100%;
  max-width: 420px;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid rgb(0 0 0 / 0.1);
  background: #fff;
  padding: 1rem;
  --slsc-surface: #ffffff;
  color: #0f172a;
  font-family: system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  .slsc {
    border-color: rgb(255 255 255 / 0.1);
    background: #12161a;
    --slsc-surface: #12161a;
    color: #fff;
  }
}
.slsc__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.slsc__title {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  color: rgb(71 85 105);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (prefers-color-scheme: dark) {
  .slsc__title {
    color: rgb(255 255 255 / 0.7);
  }
}
.slsc__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border-radius: 6px;
  padding: 0.125rem 0.5rem;
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.slsc__plot {
  position: relative;
  margin: 0.75rem -1rem 0;
  aspect-ratio: 2.5 / 1;
  cursor: crosshair;
  outline: none;
}
.slsc__plot:focus-visible {
  box-shadow: inset 0 0 0 2px rgb(255 255 255 / 0.3);
}
.slsc__svg {
  display: block;
  width: 100%;
  height: 100%;
}
.slsc__dot {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0.6);
  transition:
    opacity 220ms ease,
    transform 220ms ease,
    cx 220ms ease,
    cy 220ms ease;
}
.slsc__dot--on {
  opacity: 1;
  transform: scale(1);
}
.slsc__reading {
  position: absolute;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding: 0 0.25rem 0.25rem;
  text-align: right;
  pointer-events: none;
}
.slsc__value {
  display: inline-flex;
  font-size: 30px;
  line-height: 1;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.slsc__digit {
  position: relative;
  display: inline-block;
  height: 34px;
  width: 0.62em;
  overflow: hidden;
  vertical-align: top;
}
.slsc__digit-track {
  position: absolute;
  inset-inline: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}
.slsc__digit-cell {
  display: flex;
  height: 34px;
  align-items: center;
  justify-content: center;
}
.slsc__caption {
  margin-top: 0.125rem;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(100 116 139);
}
@media (prefers-color-scheme: dark) {
  .slsc__caption {
    color: rgb(255 255 255 / 0.4);
  }
}
.slsc__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) {
  .slsc__digit-track,
  .slsc__dot {
    transition-duration: 1ms;
  }
}
</style>

Active Sessions

Nearby

Active Sessions