<div class="app">
  <div class="card">
    <div class="card-header">
      <h3>Traffic Sources, Last 12 Months</h3>
      <p class="sub">A stacked area chart with a centered "wiggle" baseline instead of a flat zero line — the flowing shape emphasizes change in each source's share over time.</p>
    </div>
    <div class="chart-wrap">
      <svg id="stream" viewBox="0 0 640 360" xmlns="http://www.w3.org/2000/svg"></svg>
    </div>
    <div class="legend" id="legend"></div>
  </div>
</div>

* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: #f8fafc; font-family: system-ui, sans-serif; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
.app { width: 100%; max-width: 680px; }
.card { background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 22px; box-shadow: 0 12px 30px rgba(30,41,59,0.06); }
.card-header { margin-bottom: 8px; }
h3 { font-size: 16px; font-weight: 800; color: #1e293b; }
.sub { font-size: 12px; color: #94a3b8; margin-top: 3px; line-height: 1.5; }
#stream { width: 100%; display: block; overflow: visible; }
.stream-band { stroke: #fff; stroke-width: 1; transition: opacity .15s; cursor: pointer; }
.stream-band.dim { opacity: 0.18; }
.stream-month-label { font-size: 9.5px; fill: #94a3b8; text-anchor: middle; }
.legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 14px; padding-top: 14px; border-top: 1px solid #f1f5f9; }
.legend-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #475569; cursor: pointer; user-select: none; }
.legend-swatch { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.legend-item.dim { opacity: 0.35; }

const svg = document.getElementById('stream');
const legendEl = document.getElementById('legend');
const NS = 'http://www.w3.org/2000/svg';

const MONTH_LABELS = ['Sep','Oct','Nov','Dec','Jan','Feb','Mar','Apr','May','Jun','Jul','Aug'];

const SERIES = [
  { name: 'Organic',   color: '#6366f1', base: 38, amp: 10, phase: 0.2 },
  { name: 'Paid',      color: '#f97316', base: 24, amp: 14, phase: 1.4 },
  { name: 'Social',    color: '#22c55e', base: 18, amp: 8,  phase: 3.0 },
  { name: 'Referral',  color: '#e11d48', base: 12, amp: 6,  phase: 4.2 },
  { name: 'Direct',    color: '#0ea5e9', base: 15, amp: 5,  phase: 2.1 },
];

const N = MONTH_LABELS.length;

// Synthetic monthly values per series: a base level plus a smooth sine wiggle plus mild noise.
function buildSeries() {
  return SERIES.map(s => {
    const values = [];
    for (let i = 0; i < N; i++) {
      const wave = Math.sin(i / N * Math.PI * 2 + s.phase) * s.amp;
      const noise = (Math.sin(i * 12.9898 + s.phase * 7.233) * 43758.5453 % 1) * 4;
      values.push(Math.max(2, s.base + wave + noise));
    }
    return { ...s, values };
  });
}

const series = buildSeries();

// Stack order (bottom to top in the visual stack) alternates outward from a middle-weighted series
// so the largest bands sit toward the center — this is the classic "inside-out" streamgraph ordering.
const order = [...series].sort((a, b) => avgOf(b) - avgOf(a));
function avgOf(s) { return s.values.reduce((a, b) => a + b, 0) / s.values.length; }
const stackOrder = [];
order.forEach((s, i) => { if (i % 2 === 0) stackOrder.push(s); else stackOrder.unshift(s); });

function el(tag, attrs) {
  const e = document.createElementNS(NS, tag);
  Object.entries(attrs).forEach(([k, v]) => e.setAttribute(k, v));
  return e;
}

const W = 640, H = 360;
const PAD_L = 20, PAD_R = 20, PAD_T = 20, PAD_B = 34;
const innerW = W - PAD_L - PAD_R;
const innerH = H - PAD_T - PAD_B;

function xPos(i) { return PAD_L + (i / (N - 1)) * innerW; }

// Compute per-time-step stacked tops/bottoms with a centered (silhouette) baseline so the
// whole shape floats around the vertical middle instead of stacking up from a flat zero line.
const totals = [];
for (let i = 0; i < N; i++) {
  totals.push(stackOrder.reduce((sum, s) => sum + s.values[i], 0));
}
const maxTotal = Math.max(...totals);
const scale = (innerH * 0.92) / maxTotal;

const bands = stackOrder.map(() => ({ top: [], bottom: [] }));
for (let i = 0; i < N; i++) {
  let cursor = -totals[i] * scale / 2; // start at the centered baseline for this time step
  stackOrder.forEach((s, si) => {
    const h = s.values[i] * scale;
    bands[si].bottom[i] = cursor;
    cursor += h;
    bands[si].top[i] = cursor;
  });
}

// Smooth a polyline into a soft path using quadratic bezier segments through midpoints,
// avoiding a dependency on any curve-interpolation library.
function smoothPath(points) {
  if (points.length < 2) return '';
  let d = `M ${points[0][0]},${points[0][1]}`;
  for (let i = 0; i < points.length - 1; i++) {
    const [x0, y0] = points[i];
    const [x1, y1] = points[i + 1];
    const mx = (x0 + x1) / 2, my = (y0 + y1) / 2;
    d += ` Q ${x0},${y0} ${mx},${my}`;
  }
  const last = points[points.length - 1];
  d += ` L ${last[0]},${last[1]}`;
  return d;
}

let activeIndex = null;

function draw() {
  svg.innerHTML = '';
  const cy = PAD_T + innerH / 2;

  stackOrder.forEach((s, si) => {
    const topPts = bands[si].top.map((y, i) => [xPos(i), cy + y]);
    const bottomPts = bands[si].bottom.map((y, i) => [xPos(i), cy + y]).reverse();
    const topPath = smoothPath(topPts);
    const bottomPath = smoothPath(bottomPts);
    const d = `${topPath} ${bottomPath.replace('M', 'L')} Z`;

    const path = el('path', { class: 'stream-band', d, fill: s.color });
    path.dataset.name = s.name;
    const title = el('title', {});
    title.textContent = `${s.name}: avg ${Math.round(avgOf(s))}% share`;
    path.appendChild(title);
    path.addEventListener('mouseenter', () => setActive(s.name));
    path.addEventListener('mouseleave', () => setActive(null));
    svg.appendChild(path);
  });

  for (let i = 0; i < N; i += 1) {
    const label = el('text', { class: 'stream-month-label', x: xPos(i), y: H - 10 });
    label.textContent = MONTH_LABELS[i];
    svg.appendChild(label);
  }

  renderLegend();
}

function renderLegend() {
  legendEl.innerHTML = '';
  series.forEach(s => {
    const item = document.createElement('div');
    item.className = 'legend-item';
    item.dataset.name = s.name;
    item.innerHTML = `<span class="legend-swatch" style="background:${s.color}"></span>${s.name}`;
    item.addEventListener('mouseenter', () => setActive(s.name));
    item.addEventListener('mouseleave', () => setActive(null));
    legendEl.appendChild(item);
  });
}

function setActive(name) {
  activeIndex = name;
  document.querySelectorAll('.stream-band').forEach(p => {
    p.classList.toggle('dim', !!name && p.dataset.name !== name);
  });
  document.querySelectorAll('.legend-item').forEach(item => {
    item.classList.toggle('dim', !!name && item.dataset.name !== name);
  });
}

draw();