From 2a38778fa370ff1137e153dbe9aa2b28800cfcd9 Mon Sep 17 00:00:00 2001 From: R524809 Date: Wed, 9 Sep 2026 15:31:05 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E5=9B=BE=E7=89=87?= =?UTF-8?q?=E5=90=88=E5=B9=B6=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- CLAUDE.md | 2 +- css/style.css | 189 +++++++++++++++++- data/ppmt/ppmt_channel_amount_americas.csv | 8 + .../ppmt_channel_amount_americas_annual.csv | 3 + .../ppmt_channel_amount_americas_halfyear.csv | 6 + data/ppmt/ppmt_channel_amount_apac.csv | 8 + data/ppmt/ppmt_channel_amount_apac_annual.csv | 3 + .../ppmt_channel_amount_apac_halfyear.csv | 6 + data/ppmt/ppmt_channel_amount_china.csv | 8 + .../ppmt/ppmt_channel_amount_china_annual.csv | 3 + .../ppmt_channel_amount_china_halfyear.csv | 6 + data/ppmt/ppmt_channel_amount_europe.csv | 8 + .../ppmt_channel_amount_europe_annual.csv | 3 + .../ppmt_channel_amount_europe_halfyear.csv | 6 + js/charts/brk_holdings.js | 2 +- js/charts/growth.js | 2 +- js/charts/index.js | 6 +- js/charts/inventory.js | 2 +- js/charts/margin.js | 2 +- js/charts/ppmt_assets.js | 2 +- js/charts/ppmt_bridge.js | 2 +- js/charts/ppmt_cash_conversion.js | 2 +- js/charts/ppmt_cashflow_composition.js | 2 +- js/charts/ppmt_category.js | 2 +- js/charts/ppmt_channel_revenue.js | 2 +- js/charts/ppmt_channel_share.js | 2 +- js/charts/ppmt_channel_share_region.js | 91 ++++++++- js/charts/ppmt_core_margin.js | 2 +- js/charts/ppmt_core_profit.js | 2 +- js/charts/ppmt_expense_structure.js | 2 +- js/charts/ppmt_growth.js | 2 +- js/charts/ppmt_inventory.js | 2 +- js/charts/ppmt_ip.js | 2 +- js/charts/ppmt_ip_ex_monsters.js | 2 +- js/charts/ppmt_ip_share.js | 2 +- js/charts/ppmt_ip_share_history.js | 2 +- js/charts/ppmt_liquidity_working_capital.js | 2 +- js/charts/ppmt_margins.js | 2 +- js/charts/ppmt_profit.js | 2 +- js/charts/ppmt_region_channel.js | 2 +- .../ppmt_region_channel_yoy_timeseries.js | 2 +- js/charts/ppmt_region_share.js | 2 +- js/charts/ppmt_region_yoy.js | 2 +- js/charts/ppmt_retail_store_revenue.js | 2 +- js/charts/ppmt_robot_store_revenue.js | 2 +- js/charts/ppmt_sankey.js | 2 +- js/charts/ppmt_stores_retail.js | 2 +- js/charts/ppmt_stores_retail_share.js | 2 +- js/charts/ppmt_stores_robot.js | 4 +- js/charts/ppmt_working_capital_days.js | 2 +- js/charts/twoline.js | 2 +- js/main.js | 121 +++++++++++ js/merge.js | 57 ++++++ js/theme.js | 2 +- js/ui.js | 108 +++++++++- manifest.json | 6 +- scripts/normalize_ppmt_financials.mjs | 12 ++ 57 files changed, 684 insertions(+), 50 deletions(-) create mode 100644 data/ppmt/ppmt_channel_amount_americas.csv create mode 100644 data/ppmt/ppmt_channel_amount_americas_annual.csv create mode 100644 data/ppmt/ppmt_channel_amount_americas_halfyear.csv create mode 100644 data/ppmt/ppmt_channel_amount_apac.csv create mode 100644 data/ppmt/ppmt_channel_amount_apac_annual.csv create mode 100644 data/ppmt/ppmt_channel_amount_apac_halfyear.csv create mode 100644 data/ppmt/ppmt_channel_amount_china.csv create mode 100644 data/ppmt/ppmt_channel_amount_china_annual.csv create mode 100644 data/ppmt/ppmt_channel_amount_china_halfyear.csv create mode 100644 data/ppmt/ppmt_channel_amount_europe.csv create mode 100644 data/ppmt/ppmt_channel_amount_europe_annual.csv create mode 100644 data/ppmt/ppmt_channel_amount_europe_halfyear.csv create mode 100644 js/merge.js diff --git a/CLAUDE.md b/CLAUDE.md index 7c98a9f..72afd82 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -95,6 +95,6 @@ pnpm test # 全量，只在改了 t ## 脚注 -`footnote()` 单行约 60 字符封顶（1200px 画布），超了用 `\n` 手动断行。结尾统一 `| @思考的Joey`。 +`footnote()` 单行约 60 字符封顶（1200px 画布），超了用 `\n` 手动断行。结尾统一 `| @Joey知行记`。 水印文案在 `theme.js` 的 `WATERMARK_TEXT`，改一处全局生效。 diff --git a/css/style.css b/css/style.css index 50b795d..3403547 100644 --- a/css/style.css +++ b/css/style.css @@ -28,7 +28,10 @@ button { .sidebar-title { margin: 0; } .reload-button, -.export-button { +.export-button, +.cart-button, +.cart-export-button, +.primary-button { padding: 7px 13px; border: 1px solid var(--line); border-radius: 6px; @@ -57,6 +60,186 @@ button { .reload-button:hover { opacity: .88; transform: rotate(-45deg); } .export-button:hover { color: var(--accent); border-color: var(--accent); } +/* ── 合并队列（购物车）────────────────────────────── */ + +.cart-button { font-size: 12px; } +.cart-button:hover { color: var(--accent); border-color: var(--accent); } +.cart-button[data-in-cart="true"] { + color: #fff; + background: var(--accent); + border-color: var(--accent); +} + +.cart-bar[hidden] { display: none; } + +.cart-bar { + position: fixed; + left: 50%; + bottom: 18px; + transform: translateX(-50%); + z-index: 20; + display: flex; + align-items: center; + gap: 10px; + max-width: min(1160px, calc(100vw - 32px)); + padding: 9px 12px; + background: rgba(255, 255, 255, .97); + border: 1px solid var(--line); + border-radius: 12px; + box-shadow: 0 6px 24px rgba(0, 0, 0, .12); +} + +.cart-label { + color: var(--muted); + font-size: 12px; + font-weight: 600; + white-space: nowrap; +} + +.cart-chips { + display: flex; + gap: 6px; + max-width: 44vw; + overflow-x: auto; + scrollbar-width: none; +} +.cart-chips::-webkit-scrollbar { display: none; } + +.cart-chip { + display: flex; + align-items: center; + flex: 0 0 auto; + gap: 2px; + padding: 3px 4px 3px 10px; + background: var(--accent-soft); + border-radius: 6px; +} + +.cart-chip-name { + max-width: 150px; + overflow: hidden; + color: var(--ink); + font-size: 12px; + text-overflow: ellipsis; + white-space: nowrap; +} + +.cart-chip-button { + padding: 2px 4px; + border: 0; + border-radius: 4px; + background: transparent; + color: var(--muted); + font-size: 12px; + line-height: 1.4; +} +.cart-chip-button:hover:not(:disabled) { color: var(--accent); } +.cart-chip-button:disabled { opacity: .3; cursor: default; } + +.cart-divider { width: 1px; height: 22px; background: var(--line); } + +.cart-modes { + display: flex; + flex: 0 0 auto; + padding: 2px; + background: #f4f2ee; + border-radius: 6px; +} + +.cart-mode-button { + padding: 4px 8px; + border: 0; + border-radius: 5px; + background: transparent; + color: var(--muted); + font-size: 12px; + white-space: nowrap; +} +.cart-mode-button[data-active="true"] { + color: var(--accent); + background: var(--surface); + box-shadow: 0 1px 2px rgba(0, 0, 0, .08); +} + +.cart-export-button { color: #fff; background: var(--accent); border-color: var(--accent); white-space: nowrap; } +.cart-export-button:hover { opacity: .9; } +.cart-clear-button { padding: 7px 8px; border: 0; background: transparent; color: var(--muted); font-size: 12px; white-space: nowrap; } +.cart-clear-button:hover { color: #a63f32; } + +/* ── 合并预览弹窗 ────────────────────────────────── */ + +.modal-overlay { + position: fixed; + inset: 0; + z-index: 30; + display: grid; + place-items: center; + padding: 24px; + background: rgba(51, 51, 51, .45); +} + +.modal { + display: flex; + flex-direction: column; + max-width: min(860px, 100%); + max-height: calc(100vh - 48px); + background: var(--surface); + border-radius: 12px; + overflow: hidden; +} + +.modal-head { + display: flex; + align-items: center; + gap: 12px; + padding: 12px 16px; + border-bottom: 1px solid var(--line); +} + +.modal-title { margin: 0; font-size: 14px; } +.modal-notice { color: #a67c2b; font-size: 12px; } + +.modal-close { + margin-left: auto; + padding: 2px 8px; + border: 0; + background: transparent; + color: var(--muted); + font-size: 16px; +} +.modal-close:hover { color: var(--ink); } + +.modal-body { + display: grid; + gap: 20px; + overflow-y: auto; + padding: 16px; +} + +.preview-item { + display: grid; + gap: 10px; + justify-items: center; +} + +.preview-canvas { + max-width: 100%; + height: auto; + border: 1px solid var(--line); + border-radius: 6px; +} + +.modal-foot { + display: flex; + justify-content: flex-end; + gap: 10px; + padding: 12px 16px; + border-top: 1px solid var(--line); +} + +.primary-button { color: #fff; background: var(--accent); border-color: var(--accent); } +.primary-button:hover { opacity: .9; } + .app-layout { display: grid; grid-template-columns: 184px minmax(0, 1fr) 184px; @@ -235,7 +418,9 @@ button { .tab-button { flex: 0 0 auto; } .card { scroll-margin-top: 120px; } .card-bar { align-items: flex-start; flex-wrap: wrap; } - .export-button { margin-left: auto; } + .cart-button { margin-left: auto; } + .cart-bar { left: 12px; right: 12px; transform: none; flex-wrap: wrap; } + .cart-chips { max-width: none; } .chart { min-width: 560px; } .card { overflow-x: auto; } } diff --git a/data/ppmt/ppmt_channel_amount_americas.csv b/data/ppmt/ppmt_channel_amount_americas.csv new file mode 100644 index 0000000..4180db4 --- /dev/null +++ b/data/ppmt/ppmt_channel_amount_americas.csv @@ -0,0 +1,8 @@ +period,retail,robot_store,own_app,tiktok,amazon,online_other,wholesale,total_revenue +2024H1,0.9,0.1,0.3,0.1,0.0,0.2,0.2,1.83 +2024H2,2.5,0.3,1.6,0.9,0.0,0.5,0.4,6.19 +2024FY,3.4,0.4,1.9,1.1,0.0,0.7,0.6,8.02 +2025H1,7.4,1.1,8.9,3.1,0.0,1.3,1.0,22.65 +2025H2,12.7,1.3,19.8,7.3,0.0,3.2,1.2,45.42 +2025FY,20.0,2.3,28.7,10.4,0.0,4.4,2.2,68.07 +2026H1,9.0,1.0,4.9,0.0,1.7,0.6,1.6,18.91 diff --git a/data/ppmt/ppmt_channel_amount_americas_annual.csv b/data/ppmt/ppmt_channel_amount_americas_annual.csv new file mode 100644 index 0000000..8d1827b --- /dev/null +++ b/data/ppmt/ppmt_channel_amount_americas_annual.csv @@ -0,0 +1,3 @@ +period,retail,robot_store,own_app,tiktok,amazon,online_other,wholesale,total_revenue +2024FY,3.4,0.4,1.9,1.1,0.0,0.7,0.6,8.02 +2025FY,20.0,2.3,28.7,10.4,0.0,4.4,2.2,68.07 diff --git a/data/ppmt/ppmt_channel_amount_americas_halfyear.csv b/data/ppmt/ppmt_channel_amount_americas_halfyear.csv new file mode 100644 index 0000000..20418e8 --- /dev/null +++ b/data/ppmt/ppmt_channel_amount_americas_halfyear.csv @@ -0,0 +1,6 @@ +period,retail,robot_store,own_app,tiktok,amazon,online_other,wholesale,total_revenue +2024H1,0.9,0.1,0.3,0.1,0.0,0.2,0.2,1.83 +2024H2,2.5,0.3,1.6,0.9,0.0,0.5,0.4,6.19 +2025H1,7.4,1.1,8.9,3.1,0.0,1.3,1.0,22.65 +2025H2,12.7,1.3,19.8,7.3,0.0,3.2,1.2,45.42 +2026H1,9.0,1.0,4.9,0.0,1.7,0.6,1.6,18.91 diff --git a/data/ppmt/ppmt_channel_amount_apac.csv b/data/ppmt/ppmt_channel_amount_apac.csv new file mode 100644 index 0000000..bd3fe5c --- /dev/null +++ b/data/ppmt/ppmt_channel_amount_apac.csv @@ -0,0 +1,8 @@ +period,retail,robot_store,own_app,shopee,online_other,wholesale,total_revenue +2024H1,4.8,0.2,0.4,0.4,0.8,1.3,7.97 +2024H2,11.8,0.2,2.6,2.4,3.0,3.0,23.13 +2024FY,16.7,0.4,3.0,2.9,3.8,4.3,31.10 +2025H1,14.9,0.3,3.1,2.8,4.8,2.6,28.51 +2025H2,28.3,0.6,11.4,2.9,5.5,2.9,51.60 +2025FY,43.2,0.9,14.6,5.7,10.3,5.4,80.11 +2026H1,17.2,0.6,3.4,1.1,2.0,1.6,25.76 diff --git a/data/ppmt/ppmt_channel_amount_apac_annual.csv b/data/ppmt/ppmt_channel_amount_apac_annual.csv new file mode 100644 index 0000000..7faa849 --- /dev/null +++ b/data/ppmt/ppmt_channel_amount_apac_annual.csv @@ -0,0 +1,3 @@ +period,retail,robot_store,own_app,shopee,online_other,wholesale,total_revenue +2024FY,16.7,0.4,3.0,2.9,3.8,4.3,31.10 +2025FY,43.2,0.9,14.6,5.7,10.3,5.4,80.11 diff --git a/data/ppmt/ppmt_channel_amount_apac_halfyear.csv b/data/ppmt/ppmt_channel_amount_apac_halfyear.csv new file mode 100644 index 0000000..a71c548 --- /dev/null +++ b/data/ppmt/ppmt_channel_amount_apac_halfyear.csv @@ -0,0 +1,6 @@ +period,retail,robot_store,own_app,shopee,online_other,wholesale,total_revenue +2024H1,4.8,0.2,0.4,0.4,0.8,1.3,7.97 +2024H2,11.8,0.2,2.6,2.4,3.0,3.0,23.13 +2025H1,14.9,0.3,3.1,2.8,4.8,2.6,28.51 +2025H2,28.3,0.6,11.4,2.9,5.5,2.9,51.60 +2026H1,17.2,0.6,3.4,1.1,2.0,1.6,25.76 diff --git a/data/ppmt/ppmt_channel_amount_china.csv b/data/ppmt/ppmt_channel_amount_china.csv new file mode 100644 index 0000000..eb58795 --- /dev/null +++ b/data/ppmt/ppmt_channel_amount_china.csv @@ -0,0 +1,8 @@ +period,retail,robot_store,roboshop,tmall,douyin,online_other,wholesale,total_revenue +2024H1,20.0,3.4,4.0,2.0,2.1,1.3,2.4,35.22 +2024H2,26.0,4.1,7.2,4.3,3.9,3.0,5.2,53.65 +2024FY,46.0,7.5,11.1,6.3,6.0,4.3,7.6,88.87 +2025H1,44.1,6.8,11.3,6.6,5.6,5.9,2.6,82.82 +2025H2,56.7,6.7,23.0,11.3,10.3,11.3,6.5,125.69 +2025FY,100.8,13.5,34.2,17.9,15.9,17.2,9.1,208.51 +2026H1,60.9,7.8,20.6,9.0,9.8,8.4,5.5,122.00 diff --git a/data/ppmt/ppmt_channel_amount_china_annual.csv b/data/ppmt/ppmt_channel_amount_china_annual.csv new file mode 100644 index 0000000..737e5ec --- /dev/null +++ b/data/ppmt/ppmt_channel_amount_china_annual.csv @@ -0,0 +1,3 @@ +period,retail,robot_store,roboshop,tmall,douyin,online_other,wholesale,total_revenue +2024FY,46.0,7.5,11.1,6.3,6.0,4.3,7.6,88.87 +2025FY,100.8,13.5,34.2,17.9,15.9,17.2,9.1,208.51 diff --git a/data/ppmt/ppmt_channel_amount_china_halfyear.csv b/data/ppmt/ppmt_channel_amount_china_halfyear.csv new file mode 100644 index 0000000..cab8fb1 --- /dev/null +++ b/data/ppmt/ppmt_channel_amount_china_halfyear.csv @@ -0,0 +1,6 @@ +period,retail,robot_store,roboshop,tmall,douyin,online_other,wholesale,total_revenue +2024H1,20.0,3.4,4.0,2.0,2.1,1.3,2.4,35.22 +2024H2,26.0,4.1,7.2,4.3,3.9,3.0,5.2,53.65 +2025H1,44.1,6.8,11.3,6.6,5.6,5.9,2.6,82.82 +2025H2,56.7,6.7,23.0,11.3,10.3,11.3,6.5,125.69 +2026H1,60.9,7.8,20.6,9.0,9.8,8.4,5.5,122.00 diff --git a/data/ppmt/ppmt_channel_amount_europe.csv b/data/ppmt/ppmt_channel_amount_europe.csv new file mode 100644 index 0000000..6c14ed3 --- /dev/null +++ b/data/ppmt/ppmt_channel_amount_europe.csv @@ -0,0 +1,8 @@ +period,retail,robot_store,own_app,online_other,wholesale,total_revenue +2024H1,0.4,0.0,0.0,0.1,0.1,0.58 +2024H2,1.2,0.0,0.2,0.2,0.2,1.81 +2024FY,1.6,0.0,0.2,0.3,0.3,2.39 +2025H1,2.7,0.0,0.8,0.8,0.4,4.77 +2025H2,5.8,0.1,2.3,1.1,0.4,9.74 +2025FY,8.6,0.2,3.2,1.9,0.7,14.51 +2026H1,4.0,0.1,0.5,0.1,0.2,5.06 diff --git a/data/ppmt/ppmt_channel_amount_europe_annual.csv b/data/ppmt/ppmt_channel_amount_europe_annual.csv new file mode 100644 index 0000000..e845bb3 --- /dev/null +++ b/data/ppmt/ppmt_channel_amount_europe_annual.csv @@ -0,0 +1,3 @@ +period,retail,robot_store,own_app,online_other,wholesale,total_revenue +2024FY,1.6,0.0,0.2,0.3,0.3,2.39 +2025FY,8.6,0.2,3.2,1.9,0.7,14.51 diff --git a/data/ppmt/ppmt_channel_amount_europe_halfyear.csv b/data/ppmt/ppmt_channel_amount_europe_halfyear.csv new file mode 100644 index 0000000..7df5abc --- /dev/null +++ b/data/ppmt/ppmt_channel_amount_europe_halfyear.csv @@ -0,0 +1,6 @@ +period,retail,robot_store,own_app,online_other,wholesale,total_revenue +2024H1,0.4,0.0,0.0,0.1,0.1,0.58 +2024H2,1.2,0.0,0.2,0.2,0.2,1.81 +2025H1,2.7,0.0,0.8,0.8,0.4,4.77 +2025H2,5.8,0.1,2.3,1.1,0.4,9.74 +2026H1,4.0,0.1,0.5,0.1,0.2,5.06 diff --git a/js/charts/brk_holdings.js b/js/charts/brk_holdings.js index 7921ddf..8ea9041 100644 --- a/js/charts/brk_holdings.js +++ b/js/charts/brk_holdings.js @@ -168,7 +168,7 @@ export function brkHoldingsChart(rows, { width, height }) { })), graphic: [ ...watermarks(width, height), - footnote('绿色=相对上一年新增；红色=相对上一年清仓；蓝色深浅=相对持股数量 | @思考的Joey'), + footnote('绿色=相对上一年新增；红色=相对上一年清仓；蓝色深浅=相对持股数量 | @Joey知行记'), ], }; } diff --git a/js/charts/growth.js b/js/charts/growth.js index 788650b..fa1ec83 100644 --- a/js/charts/growth.js +++ b/js/charts/growth.js @@ -72,7 +72,7 @@ export function growthChart(rows, { width, height }) { ], graphic: [ ...watermarks(width, height), - footnote('示例数据 | @思考的Joey'), + footnote('示例数据 | @Joey知行记'), ], }; } diff --git a/js/charts/index.js b/js/charts/index.js index c7e6ec5..68e440e 100644 --- a/js/charts/index.js +++ b/js/charts/index.js @@ -26,7 +26,7 @@ import { workingCapitalDaysChart } from './ppmt_working_capital_days.js'; import { expenseStructureChart } from './ppmt_expense_structure.js'; import { channelRevenueChart } from './ppmt_channel_revenue.js'; import { channelShareChart } from './ppmt_channel_share.js'; -import { makeRegionChannelShareChart } from './ppmt_channel_share_region.js'; +import { makeRegionChannelShareChart, makeRegionChannelAmountChart } from './ppmt_channel_share_region.js'; import { storesRetailChart } from './ppmt_stores_retail.js'; import { storesRobotChart } from './ppmt_stores_robot.js'; import { regionShareChart } from './ppmt_region_share.js'; @@ -70,6 +70,10 @@ export const chartRegistry = { 'ppmt-channel-share-apac': makeRegionChannelShareChart('apac'), 'ppmt-channel-share-americas': makeRegionChannelShareChart('americas'), 'ppmt-channel-share-europe': makeRegionChannelShareChart('europe'), + 'ppmt-channel-amount-china': makeRegionChannelAmountChart('china'), + 'ppmt-channel-amount-apac': makeRegionChannelAmountChart('apac'), + 'ppmt-channel-amount-americas': makeRegionChannelAmountChart('americas'), + 'ppmt-channel-amount-europe': makeRegionChannelAmountChart('europe'), 'ppmt-stores-retail': storesRetailChart, 'ppmt-stores-robot': storesRobotChart, 'ppmt-region-share': regionShareChart, diff --git a/js/charts/inventory.js b/js/charts/inventory.js index 39aef4f..a4cc5d3 100644 --- a/js/charts/inventory.js +++ b/js/charts/inventory.js @@ -103,7 +103,7 @@ export function inventoryChart(rows, { width, height }) { ...watermarks(width, height), footnote( '周转天数=平均存货÷当期销售成本×期间天数（半年181/年度365，期初=上一年末，日历天数口径）；' + - '与公司披露一致：23年133/24年102/25年123/26H1 201天 | @思考的Joey' + '与公司披露一致：23年133/24年102/25年123/26H1 201天 | @Joey知行记' ), ], }; diff --git a/js/charts/margin.js b/js/charts/margin.js index 6f4c45c..001e443 100644 --- a/js/charts/margin.js +++ b/js/charts/margin.js @@ -74,7 +74,7 @@ export function marginChart(rows, { width, height }) { ], graphic: [ ...watermarks(width, height), - footnote('示例数据 | @思考的Joey'), + footnote('示例数据 | @Joey知行记'), ], }; } diff --git a/js/charts/ppmt_assets.js b/js/charts/ppmt_assets.js index abc729b..eb58c87 100644 --- a/js/charts/ppmt_assets.js +++ b/js/charts/ppmt_assets.js @@ -105,7 +105,7 @@ export function assetsChart(rows, { width, height, view = 'all' }) { ], graphic: [ ...watermarks(width, height), - footnote('数据来源：泡泡玛特财报 | @思考的Joey'), + footnote('数据来源：泡泡玛特财报 | @Joey知行记'), ], }; } diff --git a/js/charts/ppmt_bridge.js b/js/charts/ppmt_bridge.js index 5da4713..4fd6b87 100644 --- a/js/charts/ppmt_bridge.js +++ b/js/charts/ppmt_bridge.js @@ -109,7 +109,7 @@ export function ppmtBridgeChart(rows, { width, height }) { ...watermarks(width, height), footnote( '各项为占营收百分点，已折算为对净利率影响（×税盾系数）\n' + - '其他收益净额：26H1净损失6.89亿，主要为汇兑损失7.20亿（25H1为汇兑收益1.20亿） | @思考的Joey' + '其他收益净额：26H1净损失6.89亿，主要为汇兑损失7.20亿（25H1为汇兑收益1.20亿） | @Joey知行记' ), ], }; diff --git a/js/charts/ppmt_cash_conversion.js b/js/charts/ppmt_cash_conversion.js index d90693f..ea25f17 100644 --- a/js/charts/ppmt_cash_conversion.js +++ b/js/charts/ppmt_cash_conversion.js @@ -89,7 +89,7 @@ export function cashConversionChart(rows, { width, height, view = 'all' }) { ], graphic: [ ...watermarks(width, height), - footnote('数据来源：泡泡玛特合并现金流量表、利润表；H2为单独半年 | @思考的Joey'), + footnote('数据来源：泡泡玛特合并现金流量表、利润表；H2为单独半年 | @Joey知行记'), ], }; } diff --git a/js/charts/ppmt_cashflow_composition.js b/js/charts/ppmt_cashflow_composition.js index 2993b50..6632d66 100644 --- a/js/charts/ppmt_cashflow_composition.js +++ b/js/charts/ppmt_cashflow_composition.js @@ -57,7 +57,7 @@ export function cashflowCompositionChart(rows, { width, height, view = 'all' }) ], graphic: [ ...watermarks(width, height), - footnote('数据来源：泡泡玛特合并现金流量表；H2为单独半年 | @思考的Joey'), + footnote('数据来源：泡泡玛特合并现金流量表；H2为单独半年 | @Joey知行记'), ], }; } diff --git a/js/charts/ppmt_category.js b/js/charts/ppmt_category.js index 370cccf..a782a69 100644 --- a/js/charts/ppmt_category.js +++ b/js/charts/ppmt_category.js @@ -122,7 +122,7 @@ export function categoryChart(rows, { width, height, view = 'all' }) { ], graphic: [ ...watermarks(width, height), - footnote('数据来源：泡泡玛特财报 | @思考的Joey'), + footnote('数据来源：泡泡玛特财报 | @Joey知行记'), ], }; } diff --git a/js/charts/ppmt_channel_revenue.js b/js/charts/ppmt_channel_revenue.js index 9d3f8fe..e899c18 100644 --- a/js/charts/ppmt_channel_revenue.js +++ b/js/charts/ppmt_channel_revenue.js @@ -170,7 +170,7 @@ export function channelRevenueChart(rows, { width, height, view = 'all' }) { ], graphic: [ ...watermarks(width, height), - footnote('数据来源：泡泡玛特营收构成表；渠道口径按财报披露 | @思考的Joey'), + footnote('数据来源：泡泡玛特营收构成表；渠道口径按财报披露 | @Joey知行记'), ], }; } diff --git a/js/charts/ppmt_channel_share.js b/js/charts/ppmt_channel_share.js index 40759b0..75e93c3 100644 --- a/js/charts/ppmt_channel_share.js +++ b/js/charts/ppmt_channel_share.js @@ -74,7 +74,7 @@ export function channelShareChart(rows, { width, height, view = 'all' }) { })), graphic: [ ...watermarks(width, height), - footnote('数据来源：泡泡玛特分地区渠道收入披露（中国含港澳台）；H2为单半年（全年−H1）\n线上渠道含抽盒机、天猫、抖音、自研APP及官网等 | @思考的Joey'), + footnote('数据来源：泡泡玛特分地区渠道收入披露（中国含港澳台）；H2为单半年（全年−H1）\n线上渠道含抽盒机、天猫、抖音、自研APP及官网等 | @Joey知行记'), ], }; } diff --git a/js/charts/ppmt_channel_share_region.js b/js/charts/ppmt_channel_share_region.js index 9d5612d..4f479ce 100644 --- a/js/charts/ppmt_channel_share_region.js +++ b/js/charts/ppmt_channel_share_region.js @@ -28,28 +28,111 @@ const REGIONS = { title: '中国区', source: '中国（含港澳台）', series: ['retail', 'robot_store', 'roboshop', 'tmall', 'douyin', 'online_other', 'wholesale'], - footnote: '数据来源：泡泡玛特中国区（含港澳台）分渠道收入披露；H2为单半年（全年−H1）\n线上渠道按财报披露拆分为抽盒机、天猫旗舰店、抖音平台与其他线上 | @思考的Joey', + footnote: '数据来源：泡泡玛特中国区（含港澳台）分渠道收入披露；H2为单半年（全年−H1）\n线上渠道按财报披露拆分为抽盒机、天猫旗舰店、抖音平台与其他线上 | @Joey知行记', }, apac: { title: '亚太区', source: '亚太区', series: ['retail', 'robot_store', 'own_app', 'shopee', 'online_other', 'wholesale'], - footnote: '数据来源：泡泡玛特亚太区分渠道收入披露；H2为单半年（全年−H1）\n线上渠道按财报披露拆分为自研APP及官网、Shopee与其他线上 | @思考的Joey', + footnote: '数据来源：泡泡玛特亚太区分渠道收入披露；H2为单半年（全年−H1）\n线上渠道按财报披露拆分为自研APP及官网、Shopee与其他线上 | @Joey知行记', }, americas: { title: '美洲区', source: '美洲区', series: ['retail', 'robot_store', 'own_app', 'tiktok', 'amazon', 'online_other', 'wholesale'], - footnote: '数据来源：泡泡玛特美洲区分渠道收入披露；H2为单半年（全年−H1）\n2026H1起TikTok无收入，亚马逊为2026年新开渠道 | @思考的Joey', + footnote: '数据来源：泡泡玛特美洲区分渠道收入披露；H2为单半年（全年−H1）\n2026H1起TikTok无收入，亚马逊为2026年新开渠道 | @Joey知行记', }, europe: { title: '欧洲及其他区', source: '欧洲及其他地区', series: ['retail', 'robot_store', 'own_app', 'online_other', 'wholesale'], - footnote: '数据来源：泡泡玛特欧洲及其他地区分渠道收入披露；H2为单半年（全年−H1）\n线上渠道按财报披露拆分为自研APP及官网与其他线上 | @思考的Joey', + footnote: '数据来源：泡泡玛特欧洲及其他地区分渠道收入披露；H2为单半年（全年−H1）\n线上渠道按财报披露拆分为自研APP及官网与其他线上 | @Joey知行记', }, }; +/** 轴上限取整齐刻度，柱高比例确定后，段标签的段内/外置可按像素判断（同 ppmt_channel_revenue）。 */ +const AMOUNT_NICE_MAX = [10, 20, 25, 50, 60, 80, 100, 120, 150, 200, 250, 300, 400, 500]; + +/** + * 分地区渠道收入金额堆叠柱：与占比图同源同色，直接使用披露金额（亿元）， + * 不做占比×总收入还原。矮段标签外置到柱体右侧的机制同全局渠道金额图。 + */ +export function makeRegionChannelAmountChart(regionKey) { + const region = REGIONS[regionKey]; + if (!region) throw new Error(`未配置的地区渠道金额图：${regionKey}`); + return function regionChannelAmountChart(rows, { width, height, view = 'all' }) { + const periods = col(rows, 'period'); + const barWidth = view === 'all' ? 48 : 80; + const totalMax = Math.max(...rows.map((row) => row.total_revenue)); + const axisMax = AMOUNT_NICE_MAX.find((max) => max >= totalMax * 1.02) + ?? Math.ceil((totalMax * 1.2) / 100) * 100; + // 绘图区像素高：画布高 − grid top 145 − grid bottom 100（两行脚注） + const pxPerUnit = (height - LAYOUT.gridTop - 100) / axisMax; + const rowOffsets = fanTinyLabelOffsets(rows, region.series, pxPerUnit); + + return { + backgroundColor: '#fff', + title: { + ...titleStyle, + text: `泡泡玛特${region.title}渠道收入金额（${financialViewLabel(view)}）`, + subtext: '堆叠柱为各渠道收入（亿元）；矮段数值标注在柱体右侧，线上渠道按披露细分拆分', + }, + legend: standardLegend(region.series.map((key) => SERIES[key].name)), + tooltip: { + trigger: 'axis', + axisPointer: { type: 'shadow' }, + textStyle: { fontFamily: FONT }, + formatter: (params) => { + const row = rows[periods.indexOf(params[0].axisValue)]; + return `${params[0].axisValue}　${region.source}总收入 ${row.total_revenue.toFixed(2)} 亿元
${params + .filter((item) => item.value !== null) + .slice() + .reverse() + .map((item) => `${item.marker}${item.seriesName}: ${item.value.toFixed(1)} 亿元`) + .join('
')}`; + }, + }, + grid: { left: 78, right: 82, top: LAYOUT.gridTop, bottom: 100 }, + xAxis: { ...standalonePeriodAxis, data: periods }, + yAxis: { + ...axisCommon, + type: 'value', + name: '渠道收入（亿元）', + nameLocation: 'middle', + nameGap: 56, + nameTextStyle: { color: PALETTE.grey, fontSize: 13, fontFamily: FONT }, + min: 0, + max: axisMax, + interval: axisMax % 4 === 0 ? axisMax / 4 : axisMax / 5, + }, + series: region.series.map((key, ci) => barSeries({ + name: SERIES[key].name, + data: rows.map((row, ri) => stackedSharePoint(row[key], { + pxPerUnit, + labelColor: SERIES[key].labelColor, + dy: rowOffsets[ri][ci] ?? 0, + })), + color: SERIES[key].color, + barWidth, + stack: `channel-amount-${regionKey}`, + label: { + show: true, + position: 'inside', + fontSize: 11, + fontFamily: FONT, + fontWeight: 500, + overflow: 'none', + formatter: (point) => point.value.toFixed(1), + }, + emphasis: { focus: 'series' }, + })), + graphic: [ + ...watermarks(width, height), + footnote(region.footnote), + ], + }; + }; +} /** 分地区渠道收入占比：线上渠道拆分披露的细分平台，每根柱按当期该地区总收入归一化。 */ export function makeRegionChannelShareChart(regionKey) { const region = REGIONS[regionKey]; diff --git a/js/charts/ppmt_core_margin.js b/js/charts/ppmt_core_margin.js index b04909e..718efc4 100644 --- a/js/charts/ppmt_core_margin.js +++ b/js/charts/ppmt_core_margin.js @@ -59,7 +59,7 @@ export function ppmtCoreMarginChart(rows, { width, height, view = 'all' }) { ...watermarks(width, height), footnote( '核心利润率由绝对值口径直接计算（核心利润÷营收），比三个比率行相减更准\n' + - '——后者各只存4位小数，累加误差可达0.045pct | @思考的Joey' + '——后者各只存4位小数，累加误差可达0.045pct | @Joey知行记' ), ], }; diff --git a/js/charts/ppmt_core_profit.js b/js/charts/ppmt_core_profit.js index fc5da19..085c8f7 100644 --- a/js/charts/ppmt_core_profit.js +++ b/js/charts/ppmt_core_profit.js @@ -137,7 +137,7 @@ export function ppmtCoreProfitChart(rows, { width, height, view = 'all' }) { ...watermarks(width, height), footnote( '核心利润反映主业盈利能力（扣除营销与管理成本）；' + - '2025H1/H2同比增速受益于费用率优化和规模效应 | @思考的Joey' + '2025H1/H2同比增速受益于费用率优化和规模效应 | @Joey知行记' ), ], }; diff --git a/js/charts/ppmt_expense_structure.js b/js/charts/ppmt_expense_structure.js index 0427a37..a7dc3f8 100644 --- a/js/charts/ppmt_expense_structure.js +++ b/js/charts/ppmt_expense_structure.js @@ -69,7 +69,7 @@ export function expenseStructureChart(rows, { width, height, view = 'all' }) { ], graphic: [ ...watermarks(width, height), - footnote('数据来源：泡泡玛特合并利润表；H2为单独半年 | @思考的Joey'), + footnote('数据来源：泡泡玛特合并利润表；H2为单独半年 | @Joey知行记'), ], }; } diff --git a/js/charts/ppmt_growth.js b/js/charts/ppmt_growth.js index 82a154f..1bfc9d0 100644 --- a/js/charts/ppmt_growth.js +++ b/js/charts/ppmt_growth.js @@ -106,7 +106,7 @@ export function ppmtGrowthChart(rows, { width, height, view = 'all' }) { })), graphic: [ ...watermarks(width, height), - footnote('数据来源：泡泡玛特财报；2020H1/H2非GAAP净利用归母净利替代 | @思考的Joey'), + footnote('数据来源：泡泡玛特财报；2020H1/H2非GAAP净利用归母净利替代 | @Joey知行记'), ], }; } diff --git a/js/charts/ppmt_inventory.js b/js/charts/ppmt_inventory.js index a28589d..8ff11d7 100644 --- a/js/charts/ppmt_inventory.js +++ b/js/charts/ppmt_inventory.js @@ -76,7 +76,7 @@ export function inventoryBalanceChart(rows, { width, height, view = 'all' }) { ], graphic: [ ...watermarks(width, height), - footnote('数据来源：泡泡玛特历年合并资产负债表；存货为报告期末时点数 | @思考的Joey'), + footnote('数据来源：泡泡玛特历年合并资产负债表；存货为报告期末时点数 | @Joey知行记'), ], }; } diff --git a/js/charts/ppmt_ip.js b/js/charts/ppmt_ip.js index 2b9c86d..f7cfd16 100644 --- a/js/charts/ppmt_ip.js +++ b/js/charts/ppmt_ip.js @@ -80,7 +80,7 @@ export function ipChart(rows, { width, height, view = 'all' }) { series, graphic: [ ...watermarks(width, height), - footnote('数据来源：泡泡玛特财报 | @思考的Joey'), + footnote('数据来源：泡泡玛特财报 | @Joey知行记'), ], }; } diff --git a/js/charts/ppmt_ip_ex_monsters.js b/js/charts/ppmt_ip_ex_monsters.js index 822bf0c..3a23e13 100644 --- a/js/charts/ppmt_ip_ex_monsters.js +++ b/js/charts/ppmt_ip_ex_monsters.js @@ -143,7 +143,7 @@ export function ppmtIpExMonstersChart(rows, { width, height, view = 'all' }) { ], graphic: [ ...watermarks(width, height), - footnote('除 THE MONSTERS 外其余 IP 合计；同比对去年同半年 | @思考的Joey'), + footnote('除 THE MONSTERS 外其余 IP 合计；同比对去年同半年 | @Joey知行记'), ], }; } diff --git a/js/charts/ppmt_ip_share.js b/js/charts/ppmt_ip_share.js index 1e1f682..ead3f78 100644 --- a/js/charts/ppmt_ip_share.js +++ b/js/charts/ppmt_ip_share.js @@ -120,7 +120,7 @@ export function ppmtIpShareChart(rows, { width, height }) { ], graphic: [ ...watermarks(width, height), - footnote('HACIPUPU、BUNNY、PUCKY 等 IP 2026H1 无收入数据，未列入 | @思考的Joey'), + footnote('HACIPUPU、BUNNY、PUCKY 等 IP 2026H1 无收入数据，未列入 | @Joey知行记'), ], }; } diff --git a/js/charts/ppmt_ip_share_history.js b/js/charts/ppmt_ip_share_history.js index 13d7a5d..feed01a 100644 --- a/js/charts/ppmt_ip_share_history.js +++ b/js/charts/ppmt_ip_share_history.js @@ -103,7 +103,7 @@ export function ppmtIpShareHistoryChart(rows, { width, height, view = 'all' }) { })), graphic: [ ...watermarks(width, height), - footnote('其他IP（含已停单列）= Zsiga、HACIPUPU、BUNNY、PUCKY、小甜豆等 | @思考的Joey'), + footnote('其他IP（含已停单列）= Zsiga、HACIPUPU、BUNNY、PUCKY、小甜豆等 | @Joey知行记'), ], }; } diff --git a/js/charts/ppmt_liquidity_working_capital.js b/js/charts/ppmt_liquidity_working_capital.js index 298780b..6c31fad 100644 --- a/js/charts/ppmt_liquidity_working_capital.js +++ b/js/charts/ppmt_liquidity_working_capital.js @@ -77,7 +77,7 @@ export function liquidityWorkingCapitalChart(rows, { width, height, view = 'all' ], graphic: [ ...watermarks(width, height), - footnote('数据来源：泡泡玛特合并资产负债表 | @思考的Joey'), + footnote('数据来源：泡泡玛特合并资产负债表 | @Joey知行记'), ], }; } diff --git a/js/charts/ppmt_margins.js b/js/charts/ppmt_margins.js index f7b6571..4b836e7 100644 --- a/js/charts/ppmt_margins.js +++ b/js/charts/ppmt_margins.js @@ -110,7 +110,7 @@ export function ppmtMarginsChart(rows, { width, height, view = 'all' }) { ...watermarks(width, height), footnote( '毛利率/费用率取自利润表；非国际归母净利率=非GAAP净利÷营业收入，' + - '2020H1/H2非GAAP缺失用归母净利替代 | @思考的Joey' + '2020H1/H2非GAAP缺失用归母净利替代 | @Joey知行记' ), ], }; diff --git a/js/charts/ppmt_profit.js b/js/charts/ppmt_profit.js index 9719fe2..4d188b1 100644 --- a/js/charts/ppmt_profit.js +++ b/js/charts/ppmt_profit.js @@ -123,7 +123,7 @@ export function profitChart(rows, { width, height, view = 'all' }) { ], graphic: [ ...watermarks(width, height), - footnote('数据来源：泡泡玛特财报；H2为单独半年 | @思考的Joey'), + footnote('数据来源：泡泡玛特财报；H2为单独半年 | @Joey知行记'), ], }; } diff --git a/js/charts/ppmt_region_channel.js b/js/charts/ppmt_region_channel.js index 23bf1a6..d74a9a2 100644 --- a/js/charts/ppmt_region_channel.js +++ b/js/charts/ppmt_region_channel.js @@ -120,7 +120,7 @@ export function regionChannelChart(rows, { width, height }) { })), graphic: [ ...watermarks(width, height), - footnote('数据来源：泡泡玛特财报 | @思考的Joey'), + footnote('数据来源：泡泡玛特财报 | @Joey知行记'), ], }; } diff --git a/js/charts/ppmt_region_channel_yoy_timeseries.js b/js/charts/ppmt_region_channel_yoy_timeseries.js index 4aab1b9..d550696 100644 --- a/js/charts/ppmt_region_channel_yoy_timeseries.js +++ b/js/charts/ppmt_region_channel_yoy_timeseries.js @@ -111,7 +111,7 @@ export function regionChannelYoyTimeseriesChart(rows, { width, height }) { }], graphic: [ ...watermarks(width, height), - footnote('数据来源：泡泡玛特财报；早期海外为合并口径 | @思考的Joey'), + footnote('数据来源：泡泡玛特财报；早期海外为合并口径 | @Joey知行记'), ], }; } diff --git a/js/charts/ppmt_region_share.js b/js/charts/ppmt_region_share.js index 9186375..0858512 100644 --- a/js/charts/ppmt_region_share.js +++ b/js/charts/ppmt_region_share.js @@ -105,7 +105,7 @@ export function regionShareChart(rows, { width, height, view = 'all' }) { })), graphic: [ ...watermarks(width, height), - footnote('数据来源：泡泡玛特财报；中国含港澳台\n2024H1为按2025年中报披露的分地区同比还原；H2为单半年 | @思考的Joey'), + footnote('数据来源：泡泡玛特财报；中国含港澳台\n2024H1为按2025年中报披露的分地区同比还原；H2为单半年 | @Joey知行记'), ], }; } diff --git a/js/charts/ppmt_region_yoy.js b/js/charts/ppmt_region_yoy.js index 258bad0..8bef312 100644 --- a/js/charts/ppmt_region_yoy.js +++ b/js/charts/ppmt_region_yoy.js @@ -120,7 +120,7 @@ export function regionChannelYoyChart(rows, { width, height }) { })), graphic: [ ...watermarks(width, height), - footnote('数据来源：泡泡玛特财报（2026H1 vs 2025H1同比）| @思考的Joey'), + footnote('数据来源：泡泡玛特财报（2026H1 vs 2025H1同比）| @Joey知行记'), ], }; } diff --git a/js/charts/ppmt_retail_store_revenue.js b/js/charts/ppmt_retail_store_revenue.js index 11e481c..c37c997 100644 --- a/js/charts/ppmt_retail_store_revenue.js +++ b/js/charts/ppmt_retail_store_revenue.js @@ -104,7 +104,7 @@ export function retailStoreRevenueChart(rows, { width, height, view = 'all' }) { ], graphic: [ ...watermarks(width, height), - footnote('数据来源：泡泡玛特历年公告；收入仅含“零售店”渠道；H2收入=全年−H1\n2024年海外各区域缺少期初店数，相关单店收入留空 | @思考的Joey'), + footnote('数据来源：泡泡玛特历年公告；收入仅含“零售店”渠道；H2收入=全年−H1\n2024年海外各区域缺少期初店数，相关单店收入留空 | @Joey知行记'), ], }; } diff --git a/js/charts/ppmt_robot_store_revenue.js b/js/charts/ppmt_robot_store_revenue.js index b5ec3df..89ea8be 100644 --- a/js/charts/ppmt_robot_store_revenue.js +++ b/js/charts/ppmt_robot_store_revenue.js @@ -102,7 +102,7 @@ export function robotStoreRevenueChart(rows, { width, height, view = 'all' }) { ], graphic: [ ...watermarks(width, height), - footnote('数据来源：泡泡玛特历年公告；海外收入=亚太+美洲+欧洲及其他的机器人商店收入；H2收入=全年−H1\n2024H1海外期末机器人商店数未披露，相关单店收入留空 | @思考的Joey'), + footnote('数据来源：泡泡玛特历年公告；海外收入=亚太+美洲+欧洲及其他的机器人商店收入；H2收入=全年−H1\n2024H1海外期末机器人商店数未披露，相关单店收入留空 | @Joey知行记'), ], }; } diff --git a/js/charts/ppmt_sankey.js b/js/charts/ppmt_sankey.js index 5724753..7e4f9c9 100644 --- a/js/charts/ppmt_sankey.js +++ b/js/charts/ppmt_sankey.js @@ -133,7 +133,7 @@ export function sankeyChart(rows, { width, height }) { ], graphic: [ ...watermarks(width, height), - footnote('数据来源：泡泡玛特财报 | @思考的Joey'), + footnote('数据来源：泡泡玛特财报 | @Joey知行记'), ], }; } diff --git a/js/charts/ppmt_stores_retail.js b/js/charts/ppmt_stores_retail.js index 7aa1e66..8b75981 100644 --- a/js/charts/ppmt_stores_retail.js +++ b/js/charts/ppmt_stores_retail.js @@ -128,7 +128,7 @@ export function storesRetailChart(rows, { width, height, view = 'all' }) { ], graphic: [ ...watermarks(width, height), - footnote('数据来源：泡泡玛特历年公告；门店数为各期末时点数\n2023年及以前海外合计含港澳台；2024年起港澳台单列，海外=亚太+美洲+欧洲 | @思考的Joey'), + footnote('数据来源：泡泡玛特历年公告；门店数为各期末时点数\n2023年及以前海外合计含港澳台；2024年起港澳台单列，海外=亚太+美洲+欧洲 | @Joey知行记'), ], }; } diff --git a/js/charts/ppmt_stores_retail_share.js b/js/charts/ppmt_stores_retail_share.js index d2f0dfb..278f4f6 100644 --- a/js/charts/ppmt_stores_retail_share.js +++ b/js/charts/ppmt_stores_retail_share.js @@ -75,7 +75,7 @@ export function storesRetailShareChart(rows, { width, height, view = 'all' }) { })), graphic: [ ...watermarks(width, height), - footnote('数据来源：泡泡玛特历年公告；门店数为各报告期末时点数\n中国=中国内地+港澳台；其他=全球合计−中国−亚太−美洲−欧洲 | @思考的Joey'), + footnote('数据来源：泡泡玛特历年公告；门店数为各报告期末时点数\n中国=中国内地+港澳台；其他=全球合计−中国−亚太−美洲−欧洲 | @Joey知行记'), ], }; } diff --git a/js/charts/ppmt_stores_robot.js b/js/charts/ppmt_stores_robot.js index 076b88d..101fbd3 100644 --- a/js/charts/ppmt_stores_robot.js +++ b/js/charts/ppmt_stores_robot.js @@ -135,8 +135,8 @@ export function storesRobotChart(rows, { width, height, view = 'all' }) { [ '数据来源：泡泡玛特历年公告；门店数为各期末时点数', view === 'annual' - ? '海外合计2023年及以前含港澳台、其后不含 | @思考的Joey' - : '海外合计2023年及以前含港澳台、其后不含；2024H1海外数量未披露 | @思考的Joey', + ? '海外合计2023年及以前含港澳台、其后不含 | @Joey知行记' + : '海外合计2023年及以前含港澳台、其后不含；2024H1海外数量未披露 | @Joey知行记', ].join('\n'), ), ], diff --git a/js/charts/ppmt_working_capital_days.js b/js/charts/ppmt_working_capital_days.js index 5c47184..56deaee 100644 --- a/js/charts/ppmt_working_capital_days.js +++ b/js/charts/ppmt_working_capital_days.js @@ -78,7 +78,7 @@ export function workingCapitalDaysChart(rows, { width, height }) { })), graphic: [ ...watermarks(width, height), - footnote('数据来源：泡泡玛特财务指标（合并报表）；原始180/360天口径已换算为181/365天 | @思考的Joey'), + footnote('数据来源：泡泡玛特财务指标（合并报表）；原始180/360天口径已换算为181/365天 | @Joey知行记'), ], }; } diff --git a/js/charts/twoline.js b/js/charts/twoline.js index 7802a7a..14fa01a 100644 --- a/js/charts/twoline.js +++ b/js/charts/twoline.js @@ -55,7 +55,7 @@ export function twoLineChart(rows, { width, height }) { ], graphic: [ ...watermarks(width, height), - footnote('示例数据 | @思考的Joey'), + footnote('示例数据 | @Joey知行记'), ], }; } diff --git a/js/main.js b/js/main.js index e01345f..c0eb075 100644 --- a/js/main.js +++ b/js/main.js @@ -1,17 +1,25 @@ import { loadCSV } from './csv.js'; import { getChartBuilder } from './charts/index.js'; +import { downloadCanvas, mergeImages } from './merge.js'; import { createAppShell, renderAnchors, renderCards, + renderCartBar, renderCompanies, renderTabs, showChartError, + showMergePreview, } from './ui.js'; const instances = new Map(); const activeViews = new Map(); const chartRenderVersions = new Map(); +// 合并队列：instanceId → { instanceId, title, filename, dataUrl } +// dataUrl 是加购（及后续每次重渲染）时的快照，切换 tab 后实例被 dispose 也能照常导出 +const cart = new Map(); +let cartMode = 'pairs'; +let closePreview; let manifest; let shell; let state; @@ -123,6 +131,7 @@ async function renderChart(chart, version, chartVersion) { instances.set(chart.instanceId, instance); const { width, height } = el.getBoundingClientRect(); instance.setOption(getChartBuilder(chart.key)(rows, { width, height, view }), true); + captureSnapshot(chart); } catch (error) { if (version === renderVersion) showChartError(chart.instanceId, error.message); console.error(`渲染图表失败：${chart.id}`, error); @@ -157,6 +166,116 @@ function exportPNG(chartId, filename) { anchor.click(); } +/** 图表在合并队列中时，每次重渲染（切换视图、重载数据、resize）都刷新快照，保证所见即所得 */ +function captureSnapshot(chart) { + if (!cart.has(chart.instanceId)) return; + const instance = instances.get(chart.instanceId); + if (!instance) return; + cart.get(chart.instanceId).dataUrl = instance.getDataURL({ type: 'png', pixelRatio: 2, backgroundColor: '#fff' }); +} + +function toggleCart(chart) { + if (cart.delete(chart.instanceId)) { + updateCartButton(chart.instanceId); + } else { + const instance = instances.get(chart.instanceId); + if (!instance) return; + cart.set(chart.instanceId, { + instanceId: chart.instanceId, + title: chart.title, + filename: chart.filename || chart.title, + dataUrl: instance.getDataURL({ type: 'png', pixelRatio: 2, backgroundColor: '#fff' }), + }); + updateCartButton(chart.instanceId); + } + renderCart(); +} + +function updateCartButton(instanceId) { + const btn = document.querySelector(`[data-cart-id="${instanceId}"]`); + if (!btn) return; + const inCart = cart.has(instanceId); + btn.dataset.inCart = String(inCart); + btn.textContent = inCart ? '已加入 ✓' : '➕ 加入合并'; +} + +/** Map 保持插入序，删除后按新顺序重建即完成上移/下移 */ +function moveCartItem(instanceId, delta) { + const entries = [...cart.entries()]; + const from = entries.findIndex(([id]) => id === instanceId); + const to = from + delta; + if (from < 0 || to < 0 || to >= entries.length) return; + [entries[from], entries[to]] = [entries[to], entries[from]]; + cart.clear(); + entries.forEach(([id, item]) => cart.set(id, item)); + renderCart(); +} + +function clipName(name, max = 24) { + return name.length > max ? `${name.slice(0, max)}…` : name; +} + +/** 按当前模式把队列合成为一组 { canvas, filename, partial? }：pairs 两两合并，single 全部拼一张 */ +async function buildCompositions() { + const items = [...cart.values()]; + if (!items.length) return []; + if (cartMode === 'single') { + return [{ + canvas: await mergeImages(items.map((item) => item.dataUrl)), + filename: `${clipName(items[0].filename)}等${items.length}张合并`, + }]; + } + const pairs = []; + for (let i = 0; i < items.length; i += 2) { + const pair = items.slice(i, i + 2); + pairs.push({ + canvas: await mergeImages(pair.map((item) => item.dataUrl)), + filename: pair.map((item) => clipName(item.filename)).join('+'), + partial: pair.length === 1, + }); + } + return pairs; +} + +async function openMergePreview() { + const entries = await buildCompositions(); + if (!entries.length) return; + const notice = entries.some((entry) => entry.partial) ? '队列为奇数张，最后一张单独导出' : ''; + const download = (entry) => downloadCanvas(entry.canvas, entry.filename); + closePreview = showMergePreview(entries, { + notice, + onDownload: download, + onDownloadAll: () => entries.forEach((entry, index) => { + setTimeout(() => download(entry), index * 350); + }), + onClose: () => closePreview?.(), + }); +} + +function renderCart() { + renderCartBar(shell.cartBar, { + items: [...cart.values()], + mode: cartMode, + onModeChange: (mode) => { + cartMode = mode; + renderCart(); + }, + onMove: moveCartItem, + onRemove: (instanceId) => { + cart.delete(instanceId); + updateCartButton(instanceId); + renderCart(); + }, + onClear: () => { + const ids = [...cart.keys()]; + cart.clear(); + ids.forEach(updateCartButton); + renderCart(); + }, + onPreview: openMergePreview, + }); +} + function updateHash(nextState) { const hash = serializeHash(nextState); if (window.location.hash === hash) { @@ -189,6 +308,8 @@ function renderCurrent() { }); renderCards(shell.cards, charts, activeViews, { onExport: exportPNG, + isCarted: (instanceId) => cart.has(instanceId), + onToggleCart: toggleCart, onSelectView: (chart, view) => { if (activeViews.get(chart.viewKey) === view) return; activeViews.set(chart.viewKey, view); diff --git a/js/merge.js b/js/merge.js new file mode 100644 index 0000000..16ace8f --- /dev/null +++ b/js/merge.js @@ -0,0 +1,57 @@ +/** + * 图片纵向合成 —— 把多张图表 PNG 顺序拼接为一张竖版长图。 + * 公众号文章在手机上以竖版窗口预览，横版单图显示过小， + * 两张上下拼接后（2400×~2800）接近满屏，阅读体验明显更好。 + * 纯浏览器 Canvas API，无依赖。 + */ + +const DEFAULTS = { gap: 96, background: '#fff' }; // gap 为设备像素：@2x 导出下 96 = 视觉 48px + +function loadImage(src) { + return new Promise((resolve, reject) => { + const img = new Image(); + img.onload = () => resolve(img); + img.onerror = () => reject(new Error('图片解码失败')); + img.src = src; + }); +} + +/** + * 按顺序纵向拼接一组图片 dataURL，返回合成后的 canvas。 + * 宽度取各图最大值；宽度不一致的图等比缩放对齐（正常流程导出的图宽度一致，不会触发缩放）。 + */ +export async function mergeImages(sources, options = {}) { + const { gap, background } = { ...DEFAULTS, ...options }; + if (!sources.length) throw new Error('没有可合并的图片'); + + const images = await Promise.all(sources.map(loadImage)); + const width = Math.max(...images.map((img) => img.width)); + const heights = images.map((img) => Math.round(img.height * width / img.width)); + const height = heights.reduce((sum, h) => sum + h, 0) + gap * (images.length - 1); + + const canvas = document.createElement('canvas'); + canvas.width = width; + canvas.height = height; + const ctx = canvas.getContext('2d'); + ctx.fillStyle = background; + ctx.fillRect(0, 0, width, height); + + let y = 0; + images.forEach((img, index) => { + ctx.drawImage(img, 0, y, width, heights[index]); + y += heights[index] + gap; + }); + return canvas; +} + +/** canvas → PNG Blob 触发下载（Blob URL 比超长 dataURL 下载更稳） */ +export function downloadCanvas(canvas, filename) { + canvas.toBlob((blob) => { + const url = URL.createObjectURL(blob); + const anchor = document.createElement('a'); + anchor.href = url; + anchor.download = filename.endsWith('.png') ? filename : `${filename}.png`; + anchor.click(); + setTimeout(() => URL.revokeObjectURL(url), 10_000); + }, 'image/png'); +} diff --git a/js/theme.js b/js/theme.js index 5885f78..ce2c82f 100644 --- a/js/theme.js +++ b/js/theme.js @@ -3,7 +3,7 @@ * 所有图表共用这一份配置，保证视觉一致性 */ -export const WATERMARK_TEXT = '@思考的Joey'; +export const WATERMARK_TEXT = '@Joey知行记'; // 字体名用单引号：SVG 渲染时字符串会被塞进 style="..." 属性， // 用双引号会提前闭合属性、生成非法 SVG（canvas 渲染看不出来，导出 SVG 时才炸） diff --git a/js/ui.js b/js/ui.js index fb116ad..6750768 100644 --- a/js/ui.js +++ b/js/ui.js @@ -28,9 +28,11 @@ export function createAppShell(root, { onReload }) { content.append(tabs, cards); const chartNav = element('aside', 'sidebar chart-sidebar'); layout.append(companyNav, content, chartNav); - root.append(layout, reloadButton); + const cartBar = element('div', 'cart-bar'); + cartBar.hidden = true; + root.append(layout, reloadButton, cartBar); - return { companyNav, tabs, cards, chartNav }; + return { companyNav, tabs, cards, chartNav, cartBar }; } export function renderCompanies(container, companies, activeCompanyId, onSelect) { @@ -57,7 +59,7 @@ export function renderTabs(container, tabs, activeTabId, onSelect) { }); } -export function renderCards(container, charts, activeViews, { onExport, onSelectView }) { +export function renderCards(container, charts, activeViews, { onExport, isCarted, onToggleCart, onSelectView }) { container.replaceChildren(); if (!charts.length) { container.append(element('p', 'empty-state', '该分类暂时没有图表。')); @@ -92,7 +94,13 @@ export function renderCards(container, charts, activeViews, { onExport, onSelect bar.append(switcher); } - bar.append(button('导出 PNG', { + const cartButton = button(isCarted?.(chart.instanceId) ? '已加入 ✓' : '➕ 加入合并', { + onClick: () => onToggleCart?.(chart), + className: 'cart-button', + }); + cartButton.dataset.cartId = chart.instanceId; + cartButton.dataset.inCart = String(Boolean(isCarted?.(chart.instanceId))); + bar.append(cartButton, button('导出 PNG', { onClick: () => onExport(chart.instanceId, chart.filename || chart.title), className: 'export-button', })); @@ -121,3 +129,95 @@ export function showChartError(chartId, message) { if (!chartEl) return; chartEl.replaceChildren(element('div', 'chart-error', message)); } + +const CART_MODES = [ + ['pairs', '两两合并'], + ['single', '合并为一张'], +]; + +export function renderCartBar(container, { items = [], mode, onModeChange, onMove, onRemove, onClear, onPreview }) { + container.replaceChildren(); + if (!items.length) { + container.hidden = true; + return; + } + container.hidden = false; + + container.append(element('span', 'cart-label', `合并队列 ${items.length}`)); + + const chips = element('div', 'cart-chips'); + items.forEach((item, index) => { + const chip = element('div', 'cart-chip'); + chip.title = item.title; + const up = button('↑', { onClick: () => onMove?.(item.instanceId, -1), className: 'cart-chip-button' }); + up.disabled = index === 0; + const down = button('↓', { onClick: () => onMove?.(item.instanceId, 1), className: 'cart-chip-button' }); + down.disabled = index === items.length - 1; + chip.append( + element('span', 'cart-chip-name', item.title), + up, + down, + button('✕', { onClick: () => onRemove?.(item.instanceId), className: 'cart-chip-button' }), + ); + chips.append(chip); + }); + container.append(chips); + + container.append(element('span', 'cart-divider')); + + const modes = element('div', 'cart-modes'); + CART_MODES.forEach(([value, label]) => { + modes.append(button(label, { + active: mode === value, + onClick: () => onModeChange?.(value), + className: 'cart-mode-button', + })); + }); + container.append(modes); + + container.append(button('预览导出', { onClick: () => onPreview?.(), className: 'cart-export-button' })); + container.append(button('清空', { onClick: () => onClear?.(), className: 'cart-clear-button' })); +} + +export function showMergePreview(entries, { notice = '', onDownload, onDownloadAll, onClose }) { + const overlay = element('div', 'modal-overlay'); + const modal = element('div', 'modal'); + + const head = element('div', 'modal-head'); + head.append(element('h2', 'modal-title', `合并预览 · ${entries.length} 张`)); + if (notice) head.append(element('span', 'modal-notice', notice)); + head.append(button('✕', { onClick: onClose, className: 'modal-close' })); + + const body = element('div', 'modal-body'); + entries.forEach((entry) => { + const item = element('div', 'preview-item'); + entry.canvas.className = 'preview-canvas'; + item.append(entry.canvas); + item.append(button(`⬇ 下载：${entry.filename}.png`, { + onClick: () => onDownload?.(entry), + className: 'export-button', + })); + body.append(item); + }); + + const foot = element('div', 'modal-foot'); + foot.append(button('全部下载', { onClick: () => onDownloadAll?.(), className: 'primary-button' })); + foot.append(button('取消', { onClick: onClose, className: 'export-button' })); + + modal.append(head, body, foot); + overlay.append(modal); + overlay.addEventListener('click', (event) => { + if (event.target === overlay) onClose?.(); + }); + document.addEventListener('keydown', onKeydown); + document.body.append(overlay); + + function onKeydown(event) { + if (event.key === 'Escape') onClose?.(); + } + + return () => { + document.removeEventListener('keydown', onKeydown); + overlay.remove(); + }; +} diff --git a/manifest.json b/manifest.json index cae879e..c3ab12b 100644 --- a/manifest.json +++ b/manifest.json @@ -32,6 +32,10 @@ "ppmt-channel-share-apac": { "key": "ppmt-channel-share-apac", "title": "亚太区渠道收入占比", "defaultView": "all", "views": { "all": "data/ppmt/ppmt_channel_share_apac.csv", "annual": "data/ppmt/ppmt_channel_share_apac_annual.csv", "halfyear": "data/ppmt/ppmt_channel_share_apac_halfyear.csv" }, "height": 680, "filename": "泡泡玛特亚太区渠道收入占比" }, "ppmt-channel-share-americas": { "key": "ppmt-channel-share-americas", "title": "美洲区渠道收入占比", "defaultView": "all", "views": { "all": "data/ppmt/ppmt_channel_share_americas.csv", "annual": "data/ppmt/ppmt_channel_share_americas_annual.csv", "halfyear": "data/ppmt/ppmt_channel_share_americas_halfyear.csv" }, "height": 680, "filename": "泡泡玛特美洲区渠道收入占比" }, "ppmt-channel-share-europe": { "key": "ppmt-channel-share-europe", "title": "欧洲及其他区渠道收入占比", "defaultView": "all", "views": { "all": "data/ppmt/ppmt_channel_share_europe.csv", "annual": "data/ppmt/ppmt_channel_share_europe_annual.csv", "halfyear": "data/ppmt/ppmt_channel_share_europe_halfyear.csv" }, "height": 680, "filename": "泡泡玛特欧洲及其他区渠道收入占比" }, + "ppmt-channel-amount-china": { "key": "ppmt-channel-amount-china", "title": "中国区渠道收入金额", "defaultView": "all", "views": { "all": "data/ppmt/ppmt_channel_amount_china.csv", "annual": "data/ppmt/ppmt_channel_amount_china_annual.csv", "halfyear": "data/ppmt/ppmt_channel_amount_china_halfyear.csv" }, "height": 680, "filename": "泡泡玛特中国区渠道收入金额" }, + "ppmt-channel-amount-apac": { "key": "ppmt-channel-amount-apac", "title": "亚太区渠道收入金额", "defaultView": "all", "views": { "all": "data/ppmt/ppmt_channel_amount_apac.csv", "annual": "data/ppmt/ppmt_channel_amount_apac_annual.csv", "halfyear": "data/ppmt/ppmt_channel_amount_apac_halfyear.csv" }, "height": 680, "filename": "泡泡玛特亚太区渠道收入金额" }, + "ppmt-channel-amount-americas": { "key": "ppmt-channel-amount-americas", "title": "美洲区渠道收入金额", "defaultView": "all", "views": { "all": "data/ppmt/ppmt_channel_amount_americas.csv", "annual": "data/ppmt/ppmt_channel_amount_americas_annual.csv", "halfyear": "data/ppmt/ppmt_channel_amount_americas_halfyear.csv" }, "height": 680, "filename": "泡泡玛特美洲区渠道收入金额" }, + "ppmt-channel-amount-europe": { "key": "ppmt-channel-amount-europe", "title": "欧洲及其他区渠道收入金额", "defaultView": "all", "views": { "all": "data/ppmt/ppmt_channel_amount_europe.csv", "annual": "data/ppmt/ppmt_channel_amount_europe_annual.csv", "halfyear": "data/ppmt/ppmt_channel_amount_europe_halfyear.csv" }, "height": 680, "filename": "泡泡玛特欧洲及其他区渠道收入金额" }, "ppmt-stores-retail": { "key": "ppmt-stores-retail", "title": "分地区零售门店数量与同比增速", "defaultView": "all", "views": { "all": "data/ppmt/ppmt_stores_retail.csv", "annual": "data/ppmt/ppmt_stores_retail_annual.csv", "halfyear": "data/ppmt/ppmt_stores_retail_halfyear.csv" }, "height": 680, "filename": "泡泡玛特分地区零售门店数量与同比增速" }, "ppmt-stores-retail-share": { "key": "ppmt-stores-retail-share", "title": "分地区零售门店数量占比", "defaultView": "all", "views": { "all": "data/ppmt/ppmt_stores_retail_share.csv", "annual": "data/ppmt/ppmt_stores_retail_share_annual.csv", "halfyear": "data/ppmt/ppmt_stores_retail_share_halfyear.csv" }, "height": 680, "filename": "泡泡玛特分地区零售门店数量占比" }, "ppmt-retail-store-revenue": { "key": "ppmt-retail-store-revenue", "title": "各地区零售店单店收入", "defaultView": "all", "views": { "all": "data/ppmt/ppmt_retail_store_revenue.csv", "annual": "data/ppmt/ppmt_retail_store_revenue_annual.csv", "halfyear": "data/ppmt/ppmt_retail_store_revenue_halfyear.csv" }, "height": 680, "filename": "泡泡玛特各地区零售店单店收入" }, @@ -45,7 +49,7 @@ { "id": "expense", "name": "费用率", "chartRefs": ["ppmt-margins", "ppmt-expense-structure"] }, { "id": "balance-sheet", "name": "资产负债", "chartRefs": ["ppmt-assets", "ppmt-inventory", "ppmt-liquidity-working-capital", "ppmt-working-capital-days"] }, { "id": "ip-category", "name": "IP 与品类", "chartRefs": ["ppmt-ip", "ppmt-ip-share", "ppmt-ip-share-history", "ppmt-ip-ex-monsters", "ppmt-category"] }, - { "id": "region-channel", "name": "区域渠道", "chartRefs": ["ppmt-region-channel", "ppmt-region-yoy", "ppmt-region-yoy-timeseries", "ppmt-channel-revenue", "ppmt-channel-share", "ppmt-channel-share-china", "ppmt-channel-share-apac", "ppmt-channel-share-americas", "ppmt-channel-share-europe", "ppmt-stores-retail", "ppmt-stores-retail-share", "ppmt-stores-robot", "ppmt-region-share"] }, + { "id": "region-channel", "name": "区域渠道", "chartRefs": ["ppmt-region-channel", "ppmt-region-yoy", "ppmt-region-yoy-timeseries", "ppmt-channel-revenue", "ppmt-channel-share", "ppmt-channel-share-china", "ppmt-channel-amount-china", "ppmt-channel-share-apac", "ppmt-channel-amount-apac", "ppmt-channel-share-americas", "ppmt-channel-amount-americas", "ppmt-channel-share-europe", "ppmt-channel-amount-europe", "ppmt-stores-retail", "ppmt-stores-retail-share", "ppmt-stores-robot", "ppmt-region-share"] }, { "id": "store-revenue", "name": "单店收入", "chartRefs": ["ppmt-retail-store-revenue", "ppmt-robot-store-revenue"] } ] }, diff --git a/scripts/normalize_ppmt_financials.mjs b/scripts/normalize_ppmt_financials.mjs index d49f3d3..018bc06 100644 --- a/scripts/normalize_ppmt_financials.mjs +++ b/scripts/normalize_ppmt_financials.mjs @@ -819,6 +819,18 @@ Object.entries(REGION_SERIES).forEach(([regionKey, seriesKeys]) => { ...Object.fromEntries(seriesKeys.map((key) => [key, 1])), total_revenue: 2, }); + // 金额视图与占比视图同源（披露金额，非占比×总收入还原），供分地区渠道金额堆叠柱图使用。 + const amountViewsWithTotal = Object.fromEntries(Object.entries(amountViews).map(([view, rows]) => [ + view, + rows.map((row) => ({ + ...row, + total_revenue: seriesKeys.reduce((sum, key) => sum + row[key], 0), + })), + ])); + writeRuntimeViews(`ppmt_channel_amount_${regionKey}`, ['period', ...seriesKeys, 'total_revenue'], amountViewsWithTotal, { + ...Object.fromEntries(seriesKeys.map((key) => [key, 1])), + total_revenue: 2, + }); }); console.log('已生成四地区渠道收入占比（线上细分）的全部、年度、半年 CSV。');