w-trade-backtest 1.0.3

package/dist/renderProfitPlot.js

@@ -0,0 +1,198 @@
+
+
+let renderProfitPlot = (ele, orders, opt = {}) => {
+
+    let _ = window._
+    let w = window.wsemi
+    let ot = window.dayjs
+    let echarts = window.echarts
+
+    if (!w.isEle(ele)) {
+        throw new Error(`invalid ele`)
+    }
+    if (!w.isearr(orders)) {
+        throw new Error(`invalid orders`)
+    }
+
+    let p2r = (p) => {
+        p = w.cstr(p)
+        p = p.replace('%', '')
+        p = w.cdbl(p)
+        // p /= 100
+        return p
+    }
+
+    //以target為中心, 抓最大距離*1.2
+    let mkMin = (target) => {
+        let f = (value) => {
+            // console.log(value.min, value.max)
+            let d = _.max([target - value.min, value.max - target])
+            return target - w.cdbl(d * 1.2)
+        }
+        return f
+    }
+    let mkMax = (target) => {
+        let f = (value) => {
+            // console.log(value.min, value.max)
+            let d = _.max([target - value.min, value.max - target])
+            return target + w.cdbl(d * 1.2)
+        }
+        return f
+    }
+
+    let ordersDedup = _
+        .chain(orders)
+        .groupBy(o => o.timeStart)
+        .map(group => _.last(group)) //同一時間取最後一筆
+        .sortBy(o => o.timeStart) //重新依時間排序
+        .value()
+
+    ordersDedup = _.filter(ordersDedup, (o) => {
+        return w.isnum(o.uCumuProfitOrLoss) && w.isestr(o.rCumuProfitOrLoss)
+    })
+
+    //usEquity
+    let usEquity = _.map(ordersDedup, (o) => {
+        let t = ot(o.timeStart).toDate()
+        return [t, w.cdbl(o.uCumuProfitOrLoss)]
+    })
+
+    //rsEquity
+    let rsEquity = _.map(ordersDedup, (o) => {
+        let t = ot(o.timeStart).toDate()
+        return [t, p2r(o.rCumuProfitOrLoss)]
+    })
+
+    // 基本 optChart
+    let optChart = {
+        tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+                type: 'cross',
+                crossStyle: { color: '#999' },
+            },
+        },
+        grid: {
+            left: 80,
+            right: 80,
+            top: 60,
+            bottom: 60,
+            containLabel: false,
+        },
+        legend: {
+            data: ['累計盈虧(USDT)', '累計盈虧比例(%)'],
+            right: 100,
+            bottom: 90,
+            orient: 'vertical',
+            icon: 'circle',
+            itemWidth: 10,
+            itemHeight: 10,
+            textStyle: {
+                fontSize: 12,
+            },
+        },
+        xAxis: [{
+            type: 'time',
+            boundaryGap: false,
+            // min: usEquity[0][0], // 起點時間
+            // max: _.last(usEquity)[0], // 終點時間
+            axisLabel: {
+                formatter: (value) => {
+                    return ot(value).format('YYYY-MM-DD')
+                },
+                hideOverlap: false,
+                showMinLabel: true, //強制顯示最左
+                showMaxLabel: true, //強制顯示最右
+            },
+            axisLine: {
+                onZero: false,
+                // lineStyle: { color: '#999' },
+            },
+            axisTick: {
+                show: true,
+                inside: false,
+                length: 6,
+            },
+        }],
+        yAxis: [
+            {
+                type: 'value',
+                name: '累計盈虧(USDT)',
+                position: 'left',
+                min: mkMin(0),
+                max: mkMax(0),
+                axisLine: {
+                    show: true,
+                    lineStyle: { color: '#4561b5' },
+                },
+                axisLabel: {
+                    hideOverlap: false,
+                    showMinLabel: false,
+                    showMaxLabel: false,
+                },
+                axisTick: {
+                    show: true,
+                    inside: true,
+                    length: 6,
+                },
+            },
+            {
+                type: 'value',
+                name: '累計盈虧比例(%)',
+                position: 'right',
+                min: mkMin(0),
+                max: mkMax(0),
+                axisLine: {
+                    show: true,
+                    lineStyle: { color: '#559538' },
+                },
+                splitLine: { show: false },
+                axisLabel: {
+                    // hideOverlap: false,
+                    showMinLabel: false,
+                    showMaxLabel: false,
+                },
+                axisTick: {
+                    show: true,
+                    inside: true,
+                    length: 6,
+                },
+                axisPointer: {
+                    label: {
+                        formatter: (params) => {
+                            return `${params.value.toFixed(2)}%`
+                        }
+                    }
+                },
+            },
+        ],
+        series: [
+            {
+                name: '累計盈虧(USDT)',
+                type: 'line',
+                smooth: true,
+                yAxisIndex: 0,
+                itemStyle: { color: '#7893e3' },
+                showSymbol: false,
+                data: usEquity,
+            },
+            {
+                name: '累計盈虧比例(%)',
+                type: 'line',
+                smooth: true,
+                yAxisIndex: 1,
+                itemStyle: { color: 'transparent' },
+                showSymbol: false,
+                data: rsEquity,
+            },
+        ],
+    }
+
+    let chart = echarts.init(ele)
+    chart.setOption(optChart)
+
+    window.addEventListener('resize', () => chart.resize())
+
+    return chart
+}
+

package/dist/renderSummary.js

@@ -0,0 +1,194 @@
+
+
+let genCard = (opt = {}) => {
+
+    let {
+        icon = 'fa-question-circle',
+        iconColor = 'text-gray-600',
+        iconBg = 'bg-gray-100',
+        title = '',
+        main = '',
+        mainColor = 'text-gray-900',
+        sub = '',
+    } = opt
+
+    let h = `
+        <div class="stat-card flex items-start gap-4">
+            <div class="p-3 rounded-lg ${iconBg} ${iconColor}">
+                <i class="fas ${icon} fa-lg"></i>
+            </div>
+            <div>
+                <p class="text-sm font-medium text-gray-500">${title}</p>
+                <p class="text-2xl font-bold ${mainColor}">${main}</p>
+                <p class="text-md font-semibold text-gray-500">${sub}</p>
+            </div>
+        </div>
+    `
+
+    return h
+}
+
+
+let renderSummary = (ele, summary) => {
+
+    let _ = window._
+    let w = window.wsemi
+    let ot = window.dayjs
+
+    if (!w.isEle(ele)) {
+        throw new Error(`invalid ele`)
+    }
+
+    let cards = []
+
+    let isProfit = summary.uEquityFinal >= summary.uIni
+
+    let profitColor = isProfit ? 'text-green-600' : 'text-red-600'
+    let profitBg = isProfit ? 'bg-green-100' : 'bg-red-100'
+
+    let tStart = ot(summary.timeOhlcStart)
+    let tEnd = ot(summary.timeOhlcEnd)
+    // console.log('summary.timeOhlcStart', summary.timeOhlcStart, tStart)
+    // console.log('summary.timeOhlcEnd', summary.timeOhlcEnd, tEnd)
+
+    let sStart = tStart.format('YYYY-MM-DD')
+    let sEnd = tEnd.format('YYYY-MM-DD')
+
+    //總報酬率
+    cards.push(genCard({
+        icon: 'fa-arrow-trend-up',
+        iconColor: profitColor,
+        iconBg: profitBg,
+        title: '總報酬率',
+        main: `${summary.rCumuProfitOrLossFinal}`,
+        mainColor: profitColor,
+        sub: `年化報酬率: ${summary.rCumuProfitOrLossFinalNormYear}`,
+    }))
+
+    //總等效報酬率
+    cards.push(genCard({
+        icon: 'fa-solid fa-shuffle',
+        iconColor: profitColor,
+        iconBg: profitBg,
+        title: '總等效報酬率',
+        main: `${summary.rEquivalentCumuProfitOrLossFinal}`,
+        mainColor: profitColor,
+        sub: `等效年化報酬率: ${summary.rEquivalentCumuProfitOrLossFinalNormYear}`,
+    }))
+
+    //最終資金
+    cards.push(genCard({
+        icon: 'fa-arrow-up-right-dots',
+        iconColor: profitColor,
+        iconBg: profitBg,
+        title: '最終資金',
+        main: `${w.dig(summary.uEquityFinal, 2)} USDT`,
+        mainColor: profitColor,
+        sub: `淨盈虧: ${w.dig(summary.uEquityFinal - summary.uIni, 2)} USDT`,
+    }))
+
+    //初始資金
+    cards.push(genCard({
+        icon: 'fa-coins',
+        iconColor: 'text-yellow-600',
+        iconBg: 'bg-yellow-100',
+        title: '初始資金',
+        main: `${w.dig(summary.uIni, 2)} USDT`,
+        mainColor: 'text-gray-900',
+        sub: '',
+    }))
+
+    //最大回撤
+    cards.push(genCard({
+        icon: 'fa-arrow-trend-down',
+        iconColor: 'text-red-600',
+        iconBg: 'bg-red-100',
+        title: '最大回撤',
+        main: `${w.dig(summary.uDrawdownMax, 2)} USDT`,
+        mainColor: 'text-red-500',
+        sub: '',
+    }))
+
+    //最大回撤率
+    cards.push(genCard({
+        icon: 'fa-arrow-trend-down',
+        iconColor: 'text-red-600',
+        iconBg: 'bg-red-100',
+        title: '最大回撤率',
+        main: `${summary.rDrawdownMax}`,
+        mainColor: 'text-red-500',
+        sub: `等效最大回徹率: ${summary.rEquivalentDrawdownMax}`,
+    }))
+
+    //最大持倉筆數
+    cards.push(genCard({
+        icon: 'fa-layer-group',
+        iconColor: 'text-orange-600',
+        iconBg: 'bg-orange-100',
+        title: '最大持倉筆數',
+        main: `${summary.numTradeAllMax} 筆`,
+        mainColor: 'text-gray-900',
+        sub: `同時出場單數為 ${summary.numTradeAllMax * 2} 筆`,
+    }))
+
+    //最大持倉
+    cards.push(genCard({
+        icon: 'fa-wallet',
+        iconColor: 'text-orange-600',
+        iconBg: 'bg-orange-100',
+        title: '最大持倉',
+        main: `${w.dig(summary.uTradeAllMax, 2)} USDT`,
+        mainColor: 'text-gray-900',
+        sub: `佔本金: ${summary.rTradeAllMax}`,
+    }))
+
+    //總交易次數
+    cards.push(genCard({
+        icon: 'fa-solid fa-arrows-rotate',
+        iconColor: 'text-blue-600',
+        iconBg: 'bg-blue-100',
+        title: '總交易次數',
+        main: `${summary.numTrade} 次`,
+        mainColor: 'text-gray-900',
+        sub: '',
+    }))
+
+    //勝率
+    cards.push(genCard({
+        icon: 'fa-percent',
+        iconColor: 'text-indigo-600',
+        iconBg: 'bg-indigo-100',
+        title: '勝率',
+        main: `${summary.rWin}`,
+        mainColor: 'text-gray-900',
+        sub: '',
+    }))
+
+    //夏普值
+    cards.push(genCard({
+        icon: 'fa-chart-line',
+        iconColor: 'text-emerald-600',
+        iconBg: 'bg-emerald-100',
+        title: '夏普值',
+        main: w.dig(summary.rSharpe, 2),
+        mainColor: 'text-emerald-700',
+        sub: '風險調整後報酬',
+    }))
+
+    //回測區間
+    cards.push(genCard({
+        icon: 'fa-calendar-alt',
+        iconColor: 'text-sky-600',
+        iconBg: 'bg-sky-100',
+        title: '回測區間',
+        main: `${summary.btDays}日(${summary.btYears}年)`,
+        mainColor: 'text-gray-900',
+        sub: `${sStart} 至 ${sEnd}`,
+    }))
+
+    let h = cards.join('')
+
+    ele.innerHTML = h
+
+    return null
+}

package/dist/tmp.html

@@ -0,0 +1,232 @@
+<!DOCTYPE html>
+<html lang="zh-Hant">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>交易策略報告</title>
+
+        <!-- Tailwind CSS -->
+        <script src="https://cdn.tailwindcss.com"></script>
+
+        <!-- Font Awesome -->
+        <link
+            rel="stylesheet"
+            href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css"
+        />
+        
+        <!-- lodash -->
+        <script src="https://cdn.jsdelivr.net/npm/lodash@4.18.1/lodash.min.js"></script>
+
+        <!-- wsemi -->
+        <script src="https://cdn.jsdelivr.net/npm/wsemi@1.8.67/dist/wsemi.umd.min.js"></script>
+        <script>
+            let w=wsemi
+        </script>
+
+        <!-- dayjs -->
+        <script src="https://cdn.jsdelivr.net/npm/dayjs@1.11.19/dayjs.min.js"></script>
+        <script>
+            let ot=dayjs
+        </script>
+
+        <!-- ECharts -->
+        <script src="https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.min.js"></script>
+
+        <!-- vis-timeline standalone (CSS + JS) -->
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vis-timeline@latest/styles/vis-timeline-graph2d.min.css">
+        <script src="https://cdn.jsdelivr.net/npm/vis-timeline@latest/standalone/umd/vis-timeline-graph2d.min.js"></script>
+
+        <!-- render -->
+        <script>
+            {renderProfitPlot}
+        </script>
+        <script>
+            {renderOrdersTable}
+        </script>
+        <script>
+            {renderOrdersTimeline}
+        </script>
+        <script>
+            {renderSummary}
+        </script>
+
+        <style>
+
+            body {
+                font-family: "微軟正黑體";
+                background-color: #f8fafc; /* 使用更柔和的淺灰色背景 */
+            }
+
+            .stat-card {
+                background-color: white;
+                border-radius: 0.75rem; 
+                padding: 1.5rem;
+                box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+                transition: all 0.3s ease-in-out;
+                border: 1px solid #e5e7eb;
+            }
+
+            .trade-table th {
+                background-color: #f1f5f9;
+                position: sticky;
+                top: 0;
+                font-weight: bold;
+                text-align: center;
+            }
+            .trade-table tr:nth-child(even) {
+                background-color: #f8fafc;
+            }
+            .trade-table tr:hover {
+                background-color: #e2e8f0;
+            }
+
+            .trade-table td {
+                text-align: center;
+            }
+
+            .vis-group {
+
+            }
+
+            .vis-label {
+                font-size: 12px;
+                line-height: 28px;
+            }
+
+            .vis-item {
+
+            }
+
+            .vis-range {
+
+            }
+
+            .vis-item-content {
+                display: block !important;
+                font-size: 12px;
+                padding: 0px 2px !important;
+            }
+                        
+            .vis-item.bar-long {
+                background-color: #2eb65a;
+                border-color: #16A34A;
+                color: #fff;
+            }
+
+            .vis-item.bar-short {
+                background-color: #d85c5c;
+                border-color: #DC2626;
+                color: #fff;
+            }
+
+        </style>
+    </head>
+    <body>
+
+        <div class=" mx-auto p-4 sm:p-6 lg:p-8">
+
+            <!-- 標題 -->
+            <header class="mb-10">
+                <p class="text-md font-semibold text-gray-800">交易策略報告</p>
+                <h1 class="text-3xl text-gray-900 mt-2">
+                    {name}
+                </h1>
+            </header>
+
+            <!-- 摘要資訊區 -->
+            <section class="mb-8">
+
+                <h2 class="text-md font-semibold text-gray-800 mb-4">
+                    績效總覽
+                </h2>
+
+                <div 
+                    id="ref-summary"
+                    class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
+                </div>
+
+            </section>
+
+            <!-- 累計收益圖 -->
+            <section class="mb-8">
+
+                <h2 class="text-md font-semibold text-gray-800 mb-4">
+                    收益曲線
+                </h2>
+
+                <div
+                    class="bg-white rounded-lg shadow-md border border-gray-200"
+                >
+                    <div
+                        id="ref-chart"
+                        style="width: 100%; height: 450px;"
+                    ></div>
+                </div>
+
+            </section>
+
+            <!-- 交易資訊列表 -->
+            <section class="mb-8">
+
+                <h2 class="text-md font-semibold text-gray-800 mb-4">
+                    交易紀錄
+                </h2>
+
+                <div
+                    class="bg-white rounded-lg shadow-md border border-gray-200 overflow-x-auto max-h-[600px]"
+                >
+                    <div
+                        id="ref-table"
+                    ></div>
+                </div>
+
+            </section>
+            
+            <!-- 交易甘特圖 -->
+            <section class="mb-8">
+
+                <h2 class="text-md font-semibold text-gray-800 mb-4">
+                    交易時序
+                </h2>
+
+                <div
+                    class="bg-white rounded-lg shadow-md border border-gray-200 overflow-x-auto max-h-[600px] overflow-hidden"
+                >
+                    <div
+                        id="ref-timeline"
+                    ></div>
+                </div>
+
+            </section>
+            
+        </div>
+
+        <script>
+
+            let orders = {orders}
+            let summary = {summary}
+
+            document.addEventListener("DOMContentLoaded", () => {
+
+                // Summary卡區
+                let eleSummary = document.getElementById("ref-summary")
+                renderSummary(eleSummary, summary)
+
+                // 累計盈虧圖
+                let eleChart = document.getElementById("ref-chart");
+                renderProfitPlot(eleChart, orders, { uIni: summary.uIni })
+
+                // 交易表格
+                let eleTable = document.getElementById("ref-table")
+                renderOrdersTable(eleTable, orders)
+
+                // 交易甘特圖
+                let eleTimeline = document.getElementById("ref-timeline")
+                renderOrdersTimeline(eleTimeline, orders)
+
+            });
+
+        </script>
+
+    </body>
+</html>