FamilyBook/app/chart.php

<?php
/**
 * 折线图（v24 用户 2026-10-03 第 8 条）—— **服务端画 SVG**，零依赖。
 *
 * 用户原话：「把这种变化，每个账目的金额变化，还有总金额的变化，在账本列表上面，
 *            画出一个图，折线图这样的，这样就能清晰的看到账户的金额变化。」
 *
 * 为什么不用 Chart.js / ECharts：
 *   · 这个项目是**零依赖**的（没有 Composer，也没有前端构建）——
 *     为两张小图引一个几百 KB 的图表库、再配一个 CDN（线上未必连得上），
 *     代价和风险都不成比例；
 *   · 折线图本来就是一个 polyline，SVG 手写十几行就够；
 *   · 服务端画 = 没有 JS 也能看见（打印、禁用 JS 的场景都在）。
 *
 * 用法：
 *   $ckSeries = [['date'=>'2025-01-01','cents'=>123456], …];
 *   $ckLabel  = '招商银行';
 *   $ckKind   = 'asset';   // 'asset' 红 / 'debt' 绿（**A 股口径：涨红跌绿**）
 *   $ckWidth  = 260;
 *   echo chart_line($ckSeries, $ckLabel, $ckKind, $ckWidth);
 *
 * ⚠️ 颜色按**中式财务习惯**：金额变多 = 红，变少 = 绿（与 A 股一致）。
 *    这是项目里已经定下的口径（见 Ledger 的 led-asset/led-debt 配色），
 *    改成欧美口径（涨绿跌红）会让这个页面和账目表对不上。
 */

/**
 * 把一串「日期 → 分值」画成一条折线。
 *
 * @param array  $series ['date'=>'Y-m-d','cents'=>int] 列表，按时间正序；空数组返回 ''
 * @param string $label  图例上的名字
 * @param string $kind   'asset' | 'debt'（只影响配色）
 * @param int    $width  画布宽（高度按 3:1 推）
 * @param bool   $showVal 是否在两端标出金额
 * @return string SVG（可直接 echo）
 */
function chart_line(array $series, string $label, string $kind = 'asset', int $width = 260, bool $showVal = true): string
{
    $pts = [];
    foreach ($series as $p) {
        // ⚠️ 取值的键要兼容两种数据源（这里曾是真 bug 的现场）：
        //    · entrySeries() / 盘点历史 → 'cents'
        //    · Ledger::timeline()      → 'net'（净资产）/ 'asset' / 'debt'
        //    只认 'cents' 的话，**总资产图会把每个点都读成 0** —— 图上线是一条
        //    贴着 0 的平线，看起来像"数据全是 0"（用户 2026-10-04 第 12 批 #5
        //    原话：「上面那个图，如果是总资产的变化，那么不应该是 0 啊」）。
        $v = $p['cents'] ?? $p['net'] ?? $p['asset'] ?? 0;
        $pts[] = ['d' => (string)($p['date'] ?? ''), 'v' => (int)$v];
    }
    if (!$pts) {
        return '';
    }

    $w = max(120, $width);
    $h = (int)round($w / 3.2);
    // 内边距：左边留给"最高/最低"标签，下边留给日期，上边留给数值标
    $padL = 6; $padR = 6; $padT = 14; $padB = 16;
    $iw = $w - $padL - $padR;
    $ih = $h - $padT - $padB;

    $vals = array_column($pts, 'v');
    $min  = min($vals);
    $max  = max($vals);
    // ⚠️ 只有一个点、或所有值相同 → max==min，除零。
    //    此时把线画在**中间**（比贴底好：贴底看起来像"跌到 0 了"）。
    $span = $max - $min;
    $flat = $span <= 0;
    if ($flat) {
        $span = 1;
    }

    $n = count($pts);
    $xy = [];
    foreach ($pts as $i => $p) {
        $x = $n === 1 ? ($padL + $iw / 2) : ($padL + $iw * $i / ($n - 1));
        $ratio = $flat ? 0.5 : (($p['v'] - $min) / $span);
        $y = $padT + $ih * (1 - $ratio);
        $xy[] = [round($x, 2), round($y, 2)];
    }

    $isDebt = $kind === 'debt';
    // 中式财务口径：资产涨=红、负债涨=绿（负债变多是"好"的方向相反，同样用绿表示"更多")
    $stroke = $isDebt ? '#1F7A4D' : '#B0342C';
    $fill   = $isDebt ? 'rgba(31,122,77,.10)' : 'rgba(176,52,44,.10)';

    $poly = [];
    foreach ($xy as $p) {
        $poly[] = $p[0] . ',' . $p[1];
    }
    $polyStr = implode(' ', $poly);

    // 面积：从线走一遍再回到基线 —— 让"变化"比一条细线更醒目
    $areaStr = '';
    if ($n > 1) {
        $base = $padT + $ih;
        $areaStr = $padL . ',' . $base . ' ' . $polyStr . ' '
                 . ($padL + $iw) . ',' . $base;
    }

    $out = '<svg class="ck-svg" viewBox="0 0 ' . $w . ' ' . $h . '" width="100%" height="' . $h . '"'
         . ' role="img" aria-label="' . e($label) . ' 金额变化"'
         . ' xmlns="http://www.w3.org/2000/svg">';
    // 基线（0 或最低值那一条）—— 让图有个水平参照
    $out .= '<line x1="' . $padL . '" y1="' . ($padT + $ih) . '" x2="' . ($padL + $iw) . '" y2="' . ($padT + $ih)
          . '" stroke="currentColor" stroke-opacity=".18" stroke-width="1"/>';
    if ($areaStr !== '') {
        $out .= '<polygon points="' . $areaStr . '" fill="' . $fill . '" stroke="none"/>';
    }
    if ($n === 1) {
        $out .= '<circle cx="' . $xy[0][0] . '" cy="' . $xy[0][1] . '" r="3" fill="' . $stroke . '"/>';
    } else {
        $out .= '<polyline points="' . $polyStr . '" fill="none" stroke="' . $stroke . '"'
              . ' stroke-width="2" stroke-linejoin="round" stroke-linecap="round"/>';
        // 每个盘点点一个小圆点：有几处转折要看得出来
        foreach ($xy as $p) {
            $out .= '<circle cx="' . $p[0] . '" cy="' . $p[1] . '" r="2.4" fill="#fff" stroke="' . $stroke . '" stroke-width="1.6"/>';
        }
    }
    if ($showVal && $n > 0) {
        // 首尾各标一个数值：光看形状不知道"多少"
        $first = $pts[0];
        $last  = $pts[$n - 1];
        $fy = max(9, $xy[0][1] - 6);
        $ly = max(9, $xy[$n - 1][1] - 6);
        $out .= '<text x="' . $padL . '" y="' . $fy . '" font-size="9" fill="currentColor" fill-opacity=".65">'
              . e(\App\Ledger::money($first['v'])) . '</text>';
        if ($n > 1) {
            $out .= '<text x="' . ($padL + $iw) . '" y="' . $ly . '" font-size="9" text-anchor="end"'
                  . ' fill="' . $stroke . '">' . e(\App\Ledger::money($last['v'])) . '</text>';
        }
    }
    // 日期：首尾各一个（中间的点太密，标了反而糊）
    $out .= '<text x="' . $padL . '" y="' . ($h - 4) . '" font-size="9" fill="currentColor" fill-opacity=".55">'
          . e((string)$pts[0]['d']) . '</text>';
    if ($n > 1) {
        $out .= '<text x="' . ($padL + $iw) . '" y="' . ($h - 4) . '" font-size="9" text-anchor="end"'
              . ' fill="currentColor" fill-opacity=".55">' . e((string)$pts[$n - 1]['d']) . '</text>';
    }
    $out .= '</svg>';
    return $out;
}
/**
 * **多条线**的折线图（v24 第 11 批 #7）。
 *
 * 用户原话：「图下面的条目不用显示详情，只需要显示每个账目的颜色，
 *            就是说哪个颜色代表哪个账目，就可以了。」
 *
 * 所以把原来"每条账目一张小图"合并成**一张图**：每条账目一条线、各自一个颜色，
 * 颜色由图例给出（Ledger::legendColor()）。这样一眼能比较"哪条在涨、哪条在跌"，
 * 而不是逐张小图去脑补 —— 那是用户嫌"显示详情"没必要的真正原因。
 *
 * ⚠️ 时间轴取所有曲线日期的**并集**，每条线在自己的日期上有值、
 *    没有的日期就"沿用上一次的值"（阶梯式），否则线会断成一段段虚线。
 *    这与 Ledger::timeline() 的口径一致：金额是"状态量"，不是"发生量"。
 *
 * @param array $charts Ledger::charts() 的返回值：[['entry'=>…, 'color'=>…, 'series'=>…], …]
 * @param int   $width  画布宽
 * @return string SVG（无可画内容时返回 ''）
 */
function chart_multi(array $charts, int $width = 900): string
{
    if (!$charts) {
        return '';
    }
    // ---- 时间轴：所有日期的并集（升序）----
    $dateSet = [];
    foreach ($charts as $ch) {
        foreach ((array)($ch['series'] ?? []) as $p) {
            $d = (string)($p['date'] ?? '');
            if ($d !== '') { $dateSet[$d] = true; }
        }
    }
    $dates = array_keys($dateSet);
    sort($dates);
    $n = count($dates);
    if ($n === 0) {
        return '';
    }

    // ---- 值域：所有曲线所有点的 min/max（含 0，让"从 0 涨起来"看得出来）----
    $vals = [0];
    foreach ($charts as $ch) {
        foreach ((array)($ch['series'] ?? []) as $p) {
            $vals[] = (int)($p['cents'] ?? 0);
        }
    }
    $min = min($vals); $max = max($vals);
    $span = $max - $min;
    if ($span <= 0) { $span = 1; }

    $w = max(200, $width);
    $h = (int)round($w / 3.6);
    $padL = 8; $padR = 8; $padT = 16; $padB = 18;
    $iw = $w - $padL - $padR;
    $ih = $h - $padT - $padB;

    $idxOf = array_flip($dates);   // 日期 => 横轴序号

    $out = '<svg class="ck-svg" viewBox="0 0 ' . $w . ' ' . $h . '" width="100%" height="' . $h . '"'
         . ' role="img" aria-label="各账目金额变化" xmlns="http://www.w3.org/2000/svg">';
    // 底板与基线
    $out .= '<line x1="' . $padL . '" y1="' . ($padT + $ih) . '" x2="' . ($padL + $iw) . '"'
          . ' y2="' . ($padT + $ih) . '" stroke="currentColor" stroke-opacity=".18" stroke-width="1"/>';

    foreach ($charts as $ch) {
        $series = (array)($ch['series'] ?? []);
        if (!$series) { continue; }
        $color = (string)($ch['color'] ?? '#B0342C');
        // v24 第 23 批 用户第 2 条：给每条线标上**它属于哪个类别**。
        // ⚠️ 标在服务端（而不是让前端去认图例文字）：图例上的名字是
        //    `$en['title']`（用户自己输入的，可能重复、可能含空格），
        //    拿它当筛选键迟早对不上；类别 key 是封闭枚举，稳定。
        // ⚠️ 这是纯粹的**标注**，线上图画法一字未改 —— 同一份数据多次渲染要完全一致，
        //    所以属性值只允许是 kind 本身，不能拼时间戳之类会让输出漂移的东西。
        $ck = (string)(($ch['entry']['kind'] ?? ''));

        // 把每个日期上的值铺齐（沿用上一次），再转成坐标
        $pts = [];
        $last = null;
        foreach ($dates as $d) {
            // 取"这一天或之前最后一次的值"（状态量口径，与 timeline 一致）
            foreach ($series as $p) {
                if ((string)($p['date'] ?? '') <= $d) { $last = (int)($p['cents'] ?? 0); }
                else { break; }
            }
            if ($last === null) { continue; }   // 这条线还没开始（创建日之前）

            $i = $idxOf[$d];
            $x = $n === 1 ? ($padL + $iw / 2) : ($padL + $iw * $i / ($n - 1));
            $ratio = ($last - $min) / $span;
            $y = $padT + $ih * (1 - $ratio);
            $pts[] = [round($x, 2), round($y, 2)];
        }
        if (!$pts) { continue; }
        // v24 第 23 批 用户第 2 条：整条线包一个 <g>，把"这条线属于哪个类别"写在上面。
        // 前端筛选时按 `[data-ck-line]` 显隐，**不动几何**（几何一变，图就看着"跳"了）。
        // ⚠️ 只在有 kind 时才包 —— 拼出 `data-ck-line=""` 会让"选中空类别"的
        //    选择器意外命中所有线（下一次改这段的人很容易踩）。
        $open  = $ck !== '' ? '<g data-ck-line="' . e($ck) . '">' : '';
        $close = $ck !== '' ? '</g>' : '';

        if (count($pts) === 1) {
            $out .= $open . '<circle cx="' . $pts[0][0] . '" cy="' . $pts[0][1] . '" r="3" fill="' . $color . '"/>' . $close;
        } else {
            $poly = [];
            foreach ($pts as $p) { $poly[] = $p[0] . ',' . $p[1]; }
            $out .= $open . '<polyline points="' . implode(' ', $poly) . '" fill="none" stroke="' . $color . '"'
                  . ' stroke-width="2" stroke-linejoin="round" stroke-linecap="round"/>';
            // 每段转折点一个小点：有几个盘要点一眼看得出
            foreach ($pts as $p) {
                $out .= '<circle cx="' . $p[0] . '" cy="' . $p[1] . '" r="2.2" fill="#fff"'
                      . ' stroke="' . $color . '" stroke-width="1.5"/>';
            }
            $out .= $close;
        }
    }

    // 首尾日期（中间太密，标了反糊）
    $out .= '<text x="' . $padL . '" y="' . ($h - 5) . '" font-size="10" fill="currentColor"'
          . ' fill-opacity=".55">' . e($dates[0]) . '</text>';
    if ($n > 1) {
        $out .= '<text x="' . ($padL + $iw) . '" y="' . ($h - 5) . '" font-size="10" text-anchor="end"'
              . ' fill="currentColor" fill-opacity=".55">' . e($dates[$n - 1]) . '</text>';
    }
    // 右上角标一下最高/最低，否则不知道纵轴量级
    $out .= '<text x="' . ($padL + $iw) . '" y="11" font-size="10" text-anchor="end"'
          . ' fill="currentColor" fill-opacity=".6">' . e(\App\Ledger::money($max))
          . ' / ' . e(\App\Ledger::money($min)) . '</text>';
    $out .= '</svg>';
    return $out;
}