"use client";

import { ThemedChartFrame, type ThemedChartPoint } from "./index";

export interface DemoProps {
  barGap?: number;
  cornerRadius?: number;
  primaryColor?: string;
  secondaryColor?: string;
  showLegend?: boolean;
}

/** Six months of desktop vs. mobile site visits, mobile catching up toward the end. */
const VISITS: ThemedChartPoint[] = [
  { label: "Mar", a: 8200, b: 5100 },
  { label: "Apr", a: 9100, b: 6300 },
  { label: "May", a: 8700, b: 7200 },
  { label: "Jun", a: 10400, b: 8100 },
  { label: "Jul", a: 11200, b: 9400 },
  { label: "Aug", a: 10800, b: 10100 },
];

/** Demo props mirror meta.json controls; defaults must match the control defaults. */
export default function Demo({ barGap = 4, cornerRadius = 4, primaryColor = "#2563EB", secondaryColor = "#60A5FA", showLegend = true }: DemoProps) {
  return (
    <div className="w-full p-4 sm:p-6">
      <ThemedChartFrame
        data={VISITS}
        seriesALabel="Desktop"
        seriesBLabel="Mobile"
        primaryColor={primaryColor}
        secondaryColor={secondaryColor}
        barGap={barGap}
        cornerRadius={cornerRadius}
        showLegend={showLegend}
      />
    </div>
  );
}

1e:T2710, 1f:T20d65,

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

interface ChartPoint {
  label: string;
  a: number;
  b: number;
}
interface Hover {
  index: number;
  series: "a" | "b";
}

const VB_W = 760;
const VB_H = 300;
const PAD_L = 18;
const PAD_R = 18;
const PAD_T = 20;
const PAD_B = 34;
const PLOT_W = VB_W - PAD_L - PAD_R;
const PLOT_H = VB_H - PAD_T - PAD_B;
const BASE_Y = PAD_T + PLOT_H;

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 {
  const s = Math.round(Math.abs(v)).toString();
  return `${v < 0 ? "-" : ""}${s.replace(/\B(?=(\d{3})+(?!\d))/g, ",")}`;
}

function barPath(x: number, w: number, h: number, r: number): string {
  const rr = Math.max(0, Math.min(r, w / 2, h));
  const top = BASE_Y - h;
  if (rr < 0.5) return `M ${x} ${BASE_Y} L ${x} ${top} L ${x + w} ${top} L ${x + w} ${BASE_Y} Z`;
  return `M ${x} ${BASE_Y} L ${x} ${top + rr} Q ${x} ${top} ${x + rr} ${top} L ${x + w - rr} ${top} Q ${x + w} ${top} ${x + w} ${top + rr} L ${x + w} ${BASE_Y} Z`;
}

const SAMPLE: ChartPoint[] = [
  { label: "Mar", a: 8200, b: 5100 },
  { label: "Apr", a: 9100, b: 6300 },
  { label: "May", a: 8700, b: 7200 },
  { label: "Jun", a: 10400, b: 8100 },
  { label: "Jul", a: 11200, b: 9400 },
  { label: "Aug", a: 10800, b: 10100 },
];

const props = withDefaults(
  defineProps<{
    data?: ChartPoint[];
    seriesALabel?: string;
    seriesBLabel?: string;
    primaryColor?: string;
    secondaryColor?: string;
    barGap?: number;
    cornerRadius?: number;
    showLegend?: boolean;
  }>(),
  {
    seriesALabel: "Desktop",
    seriesBLabel: "Mobile",
    primaryColor: "#2563EB",
    secondaryColor: "#60A5FA",
    barGap: 4,
    cornerRadius: 4,
    showLegend: true,
  },
);

const rows = computed<ChartPoint[]>(() => (props.data && props.data.length ? props.data : SAMPLE));
const count = computed(() => rows.value.length);
const host = ref<HTMLElement | null>(null);
const hover = ref<Hover | null>(null);
const pointer = ref<{ x: number; y: number } | null>(null);
const dimmed = ref<"a" | "b" | null>(null);

const top = computed(() => Math.max(1, ...rows.value.flatMap((d) => [d.a, d.b])) * 1.18);
const slot = computed(() => (count.value ? PLOT_W / count.value : PLOT_W));
const groupW = computed(() => slot.value * 0.64);
const gap = computed(() => Math.min(props.barGap, groupW.value * 0.6));
const barW = computed(() => Math.max(2, (groupW.value - gap.value) / 2));
const radius = computed(() => Math.min(props.cornerRadius, barW.value / 2, PLOT_H / 2));

const bars = computed(() =>
  rows.value.map((d, i) => {
    const slotX = PAD_L + i * slot.value;
    const groupX = slotX + (slot.value - groupW.value) / 2;
    return {
      label: d.label,
      a: d.a,
      b: d.b,
      slotX,
      xa: groupX,
      xb: groupX + barW.value + gap.value,
      ha: (d.a / top.value) * PLOT_H,
      hb: (d.b / top.value) * PLOT_H,
    };
  }),
);

const activeBar = computed(() => (hover.value ? bars.value[hover.value.index] : null));
const activeValue = computed(() => (activeBar.value ? (hover.value!.series === "a" ? activeBar.value.a : activeBar.value.b) : null));
const activeColor = computed(() => (hover.value?.series === "b" ? props.secondaryColor : props.primaryColor));
const activeSeriesLabel = computed(() => (hover.value?.series === "b" ? props.seriesBLabel : props.seriesALabel));
const tipStyle = computed(() => {
  if (!pointer.value) return {};
  const left = Math.min(Math.max(pointer.value.x, 8), 92);
  return {
    left: `${left}%`,
    top: `${pointer.value.y}%`,
    transform: pointer.value.y < 30 ? "translate(-50%, 16px)" : "translate(-50%, calc(-100% - 16px))",
    borderColor: alpha(activeColor.value, 0.4),
  };
});

function movePointer(event: PointerEvent) {
  const el = host.value;
  if (!el) return;
  const rect = el.getBoundingClientRect();
  if (rect.width === 0 || rect.height === 0) return;
  pointer.value = { x: ((event.clientX - rect.left) / rect.width) * 100, y: ((event.clientY - rect.top) / rect.height) * 100 };
}

function clearHover() {
  hover.value = null;
  pointer.value = null;
}

function setHover(index: number, series: "a" | "b") {
  hover.value = { index, series };
}

function nudge(dir: number) {
  if (!count.value) return;
  const idx = Math.max(0, Math.min((hover.value?.index ?? -1) + dir, count.value - 1));
  hover.value = { index: idx, series: hover.value?.series ?? "a" };
}

function onKey(event: KeyboardEvent) {
  if (event.key === "ArrowRight" || event.key === "ArrowLeft") {
    event.preventDefault();
    nudge(event.key === "ArrowRight" ? 1 : -1);
  } else if (event.key === "Escape") clearHover();
}
</script>

<template>
  <div class="tcf-card">
    <div
      ref="host"
      class="tcf-plot"
      role="img"
      tabindex="0"
      :aria-label="`Grouped bar chart comparing ${seriesALabel} and ${seriesBLabel} across ${count} categories`"
      @pointermove="movePointer"
      @pointerleave="clearHover"
      @blur="clearHover"
      @keydown="onKey"
    >
      <svg class="tcf-svg" :viewBox="`0 0 ${VB_W} ${VB_H}`" aria-hidden="true">
        <template v-for="(bar, i) in bars" :key="bar.label">
          <path
            class="tcf-bar"
            :style="{ animationDelay: `${i * 0.035}s`, opacity: dimmed === 'b' ? 0.28 : 1 }"
            :d="barPath(bar.xa, barW, bar.ha, radius)"
            :fill="primaryColor"
          />
          <path
            class="tcf-bar"
            :style="{ animationDelay: `${i * 0.035 + 0.05}s`, opacity: dimmed === 'a' ? 0.28 : 1 }"
            :d="barPath(bar.xb, barW, bar.hb, radius)"
            :fill="secondaryColor"
          />
        </template>

        <line :x1="PAD_L" :x2="PAD_L + PLOT_W" :y1="BASE_Y" :y2="BASE_Y" stroke="currentColor" stroke-opacity="0.18" stroke-width="1" />

        <text v-for="bar in bars" :key="`lbl-${bar.label}`" :x="bar.slotX + slot / 2" :y="BASE_Y + 22" fill="currentColor" fill-opacity="0.45" font-size="11" text-anchor="middle">
          {{ bar.label }}
        </text>

        <template v-for="(bar, i) in bars" :key="`hit-${bar.label}`">
          <rect :x="bar.slotX" :y="PAD_T" :width="slot / 2" :height="PLOT_H" fill="transparent" @pointerenter="setHover(i, 'a')" />
          <rect :x="bar.slotX + slot / 2" :y="PAD_T" :width="slot / 2" :height="PLOT_H" fill="transparent" @pointerenter="setHover(i, 'b')" />
        </template>
      </svg>

      <div v-if="hover && pointer && activeBar && activeValue !== null" class="tcf-tip" :style="tipStyle">
        <div class="tcf-tip-label">{{ activeBar.label }}</div>
        <div class="tcf-tip-value"><span class="tcf-dot" :style="{ background: activeColor }" />{{ activeSeriesLabel }} · {{ fmt(activeValue) }}</div>
      </div>
    </div>

    <div v-if="showLegend" class="tcf-legend">
      <button
        type="button"
        class="tcf-legend-item"
        @mouseenter="dimmed = 'b'"
        @mouseleave="dimmed = null"
        @focus="dimmed = 'b'"
        @blur="dimmed = null"
      >
        <span class="tcf-swatch" :style="{ background: primaryColor }" />{{ seriesALabel }}
      </button>
      <button
        type="button"
        class="tcf-legend-item"
        @mouseenter="dimmed = 'a'"
        @mouseleave="dimmed = null"
        @focus="dimmed = 'a'"
        @blur="dimmed = null"
      >
        <span class="tcf-swatch" :style="{ background: secondaryColor }" />{{ seriesBLabel }}
      </button>
    </div>
  </div>
</template>

<style scoped>
.tcf-card {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  padding: 1.25rem;
  border: 1px solid rgb(255 255 255 / 0.1);
  border-radius: 1rem;
  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);
  color: #fff;
  font-family: system-ui, sans-serif;
}
.tcf-plot {
  position: relative;
  width: 100%;
  border-radius: 0.5rem;
  outline: none;
}
.tcf-plot:focus-visible {
  box-shadow: 0 0 0 2px currentColor;
}
.tcf-svg {
  display: block;
  width: 100%;
  height: auto;
}
.tcf-bar {
  transform-box: fill-box;
  transform-origin: bottom;
  animation: tcf-grow 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
  transition: opacity 150ms ease;
}
@keyframes tcf-grow {
  from {
    transform: scaleY(0);
  }
  to {
    transform: scaleY(1);
  }
}
.tcf-tip {
  position: absolute;
  z-index: 10;
  white-space: nowrap;
  padding: 0.375rem 0.625rem;
  border: 1px solid transparent;
  border-radius: 0.5rem;
  background: rgb(11 13 16 / 0.94);
  box-shadow: 0 10px 24px rgb(0 0 0 / 0.4);
  pointer-events: none;
}
.tcf-tip-label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.55);
}
.tcf-tip-value {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 0.25rem;
  font-size: 13px;
  line-height: 1;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: #fff;
}
.tcf-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 9999px;
}
.tcf-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  margin-top: 1rem;
}
.tcf-legend-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.375rem;
  border: none;
  border-radius: 0.375rem;
  background: transparent;
  color: rgb(255 255 255 / 0.7);
  font: 500 13px/1.2 system-ui, sans-serif;
  cursor: pointer;
  transition: opacity 120ms ease;
}
.tcf-legend-item:hover {
  opacity: 0.8;
}
.tcf-legend-item:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
.tcf-swatch {
  display: inline-block;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 9999px;
}
@media (prefers-reduced-motion: reduce) {
  .tcf-bar {
    animation-duration: 1ms;
  }
}
</style>

Nearby