"use client";

import { MetricSwitchBarChart, type ChartMetricKey } from "./index";

export interface DemoProps {
  accentColor?: string;
  secondColor?: string;
  days?: number;
  defaultMetric?: string;
  animate?: boolean;
}

/** Demo props mirror meta.json controls; defaults must match the control defaults. */
export default function Demo({ accentColor = "#FF6A1F", secondColor = "#38BDF8", days = 90, defaultMetric = "visits", animate = true }: DemoProps) {
  return (
    <div className="w-full p-4 sm:p-6">
      <MetricSwitchBarChart accentColor={accentColor} secondColor={secondColor} days={days} defaultMetric={defaultMetric as ChartMetricKey} animate={animate} />
    </div>
  );
}

1d:T32c6, 1e:T29a46,

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

type ChartMetricKey = "visits" | "signups";

const props = withDefaults(
  defineProps<{
    accentColor?: string;
    secondColor?: string;
    days?: number;
    defaultMetric?: ChartMetricKey;
    animate?: boolean;
  }>(),
  { accentColor: "#FF6A1F", secondColor: "#38BDF8", days: 90, defaultMetric: "visits", animate: true },
);

interface MetricDef {
  key: ChartMetricKey;
  label: string;
  seed: number;
  base: number;
  amp: number;
}

const METRICS: MetricDef[] = [
  { key: "visits", label: "Visits", seed: 8821, base: 1480, amp: 420 },
  { key: "signups", label: "Signups", seed: 5170, base: 96, amp: 46 },
];

const BAR_AREA_H = 220;
const MIN_LABEL_GAP = 54;
const MONTHS = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
const DAYS_IN_MONTH = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
const WEEKDAYS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
const ANCHOR_MONTH = 7;
const ANCHOR_DAY = 14;
const ANCHOR_WEEKDAY = 5;

function mulberry32(seed: number) {
  let a = seed >>> 0;
  return function next() {
    a = (a + 0x6d2b79f5) | 0;
    let t = Math.imul(a ^ (a >>> 15), 1 | a);
    t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
  };
}
function calendarAt(offset: number): { month: number; day: number; weekday: number } {
  let month = ANCHOR_MONTH;
  let day = ANCHOR_DAY + offset;
  while (day > DAYS_IN_MONTH[month]) {
    day -= DAYS_IN_MONTH[month];
    month = (month + 1) % 12;
  }
  return { month, day, weekday: (ANCHOR_WEEKDAY + offset) % 7 };
}
function shortDate(offset: number): string {
  const d = calendarAt(offset);
  return `${MONTHS[d.month]} ${d.day}`;
}
function longDate(offset: number): string {
  const d = calendarAt(offset);
  return `${WEEKDAYS[d.weekday]}, ${MONTHS[d.month]} ${d.day}`;
}
function buildSeries(def: MetricDef, days: number): number[] {
  const rand = mulberry32(def.seed);
  const out: number[] = [];
  let level = def.base;
  for (let i = 0; i < days; i++) {
    const weekend = calendarAt(i).weekday === 0 || calendarAt(i).weekday === 6;
    level += (rand() - 0.5) * def.amp * 0.16;
    level = Math.max(def.base * 0.55, Math.min(def.base * 1.55, level));
    const noise = (rand() - 0.5) * def.amp * 0.85;
    const raw = (level + noise) * (weekend ? 0.7 : 1);
    out.push(Math.max(3, Math.round(raw)));
  }
  return out;
}
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 fmt(v: number): string {
  return Math.round(v)
    .toString()
    .replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
function pickLabels(n: number, width: number): number[] {
  if (n < 2 || width <= 0) return n ? [0] : [];
  const slot = width / n;
  const centerX = (i: number) => i * slot + slot / 2;
  const maxTicks = Math.max(2, Math.floor(width / MIN_LABEL_GAP));
  const stride = Math.max(1, Math.round((n - 1) / (maxTicks - 1)));
  const out: number[] = [];
  for (let i = 0; i < n - 1; i += stride) out.push(i);
  // The last tick is right-aligned while every other tick is centered, so it needs a full
  // label's worth of pixel clearance from its neighbor, not just a fraction of the stride.
  if (out.length > 0 && centerX(n - 1) - centerX(out[out.length - 1]) < MIN_LABEL_GAP) out.pop();
  out.push(n - 1);
  return out;
}

const metric = ref<ChartMetricKey>(props.defaultMetric);
const hover = ref<number | null>(null);
const width = ref(0);
const reduceMotion = ref(false);
const hostRef = ref<HTMLDivElement | null>(null);
const tileRefs = reactive<Partial<Record<ChartMetricKey, HTMLButtonElement>>>({});
let ro: ResizeObserver | undefined;
let mql: MediaQueryList | undefined;
const onMqlChange = () => {
  reduceMotion.value = !!mql?.matches;
};

onMounted(() => {
  if (hostRef.value) {
    const measure = () => {
      width.value = hostRef.value?.clientWidth ?? 0;
    };
    measure();
    ro = new ResizeObserver(measure);
    ro.observe(hostRef.value);
  }
  mql = window.matchMedia("(prefers-reduced-motion: reduce)");
  reduceMotion.value = mql.matches;
  mql.addEventListener("change", onMqlChange);
});
onBeforeUnmount(() => {
  ro?.disconnect();
  mql?.removeEventListener("change", onMqlChange);
});

const n = computed(() => Math.max(30, Math.min(120, Math.round(props.days))));
const series = computed(() => {
  const map = {} as Record<ChartMetricKey, number[]>;
  for (const m of METRICS) map[m.key] = buildSeries(m, n.value);
  return map;
});
const totals = computed(() => {
  const map = {} as Record<ChartMetricKey, number>;
  for (const m of METRICS) map[m.key] = series.value[m.key].reduce((s, v) => s + v, 0);
  return map;
});
const color = computed(() => (metric.value === "visits" ? props.accentColor : props.secondColor));
const values = computed(() => series.value[metric.value]);
const domainMax = computed(() => Math.max(...values.value) * 1.12 || 1);
const slot = computed(() => (width.value > 0 ? width.value / values.value.length : 0));
const barW = computed(() => Math.max(1.5, slot.value * 0.66));
const bars = computed(() =>
  values.value.map((v, i) => {
    const h = (v / domainMax.value) * BAR_AREA_H;
    return { x: i * slot.value + slot.value / 2, y: BAR_AREA_H - h, height: h };
  }),
);
const labelIdx = computed(() => pickLabels(values.value.length, width.value));
const barDur = computed(() => (reduceMotion.value || !props.animate ? "0ms" : "550ms"));
const activeVal = computed(() => (hover.value === null ? null : values.value[hover.value]));
const cursor = computed(() => (hover.value === null ? null : bars.value[hover.value]));
const activeLabel = computed(() => METRICS.find((m) => m.key === metric.value)?.label ?? "");

function setTileRef(key: ChartMetricKey, el: HTMLButtonElement | null) {
  if (el) tileRefs[key] = el;
}
function pick(clientX: number) {
  if (!hostRef.value || slot.value <= 0) return;
  const x = clientX - hostRef.value.getBoundingClientRect().left;
  hover.value = Math.max(0, Math.min(Math.floor(x / slot.value), values.value.length - 1));
}
function nudge(dir: number) {
  const base = hover.value === null ? values.value.length - 1 : hover.value;
  hover.value = Math.max(0, Math.min(base + dir, values.value.length - 1));
}
function moveTile(from: ChartMetricKey, dir: number) {
  const idx = METRICS.findIndex((m) => m.key === from);
  const next = METRICS[(idx + dir + METRICS.length) % METRICS.length];
  tileRefs[next.key]?.focus();
}
function onPlotKeydown(e: KeyboardEvent) {
  if (e.key === "ArrowRight" || e.key === "ArrowLeft") {
    e.preventDefault();
    nudge(e.key === "ArrowRight" ? 1 : -1);
  } else if (e.key === "Home") {
    e.preventDefault();
    hover.value = 0;
  } else if (e.key === "End") {
    e.preventDefault();
    hover.value = values.value.length - 1;
  } else if (e.key === "Escape") hover.value = null;
}
</script>

<template>
  <div class="chart" :style="{ '--bar-dur': barDur }">
    <div class="tiles">
      <div class="tile-tint" :style="{ transform: `translateX(${METRICS.findIndex((m) => m.key === metric) * 100}%)`, background: alpha(color, 0.1) }" />
      <button
        v-for="(m, i) in METRICS"
        :key="m.key"
        :ref="(el) => setTileRef(m.key, el as HTMLButtonElement | null)"
        type="button"
        class="tile"
        :class="{ divider: i === 0, active: metric === m.key }"
        :aria-pressed="metric === m.key"
        @click="metric = m.key"
        @keydown="
          (e: KeyboardEvent) => {
            if (e.key === 'ArrowRight' || e.key === 'ArrowLeft') {
              e.preventDefault();
              moveTile(m.key, e.key === 'ArrowRight' ? 1 : -1);
            }
          }
        "
      >
        <span class="tile-label">{{ m.label }}</span>
        <span class="tile-total" :style="{ color: metric === m.key ? (m.key === 'visits' ? accentColor : secondColor) : 'rgba(255,255,255,0.82)' }">{{ fmt(totals[m.key]) }}</span>
      </button>
    </div>

    <div class="rule" />

    <div class="plot-pad">
      <div
        ref="hostRef"
        class="plot"
        role="img"
        tabindex="0"
        :aria-label="`${activeLabel} per day over ${values.length} days, total ${fmt(totals[metric])}`"
        @pointermove="(e: PointerEvent) => pick(e.clientX)"
        @pointerleave="hover = null"
        @blur="hover = null"
        @keydown="onPlotKeydown"
      >
        <svg v-if="width > 0" :width="width" :height="BAR_AREA_H" :viewBox="`0 0 ${width} ${BAR_AREA_H}`" class="plot-svg" aria-hidden="true">
          <line v-for="f in [0, 0.33, 0.66, 1]" :key="f" x1="0" :x2="width" :y1="BAR_AREA_H * f" :y2="BAR_AREA_H * f" stroke="rgba(255,255,255,0.07)" stroke-width="1" />
          <rect
            v-for="(b, i) in bars"
            :key="i"
            class="bar"
            :x="b.x - barW / 2"
            :y="b.y"
            :width="barW"
            :height="Math.max(1, b.height)"
            :rx="Math.min(2, barW / 3)"
            :fill="color"
            :opacity="hover !== null && hover !== i ? 0.42 : 1"
          />
        </svg>

        <div
          v-if="cursor && activeVal !== null"
          class="tooltip"
          :style="{ left: Math.min(Math.max(cursor.x, 44), Math.max(width - 44, 44)) + 'px', top: Math.max(cursor.y - 8, 16) + 'px', borderColor: alpha(color, 0.4) }"
        >
          <div class="tooltip-date">{{ longDate(hover as number) }}</div>
          <div class="tooltip-value" :style="{ color }">{{ fmt(activeVal as number) }}</div>
        </div>
      </div>
    </div>

    <div class="rule" />

    <div class="axis-pad">
      <div class="axis">
        <span
          v-for="i in labelIdx"
          :key="i"
          class="axis-label"
          :style="{ left: (bars[i]?.x ?? 0) + 'px', transform: i === 0 ? 'translateX(0%)' : i === values.length - 1 ? 'translateX(-100%)' : 'translateX(-50%)' }"
        >
          {{ shortDate(i) }}
        </span>
      </div>
    </div>
  </div>
</template>

<style scoped>
.chart {
  width: 100%;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid rgb(255 255 255 / 0.1);
  background: #0e1116;
  color: #fff;
  font-family:
    system-ui,
    -apple-system,
    sans-serif;
}
.tiles {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.tile-tint {
  position: absolute;
  inset: 0;
  width: 50%;
  z-index: 0;
  transition:
    transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
    background 220ms ease;
}
.tile {
  position: relative;
  isolation: isolate;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 16px 20px;
  text-align: left;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  outline: none;
  font-family: inherit;
}
.tile.divider {
  border-right: 1px solid rgb(255 255 255 / 0.1);
}
.tile:focus-visible {
  box-shadow: inset 0 0 0 2px rgb(255 255 255 / 0.4);
}
.tile-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.45);
}
.tile-total {
  font-size: 30px;
  line-height: 1;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.rule {
  border-top: 1px solid rgb(255 255 255 / 0.1);
}
.plot-pad {
  padding: 16px 20px;
}
.plot {
  position: relative;
  width: 100%;
  height: 220px;
  touch-action: none;
  cursor: crosshair;
  outline: none;
}
.plot:focus-visible {
  box-shadow: inset 0 0 0 2px rgb(255 255 255 / 0.3);
}
.plot-svg {
  position: absolute;
  inset: 0;
  display: block;
  overflow: visible;
}
.bar {
  transition:
    y var(--bar-dur, 550ms) cubic-bezier(0.22, 1, 0.36, 1),
    height var(--bar-dur, 550ms) cubic-bezier(0.22, 1, 0.36, 1),
    fill var(--bar-dur, 550ms) ease,
    opacity 160ms ease;
}
.tooltip {
  position: absolute;
  z-index: 10;
  transform: translate(-50%, -100%);
  border: 1px solid;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 11px;
  white-space: nowrap;
  background: rgb(11 13 16 / 0.94);
  box-shadow: 0 10px 22px rgb(0 0 0 / 0.5);
  pointer-events: none;
}
.tooltip-date {
  color: rgb(255 255 255 / 0.5);
}
.tooltip-value {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.axis-pad {
  padding: 0 20px 12px;
}
.axis {
  /* No padding of its own: absolute children position from this box's edge, which must line up
     with the plot's own coordinate origin (also unpadded, inside its own .plot-pad wrapper) so a
     label's `left` lands on the bar it names. */
  position: relative;
  height: 26px;
  width: 100%;
}
.axis-label {
  position: absolute;
  top: 6px;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: rgb(255 255 255 / 0.35);
}
@media (prefers-reduced-motion: reduce) {
  .bar,
  .tile-tint {
    transition-duration: 0ms;
  }
}
</style>

Nearby