koishi-plugin-kkk 1.0.0

package/lib/ktr/template/statistics/components/chartPresets.js

@@ -0,0 +1,630 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buildDurationCurveOption = exports.buildBoxplotOption = exports.buildHeatmapOption = exports.buildPlatformHourOption = exports.buildSilenceBucketsOption = exports.buildWeekdayOption = exports.buildBucketOption = exports.buildWorkTypeLegend = exports.buildPlatformLegend = exports.buildTrendLineOption = exports.buildPlatformDonutOption = void 0;
+const chartTheme_1 = require("./chartTheme");
+const format_1 = require("./format");
+/**
+ * 平台分布环形图（群海报 / 全局海报共用）。
+ *
+ * 图内不放任何标签：平台名长短不一，外置标签很容易顶出画布被裁掉（Victory 那版就踩了这个坑）。
+ * 名称、次数、占比一律交给旁边的 HTML 明细列表，字号和排版都可控。
+ * @param data 各平台计数
+ * @param dark 是否深色主题
+ * @param size 画布宽高，环的尺寸与中心文字都按它换算
+ * @param centerCaption 环中心大字下方的说明；不传则只显示总数
+ */
+const buildPlatformDonutOption = (data, dark, size, centerCaption) => {
+    const palette = (0, chartTheme_1.getChartPalette)(dark);
+    const total = data.reduce((sum, item) => sum + item.count, 0);
+    // 环与中心文字都按画布短边缩放，同一份配置在整宽卡片和半宽卡片里都不会失衡
+    const short = Math.min(size.width, size.height);
+    const outer = Math.round(short * 0.36);
+    const inner = Math.round(outer * 0.66);
+    const numberSize = Math.round(short * 0.16);
+    return {
+        graphic: [
+            {
+                type: 'text',
+                left: 'center',
+                top: centerCaption ? '38%' : '44%',
+                style: {
+                    text: (0, format_1.formatCompact)(total),
+                    fontSize: numberSize,
+                    fontWeight: 'bold',
+                    fill: palette.text,
+                    fontFamily: chartTheme_1.CHART_FONT_FAMILY,
+                    textAlign: 'center'
+                }
+            },
+            ...(centerCaption
+                ? [
+                    {
+                        type: 'text',
+                        left: 'center',
+                        top: '62%',
+                        style: {
+                            text: centerCaption,
+                            fontSize: Math.round(numberSize * 0.3),
+                            fill: palette.textMuted,
+                            fontFamily: chartTheme_1.CHART_FONT_FAMILY,
+                            textAlign: 'center'
+                        }
+                    }
+                ]
+                : [])
+        ],
+        series: [
+            {
+                type: 'pie',
+                radius: [inner, outer],
+                center: ['50%', '50%'],
+                padAngle: 2,
+                itemStyle: { borderRadius: 8 },
+                label: { show: false },
+                labelLine: { show: false },
+                data: data.map((item) => ({
+                    name: chartTheme_1.PLATFORM_META[item.platform].name,
+                    value: item.count,
+                    itemStyle: { color: (0, chartTheme_1.platformColor)(item.platform, dark) }
+                }))
+            }
+        ]
+    };
+};
+exports.buildPlatformDonutOption = buildPlatformDonutOption;
+/**
+ * 近 N 天面积折线（群海报的趋势图、全局海报的总趋势共用）。
+ *
+ * 只给峰值那天打数据标签 —— 30 个点全标会糊成一片。
+ * `splitFrom` 用来把「老库回填导致的失真区段」单独画成灰色虚线：
+ * 该日之前的点走一条静音虚线系列，之后的点走正常的强调色系列，中间用 null 断开。
+ * @param trend 已补齐的按日序列（升序）
+ * @param dark 是否深色主题
+ * @param options.baseline 叠加一条水平基准虚线（如全局日均）时的取值
+ * @param options.baselineLabel 基准线右端的说明文字
+ * @param options.splitFrom 可信数据起始日；早于它的点会被画成灰色虚线
+ */
+const buildTrendLineOption = (trend, dark, options = {}) => {
+    const palette = (0, chartTheme_1.getChartPalette)(dark);
+    const { baseline, baselineLabel = '', splitFrom } = options;
+    const counts = trend.map((point) => point.count);
+    const peakIndex = counts.indexOf(Math.max(...counts));
+    // 失真区段只画到 splitFrom 前一天，正常区段从 splitFrom 开始，两者用 null 断开避免连线
+    const staleValues = trend.map((point) => (splitFrom && point.date < splitFrom ? point.count : null));
+    const freshValues = trend.map((point, index) => {
+        if (splitFrom && trend[index].date < splitFrom)
+            return null;
+        return { value: point.count, label: { show: index === peakIndex && point.count > 0 } };
+    });
+    const hasSplit = Boolean(splitFrom) && staleValues.some((value) => value !== null);
+    return {
+        // 左右留白都压到最小：海报宽度是写死的 1440，横向空间要尽量留给折线本体。
+        // 基准虚线的含义不挂 endLabel（那要占一百多像素横向留白），交给卡片下方的说明文字。
+        grid: { top: 56, right: 32, bottom: 88, left: 104 },
+        xAxis: {
+            type: 'category',
+            boundaryGap: false,
+            data: trend.map((point) => (0, format_1.formatDateShort)(point.date)),
+            axisLine: { lineStyle: { width: 2, color: palette.axisLine } },
+            axisTick: { show: false },
+            axisLabel: {
+                fontSize: 22,
+                rotate: trend.length > 12 ? 45 : 0,
+                color: palette.textMuted,
+                fontFamily: chartTheme_1.CHART_FONT_FAMILY
+            },
+            splitLine: { show: false }
+        },
+        yAxis: {
+            type: 'value',
+            name: '解析次数',
+            nameTextStyle: { fontSize: 24, color: palette.textMuted, fontFamily: chartTheme_1.CHART_FONT_FAMILY, align: 'right' },
+            axisLine: { show: false },
+            axisTick: { show: false },
+            axisLabel: { fontSize: 24, color: palette.textMuted, fontFamily: chartTheme_1.CHART_FONT_FAMILY },
+            splitLine: { lineStyle: { width: 1, color: palette.splitLine } }
+        },
+        series: [
+            // 失真区段：灰色虚线，不与正常段共用样式，读者一眼能看出「这段不一样」
+            ...(hasSplit
+                ? [
+                    {
+                        type: 'line',
+                        name: '数据不完整',
+                        silent: true,
+                        symbol: 'none',
+                        lineStyle: { width: 3, type: 'dashed', color: palette.accentAlt },
+                        data: staleValues
+                    }
+                ]
+                : []),
+            {
+                type: 'line',
+                name: '解析次数',
+                smooth: 0.35,
+                symbol: 'circle',
+                symbolSize: 10,
+                lineStyle: { width: 4, color: palette.accent },
+                itemStyle: { color: palette.accent },
+                areaStyle: {
+                    color: {
+                        type: 'linear',
+                        x: 0,
+                        y: 0,
+                        x2: 0,
+                        y2: 1,
+                        colorStops: [
+                            { offset: 0, color: (0, chartTheme_1.withAlpha)(palette.accent, 0.4) },
+                            { offset: 1, color: (0, chartTheme_1.withAlpha)(palette.accent, 0.02) }
+                        ]
+                    }
+                },
+                label: {
+                    show: false,
+                    position: 'top',
+                    fontSize: 24,
+                    color: palette.text,
+                    fontFamily: chartTheme_1.CHART_FONT_FAMILY,
+                    formatter: '{c} 次'
+                },
+                data: freshValues
+            },
+            ...(baseline !== undefined
+                ? [
+                    {
+                        type: 'line',
+                        name: baselineLabel || '基准',
+                        silent: true,
+                        symbol: 'none',
+                        lineStyle: { width: 2, type: 'dashed', color: palette.accentAlt },
+                        // 不在轴末端挂 endLabel：那要占掉一百多像素横向留白，含义交给卡片说明文字
+                        data: trend.map(() => baseline)
+                    }
+                ]
+                : [])
+        ]
+    };
+};
+exports.buildTrendLineOption = buildTrendLineOption;
+/** 平台图例的一行数据（HTML 侧渲染用） */
+const buildPlatformLegend = (data, dark) => {
+    const total = data.reduce((sum, item) => sum + item.count, 0);
+    return data.map((item) => {
+        const meta = chartTheme_1.PLATFORM_META[item.platform];
+        return {
+            key: item.platform,
+            name: meta.name,
+            nameEn: meta.nameEn,
+            logo: (0, chartTheme_1.platformLogo)(item.platform, dark),
+            color: (0, chartTheme_1.platformColor)(item.platform, dark),
+            count: item.count,
+            percent: (0, format_1.formatPercent)(item.count, total)
+        };
+    });
+};
+exports.buildPlatformLegend = buildPlatformLegend;
+/**
+ * 内容形态图例的一行数据。
+ * 全局海报传进来的是「平台 × 形态」的笛卡尔积，同一个形态会出现多次，这里按形态去重。
+ */
+const buildWorkTypeLegend = (data) => {
+    const seen = new Set();
+    const rows = [];
+    for (const item of data) {
+        if (seen.has(item.workType))
+            continue;
+        seen.add(item.workType);
+        rows.push({
+            key: item.workType,
+            label: chartTheme_1.WORK_TYPE_META[item.workType].label,
+            color: chartTheme_1.WORK_TYPE_META[item.workType].color,
+            count: item.count
+        });
+    }
+    return rows;
+};
+exports.buildWorkTypeLegend = buildWorkTypeLegend;
+/**
+ * 分桶直方图（群规模分布、群沉默分布共用）
+ * @param opts.yName y 轴名称
+ * @param opts.accent 柱色，默认用主强调色
+ */
+const buildBucketOption = (buckets, dark, opts = { yName: '数量' }) => {
+    const palette = (0, chartTheme_1.getChartPalette)(dark);
+    const color = opts.accent ?? palette.accent;
+    return {
+        grid: { top: 44, right: 20, bottom: 52, left: 76 },
+        xAxis: {
+            type: 'category',
+            data: buckets.map((bucket) => bucket.label),
+            axisLine: (0, chartTheme_1.axisLineStyle)(palette),
+            axisTick: { show: false },
+            axisLabel: (0, chartTheme_1.axisLabelStyle)(palette, 22)
+        },
+        yAxis: {
+            type: 'value',
+            name: opts.yName,
+            nameTextStyle: { fontSize: 20, color: palette.textMuted, fontFamily: chartTheme_1.CHART_FONT_FAMILY, align: 'right' },
+            axisLine: { show: false },
+            axisTick: { show: false },
+            axisLabel: (0, chartTheme_1.axisLabelStyle)(palette, 20),
+            splitLine: (0, chartTheme_1.splitLineStyle)(palette)
+        },
+        series: [
+            {
+                type: 'bar',
+                barWidth: 44,
+                itemStyle: { borderRadius: [10, 10, 0, 0], color: (0, chartTheme_1.withAlpha)(color, 0.85) },
+                label: { show: true, position: 'top', fontSize: 22, color: palette.text, fontFamily: chartTheme_1.CHART_FONT_FAMILY, formatter: '{c}' },
+                data: buckets.map((bucket) => bucket.count)
+            }
+        ]
+    };
+};
+exports.buildBucketOption = buildBucketOption;
+/**
+ * 周内分布：周一到周日。
+ * 周末两根柱子单独降饱和 —— 「这个群周末更活跃还是更冷清」是这张图唯一的看点，
+ * 让它不用读标签就能看出来。
+ */
+const buildWeekdayOption = (values, dark, yName = '日均解析次数') => {
+    const palette = (0, chartTheme_1.getChartPalette)(dark);
+    const active = values.filter((value) => value > 0);
+    const average = active.length > 0 ? active.reduce((sum, value) => sum + value, 0) / active.length : 0;
+    return {
+        grid: { top: 52, right: 20, bottom: 52, left: 84 },
+        xAxis: {
+            type: 'category',
+            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
+            axisLine: (0, chartTheme_1.axisLineStyle)(palette),
+            axisTick: { show: false },
+            axisLabel: (0, chartTheme_1.axisLabelStyle)(palette, 22)
+        },
+        yAxis: {
+            type: 'value',
+            name: yName,
+            nameTextStyle: { fontSize: 20, color: palette.textMuted, fontFamily: chartTheme_1.CHART_FONT_FAMILY, align: 'right' },
+            axisLine: { show: false },
+            axisTick: { show: false },
+            axisLabel: (0, chartTheme_1.axisLabelStyle)(palette, 20),
+            splitLine: (0, chartTheme_1.splitLineStyle)(palette)
+        },
+        series: [
+            {
+                type: 'bar',
+                // 比其它柱状图粗一档：七根柱子在宽卡里排开，太细会显得空
+                barWidth: 56,
+                itemStyle: { borderRadius: [10, 10, 0, 0] },
+                label: { show: true, position: 'top', fontSize: 22, color: palette.text, fontFamily: chartTheme_1.CHART_FONT_FAMILY, formatter: '{c}' },
+                // 高于周均的实心、低于周均的淡一档 —— 不用读数字就能看出这个群周内什么节奏
+                data: values.map((value) => ({
+                    value,
+                    itemStyle: { color: (0, chartTheme_1.withAlpha)(palette.accent, value >= average ? 0.92 : 0.4) }
+                }))
+            },
+            {
+                // 周均基准线。用一条静音 line 系列画，避免为了 markLine 再注册一个组件
+                type: 'line',
+                silent: true,
+                symbol: 'none',
+                lineStyle: { width: 2, type: 'dashed', color: palette.accentAlt },
+                data: values.map(() => average)
+            }
+        ]
+    };
+};
+exports.buildWeekdayOption = buildWeekdayOption;
+/**
+ * 群沉默分布：按「最后一次解析距今多久」分档的群数。
+ *
+ * 柱状图对这种**有序分档的计数分布**是正确选择（就是一张直方图），
+ * 之前的问题不在图表类型而在可读性：五档宽窄差了几十倍（1 天 / 7 天 / 23 天 / 60 天 / 无限），
+ * 光看柱子高低会把「档宽」误读成「密度」。所以这里把三档语义用颜色点出来，
+ * 并把每档的群数换成「群数 + 占比」，读者不用自己去除总数。
+ * @param buckets 各档群数（从新到旧）
+ * @param dark 是否深色主题
+ */
+const buildSilenceBucketsOption = (buckets, dark) => {
+    const palette = (0, chartTheme_1.getChartPalette)(dark);
+    const total = buckets.reduce((sum, bucket) => sum + bucket.count, 0);
+    // 三个语义层：还活着 / 在冷却 / 已经沉睡。配色从强调色一路褪到灰
+    const tierOf = (index) => (index <= 1 ? (0, chartTheme_1.withAlpha)('#22c55e', 0.85) : index === 2 ? (0, chartTheme_1.withAlpha)('#f59e0b', 0.8) : '#a1a1aa');
+    return {
+        grid: { top: 44, right: 20, bottom: 52, left: 76 },
+        xAxis: {
+            type: 'category',
+            data: buckets.map((bucket) => bucket.label),
+            axisLine: (0, chartTheme_1.axisLineStyle)(palette),
+            axisTick: { show: false },
+            axisLabel: { ...(0, chartTheme_1.axisLabelStyle)(palette, 20), interval: 0 }
+        },
+        yAxis: {
+            type: 'value',
+            name: '群数',
+            nameTextStyle: { fontSize: 20, color: palette.textMuted, fontFamily: chartTheme_1.CHART_FONT_FAMILY, align: 'right' },
+            axisLine: { show: false },
+            axisTick: { show: false },
+            axisLabel: (0, chartTheme_1.axisLabelStyle)(palette, 20),
+            splitLine: (0, chartTheme_1.splitLineStyle)(palette)
+        },
+        series: [
+            {
+                type: 'bar',
+                barWidth: 46,
+                itemStyle: { borderRadius: [10, 10, 0, 0] },
+                label: {
+                    show: true,
+                    position: 'top',
+                    fontSize: 20,
+                    lineHeight: 24,
+                    color: palette.text,
+                    fontFamily: chartTheme_1.CHART_FONT_FAMILY,
+                    // 两行：群数 + 占比。占比是关键，否则读者得自己心算「52 占 128 的多少」
+                    formatter: (params) => {
+                        const count = buckets[params.dataIndex].count;
+                        const percent = total > 0 ? Math.round((count / total) * 100) : 0;
+                        return `${count}
+${percent}%`;
+                    }
+                },
+                data: buckets.map((bucket, index) => ({ value: bucket.count, itemStyle: { color: tierOf(index) } }))
+            }
+        ]
+    };
+};
+exports.buildSilenceBucketsOption = buildSilenceBucketsOption;
+/**
+ * 平台 × 时段：24 小时堆叠柱。
+ * 和单看总时段的极坐标图回答的不是同一个问题 —— 这张看的是「几点刷哪个平台」。
+ */
+const buildPlatformHourOption = (series, dark) => {
+    const palette = (0, chartTheme_1.getChartPalette)(dark);
+    return {
+        grid: { top: 24, right: 20, bottom: 52, left: 76 },
+        xAxis: {
+            type: 'category',
+            data: Array.from({ length: 24 }, (_, hour) => `${hour}`),
+            axisLine: (0, chartTheme_1.axisLineStyle)(palette),
+            axisTick: { show: false },
+            // 24 个刻度全画会糊，每 3 小时标一个
+            axisLabel: { ...(0, chartTheme_1.axisLabelStyle)(palette, 22), interval: 2 }
+        },
+        yAxis: {
+            type: 'value',
+            axisLine: { show: false },
+            axisTick: { show: false },
+            axisLabel: (0, chartTheme_1.axisLabelStyle)(palette, 20),
+            splitLine: (0, chartTheme_1.splitLineStyle)(palette)
+        },
+        series: series.map((item) => ({
+            type: 'bar',
+            stack: 'hours',
+            name: chartTheme_1.PLATFORM_META[item.platform].name,
+            itemStyle: { color: (0, chartTheme_1.platformColor)(item.platform, dark) },
+            data: item.values
+        }))
+    };
+};
+exports.buildPlatformHourOption = buildPlatformHourOption;
+/**
+ * 二维分档热力图。
+ *
+ * 替代原来的散点图：散点的横轴是「用过几个群」这种低基数整数，
+ * 几百个点会叠成几根竖条，重叠部分完全看不出密度；
+ * 分档成矩阵之后，色深直接编码人数，「大部分人落在哪一格」一眼就能读出来。
+ * 图内不放轴名 —— 横向空间要留给格子（见 `BuildHeatmapOption` 的留白说明）。
+ * @param data 分档矩阵
+ * @param dark 是否深色主题
+ */
+const buildHeatmapOption = (data, dark) => {
+    const palette = (0, chartTheme_1.getChartPalette)(dark);
+    const max = data.max > 0 ? data.max : 1;
+    return {
+        grid: { top: 16, right: 16, bottom: 56, left: 128 },
+        // ECharts 的 heatmap 强制要求配 visualMap（不配会直接抛 "Heatmap must use with visualMap"），
+        // 所以色阶只能走它，不能逐格写 itemStyle.color。
+        // show 关掉：图例本身占竖向空间，而格子里的数字已经表达了量级。
+        visualMap: {
+            type: 'continuous',
+            min: 0,
+            max,
+            show: false,
+            inRange: {
+                // 单色阶：最淡那档留一点底色，空格子和「有但很少」才区分得开
+                color: [(0, chartTheme_1.withAlpha)(palette.accent, 0.06), palette.accent]
+            }
+        },
+        xAxis: {
+            type: 'category',
+            data: data.xLabels,
+            axisLine: { show: false },
+            axisTick: { show: false },
+            // interval: 0 强制把每一档都标出来；默认的 'auto' 会隔一个藏一个，矩阵就对不上号了
+            axisLabel: { ...(0, chartTheme_1.axisLabelStyle)(palette, 20), interval: 0 },
+            splitArea: { show: false }
+        },
+        yAxis: {
+            type: 'category',
+            data: data.yLabels,
+            axisLine: { show: false },
+            axisTick: { show: false },
+            axisLabel: { ...(0, chartTheme_1.axisLabelStyle)(palette, 20), interval: 0 },
+            splitArea: { show: false }
+        },
+        series: [
+            {
+                type: 'heatmap',
+                data: data.cells.map(([x, y, value]) => [x, y, value]),
+                label: {
+                    show: true,
+                    fontSize: 20,
+                    fontFamily: chartTheme_1.CHART_FONT_FAMILY,
+                    // 深底子上的数字翻白，否则读不出来
+                    color: (params) => (params.value[2] / max > 0.55 ? palette.textOnColor : palette.text),
+                    formatter: (params) => (params.value[2] > 0 ? String(params.value[2]) : '')
+                },
+                itemStyle: { borderColor: 'transparent', borderWidth: 4, borderRadius: 8 }
+            }
+        ]
+    };
+};
+exports.buildHeatmapOption = buildHeatmapOption;
+/**
+ * 分档箱线图。
+ *
+ * 替代原来的散点图：散点只能看出「人多的大群解析次数也多」这种粗糙印象，
+ * 箱线能同时给出每个档位的中位数和离散程度 —— 「人多是不是就一定刷得多」
+ * 「哪个档位的群差异最大」这两件事，只有箱线读得出来。
+ * @param boxes 各档位的五数概括
+ * @param dark 是否深色主题
+ * @param yName 纵轴名
+ */
+const buildBoxplotOption = (boxes, dark, yName) => {
+    const palette = (0, chartTheme_1.getChartPalette)(dark);
+    return {
+        grid: { top: 40, right: 24, bottom: 64, left: 88 },
+        xAxis: {
+            type: 'category',
+            // 群数用紧凑格式（12800 → 1.2w）并去掉「个」，否则五位数时五个标签会挤成一团：
+            // 「3100 个群」×5 在 520px 的绘图区里放不下，实测会互相压字。
+            data: boxes.map((item) => `${item.label}\n${(0, format_1.formatCompact)(item.count)}群`),
+            axisLine: (0, chartTheme_1.axisLineStyle)(palette),
+            axisTick: { show: false },
+            // interval: 0 强制把每一档都标出来；默认的 'auto' 会隔一个藏一个，读者根本对不上箱体
+            axisLabel: { ...(0, chartTheme_1.axisLabelStyle)(palette, 20), lineHeight: 26, interval: 0 }
+        },
+        yAxis: {
+            type: 'value',
+            name: yName,
+            nameTextStyle: { fontSize: 20, color: palette.textMuted, fontFamily: chartTheme_1.CHART_FONT_FAMILY, align: 'right' },
+            axisLine: { show: false },
+            axisTick: { show: false },
+            axisLabel: (0, chartTheme_1.axisLabelStyle)(palette, 20),
+            splitLine: (0, chartTheme_1.splitLineStyle)(palette)
+        },
+        series: [
+            {
+                type: 'boxplot',
+                boxWidth: [18, 52],
+                itemStyle: {
+                    color: (0, chartTheme_1.withAlpha)(palette.accent, 0.3),
+                    borderColor: palette.accent,
+                    borderWidth: 3
+                },
+                data: boxes.map((item) => item.box)
+            },
+            {
+                // 用一个不可见的散点系列把中位数标出来。
+                // boxplot 自己不渲染 label —— series 级和逐项两种写法在 SSR 出的 SVG 里都没有文本节点（实测），
+                // 只能借散点把标注「挂」到中位数坐标上。
+                type: 'scatter',
+                symbolSize: 1,
+                silent: true,
+                itemStyle: { color: 'transparent' },
+                data: boxes.map((item, index) => [index, item.box[2]]),
+                label: {
+                    show: true,
+                    position: 'top',
+                    distance: 8,
+                    fontSize: 20,
+                    fontWeight: 'bold',
+                    color: palette.text,
+                    fontFamily: chartTheme_1.CHART_FONT_FAMILY,
+                    formatter: (params) => String(params.value[1])
+                }
+            }
+        ]
+    };
+};
+exports.buildBoxplotOption = buildBoxplotOption;
+/**
+ * 解析耗时的累计曲线：横轴是「耗时上限」，纵轴是「有多少比例的解析在这个时间内跑完」。
+ *
+ * 之前这里是张双轴帕累托图（左轴次数 + 右轴累计占比），实测读不懂，原因有三个：
+ * 1. 两条线刻度量级完全不同却会交叉，读者本能地想去比较两条线，但这个比较没有意义；
+ * 2. 两个轴名都是灰色，图上没有任何线索说明哪条线归哪个轴；
+ * 3. 累计值要读懂，得先知道「它对应的是 x 档的上界」，而这层信息图上根本没写。
+ *
+ * 换成单轴累计曲线之后读法变成字面意思：横轴看「≤5s」、纵轴读「74%」，
+ * 就是「74% 的解析在 5 秒内跑完」。曲线越陡，说明解析量越集中在这一段耗时里，
+ * 所以分布形状并没有丢，只是换了个更直接的表达。
+ * @param data 分档数据（桶必须按耗时从小到大排好）
+ * @param dark 是否深色主题
+ */
+const buildDurationCurveOption = (data, dark) => {
+    const palette = (0, chartTheme_1.getChartPalette)(dark);
+    const total = data.buckets.reduce((sum, bucket) => sum + bucket.count, 0);
+    let running = 0;
+    const cumulative = data.buckets.map((bucket) => {
+        running += bucket.count;
+        return total > 0 ? Number(((running / total) * 100).toFixed(1)) : 0;
+    });
+    // 横轴用桶自带的累计口径标签（「≤5s」）。档位会在 core 侧按数据裁掉两端，
+    // 所以桶数不固定，绝不能按 index 去映射。
+    const labels = data.buckets.map((bucket) => bucket.upper);
+    return {
+        grid: { top: 56, right: 32, bottom: 56, left: 80 },
+        xAxis: {
+            type: 'category',
+            boundaryGap: false,
+            data: labels,
+            axisLine: (0, chartTheme_1.axisLineStyle)(palette),
+            axisTick: { show: false },
+            axisLabel: { ...(0, chartTheme_1.axisLabelStyle)(palette, 20), interval: 0 }
+        },
+        yAxis: {
+            type: 'value',
+            min: 0,
+            max: 100,
+            name: '累计占比',
+            nameTextStyle: { fontSize: 20, color: palette.textMuted, fontFamily: chartTheme_1.CHART_FONT_FAMILY, align: 'right' },
+            axisLine: { show: false },
+            axisTick: { show: false },
+            axisLabel: { ...(0, chartTheme_1.axisLabelStyle)(palette, 20), formatter: '{value}%' },
+            splitLine: (0, chartTheme_1.splitLineStyle)(palette)
+        },
+        series: [
+            {
+                type: 'line',
+                // 分桶数据画折线而不是平滑曲线：平滑会暗示「档与档之间存在精确的中间值」，那是编出来的
+                smooth: false,
+                symbol: 'circle',
+                symbolSize: 10,
+                lineStyle: { width: 4, color: palette.accent },
+                itemStyle: { color: palette.accent },
+                areaStyle: {
+                    color: {
+                        type: 'linear',
+                        x: 0,
+                        y: 0,
+                        x2: 0,
+                        y2: 1,
+                        colorStops: [
+                            { offset: 0, color: (0, chartTheme_1.withAlpha)(palette.accent, 0.32) },
+                            { offset: 1, color: (0, chartTheme_1.withAlpha)(palette.accent, 0.02) }
+                        ]
+                    }
+                },
+                label: {
+                    show: true,
+                    position: 'top',
+                    fontSize: 20,
+                    color: palette.text,
+                    fontFamily: chartTheme_1.CHART_FONT_FAMILY,
+                    // 每点都标：这张图要的就是「在某个耗时之前完成了多少」，不标数字等于没读
+                    formatter: (params) => `${params.value}%`
+                },
+                data: cumulative
+            },
+            // 50% / 90% 两条参考线：一眼看出「一半 / 九成的解析落在哪一档之前」
+            ...[50, 90].map((threshold) => ({
+                type: 'line',
+                silent: true,
+                symbol: 'none',
+                lineStyle: { width: 2, type: 'dashed', color: palette.accentAlt },
+                data: labels.map(() => threshold)
+            }))
+        ]
+    };
+};
+exports.buildDurationCurveOption = buildDurationCurveOption;