"use client";

import { SignedValueBarChart } from "./index";

export interface DemoProps {
  positiveColor?: string;
  negativeColor?: string;
  barRadius?: number;
  animate?: boolean;
}

/** Demo props mirror meta.json controls; defaults must match the control defaults. */
export default function Demo({ positiveColor = "#9BE15D", negativeColor = "#FF4D8D", barRadius = 4, animate = true }: DemoProps) {
  return (
    <div className="flex w-full justify-center p-4 sm:p-6">
      <SignedValueBarChart positiveColor={positiveColor} negativeColor={negativeColor} barRadius={barRadius} animate={animate} />
    </div>
  );
}

1d:T23f3, 1e:T1a767,

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

interface SignedValuePoint {
  month: string;
  value: number;
}

const props = withDefaults(
  defineProps<{
    data?: SignedValuePoint[];
    title?: string;
    caption?: string;
    positiveColor?: string;
    negativeColor?: string;
    barRadius?: number;
    animate?: boolean;
  }>(),
  {
    data: () => [
      { month: "Jan", value: 12.4 },
      { month: "Feb", value: 7.8 },
      { month: "Mar", value: -5.6 },
      { month: "Apr", value: 15.1 },
      { month: "May", value: -3.2 },
      { month: "Jun", value: 9.7 },
    ],
    title: "Net revenue change",
    caption: "Jan – Jun 2026",
    positiveColor: "#9BE15D",
    negativeColor: "#FF4D8D",
    barRadius: 4,
    animate: true,
  },
);

const HALF_PX = 90;
const MIN_BAR_PX = 6;

function formatSigned(value: number): string {
  const sign = value >= 0 ? "+" : "−";
  return `${sign}$${Math.abs(value).toFixed(1)}k`;
}

function clamp(n: number, lo: number, hi: number): number {
  return Math.min(hi, Math.max(lo, n));
}

const activeIndex = ref<number | null>(null);
const buttonRefs = ref<Array<HTMLButtonElement | null>>([]);
const mounted = ref(false);
const reducedMotion = typeof window !== "undefined" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
const shouldAnimate = computed(() => props.animate && !reducedMotion);

onMounted(() => {
  if (shouldAnimate.value) {
    requestAnimationFrame(() => {
      mounted.value = true;
    });
  }
});

const maxAbs = computed(() => Math.max(...props.data.map((d) => Math.abs(d.value)), 1));
const total = computed(() => props.data.reduce((sum, d) => sum + d.value, 0));
const cumulative = computed(() =>
  props.data.reduce<number[]>((acc, d, i) => {
    acc.push((acc[i - 1] ?? 0) + d.value);
    return acc;
  }, []),
);
const trendColor = computed(() => (total.value >= 0 ? props.positiveColor : props.negativeColor));
const trendPoints = computed(() => {
  const series = cumulative.value;
  const lo = Math.min(...series, 0);
  const hi = Math.max(...series, 0);
  const span = hi - lo || 1;
  return series
    .map((v, i) => {
      const x = (i / (series.length - 1 || 1)) * 100;
      const y = 22 - ((v - lo) / span) * 18 - 2;
      return `${x.toFixed(1)},${y.toFixed(1)}`;
    })
    .join(" ");
});

function barPx(value: number): number {
  return Math.max(MIN_BAR_PX, (Math.abs(value) / maxAbs.value) * (HALF_PX - 8));
}

function setActive(index: number | null) {
  activeIndex.value = index;
}

function clearActive(index: number) {
  if (activeIndex.value === index) activeIndex.value = null;
}

function focusBar(index: number) {
  buttonRefs.value[clamp(index, 0, props.data.length - 1)]?.focus();
}

function handleKeydown(event: KeyboardEvent, index: number) {
  if (event.key === "ArrowRight") {
    event.preventDefault();
    focusBar(index + 1);
  } else if (event.key === "ArrowLeft") {
    event.preventDefault();
    focusBar(index - 1);
  }
}
</script>

<template>
  <div class="signed-chart">
    <div class="signed-chart__header">
      <h3 class="signed-chart__title">{{ title }}</h3>
      <span class="signed-chart__caption">{{ caption }}</span>
    </div>

    <div class="signed-chart__plot" :style="{ height: HALF_PX * 2 + 'px' }">
      <div class="signed-chart__zero" />
      <div class="signed-chart__bars">
        <button
          v-for="(point, index) in data"
          :key="point.month"
          :ref="(el) => (buttonRefs[index] = el as HTMLButtonElement | null)"
          type="button"
          class="signed-chart__bar-btn"
          :aria-label="`${point.month}, ${formatSigned(point.value)}`"
          @mouseenter="setActive(index)"
          @mouseleave="clearActive(index)"
          @focus="setActive(index)"
          @blur="clearActive(index)"
          @keydown="handleKeydown($event, index)"
        >
          <div class="signed-chart__half signed-chart__half--top">
            <template v-if="point.value >= 0">
              <span class="signed-chart__readout">
                <span class="signed-chart__month" :class="{ 'signed-chart__month--active': activeIndex === index }">{{ point.month }}</span>
                <span v-if="activeIndex === index" class="signed-chart__value" :style="{ color: positiveColor }">{{ formatSigned(point.value) }}</span>
              </span>
              <div
                class="signed-chart__bar"
                :style="{
                  height: (shouldAnimate ? (mounted ? barPx(point.value) : 0) : barPx(point.value)) + 'px',
                  background: positiveColor,
                  opacity: activeIndex === index ? 1 : 0.85,
                  borderTopLeftRadius: barRadius + 'px',
                  borderTopRightRadius: barRadius + 'px',
                  transitionDelay: shouldAnimate ? index * 60 + 'ms' : '0ms',
                }"
              />
            </template>
          </div>
          <div class="signed-chart__half signed-chart__half--bottom">
            <template v-if="point.value < 0">
              <div
                class="signed-chart__bar"
                :style="{
                  height: (shouldAnimate ? (mounted ? barPx(point.value) : 0) : barPx(point.value)) + 'px',
                  background: negativeColor,
                  opacity: activeIndex === index ? 1 : 0.85,
                  borderBottomLeftRadius: barRadius + 'px',
                  borderBottomRightRadius: barRadius + 'px',
                  transitionDelay: shouldAnimate ? index * 60 + 'ms' : '0ms',
                }"
              />
              <span class="signed-chart__readout">
                <span class="signed-chart__month" :class="{ 'signed-chart__month--active': activeIndex === index }">{{ point.month }}</span>
                <span v-if="activeIndex === index" class="signed-chart__value" :style="{ color: negativeColor }">{{ formatSigned(point.value) }}</span>
              </span>
            </template>
          </div>
        </button>
      </div>
    </div>

    <div class="signed-chart__footer">
      <svg viewBox="0 0 100 22" class="signed-chart__trend" preserveAspectRatio="none" aria-hidden="true">
        <polyline :points="trendPoints" fill="none" :stroke="trendColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" opacity="0.85" />
      </svg>
      <span class="signed-chart__total">{{ formatSigned(total) }} cumulative over {{ data.length }} months</span>
    </div>
  </div>
</template>

<style scoped>
.signed-chart {
  width: 100%;
  max-width: 420px;
  border-radius: 1rem;
  border: 1px solid rgb(255 255 255 / 0.1);
  background: #12141a;
  color: rgb(255 255 255 / 0.9);
  padding: 1.25rem;
  font-family: system-ui, sans-serif;
}
.signed-chart__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}
.signed-chart__title {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: #fff;
}
.signed-chart__caption {
  font-size: 0.6875rem;
  color: rgb(255 255 255 / 0.4);
}
.signed-chart__plot {
  position: relative;
}
.signed-chart__zero {
  position: absolute;
  inset-inline: 0;
  top: 50%;
  height: 1.5px;
  transform: translateY(-50%);
  background: rgb(255 255 255 / 0.3);
  pointer-events: none;
}
.signed-chart__bars {
  display: flex;
  height: 100%;
  gap: 0.375rem;
}
.signed-chart__bar-btn {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: none;
  border: none;
  border-radius: 0.375rem;
  padding: 0;
  cursor: pointer;
  outline: none;
  font: inherit;
  color: inherit;
}
.signed-chart__bar-btn:focus-visible {
  outline: 2px solid rgb(255 255 255 / 0.7);
  outline-offset: 2px;
}
.signed-chart__half {
  height: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.signed-chart__half--top {
  justify-content: flex-end;
}
.signed-chart__half--bottom {
  justify-content: flex-start;
}
.signed-chart__readout {
  display: flex;
  align-items: baseline;
  gap: 0.375rem;
  white-space: nowrap;
}
.signed-chart__half--top .signed-chart__readout {
  margin-bottom: 0.375rem;
}
.signed-chart__half--bottom .signed-chart__readout {
  margin-top: 0.375rem;
}
.signed-chart__month {
  font-size: 0.625rem;
  font-weight: 500;
  color: rgb(255 255 255 / 0.45);
  transition: color 150ms ease;
}
.signed-chart__month--active {
  color: #fff;
}
.signed-chart__value {
  font-size: 0.625rem;
  font-weight: 600;
}
.signed-chart__bar {
  width: 60%;
  height: 0;
  transition:
    height 500ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 150ms ease;
}
.signed-chart__bar--in {
  height: var(--bar-height, 0);
}
.signed-chart__bar--no-anim {
  transition: opacity 150ms ease;
}
@media (prefers-reduced-motion: reduce) {
  .signed-chart__bar {
    transition: opacity 150ms ease;
  }
}
.signed-chart__footer {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-top: 1px solid rgb(255 255 255 / 0.1);
  padding-top: 0.75rem;
  margin-top: 1.25rem;
}
.signed-chart__trend {
  width: 4rem;
  height: 1.25rem;
  flex-shrink: 0;
}
.signed-chart__total {
  font-size: 0.6875rem;
  color: rgb(255 255 255 / 0.45);
}
</style>

Net revenue change

Nearby

Net revenue change