VolumeProfileChart

現貨成交量依價格分布，橫向柱、價格由高到低。回答的是 「這個市場實際接受過哪些價格」。

柱身填的是半色調網點， 跟 DistributionChart 同一套語彙。 但這裡柱長保留 —— volume profile 的輪廓就是它的內容：節點在哪、value area 多寬、POC 突出多少。 DistributionChart 可以放掉柱高，是因為機率分佈是逐桶對著標籤讀的； profile 是當成一個形狀讀的，抽掉輪廓等於抽掉這張圖。

所以這裡是雙通道編碼：長度講一次成交量， 網點再講一次。刻意冗餘 —— POC 同時是最長也是最密的那一列，那正是它要主張的事。

• default —— 一般價格階（中性網點）
• va —— 落在 70% value area 內（較亮的中性網點）
• poc —— point of control，成交最集中的一階 （brand 橘網點 + 帶 tag）

版面是一個 CSS grid，不是一列一個 flex row。grid 讓每一列共用同樣的三欄 —— 價格 / 軌道 / tag —— 所以每一列的軌道寬度完全相同。 舊的做法讓帶 tag 的列軌道被擠窄，同一個成交量在 VAH / POC / VAL 那幾列會畫出比較短的柱子。 價格欄同理改成 max-content：原本固定 56px，價格字串長一點就會擠。

網點一律整顆。每一列的軌道各自量測、切成整數行，柱長再吸附到整數個格子， 所以柱子的收尾邊緣落在點與點之間、不會切穿任何一顆。 只量一次就夠 —— grid 保證每列軌道等寬，這是結構上的保證，不是假設。 代價是柱長被量化到約一個格子（軌道的 1% 上下），分桶資料負擔得起。

spot 線畫在夾住 spot 的兩階「之間」，不插值到某一階上。profile 是分桶資料，把 spot 畫進桶內等於宣稱一個桶子本身沒有的精度。

顏色契約（2026-07-28 由 user 裁決修訂）： default 與 va 維持中性，POC 上 brand（--color-data-fill-focus）。 這裡的 brand 意思是「市場一直回到的那個價格」—— 是強調，不是極性。

成交量仍然沒有方向性：任何一列都不得使用 outcome 或 trend 顏色。 spot 下方有一根很重的柱子不叫「看空」，它只是說交易發生在那裡。 spot 線維持 --color-data-reference —— 它是參考記號，不是對資料的主張。

同一組 rows、同一套中性顏色契約，兩種畫法並排。上面各節用的都是現行 div 版。

注意：現行版柱身已改為半色調網點，recharts 版仍是實心柱， 所以左右不再只差引擎、也差了填充。下面關於 spot 線與軸標籤的發現與填充無關，仍然成立； 但要在 recharts 重現網點得改走 SVG <pattern>， 且每個實例要自己的 id，代價未列入下方清單。

版面與列結構來源：../opinion-labs-archive/prototypes/assets-forecasting/btc-dashboard-spike-v1.html 的 .vp / .vp-row / .vp-bar / .vp-price / .vp-tag / .vp-spotline。

半色調填充來源：10A 半色調 × L5 密度， 與 DistributionChart 同一組值（格距 3 × 3.4px 目標值，runtime 吸附）。 形態庫與未採用的替代方案見 docs/asset-forecasting/bar-chart-style-library.md。

缺口

• 網點格距與點徑比例（0.45–1.0）是視覺調校值、不是 token。 這裡的下限比 DistributionChart 高（0.18）， 因為長度已經分開各列、短列不需要再被網點淡到消失。 兩個組件已經是兩組值，應該抽成共用常數再各自 override 下限。
• 價格與 tag 走 Manrope + tabular-nums， 不用 font-number（Space Mono）。 依 T4 分級契約這是 tier-2 PASS，不是 fail。
• 列高 18px 只容得下 5 列網點。列高若再壓低，半色調會退化成雜訊 —— 縮圖情境需另外驗。
• 窄容器 + 有 tag 時，tag 欄會吃掉大量軌道寬度。上面 280px 那個例子實測軌道只剩約 50px（tag 欄佔 97px）。 這是 grid 修正的代價：所有列共用同寬軌道換來柱長可比較，但軌道總寬被最長的 tag 壓縮。 舊做法在窄容器一樣難讀，只是難讀的方式不同（各列軌道不等寬、柱長不可比）。 正解是窄寬度時讓 tag 掉到柱子下方自成一列 —— 量測基礎設施已經在了，尚未實作。不要試圖用 min() / clamp() 在 grid track 裡設上限：瀏覽器會判定整條 grid-template-columns 無效並整個丟掉， grid 會無聲退回單欄。
• 價格欄已改為 max-content，長字串不再被擠； 但長度仍由呼叫端決定 —— production 有 KMNumber 做縮寫， 本 repo 沒 vendor，所以極長的價格字串會直接吃掉軌道寬度。
• spotAfterIndex 由呼叫端算。 正確做法是傳 spot 數值進來讓組件自己找夾住它的兩階， 但那需要 rows 帶真實數值而非顯示字串 —— 等接真資料時一起改。