"use client";

import { InlineLabeledBarChart, type InlineLabeledBarChartRow } from "./index";

export interface DemoProps {
  accentColor?: string;
  barRadius?: number;
  rowHeight?: number;
  animate?: boolean;
}

const ROWS: InlineLabeledBarChartRow[] = [
  { label: "Jan", value: 214 },
  { label: "Feb", value: 268 },
  { label: "Mar", value: 241 },
  { label: "Apr", value: 312 },
  { label: "May", value: 356 },
  { label: "Jun", value: 398 },
];

/** Demo props mirror meta.json controls; defaults must match the control defaults. */
export default function Demo({ accentColor = "#38BDF8", barRadius = 4, rowHeight = 30, animate = true }: DemoProps) {
  return (
    <div className="flex w-full justify-center p-6">
      <InlineLabeledBarChart
        title="Newsletter signups"
        caption="Jan – Jun 2026"
        rows={ROWS}
        accentColor={accentColor}
        barRadius={barRadius}
        rowHeight={rowHeight}
        animate={animate}
        className="w-full max-w-md"
      />
    </div>
  );
}

1e:T1d78, 1f:T185b0,

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

const props = withDefaults(
  defineProps<{
    accentColor?: string;
    barRadius?: number;
    rowHeight?: number;
    animate?: boolean;
  }>(),
  { accentColor: "#38BDF8", barRadius: 4, rowHeight: 30, animate: true },
);

interface Row {
  label: string;
  value: number;
}

const rows: Row[] = [
  { label: "Jan", value: 214 },
  { label: "Feb", value: 268 },
  { label: "Mar", value: 241 },
  { label: "Apr", value: 312 },
  { label: "May", value: 356 },
  { label: "Jun", value: 398 },
];

const BAR_MAX_PCT = 85;
const STAGGER_MS = 80;
const BAR_DURATION_MS = 700;

const maxValue = Math.max(1, ...rows.map((r) => r.value));

function pct(value: number): number {
  return (value / maxValue) * BAR_MAX_PCT;
}

function formatNumber(value: number): string {
  const whole = Math.round(Math.abs(value)).toString();
  return `${value < 0 ? "-" : ""}${whole.replace(/\B(?=(\d{3})+(?!\d))/g, ",")}`;
}

const reducedMotion = typeof window !== "undefined" && !!window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
const effectiveAnimate = props.animate && !reducedMotion;

const mounted = ref(!effectiveAnimate);
onMounted(() => {
  if (effectiveAnimate) requestAnimationFrame(() => requestAnimationFrame(() => (mounted.value = true)));
});

const hoverIndex = ref<number | null>(null);
const focusIndex = ref<number | null>(null);
const rowEls = ref<Array<HTMLButtonElement | null>>([]);
const highlighted = computed(() => hoverIndex.value ?? focusIndex.value);

function setRowEl(el: Element | null, i: number) {
  rowEls.value[i] = (el as HTMLButtonElement) ?? null;
}

function onKeydown(event: KeyboardEvent, i: number) {
  if (event.key !== "ArrowDown" && event.key !== "ArrowUp") return;
  event.preventDefault();
  const dir = event.key === "ArrowDown" ? 1 : -1;
  const next = Math.min(Math.max(i + dir, 0), rows.length - 1);
  rowEls.value[next]?.focus();
}

const first = rows[0]?.value ?? 0;
const last = rows[rows.length - 1]?.value ?? 0;
const changePct = first === 0 ? 0 : Math.round(((last - first) / Math.abs(first)) * 100);
const changeText = `${changePct >= 0 ? "+" : ""}${changePct}%`;

const trendPoints = (() => {
  if (rows.length < 2) return "";
  const values = rows.map((r) => r.value);
  const lo = Math.min(...values);
  const span = Math.max(...values) - lo || 1;
  const w = 56;
  const h = 18;
  const pad = 2;
  return rows
    .map((row, i) => {
      const x = (i / (rows.length - 1)) * w;
      const y = pad + (1 - (row.value - lo) / span) * (h - pad * 2);
      return `${x.toFixed(1)},${y.toFixed(1)}`;
    })
    .join(" ");
})();
</script>

<template>
  <div class="ilbc" :style="{ '--ilbc-accent': accentColor }" :class="{ 'ilbc--instant': !effectiveAnimate }">
    <div class="ilbc__head">
      <h3 class="ilbc__title">Newsletter signups</h3>
      <span class="ilbc__caption">Jan – Jun 2026</span>
    </div>

    <div class="ilbc__rows">
      <button
        v-for="(row, i) in rows"
        :key="row.label"
        :ref="(el) => setRowEl(el as Element | null, i)"
        type="button"
        class="ilbc__row"
        :tabindex="i === (focusIndex ?? 0) ? 0 : -1"
        :aria-label="`${row.label}, ${formatNumber(row.value)}`"
        :style="{ height: rowHeight + 'px', borderRadius: barRadius + 'px' }"
        @mouseenter="hoverIndex = i"
        @mouseleave="hoverIndex = hoverIndex === i ? null : hoverIndex"
        @focus="focusIndex = i"
        @blur="focusIndex = focusIndex === i ? null : focusIndex"
        @keydown="onKeydown($event, i)"
      >
        <span
          class="ilbc__bar"
          :class="{ 'ilbc__bar--active': highlighted === i }"
          :style="{
            width: (mounted ? pct(row.value) : 0) + '%',
            borderRadius: barRadius + 'px',
            transitionDelay: i * STAGGER_MS + 'ms',
          }"
        />
        <span
          class="ilbc__label"
          :class="{ 'ilbc__label--in': mounted }"
          :style="{ transitionDelay: i * STAGGER_MS + BAR_DURATION_MS * 0.65 + 'ms' }"
        >{{ row.label }}</span>
        <span
          class="ilbc__value"
          :class="{ 'ilbc__value--in': mounted, 'ilbc__value--active': highlighted === i }"
          :style="{ left: `calc(${pct(row.value)}% + 8px)`, transitionDelay: i * STAGGER_MS + BAR_DURATION_MS * 0.85 + 'ms' }"
        >{{ formatNumber(row.value) }}</span>
      </button>
    </div>

    <div class="ilbc__foot" v-if="rows.length > 1">
      <svg width="56" height="18" viewBox="0 0 56 18" aria-hidden="true">
        <polyline :points="trendPoints" fill="none" :stroke="accentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" opacity="0.75" />
      </svg>
      <span class="ilbc__trend">{{ changeText }} since {{ rows[0].label }}</span>
    </div>
  </div>
</template>

<style scoped>
.ilbc {
  position: relative;
  width: 100%;
  border-radius: 16px;
  border: 1px solid 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);
  padding: 20px;
  font-family: system-ui, sans-serif;
}
.ilbc__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.ilbc__title {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
}
.ilbc__caption {
  flex-shrink: 0;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: rgb(255 255 255 / 0.4);
}
.ilbc__rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ilbc__row {
  position: relative;
  display: block;
  width: 100%;
  border: 0;
  padding: 0;
  background: none;
  text-align: left;
  cursor: default;
  user-select: none;
  outline: none;
}
.ilbc__row:focus-visible {
  box-shadow: 0 0 0 2px var(--ilbc-accent);
}
.ilbc__bar {
  position: absolute;
  inset: 0 auto 0 0;
  display: block;
  background: var(--ilbc-accent);
  transition:
    width 700ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 160ms ease;
}
.ilbc__bar--active {
  filter: brightness(1.18) saturate(1.05);
}
.ilbc__label {
  position: absolute;
  top: 50%;
  left: 8px;
  transform: translateY(-50%);
  pointer-events: none;
  font-size: 11px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: #0b0d10;
  opacity: 0;
  transition: opacity 300ms ease;
}
.ilbc__label--in {
  opacity: 1;
}
.ilbc__value {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  color: rgb(255 255 255 / 0.45);
  opacity: 0;
  transition:
    opacity 300ms ease,
    color 150ms ease,
    font-weight 150ms ease;
}
.ilbc__value--in {
  opacity: 1;
}
.ilbc__value--active {
  font-weight: 600;
  color: rgb(255 255 255 / 0.85);
}
.ilbc--instant .ilbc__bar,
.ilbc--instant .ilbc__label,
.ilbc--instant .ilbc__value {
  transition-duration: 0ms;
  transition-delay: 0ms !important;
}
.ilbc__foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid rgb(255 255 255 / 0.1);
}
.ilbc__foot svg {
  flex-shrink: 0;
  overflow: visible;
}
.ilbc__trend {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: rgb(255 255 255 / 0.4);
}
@media (prefers-reduced-motion: reduce) {
  .ilbc__bar,
  .ilbc__label,
  .ilbc__value {
    transition-duration: 0ms !important;
    transition-delay: 0ms !important;
  }
}
</style>

Newsletter signups

Nearby

Newsletter signups