Commit 7b447776a1bb51ec6bb8bcad6daf1eb5867d10f9
0 parents
Add conversion funnel modeling page
3D Three.js funnel visualizing the product's growth funnel (traffic entry through viral loop) with an editable channel/feature breakdown and target-based red/yellow/blue/green conversion-rate alerts. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Showing
1 changed file
with
984 additions
and
0 deletions
index.html
0 → 100644
| 1 | +++ a/index.html | |
| 1 | +<!doctype html> | |
| 2 | +<html lang="zh-CN"> | |
| 3 | +<head> | |
| 4 | +<meta charset="utf-8"> | |
| 5 | +<meta name="viewport" content="width=device-width, initial-scale=1"> | |
| 6 | +<title>转化漏斗建模台</title> | |
| 7 | +<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>📉</text></svg>"> | |
| 8 | +<link rel="preconnect" href="https://fonts.googleapis.com"> | |
| 9 | +<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| 10 | +<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Sans+SC:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap" rel="stylesheet"> | |
| 11 | +<style> | |
| 12 | + *{ box-sizing:border-box; } | |
| 13 | + html{ color-scheme: light; } | |
| 14 | + body{ margin: 0; } | |
| 15 | + :root{ | |
| 16 | + color-scheme: light; | |
| 17 | + --page: #f9f9f7; | |
| 18 | + --surface: #fcfcfb; | |
| 19 | + --ink: #0b0b0b; | |
| 20 | + --ink-2: #52514e; | |
| 21 | + --muted: #898781; | |
| 22 | + --grid: #e1e0d9; | |
| 23 | + --border: rgba(11,11,11,0.10); | |
| 24 | + --good: #0ca30c; | |
| 25 | + --critical: #d03b3b; | |
| 26 | + --accent: #2a78d6; | |
| 27 | + --spout: #0d366b; | |
| 28 | + --alert-red: #d03b3b; | |
| 29 | + --alert-yellow: #eda100; | |
| 30 | + --alert-blue: #2a78d6; | |
| 31 | + --alert-green: #008300; | |
| 32 | + --shadow: 0 1px 2px rgba(11,11,11,0.05), 0 8px 24px -12px rgba(11,11,11,0.18); | |
| 33 | + } | |
| 34 | + @media (prefers-color-scheme: dark){ | |
| 35 | + :root:not([data-theme="light"]){ | |
| 36 | + color-scheme: dark; | |
| 37 | + --page: #0d0d0d; | |
| 38 | + --surface: #1a1a19; | |
| 39 | + --ink: #ffffff; | |
| 40 | + --ink-2: #c3c2b7; | |
| 41 | + --muted: #898781; | |
| 42 | + --grid: #2c2c2a; | |
| 43 | + --border: rgba(255,255,255,0.10); | |
| 44 | + --good: #0ca30c; | |
| 45 | + --critical: #d03b3b; | |
| 46 | + --accent: #3987e5; | |
| 47 | + --spout: #cde2fb; | |
| 48 | + --alert-red: #d03b3b; | |
| 49 | + --alert-yellow: #c98500; | |
| 50 | + --alert-blue: #3987e5; | |
| 51 | + --alert-green: #008300; | |
| 52 | + --shadow: 0 1px 2px rgba(0,0,0,0.4), 0 8px 28px -12px rgba(0,0,0,0.6); | |
| 53 | + } | |
| 54 | + } | |
| 55 | + :root[data-theme="dark"]{ | |
| 56 | + color-scheme: dark; | |
| 57 | + --page: #0d0d0d; | |
| 58 | + --surface: #1a1a19; | |
| 59 | + --ink: #ffffff; | |
| 60 | + --ink-2: #c3c2b7; | |
| 61 | + --muted: #898781; | |
| 62 | + --grid: #2c2c2a; | |
| 63 | + --border: rgba(255,255,255,0.10); | |
| 64 | + --good: #0ca30c; | |
| 65 | + --critical: #d03b3b; | |
| 66 | + --accent: #3987e5; | |
| 67 | + --spout: #cde2fb; | |
| 68 | + --alert-red: #d03b3b; | |
| 69 | + --alert-yellow: #c98500; | |
| 70 | + --alert-blue: #3987e5; | |
| 71 | + --alert-green: #008300; | |
| 72 | + --shadow: 0 1px 2px rgba(0,0,0,0.4), 0 8px 28px -12px rgba(0,0,0,0.6); | |
| 73 | + } | |
| 74 | + | |
| 75 | + body{ | |
| 76 | + background: var(--page); | |
| 77 | + color: var(--ink); | |
| 78 | + font-family: "IBM Plex Sans", "IBM Plex Sans SC", system-ui, -apple-system, "Segoe UI", sans-serif; | |
| 79 | + } | |
| 80 | + .wrap{ | |
| 81 | + max-width: 1220px; | |
| 82 | + margin: 0 auto; | |
| 83 | + padding-inline: clamp(16px, 4vw, 32px); | |
| 84 | + padding-block: clamp(20px, 4vw, 40px); | |
| 85 | + } | |
| 86 | + .mono{ font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; } | |
| 87 | + .tab{ font-variant-numeric: tabular-nums; } | |
| 88 | + | |
| 89 | + header{ | |
| 90 | + display:flex; | |
| 91 | + flex-wrap: wrap; | |
| 92 | + justify-content: space-between; | |
| 93 | + align-items: flex-end; | |
| 94 | + gap: 16px; | |
| 95 | + margin-bottom: 28px; | |
| 96 | + padding-bottom: 20px; | |
| 97 | + border-bottom: 1px solid var(--border); | |
| 98 | + } | |
| 99 | + header h1{ | |
| 100 | + margin:0; | |
| 101 | + font-size: clamp(22px, 3vw, 28px); | |
| 102 | + font-weight: 700; | |
| 103 | + letter-spacing: -0.01em; | |
| 104 | + text-wrap: balance; | |
| 105 | + } | |
| 106 | + header p{ | |
| 107 | + margin: 6px 0 0; | |
| 108 | + color: var(--ink-2); | |
| 109 | + font-size: 13.5px; | |
| 110 | + max-width: 60ch; | |
| 111 | + line-height: 1.5; | |
| 112 | + } | |
| 113 | + .eyebrow{ | |
| 114 | + display:block; | |
| 115 | + font-size: 11px; | |
| 116 | + font-weight: 600; | |
| 117 | + letter-spacing: 0.08em; | |
| 118 | + text-transform: uppercase; | |
| 119 | + color: var(--accent); | |
| 120 | + margin-bottom: 6px; | |
| 121 | + } | |
| 122 | + .reset-btn{ | |
| 123 | + appearance:none; | |
| 124 | + border: 1px solid var(--border); | |
| 125 | + background: var(--surface); | |
| 126 | + color: var(--ink-2); | |
| 127 | + font: inherit; | |
| 128 | + font-size: 13px; | |
| 129 | + font-weight: 500; | |
| 130 | + padding: 9px 14px; | |
| 131 | + border-radius: 8px; | |
| 132 | + cursor: pointer; | |
| 133 | + white-space: nowrap; | |
| 134 | + } | |
| 135 | + .reset-btn:hover{ color: var(--ink); border-color: var(--ink-2); } | |
| 136 | + .reset-btn:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; } | |
| 137 | + | |
| 138 | + .stats{ | |
| 139 | + display:grid; | |
| 140 | + grid-template-columns: repeat(4, 1fr); | |
| 141 | + gap: 12px; | |
| 142 | + margin-bottom: 24px; | |
| 143 | + } | |
| 144 | + @media (max-width: 720px){ .stats{ grid-template-columns: repeat(2, 1fr); } } | |
| 145 | + .stat{ | |
| 146 | + background: var(--surface); | |
| 147 | + border: 1px solid var(--border); | |
| 148 | + border-radius: 12px; | |
| 149 | + padding: 14px 16px; | |
| 150 | + } | |
| 151 | + .stat .label{ | |
| 152 | + font-size: 11px; | |
| 153 | + font-weight: 600; | |
| 154 | + letter-spacing: 0.04em; | |
| 155 | + text-transform: uppercase; | |
| 156 | + color: var(--muted); | |
| 157 | + margin-bottom: 8px; | |
| 158 | + } | |
| 159 | + .stat .value{ | |
| 160 | + font-size: 21px; | |
| 161 | + font-weight: 600; | |
| 162 | + letter-spacing: -0.01em; | |
| 163 | + } | |
| 164 | + .stat .sub{ | |
| 165 | + margin-top: 4px; | |
| 166 | + font-size: 12px; | |
| 167 | + color: var(--ink-2); | |
| 168 | + } | |
| 169 | + .badge{ | |
| 170 | + display:inline-flex; | |
| 171 | + align-items:center; | |
| 172 | + gap: 4px; | |
| 173 | + font-size: 11.5px; | |
| 174 | + font-weight: 600; | |
| 175 | + padding: 2px 7px; | |
| 176 | + border-radius: 999px; | |
| 177 | + } | |
| 178 | + .badge.red{ color: var(--alert-red); background: color-mix(in srgb, var(--alert-red) 14%, transparent); } | |
| 179 | + .badge.yellow{ color: var(--alert-yellow); background: color-mix(in srgb, var(--alert-yellow) 18%, transparent); } | |
| 180 | + .badge.blue{ color: var(--alert-blue); background: color-mix(in srgb, var(--alert-blue) 14%, transparent); } | |
| 181 | + .badge.green{ color: var(--alert-green); background: color-mix(in srgb, var(--alert-green) 14%, transparent); } | |
| 182 | + | |
| 183 | + .alert-legend{ | |
| 184 | + display:flex; | |
| 185 | + flex-wrap: wrap; | |
| 186 | + gap: 16px; | |
| 187 | + margin: -10px 0 20px; | |
| 188 | + font-size: 11.5px; | |
| 189 | + color: var(--ink-2); | |
| 190 | + } | |
| 191 | + .alert-legend .item{ display:flex; align-items:center; gap:6px; } | |
| 192 | + | |
| 193 | + .status-line{ | |
| 194 | + font-size: 11.5px; | |
| 195 | + font-weight: 600; | |
| 196 | + margin: 0 12px 10px 0; | |
| 197 | + } | |
| 198 | + | |
| 199 | + .board{ | |
| 200 | + display:grid; | |
| 201 | + grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); | |
| 202 | + gap: 20px; | |
| 203 | + align-items: start; | |
| 204 | + } | |
| 205 | + @media (max-width: 900px){ .board{ grid-template-columns: 1fr; } } | |
| 206 | + | |
| 207 | + .panel{ | |
| 208 | + background: var(--surface); | |
| 209 | + border: 1px solid var(--border); | |
| 210 | + border-radius: 14px; | |
| 211 | + box-shadow: var(--shadow); | |
| 212 | + overflow: hidden; | |
| 213 | + } | |
| 214 | + .panel-head{ | |
| 215 | + display:flex; | |
| 216 | + justify-content: space-between; | |
| 217 | + align-items: baseline; | |
| 218 | + gap: 10px; | |
| 219 | + padding: 16px 18px 0; | |
| 220 | + } | |
| 221 | + .panel-head h2{ | |
| 222 | + margin:0; | |
| 223 | + font-size: 14px; | |
| 224 | + font-weight: 600; | |
| 225 | + } | |
| 226 | + .panel-head span{ | |
| 227 | + font-size: 11.5px; | |
| 228 | + color: var(--muted); | |
| 229 | + } | |
| 230 | + | |
| 231 | + .funnel-stage{ | |
| 232 | + position: relative; | |
| 233 | + aspect-ratio: 4 / 4.4; | |
| 234 | + max-width: 100%; | |
| 235 | + cursor: grab; | |
| 236 | + } | |
| 237 | + .funnel-stage canvas{ display:block; width:100%; height:100%; touch-action: none; } | |
| 238 | + .labels{ | |
| 239 | + position: absolute; | |
| 240 | + inset: 0; | |
| 241 | + pointer-events: none; | |
| 242 | + } | |
| 243 | + .flabel{ | |
| 244 | + position:absolute; | |
| 245 | + transform: translate(0, -50%); | |
| 246 | + display:flex; | |
| 247 | + flex-direction: column; | |
| 248 | + gap: 2px; | |
| 249 | + padding: 4px 8px; | |
| 250 | + border-radius: 8px; | |
| 251 | + background: color-mix(in srgb, var(--surface) 82%, transparent); | |
| 252 | + border: 1px solid var(--border); | |
| 253 | + backdrop-filter: blur(2px); | |
| 254 | + font-size: 11px; | |
| 255 | + line-height: 1.3; | |
| 256 | + white-space: nowrap; | |
| 257 | + transition: opacity 120ms linear; | |
| 258 | + } | |
| 259 | + .flabel.left{ transform: translate(-100%, -50%); } | |
| 260 | + .flabel .name{ font-weight: 600; color: var(--ink); } | |
| 261 | + .flabel .val{ color: var(--ink-2); } | |
| 262 | + .flabel .conv{ font-weight: 600; } | |
| 263 | + .funnel-hint{ | |
| 264 | + padding: 8px 18px 14px; | |
| 265 | + font-size: 11.5px; | |
| 266 | + color: var(--muted); | |
| 267 | + } | |
| 268 | + | |
| 269 | + .tree{ | |
| 270 | + max-height: 620px; | |
| 271 | + overflow-y: auto; | |
| 272 | + padding: 6px 6px 14px; | |
| 273 | + } | |
| 274 | + .tnode{ position: relative; } | |
| 275 | + .trow{ | |
| 276 | + display:flex; | |
| 277 | + align-items:center; | |
| 278 | + gap: 8px; | |
| 279 | + padding: 7px 12px 7px 0; | |
| 280 | + border-radius: 8px; | |
| 281 | + font-size: 13px; | |
| 282 | + } | |
| 283 | + .trow.flash{ animation: flashBg 900ms ease; } | |
| 284 | + @keyframes flashBg{ | |
| 285 | + 0%{ background: color-mix(in srgb, var(--accent) 22%, transparent); } | |
| 286 | + 100%{ background: transparent; } | |
| 287 | + } | |
| 288 | + .trow-toggle{ | |
| 289 | + appearance:none; | |
| 290 | + border:none; | |
| 291 | + background:none; | |
| 292 | + color: var(--muted); | |
| 293 | + width: 16px; | |
| 294 | + height: 16px; | |
| 295 | + flex-shrink:0; | |
| 296 | + font-size: 10px; | |
| 297 | + cursor:pointer; | |
| 298 | + display:flex; | |
| 299 | + align-items:center; | |
| 300 | + justify-content:center; | |
| 301 | + } | |
| 302 | + .trow-toggle:focus-visible{ outline: 2px solid var(--accent); border-radius: 4px; } | |
| 303 | + .trow-toggle-spacer{ width:16px; height:16px; flex-shrink:0; display:inline-block; } | |
| 304 | + .dot{ | |
| 305 | + width: 9px; height: 9px; | |
| 306 | + border-radius: 3px; | |
| 307 | + flex-shrink:0; | |
| 308 | + } | |
| 309 | + .dot-muted{ background: var(--grid); border: 1px solid var(--border); } | |
| 310 | + .trow-name{ | |
| 311 | + flex: 1 1 auto; | |
| 312 | + min-width: 0; | |
| 313 | + overflow: hidden; | |
| 314 | + text-overflow: ellipsis; | |
| 315 | + white-space: nowrap; | |
| 316 | + font-weight: 500; | |
| 317 | + } | |
| 318 | + .tnode[data-depth="0"] > .trow .trow-name{ font-weight: 600; } | |
| 319 | + .trow-right{ | |
| 320 | + display:flex; | |
| 321 | + align-items:center; | |
| 322 | + gap: 10px; | |
| 323 | + flex-shrink:0; | |
| 324 | + } | |
| 325 | + .trow-val{ font-size: 13px; } | |
| 326 | + .trow-val.strong{ font-weight: 600; } | |
| 327 | + .trow-pct{ | |
| 328 | + font-size: 11.5px; | |
| 329 | + color: var(--muted); | |
| 330 | + width: 34px; | |
| 331 | + text-align: right; | |
| 332 | + } | |
| 333 | + input.val-input{ | |
| 334 | + width: 96px; | |
| 335 | + text-align: right; | |
| 336 | + border: 1px solid var(--border); | |
| 337 | + background: var(--page); | |
| 338 | + color: var(--ink); | |
| 339 | + border-radius: 6px; | |
| 340 | + padding: 5px 7px; | |
| 341 | + font: inherit; | |
| 342 | + font-family: "IBM Plex Mono", ui-monospace, monospace; | |
| 343 | + font-size: 12.5px; | |
| 344 | + font-variant-numeric: tabular-nums; | |
| 345 | + } | |
| 346 | + input.val-input:focus-visible{ outline: 2px solid var(--accent); outline-offset: 1px; } | |
| 347 | + .trow-bar-track{ | |
| 348 | + height: 3px; | |
| 349 | + border-radius: 2px; | |
| 350 | + background: var(--grid); | |
| 351 | + margin: 0 12px 2px 0; | |
| 352 | + overflow: hidden; | |
| 353 | + } | |
| 354 | + .trow-bar-fill{ height: 100%; border-radius: 2px; } | |
| 355 | + .notes-row{ | |
| 356 | + display:flex; | |
| 357 | + flex-wrap:wrap; | |
| 358 | + gap: 6px; | |
| 359 | + margin: 0 12px 8px 0; | |
| 360 | + } | |
| 361 | + .chip{ | |
| 362 | + font-size: 11px; | |
| 363 | + color: var(--ink-2); | |
| 364 | + background: var(--page); | |
| 365 | + border: 1px solid var(--border); | |
| 366 | + border-radius: 999px; | |
| 367 | + padding: 2px 9px; | |
| 368 | + } | |
| 369 | + .loop-note{ | |
| 370 | + font-size: 11.5px; | |
| 371 | + color: var(--accent); | |
| 372 | + margin: 0 12px 10px 0; | |
| 373 | + } | |
| 374 | + .tchildren{ position: relative; } | |
| 375 | + | |
| 376 | + footer{ | |
| 377 | + margin-top: 22px; | |
| 378 | + font-size: 12px; | |
| 379 | + color: var(--muted); | |
| 380 | + line-height: 1.6; | |
| 381 | + } | |
| 382 | +</style> | |
| 383 | +</head> | |
| 384 | +<body> | |
| 385 | +<div class="wrap"> | |
| 386 | + <header> | |
| 387 | + <div> | |
| 388 | + <span class="eyebrow">产品增长漏斗模型</span> | |
| 389 | + <h1>转化漏斗建模台</h1> | |
| 390 | + <p>流量入口 → 网站访问 → 注册 → 使用 → 付费点 → 选购积分 → 订单支付 → 支付状态 → 传播裂变。点击右侧箭头展开各级渠道明细,数值可编辑。</p> | |
| 391 | + </div> | |
| 392 | + <button class="reset-btn" id="resetBtn" type="button">重置为示例数据</button> | |
| 393 | + </header> | |
| 394 | + | |
| 395 | + <div class="stats" id="statsRow"></div> | |
| 396 | + <div class="alert-legend" id="alertLegend"></div> | |
| 397 | + | |
| 398 | + <div class="board"> | |
| 399 | + <section class="panel"> | |
| 400 | + <div class="panel-head"> | |
| 401 | + <h2>漏斗模型(3D)</h2> | |
| 402 | + <span>拖动旋转 · 滚轮缩放 · 点击定位明细</span> | |
| 403 | + </div> | |
| 404 | + <div class="funnel-stage" id="funnelStage"> | |
| 405 | + <canvas id="funnelCanvas"></canvas> | |
| 406 | + <div class="labels" id="labelLayer"></div> | |
| 407 | + </div> | |
| 408 | + <p class="funnel-hint">柱体宽度按各级流量的平方根缩放,颜色按本级转化率相对目标值分级:低于目标一半为红色,低于目标为黄色,达到目标为蓝色,达到 2 倍目标为绿色。支付状态一级以「支付成功」延续漏斗,「支付失败」计为本级流失。</p> | |
| 409 | + </section> | |
| 410 | + | |
| 411 | + <section class="panel"> | |
| 412 | + <div class="panel-head"> | |
| 413 | + <h2>各级明细</h2> | |
| 414 | + <span>可编辑</span> | |
| 415 | + </div> | |
| 416 | + <div class="tree" id="treeLayer"></div> | |
| 417 | + </section> | |
| 418 | + </div> | |
| 419 | + | |
| 420 | + <footer>数值为示例数据,可编辑替换为真实业务口径;带子项的行为下级之和,仅末级数值可编辑;灰色标签为该环节涉及的配置维度(非独立计数)。</footer> | |
| 421 | +</div> | |
| 422 | + | |
| 423 | +<script src="https://cdn.jsdelivr.net/npm/three@0.128.0/build/three.min.js"></script> | |
| 424 | +<script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.js"></script> | |
| 425 | +<script> | |
| 426 | +(function(){ | |
| 427 | + "use strict"; | |
| 428 | + | |
| 429 | + // ---------- data model ---------- | |
| 430 | + // A node is either a leaf ({name, value[, notes, status]}) or a branch | |
| 431 | + // ({name, children[...]}) whose value is the sum of its children. | |
| 432 | + var TREE = [ | |
| 433 | + { name: "流量入口", children: [ | |
| 434 | + { name: "自有社媒平台", children: [ | |
| 435 | + { name: "TikTok", value: 28000 }, | |
| 436 | + { name: "YouTube", value: 21000 }, | |
| 437 | + { name: "Instagram", value: 9000 }, | |
| 438 | + { name: "Facebook", value: 6000 }, | |
| 439 | + { name: "Trea", value: 3000 }, | |
| 440 | + { name: "Discord", value: 4000 }, | |
| 441 | + { name: "Reddit", value: 5000 } | |
| 442 | + ] | |
| 443 | + }, | |
| 444 | + { name: "广告投放", value: 55000 }, | |
| 445 | + { name: "邮件投放", children: [ | |
| 446 | + { name: "LemonAI 邮件列表", value: 18000 } | |
| 447 | + ] | |
| 448 | + }, | |
| 449 | + { name: "KOL / KOC 社媒平台", value: 30000 }, | |
| 450 | + { name: "SEO / GEO", value: 15000 }, | |
| 451 | + { name: "榜单平台", children: [ | |
| 452 | + { name: "Product Hunt", value: 4000 }, | |
| 453 | + { name: "产品集合站", value: 2000 } | |
| 454 | + ] | |
| 455 | + } | |
| 456 | + ] | |
| 457 | + }, | |
| 458 | + { name: "网站访问(看视频)", value: 96000 }, | |
| 459 | + { name: "网站注册", value: 38400 }, | |
| 460 | + { name: "网站使用(游玩游戏)", children: [ | |
| 461 | + { name: "文字输入", value: 10000 }, | |
| 462 | + { name: "语音输入", value: 4200 }, | |
| 463 | + { name: "视频生成(切片)", value: 6800 }, | |
| 464 | + { name: "视频生成(全局)", value: 3880 }, | |
| 465 | + { name: "游戏生成(Free)", value: 2000 } | |
| 466 | + ] | |
| 467 | + }, | |
| 468 | + { name: "网站付费点", children: [ | |
| 469 | + { name: "剧情改写费", value: 5200 }, | |
| 470 | + { name: "视频生成费", value: 2864 } | |
| 471 | + ] | |
| 472 | + }, | |
| 473 | + { name: "选购积分", children: [ | |
| 474 | + { name: "每日登录领取积分", value: 2000 }, | |
| 475 | + { name: "购买积分页面", value: 3645, | |
| 476 | + notes: ["多个档位", "多种订阅方式", "自动充值开关"] } | |
| 477 | + ] | |
| 478 | + }, | |
| 479 | + { name: "订单支付", value: 3200, | |
| 480 | + notes: ["支付方式选择", "支付银行卡选择", "优惠券输入"] }, | |
| 481 | + { name: "支付状态", children: [ | |
| 482 | + { name: "支付失败", value: 640, status: "critical" }, | |
| 483 | + { name: "支付成功", status: "good", children: [ | |
| 484 | + { name: "订阅成功(首次)", value: 1400 }, | |
| 485 | + { name: "订阅续费", value: 900 }, | |
| 486 | + { name: "自动充值", value: 260 } | |
| 487 | + ] | |
| 488 | + } | |
| 489 | + ] | |
| 490 | + }, | |
| 491 | + { name: "用户传播裂变", children: [ | |
| 492 | + { name: "分享按钮", children: [ | |
| 493 | + { name: "X", value: 300 }, | |
| 494 | + { name: "YouTube", value: 150 }, | |
| 495 | + { name: "TikTok", value: 220 }, | |
| 496 | + { name: "Instagram", value: 180 }, | |
| 497 | + { name: "Facebook", value: 130 } | |
| 498 | + ] | |
| 499 | + }, | |
| 500 | + { name: "下载视频", value: 640 }, | |
| 501 | + { name: "新用户邀请积分", value: 410 } | |
| 502 | + ] | |
| 503 | + } | |
| 504 | + ]; | |
| 505 | + | |
| 506 | + var nf = new Intl.NumberFormat("zh-CN"); | |
| 507 | + var pf = new Intl.NumberFormat("zh-CN", { maximumFractionDigits: 1, minimumFractionDigits: 1 }); | |
| 508 | + function fmtPct(x){ return pf.format(x * 100) + "%"; } | |
| 509 | + | |
| 510 | + function isLeaf(node){ return !(node.children && node.children.length); } | |
| 511 | + function getValue(node){ | |
| 512 | + if (isLeaf(node)) return node.value || 0; | |
| 513 | + return node.children.reduce(function(sum, c){ return sum + getValue(c); }, 0); | |
| 514 | + } | |
| 515 | + function forEachNode(nodes, fn){ | |
| 516 | + nodes.forEach(function(n){ fn(n); if (n.children) forEachNode(n.children, fn); }); | |
| 517 | + } | |
| 518 | + | |
| 519 | + var idIndex = {}; | |
| 520 | + (function walk(nodes, prefix, depth, parent){ | |
| 521 | + nodes.forEach(function(node, i){ | |
| 522 | + var id = prefix ? prefix + "-" + i : String(i); | |
| 523 | + node.__id = id; | |
| 524 | + node.__depth = depth; | |
| 525 | + node.__parent = parent || null; | |
| 526 | + if (isLeaf(node)) node.__defaultValue = node.value; | |
| 527 | + idIndex[id] = node; | |
| 528 | + if (node.children) walk(node.children, id, depth + 1, node); | |
| 529 | + }); | |
| 530 | + })(TREE, "", 0, null); | |
| 531 | + | |
| 532 | + var payStatusNode = TREE[7]; | |
| 533 | + var paySuccessNode = payStatusNode.children.filter(function(c){ return c.name === "支付成功"; })[0]; | |
| 534 | + var payFailNode = payStatusNode.children.filter(function(c){ return c.name === "支付失败"; })[0]; | |
| 535 | + | |
| 536 | + function funnelValues(){ | |
| 537 | + return TREE.map(function(node){ | |
| 538 | + return node === payStatusNode ? getValue(paySuccessNode) : getValue(node); | |
| 539 | + }); | |
| 540 | + } | |
| 541 | + | |
| 542 | + // ---------- target-based alert levels ---------- | |
| 543 | + // Estimated target conversion rate INTO each stage (index aligned to TREE); | |
| 544 | + // index 0 (流量入口) has no incoming rate. Replace with real business targets | |
| 545 | + // once available. | |
| 546 | + var TARGETS = [null, 0.50, 0.25, 0.60, 0.20, 0.50, 0.40, 0.90, 0.20]; | |
| 547 | + var ALERT_TEXT = { | |
| 548 | + red: "红色 · 低于目标一半", | |
| 549 | + yellow: "黄色 · 低于目标", | |
| 550 | + blue: "蓝色 · 已达标", | |
| 551 | + green: "绿色 · 超额达标(≥2×目标)" | |
| 552 | + }; | |
| 553 | + var ALERT_SHORT = { red: "警戒", yellow: "待改善", blue: "达标", green: "超额" }; | |
| 554 | + | |
| 555 | + function stageStatus(i, vals){ | |
| 556 | + var target = TARGETS[i]; | |
| 557 | + if (target == null) return { rate: null, target: null, level: null }; | |
| 558 | + var rate = vals[i - 1] > 0 ? vals[i] / vals[i - 1] : 0; | |
| 559 | + var level; | |
| 560 | + if (rate < target / 2) level = "red"; | |
| 561 | + else if (rate < target) level = "yellow"; | |
| 562 | + else if (rate < target * 2) level = "blue"; | |
| 563 | + else level = "green"; | |
| 564 | + return { rate: rate, target: target, level: level }; | |
| 565 | + } | |
| 566 | + | |
| 567 | + function alertVar(level){ | |
| 568 | + return level === "red" ? "--alert-red" | |
| 569 | + : level === "yellow" ? "--alert-yellow" | |
| 570 | + : level === "green" ? "--alert-green" | |
| 571 | + : level === "blue" ? "--alert-blue" | |
| 572 | + : "--muted"; | |
| 573 | + } | |
| 574 | + | |
| 575 | + function renderLegend(){ | |
| 576 | + document.getElementById("alertLegend").innerHTML = | |
| 577 | + '<span class="item"><span class="dot" style="background:var(--alert-red)"></span>低于目标一半</span>' + | |
| 578 | + '<span class="item"><span class="dot" style="background:var(--alert-yellow)"></span>低于目标</span>' + | |
| 579 | + '<span class="item"><span class="dot" style="background:var(--alert-blue)"></span>达到目标</span>' + | |
| 580 | + '<span class="item"><span class="dot" style="background:var(--alert-green)"></span>达到 2 倍目标</span>'; | |
| 581 | + } | |
| 582 | + | |
| 583 | + var expanded = {}; | |
| 584 | + TREE.forEach(function(n){ expanded[n.__id] = true; }); | |
| 585 | + | |
| 586 | + function resetToDefaults(){ | |
| 587 | + forEachNode(TREE, function(n){ if (isLeaf(n)) n.value = n.__defaultValue; }); | |
| 588 | + renderAll(); | |
| 589 | + } | |
| 590 | + document.getElementById("resetBtn").addEventListener("click", resetToDefaults); | |
| 591 | + | |
| 592 | + // ---------- stats row ---------- | |
| 593 | + var statsRow = document.getElementById("statsRow"); | |
| 594 | + | |
| 595 | + function renderStats(){ | |
| 596 | + var vals = funnelValues(); | |
| 597 | + var top = vals[0]; | |
| 598 | + var overall = top > 0 ? vals[vals.length - 1] / top : 0; | |
| 599 | + | |
| 600 | + var steps = []; | |
| 601 | + for (var i = 1; i < vals.length; i++){ | |
| 602 | + var st = stageStatus(i, vals); | |
| 603 | + steps.push({ | |
| 604 | + label: TREE[i - 1].name + " → " + TREE[i].name, | |
| 605 | + st: st, | |
| 606 | + ratio: st.target > 0 ? st.rate / st.target : 0 | |
| 607 | + }); | |
| 608 | + } | |
| 609 | + var passCount = steps.filter(function(s){ return s.st.level === "blue" || s.st.level === "green"; }).length; | |
| 610 | + var worst = steps.reduce(function(a, b){ return b.ratio < a.ratio ? b : a; }); | |
| 611 | + | |
| 612 | + statsRow.innerHTML = | |
| 613 | + '<div class="stat"><div class="label">顶部流量</div>' + | |
| 614 | + '<div class="value mono tab">' + nf.format(top) + "</div>" + | |
| 615 | + '<div class="sub">' + TREE[0].name + "</div></div>" + | |
| 616 | + '<div class="stat"><div class="label">整体转化率</div>' + | |
| 617 | + '<div class="value mono tab">' + fmtPct(overall) + "</div>" + | |
| 618 | + '<div class="sub">' + TREE[0].name + " → " + TREE[TREE.length - 1].name + "</div></div>" + | |
| 619 | + '<div class="stat"><div class="label">达标环节</div>' + | |
| 620 | + '<div class="value mono tab">' + passCount + " / " + steps.length + "</div>" + | |
| 621 | + '<div class="sub">蓝色或绿色(≥目标)环节数</div></div>' + | |
| 622 | + '<div class="stat"><div class="label">最需关注</div>' + | |
| 623 | + '<div class="value mono tab" style="color:var(' + alertVar(worst.st.level) + ')">' + fmtPct(worst.st.rate) + "</div>" + | |
| 624 | + '<div class="sub"><span class="badge ' + worst.st.level + '">● ' + ALERT_SHORT[worst.st.level] + "</span> " + worst.label + "</div></div>"; | |
| 625 | + } | |
| 626 | + | |
| 627 | + function tokenHex(name){ | |
| 628 | + return getComputedStyle(document.documentElement).getPropertyValue(name).trim(); | |
| 629 | + } | |
| 630 | + | |
| 631 | + function stageColorHex(i, vals){ | |
| 632 | + if (i === 0) return tokenHex("--muted"); | |
| 633 | + return tokenHex(alertVar(stageStatus(i, vals).level)); | |
| 634 | + } | |
| 635 | + | |
| 636 | + // ---------- editable tree panel ---------- | |
| 637 | + var treeLayer = document.getElementById("treeLayer"); | |
| 638 | + | |
| 639 | + function renderNode(node, topIndex, vals){ | |
| 640 | + var depth = node.__depth; | |
| 641 | + var hasChildren = !isLeaf(node); | |
| 642 | + var wrapper = document.createElement("div"); | |
| 643 | + wrapper.className = "tnode"; | |
| 644 | + wrapper.setAttribute("data-depth", depth); | |
| 645 | + | |
| 646 | + var row = document.createElement("div"); | |
| 647 | + row.className = "trow"; | |
| 648 | + row.style.paddingLeft = (14 + depth * 18) + "px"; | |
| 649 | + if (depth === 0) row.id = "stage-row-" + topIndex; | |
| 650 | + | |
| 651 | + var toggleHtml = hasChildren | |
| 652 | + ? '<button class="trow-toggle" type="button" aria-label="展开或收起' + node.name + '" data-id="' + node.__id + '">' + (expanded[node.__id] ? "▾" : "▸") + "</button>" | |
| 653 | + : '<span class="trow-toggle-spacer"></span>'; | |
| 654 | + | |
| 655 | + var dotHtml; | |
| 656 | + if (depth === 0){ | |
| 657 | + dotHtml = '<span class="dot" style="background:' + stageColorHex(topIndex, vals) + '"></span>'; | |
| 658 | + } else if (node.status === "critical"){ | |
| 659 | + dotHtml = '<span class="dot" style="background:var(--critical)"></span>'; | |
| 660 | + } else if (node.status === "good"){ | |
| 661 | + dotHtml = '<span class="dot" style="background:var(--good)"></span>'; | |
| 662 | + } else { | |
| 663 | + dotHtml = '<span class="dot dot-muted"></span>'; | |
| 664 | + } | |
| 665 | + | |
| 666 | + var val = getValue(node); | |
| 667 | + var parentVal = node.__parent ? getValue(node.__parent) : null; | |
| 668 | + var pct = parentVal ? (val / parentVal * 100) : null; | |
| 669 | + | |
| 670 | + var valueHtml = hasChildren | |
| 671 | + ? '<span class="trow-val mono tab strong">' + nf.format(val) + "</span>" | |
| 672 | + : '<input class="val-input mono" type="number" min="0" step="1" value="' + val + '" data-id="' + node.__id + '" aria-label="' + node.name + ' 数值">'; | |
| 673 | + | |
| 674 | + row.innerHTML = toggleHtml + dotHtml + | |
| 675 | + '<span class="trow-name">' + node.name + "</span>" + | |
| 676 | + '<span class="trow-right">' + valueHtml + | |
| 677 | + (pct !== null ? '<span class="trow-pct mono tab">' + pct.toFixed(0) + "%</span>" : "") + | |
| 678 | + "</span>"; | |
| 679 | + wrapper.appendChild(row); | |
| 680 | + | |
| 681 | + if (pct !== null){ | |
| 682 | + var bar = document.createElement("div"); | |
| 683 | + bar.className = "trow-bar-track"; | |
| 684 | + bar.style.marginLeft = (14 + depth * 18 + 22) + "px"; | |
| 685 | + bar.innerHTML = '<div class="trow-bar-fill" style="width:' + Math.min(100, pct) + '%; background:var(--muted)"></div>'; | |
| 686 | + wrapper.appendChild(bar); | |
| 687 | + } | |
| 688 | + | |
| 689 | + if (node.notes && node.notes.length){ | |
| 690 | + var notesRow = document.createElement("div"); | |
| 691 | + notesRow.className = "notes-row"; | |
| 692 | + notesRow.style.marginLeft = (14 + depth * 18 + 22) + "px"; | |
| 693 | + notesRow.innerHTML = node.notes.map(function(t){ return '<span class="chip">' + t + "</span>"; }).join(""); | |
| 694 | + wrapper.appendChild(notesRow); | |
| 695 | + } | |
| 696 | + | |
| 697 | + if (node === payStatusNode){ | |
| 698 | + var failVal = getValue(payFailNode); | |
| 699 | + var note = document.createElement("div"); | |
| 700 | + note.className = "loop-note"; | |
| 701 | + note.style.color = "var(--critical)"; | |
| 702 | + note.style.marginLeft = (14 + depth * 18 + 22) + "px"; | |
| 703 | + note.textContent = "本级流失(支付失败):" + nf.format(failVal) + ",漏斗以「支付成功」延续"; | |
| 704 | + wrapper.appendChild(note); | |
| 705 | + } | |
| 706 | + if (node.name === "用户传播裂变"){ | |
| 707 | + var loop = document.createElement("div"); | |
| 708 | + loop.className = "loop-note"; | |
| 709 | + loop.style.marginLeft = (14 + depth * 18 + 22) + "px"; | |
| 710 | + loop.textContent = "↻ 邀请奖励反哺「流量入口」,形成增长闭环"; | |
| 711 | + wrapper.appendChild(loop); | |
| 712 | + } | |
| 713 | + | |
| 714 | + if (depth === 0 && topIndex >= 1){ | |
| 715 | + var st = stageStatus(topIndex, vals); | |
| 716 | + var statusLine = document.createElement("div"); | |
| 717 | + statusLine.className = "status-line"; | |
| 718 | + statusLine.style.marginLeft = (14 + depth * 18 + 22) + "px"; | |
| 719 | + statusLine.style.color = "var(" + alertVar(st.level) + ")"; | |
| 720 | + statusLine.textContent = "目标 " + fmtPct(st.target) + " · 实际 " + fmtPct(st.rate) + " · " + ALERT_TEXT[st.level]; | |
| 721 | + wrapper.appendChild(statusLine); | |
| 722 | + } | |
| 723 | + | |
| 724 | + if (hasChildren && expanded[node.__id]){ | |
| 725 | + var childWrap = document.createElement("div"); | |
| 726 | + childWrap.className = "tchildren"; | |
| 727 | + node.children.forEach(function(c){ childWrap.appendChild(renderNode(c, topIndex, vals)); }); | |
| 728 | + wrapper.appendChild(childWrap); | |
| 729 | + } | |
| 730 | + | |
| 731 | + return wrapper; | |
| 732 | + } | |
| 733 | + | |
| 734 | + function renderTree(){ | |
| 735 | + var vals = funnelValues(); | |
| 736 | + treeLayer.innerHTML = ""; | |
| 737 | + TREE.forEach(function(node, i){ treeLayer.appendChild(renderNode(node, i, vals)); }); | |
| 738 | + } | |
| 739 | + | |
| 740 | + treeLayer.addEventListener("click", function(e){ | |
| 741 | + var btn = e.target.closest(".trow-toggle"); | |
| 742 | + if (!btn) return; | |
| 743 | + var id = btn.getAttribute("data-id"); | |
| 744 | + expanded[id] = !expanded[id]; | |
| 745 | + renderTree(); | |
| 746 | + }); | |
| 747 | + | |
| 748 | + treeLayer.addEventListener("input", function(e){ | |
| 749 | + if (!e.target.classList.contains("val-input")) return; | |
| 750 | + var id = e.target.getAttribute("data-id"); | |
| 751 | + var node = idIndex[id]; | |
| 752 | + var caret = e.target.selectionStart; | |
| 753 | + var v = parseFloat(e.target.value); | |
| 754 | + if (isNaN(v) || v < 0) v = 0; | |
| 755 | + node.value = v; | |
| 756 | + renderStats(); | |
| 757 | + renderTree(); | |
| 758 | + rebuildFunnel(); | |
| 759 | + var again = treeLayer.querySelector('[data-id="' + id + '"]'); | |
| 760 | + if (again){ | |
| 761 | + again.focus(); | |
| 762 | + try { again.setSelectionRange(caret, caret); } catch (err) {} | |
| 763 | + } | |
| 764 | + }); | |
| 765 | + | |
| 766 | + function highlightStage(idx){ | |
| 767 | + var row = document.getElementById("stage-row-" + idx); | |
| 768 | + if (!row) return; | |
| 769 | + row.scrollIntoView({ behavior: "smooth", block: "center" }); | |
| 770 | + row.classList.remove("flash"); | |
| 771 | + void row.offsetWidth; | |
| 772 | + row.classList.add("flash"); | |
| 773 | + } | |
| 774 | + | |
| 775 | + // ---------- three.js funnel ---------- | |
| 776 | + var stageEl = document.getElementById("funnelStage"); | |
| 777 | + var canvas = document.getElementById("funnelCanvas"); | |
| 778 | + var labelLayer = document.getElementById("labelLayer"); | |
| 779 | + | |
| 780 | + var renderer = new THREE.WebGLRenderer({ canvas: canvas, antialias: true, alpha: true }); | |
| 781 | + renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2)); | |
| 782 | + | |
| 783 | + var scene = new THREE.Scene(); | |
| 784 | + var camera = new THREE.PerspectiveCamera(42, 1, 0.1, 100); | |
| 785 | + camera.position.set(0.3, 1.6, 13.5); | |
| 786 | + | |
| 787 | + var controls = new THREE.OrbitControls(camera, renderer.domElement); | |
| 788 | + controls.enableDamping = true; | |
| 789 | + controls.dampingFactor = 0.08; | |
| 790 | + controls.enablePan = false; | |
| 791 | + controls.minDistance = 8; | |
| 792 | + controls.maxDistance = 19; | |
| 793 | + controls.target.set(0, 0.2, 0); | |
| 794 | + controls.update(); | |
| 795 | + | |
| 796 | + scene.add(new THREE.AmbientLight(0xffffff, 0.65)); | |
| 797 | + var key = new THREE.DirectionalLight(0xffffff, 0.9); | |
| 798 | + key.position.set(4, 6, 6); | |
| 799 | + scene.add(key); | |
| 800 | + var fill = new THREE.DirectionalLight(0xffffff, 0.35); | |
| 801 | + fill.position.set(-5, -2, 3); | |
| 802 | + scene.add(fill); | |
| 803 | + | |
| 804 | + var funnelGroup = new THREE.Group(); | |
| 805 | + scene.add(funnelGroup); | |
| 806 | + | |
| 807 | + var TOTAL_HEIGHT = 8.6; | |
| 808 | + var MIN_R = 0.26; | |
| 809 | + var MAX_R = 2.7; | |
| 810 | + var SPOUT_H = 0.7; | |
| 811 | + | |
| 812 | + var segments = []; | |
| 813 | + | |
| 814 | + function radiusFor(v, maxV){ | |
| 815 | + if (maxV <= 0) return MIN_R; | |
| 816 | + var frac = Math.max(0, v) / maxV; | |
| 817 | + return MIN_R + (MAX_R - MIN_R) * Math.sqrt(Math.min(1, frac)); | |
| 818 | + } | |
| 819 | + | |
| 820 | + function buildFunnel(){ | |
| 821 | + while (funnelGroup.children.length) funnelGroup.remove(funnelGroup.children[0]); | |
| 822 | + segments = []; | |
| 823 | + | |
| 824 | + var vals = funnelValues(); | |
| 825 | + var n = vals.length; | |
| 826 | + var maxV = Math.max.apply(null, vals); | |
| 827 | + var segH = TOTAL_HEIGHT / n; | |
| 828 | + var topY = TOTAL_HEIGHT / 2; | |
| 829 | + | |
| 830 | + for (var i = 0; i < n; i++){ | |
| 831 | + var rTop = radiusFor(vals[i], maxV); | |
| 832 | + var rBottom = (i < n - 1) ? radiusFor(vals[i + 1], maxV) : rTop * 0.6; | |
| 833 | + var y0 = topY - i * segH; | |
| 834 | + var yc = y0 - segH / 2; | |
| 835 | + | |
| 836 | + var geo = new THREE.CylinderGeometry(rTop, rBottom, segH, 48, 1, true); | |
| 837 | + var mat = new THREE.MeshStandardMaterial({ | |
| 838 | + color: new THREE.Color(stageColorHex(i, vals)), | |
| 839 | + metalness: 0.12, | |
| 840 | + roughness: 0.55, | |
| 841 | + side: THREE.DoubleSide | |
| 842 | + }); | |
| 843 | + var mesh = new THREE.Mesh(geo, mat); | |
| 844 | + mesh.position.y = yc; | |
| 845 | + funnelGroup.add(mesh); | |
| 846 | + | |
| 847 | + var edgeGeo = new THREE.EdgesGeometry(geo, 25); | |
| 848 | + var edgeMat = new THREE.LineBasicMaterial({ color: 0x000000, transparent: true, opacity: 0.18 }); | |
| 849 | + var edges = new THREE.LineSegments(edgeGeo, edgeMat); | |
| 850 | + edges.position.y = yc; | |
| 851 | + funnelGroup.add(edges); | |
| 852 | + | |
| 853 | + var side = i % 2 === 0 ? 1 : -1; | |
| 854 | + var anchor = new THREE.Object3D(); | |
| 855 | + var rMid = (rTop + rBottom) / 2; | |
| 856 | + anchor.position.set(side * (rMid + 0.4), yc, 0); | |
| 857 | + anchor.userData.side = side; | |
| 858 | + funnelGroup.add(anchor); | |
| 859 | + | |
| 860 | + segments.push({ mesh: mesh, mat: mat, anchor: anchor, side: side }); | |
| 861 | + } | |
| 862 | + | |
| 863 | + var lastR = radiusFor(vals[n - 1], maxV) * 0.6; | |
| 864 | + var spoutGeo = new THREE.CylinderGeometry(lastR, lastR * 0.85, SPOUT_H, 32, 1, true); | |
| 865 | + var spoutMat = new THREE.MeshStandardMaterial({ | |
| 866 | + color: new THREE.Color(tokenHex("--spout") || "#0d366b"), | |
| 867 | + metalness: 0.2, | |
| 868 | + roughness: 0.4, | |
| 869 | + side: THREE.DoubleSide | |
| 870 | + }); | |
| 871 | + var spout = new THREE.Mesh(spoutGeo, spoutMat); | |
| 872 | + spout.position.y = -TOTAL_HEIGHT / 2 - SPOUT_H / 2; | |
| 873 | + funnelGroup.add(spout); | |
| 874 | + | |
| 875 | + buildLabels(vals); | |
| 876 | + } | |
| 877 | + | |
| 878 | + function updateFunnelColors(){ | |
| 879 | + var vals = funnelValues(); | |
| 880 | + segments.forEach(function(seg, i){ seg.mat.color.set(stageColorHex(i, vals)); }); | |
| 881 | + } | |
| 882 | + | |
| 883 | + // ---------- projected HTML labels ---------- | |
| 884 | + var labelEls = []; | |
| 885 | + | |
| 886 | + function buildLabels(vals){ | |
| 887 | + labelLayer.innerHTML = ""; | |
| 888 | + labelEls = []; | |
| 889 | + TREE.forEach(function(node, i){ | |
| 890 | + var el = document.createElement("div"); | |
| 891 | + el.className = "flabel" + (segments[i] && segments[i].side < 0 ? " left" : ""); | |
| 892 | + var st = i === 0 ? null : stageStatus(i, vals); | |
| 893 | + var convHtml = st === null | |
| 894 | + ? '<span class="conv" style="color:var(--muted)">起点</span>' | |
| 895 | + : '<span class="conv" style="color:var(' + alertVar(st.level) + ')">' + fmtPct(st.rate) + " / 目标 " + fmtPct(st.target) + "</span>"; | |
| 896 | + var extra = node === payStatusNode ? ' <span style="color:var(--critical)">(失败 ' + nf.format(getValue(payFailNode)) + ")</span>" : ""; | |
| 897 | + el.innerHTML = | |
| 898 | + '<span class="name">' + node.name + "</span>" + | |
| 899 | + '<span class="val mono tab">' + nf.format(vals[i]) + extra + "</span>" + | |
| 900 | + convHtml; | |
| 901 | + labelLayer.appendChild(el); | |
| 902 | + labelEls.push(el); | |
| 903 | + }); | |
| 904 | + } | |
| 905 | + | |
| 906 | + var _v = new THREE.Vector3(); | |
| 907 | + function updateLabelPositions(){ | |
| 908 | + if (!segments.length) return; | |
| 909 | + var rect = stageEl.getBoundingClientRect(); | |
| 910 | + var w = rect.width, h = rect.height; | |
| 911 | + segments.forEach(function(seg, i){ | |
| 912 | + var el = labelEls[i]; | |
| 913 | + if (!el) return; | |
| 914 | + seg.anchor.getWorldPosition(_v); | |
| 915 | + _v.project(camera); | |
| 916 | + var visible = _v.z < 1; | |
| 917 | + var x = (_v.x * 0.5 + 0.5) * w; | |
| 918 | + var y = (-_v.y * 0.5 + 0.5) * h; | |
| 919 | + el.style.left = x + "px"; | |
| 920 | + el.style.top = y + "px"; | |
| 921 | + el.style.opacity = visible ? "1" : "0"; | |
| 922 | + }); | |
| 923 | + } | |
| 924 | + | |
| 925 | + function rebuildFunnel(){ buildFunnel(); } | |
| 926 | + | |
| 927 | + function resizeRenderer(){ | |
| 928 | + var rect = stageEl.getBoundingClientRect(); | |
| 929 | + var w = Math.max(1, rect.width); | |
| 930 | + var h = Math.max(1, rect.height); | |
| 931 | + renderer.setSize(w, h, false); | |
| 932 | + camera.aspect = w / h; | |
| 933 | + camera.updateProjectionMatrix(); | |
| 934 | + } | |
| 935 | + | |
| 936 | + var ro = new ResizeObserver(resizeRenderer); | |
| 937 | + ro.observe(stageEl); | |
| 938 | + | |
| 939 | + var raycaster = new THREE.Raycaster(); | |
| 940 | + var downPos = null; | |
| 941 | + canvas.addEventListener("pointerdown", function(e){ downPos = { x: e.clientX, y: e.clientY }; }); | |
| 942 | + canvas.addEventListener("pointerup", function(e){ | |
| 943 | + if (!downPos) return; | |
| 944 | + var dx = e.clientX - downPos.x, dy = e.clientY - downPos.y; | |
| 945 | + downPos = null; | |
| 946 | + if (Math.hypot(dx, dy) > 4) return; | |
| 947 | + var rect = canvas.getBoundingClientRect(); | |
| 948 | + var ndc = new THREE.Vector2( | |
| 949 | + ((e.clientX - rect.left) / rect.width) * 2 - 1, | |
| 950 | + -((e.clientY - rect.top) / rect.height) * 2 + 1 | |
| 951 | + ); | |
| 952 | + raycaster.setFromCamera(ndc, camera); | |
| 953 | + var meshes = segments.map(function(s){ return s.mesh; }); | |
| 954 | + var hits = raycaster.intersectObjects(meshes); | |
| 955 | + if (hits.length) highlightStage(meshes.indexOf(hits[0].object)); | |
| 956 | + }); | |
| 957 | + | |
| 958 | + function tick(){ | |
| 959 | + controls.update(); | |
| 960 | + renderer.render(scene, camera); | |
| 961 | + updateLabelPositions(); | |
| 962 | + requestAnimationFrame(tick); | |
| 963 | + } | |
| 964 | + | |
| 965 | + var media = window.matchMedia("(prefers-color-scheme: dark)"); | |
| 966 | + function onThemeChange(){ updateFunnelColors(); } | |
| 967 | + if (media.addEventListener) media.addEventListener("change", onThemeChange); | |
| 968 | + new MutationObserver(onThemeChange).observe(document.documentElement, { attributes: true, attributeFilter: ["data-theme"] }); | |
| 969 | + | |
| 970 | + function renderAll(){ | |
| 971 | + renderStats(); | |
| 972 | + renderTree(); | |
| 973 | + rebuildFunnel(); | |
| 974 | + } | |
| 975 | + | |
| 976 | + renderLegend(); | |
| 977 | + resizeRenderer(); | |
| 978 | + renderAll(); | |
| 979 | + requestAnimationFrame(tick); | |
| 980 | + window.addEventListener("resize", resizeRenderer); | |
| 981 | +})(); | |
| 982 | +</script> | |
| 983 | +</body> | |
| 984 | +</html> | ... | ... |