w-trade-backtest 1.0.3

package/src/renderOrdersTable.js

@@ -0,0 +1,217 @@
+
+
+let renderOrdersTable = (ele, orders, opt = {}) => {
+
+    let _ = window._
+    let w = window.wsemi
+
+    if (!w.isEle(ele)) {
+        throw new Error(`invalid ele`)
+    }
+    if (!w.isearr(orders)) {
+        throw new Error(`invalid orders`)
+    }
+
+    orders = _.map(orders, (o, k) => {
+        o.id = `o${k + 1}`
+        return o
+    })
+
+    let optDef = {
+        columns: [
+            'id',
+            'mode',
+            'timeStart',
+            'priceStart',
+            'uTrade',
+            'uTradeAll',
+            'rTakeProfit',
+            'rStopLoss',
+            'timeEnd',
+            'priceEnd',
+            'modeResult',
+            'uProfitOrLoss',
+            'uCumuProfitOrLoss',
+            'uEquity',
+        ],
+        columnTranslations: {
+            id: '流水號',
+            mode: '模式',
+            timeStart: '開倉時間',
+            priceStart: '開倉價格<br>(USDT)',
+            uTrade: '下單金額<br>(USDT)',
+            uTradeAll: '當前持倉<br>(USDT)',
+            rTakeProfit: '止盈<br>(%)',
+            rStopLoss: '止損<br>(%)',
+            timeEnd: '平倉時間',
+            priceEnd: '平倉價格<br>(USDT)',
+            modeResult: '結果',
+            uProfitOrLoss: '單筆盈虧<br>(USDT)',
+            uCumuProfitOrLoss: '累計盈虧<br>(USDT)',
+            uEquity: '累計金額<br>(USDT)',
+        },
+        modeLabels: {
+            long: '做多',
+            short: '做空',
+        },
+        modeResultLabels: {
+            profit: '止盈',
+            loss: '止損',
+        },
+        rowClassDef: 'border-b border-gray-200',
+        cellClassDef: 'px-4 py-3 whitespace-nowrap',
+        formatters: {}, //使用key -> fn
+        rowClassFn: null, //使用接收(order, rowIndex) => '...'
+    }
+
+    let cfg = _.merge({}, optDef, opt)
+
+    let hHead = _.map(cfg.columns, key => {
+        let label = _.get(cfg.columnTranslations, key, key)
+        return `<th scope="col" class="px-4 py-3">${label}</th>`
+    }).join('')
+
+    let hBody = ''
+    _.forEach(orders, (order, rowIndex) => {
+
+        let rowClass = _.trim([
+            cfg.rowClassDef || '',
+            _.isFunction(cfg.rowClassFn)
+                ? (cfg.rowClassFn(order, rowIndex) || '')
+                : ''
+        ].join(' '))
+
+        hBody += `<tr class="${rowClass}">`
+
+        _.forEach(cfg.columns, key => {
+
+            let value = _.get(order, key, '')
+            let cellClass = cfg.cellClassDef
+            let format = cfg.formatters[key]
+
+            if (_.isFunction(format)) {
+                value = format(value, order, rowIndex)
+            }
+            else {
+                switch (key) {
+
+                case 'mode': {
+                    if (value === 'long') {
+                        value = cfg.modeLabels.long
+                        cellClass += ' text-green-600 font-semibold'
+                    }
+                    else if (value === 'short') {
+                        value = cfg.modeLabels.short
+                        cellClass += ' text-red-600 font-semibold'
+                    }
+                    else {
+                        value = ''
+                    }
+                    break
+                }
+
+                case 'modeResult': {
+                    if (value === 'profit') {
+                        value = cfg.modeResultLabels.profit
+                        cellClass += ' text-green-600 font-semibold'
+                    }
+                    else if (value === 'loss') {
+                        value = cfg.modeResultLabels.loss
+                        cellClass += ' text-red-600 font-semibold'
+                    }
+                    else {
+                        value = ''
+                    }
+                    break
+                }
+
+                case 'uProfitOrLoss':
+                case 'uCumuProfitOrLoss': {
+                    if (w.isnum(value)) {
+                        value = w.cdbl(value)
+                        if (value > 0) {
+                            cellClass += ' text-green-600 font-semibold'
+                        }
+                        else if (value < 0) {
+                            cellClass += ' text-red-600 font-semibold'
+                        }
+                        else {
+                            //empty
+                        }
+                        value = w.dig(value, 4)
+                    }
+                    break
+                }
+
+                case 'uEquity': {
+                    if (w.isnum(value)) {
+                        value = w.cdbl(value)
+                        if (value > 0) {
+                            //empty
+                        }
+                        else if (value < 0) {
+                            //empty
+                        }
+                        else {
+                            //empty
+                        }
+                        value = w.dig(value, 4)
+                    }
+                    break
+                }
+
+                case 'rTakeProfit':
+                case 'rStopLoss': {
+                    if (w.isnum(value)) {
+                        value = `${w.dig(value * 100, 1)}%`
+                    }
+                    break
+                }
+
+                case 'priceStart':
+                case 'priceEnd': {
+                    if (w.isnum(value)) {
+                        value = w.dig(value, 2)
+                    }
+                    break
+                }
+
+                case 'uTrade':
+                case 'uTradeAll': {
+                    if (w.isnum(value)) {
+                        value = w.dig(value, 2)
+                    }
+                    break
+                }
+
+                case 'timeStart':
+                case 'timeEnd': {
+                    if (w.isestr(value)) {
+                        value = value.replace('T', ' ')
+                    }
+                    break
+                }
+
+                default:
+                    break
+                }
+            }
+
+            hBody += `<td class="${cellClass}">${value}</td>`
+        })
+
+        hBody += `</tr>`
+    })
+
+    let h = `
+        <table class="trade-table w-full text-sm text-gray-600">
+            <thead><tr>${hHead}</tr></thead>
+            <tbody>${hBody}</tbody>
+        </table>
+    `
+
+    ele.innerHTML = h
+
+    return null
+}
+

package/src/renderOrdersTimeline.js

@@ -0,0 +1,159 @@
+
+
+let renderOrdersTimeline = (ele, orders, opt = {}) => {
+
+    let _ = window._
+    let w = window.wsemi
+    let ot = window.dayjs
+    let vis = window.vis
+
+    if (!w.isEle(ele)) {
+        throw new Error(`invalid ele`)
+    }
+    if (!w.isearr(orders)) {
+        throw new Error(`invalid orders`)
+    }
+
+    orders = _.map(orders, (o, k) => {
+        o.id = `o${k + 1}`
+        return o
+    })
+
+    let cv = (t) => {
+        if (!w.isestr(t)) {
+            return new Date()
+        }
+        return new Date(t)
+    }
+
+    let gv = (t, key, def = '') => {
+        let value = _.get(t, key, '')
+        if (!w.isestr(value) && !w.isnum(value)) {
+            return def
+        }
+        return value
+    }
+
+    let kv = (v) => {
+        if (v === 'profit') {
+            return '止盈'
+        }
+        else if (v === 'loss') {
+            return '止損'
+        }
+        return '尚未平倉'
+    }
+
+    function gft(d) {
+        return {
+            year: d.year(),
+            month: w.cstr(d.month() + 1).padStart(2, '0'),
+            day: w.cstr(d.date()).padStart(2, '0'),
+            hour: w.cstr(d.hour()).padStart(2, '0'),
+            minute: w.cstr(d.minute()).padStart(2, '0'),
+            second: w.cstr(d.second()).padStart(2, '0'),
+            millisecond: w.cstr(d.millisecond()).padStart(3, '0'),
+        }
+    }
+
+    function buildVisModel(rows) {
+        let groups = new vis.DataSet(
+            rows.map((r, idx) => ({
+                id: r['id'],
+                content: r['id'], // 左邊列標籤
+                order: idx, // 固定排序
+            }))
+        )
+
+        let items = new vis.DataSet(
+            rows.map((r, idx) => ({
+                id: idx + 1,
+                group: r['id'],
+                content: `${r['id']}: ${kv(r.modeResult)}`, //bar上的文字
+                start: cv(r.timeStart),
+                end: cv(r.timeEnd),
+                type: 'range',
+                title: `${r['id']}: ${gv(r, 'timeStart', '非預期錯誤')} 至 ${gv(r, 'timeEnd', '尚未平倉')}`,
+                className: r.mode === 'long' ? 'bar-long' : 'bar-short',
+            }))
+        )
+
+        return { groups, items }
+    }
+
+    let options = {
+
+        height: '600px',
+
+        stack: false, // 同一列不要堆疊（每列只有一個 item 時很適合）
+        horizontalScroll: true,
+        //zoomKey: "ctrlKey", // Ctrl + 滾輪縮放（避免誤縮放）
+        selectable: false,
+        multiselect: false,
+        margin: { item: 20, axis: 10 },
+        orientation: 'both', // 顯示上方時間軸 + 左側 groups
+        //showCurrentTime: true,
+
+        format: {
+            majorLabels: (d, scale, step) => {
+                // console.log('majorLabels', d, 'scale', scale, 'step', step)
+                let { year, month, day, hour, minute, second, millisecond } = gft(d)
+                if (scale === 'year') {
+                    return `${year}`
+                }
+                else if (scale === 'month') {
+                    return `${year}`
+                }
+                else if (scale === 'day' || scale === 'weekday') {
+                    return `${year}/${month}`
+                }
+                else if (scale === 'hour') {
+                    return `${year}/${month}/${day}`
+                }
+                else if (scale === 'minute') {
+                    return `${year}/${month}/${day} ${hour}`
+                }
+                else if (scale === 'second') {
+                    return `${year}/${month}/${day} ${hour}:${minute}`
+                }
+                else if (scale === 'millisecond') {
+                    return `${year}/${month}/${day} ${hour}:${minute}:${second}`
+                }
+                throw new Error(`invalid scale[${scale}]`)
+            },
+            minorLabels: (d, scale, step) => {
+                // console.log('minorLabels', d, 'scale', scale, 'step', step)
+                let { year, month, day, hour, minute, second, millisecond } = gft(d)
+                if (scale === 'year') {
+                    return `${year}`
+                }
+                else if (scale === 'month') {
+                    return `${month}`
+                }
+                else if (scale === 'day' || scale === 'weekday') {
+                    return `${day}`
+                }
+                else if (scale === 'hour') {
+                    return `${hour}h`
+                }
+                else if (scale === 'minute') {
+                    return `${minute}m`
+                }
+                else if (scale === 'second') {
+                    return `${second}s`
+                }
+                else if (scale === 'millisecond') {
+                    return `${millisecond}ms`
+                }
+                throw new Error(`invalid scale[${scale}]`)
+            },
+        },
+
+    }
+
+    let { groups, items } = buildVisModel(orders)
+    new vis.Timeline(ele, items, groups, options)
+    //let timeline = new vis.Timeline(ele, items, groups, options)
+    //timeline.fit();
+
+}

package/src/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
+}
+