fix(web): show exact trend values and integer axis ticks
This commit is contained in:
1 parent
fcca14c0f9
commit
eff4b0149d
3 files changed
+11
-10
No files matched your search
@@ -1,4 +1,4 @@
|
|||||||
import { formatAxis, formatCount, formatDay } from "./format.js";
|
import { formatAxis, formatDay, formatNumber } from "./format.js";
|
||||||
|
|
||||||
const charts = new Map();
|
const charts = new Map();
|
||||||
let resizeObserver = null;
|
let resizeObserver = null;
|
||||||
@@ -78,7 +78,7 @@ export function lineChart(element, { dates, values, name = "数值", color, scal
|
|||||||
if (!point) return "";
|
if (!point) return "";
|
||||||
const value = point.value;
|
const value = point.value;
|
||||||
return `<strong>${point.axisValue}</strong><br>${name}:${
|
return `<strong>${point.axisValue}</strong><br>${name}:${
|
||||||
value === null || value === undefined ? "缺失" : formatCount(value)
|
value === null || value === undefined ? "缺失" : formatNumber(value)
|
||||||
}`;
|
}`;
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
@@ -98,6 +98,7 @@ export function lineChart(element, { dates, values, name = "数值", color, scal
|
|||||||
yAxis: {
|
yAxis: {
|
||||||
type: "value",
|
type: "value",
|
||||||
scale,
|
scale,
|
||||||
|
minInterval: 1,
|
||||||
splitLine: { lineStyle: { color: theme.grid, type: "dashed" } },
|
splitLine: { lineStyle: { color: theme.grid, type: "dashed" } },
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
color: theme.muted,
|
color: theme.muted,
|
||||||
@@ -147,7 +148,7 @@ export function barChart(element, { labels, values, name = "数值", color }) {
|
|||||||
formatter(params) {
|
formatter(params) {
|
||||||
const point = params[0];
|
const point = params[0];
|
||||||
if (!point) return "";
|
if (!point) return "";
|
||||||
return `<strong>${point.name}</strong><br>${name}:${formatCount(point.value)}`;
|
return `<strong>${point.name}</strong><br>${name}:${formatNumber(point.value)}`;
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
xAxis: {
|
xAxis: {
|
||||||
@@ -165,6 +166,7 @@ export function barChart(element, { labels, values, name = "数值", color }) {
|
|||||||
},
|
},
|
||||||
yAxis: {
|
yAxis: {
|
||||||
type: "value",
|
type: "value",
|
||||||
|
minInterval: 1,
|
||||||
splitLine: { lineStyle: { color: theme.grid, type: "dashed" } },
|
splitLine: { lineStyle: { color: theme.grid, type: "dashed" } },
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
color: theme.muted,
|
color: theme.muted,
|
||||||
|
|||||||
@@ -19,10 +19,8 @@ export function formatAxis(value) {
|
|||||||
if (value === null || value === undefined || Number.isNaN(Number(value))) return "";
|
if (value === null || value === undefined || Number.isNaN(Number(value))) return "";
|
||||||
const number = Number(value);
|
const number = Number(value);
|
||||||
if (Math.abs(number) >= 1e8) return `${trimZero((number / 1e8).toFixed(2))}亿`;
|
if (Math.abs(number) >= 1e8) return `${trimZero((number / 1e8).toFixed(2))}亿`;
|
||||||
if (Math.abs(number) >= 1e4) {
|
if (Math.abs(number) >= 1e6) return `${trimZero((number / 1e4).toFixed(2))}万`;
|
||||||
const scaled = number / 1e4;
|
// 小于一百万时直接显示精确值,避免 59,798 与 59,800 都被写成“6万”。
|
||||||
return `${trimZero(scaled.toFixed(Math.abs(scaled) >= 100 ? 1 : 2))}万`;
|
|
||||||
}
|
|
||||||
return Math.round(number).toLocaleString("zh-CN");
|
return Math.round(number).toLocaleString("zh-CN");
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -6,7 +6,8 @@ import {
|
|||||||
import { lineChart, themeColor } from "../charts.js";
|
import { lineChart, themeColor } from "../charts.js";
|
||||||
import {
|
import {
|
||||||
escapeAttr, escapeHtml, formatCount, formatDate, formatDelta,
|
escapeAttr, escapeHtml, formatCount, formatDate, formatDelta,
|
||||||
formatDuration, formatPercent, formatScore, metricLabel, statusLabel,
|
formatDuration, formatNumber, formatPercent, formatScore,
|
||||||
|
metricLabel, statusLabel,
|
||||||
} from "../format.js";
|
} from "../format.js";
|
||||||
import { replaceQuery } from "../router.js";
|
import { replaceQuery } from "../router.js";
|
||||||
|
|
||||||
@@ -22,7 +23,7 @@ function snapshotTable(points) {
|
|||||||
${points.slice().reverse().map((point) => `
|
${points.slice().reverse().map((point) => `
|
||||||
<tr class="${point.ok ? "" : "failed-row"}">
|
<tr class="${point.ok ? "" : "failed-row"}">
|
||||||
<td>${escapeHtml(point.stat_date)}</td>
|
<td>${escapeHtml(point.stat_date)}</td>
|
||||||
${METRICS.map((metric) => `<td>${point.ok ? formatCount(point[metric]) : "—"}</td>`).join("")}
|
${METRICS.map((metric) => `<td>${point.ok ? formatNumber(point[metric]) : "—"}</td>`).join("")}
|
||||||
<td>${point.ok ? "成功" : `<span class="danger">失败</span>`}</td>
|
<td>${point.ok ? "成功" : `<span class="danger">失败</span>`}</td>
|
||||||
</tr>`).join("")}
|
</tr>`).join("")}
|
||||||
</tbody>
|
</tbody>
|
||||||
@@ -86,7 +87,7 @@ export async function renderVideo(root, { params, query }) {
|
|||||||
class="chip${range === value ? " active" : ""}" data-range="${value}">${label}</button>`).join("")}
|
class="chip${range === value ? " active" : ""}" data-range="${value}">${label}</button>`).join("")}
|
||||||
</div>
|
</div>
|
||||||
${trend.available ? `<div class="chart" id="video-trend"></div>` : emptyState("暂无趋势数据", "该视频还没有成功快照。")}
|
${trend.available ? `<div class="chart" id="video-trend"></div>` : emptyState("暂无趋势数据", "该视频还没有成功快照。")}
|
||||||
${!trend.available ? "" : `<p class="section-note">缺失日期会断开,不插值;失败快照按缺失处理。</p>`}
|
${!trend.available ? "" : `<p class="section-note">缺失日期会断开,不插值;失败快照按缺失处理。纵轴按数据范围缩放,精确值见下方快照记录。</p>`}
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="panel">
|
<section class="panel">
|
||||||
|
|||||||
Reference in new issue
Block a user