Conversation
Reviewer's Guide添加基于图例交互驱动的系列可见性切换，将非 AP 系列与 AP 索引对齐以支持单点检查，并在 AP 图表、后端 HTML 和图例 UI 中简化 AP/系列的渲染样式和布局。 AP 图表中基于图例驱动的系列可见性切换时序图sequenceDiagram
actor User
participant Legend as LegendElement
participant Handler as LegendClickHandler
participant Chart as APChart
User->>Legend: click .ap-legend-item
Legend->>Handler: _legendHandler(event)
Handler->>Handler: find item and idx
Handler->>Handler: compute only (other seriesVisible true?)
alt only is true and seriesVisible[idx] is true
Handler->>Handler: set all seriesVisible to true
else
Handler->>Handler: set seriesVisible[si] = (si == idx)
end
Handler->>Legend: update legend item opacities
alt chartType == line and renderDetailChart exists
Handler->>Chart: renderDetailChart()
else
Handler->>Chart: initChart()
end
Chart->>Chart: drawSeriesLine / beads using seriesVisible[]
Chart-->>User: updated chart with selected series visible
File-Level Changes
Tips and commandsInteracting with Sourcery
Customizing Your Experience访问你的 dashboard 以：
Getting HelpOriginal review guide in EnglishReviewer's GuideAdds interactive legend-driven series visibility toggling, aligns non-AP series to AP indices for single-point inspection, and simplifies AP/series rendering styles and layouts across the AP chart, backend HTML, and legend UI. Sequence diagram for legend-driven series visibility toggle in AP chartsequenceDiagram
actor User
participant Legend as LegendElement
participant Handler as LegendClickHandler
participant Chart as APChart
User->>Legend: click .ap-legend-item
Legend->>Handler: _legendHandler(event)
Handler->>Handler: find item and idx
Handler->>Handler: compute only (other seriesVisible true?)
alt only is true and seriesVisible[idx] is true
Handler->>Handler: set all seriesVisible to true
else
Handler->>Handler: set seriesVisible[si] = (si == idx)
end
Handler->>Legend: update legend item opacities
alt chartType == line and renderDetailChart exists
Handler->>Chart: renderDetailChart()
else
Handler->>Chart: initChart()
end
Chart->>Chart: drawSeriesLine / beads using seriesVisible[]
Chart-->>User: updated chart with selected series visible
File-Level Changes
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Code Review
This pull request refactors the AP chart and its statistics display to support interactive series toggling and centralized styling. Key changes include switching the statistics layout from flexbox to a CSS grid, introducing a visibility state for data series, and adding a legend click handler to show or hide specific lines. The rendering logic was simplified by removing Bezier curves, gradient fills, and time-aware X-axis mapping. Review feedback highlights inconsistencies in hardcoded colors that should be replaced with the new centralized color array, suggests optimizing the data lookup for tooltips and beads, and warns about potential layout overflow on mobile devices due to fixed-width grid columns.
| ctx.lineWidth = 1; | ||
| ctx.lineJoin = "round"; | ||
| ctx.setLineDash(sd.dash); | ||
| ctx.strokeStyle = ["#ce93d8", "#ffd54f", "#4fc3f7", "#81c784", "#1565c0"][ci]; |
Contributor
There was a problem hiding this comment.
The hardcoded colors for Virtual Asset and Asset in drawSeriesLine are inconsistent with the new colors defined in seriesColors and app.py. It is better to reference the seriesColors array directly to ensure consistency across the legend, lines, and beads.
Suggested change
| ctx.strokeStyle = ["#ce93d8", "#ffd54f", "#4fc3f7", "#81c784", "#1565c0"][ci]; | |
| ctx.strokeStyle = seriesColors[ci + 1]; |
Comment on lines
474
to
499
| drawBead(purpleCoins[idx], "#ce93d8", yOfPurple); | ||
| if (hasYellowCoins && idx < yellowCoinsLen && yellowCoins[idx] !== null && yellowCoins[idx] !== undefined) | ||
| if (hasYellowCoins && idx < yellowCoinsLen && yellowCoins[idx] !== null && yellowCoins[idx] !== undefined && seriesVisible[2]) | ||
| drawBead(yellowCoins[idx], "#ffd54f", yOfCombined); | ||
|
|
||
| if (hasVirtualAssetSeries) { | ||
| var minT_va = apTs[visibleStart]; | ||
| var maxT_va = apTs[Math.max(0, visibleEnd - 1)]; | ||
| var tr_va = maxT_va - minT_va || 1; | ||
| if (seriesVisible[3] && hasVirtualAssetSeries) { | ||
| var closestIdx_va = -1, closestDist_va = 600000; | ||
| for (var j = 0; j < lineVirtualAssetTs.length; j++) { | ||
| if (lineVirtualAssetTs[j] < minT_va || lineVirtualAssetTs[j] > maxT_va) continue; | ||
| var xj = pad.l + ((lineVirtualAssetTs[j] - minT_va) / tr_va) * gW; | ||
| var dist = Math.abs(mx_ - xj); | ||
| var dist = Math.abs(idx - j); | ||
| if (dist < closestDist_va) { closestDist_va = dist; closestIdx_va = j; } | ||
| } | ||
| if (closestIdx_va !== -1 && closestDist_va < 600000) | ||
| if (closestIdx_va !== -1 && closestDist_va < 5) | ||
| drawBead(lineVirtualAsset[closestIdx_va], "#4fc3f7", yOfCombined); | ||
| } | ||
| if (hasAssetSeries) { | ||
| var minT_a = apTs[visibleStart]; | ||
| var maxT_a = apTs[Math.max(0, visibleEnd - 1)]; | ||
| var tr_a = maxT_a - minT_a || 1; | ||
| if (seriesVisible[4] && hasAssetSeries) { | ||
| var closestIdx_a = -1, closestDist_a = 600000; | ||
| for (var j = 0; j < lineAssetTs.length; j++) { | ||
| if (lineAssetTs[j] < minT_a || lineAssetTs[j] > maxT_a) continue; | ||
| var xj = pad.l + ((lineAssetTs[j] - minT_a) / tr_a) * gW; | ||
| var dist = Math.abs(mx_ - xj); | ||
| var dist = Math.abs(idx - j); | ||
| if (dist < closestDist_a) { closestDist_a = dist; closestIdx_a = j; } | ||
| } | ||
| if (closestIdx_a !== -1 && closestDist_a < 600000) | ||
| if (closestIdx_a !== -1 && closestDist_a < 5) | ||
| drawBead(lineAsset[closestIdx_a], "#81c784", yOfCombined); | ||
| } | ||
|
|
||
| // 海里数 bead | ||
| if (hasDistanceSeries && idx < lineDistance.length && lineDistance[idx] !== null && lineDistance[idx] !== undefined) | ||
| if (hasDistanceSeries && idx < lineDistance.length && lineDistance[idx] !== null && lineDistance[idx] !== undefined && seriesVisible[5]) | ||
| drawBead(lineDistance[idx], "#1565c0", yOfCombined); |
Contributor
There was a problem hiding this comment.
The bead colors and the tooltip logic for Virtual Assets/Assets should be updated to use the centralized seriesColors array and to simplify the lookup once the data is properly aligned in the backend. The current loop-based distance check is inefficient and will fail if the data is not perfectly aligned by index.
if (hasPurpleCoins && idx < purpleCoinsLen && purpleCoins[idx] !== null && purpleCoins[idx] !== undefined && seriesVisible[1])
drawBead(purpleCoins[idx], seriesColors[1], yOfPurple);
if (hasYellowCoins && idx < yellowCoinsLen && yellowCoins[idx] !== null && yellowCoins[idx] !== undefined && seriesVisible[2])
drawBead(yellowCoins[idx], seriesColors[2], yOfCombined);
if (seriesVisible[3] && hasVirtualAssetSeries && idx < lineVirtualAsset.length && lineVirtualAsset[idx] !== null)
drawBead(lineVirtualAsset[idx], seriesColors[3], yOfCombined);
if (seriesVisible[4] && hasAssetSeries && idx < lineAsset.length && lineAsset[idx] !== null)
drawBead(lineAsset[idx], seriesColors[4], yOfCombined);
if (hasDistanceSeries && idx < lineDistance.length && lineDistance[idx] !== null && lineDistance[idx] !== undefined && seriesVisible[5])
drawBead(lineDistance[idx], seriesColors[5], yOfCombined);|
|
||
| coins_stats_html += f'<div style="display:flex; flex-wrap:wrap; gap:12px; margin-bottom:4px; font-size:12px; color:#aaa;"><span>黄币: <b style="color:#ffd54f">{yc_cur}</b></span><span>变化: <b style="color:{yc_change_color}">{yc_change_sign}{yc_change}</b></span><span>最高: <b style="color:#ef5350">{yc_max}</b></span><span>最低: <b style="color:#26a69a">{yc_min}</b></span></div>' | ||
| coins_legend_html += '<span style="display:flex; align-items:center; gap:4px;"><span style="width:12px; height:2px; background:#ffd54f; border-radius:1px; border-top:1px dashed #ffd54f;"></span>黄币</span>' | ||
| coins_stats_html += f'<div style="display:grid; grid-template-columns:150px 100px 90px 90px 90px; gap:8px; margin-bottom:2px; font-size:12px; color:#aaa;"><span>黄币: <b style="color:#ffd54f">{yc_cur}</b></span><span>变化: <b style="color:{yc_change_color}">{yc_change_sign}{yc_change}</b></span><span>最高: <b style="color:#ef5350">{yc_max}</b></span><span>最低: <b style="color:#26a69a">{yc_min}</b></span><span></span></div>' |
Contributor
There was a problem hiding this comment.
Using fixed pixel widths in grid-template-columns (totaling 520px) may cause the statistics block to overflow on mobile devices or narrow browser windows. Consider using more flexible units like fr or percentages, or use media queries to adjust the layout for smaller screens.
![sourcery-ai[bot]](https://avatars.githubusercontent.com/in/48477?s=60&v=4){kind=small}
There was a problem hiding this comment.
Hey - 我发现了一个问题，并且给出了一些整体性的反馈：
- 新增的
seriesColors和seriesNames数组目前没有被使用，而描边颜色仍然是硬编码的，因此要么把这些数组接入绘制/图例逻辑，要么将其移除以避免混淆。 - 图例点击处理函数调用
(chartType === 'line' && typeof renderDetailChart === 'function' ? renderDetailChart : initChart)()且不传入任何参数；如果这些函数依赖参数，建议提取一个共享的、无参数的重绘包装函数，以避免出现细微的破坏性改动。 - 对于虚拟/资产序列的珠子和提示框对齐，现在使用
Math.abs(idx - j) < 5并存在重复的匹配代码；建议提取一个小的辅助函数，并让该阈值依赖可见窗口大小而不是硬编码的5，以提升可维护性和鲁棒性。
面向 AI Agent 的提示
Please address the comments from this code review:
## Overall Comments
- The newly introduced `seriesColors` and `seriesNames` arrays are currently unused while stroke colors are still hardcoded, so either wire these arrays into the drawing/legend logic or remove them to avoid confusion.
- The legend click handler calls `(chartType === 'line' && typeof renderDetailChart === 'function' ? renderDetailChart : initChart)()` with no arguments; if these functions rely on parameters, consider extracting a shared, parameterless redraw wrapper to avoid subtle breakage.
- For virtual/asset series bead and tooltip alignment you now use `Math.abs(idx - j) < 5` with duplicated matching code; consider extracting a small helper and making the threshold depend on the visible window size instead of a hardcoded `5` to improve maintainability and robustness.
## Individual Comments
### Comment 1
<location path="webapp/ap_chart.js" line_range="68-70" />
<code_context>
var lineDistance = __DISTANCE__;
var hasDistanceSeries = lineDistance && lineDistance.length > 0;
+ var seriesVisible = [true, true, true, true, true, true];
+ var seriesColors = ["#64b5f6", "#ce93d8", "#ffd54f", "#06b6d4", "#22d3ee", "#1565c0"];
+ var seriesNames = ["体力", "紫币", "黄币", "虚拟资产", "资产", "海里数"];
+
var nn = chartType === 'line' ? ap.length : labels.length;
</code_context>
<issue_to_address>
**suggestion (bug_risk):** Hard-coded series metadata is duplicated and partially unused; tying it to SERIES_DRAW/legend would reduce coupling errors.
`seriesVisible`, `seriesColors`, and `seriesNames` are defined, but only `seriesVisible` is actually used; colors and names remain hard-coded in strokeStyle arrays, legend HTML, and tooltip labels. This duplication means any new series or reordering must be manually kept in sync across multiple arrays and `data-series` attributes, increasing the risk of off-by-one mistakes. Please derive colors/names from a single source (e.g., extend `SERIES_DRAW` with `color`/`name` and reuse it for canvas rendering and the legend) so all indices and visibility state stay aligned.
Suggested implementation:
```javascript
var lineDistance = __DISTANCE__;
var hasDistanceSeries = lineDistance && lineDistance.length > 0;
// seriesVisible is aligned with SERIES_DRAW; colors and names are now derived from SERIES_DRAW metadata
var seriesVisible = [true, true, true, true, true, true];
var nn = chartType === 'line' ? ap.length : labels.length;
if (nn < 1) return;
// 系列绘制配置（所有线都要画，虚拟/资产用时间戳）
var SERIES_DRAW = [
```
To fully implement the refactor so that colors/names are derived from a single source (`SERIES_DRAW`) and avoid duplication/coupling errors, you should also:
1. **Extend `SERIES_DRAW` entries with `color` and `name` fields** in `webapp/ap_chart.js`. For example, if the array currently looks like:
```js
var SERIES_DRAW = [
{ key: 'stamina', /* ... */ },
{ key: 'purple', /* ... */ },
{ key: 'yellow', /* ... */ },
{ key: 'virtual', /* ... */ },
{ key: 'asset', /* ... */ },
{ key: 'distance',/* ... */ }
];
```
update each entry with the corresponding metadata (preserving the existing order):
```js
var SERIES_DRAW = [
{ key: 'stamina', color: "#64b5f6", name: "体力", /* ... */ },
{ key: 'purple', color: "#ce93d8", name: "紫币", /* ... */ },
{ key: 'yellow', color: "#ffd54f", name: "黄币", /* ... */ },
{ key: 'virtual', color: "#06b6d4", name: "虚拟资产", /* ... */ },
{ key: 'asset', color: "#22d3ee", name: "资产", /* ... */ },
{ key: 'distance', color: "#1565c0", name: "海里数", /* ... */ }
];
```
2. **Update canvas drawing to use `SERIES_DRAW[i].color`** instead of hard‑coded color arrays. For example, replace any code like:
```js
ctx.strokeStyle = seriesColors[i];
```
with:
```js
ctx.strokeStyle = SERIES_DRAW[i].color;
```
3. **Update legend rendering to use `SERIES_DRAW[i].name` and `SERIES_DRAW[i].color`** instead of separately hard‑coded labels and colors. For instance, replace legend HTML construction such as:
```js
'<span class="legend-item" data-series="0" style="color:#64b5f6">体力</span>'
```
with something like:
```js
SERIES_DRAW.map(function (s, i) {
return '<span class="legend-item" data-series="' + i + '" style="color:' + s.color + '">' + s.name + '</span>';
}).join('');
```
4. **Update tooltip labels to use `SERIES_DRAW[i].name`** instead of hard‑coded strings. For example, change:
```js
tooltipLines.push('体力: ' + value);
```
to:
```js
tooltipLines.push(SERIES_DRAW[i].name + ': ' + value);
```
5. **Keep `seriesVisible` aligned with `SERIES_DRAW` length**. If you want to remove the hard‑coded `[true, true, ...]` array, move the initialization to a point *after* `SERIES_DRAW` is defined and use:
```js
var seriesVisible = SERIES_DRAW.map(function () { return true; });
```
Ensure any code that reads `seriesVisible` still runs after this initialization.
These adjustments will ensure that all series metadata (visibility, color, name) is driven from `SERIES_DRAW`, keeping indices and behavior consistent when adding, removing, or reordering series.
</issue_to_address>帮我变得更有用！请在每条评论上点击 👍 或 👎，我会根据这些反馈改进你的评审体验。
Original comment in English
Hey - I've found 1 issue, and left some high level feedback:
- The newly introduced
seriesColorsandseriesNamesarrays are currently unused while stroke colors are still hardcoded, so either wire these arrays into the drawing/legend logic or remove them to avoid confusion. - The legend click handler calls
(chartType === 'line' && typeof renderDetailChart === 'function' ? renderDetailChart : initChart)()with no arguments; if these functions rely on parameters, consider extracting a shared, parameterless redraw wrapper to avoid subtle breakage. - For virtual/asset series bead and tooltip alignment you now use
Math.abs(idx - j) < 5with duplicated matching code; consider extracting a small helper and making the threshold depend on the visible window size instead of a hardcoded5to improve maintainability and robustness.
Prompt for AI Agents
Please address the comments from this code review:
## Overall Comments
- The newly introduced `seriesColors` and `seriesNames` arrays are currently unused while stroke colors are still hardcoded, so either wire these arrays into the drawing/legend logic or remove them to avoid confusion.
- The legend click handler calls `(chartType === 'line' && typeof renderDetailChart === 'function' ? renderDetailChart : initChart)()` with no arguments; if these functions rely on parameters, consider extracting a shared, parameterless redraw wrapper to avoid subtle breakage.
- For virtual/asset series bead and tooltip alignment you now use `Math.abs(idx - j) < 5` with duplicated matching code; consider extracting a small helper and making the threshold depend on the visible window size instead of a hardcoded `5` to improve maintainability and robustness.
## Individual Comments
### Comment 1
<location path="webapp/ap_chart.js" line_range="68-70" />
<code_context>
var lineDistance = __DISTANCE__;
var hasDistanceSeries = lineDistance && lineDistance.length > 0;
+ var seriesVisible = [true, true, true, true, true, true];
+ var seriesColors = ["#64b5f6", "#ce93d8", "#ffd54f", "#06b6d4", "#22d3ee", "#1565c0"];
+ var seriesNames = ["体力", "紫币", "黄币", "虚拟资产", "资产", "海里数"];
+
var nn = chartType === 'line' ? ap.length : labels.length;
</code_context>
<issue_to_address>
**suggestion (bug_risk):** Hard-coded series metadata is duplicated and partially unused; tying it to SERIES_DRAW/legend would reduce coupling errors.
`seriesVisible`, `seriesColors`, and `seriesNames` are defined, but only `seriesVisible` is actually used; colors and names remain hard-coded in strokeStyle arrays, legend HTML, and tooltip labels. This duplication means any new series or reordering must be manually kept in sync across multiple arrays and `data-series` attributes, increasing the risk of off-by-one mistakes. Please derive colors/names from a single source (e.g., extend `SERIES_DRAW` with `color`/`name` and reuse it for canvas rendering and the legend) so all indices and visibility state stay aligned.
Suggested implementation:
```javascript
var lineDistance = __DISTANCE__;
var hasDistanceSeries = lineDistance && lineDistance.length > 0;
// seriesVisible is aligned with SERIES_DRAW; colors and names are now derived from SERIES_DRAW metadata
var seriesVisible = [true, true, true, true, true, true];
var nn = chartType === 'line' ? ap.length : labels.length;
if (nn < 1) return;
// 系列绘制配置（所有线都要画，虚拟/资产用时间戳）
var SERIES_DRAW = [
```
To fully implement the refactor so that colors/names are derived from a single source (`SERIES_DRAW`) and avoid duplication/coupling errors, you should also:
1. **Extend `SERIES_DRAW` entries with `color` and `name` fields** in `webapp/ap_chart.js`. For example, if the array currently looks like:
```js
var SERIES_DRAW = [
{ key: 'stamina', /* ... */ },
{ key: 'purple', /* ... */ },
{ key: 'yellow', /* ... */ },
{ key: 'virtual', /* ... */ },
{ key: 'asset', /* ... */ },
{ key: 'distance',/* ... */ }
];
```
update each entry with the corresponding metadata (preserving the existing order):
```js
var SERIES_DRAW = [
{ key: 'stamina', color: "#64b5f6", name: "体力", /* ... */ },
{ key: 'purple', color: "#ce93d8", name: "紫币", /* ... */ },
{ key: 'yellow', color: "#ffd54f", name: "黄币", /* ... */ },
{ key: 'virtual', color: "#06b6d4", name: "虚拟资产", /* ... */ },
{ key: 'asset', color: "#22d3ee", name: "资产", /* ... */ },
{ key: 'distance', color: "#1565c0", name: "海里数", /* ... */ }
];
```
2. **Update canvas drawing to use `SERIES_DRAW[i].color`** instead of hard‑coded color arrays. For example, replace any code like:
```js
ctx.strokeStyle = seriesColors[i];
```
with:
```js
ctx.strokeStyle = SERIES_DRAW[i].color;
```
3. **Update legend rendering to use `SERIES_DRAW[i].name` and `SERIES_DRAW[i].color`** instead of separately hard‑coded labels and colors. For instance, replace legend HTML construction such as:
```js
'<span class="legend-item" data-series="0" style="color:#64b5f6">体力</span>'
```
with something like:
```js
SERIES_DRAW.map(function (s, i) {
return '<span class="legend-item" data-series="' + i + '" style="color:' + s.color + '">' + s.name + '</span>';
}).join('');
```
4. **Update tooltip labels to use `SERIES_DRAW[i].name`** instead of hard‑coded strings. For example, change:
```js
tooltipLines.push('体力: ' + value);
```
to:
```js
tooltipLines.push(SERIES_DRAW[i].name + ': ' + value);
```
5. **Keep `seriesVisible` aligned with `SERIES_DRAW` length**. If you want to remove the hard‑coded `[true, true, ...]` array, move the initialization to a point *after* `SERIES_DRAW` is defined and use:
```js
var seriesVisible = SERIES_DRAW.map(function () { return true; });
```
Ensure any code that reads `seriesVisible` still runs after this initialization.
These adjustments will ensure that all series metadata (visibility, color, name) is driven from `SERIES_DRAW`, keeping indices and behavior consistent when adding, removing, or reordering series.
</issue_to_address>Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
Comment on lines
+68
to
+70
| var seriesVisible = [true, true, true, true, true, true]; | ||
| var seriesColors = ["#64b5f6", "#ce93d8", "#ffd54f", "#06b6d4", "#22d3ee", "#1565c0"]; | ||
| var seriesNames = ["体力", "紫币", "黄币", "虚拟资产", "资产", "海里数"]; |
There was a problem hiding this comment.
suggestion (bug_risk): 硬编码的序列元数据存在重复且部分未使用；将其与 SERIES_DRAW/图例绑定可以减少耦合错误。
已经定义了 seriesVisible、seriesColors 和 seriesNames，但实际上只使用了 seriesVisible；颜色和名称仍然硬编码在 strokeStyle 数组、图例 HTML 和提示框标签中。这种重复意味着任何新序列或重新排序都必须在多个数组和 data-series 属性之间手动保持同步，增加了出现 off-by-one 错误的风险。请从单一来源派生颜色/名称（例如为 SERIES_DRAW 扩展 color/name 字段，并在 Canvas 渲染和图例中复用），从而保持所有索引和可见性状态的一致。
建议实现方式：
var lineDistance = __DISTANCE__;
var hasDistanceSeries = lineDistance && lineDistance.length > 0;
// seriesVisible 与 SERIES_DRAW 对齐；颜色和名称现在从 SERIES_DRAW 元数据派生
var seriesVisible = [true, true, true, true, true, true];
var nn = chartType === 'line' ? ap.length : labels.length;
if (nn < 1) return;
// 系列绘制配置（所有线都要画，虚拟/资产用时间戳）
var SERIES_DRAW = [为了完整完成这次重构，使颜色/名称从单一来源（SERIES_DRAW）派生并避免重复/耦合错误，你还应当：
-
在
webapp/ap_chart.js中为SERIES_DRAW的条目扩展color和name字段。 例如，如果该数组当前类似：var SERIES_DRAW = [ { key: 'stamina', /* ... */ }, { key: 'purple', /* ... */ }, { key: 'yellow', /* ... */ }, { key: 'virtual', /* ... */ }, { key: 'asset', /* ... */ }, { key: 'distance',/* ... */ } ];
请在保持现有顺序的前提下，为每个条目补充对应的元数据：
var SERIES_DRAW = [ { key: 'stamina', color: "#64b5f6", name: "体力", /* ... */ }, { key: 'purple', color: "#ce93d8", name: "紫币", /* ... */ }, { key: 'yellow', color: "#ffd54f", name: "黄币", /* ... */ }, { key: 'virtual', color: "#06b6d4", name: "虚拟资产", /* ... */ }, { key: 'asset', color: "#22d3ee", name: "资产", /* ... */ }, { key: 'distance', color: "#1565c0", name: "海里数", /* ... */ } ];
-
更新 Canvas 绘制逻辑，使用
SERIES_DRAW[i].color而不是硬编码的颜色数组。 例如，将以下代码：ctx.strokeStyle = seriesColors[i];
替换为：
ctx.strokeStyle = SERIES_DRAW[i].color;
-
更新图例渲染逻辑，使用
SERIES_DRAW[i].name和SERIES_DRAW[i].color，而不是单独硬编码标签和颜色。 例如，将如下图例 HTML 构造：'<span class="legend-item" data-series="0" style="color:#64b5f6">体力</span>'替换为类似：
SERIES_DRAW.map(function (s, i) { return '<span class="legend-item" data-series="' + i + '" style="color:' + s.color + '">' + s.name + '</span>'; }).join('');
-
更新提示框标签以使用
SERIES_DRAW[i].name，而不是硬编码字符串。 例如，将：tooltipLines.push('体力: ' + value);
改为：
tooltipLines.push(SERIES_DRAW[i].name + ': ' + value);
-
保持
seriesVisible与SERIES_DRAW的长度对齐。 如果你想移除硬编码的[true, true, ...]数组，请将初始化移动到SERIES_DRAW定义之后，并使用：var seriesVisible = SERIES_DRAW.map(function () { return true; });
确保所有读取
seriesVisible的代码都在这段初始化之后执行。
这些调整将确保所有序列元数据（可见性、颜色、名称）都由 SERIES_DRAW 驱动，在添加、删除或重新排序序列时，保持索引和行为的一致性。
Original comment in English
suggestion (bug_risk): Hard-coded series metadata is duplicated and partially unused; tying it to SERIES_DRAW/legend would reduce coupling errors.
seriesVisible, seriesColors, and seriesNames are defined, but only seriesVisible is actually used; colors and names remain hard-coded in strokeStyle arrays, legend HTML, and tooltip labels. This duplication means any new series or reordering must be manually kept in sync across multiple arrays and data-series attributes, increasing the risk of off-by-one mistakes. Please derive colors/names from a single source (e.g., extend SERIES_DRAW with color/name and reuse it for canvas rendering and the legend) so all indices and visibility state stay aligned.
Suggested implementation:
var lineDistance = __DISTANCE__;
var hasDistanceSeries = lineDistance && lineDistance.length > 0;
// seriesVisible is aligned with SERIES_DRAW; colors and names are now derived from SERIES_DRAW metadata
var seriesVisible = [true, true, true, true, true, true];
var nn = chartType === 'line' ? ap.length : labels.length;
if (nn < 1) return;
// 系列绘制配置（所有线都要画，虚拟/资产用时间戳）
var SERIES_DRAW = [To fully implement the refactor so that colors/names are derived from a single source (SERIES_DRAW) and avoid duplication/coupling errors, you should also:
-
Extend
SERIES_DRAWentries withcolorandnamefields inwebapp/ap_chart.js. For example, if the array currently looks like:var SERIES_DRAW = [ { key: 'stamina', /* ... */ }, { key: 'purple', /* ... */ }, { key: 'yellow', /* ... */ }, { key: 'virtual', /* ... */ }, { key: 'asset', /* ... */ }, { key: 'distance',/* ... */ } ];
update each entry with the corresponding metadata (preserving the existing order):
var SERIES_DRAW = [ { key: 'stamina', color: "#64b5f6", name: "体力", /* ... */ }, { key: 'purple', color: "#ce93d8", name: "紫币", /* ... */ }, { key: 'yellow', color: "#ffd54f", name: "黄币", /* ... */ }, { key: 'virtual', color: "#06b6d4", name: "虚拟资产", /* ... */ }, { key: 'asset', color: "#22d3ee", name: "资产", /* ... */ }, { key: 'distance', color: "#1565c0", name: "海里数", /* ... */ } ];
-
Update canvas drawing to use
SERIES_DRAW[i].colorinstead of hard‑coded color arrays. For example, replace any code like:ctx.strokeStyle = seriesColors[i];
with:
ctx.strokeStyle = SERIES_DRAW[i].color;
-
Update legend rendering to use
SERIES_DRAW[i].nameandSERIES_DRAW[i].colorinstead of separately hard‑coded labels and colors. For instance, replace legend HTML construction such as:'<span class="legend-item" data-series="0" style="color:#64b5f6">体力</span>'with something like:
SERIES_DRAW.map(function (s, i) { return '<span class="legend-item" data-series="' + i + '" style="color:' + s.color + '">' + s.name + '</span>'; }).join('');
-
Update tooltip labels to use
SERIES_DRAW[i].nameinstead of hard‑coded strings. For example, change:tooltipLines.push('体力: ' + value);
to:
tooltipLines.push(SERIES_DRAW[i].name + ': ' + value);
-
Keep
seriesVisiblealigned withSERIES_DRAWlength. If you want to remove the hard‑coded[true, true, ...]array, move the initialization to a point afterSERIES_DRAWis defined and use:var seriesVisible = SERIES_DRAW.map(function () { return true; });
Ensure any code that reads
seriesVisiblestill runs after this initialization.
These adjustments will ensure that all series metadata (visibility, color, name) is driven from SERIES_DRAW, keeping indices and behavior consistent when adding, removing, or reordering series.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary by Sourcery
引入基于图例的交互式切换功能，用于控制 AP 和硬币/资产序列的显示，并将辅助序列数据与 AP 索引对齐，以实现一致的单点数据查看。
Enhancements:
Original summary in English
Summary by Sourcery
Introduce interactive legend-based toggling of AP and coin/asset series and align auxiliary series data to AP indices for consistent single-point inspection.
Enhancements: