support lineChart for backtest card

anyongjin · anyongjin · commit 9d103b61cdbe · 2026-01-16T10:26:08.000+08:00
diff --git a/opt/tools.go b/opt/tools.go
@@ -658,12 +658,28 @@ func readAssetHtml(file, prefix string, useRate bool) (*AssetData, *errs.Error)
 	}
 
 	// 提取JSON数据
-	start := strings.Index(string(content), "var chartData = ") + 15
-	end := strings.Index(string(content)[start:], "\n")
-	if start < 15 || end < 0 {
+	text := string(content)
+	start := strings.Index(text, "chartData = ")
+	keyLen := len("chartData = ")
+	if start < 0 {
+		start = strings.Index(text, "chartData=")
+		keyLen = len("chartData=")
+	}
+	if start < 0 {
 		return nil, errs.New(errs.CodeInvalidData, fmt.Errorf("invalid html format in file %s", file))
 	}
-	jsonStr := string(content)[start : start+end]
+	start += keyLen
+	end := strings.Index(text[start:], "\n")
+	if end < 0 {
+		end = strings.Index(text[start:], ";")
+	}
+	if end < 0 {
+		end = strings.Index(text[start:], "</script>")
+	}
+	if end < 0 {
+		return nil, errs.New(errs.CodeInvalidData, fmt.Errorf("invalid html format in file %s", file))
+	}
+	jsonStr := text[start : start+end]
 
 	var data AssetData
 	if err = utils2.UnmarshalString(jsonStr, &data, utils2.JsonNumDefault); err != nil {
diff --git a/web/dev/api_dev.go b/web/dev/api_dev.go
@@ -465,6 +465,7 @@ func getBtTasks(c *fiber.Ctx) error {
 		MaxStart int64  `query:"maxStart"`
 		MaxID    int64  `query:"maxId"`
 		Limit    int64  `query:"limit"`
+		Assets   bool   `query:"assets"`
 	}
 
 	var args = new(TaskArgs)
@@ -506,14 +507,119 @@ func getBtTasks(c *fiber.Ctx) error {
 	// 处理返回数据
 	result := make([]map[string]interface{}, 0, len(tasks))
 	for _, task := range tasks {
-		result = append(result, task.ToMap())
+		taskMap := task.ToMap()
+		if args.Assets {
+			appendTaskAssets(task, taskMap)
+		}
+		result = append(result, taskMap)
 	}
 
 	return c.JSON(fiber.Map{
 		"data": result,
 	})
 }
 
+const btCardAssetPoints = 160
+
+type assetChartDataset struct {
+	Label string    `json:"label"`
+	Data  []float64 `json:"data"`
+}
+
+type assetChartData struct {
+	Labels   []string            `json:"labels"`
+	Datasets []assetChartDataset `json:"datasets"`
+}
+
+func appendTaskAssets(task *ormu.Task, taskMap map[string]interface{}) {
+	if task == nil || task.Path == "" || task.Status < int64(ormu.BtStatusDone) {
+		return
+	}
+	assetPath := filepath.Join(config.GetDataDir(), "backtest", task.Path, "assets.html")
+	if !utils.Exists(assetPath) {
+		return
+	}
+	reals, used, err := readAssetLines(assetPath, btCardAssetPoints)
+	if err != nil || len(reals) == 0 {
+		return
+	}
+	taskMap["reals"] = reals
+	if len(used) > 0 {
+		taskMap["used"] = used
+	}
+}
+
+func readAssetLines(file string, maxPoints int) ([]float64, []float64, error) {
+	content, err := os.ReadFile(file)
+	if err != nil {
+		return nil, nil, err
+	}
+	text := string(content)
+	start := strings.Index(text, "chartData = ")
+	keyLen := len("chartData = ")
+	if start < 0 {
+		start = strings.Index(text, "chartData=")
+		keyLen = len("chartData=")
+	}
+	if start < 0 {
+		return nil, nil, fmt.Errorf("chart data not found")
+	}
+	start += keyLen
+	end := strings.Index(text[start:], "\n")
+	if end < 0 {
+		end = strings.Index(text[start:], ";")
+	}
+	if end < 0 {
+		end = strings.Index(text[start:], "</script>")
+	}
+	if end < 0 {
+		return nil, nil, fmt.Errorf("chart data not terminated")
+	}
+	jsonStr := strings.TrimSpace(text[start : start+end])
+
+	var data assetChartData
+	if err := utils2.UnmarshalString(jsonStr, &data, utils2.JsonNumDefault); err != nil {
+		return nil, nil, err
+	}
+
+	var reals []float64
+	var used []float64
+	for _, ds := range data.Datasets {
+		switch ds.Label {
+		case "Real":
+			reals = ds.Data
+		case "Available":
+			used = ds.Data
+		}
+	}
+	if len(reals) == 0 && len(data.Datasets) > 0 {
+		reals = data.Datasets[0].Data
+	}
+
+	reals = downsampleSeries(reals, maxPoints)
+	used = downsampleSeries(used, maxPoints)
+	return reals, used, nil
+}
+
+func downsampleSeries(values []float64, maxPoints int) []float64 {
+	if maxPoints <= 0 || len(values) <= maxPoints {
+		return values
+	}
+	if maxPoints == 1 {
+		return []float64{values[len(values)-1]}
+	}
+	step := float64(len(values)-1) / float64(maxPoints-1)
+	result := make([]float64, 0, maxPoints)
+	for i := 0; i < maxPoints; i++ {
+		idx := int(step*float64(i) + 0.5)
+		if idx >= len(values) {
+			idx = len(values) - 1
+		}
+		result = append(result, values[idx])
+	}
+	return result
+}
+
 // getBtOptions 获取回测选项列表
 func getBtOptions(c *fiber.Ctx) error {
 	qu, conn, err2 := ormu.Conn()
diff --git a/web/ui/src/lib/LinePath.svelte b/web/ui/src/lib/LinePath.svelte
@@ -0,0 +1,80 @@
+<script lang="ts">
+  /**
+   * Simple line path renderer for card background curves.
+   */
+  let {
+    reals = [],
+    used = [],
+    width = 300,
+    height = 200,
+    realsColor = '#ddd',
+    usedColor = '#aaa',
+    strokeWidth = 1,
+    className = ''
+  }: {
+    reals?: number[];
+    used?: number[];
+    width?: number;
+    height?: number;
+    realsColor?: string;
+    usedColor?: string;
+    strokeWidth?: number;
+    className?: string;
+  } = $props();
+
+  function normalizeDataWithSharedScale(
+    data: number[],
+    width: number,
+    height: number,
+    min: number,
+    max: number
+  ): { x: number; y: number }[] {
+    if (!data || data.length === 0) return [];
+    const range = max - min || 1;
+    return data.map((value, index) => {
+      const x = (index / (data.length - 1)) * width;
+      const y = height - ((value - min) / range) * height;
+      return { x, y };
+    });
+  }
+
+  function generatePath(points: { x: number; y: number }[]): string {
+    if (points.length === 0) return '';
+    return points.map((p, i) => (i === 0 ? `M ${p.x} ${p.y}` : `L ${p.x} ${p.y}`)).join(' ');
+  }
+
+  let sharedMin = $derived.by(() => {
+    const allValues = [...reals, ...used].filter((v) => v !== undefined && v !== null);
+    return allValues.length > 0 ? Math.min(...allValues) : 0;
+  });
+
+  let sharedMax = $derived.by(() => {
+    const allValues = [...reals, ...used].filter((v) => v !== undefined && v !== null);
+    return allValues.length > 0 ? Math.max(...allValues) : 1;
+  });
+
+  let realsPoints = $derived(normalizeDataWithSharedScale(reals, width, height, sharedMin, sharedMax));
+  let usedPoints = $derived(normalizeDataWithSharedScale(used, width, height, sharedMin, sharedMax));
+
+  let realsPath = $derived(generatePath(realsPoints));
+  let usedPath = $derived(generatePath(usedPoints));
+
+  let hasData = $derived(reals.length > 0 || used.length > 0);
+</script>
+
+{#if hasData}
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 {width} {height}"
+    preserveAspectRatio="none"
+    class="absolute inset-0 w-full h-full opacity-30 {className}"
+    style="z-index: 0;"
+  >
+    {#if realsPath}
+      <path d={realsPath} stroke={realsColor} stroke-width={strokeWidth} fill="none" />
+    {/if}
+    {#if usedPath}
+      <path d={usedPath} stroke={usedColor} stroke-width={strokeWidth} fill="none" />
+    {/if}
+  </svg>
+{/if}
diff --git a/web/ui/src/lib/dev/types.ts b/web/ui/src/lib/dev/types.ts
@@ -18,6 +18,9 @@ export interface BtTask {
   maxDrawdown: number; // 最大回撤
   sharpe: number; // 夏普比率
 
+  reals?: number[];
+  used?: number[];
+
   maxOpenOrders?: number; // 最大开单数
   showDrawDownPct?: number; // 显示的回撤百分比
   barNum?: number; // 数据柱数量
diff --git a/web/ui/src/routes/(dev)/backtest/+page.svelte b/web/ui/src/routes/(dev)/backtest/+page.svelte
@@ -10,6 +10,7 @@
   import {addListener} from '$lib/dev/websocket';
   import {site} from "$lib/stores/site";
   import Icon from "$lib/Icon.svelte";
+  import LinePath from "$lib/LinePath.svelte";
   import {localizeHref} from "$lib/paraglide/runtime";
   import {modals} from "$lib/stores/modals";
   import type {StrVal} from "$lib/common";
@@ -73,6 +74,7 @@
       strat: selectedStrat,
       period: selectedPeriod,
       range: selectedRange,
+      assets: true,
       limit: pageSize,
       maxId: maxId || 0
     });
@@ -310,14 +312,23 @@ Error: ${task.info}`
   <!-- 结果列表 -->
   <div class="grid grid-cols-3 gap-6 mb-6">
     {#each tasks as task, tidx}
-      <div class="card bg-base-100 shadow hover:shadow-lg transition-shadow duration-200 cursor-pointer relative {isTaskSelected(task) ? 'ring-2 ring-primary' : ''}"
+      <div class="card bg-base-100 shadow hover:shadow-lg transition-shadow duration-200 cursor-pointer relative overflow-hidden {isTaskSelected(task) ? 'ring-2 ring-primary' : ''}"
            onclick={(e) => isMultiSelect ? toggleTaskSelection(task, e) : clickTask(task)} 
            onmouseenter={() => hoveredCard = tidx}
            onmouseleave={() => hoveredCard = null}>
+        {#if task.reals && task.reals.length > 0}
+          <LinePath
+            reals={task.reals}
+            used={task.used || []}
+            realsColor="#36A2EB"
+            usedColor="#FF6384"
+            strokeWidth={1}
+          />
+        {/if}
         {#if hoveredCard === tidx}
           <div class="custom-tooltip {tidx >= 3 ? 'loc-top' : ''}">{taskTooltip(task)}</div>
         {/if}
-        <div class="card-body p-5">
+        <div class="card-body p-5 relative" style="z-index: 1;">
           <!-- 第一行 -->
           <div class="flex justify-between items-center mb-3">
             <div class="flex items-center gap-3">
@@ -417,4 +428,4 @@ Error: ${task.info}`
       </div>
     </div>
   {/if}
-</div>
+</div>
