ccus-cli 0.1.19 → 0.1.21

package/README.md

@@ -147,8 +147,9 @@ ccus aggregate serve --input-dir ./team-exports
 
 - `5 小时使用量百分比` 是 **展示指标**，来自 Claude 自身字段 `rate_limits.five_hour.used_percentage`
 - 使用率趋势图会在同一张图上叠加两条线：实线为 5 小时使用率（`rate_limits.five_hour`），虚线为 7 天使用率（`rate_limits.seven_day`），两者各自独立按时间桶聚合
-- 页面新增 **每日用户消息数** 柱状图：按自然日统计的真实用户请求数，口径与导出契约的 `userMessageCount` 一致（来自 `~/.claude/projects/**/*.jsonl`），不是 statusline 采样数，也仅用于页面展示、不进任何导出/聚合契约
-- 跨多天的窗口（如 `this-week` / `last-week`）使用率曲线会自动改用小时桶聚合，避免一周生成上千个点，且 x 轴改为按自然日（月-日）打刻度
+- **折线与纵向柱状图均由 [uPlot](https://github.com/leeoniya/uPlot) 渲染**：鼠标在绘图区**任意位置**悬停即可通过十字线 + **跟随鼠标的 tooltip** 看到该处各条线的当前读数（不必精确落在采样点上；遇到几乎垂直的窄尖峰，把鼠标移到竖线顶端即可读到峰值）；纵向柱还会在每根柱顶标注数值。底部为**自绘图例**（实时读数集中在 tooltip 里）。uPlot 库与样式已**内联进生成的 HTML**，`dashboard build` 产物用 `file://` 离线打开也能完整渲染与交互，不依赖任何 CDN
+- 页面新增 **每日用户消息数** 纵向柱状图：按自然日统计的真实用户请求数，口径与导出契约的 `userMessageCount` 一致（来自 `~/.claude/projects/**/*.jsonl`），不是 statusline 采样数，也仅用于页面展示、不进任何导出/聚合契约
+- 跨多天的窗口（如 `this-week` / `last-week`）使用率曲线会自动改用小时桶聚合，避免一周生成上千个点；x 轴刻度由 uPlot 按时间跨度自适应（短窗口显示 `HH:mm` **24 小时制**、跨天的刻度再补一行日期），不用 am/pm
 - 顶部统计卡展示 `Latest 5h usage`、`Peak 5h usage`、`Latest 7d usage`（含峰值）、`用户消息数`（窗口内每日真实用户请求数合计）
 - `--range today / this-week / last-week / 24h` 是 **你要查看的采样历史时间窗口**（`last-week` 指上一个完整周一到周日）
 - statusline 日志本身主要保存 `rawPayload` 与外部补充字段；默认导出时会同时保留原始事件，并额外汇总 `~/.claude/projects/**/*.jsonl` 中的会话 usage
@@ -183,6 +184,9 @@ ccus aggregate serve --input-dir ./team-exports
   - 无有效样本写空（`null`），有样本但无净增长写 `0`；`detail.csv` 不含此列（单事件行不承载区间累计语义）
 - CSV 里所有以 token 计的列（context 与 in/out/cache）都以百万（M）为单位（原始值除以 1,000,000），列名统一带 `M` 后缀；`contextWindowPct` 仍是百分比
 - 想直接查看团队多人 dashboard，可以用 `ccus aggregate serve --input-dir DIR [--port 0] [--host 127.0.0.1]`：默认监听 `127.0.0.1` 上的随机端口，启动后会自动用系统默认浏览器打开，每次请求实时读取目录里的 bundle，不写入任何文件
+  - 多人「5h/7d 使用率详细曲线」与「每日用户请求数对比」两张折线同样由 uPlot 渲染，悬停任意位置即可在**跟随 tooltip** 里看到当前位置**各人**的读数。底部图例**一个人只显示一个名字**（小写），点击该名字会同时切换该人 5h + 7d 两条线的显隐。各人按真实时间戳采样、彼此不对齐的曲线会先做**时间戳并集对齐**（缺失点留空而非补 0）再绘制；悬停时每条线的读数与高亮点会**吸附到该人离光标最近的真实采样点**，横向重合的尖峰按鼠标高度做 2D 命中，所以任意位置都能读到每个人的值、峰值圆点也会亮
+  - 「周使用量累计对比」是**横向排行榜**，仍保持自绘 SVG（它是带标签的水平进度条排行，uPlot 无原生横向 bar，不纳入迁移）
+  - uPlot 库同样内联，离线可用
 
 ## 定时同步
 

package/dist/cli.js

@@ -486,7 +486,13 @@ async function handleAggregateServe(options) {
     if (!Number.isInteger(port) || port < 0 || port > 65535) {
         throw new Error(`Invalid port: ${portOption ?? ""}`);
     }
-    const server = node_http_1.default.createServer(async (_request, response) => {
+    const server = node_http_1.default.createServer(async (request, response) => {
+        const url = new URL(request.url ?? "/", "http://localhost");
+        if (url.pathname !== "/") {
+            response.writeHead(404);
+            response.end();
+            return;
+        }
         try {
             const html = await renderAggregateDashboardHtml(resolvedInputDir);
             response.writeHead(200, {

package/dist/lib/aggregate-dashboard.js

@@ -1,8 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.alignTimeSeries = alignTimeSeries;
 exports.summarizePeople = summarizePeople;
 exports.summarizeOverall = summarizeOverall;
 exports.buildAggregateDashboardHtml = buildAggregateDashboardHtml;
+const chart_assets_1 = require("./chart-assets");
 const time_1 = require("./time");
 /** 折线 / 图例统一的调色板，保证同一个人在不同图表里颜色一致。 */
 const CHART_PALETTE = ["#5eead4", "#f59e0b", "#a855f7", "#22c55e", "#f87171", "#60a5fa", "#fbbf24", "#34d399"];
@@ -26,6 +28,35 @@ function maxOrNull(values) {
     const numbers = values.filter((value) => value !== null);
     return numbers.length > 0 ? Math.max(...numbers) : null;
 }
+/**
+ * 把多条不规则时间戳的 series 并集对齐到一个统一 x 轴。
+ *
+ * 多人 5h/7d 详细曲线各人按真实采样时间戳记录、彼此不对齐，而 uPlot 要求所有 series
+ * 共用同一个 x 数组。这里取所有 series 时间戳的并集升序作统一 x，每条 series 在自己
+ * 没有采样的时间点填 `null`（uPlot 以 gap 呈现 / spanGaps 连接），保证读数对齐而不串位。
+ */
+function alignTimeSeries(seriesList) {
+    const xsSet = new Set();
+    for (const series of seriesList) {
+        for (const point of series) {
+            xsSet.add(point.t);
+        }
+    }
+    const xs = [...xsSet].sort((left, right) => left - right);
+    const indexOf = new Map();
+    xs.forEach((t, index) => indexOf.set(t, index));
+    const columns = seriesList.map((series) => {
+        const column = new Array(xs.length).fill(null);
+        for (const point of series) {
+            const index = indexOf.get(point.t);
+            if (index !== undefined) {
+                column[index] = point.v;
+            }
+        }
+        return column;
+    });
+    return { xs, columns };
+}
 /**
  * 按 personKey 聚合 daily 行，得到每个人的“整段时间”账单。
  *
@@ -148,52 +179,29 @@ function renderDailyUserRequestChart(people, dailyIndex, dateAxis) {
       </section>
     `;
     }
-    const width = 920;
-    const height = 320;
-    const paddingX = 56;
-    const paddingY = 32;
-    const innerWidth = width - paddingX * 2;
-    const innerHeight = height - paddingY * 2;
-    const seriesData = people.map((person) => ({
-        person,
-        values: dateAxis.map((date) => dailyIndex.get(`${person.personKey}|${date}`)?.userMessageCount ?? 0),
-    }));
-    const maxValue = Math.max(1, ...seriesData.flatMap((series) => series.values));
-    const palette = CHART_PALETTE;
-    const xFor = (index) => paddingX + (index / Math.max(dateAxis.length - 1, 1)) * innerWidth;
-    const yFor = (value) => paddingY + (1 - value / maxValue) * innerHeight;
-    const ticks = [0, 0.25, 0.5, 0.75, 1].map((fraction) => {
-        const tickValue = Math.round(maxValue * fraction);
-        const y = paddingY + (1 - fraction) * innerHeight;
-        return `<g><line x1="${paddingX}" x2="${width - paddingX}" y1="${y}" y2="${y}" class="chart-grid" /><text x="8" y="${y + 4}" class="chart-axis">${formatNumber(tickValue)}</text></g>`;
-    }).join("");
-    const stride = Math.max(1, Math.floor(dateAxis.length / 7));
-    const xLabels = dateAxis
-        .map((date, index) => ({ date, index }))
-        .filter(({ index }) => index === dateAxis.length - 1 || index % stride === 0)
-        .map(({ date, index }) => {
-        const x = xFor(index);
-        return `<g><line x1="${x}" x2="${x}" y1="${height - paddingY}" y2="${height - paddingY + 6}" class="chart-axis-line" /><text x="${x}" y="${height - 4}" text-anchor="middle" class="chart-axis">${escapeHtml(date.slice(5))}</text></g>`;
-    })
-        .join("");
-    const seriesPaths = seriesData
-        .map((series, seriesIndex) => {
-        const color = palette[seriesIndex % palette.length];
-        const path = series.values
-            .map((value, index) => `${index === 0 ? "M" : "L"}${xFor(index).toFixed(2)} ${yFor(value).toFixed(2)}`)
-            .join(" ");
-        const points = series.values
-            .map((value, index) => `<circle cx="${xFor(index).toFixed(2)}" cy="${yFor(value).toFixed(2)}" r="3" fill="${color}"><title>${escapeHtml(series.person.personKey)} · ${escapeHtml(dateAxis[index])} · ${formatNumber(value)} 用户请求</title></circle>`)
-            .join("");
-        return `<g data-person="${escapeHtml(series.person.personKey)}"><path d="${path}" fill="none" stroke="${color}" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" />${points}</g>`;
-    })
-        .join("");
-    const legend = seriesData
-        .map((series, seriesIndex) => {
-        const color = palette[seriesIndex % palette.length];
-        return `<span class="legend-chip legend-toggle" data-person="${escapeHtml(series.person.personKey)}"><span class="legend-dot" style="background:${color}"></span>${escapeHtml(series.person.personKey)}</span>`;
-    })
-        .join("");
+    // x 复用共享 dateAxis：已对齐，无需并集。用 category x（索引 0..n-1 + 月-日标签），
+    // 每个人一条折线，缺失天沿用 0 计数。uPlot 原生 legend 全显示当前日各人值、点击 toggle 显隐。
+    const xs = dateAxis.map((_, index) => index);
+    const xLabels = dateAxis.map((date) => date.slice(5));
+    const seriesSpecs = [];
+    const columns = [];
+    const legendGroups = [];
+    people.forEach((person, index) => {
+        const color = CHART_PALETTE[index % CHART_PALETTE.length];
+        seriesSpecs.push({ label: person.personKey, stroke: color, width: 2 });
+        columns.push(dateAxis.map((date) => dailyIndex.get(`${person.personKey}|${date}`)?.userMessageCount ?? 0));
+        // 每人一条 series，图例一项即一个人名（小写）。
+        legendGroups.push({ label: person.personKey, color, seriesIdx: [index + 1] });
+    });
+    const spec = {
+        height: 320,
+        xType: "category",
+        xLabels,
+        yMin0: true,
+        series: seriesSpecs,
+        legendGroups,
+    };
+    const chart = (0, chart_assets_1.renderUplotChart)("chart-daily-requests", spec, [xs, ...columns]);
     return `
     <section class="panel chart-panel">
       <div class="panel-header">
@@ -201,14 +209,9 @@ function renderDailyUserRequestChart(people, dailyIndex, dateAxis) {
           <p class="eyebrow">Daily User Requests</p>
           <h2>每日用户请求数对比</h2>
         </div>
-        <p class="muted">基于每人 daily 汇总中的 userMessageCount（已剔除 tool_result 工具回填；sidechain 子 agent 提示保留）。点击图例人名可只高亮该人曲线。</p>
+        <p class="muted">基于每人 daily 汇总中的 userMessageCount（已剔除 tool_result 工具回填；sidechain 子 agent 提示保留）。悬停任意日期可在跟随 tooltip 看到各人请求数，点击图例人名可切换该人曲线显隐。</p>
       </div>
-      <div class="legend">${legend}</div>
-      <svg viewBox="0 0 ${width} ${height}" class="chart" role="img" aria-label="每日用户请求数对比">
-        ${ticks}
-        ${xLabels}
-        ${seriesPaths}
-      </svg>
+      ${chart}
     </section>
   `;
 }
@@ -281,41 +284,55 @@ function renderSevenDayCumulativeChart(people) {
     </section>
   `;
 }
-/** 把时间戳格式化成图表 X 轴用的本地「MM-DD HH:mm」短标签。 */
-function formatTickTime(t) {
-    const d = new Date(t);
-    const mm = String(d.getMonth() + 1).padStart(2, "0");
-    const dd = String(d.getDate()).padStart(2, "0");
-    const hh = String(d.getHours()).padStart(2, "0");
-    const mi = String(d.getMinutes()).padStart(2, "0");
-    return `${mm}-${dd} ${hh}:${mi}`;
-}
 /**
- * 用事件级 detail 行画出 5h 额度与 7d 周额度使用率的详细曲线。
+ * 用事件级 detail 行画出 5h 额度与 7d 周额度使用率的详细曲线（uPlot 渲染）。
  *
  * 与按天聚合的图不同，这里直接用每条 statusline 采样的真实时间戳，粒度最细，
  * 能看出每个人 5 小时额度在一天里的爬升与重置节奏，同时叠加 7 天周额度的走势。
- * X 轴是连续时间，Y 轴是百分比；同一个人 5h 用实线、7d 用虚线，共用颜色和 Y 轴。
+ * 各人时间戳不规则、彼此不对齐，先用 alignTimeSeries 取并集成统一 x 轴、缺失填 null；
+ * 同一个人 5h 用 CHART_PALETTE 实线、7d 用 SEVEN_DAY_PALETTE 对比色虚线，共用 Y 轴。
+ * 悬停由跟随 tooltip 显示当前位置各 series 的值（2D 吸附，尖峰按高度命中），点击静态图例 toggle 显隐。
  */
 function renderFiveHourUsageChart(people, detailRows) {
-    const series = people
+    const built = people
         .map((person, index) => {
         const personRows = detailRows
             .filter((row) => row.personKey === person.personKey)
             .map((row) => ({ t: new Date(row.timestamp).getTime(), five: row.usagePct, seven: row.sevenDayUsagePct }))
             .filter((point) => Number.isFinite(point.t))
             .sort((left, right) => left.t - right.t);
+        // uPlot 时间轴以秒为单位，这里把毫秒时间戳折算成秒。
         const fivePoints = personRows
             .filter((point) => point.five !== null)
-            .map((point) => ({ t: point.t, v: point.five }));
+            .map((point) => ({ t: Math.floor(point.t / 1000), v: point.five }));
         const sevenPoints = personRows
             .filter((point) => point.seven !== null)
-            .map((point) => ({ t: point.t, v: point.seven }));
+            .map((point) => ({ t: Math.floor(point.t / 1000), v: point.seven }));
         return { person, index, fivePoints, sevenPoints };
     })
         .filter((entry) => entry.fivePoints.length > 0 || entry.sevenPoints.length > 0);
-    const allPoints = series.flatMap((entry) => [...entry.fivePoints, ...entry.sevenPoints]);
-    if (allPoints.length === 0) {
+    // 把每个人的 5h / 7d 拆成独立 series，连同对应配色 spec 一起按顺序收集，再整体并集对齐。
+    // legendGroups 把同一个人的 5h + 7d series 索引归到一项，图例只显示一个人名、勾选联动两条线。
+    const seriesList = [];
+    const seriesSpecs = [];
+    const legendGroups = [];
+    for (const entry of built) {
+        const color = CHART_PALETTE[entry.index % CHART_PALETTE.length];
+        const sevenColor = SEVEN_DAY_PALETTE[entry.index % SEVEN_DAY_PALETTE.length];
+        const seriesIdx = [];
+        if (entry.fivePoints.length > 0) {
+            seriesList.push(entry.fivePoints);
+            seriesSpecs.push({ label: `${entry.person.personKey} · 5h`, stroke: color, width: 2 });
+            seriesIdx.push(seriesSpecs.length);
+        }
+        if (entry.sevenPoints.length > 0) {
+            seriesList.push(entry.sevenPoints);
+            seriesSpecs.push({ label: `${entry.person.personKey} · 7d`, stroke: sevenColor, dash: [5, 4], width: 2 });
+            seriesIdx.push(seriesSpecs.length);
+        }
+        legendGroups.push({ label: entry.person.personKey, color, seriesIdx });
+    }
+    if (seriesList.length === 0) {
         return `
       <section class="panel chart-panel">
         <div class="panel-header">
@@ -328,53 +345,16 @@ function renderFiveHourUsageChart(people, detailRows) {
       </section>
     `;
     }
-    const width = 920;
-    const height = 320;
-    const paddingX = 56;
-    const paddingY = 32;
-    const innerWidth = width - paddingX * 2;
-    const innerHeight = height - paddingY * 2;
-    const minT = Math.min(...allPoints.map((point) => point.t));
-    const maxT = Math.max(...allPoints.map((point) => point.t));
-    const maxValue = Math.max(1, ...allPoints.map((point) => point.v));
-    const spanT = maxT - minT;
-    const xFor = (t) => paddingX + (spanT === 0 ? 0.5 : (t - minT) / spanT) * innerWidth;
-    const yFor = (value) => paddingY + (1 - value / maxValue) * innerHeight;
-    const ticks = [0, 0.25, 0.5, 0.75, 1]
-        .map((fraction) => {
-        const tickValue = maxValue * fraction;
-        const y = paddingY + (1 - fraction) * innerHeight;
-        return `<g><line x1="${paddingX}" x2="${width - paddingX}" y1="${y}" y2="${y}" class="chart-grid" /><text x="8" y="${y + 4}" class="chart-axis">${tickValue.toFixed(1)}%</text></g>`;
-    })
-        .join("");
-    const labelCount = spanT === 0 ? 1 : 5;
-    const xLabels = Array.from({ length: labelCount + 1 }, (_, i) => minT + (spanT * i) / labelCount)
-        .map((t) => {
-        const x = xFor(t);
-        return `<g><line x1="${x}" x2="${x}" y1="${height - paddingY}" y2="${height - paddingY + 6}" class="chart-axis-line" /><text x="${x}" y="${height - 4}" text-anchor="middle" class="chart-axis">${escapeHtml(formatTickTime(t))}</text></g>`;
-    })
-        .join("");
-    const pathFor = (points) => points.map((point, pointIndex) => `${pointIndex === 0 ? "M" : "L"}${xFor(point.t).toFixed(2)} ${yFor(point.v).toFixed(2)}`).join(" ");
-    const seriesPaths = series
-        .map((entry) => {
-        const color = CHART_PALETTE[entry.index % CHART_PALETTE.length];
-        const sevenColor = SEVEN_DAY_PALETTE[entry.index % SEVEN_DAY_PALETTE.length];
-        const fivePath = entry.fivePoints.length > 0
-            ? `<path d="${pathFor(entry.fivePoints)}" fill="none" stroke="${color}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><title>${escapeHtml(entry.person.personKey)} · 5h</title></path>`
-            : "";
-        const sevenPath = entry.sevenPoints.length > 0
-            ? `<path d="${pathFor(entry.sevenPoints)}" fill="none" stroke="${sevenColor}" stroke-width="2" stroke-dasharray="5 4" stroke-linecap="round" stroke-linejoin="round"><title>${escapeHtml(entry.person.personKey)} · 7d</title></path>`
-            : "";
-        return `<g data-person="${escapeHtml(entry.person.personKey)}">${fivePath}${sevenPath}</g>`;
-    })
-        .join("");
-    const legend = series
-        .map((entry) => {
-        const color = CHART_PALETTE[entry.index % CHART_PALETTE.length];
-        const sevenColor = SEVEN_DAY_PALETTE[entry.index % SEVEN_DAY_PALETTE.length];
-        return `<span class="legend-chip legend-toggle" data-person="${escapeHtml(entry.person.personKey)}"><span class="legend-dot" style="background:${color}"></span><span class="legend-dot" style="background:${sevenColor}"></span>${escapeHtml(entry.person.personKey)}</span>`;
-    })
-        .join("");
+    const { xs, columns } = alignTimeSeries(seriesList);
+    const spec = {
+        height: 320,
+        xType: "time",
+        yUnit: "%",
+        yMin0: true,
+        series: seriesSpecs,
+        legendGroups,
+    };
+    const chart = (0, chart_assets_1.renderUplotChart)("chart-usage-detail", spec, [xs, ...columns]);
     return `
     <section class="panel chart-panel">
       <div class="panel-header">
@@ -382,18 +362,9 @@ function renderFiveHourUsageChart(people, detailRows) {
           <p class="eyebrow">Usage Detail</p>
           <h2>5h / 7d 使用率详细曲线</h2>
         </div>
-        <p class="muted">每条 statusline 采样的 5 小时额度（实线）与 7 天周额度（对比色虚线）使用率，按真实时间戳绘制、共用 Y 轴。点击图例人名可只高亮该人曲线。</p>
-      </div>
-      <div class="legend">
-        ${legend}
-        <span class="legend-chip"><span class="legend-line legend-line-solid"></span>5h 使用率（实线）</span>
-        <span class="legend-chip"><span class="legend-line legend-line-dashed"></span>7d 周使用量（对比色虚线）</span>
+        <p class="muted">每条 statusline 采样的 5 小时额度（实线）与 7 天周额度（对比色虚线）使用率，按真实时间戳绘制、共用 Y 轴。悬停任意位置可在跟随 tooltip 看到各人 5h/7d 当前值（尖峰把鼠标移到竖线顶端即可读到峰值），点击图例可切换显隐。</p>
       </div>
-      <svg viewBox="0 0 ${width} ${height}" class="chart" role="img" aria-label="5h / 7d 使用率详细曲线">
-        ${ticks}
-        ${xLabels}
-        ${seriesPaths}
-      </svg>
+      ${chart}
     </section>
   `;
 }
@@ -687,25 +658,6 @@ function buildAggregateDashboardHtml(detailRows, dailyRows, weeklyRows, generate
       .chart-grid { stroke: var(--grid); stroke-width: 1; }
       .chart-axis { fill: var(--muted); font-size: 11px; }
       .chart-axis-line { stroke: var(--grid); stroke-width: 1; }
-      .legend {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 10px 18px;
-        padding: 14px 24px 0;
-        color: var(--muted);
-        font-size: 13px;
-      }
-      .legend-chip { display: inline-flex; align-items: center; gap: 8px; }
-      .legend-toggle { cursor: pointer; user-select: none; transition: opacity 0.15s ease; }
-      .legend-toggle:hover { color: var(--text); }
-      .legend-toggle.is-active { color: var(--text); font-weight: 600; }
-      .legend-toggle.is-dimmed { opacity: 0.4; }
-      .legend-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
-      svg [data-person] { transition: opacity 0.15s ease; }
-      svg [data-person].is-dimmed { opacity: 0.1; }
-      svg [data-person].is-active { opacity: 1; }
-      .legend-line { display: inline-block; width: 22px; height: 0; border-top-width: 2px; border-top-style: solid; border-top-color: var(--muted); }
-      .legend-line-dashed { border-top-style: dashed; }
       .table-panel { margin-top: 22px; }
       .table-wrap { overflow: auto; padding: 16px 20px 22px; }
       table { width: 100%; border-collapse: collapse; min-width: 760px; }
@@ -739,6 +691,7 @@ function buildAggregateDashboardHtml(detailRows, dailyRows, weeklyRows, generate
         .panel-header { flex-direction: column; align-items: start; }
       }
     </style>
+    ${(0, chart_assets_1.uplotHeadAssets)()}
   </head>
   <body>
     <main class="shell">
@@ -793,26 +746,7 @@ function buildAggregateDashboardHtml(detailRows, dailyRows, weeklyRows, generate
       ${renderDailyMatrix(people, dailyIndex, dateAxis)}
       ${renderWeeklyTable(weeklyRows)}
     </main>
-    <script>
-      (function () {
-        // 点击图例里的人名：高亮该人在所有图表里的曲线，其余淡化；再次点击同名取消高亮。
-        var active = null;
-        function apply() {
-          document.querySelectorAll("[data-person]").forEach(function (el) {
-            el.classList.remove("is-active", "is-dimmed");
-            if (active === null) return;
-            el.classList.add(el.getAttribute("data-person") === active ? "is-active" : "is-dimmed");
-          });
-        }
-        document.querySelectorAll(".legend-toggle").forEach(function (chip) {
-          chip.addEventListener("click", function () {
-            var person = chip.getAttribute("data-person");
-            active = active === person ? null : person;
-            apply();
-          });
-        });
-      })();
-    </script>
+    ${(0, chart_assets_1.uplotBodyScripts)()}
   </body>
 </html>`;
 }