qihuo/static/js/equity_curve.js

(function () {
    var el = document.getElementById('equity-curve-chart');
    var raw = window.__EQUITY_CURVE__;
    if (!el || !raw || !raw.length || !window.LightweightCharts) return;

    var chart = null;
    var series = null;
    var chartData = [];

    function cssVar(name, fallback) {
        var v = getComputedStyle(document.documentElement).getPropertyValue(name).trim();
        return v || fallback;
    }

    function themeColors() {
        return {
            bg: cssVar('--card-inner', '#101424'),
            text: cssVar('--text-muted', '#7a82a0'),
            grid: cssVar('--table-border', 'rgba(76,194,255,.1)'),
            border: cssVar('--card-border', 'rgba(76,194,255,.22)'),
            line: cssVar('--accent', '#4cc2ff'),
        };
    }

    function parseTime(s) {
        if (!s) return null;
        var t = String(s).trim().replace(' ', 'T');
        if (t.length === 16) t += ':00';
        var d = new Date(t);
        if (isNaN(d.getTime())) return null;
        return Math.floor(d.getTime() / 1000);
    }

    function buildData() {
        var data = [];
        var lastTs = 0;
        raw.forEach(function (p) {
            var ts = parseTime(p.time);
            if (ts == null) return;
            if (ts <= lastTs) ts = lastTs + 1;
            lastTs = ts;
            data.push({ time: ts, value: Number(p.value) });
        });
        return data;
    }

    function applyChartTheme() {
        if (!chart || !series) return;
        var c = themeColors();
        chart.applyOptions({
            layout: {
                background: { type: 'solid', color: c.bg },
                textColor: c.text,
            },
            grid: {
                vertLines: { color: c.grid },
                horzLines: { color: c.grid },
            },
            rightPriceScale: { borderColor: c.border },
            timeScale: { borderColor: c.border },
        });
        series.applyOptions({ color: c.line });
    }

    function renderChart() {
        chartData = buildData();
        if (!chartData.length) {
            el.innerHTML = '<p class="text-muted" style="padding:1rem">暂无资金曲线数据</p>';
            return;
        }

        var c = themeColors();
        if (chart) {
            chart.remove();
            chart = null;
            series = null;
        }

        chart = LightweightCharts.createChart(el, {
            width: el.clientWidth || 800,
            height: 220,
            layout: {
                background: { type: 'solid', color: c.bg },
                textColor: c.text,
                fontSize: 11,
            },
            grid: {
                vertLines: { color: c.grid },
                horzLines: { color: c.grid },
            },
            rightPriceScale: { borderColor: c.border },
            timeScale: { borderColor: c.border, timeVisible: true, secondsVisible: false },
        });
        series = chart.addLineSeries({
            color: c.line,
            lineWidth: 2,
            priceFormat: { type: 'price', precision: 2, minMove: 0.01 },
        });
        series.setData(chartData);
        chart.timeScale().fitContent();
    }

    renderChart();

    window.addEventListener('resize', function () {
        if (chart) chart.applyOptions({ width: el.clientWidth || 800 });
    });

    document.addEventListener('click', function (e) {
        if (e.target.closest('[data-theme-pick]')) {
            setTimeout(applyChartTheme, 50);
        }
    });

    if (typeof MutationObserver !== 'undefined') {
        var obs = new MutationObserver(function (mutations) {
            mutations.forEach(function (m) {
                if (m.attributeName === 'data-theme') applyChartTheme();
            });
        });
        obs.observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme'] });
    }
})();