@363045841yyt/klinechart-core 0.9.0-alpha.2 → 0.9.0-alpha.3

package/dist/engine/renderers/Indicator/mainIndicatorLegend.js

@@ -1,6 +1,6 @@
 import { RENDERER_PRIORITY } from '../../../foundation/plugin/index';
-import { resolveThemeColors } from '../../../foundation/tokens/index';
 import { getFont, setCanvasFont } from '../../../foundation/tokens/fonts';
+import { buildLegendTemplateContext, } from './mainIndicatorLegendContext';
 const textWidthCache = new Map();
 const TEXT_WIDTH_CACHE_LIMIT = 512;
 function measureTextWidth(ctx, text) {
@@ -25,11 +25,13 @@ function measureTextWidth(ctx, text) {
 export function createMainIndicatorLegendRendererPlugin(options) {
     const config = {
         yPaddingPx: options.yPaddingPx,
+        renderMode: 'canvas',
     };
+    const onContext = options.onContext;
     let pluginHost = null;
     return {
         name: 'mainIndicatorLegend',
-        version: '2.1.0',
+        version: '2.2.0',
         description: '主图指标图例渲染器（MA 数据来自 StateStore）',
         debugName: '主图指标图例',
         paneId: 'main',
@@ -43,352 +45,254 @@ export function createMainIndicatorLegendRendererPlugin(options) {
             return [];
         },
         draw(context) {
-            const { overlayCtx, data, range, crosshairIndex } = context;
-            const klineData = data;
-            const colors = resolveThemeColors(context.theme, context.isAsiaMarket, context.colorPresetSettings);
-            if (!klineData.length || !overlayCtx)
+            const legend = buildLegendTemplateContext({
+                context,
+                host: pluginHost,
+                yPaddingPx: config.yPaddingPx,
+            });
+            onContext?.(legend);
+            if (config.renderMode === 'external')
                 return;
-            const fontSize = 12;
-            const lineHeight = fontSize + 6;
-            const legendX = 12;
-            const gap = 10;
-            const legendYOffset = 6;
-            overlayCtx.save();
-            setCanvasFont(overlayCtx, getFont(fontSize));
-            overlayCtx.textAlign = 'left';
-            overlayCtx.textBaseline = 'top';
-            const targetIndex = crosshairIndex ?? Math.min(range.end - 1, klineData.length - 1);
-            const rows = [];
-            // ── Timeshare legend ──
-            if (context.period === 'timeshare') {
-                const tsData = data;
-                const preClose = context.settings?.preClose ?? tsData[0]?.price ?? 0;
-                const item = tsData[targetIndex];
-                if (item) {
-                    const changeAmount = item.price - preClose;
-                    const changePercent = preClose !== 0 ? (changeAmount / preClose) * 100 : 0;
-                    const changeColor = changeAmount >= 0 ? colors.candleUpBody : colors.candleDownBody;
-                    if (context.paneWidth >= 400) {
-                        rows.push({
-                            draw: (rowIndex) => {
-                                let x = legendX;
-                                const y = config.yPaddingPx / 2 + legendYOffset + rowIndex * lineHeight;
-                                overlayCtx.fillStyle = colors.text.primary;
-                                overlayCtx.fillText('现价 ', x, y);
-                                x += measureTextWidth(overlayCtx, '现价 ');
-                                overlayCtx.fillStyle = changeColor;
-                                overlayCtx.fillText(item.price.toFixed(2), x, y);
-                                x += measureTextWidth(overlayCtx, item.price.toFixed(2)) + gap;
-                                overlayCtx.fillStyle = colors.text.primary;
-                                overlayCtx.fillText('均价 ', x, y);
-                                x += measureTextWidth(overlayCtx, '均价 ');
-                                overlayCtx.fillText(item.average.toFixed(2), x, y);
-                                x += measureTextWidth(overlayCtx, item.average.toFixed(2)) + gap;
-                                overlayCtx.fillStyle = colors.text.primary;
-                                overlayCtx.fillText('涨跌 ', x, y);
-                                x += measureTextWidth(overlayCtx, '涨跌 ');
-                                overlayCtx.fillStyle = changeColor;
-                                const sign = changeAmount > 0 ? '+' : '';
-                                overlayCtx.fillText(`${sign}${changeAmount.toFixed(2)}`, x, y);
-                                x += measureTextWidth(overlayCtx, `${sign}${changeAmount.toFixed(2)}`) + gap;
-                                overlayCtx.fillStyle = colors.text.primary;
-                                overlayCtx.fillText('涨幅 ', x, y);
-                                x += measureTextWidth(overlayCtx, '涨幅 ');
-                                overlayCtx.fillStyle = changeColor;
-                                const pctSign = changePercent > 0 ? '+' : '';
-                                overlayCtx.fillText(`${pctSign}${changePercent.toFixed(2)}%`, x, y);
-                                x += measureTextWidth(overlayCtx, `${pctSign}${changePercent.toFixed(2)}%`) + gap;
-                                const volText = formatVolumeShort(item.volume);
-                                overlayCtx.fillStyle = colors.text.tertiary;
-                                overlayCtx.fillText('成交量 ', x, y);
-                                x += measureTextWidth(overlayCtx, '成交量 ');
-                                overlayCtx.fillStyle = colors.text.primary;
-                                overlayCtx.fillText(volText, x, y);
-                                x += measureTextWidth(overlayCtx, volText) + gap;
-                                const amtText = formatAmountShort(item.amount);
-                                overlayCtx.fillStyle = colors.text.tertiary;
-                                overlayCtx.fillText('成交额 ', x, y);
-                                x += measureTextWidth(overlayCtx, '成交额 ');
-                                overlayCtx.fillStyle = colors.text.primary;
-                                overlayCtx.fillText(amtText, x, y);
-                            },
-                        });
-                    }
-                    else {
-                        rows.push({
-                            draw: (rowIndex) => {
-                                let x = legendX;
-                                const y = config.yPaddingPx / 2 + legendYOffset + rowIndex * lineHeight;
-                                overlayCtx.fillStyle = colors.text.primary;
-                                overlayCtx.fillText('现价 ', x, y);
-                                x += measureTextWidth(overlayCtx, '现价 ');
-                                overlayCtx.fillStyle = changeColor;
-                                overlayCtx.fillText(item.price.toFixed(2), x, y);
-                                x += measureTextWidth(overlayCtx, item.price.toFixed(2)) + gap;
-                                overlayCtx.fillStyle = colors.text.primary;
-                                overlayCtx.fillText('均价 ', x, y);
-                                x += measureTextWidth(overlayCtx, '均价 ');
-                                overlayCtx.fillText(item.average.toFixed(2), x, y);
-                                x += measureTextWidth(overlayCtx, item.average.toFixed(2)) + gap;
-                                overlayCtx.fillStyle = colors.text.tertiary;
-                                overlayCtx.fillText('成交量 ', x, y);
-                                x += measureTextWidth(overlayCtx, '成交量 ');
-                                overlayCtx.fillStyle = colors.text.primary;
-                                overlayCtx.fillText(formatVolumeShort(item.volume), x, y);
-                            },
-                        });
-                        rows.push({
-                            draw: (rowIndex) => {
-                                let x = legendX;
-                                const y = config.yPaddingPx / 2 + legendYOffset + rowIndex * lineHeight;
-                                overlayCtx.fillStyle = colors.text.primary;
-                                overlayCtx.fillText('涨跌 ', x, y);
-                                x += measureTextWidth(overlayCtx, '涨跌 ');
-                                overlayCtx.fillStyle = changeColor;
-                                const sign = changeAmount > 0 ? '+' : '';
-                                overlayCtx.fillText(`${sign}${changeAmount.toFixed(2)}`, x, y);
-                                x += measureTextWidth(overlayCtx, `${sign}${changeAmount.toFixed(2)}`) + gap;
-                                overlayCtx.fillStyle = colors.text.primary;
-                                overlayCtx.fillText('涨幅 ', x, y);
-                                x += measureTextWidth(overlayCtx, '涨幅 ');
-                                overlayCtx.fillStyle = changeColor;
-                                const pctSign = changePercent > 0 ? '+' : '';
-                                overlayCtx.fillText(`${pctSign}${changePercent.toFixed(2)}%`, x, y);
-                                x += measureTextWidth(overlayCtx, `${pctSign}${changePercent.toFixed(2)}%`) + gap;
-                                overlayCtx.fillStyle = colors.text.tertiary;
-                                overlayCtx.fillText('成交额 ', x, y);
-                                x += measureTextWidth(overlayCtx, '成交额 ');
-                                overlayCtx.fillStyle = colors.text.primary;
-                                overlayCtx.fillText(formatAmountShort(item.amount), x, y);
-                            },
-                        });
-                    }
-                }
-            }
-            if (typeof crosshairIndex === 'number') {
-                const k = klineData[targetIndex];
-                if (k && typeof k.close === 'number') {
-                    const isUp = k.close >= k.open;
-                    const volText = typeof k.volume === 'number' ? formatVolumeShort(k.volume) : null;
-                    const upColor = isUp ? colors.candleUpBody : colors.candleDownBody;
-                    if (context.paneWidth >= 400) {
-                        rows.push({
-                            draw: (rowIndex) => {
-                                let x = legendX;
-                                const y = config.yPaddingPx / 2 + legendYOffset + rowIndex * lineHeight;
-                                overlayCtx.fillStyle = colors.text.primary;
-                                overlayCtx.fillText('O ', x, y);
-                                x += measureTextWidth(overlayCtx, 'O ');
-                                overlayCtx.fillStyle = upColor;
-                                overlayCtx.fillText(k.open.toFixed(2), x, y);
-                                x += measureTextWidth(overlayCtx, k.open.toFixed(2)) + gap;
-                                overlayCtx.fillStyle = colors.text.primary;
-                                overlayCtx.fillText('H ', x, y);
-                                x += measureTextWidth(overlayCtx, 'H ');
-                                overlayCtx.fillText(k.high.toFixed(2), x, y);
-                                x += measureTextWidth(overlayCtx, k.high.toFixed(2)) + gap;
-                                overlayCtx.fillText('L ', x, y);
-                                x += measureTextWidth(overlayCtx, 'L ');
-                                overlayCtx.fillText(k.low.toFixed(2), x, y);
-                                x += measureTextWidth(overlayCtx, k.low.toFixed(2)) + gap;
-                                overlayCtx.fillStyle = colors.text.primary;
-                                overlayCtx.fillText('C ', x, y);
-                                x += measureTextWidth(overlayCtx, 'C ');
-                                overlayCtx.fillStyle = upColor;
-                                overlayCtx.fillText(k.close.toFixed(2), x, y);
-                                x += measureTextWidth(overlayCtx, k.close.toFixed(2)) + gap;
-                                if (volText) {
-                                    overlayCtx.fillStyle = colors.text.tertiary;
-                                    overlayCtx.fillText('Vol ', x, y);
-                                    x += measureTextWidth(overlayCtx, 'Vol ');
-                                    overlayCtx.fillStyle = colors.text.primary;
-                                    overlayCtx.fillText(volText, x, y);
-                                }
-                            },
-                        });
-                    }
-                    else {
-                        rows.push({
-                            draw: (rowIndex) => {
-                                let x = legendX;
-                                const y = config.yPaddingPx / 2 + legendYOffset + rowIndex * lineHeight;
-                                overlayCtx.fillStyle = colors.text.primary;
-                                overlayCtx.fillText('O ', x, y);
-                                x += measureTextWidth(overlayCtx, 'O ');
-                                overlayCtx.fillStyle = upColor;
-                                overlayCtx.fillText(k.open.toFixed(2), x, y);
-                                x += measureTextWidth(overlayCtx, k.open.toFixed(2)) + gap;
-                                overlayCtx.fillStyle = colors.text.primary;
-                                overlayCtx.fillText('H ', x, y);
-                                x += measureTextWidth(overlayCtx, 'H ');
-                                overlayCtx.fillText(k.high.toFixed(2), x, y);
-                                x += measureTextWidth(overlayCtx, k.high.toFixed(2)) + gap;
-                                overlayCtx.fillText('L ', x, y);
-                                x += measureTextWidth(overlayCtx, 'L ');
-                                overlayCtx.fillText(k.low.toFixed(2), x, y);
-                            },
-                        });
-                        rows.push({
-                            draw: (rowIndex) => {
-                                let x = legendX;
-                                const y = config.yPaddingPx / 2 + legendYOffset + rowIndex * lineHeight;
-                                overlayCtx.fillStyle = colors.text.primary;
-                                overlayCtx.fillText('C ', x, y);
-                                x += measureTextWidth(overlayCtx, 'C ');
-                                overlayCtx.fillStyle = upColor;
-                                overlayCtx.fillText(k.close.toFixed(2), x, y);
-                                x += measureTextWidth(overlayCtx, k.close.toFixed(2)) + gap;
-                                if (volText) {
-                                    overlayCtx.fillStyle = colors.text.tertiary;
-                                    overlayCtx.fillText('Vol ', x, y);
-                                    x += measureTextWidth(overlayCtx, 'Vol ');
-                                    overlayCtx.fillStyle = colors.text.primary;
-                                    overlayCtx.fillText(volText, x, y);
-                                }
-                            },
-                        });
-                    }
-                }
-            }
-            const scheduler = pluginHost && typeof pluginHost.getService === 'function'
-                ? pluginHost.getService('indicatorScheduler')
-                : undefined;
-            const mainIndicators = scheduler?.getMainIndicators() ?? [];
-            for (const meta of mainIndicators) {
-                if (!meta.getTitleInfo)
-                    continue;
-                if (!scheduler?.isMainIndicatorActive(meta.name))
-                    continue;
-                const params = scheduler?.getMainIndicatorParams(meta.name) ?? {};
-                const titleInfo = meta.getTitleInfo(klineData, targetIndex, params, pluginHost, 'main');
-                if (!titleInfo)
-                    continue;
-                rows.push({
-                    draw: (rowIndex) => {
-                        let x = legendX;
-                        let y = config.yPaddingPx / 2 + legendYOffset + rowIndex * lineHeight;
-                        overlayCtx.fillStyle = colors.text.primary;
-                        overlayCtx.fillText(titleInfo.name, x, y);
-                        x += measureTextWidth(overlayCtx, titleInfo.name);
-                        if (titleInfo.params && titleInfo.params.length > 0) {
-                            const paramText = `(${titleInfo.params.join(',')})`;
-                            overlayCtx.fillStyle = colors.text.tertiary;
-                            overlayCtx.fillText(paramText, x, y);
-                            x += measureTextWidth(overlayCtx, paramText) + gap;
-                        }
-                        else {
-                            x += gap;
-                        }
-                        if (titleInfo.values) {
-                            y += 1;
-                            for (const item of titleInfo.values) {
-                                const valText = `${item.label} ${item.value.toFixed(3)}`;
-                                overlayCtx.fillStyle = item.color;
-                                overlayCtx.fillText(valText, x, y);
-                                x += measureTextWidth(overlayCtx, valText) + gap;
-                            }
-                        }
-                    },
-                });
-            }
-            pushComparisonLegendRows(context, klineData, targetIndex, range, rows, config.yPaddingPx, overlayCtx, legendX, legendYOffset, lineHeight, gap, colors);
-            rows.forEach((row, index) => row.draw(index));
-            overlayCtx.restore();
+            if (!legend || !context.overlayCtx)
+                return;
+            paintLegendOnCanvas(context.overlayCtx, legend);
         },
         getConfig() {
             return {
                 yPaddingPx: config.yPaddingPx,
+                renderMode: config.renderMode,
             };
         },
         setConfig(newConfig) {
             if (typeof newConfig.yPaddingPx === 'number') {
                 config.yPaddingPx = newConfig.yPaddingPx;
             }
+            if (newConfig.renderMode === 'canvas' || newConfig.renderMode === 'external') {
+                config.renderMode = newConfig.renderMode;
+            }
         },
     };
 }
-function pushComparisonLegendRows(context, klineData, targetIndex, range, rows, yPaddingPx, overlayCtx, legendX, legendYOffset, lineHeight, gap, colors) {
-    const comparisonSymbols = context.comparisonSymbols;
-    const comparisonData = context.comparisonData;
-    const comparisonColors = context.comparisonColors;
-    if (!comparisonSymbols?.length || !comparisonData?.size)
-        return;
-    const baseIndex = Math.max(0, range.start);
-    const baseItem = klineData[baseIndex];
-    if (!baseItem || !Number.isFinite(baseItem.close) || baseItem.close <= 0)
-        return;
-    const baseDate = baseItem.date ?? '';
-    for (const spec of comparisonSymbols) {
-        const data = comparisonData.get(spec.symbol);
-        if (!data?.length)
-            continue;
-        const baseline = baseDate
-            ? findBaselineByDate(data, baseDate)
-            : findBaselineByTimestamp(data, baseItem.timestamp);
-        if (!baseline || baseline.close <= 0)
-            continue;
-        const byDate = new Map();
-        for (const item of data) {
-            byDate.set(item.date ?? String(item.timestamp), item);
+function paintLegendOnCanvas(overlayCtx, legend) {
+    const { layout, colors } = legend;
+    const fontSize = 12;
+    const { x: legendX, y: baseY, lineHeight, gap, compact } = layout;
+    overlayCtx.save();
+    setCanvasFont(overlayCtx, getFont(fontSize));
+    overlayCtx.textAlign = 'left';
+    overlayCtx.textBaseline = 'top';
+    let rowIndex = 0;
+    const rowY = () => baseY + rowIndex * lineHeight;
+    if (legend.timeshare) {
+        const ts = legend.timeshare;
+        if (!compact) {
+            let x = legendX;
+            const y = rowY();
+            overlayCtx.fillStyle = colors.textPrimary;
+            overlayCtx.fillText('现价 ', x, y);
+            x += measureTextWidth(overlayCtx, '现价 ');
+            overlayCtx.fillStyle = ts.changeColor;
+            overlayCtx.fillText(ts.price.toFixed(2), x, y);
+            x += measureTextWidth(overlayCtx, ts.price.toFixed(2)) + gap;
+            overlayCtx.fillStyle = colors.textPrimary;
+            overlayCtx.fillText('均价 ', x, y);
+            x += measureTextWidth(overlayCtx, '均价 ');
+            overlayCtx.fillText(ts.average.toFixed(2), x, y);
+            x += measureTextWidth(overlayCtx, ts.average.toFixed(2)) + gap;
+            overlayCtx.fillStyle = colors.textPrimary;
+            overlayCtx.fillText('涨跌 ', x, y);
+            x += measureTextWidth(overlayCtx, '涨跌 ');
+            overlayCtx.fillStyle = ts.changeColor;
+            const sign = ts.changeAmount > 0 ? '+' : '';
+            overlayCtx.fillText(`${sign}${ts.changeAmount.toFixed(2)}`, x, y);
+            x += measureTextWidth(overlayCtx, `${sign}${ts.changeAmount.toFixed(2)}`) + gap;
+            overlayCtx.fillStyle = colors.textPrimary;
+            overlayCtx.fillText('涨幅 ', x, y);
+            x += measureTextWidth(overlayCtx, '涨幅 ');
+            overlayCtx.fillStyle = ts.changeColor;
+            const pctSign = ts.changePercent > 0 ? '+' : '';
+            overlayCtx.fillText(`${pctSign}${ts.changePercent.toFixed(2)}%`, x, y);
+            x += measureTextWidth(overlayCtx, `${pctSign}${ts.changePercent.toFixed(2)}%`) + gap;
+            overlayCtx.fillStyle = colors.textTertiary;
+            overlayCtx.fillText('成交量 ', x, y);
+            x += measureTextWidth(overlayCtx, '成交量 ');
+            overlayCtx.fillStyle = colors.textPrimary;
+            overlayCtx.fillText(ts.volumeText, x, y);
+            x += measureTextWidth(overlayCtx, ts.volumeText) + gap;
+            overlayCtx.fillStyle = colors.textTertiary;
+            overlayCtx.fillText('成交额 ', x, y);
+            x += measureTextWidth(overlayCtx, '成交额 ');
+            overlayCtx.fillStyle = colors.textPrimary;
+            overlayCtx.fillText(ts.amountText, x, y);
+            rowIndex++;
         }
-        const mainItem = klineData[targetIndex];
-        if (!mainItem)
-            continue;
-        const key = mainItem.date ?? String(mainItem.timestamp);
-        const currentItem = byDate.get(key);
-        if (!currentItem || !Number.isFinite(currentItem.close))
-            continue;
-        const pct = ((currentItem.close - baseline.close) / baseline.close) * 100;
-        const color = comparisonColors?.get(spec.symbol) ?? '#f59e0b';
-        rows.push({
-            draw: (rowIndex) => {
+        else {
+            {
                 let x = legendX;
-                const y = yPaddingPx / 2 + legendYOffset + rowIndex * lineHeight;
-                const dotRadius = 4;
-                overlayCtx.fillStyle = color;
-                overlayCtx.beginPath();
-                const fontSize = lineHeight - 6;
-                overlayCtx.arc(x + dotRadius, y + fontSize / 2 - 1, dotRadius, 0, Math.PI * 2);
-                overlayCtx.fill();
-                x += dotRadius * 2 + 4;
-                overlayCtx.fillStyle = colors.text.primary;
-                overlayCtx.fillText(spec.symbol, x, y);
-                x += measureTextWidth(overlayCtx, spec.symbol) + gap;
-                const sign = pct > 0 ? '+' : '';
-                const pctText = `${sign}${pct.toFixed(2)}%`;
-                overlayCtx.fillStyle =
-                    pct > 0 ? colors.candleUpBody : pct < 0 ? colors.candleDownBody : colors.text.primary;
-                overlayCtx.fillText(pctText, x, y);
-            },
-        });
+                const y = rowY();
+                overlayCtx.fillStyle = colors.textPrimary;
+                overlayCtx.fillText('现价 ', x, y);
+                x += measureTextWidth(overlayCtx, '现价 ');
+                overlayCtx.fillStyle = ts.changeColor;
+                overlayCtx.fillText(ts.price.toFixed(2), x, y);
+                x += measureTextWidth(overlayCtx, ts.price.toFixed(2)) + gap;
+                overlayCtx.fillStyle = colors.textPrimary;
+                overlayCtx.fillText('均价 ', x, y);
+                x += measureTextWidth(overlayCtx, '均价 ');
+                overlayCtx.fillText(ts.average.toFixed(2), x, y);
+                x += measureTextWidth(overlayCtx, ts.average.toFixed(2)) + gap;
+                overlayCtx.fillStyle = colors.textTertiary;
+                overlayCtx.fillText('成交量 ', x, y);
+                x += measureTextWidth(overlayCtx, '成交量 ');
+                overlayCtx.fillStyle = colors.textPrimary;
+                overlayCtx.fillText(ts.volumeText, x, y);
+                rowIndex++;
+            }
+            {
+                let x = legendX;
+                const y = rowY();
+                overlayCtx.fillStyle = colors.textPrimary;
+                overlayCtx.fillText('涨跌 ', x, y);
+                x += measureTextWidth(overlayCtx, '涨跌 ');
+                overlayCtx.fillStyle = ts.changeColor;
+                const sign = ts.changeAmount > 0 ? '+' : '';
+                overlayCtx.fillText(`${sign}${ts.changeAmount.toFixed(2)}`, x, y);
+                x += measureTextWidth(overlayCtx, `${sign}${ts.changeAmount.toFixed(2)}`) + gap;
+                overlayCtx.fillStyle = colors.textPrimary;
+                overlayCtx.fillText('涨幅 ', x, y);
+                x += measureTextWidth(overlayCtx, '涨幅 ');
+                overlayCtx.fillStyle = ts.changeColor;
+                const pctSign = ts.changePercent > 0 ? '+' : '';
+                overlayCtx.fillText(`${pctSign}${ts.changePercent.toFixed(2)}%`, x, y);
+                x += measureTextWidth(overlayCtx, `${pctSign}${ts.changePercent.toFixed(2)}%`) + gap;
+                overlayCtx.fillStyle = colors.textTertiary;
+                overlayCtx.fillText('成交额 ', x, y);
+                x += measureTextWidth(overlayCtx, '成交额 ');
+                overlayCtx.fillStyle = colors.textPrimary;
+                overlayCtx.fillText(ts.amountText, x, y);
+                rowIndex++;
+            }
+        }
     }
-}
-function findBaselineByDate(data, date) {
-    for (const item of data) {
-        if (item.date && item.date >= date)
-            return item;
+    if (legend.ohlc) {
+        const k = legend.ohlc;
+        if (!compact) {
+            let x = legendX;
+            const y = rowY();
+            overlayCtx.fillStyle = colors.textPrimary;
+            overlayCtx.fillText('O ', x, y);
+            x += measureTextWidth(overlayCtx, 'O ');
+            overlayCtx.fillStyle = k.color;
+            overlayCtx.fillText(k.open.toFixed(2), x, y);
+            x += measureTextWidth(overlayCtx, k.open.toFixed(2)) + gap;
+            overlayCtx.fillStyle = colors.textPrimary;
+            overlayCtx.fillText('H ', x, y);
+            x += measureTextWidth(overlayCtx, 'H ');
+            overlayCtx.fillText(k.high.toFixed(2), x, y);
+            x += measureTextWidth(overlayCtx, k.high.toFixed(2)) + gap;
+            overlayCtx.fillText('L ', x, y);
+            x += measureTextWidth(overlayCtx, 'L ');
+            overlayCtx.fillText(k.low.toFixed(2), x, y);
+            x += measureTextWidth(overlayCtx, k.low.toFixed(2)) + gap;
+            overlayCtx.fillStyle = colors.textPrimary;
+            overlayCtx.fillText('C ', x, y);
+            x += measureTextWidth(overlayCtx, 'C ');
+            overlayCtx.fillStyle = k.color;
+            overlayCtx.fillText(k.close.toFixed(2), x, y);
+            x += measureTextWidth(overlayCtx, k.close.toFixed(2)) + gap;
+            if (k.volumeText) {
+                overlayCtx.fillStyle = colors.textTertiary;
+                overlayCtx.fillText('Vol ', x, y);
+                x += measureTextWidth(overlayCtx, 'Vol ');
+                overlayCtx.fillStyle = colors.textPrimary;
+                overlayCtx.fillText(k.volumeText, x, y);
+            }
+            rowIndex++;
+        }
+        else {
+            {
+                let x = legendX;
+                const y = rowY();
+                overlayCtx.fillStyle = colors.textPrimary;
+                overlayCtx.fillText('O ', x, y);
+                x += measureTextWidth(overlayCtx, 'O ');
+                overlayCtx.fillStyle = k.color;
+                overlayCtx.fillText(k.open.toFixed(2), x, y);
+                x += measureTextWidth(overlayCtx, k.open.toFixed(2)) + gap;
+                overlayCtx.fillStyle = colors.textPrimary;
+                overlayCtx.fillText('H ', x, y);
+                x += measureTextWidth(overlayCtx, 'H ');
+                overlayCtx.fillText(k.high.toFixed(2), x, y);
+                x += measureTextWidth(overlayCtx, k.high.toFixed(2)) + gap;
+                overlayCtx.fillText('L ', x, y);
+                x += measureTextWidth(overlayCtx, 'L ');
+                overlayCtx.fillText(k.low.toFixed(2), x, y);
+                rowIndex++;
+            }
+            {
+                let x = legendX;
+                const y = rowY();
+                overlayCtx.fillStyle = colors.textPrimary;
+                overlayCtx.fillText('C ', x, y);
+                x += measureTextWidth(overlayCtx, 'C ');
+                overlayCtx.fillStyle = k.color;
+                overlayCtx.fillText(k.close.toFixed(2), x, y);
+                x += measureTextWidth(overlayCtx, k.close.toFixed(2)) + gap;
+                if (k.volumeText) {
+                    overlayCtx.fillStyle = colors.textTertiary;
+                    overlayCtx.fillText('Vol ', x, y);
+                    x += measureTextWidth(overlayCtx, 'Vol ');
+                    overlayCtx.fillStyle = colors.textPrimary;
+                    overlayCtx.fillText(k.volumeText, x, y);
+                }
+                rowIndex++;
+            }
+        }
     }
-    return null;
-}
-function findBaselineByTimestamp(data, timestamp) {
-    for (const item of data) {
-        if (item.timestamp >= timestamp)
-            return item;
+    for (const titleInfo of legend.indicators) {
+        let x = legendX;
+        let y = rowY();
+        overlayCtx.fillStyle = colors.textPrimary;
+        overlayCtx.fillText(titleInfo.name, x, y);
+        x += measureTextWidth(overlayCtx, titleInfo.name);
+        if (titleInfo.params && titleInfo.params.length > 0) {
+            const paramText = `(${titleInfo.params.join(',')})`;
+            overlayCtx.fillStyle = colors.textTertiary;
+            overlayCtx.fillText(paramText, x, y);
+            x += measureTextWidth(overlayCtx, paramText) + gap;
+        }
+        else {
+            x += gap;
+        }
+        if (titleInfo.values) {
+            y += 1;
+            for (const item of titleInfo.values) {
+                const valText = `${item.label} ${item.value.toFixed(3)}`;
+                overlayCtx.fillStyle = item.color;
+                overlayCtx.fillText(valText, x, y);
+                x += measureTextWidth(overlayCtx, valText) + gap;
+            }
+        }
+        rowIndex++;
     }
-    return null;
-}
-function formatVolumeShort(v) {
-    if (v >= 1e8)
-        return (v / 1e8).toFixed(2) + '亿';
-    if (v >= 1e4)
-        return (v / 1e4).toFixed(2) + '万';
-    return v.toFixed(2);
-}
-function formatAmountShort(v) {
-    if (v >= 1e8)
-        return (v / 1e8).toFixed(2) + '亿';
-    if (v >= 1e4)
-        return (v / 1e4).toFixed(2) + '万';
-    return v.toFixed(2);
+    for (const cmp of legend.comparisons) {
+        let x = legendX;
+        const y = rowY();
+        const dotRadius = 4;
+        overlayCtx.fillStyle = cmp.color;
+        overlayCtx.beginPath();
+        overlayCtx.arc(x + dotRadius, y + fontSize / 2 - 1, dotRadius, 0, Math.PI * 2);
+        overlayCtx.fill();
+        x += dotRadius * 2 + 4;
+        overlayCtx.fillStyle = colors.textPrimary;
+        overlayCtx.fillText(cmp.symbol, x, y);
+        x += measureTextWidth(overlayCtx, cmp.symbol) + gap;
+        const sign = cmp.percent > 0 ? '+' : '';
+        const pctText = `${sign}${cmp.percent.toFixed(2)}%`;
+        overlayCtx.fillStyle = cmp.percentColor;
+        overlayCtx.fillText(pctText, x, y);
+        rowIndex++;
+    }
+    overlayCtx.restore();
 }
 //# sourceMappingURL=mainIndicatorLegend.js.map