npm - rip-lang - Versions diffs - 3.10.14 → 3.12.0 - Mend

rip-lang 3.10.14 → 3.12.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (31) hide show

package/CHANGELOG.md +1 -1
package/README.md +2 -2
package/docs/RIP-INTERNALS.md +1 -1
package/docs/RIP-LANG.md +1 -1
package/docs/RIP-TYPES.md +1 -1
package/docs/WEB-FRAMEWORKS.md +486 -0
package/docs/WEB-ROADMAP.md +126 -0
package/docs/WEB-STYLING.md +701 -0
package/docs/charts.html +921 -0
package/docs/dist/{rip-ui.min.js → rip.min.js} +124 -122
package/docs/dist/rip.min.js.br +0 -0
package/docs/evidence.html +1228 -0
package/docs/example/index.html +1 -3
package/docs/index.html +6 -2
package/docs/results/index.html +1 -1
package/docs/sierpinski.html +1 -1
package/package.json +5 -4
package/src/app.rip +1002 -0
package/src/browser.js +9 -12
package/src/compiler.js +12 -4
package/src/components.js +70 -29
package/src/types.js +2 -2
package/docs/dist/rip-ui.min.js.br +0 -0
package/docs/dist/rip.browser.min.js +0 -521
package/docs/dist/rip.browser.min.js.br +0 -0
package/src/tags.js +0 -62
/package/docs/{rip-1280w.png → assets/rip-1280w.png} +0 -0
/package/docs/{rip-512b.png → assets/rip-512b.png} +0 -0
/package/docs/{rip-fav.svg → assets/rip-fav.svg} +0 -0
/package/docs/{rip.png → assets/rip.png} +0 -0
/package/docs/{rip.svg → assets/rip.svg} +0 -0

package/docs/charts.html ADDED Viewed

@@ -0,0 +1,921 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>ACME Corp Dashboard — Rip</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
+  <script src="https://cdn.jsdelivr.net/npm/echarts@5.5.1/dist/echarts.min.js"></script>
+  <script type="module" src="dist/rip.min.js"></script>
+  <style>
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+body {
+  font-family: 'Inter', sans-serif;
+  font-feature-settings: "cv02", "tnum";
+  background: #f7f7f7;
+  color: #2c2c2c;
+  padding: 32px;
+}
+h1 { font-size: 24px; font-weight: 600; color: #060606; margin-bottom: 4px; }
+.subtitle { font-size: 14px; color: #717171; margin-bottom: 28px; }
+.section {
+  font-size: 13px; font-weight: 500; color: #717171;
+  text-transform: uppercase; letter-spacing: 0.05em;
+  margin: 36px 0 16px; padding-bottom: 8px;
+  border-bottom: 1px solid #e5e5e5;
+}
+.section:first-of-type { margin-top: 0; }
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(540px, 1fr));
+  gap: 20px;
+}
+.card {
+  background: #ffffff; border-radius: 8px;
+  border: 1px solid #e5e5e5; padding: 20px 20px 12px;
+}
+.card h2 { font-size: 15px; font-weight: 500; color: #060606; margin-bottom: 2px; }
+.card p { font-size: 12px; color: #717171; margin-bottom: 12px; }
+.chart { width: 100%; height: 380px; }
+.chart-tall { width: 100%; height: 440px; }
+.wide { grid-column: 1 / -1; }
+.gauge-row { display: flex; gap: 0; }
+.gauge-cell { flex: 1; height: 300px; }
+.kpi-row {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 16px; margin-bottom: 8px;
+}
+.kpi {
+  background: #fff; border: 1px solid #e5e5e5; border-radius: 8px;
+  padding: 16px 20px; display: flex; flex-direction: column; gap: 4px;
+}
+.kpi-label { font-size: 12px; color: #717171; font-weight: 500; }
+.kpi-row-inner { display: flex; align-items: center; gap: 10px; }
+.kpi-value { font-size: 26px; font-weight: 600; color: #060606; line-height: 1.1; }
+.kpi-spark { flex-shrink: 0; }
+.kpi-delta { font-size: 12px; font-weight: 500; }
+.kpi-delta.up { color: #16a34a; }
+.kpi-delta.down { color: #dc2626; }
+  </style>
+</head>
+<body>
+<!-- ===== KpiCard ===== -->
+<script type="text/rip" data-name="kpi-card">
+export KpiCard = component
+  @label := ''
+  @value := ''
+  @spark := []
+  @delta := ''
+  @up := true
+  sparkSvg ~=
+    return '' unless spark and spark.length > 1
+    w = 64
+    h = 24
+    lo = Math.min(...spark)
+    hi = Math.max(...spark)
+    range = hi - lo or 1
+    pts = spark.map((v, i) ->
+      x = (i / (spark.length - 1)) * w
+      y = h - ((v - lo) / range) * (h - 4) - 2
+      "#{x},#{y}"
+    ).join(' ')
+    "<svg class='kpi-spark' width='#{w}' height='#{h}' viewBox='0 0 #{w} #{h}'><polyline points='#{pts}' fill='none' stroke='#236aa4' stroke-width='1.5' stroke-linejoin='round' stroke-linecap='round'/></svg>"
+  render
+    .kpi
+      .kpi-label label
+      .kpi-row-inner
+        .kpi-value value
+        span innerHTML: sparkSvg
+      div class: "kpi-delta #{up ? 'up' : 'down'}"
+        "#{up ? '▲' : '▼'} #{delta}"
+</script>
+<!-- ===== ChartCard ===== -->
+<script type="text/rip" data-name="chart-card">
+export ChartCard = component
+  @title := ''
+  @subtitle := ''
+  @chartId := ''
+  @wide := false
+  @tall := false
+  render
+    div class: "card#{wide ? ' wide' : ''}"
+      h2 title
+      p subtitle
+      div id: chartId, class: tall ? 'chart-tall' : 'chart'
+</script>
+<!-- ===== Dashboard ===== -->
+<script type="text/rip" data-name="index">
+export Dashboard = component
+  # ── ECharts theme (evidence.dev) ──
+  THEME :=
+    darkMode: false
+    backgroundColor: '#ffffff'
+    textStyle: { fontFamily: ['Inter', 'sans-serif'] }
+    color: ['#236aa4','#45a1bf','#a5cdee','#8dacbf','#85c7c6','#d2c6ac','#f4b548','#8f3d56','#71b9f4','#46a485']
+    grid: { left: '1%', right: '4%', bottom: '0%', top: '15%', containLabel: true }
+    title:
+      padding: 0, itemGap: 7
+      textStyle: { fontSize: 14, color: '#060606' }
+      subtextStyle: { fontSize: 13, color: '#717171', overflow: 'break' }
+      top: '1px'
+    line:     { itemStyle: { borderWidth: 0 }, lineStyle: { width: 2, join: 'round' }, symbolSize: 0, symbol: 'circle', smooth: false }
+    radar:    { itemStyle: { borderWidth: 0 }, lineStyle: { width: 2 }, symbolSize: 0, symbol: 'circle', smooth: false }
+    pie:      { itemStyle: { borderWidth: 0, borderColor: '#cccccc' } }
+    scatter:  { itemStyle: { borderWidth: 0, borderColor: '#cccccc' } }
+    boxplot:  { itemStyle: { borderWidth: 1.5 } }
+    parallel: { itemStyle: { borderWidth: 0, borderColor: '#cccccc' } }
+    sankey:   { itemStyle: { borderWidth: 0, borderColor: '#cccccc' } }
+    funnel:   { itemStyle: { borderWidth: 0, borderColor: '#cccccc' } }
+    gauge:    { itemStyle: { borderWidth: 0, borderColor: '#cccccc' } }
+    candlestick: { itemStyle: { color: '#eb5454', color0: '#47b262', borderColor: '#eb5454', borderColor0: '#47b262', borderWidth: 1 } }
+    graph:
+      itemStyle: { borderWidth: 0, borderColor: '#cccccc' }
+      lineStyle: { width: 1, color: '#aaaaaa' }
+      symbolSize: 0, symbol: 'circle', smooth: false
+      color: ['#923d59','#488f96','#518eca','#b3a9a0','#ffc857','#495867','#bfdbf7','#bc4749','#eeebd0']
+      label: { color: '#f2f2f2' }
+    categoryAxis:
+      axisLine: { show: true, lineStyle: { color: '#717171' } }
+      axisTick: { show: false, lineStyle: { color: '#717171' }, length: 3, alignWithLabel: true }
+      axisLabel: { show: true, color: '#717171' }
+      splitLine: { show: false, lineStyle: { color: ['#d6d6d6'] } }
+      splitArea: { show: false }
+    valueAxis:
+      axisLine: { show: false, lineStyle: { color: '#717171' } }
+      axisTick: { show: false, lineStyle: { color: '#717171' }, length: 2 }
+      axisLabel: { show: true, color: '#717171' }
+      splitLine: { show: true, lineStyle: { color: ['#d6d6d6'], width: 1 } }
+      splitArea: { show: false }
+      nameTextStyle: { backgroundColor: '#ffffff' }
+    logAxis:
+      axisLine: { show: false, lineStyle: { color: '#717171' } }
+      axisTick: { show: false, lineStyle: { color: '#717171' }, length: 2 }
+      axisLabel: { show: true, color: '#717171' }
+      splitLine: { show: true, lineStyle: { color: ['#d6d6d6'] } }
+      splitArea: { show: false }
+      nameTextStyle: { backgroundColor: '#ffffff' }
+    timeAxis:
+      axisLine: { show: true, lineStyle: { color: '#717171' } }
+      axisTick: { show: true, lineStyle: { color: '#717171' }, length: 3 }
+      axisLabel: { show: true, color: '#717171' }
+      splitLine: { show: false, lineStyle: { color: ['#d6d6d6'] } }
+      splitArea: { show: false }
+    toolbox: { iconStyle: { borderColor: '#999' }, emphasis: { iconStyle: { borderColor: '#459cde' } } }
+    legend:
+      textStyle: { padding: [0,0,0,-7], color: '#717171' }, icon: 'circle'
+      pageIconColor: '#717171', pageIconSize: 12
+      pageTextStyle: { color: '#717171' }
+      pageButtonItemGap: -2, animationDurationUpdate: 300
+    tooltip:
+      axisPointer: { lineStyle: { color: '#ccc', width: 1 }, crossStyle: { color: '#ccc', width: 1 } }
+      borderRadius: 4, borderWidth: 1, borderColor: '#d6d6d6', backgroundColor: '#ffffff'
+      textStyle: { color: '#2c2c2c', fontSize: 12, fontWeight: 400 }, padding: 6
+    visualMap: { color: ['#c41621','#e39588','#f5ed98'] }
+    dataZoom:
+      type: 'slider', bottom: 10, height: 30, showDetail: false, handleSize: '80%'
+      borderColor: '#d6d6d6'
+      handleStyle: { borderColor: '#d6d6d6', color: '#d6d6d6' }
+      moveHandleStyle: { borderColor: '#d6d6d6', color: '#d6d6d6' }
+      emphasis: { handleStyle: { borderColor: '#d6d6d6', color: '#d6d6d6' }, moveHandleStyle: { borderColor: '#d6d6d6', color: '#d6d6d6' } }
+    markPoint: { label: { color: '#f2f2f2' }, emphasis: { label: { color: '#f2f2f2' } } }
+  # ── Shared option defaults ──
+  BASE :=
+    animationDuration: 500, animationDurationUpdate: 500
+    grid: { left: '0.8%', right: '3%', containLabel: true }
+    tooltip:
+      trigger: 'axis', show: true, confine: true
+      axisPointer: { type: 'shadow' }
+      extraCssText: 'box-shadow:0 3px 6px rgba(0,0,0,.15);box-shadow:0 2px 4px rgba(0,0,0,.12);z-index:1;font-feature-settings:"cv02","tnum";'
+      order: 'valueDesc'
+    legend: { show: true, type: 'scroll', padding: [0,0,0,0] }
+  XAXIS :=
+    type: 'category', splitLine: { show: false }, axisLine: { show: true }, axisTick: { show: false }
+    axisLabel: { show: true, hideOverlap: true, showMaxLabel: true, margin: 6 }, scale: true, z: 2
+  YAXIS :=
+    type: 'value', splitLine: { show: true }, axisLine: { show: false, onZero: false }, axisTick: { show: false }
+    axisLabel: { show: true, hideOverlap: true, margin: 4 }
+    nameLocation: 'end', nameTextStyle: { align: 'left', verticalAlign: 'top', padding: [0,5,0,0] }
+    nameGap: 6, scale: true, boundaryGap: ['0%','1%'], z: 2
+  COLORS := ['#236aa4','#45a1bf','#a5cdee','#8dacbf','#85c7c6','#d2c6ac','#f4b548','#8f3d56','#71b9f4','#46a485']
+  # ── Sample Data — ACME Corp FY 2026 ──
+  months   := ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']
+  quarters := ['Q1','Q2','Q3','Q4']
+  revenue  := [420, 460, 490, 530, 560, 610, 640, 680, 720, 760, 810, 870]
+  products :=
+    'Platform':    [180,195,210,225,240,260,275,290,310,330,350,380]
+    'Analytics':   [120,130,135,145,150,165,170,180,190,200,215,225]
+    'Integrations':[80, 90, 95,105,110,120,125,135,140,145,155,165]
+    'Support':     [40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90,100]
+  quarterlyRev := [1370, 1700, 2040, 2440]
+  productQuarterly :=
+    'Platform':     [585, 725, 875, 1060]
+    'Analytics':    [385, 460, 540, 640]
+    'Integrations': [265, 335, 400, 465]
+    'Support':      [135, 180, 225, 275]
+  margin     := [62, 64, 63, 65, 66, 65, 67, 68, 67, 69, 70, 71]
+  growthRate := [null, 9.5, 6.5, 8.2, 5.7, 8.9, 4.9, 6.3, 5.9, 5.6, 6.6, 7.4]
+  segments := [
+    { value: 1840, name: 'Enterprise' }
+    { value: 3200, name: 'Mid-Market' }
+    { value: 5100, name: 'SMB' }
+    { value: 1200, name: 'Startup' }
+    { value: 660,  name: 'Free Tier' }
+  ]
+  deals := [
+    [15,82,12],[25,75,18],[35,68,22],[45,60,28],[55,55,15]
+    [20,78,20],[30,72,14],[40,63,24],[50,52,19],[60,45,16]
+    [18,80,10],[28,70,21],[38,65,26],[48,58,13],[58,48,17]
+    [22,76,16],[32,69,23],[42,61,20],[52,50,11],[62,42,14]
+  ]
+  days  := ['Mon','Tue','Wed','Thu','Fri','Sat','Sun']
+  hours := ['6a','7a','8a','9a','10a','11a','12p','1p','2p','3p','4p','5p','6p','7p','8p','9p']
+  heatData ~=
+    result = []
+    for d in [0...7]
+      for h in [0...16]
+        base = d < 5 ? 40 : 15
+        base += (d < 5 ? 50 : 10) if h >= 2 and h <= 10
+        base += (d < 5 ? 30 : 5) if h >= 4 and h <= 8
+        result.push [h, d, Math.round(base + Math.random() * 20)]
+    result
+  funnelData := [
+    { value: 12000, name: 'Leads' }
+    { value: 7200,  name: 'Qualified' }
+    { value: 4100,  name: 'Proposals' }
+    { value: 2400,  name: 'Negotiation' }
+    { value: 1400,  name: 'Closed Won' }
+  ]
+  sankeyNodes := [
+    { name: 'Organic Search' }, { name: 'Paid Search' }, { name: 'Social Media' }, { name: 'Referrals' }, { name: 'Direct' }
+    { name: 'Blog' }, { name: 'Landing Page' }, { name: 'Product Page' }, { name: 'Pricing Page' }
+    { name: 'Trial Signup' }, { name: 'Demo Request' }, { name: 'Converted' }, { name: 'Churned' }
+  ]
+  sankeyLinks := [
+    { source: 'Organic Search', target: 'Blog', value: 3200 }
+    { source: 'Organic Search', target: 'Product Page', value: 2100 }
+    { source: 'Paid Search', target: 'Landing Page', value: 2800 }
+    { source: 'Paid Search', target: 'Pricing Page', value: 1200 }
+    { source: 'Social Media', target: 'Blog', value: 1800 }
+    { source: 'Social Media', target: 'Landing Page', value: 900 }
+    { source: 'Referrals', target: 'Product Page', value: 1600 }
+    { source: 'Referrals', target: 'Pricing Page', value: 800 }
+    { source: 'Direct', target: 'Product Page', value: 1400 }
+    { source: 'Direct', target: 'Pricing Page', value: 600 }
+    { source: 'Blog', target: 'Trial Signup', value: 3100 }
+    { source: 'Blog', target: 'Demo Request', value: 1900 }
+    { source: 'Landing Page', target: 'Trial Signup', value: 2400 }
+    { source: 'Landing Page', target: 'Demo Request', value: 1300 }
+    { source: 'Product Page', target: 'Trial Signup', value: 2800 }
+    { source: 'Product Page', target: 'Demo Request', value: 2300 }
+    { source: 'Pricing Page', target: 'Trial Signup', value: 1500 }
+    { source: 'Pricing Page', target: 'Demo Request', value: 1100 }
+    { source: 'Trial Signup', target: 'Converted', value: 6200 }
+    { source: 'Trial Signup', target: 'Churned', value: 3600 }
+    { source: 'Demo Request', target: 'Converted', value: 4800 }
+    { source: 'Demo Request', target: 'Churned', value: 1800 }
+  ]
+  stateRevenue := [
+    { name: 'California', value: 9200 }, { name: 'New York', value: 7100 }, { name: 'Texas', value: 5800 }
+    { name: 'Florida', value: 4200 }, { name: 'Illinois', value: 3600 }, { name: 'Massachusetts', value: 3400 }
+    { name: 'Washington', value: 3100 }, { name: 'Pennsylvania', value: 2800 }, { name: 'Georgia', value: 2500 }
+    { name: 'Virginia', value: 2400 }, { name: 'New Jersey', value: 2200 }, { name: 'North Carolina', value: 2000 }
+    { name: 'Colorado', value: 1900 }, { name: 'Ohio', value: 1800 }, { name: 'Michigan', value: 1600 }
+    { name: 'Arizona', value: 1500 }, { name: 'Maryland', value: 1400 }, { name: 'Oregon', value: 1300 }
+    { name: 'Minnesota', value: 1200 }, { name: 'Connecticut', value: 1100 }, { name: 'Tennessee', value: 950 }
+    { name: 'Indiana', value: 850 }, { name: 'Missouri', value: 800 }, { name: 'Wisconsin', value: 750 }
+    { name: 'Utah', value: 700 }, { name: 'Nevada', value: 650 }, { name: 'South Carolina', value: 600 }
+    { name: 'Alabama', value: 500 }, { name: 'Kentucky', value: 480 }, { name: 'Louisiana', value: 460 }
+    { name: 'Oklahoma', value: 420 }, { name: 'Iowa', value: 400 }, { name: 'Kansas', value: 380 }
+    { name: 'Arkansas', value: 320 }, { name: 'Nebraska', value: 300 }, { name: 'Mississippi', value: 280 }
+    { name: 'New Mexico', value: 260 }, { name: 'Idaho', value: 240 }, { name: 'Hawaii', value: 220 }
+    { name: 'New Hampshire', value: 210 }, { name: 'Maine', value: 190 }, { name: 'Rhode Island', value: 180 }
+    { name: 'Delaware', value: 170 }, { name: 'Montana', value: 140 }, { name: 'Vermont', value: 130 }
+    { name: 'South Dakota', value: 110 }, { name: 'North Dakota', value: 100 }, { name: 'Alaska', value: 90 }
+    { name: 'Wyoming', value: 75 }, { name: 'West Virginia', value: 250 }, { name: 'District of Columbia', value: 1800 }
+  ]
+  clusterColors := ['#236aa4','#f4b548','#8f3d56','#46a485']
+  clusterNames  := ['West Coast','Mountain & Central','South','Northeast']
+  customerLocations := [
+    [-122.42,37.77,0],[-118.24,34.05,0],[-122.33,47.61,0],[-121.89,37.34,0],[-117.16,32.72,0]
+    [-122.68,45.52,0],[-121.49,38.58,0],[-117.93,33.81,0],[-122.27,37.87,0],[-118.49,34.02,0]
+    [-119.70,36.75,0],[-122.03,36.97,0],[-117.39,33.95,0],[-121.94,37.35,0],[-118.16,33.77,0]
+    [-122.41,37.78,0],[-122.68,45.52,0],[-117.16,32.72,0],[-123.09,44.05,0],[-120.66,35.28,0]
+    [-118.40,33.94,0],[-122.33,47.61,0],[-121.74,36.68,0],[-116.54,33.83,0],[-122.02,37.55,0]
+    [-104.99,39.74,1],[-111.89,40.76,1],[-112.07,33.45,1],[-97.74,30.27,1],[-94.58,39.10,1]
+    [-96.80,32.78,1],[-95.37,29.76,1],[-87.63,41.88,1],[-93.27,44.98,1],[-90.20,38.63,1]
+    [-104.82,38.83,1],[-97.52,35.47,1],[-96.70,40.81,1],[-86.16,39.77,1],[-89.97,35.15,1]
+    [-105.94,35.69,1],[-106.65,35.08,1],[-111.83,33.42,1],[-104.99,39.74,1],[-95.99,36.15,1]
+    [-84.39,33.75,2],[-80.84,35.23,2],[-81.66,30.33,2],[-80.19,25.76,2],[-82.46,27.95,2]
+    [-78.64,35.78,2],[-86.78,36.16,2],[-90.07,29.95,2],[-84.51,38.05,2],[-77.44,37.54,2]
+    [-81.38,28.54,2],[-82.55,35.60,2],[-79.93,32.78,2],[-85.76,38.25,2],[-84.28,30.44,2]
+    [-80.24,25.79,2],[-81.69,41.50,2],[-76.61,39.29,2],[-77.03,38.90,2],[-83.05,42.33,2]
+    [-74.01,40.71,3],[-71.06,42.36,3],[-75.17,39.95,3],[-73.94,40.67,3],[-72.68,41.76,3]
+    [-73.76,42.65,3],[-71.41,41.82,3],[-76.15,43.05,3],[-70.26,43.66,3],[-73.79,42.66,3]
+    [-74.17,40.74,3],[-71.06,42.36,3],[-75.17,39.95,3],[-73.21,44.48,3],[-71.46,42.10,3]
+    [-73.94,40.78,3],[-74.01,40.71,3],[-72.92,41.31,3],[-75.52,39.68,3],[-71.80,42.27,3]
+  ]
+  revenueTree := [
+    { name: 'Platform', value: 4510, children: [
+      { name: 'Core Engine', value: 1800 }, { name: 'API Gateway', value: 1200 }
+      { name: 'Auth & SSO', value: 850 }, { name: 'Admin Console', value: 660 }
+    ]}
+    { name: 'Analytics', value: 2500, children: [
+      { name: 'Dashboards', value: 900 }, { name: 'Reports', value: 700 }
+      { name: 'Data Explorer', value: 550 }, { name: 'Alerts', value: 350 }
+    ]}
+    { name: 'Integrations', value: 1650, children: [
+      { name: 'CRM Sync', value: 600 }, { name: 'Slack & Teams', value: 450 }
+      { name: 'Webhooks', value: 350 }, { name: 'Custom API', value: 250 }
+    ]}
+    { name: 'Support', value: 890, children: [
+      { name: 'Live Chat', value: 380 }, { name: 'Knowledge Base', value: 280 }
+      { name: 'Ticketing', value: 230 }
+    ]}
+  ]
+  radarProducts :=
+    'Platform':     [92, 78, 95, 82, 88]
+    'Analytics':    [76, 85, 80, 74, 70]
+    'Integrations': [65, 92, 72, 68, 60]
+    'Support':      [58, 60, 88, 90, 55]
+  radarMetrics := ['Revenue','Growth','Retention','NPS','Usage']
+  waterfallLabels := ['Q1 Base','New Customers','Upsells','Price Increase','Churn','Downgrades','Q2','New Customers','Upsells','Churn','Downgrades','Q3','New Customers','Upsells','Churn','Downgrades','Q4']
+  waterfallValues := [1370, 180, 220, 50, -80, -40, null, 200, 160, -60, -30, null, 240, 200, -70, -30, null]
+  boxplotData := [
+    [8, 18, 28, 42, 65]
+    [10, 22, 35, 52, 78]
+    [12, 25, 38, 55, 85]
+    [15, 30, 45, 62, 95]
+  ]
+  parallelData := [
+    ['Platform',    4510, 18.2, 95, 82, 88]
+    ['Analytics',   2500, 22.5, 80, 74, 70]
+    ['Integrations',1650, 15.8, 72, 68, 60]
+    ['Support',      890, 12.0, 88, 90, 55]
+  ]
+  calendarData ~=
+    result = []
+    start = new Date('2024-01-01')
+    for i in [0...366]
+      d = new Date(start)
+      d.setDate(d.getDate() + i)
+      break if d.getFullYear() > 2024
+      dow = d.getDay()
+      base = dow > 0 and dow < 6 ? 800 : 350
+      base += d.getMonth() * 25
+      base += Math.round(Math.random() * 300 - 100)
+      ds = d.toISOString().slice(0, 10)
+      result.push [ds, Math.max(50, base)]
+    result
+  histBins   := ['0-50','50-100','100-150','150-200','200-300','300-500','500-1000','1000+']
+  histCounts := [1200, 3400, 5800, 4200, 2600, 1400, 600, 180]
+  features := ['Single Sign-On','API Access','Custom Reports','Slack Integration','Webhooks','Data Export','Role Permissions','Audit Log','2FA','White Label']
+  adoption := [94,87,76,72,65,61,58,52,48,34]
+  channels := ['Email','Live Chat','Phone','Social Media','Community Forum','In-App']
+  tickets  := [3200, 2800, 1900, 1400, 1100, 2100]
+  cohortScatter ~=
+    result = []
+    for i in [0...40]
+      eng = 20 + Math.random() * 75
+      ret = 35 + eng * 0.65 + (Math.random() - 0.5) * 25
+      result.push [Math.round(eng * 10) / 10, Math.min(99, Math.max(30, Math.round(ret * 10) / 10))]
+    result.sort((a, b) -> a[0] - b[0])
+    result
+  regression ~=
+    n = cohortScatter.length
+    sx = cohortScatter.reduce(((s, d) -> s + d[0]), 0)
+    sy = cohortScatter.reduce(((s, d) -> s + d[1]), 0)
+    sxy = cohortScatter.reduce(((s, d) -> s + d[0] * d[1]), 0)
+    sx2 = cohortScatter.reduce(((s, d) -> s + d[0] * d[0]), 0)
+    slope = (n * sxy - sx * sy) / (n * sx2 - sx * sx)
+    intercept = (sy - slope * sx) / n
+    xMin = Math.min(...cohortScatter.map(-> it[0]))
+    xMax = Math.max(...cohortScatter.map(-> it[0]))
+    { slope, intercept, xMin, xMax }
+  kpis := [
+    { label: 'Monthly Revenue',       value: '$870k',  spark: [420,460,490,530,560,610,640,680,720,760,810,870], delta: '+7.4% vs. prior month', up: true }
+    { label: 'Total Customers',       value: '12,000', spark: [8200,8600,9100,9400,9800,10200,10500,10900,11200,11500,11700,12000], delta: '+2.6% vs. prior month', up: true }
+    { label: 'Avg Deal Size',         value: '$38k',   spark: [32,30,34,33,36,35,37,36,38,37,39,38], delta: '-2.6% vs. prior month', up: false }
+    { label: 'Net Revenue Retention', value: '118%',   spark: [108,110,112,111,114,113,115,114,116,117,117,118], delta: '+0.9% vs. prior month', up: true }
+    { label: 'Churn Rate',            value: '1.8%',   spark: [3.2,3.0,2.8,2.6,2.5,2.4,2.3,2.2,2.1,2.0,1.9,1.8], delta: '-5.3% vs. prior month', up: true }
+  ]
+  # ── Helpers ──
+  $k   = (v) -> "$#{v}k"
+  pct  = (v) -> "#{v}%"
+  $M   = (v) -> "$#{(v / 1000).toFixed(1)}M"
+  valK = (p) -> "#{p.name}<br>$#{(p.value or 0).toLocaleString()}k"
+  tip  = (fmt) -> { ...BASE.tooltip, trigger: 'item', formatter: fmt }
+  xaxis = (data = null, opts = {}) ->
+    if typeof data is 'object' and not Array.isArray(data) and data isnt null
+      opts = data
+      data = opts.data or null
+    label = if opts.axisLabel then { ...XAXIS.axisLabel, ...opts.axisLabel } else XAXIS.axisLabel
+    { ...XAXIS, data, ...opts, axisLabel: label }
+  yaxis = (name, fmt, opts = {}) ->
+    label = if opts.axisLabel then { ...YAXIS.axisLabel, formatter: fmt, ...opts.axisLabel } else { ...YAXIS.axisLabel, formatter: fmt }
+    { ...YAXIS, name, ...opts, axisLabel: label }
+  ic: (id, opts) ->
+    el = document.getElementById(id)
+    return unless el
+    c = echarts.init(el, 'evidence')
+    c.setOption({ ...BASE, ...opts })
+    window.addEventListener 'resize', -> c.resize({ animation: { duration: 500 } })
+    c
+  buildWaterfall: (labels, values) ->
+    base = []
+    inc = []
+    dec = []
+    running = 0
+    for i in [0...values.length]
+      v = values[i]
+      if v is null
+        base.push 0
+        inc.push running
+        dec.push 0
+      else if i is 0
+        running = v
+        base.push 0
+        inc.push v
+        dec.push 0
+      else if v >= 0
+        base.push running
+        inc.push v
+        dec.push 0
+        running += v
+      else
+        running += v
+        base.push running
+        inc.push 0
+        dec.push -v
+    { base, inc, dec }
+  makeGauge: (id, value, label, fmt, color, max) ->
+    @ic id,
+      tooltip: { show: false }
+      legend: { show: false }
+      series: [{
+        type: 'gauge', startAngle: 200, endAngle: -20, min: 0, max: max or 100
+        pointer: { show: false }
+        progress: { show: true, width: 16, roundCap: true, itemStyle: { color } }
+        axisLine: { lineStyle: { width: 16, color: [[1, '#e5e5e5']] } }
+        axisTick: { show: false }, splitLine: { show: false }, axisLabel: { show: false }, anchor: { show: false }
+        detail:
+          valueAnimation: true, fontSize: 32, fontWeight: 600, fontFamily: 'Inter'
+          color: '#060606', offsetCenter: [0, '10%'], formatter: fmt
+        title: { fontSize: 14, fontWeight: 500, color: '#717171', offsetCenter: [0, '60%'] }
+        data: [{ value, name: label }]
+      }]
+  # ── Chart initialization ──
+  initCoreCharts: ->
+    @ic 'line',
+      xAxis: xaxis months
+      yAxis: yaxis 'Revenue ($k)', $k
+      series: [{
+        type: 'line', symbol: 'circle', symbolSize: 0, smooth: false
+        lineStyle: { width: 2, type: 'solid' }
+        emphasis: { focus: 'series', lineStyle: { opacity: 1, width: 3 } }
+        data: revenue
+      }]
+    @ic 'area',
+      xAxis: xaxis months
+      yAxis: yaxis 'Revenue ($k)', $k
+      series: ({
+        type: 'line', name, data
+        symbol: 'circle', symbolSize: 0, smooth: false
+        lineStyle: { width: 1 }, areaStyle: { opacity: 0.45 }
+        stack: 'revenue', emphasis: { focus: 'series' }
+      } for name, data of products)
+    @ic 'bar',
+      xAxis: xaxis quarters
+      yAxis: yaxis 'Revenue ($k)', $M
+      series: [{ type: 'bar', barMaxWidth: 60, label: { fontSize: 11 }, data: quarterlyRev }]
+    @ic 'stackedBar',
+      xAxis: xaxis quarters
+      yAxis: yaxis 'Revenue ($k)', $k
+      series: ({ type: 'bar', name, data, stack: 'total', barMaxWidth: 60, emphasis: { focus: 'series' } } for name, data of productQuarterly)
+    @ic 'combo',
+      xAxis: xaxis months
+      yAxis: [
+        yaxis 'Revenue ($k)', $k
+        yaxis 'Margin %', pct, position: 'right', splitLine: { show: false }, min: 50, max: 80
+      ]
+      series: [
+        { type: 'bar', name: 'Revenue', data: revenue, barMaxWidth: 60, yAxisIndex: 0 }
+        { type: 'line', name: 'Gross Margin', data: margin, yAxisIndex: 1, symbol: 'circle', symbolSize: 0, lineStyle: { width: 2 }, emphasis: { focus: 'series', lineStyle: { opacity: 1, width: 3 } } }
+      ]
+    @ic 'multiAxis',
+      xAxis: xaxis months
+      yAxis: [
+        yaxis 'Revenue ($k)', $k
+        yaxis 'MoM Growth %', pct, position: 'right', splitLine: { show: false }
+      ]
+      series: [
+        { type: 'line', name: 'Revenue', data: revenue, symbol: 'circle', symbolSize: 0, lineStyle: { width: 2 }, emphasis: { focus: 'series', lineStyle: { opacity: 1, width: 3 } } }
+        { type: 'line', name: 'Growth %', data: growthRate, yAxisIndex: 1, symbol: 'circle', symbolSize: 6, lineStyle: { width: 2, type: 'dashed' }, emphasis: { focus: 'series', lineStyle: { opacity: 1, width: 3 } } }
+      ]
+    @ic 'pie',
+      tooltip: { trigger: 'item', formatter: '{b}: {c} ({d}%)' }
+      series: [{
+        type: 'pie', radius: ['40%','70%'], center: ['50%','55%']
+        padAngle: 2, itemStyle: { borderRadius: 4 }, label: { fontSize: 12 }
+        data: segments
+      }]
+    @ic 'scatter',
+      xAxis: xaxis type: 'value', name: 'Avg Deal Size ($k)', axisLabel: { formatter: $k }, axisLine: { show: true }
+      yAxis: yaxis 'Close Rate %', pct
+      tooltip: tip (p) -> "Deal: $#{p.value[0]}k<br>Close Rate: #{p.value[1]}%<br>Deals: #{p.value[2]}"
+      series: [{
+        type: 'scatter', data: deals, symbolSize: (d) -> d[2] * 1.8
+        emphasis: { focus: 'self', itemStyle: { shadowBlur: 10, shadowColor: 'rgba(0,0,0,0.3)' } }
+      }]
+    @ic 'heatmap',
+      grid: { ...BASE.grid, top: '8%', bottom: '12%' }
+      xAxis: xaxis hours, splitArea: { show: false }
+      yAxis: { ...YAXIS, type: 'category', data: days, splitLine: { show: false }, splitArea: { show: false } }
+      tooltip: tip (p) -> "#{days[p.value[1]]} #{hours[p.value[0]]}<br>Sessions: <b>#{p.value[2]}</b>"
+      visualMap:
+        min: 10, max: 140, calculable: true, orient: 'horizontal', left: 'center', bottom: '0%'
+        inRange: { color: ['#a5cdee','#236aa4'] }
+        textStyle: { color: '#717171', fontSize: 11 }
+      series: [{ type: 'heatmap', data: heatData, label: { show: false }, emphasis: { itemStyle: { shadowBlur: 10, shadowColor: 'rgba(0,0,0,0.3)' } } }]
+    @ic 'funnel',
+      tooltip: { trigger: 'item', formatter: '{b}: {c}' }
+      series: [{
+        type: 'funnel', left: '10%', right: '10%', top: '12%', bottom: '8%', width: '80%'
+        sort: 'descending', gap: 4
+        label: { show: true, position: 'inside', fontSize: 13, color: '#fff' }
+        emphasis: { label: { fontSize: 15 } }
+        data: funnelData
+      }]
+    @ic 'sankey',
+      tooltip: { trigger: 'item', triggerOn: 'mousemove' }
+      series: [{
+        type: 'sankey', layout: 'none'
+        left: '3%', right: '10%', top: '8%', bottom: '8%'
+        nodeWidth: 20, nodeGap: 14, layoutIterations: 32
+        emphasis: { focus: 'adjacency' }
+        lineStyle: { color: 'gradient', curveness: 0.5 }
+        label: { fontSize: 12 }
+        data: sankeyNodes, links: sankeyLinks
+      }]
+  initMaps: ->
+    try
+      usaJson = fetch!('https://raw.githubusercontent.com/apache/echarts-examples/gh-pages/public/data/asset/geo/USA.json').json!
+      echarts.registerMap 'USA', usaJson,
+        'Alaska': { left: -131, top: 25, width: 15 }
+        'Hawaii': { left: -110, top: 28, width: 5 }
+        'Puerto Rico': { left: -76, top: 26, width: 2 }
+      @ic 'choropleth',
+        tooltip: { trigger: 'item', formatter: (p) -> "#{p.name}<br>Revenue: $#{(p.value or 0).toLocaleString()}k" }
+        visualMap:
+          min: 50, max: 9500, text: ['$9.5M+','$50k']
+          inRange: { color: ['#a5cdee','#45a1bf','#236aa4'] }
+          calculable: true, orient: 'horizontal', left: 'center', bottom: '2%'
+          textStyle: { color: '#717171', fontSize: 11 }
+        series: [{
+          type: 'map', map: 'USA', roam: true
+          emphasis: { label: { show: true, fontSize: 11, color: '#060606' }, itemStyle: { areaColor: '#f4b548' } }
+          label: { show: false }
+          itemStyle: { areaColor: '#e5e5e5', borderColor: '#fff', borderWidth: 1 }
+          data: stateRevenue
+        }]
+      @ic 'scatterMap',
+        tooltip:
+          trigger: 'item'
+          formatter: (p) ->
+            return "#{clusterNames[p.value[2]]} cluster" if p.seriesType is 'scatter'
+            p.name
+        legend:
+          show: true, top: '2%'
+          data: clusterNames.map((n, i) -> { name: n, icon: 'circle', itemStyle: { color: clusterColors[i] } })
+        geo:
+          map: 'USA', roam: true
+          itemStyle: { areaColor: '#f0f0f0', borderColor: '#d6d6d6', borderWidth: 0.5 }
+          emphasis: { itemStyle: { areaColor: '#e5e5e5' }, label: { show: false } }
+          label: { show: false }
+        series: clusterNames.map((name, ci) -> {
+          type: 'scatter', name, coordinateSystem: 'geo'
+          data: customerLocations.filter((d) -> d[2] is ci).map((d) -> { value: [d[0], d[1], d[2]] })
+          symbolSize: 8
+          itemStyle: { color: clusterColors[ci], opacity: 0.8 }
+          emphasis: { itemStyle: { opacity: 1, shadowBlur: 5, shadowColor: 'rgba(0,0,0,0.3)' } }
+        })
+    catch
+      for id in ['choropleth', 'scatterMap']
+        el = document.getElementById(id)
+        el.innerHTML = '<div style="display:flex;align-items:center;justify-content:center;height:100%;color:#717171;font-size:13px;">Map data could not be loaded (requires internet)</div>' if el
+  initHierarchicalCharts: ->
+    @ic 'treemap',
+      tooltip: { trigger: 'item', formatter: valK }
+      legend: { show: false }
+      series: [{
+        type: 'treemap', data: revenueTree
+        top: '4%', bottom: '2%', left: '2%', right: '2%'
+        roam: false, nodeClick: false, breadcrumb: { show: false }
+        label: { show: true, fontSize: 12, color: '#fff', fontWeight: 500 }
+        upperLabel: { show: true, height: 24, fontSize: 12, fontWeight: 600, color: '#fff' }
+        itemStyle: { borderColor: '#fff', borderWidth: 2, gapWidth: 2 }
+        levels: [
+          { itemStyle: { borderWidth: 3, gapWidth: 4, borderColor: '#fff' }, upperLabel: { show: true } }
+          { itemStyle: { borderWidth: 2, gapWidth: 2, borderColor: '#fff' }, colorSaturation: [0.3, 0.7] }
+        ]
+      }]
+    @ic 'sunburst',
+      tooltip: { trigger: 'item', formatter: valK }
+      legend: { show: false }
+      series: [{
+        type: 'sunburst', data: revenueTree, radius: ['15%','90%'], sort: null
+        emphasis: { focus: 'ancestor' }
+        itemStyle: { borderRadius: 4, borderWidth: 2, borderColor: '#fff' }
+        label: { fontSize: 11, minAngle: 15 }
+        levels: [
+          {}
+          { r0: '15%', r: '45%', label: { fontSize: 13, fontWeight: 500 } }
+          { r0: '45%', r: '90%', label: { fontSize: 10 } }
+        ]
+      }]
+  initAnalyticalCharts: ->
+    @ic 'radar',
+      tooltip: { trigger: 'item' }
+      radar:
+        indicator: radarMetrics.map((m) -> { name: m, max: 100 })
+        shape: 'polygon', splitNumber: 4
+        axisName: { color: '#717171', fontSize: 12 }
+        splitLine: { lineStyle: { color: '#e5e5e5' } }
+        splitArea: { areaStyle: { color: ['#fff','#fafafa'] } }
+        axisLine: { lineStyle: { color: '#e5e5e5' } }
+      series: [{
+        type: 'radar'
+        data: ({ name, value } for name, value of radarProducts)
+        areaStyle: { opacity: 0.15 }, lineStyle: { width: 2 }
+        symbol: 'circle', symbolSize: 5
+      }]
+    wf = @buildWaterfall(waterfallLabels, waterfallValues)
+    totals = [0, 6, 11, 16]
+    @ic 'waterfall',
+      xAxis: xaxis waterfallLabels, axisLabel: { rotate: 45, fontSize: 10 }
+      yAxis: yaxis 'Revenue ($k)', $k
+      legend: { show: false }
+      series: [
+        { type: 'bar', stack: 'wf', name: 'base', data: wf.base, barMaxWidth: 36, itemStyle: { color: 'transparent' }, emphasis: { itemStyle: { color: 'transparent' } } }
+        { type: 'bar', stack: 'wf', name: 'Increase', barMaxWidth: 36, data: wf.inc.map((v, i) -> { value: v, itemStyle: { color: totals.includes(i) ? '#236aa4' : '#46a485' } }), label: { show: true, position: 'top', fontSize: 10, color: '#717171', formatter: (p) -> v = waterfallValues[p.dataIndex]; return "$#{p.value}k" if v is null; return "+$#{v}k" if v > 0; '' } }
+        { type: 'bar', stack: 'wf', name: 'Decrease', data: wf.dec, barMaxWidth: 36, itemStyle: { color: '#8f3d56' }, label: { show: true, position: 'bottom', fontSize: 10, color: '#717171', formatter: (p) -> p.value > 0 ? "-$#{p.value}k" : '' } }
+      ]
+    @ic 'boxplot',
+      xAxis: xaxis quarters
+      yAxis: yaxis 'Deal Size ($k)', $k
+      tooltip: tip (p) -> "#{p.name}<br>Max: $#{p.value[5]}k<br>Q3: $#{p.value[4]}k<br>Median: $#{p.value[3]}k<br>Q1: $#{p.value[2]}k<br>Min: $#{p.value[1]}k"
+      series: [{
+        type: 'boxplot', data: boxplotData
+        itemStyle: { color: '#a5cdee', borderColor: '#236aa4', borderWidth: 1.5 }
+        emphasis: { itemStyle: { borderColor: '#060606', borderWidth: 2 } }
+      }]
+    @ic 'parallel',
+      tooltip: { show: false }
+      legend: { show: true, data: parallelData.map(-> it[0]) }
+      parallelAxis: [
+        { dim: 0, name: 'Product', type: 'category', data: parallelData.map(-> it[0]), nameLocation: 'start' }
+        { dim: 1, name: 'Revenue ($k)', type: 'value', nameLocation: 'end' }
+        { dim: 2, name: 'Growth %', type: 'value', nameLocation: 'end' }
+        { dim: 3, name: 'Retention %', type: 'value', min: 50, max: 100, nameLocation: 'end' }
+        { dim: 4, name: 'NPS', type: 'value', min: 50, max: 100, nameLocation: 'end' }
+        { dim: 5, name: 'Usage Score', type: 'value', min: 40, max: 100, nameLocation: 'end' }
+      ]
+      parallel:
+        left: '5%', right: '5%', top: '18%', bottom: '12%'
+        parallelAxisDefault:
+          nameTextStyle: { color: '#717171', fontSize: 11 }
+          axisLine: { lineStyle: { color: '#d6d6d6' } }
+          axisTick: { show: false }
+          axisLabel: { color: '#717171', fontSize: 10 }
+          splitLine: { show: false }
+      series: parallelData.map((d, i) -> {
+        type: 'parallel', name: d[0]
+        lineStyle: { width: 3, opacity: 0.7, color: COLORS[i] }
+        emphasis: { lineStyle: { width: 5, opacity: 1 } }
+        data: [d]
+      })
+    @ic 'calendar',
+      tooltip: { trigger: 'item', formatter: (p) -> "#{p.value[0]}<br>Logins: #{p.value[1].toLocaleString()}" }
+      legend: { show: false }
+      visualMap:
+        min: 200, max: 1400, calculable: true, orient: 'horizontal', left: 'center', bottom: '2%'
+        inRange: { color: ['#a5cdee','#45a1bf','#236aa4'] }
+        textStyle: { color: '#717171', fontSize: 11 }
+      calendar:
+        range: '2024', top: '12%', left: '8%', right: '4%', bottom: '18%'
+        cellSize: ['auto', 16]
+        itemStyle: { borderWidth: 2, borderColor: '#fff' }
+        splitLine: { lineStyle: { color: '#d6d6d6', width: 1 } }
+        yearLabel: { show: false }
+        monthLabel: { color: '#717171', fontSize: 11, nameMap: 'en' }
+        dayLabel: { color: '#717171', fontSize: 10, firstDay: 1, nameMap: ['','M','','W','','F',''] }
+      series: [{
+        type: 'heatmap', coordinateSystem: 'calendar', data: calendarData
+        emphasis: { itemStyle: { shadowBlur: 5, shadowColor: 'rgba(0,0,0,0.3)' } }
+      }]
+  initAdditionalCharts: ->
+    @ic 'histogram',
+      xAxis: xaxis histBins, name: 'Response Time (ms)', axisLabel: { fontSize: 10 }
+      yAxis: yaxis 'Request Count', (v) -> v >= 1000 ? "#{v / 1000}k" : v
+      legend: { show: false }
+      series: [{
+        type: 'bar', barWidth: '90%'
+        data: histCounts.map((v, i) -> { value: v, itemStyle: { color: i <= 2 ? '#46a485' : i <= 4 ? '#f4b548' : '#8f3d56' } })
+        emphasis: { itemStyle: { opacity: 0.85 } }
+      }]
+    @ic 'horizBar',
+      grid: { ...BASE.grid, left: '2%' }
+      xAxis: yaxis 'Adoption %', pct, max: 100
+      yAxis: xaxis features.slice().reverse(), type: 'category', axisLabel: { fontSize: 11 }, inverse: false
+      legend: { show: false }
+      tooltip: tip (p) -> "#{p.name}: #{p.value}%"
+      series: [{
+        type: 'bar', data: adoption.slice().reverse(), barMaxWidth: 20
+        itemStyle: { borderRadius: [0,3,3,0] }
+        label: { show: true, position: 'right', fontSize: 11, color: '#717171', formatter: (p) -> "#{p.value}%" }
+        emphasis: { itemStyle: { opacity: 0.85 } }
+      }]
+    @ic 'polar',
+      tooltip: { trigger: 'item', formatter: '{b}: {c} tickets' }
+      legend: { show: true, type: 'scroll', bottom: '2%' }
+      angleAxis:
+        type: 'category', data: channels, startAngle: 90
+        axisLine: { lineStyle: { color: '#d6d6d6' } }
+        axisLabel: { color: '#717171', fontSize: 11 }
+      radiusAxis:
+        max: 3500, axisLine: { show: false }, axisTick: { show: false }
+        axisLabel: { show: false }
+        splitLine: { lineStyle: { color: '#e5e5e5' } }
+      polar: { radius: ['10%','75%'] }
+      series: [{
+        type: 'bar', coordinateSystem: 'polar', roundCap: true
+        data: tickets.map((v, i) -> { value: v, itemStyle: { color: COLORS[i] } })
+        emphasis: { focus: 'self' }, label: { show: false }
+      }]
+    r = regression
+    @ic 'scatterReg',
+      xAxis: xaxis type: 'value', name: 'Engagement Score', axisLine: { show: true }
+      yAxis: yaxis 'Retention %', pct
+      tooltip: tip (p) -> p.seriesType is 'scatter' ? "Engagement: #{p.value[0]}<br>Retention: #{p.value[1]}%" : 'Trend line'
+      legend: { show: false }
+      series: [
+        { type: 'scatter', data: cohortScatter, symbolSize: 9, itemStyle: { color: '#236aa4', opacity: 0.7 }, emphasis: { itemStyle: { opacity: 1, shadowBlur: 8, shadowColor: 'rgba(0,0,0,0.25)' } } }
+        { type: 'line', data: [[r.xMin, r.slope * r.xMin + r.intercept], [r.xMax, r.slope * r.xMax + r.intercept]], symbol: 'none', lineStyle: { width: 2, type: 'dashed', color: '#8f3d56' }, tooltip: { show: false } }
+      ]
+  # ── Mount ──
+  ~>
+    requestAnimationFrame ->
+      echarts.registerTheme('evidence', THEME)
+      @initCoreCharts()
+      @initMaps()
+      @makeGauge('gauge1', 72.4, 'NPS Score', '{value}', '#236aa4', 100)
+      @makeGauge('gauge2', 94.2, 'CSAT', '{value}%', '#46a485', 100)
+      @makeGauge('gauge3', 99.8, 'Uptime', '{value}%', '#45a1bf', 100)
+      @initHierarchicalCharts()
+      @initAnalyticalCharts()
+      @initAdditionalCharts()
+  # ── Render ──
+  render
+    h1 "ACME Corp Dashboard"
+    p class: 'subtitle', "FY 2026 SaaS Metrics \u2014 styled with the evidence.dev ECharts theme"
+    .kpi-row
+      for kpi in kpis
+        KpiCard
+          label: kpi.label, value: kpi.value
+          spark: kpi.spark, delta: kpi.delta, up: kpi.up
+    p class: 'section', "Core Charts"
+    .grid
+      ChartCard title: 'Monthly Revenue',               subtitle: 'Total recurring revenue by month',              chartId: 'line'
+      ChartCard title: 'Revenue by Product',             subtitle: 'Stacked area breakdown across product lines',   chartId: 'area'
+      ChartCard title: 'Quarterly Revenue',              subtitle: 'Quarter-over-quarter comparison',               chartId: 'bar'
+      ChartCard title: 'Revenue by Product \u00d7 Quarter', subtitle: 'Stacked bar with product breakdown',         chartId: 'stackedBar'
+      ChartCard title: 'Revenue & Margin',               subtitle: 'Revenue bars with gross margin % line overlay', chartId: 'combo'
+      ChartCard title: 'Revenue & Growth Rate',          subtitle: 'Dual-axis: revenue (left) and YoY growth (right)', chartId: 'multiAxis'
+      ChartCard title: 'Customers by Segment',           subtitle: 'Distribution across customer tiers',            chartId: 'pie'
+      ChartCard title: 'Deal Size vs. Close Rate',       subtitle: 'Each bubble represents a sales rep',            chartId: 'scatter'
+      ChartCard title: 'Feature Usage Heatmap',          subtitle: 'Active sessions by day of week and hour',       chartId: 'heatmap'
+      ChartCard title: 'Sales Pipeline',                 subtitle: 'Conversion through funnel stages',              chartId: 'funnel'
+      ChartCard title: 'Customer Acquisition Flow',      subtitle: 'Channel attribution from source to conversion', chartId: 'sankey', wide: true
+    p class: 'section', "Geographic"
+    .grid
+      ChartCard title: 'Revenue by State',    subtitle: 'Annual revenue across US states',               chartId: 'choropleth', tall: true
+      ChartCard title: 'Customer Locations',  subtitle: 'Purchase origins clustered by region (k-means)', chartId: 'scatterMap', tall: true
+    p class: 'section', "KPI Gauges"
+    .grid
+      div class: 'card wide'
+        h2 "Key Performance Indicators"
+        p "Net Promoter Score, Customer Satisfaction, and Platform Uptime"
+        .gauge-row
+          div id: 'gauge1', class: 'gauge-cell'
+          div id: 'gauge2', class: 'gauge-cell'
+          div id: 'gauge3', class: 'gauge-cell'
+    p class: 'section', "Hierarchical"
+    .grid
+      ChartCard title: 'Revenue Breakdown',    subtitle: 'Treemap by division, product, and feature',       chartId: 'treemap'
+      ChartCard title: 'Revenue Composition',  subtitle: 'Sunburst showing contribution at each level',     chartId: 'sunburst'
+    p class: 'section', "Analytical"
+    .grid
+      ChartCard title: 'Product Comparison',       subtitle: 'Multi-metric radar across product lines',          chartId: 'radar'
+      ChartCard title: 'Revenue Bridge',           subtitle: 'Waterfall from Q1 baseline through Q4',           chartId: 'waterfall'
+      ChartCard title: 'Deal Size Distribution',   subtitle: 'Boxplot of closed deal values by quarter ($k)',   chartId: 'boxplot'
+      ChartCard title: 'Product Metrics',          subtitle: 'Parallel coordinates across key dimensions',      chartId: 'parallel'
+      ChartCard title: 'Daily Platform Activity',  subtitle: 'Login volume over the past year',                 chartId: 'calendar', wide: true
+    p class: 'section', "Additional Chart Types"
+    .grid
+      ChartCard title: 'Response Time Distribution', subtitle: 'Histogram of API response times (ms)',           chartId: 'histogram'
+      ChartCard title: 'Feature Adoption',           subtitle: 'Horizontal bar chart of feature usage rates',    chartId: 'horizBar'
+      ChartCard title: 'Support Volume by Channel',  subtitle: 'Polar area chart of ticket counts',              chartId: 'polar'
+      ChartCard title: 'Engagement vs. Retention',   subtitle: 'Scatter with regression trend by cohort',        chartId: 'scatterReg'
+</script>
+</body>
+</html>