feat: 搭建二期项目架构
This commit is contained in:
R524809
+171
-78
@@ -1,99 +1,192 @@
|
||||
import { loadCSV } from './csv.js';
|
||||
import { inventoryChart } from './charts/inventory.js';
|
||||
import { marginChart } from './charts/margin.js';
|
||||
import { twoLineChart } from './charts/twoline.js';
|
||||
import { growthChart } from './charts/growth.js';
|
||||
import { fxChart } from './charts/fx.js';
|
||||
import { assetsChart } from './charts/ppmt_assets.js';
|
||||
import { profitChart } from './charts/ppmt_profit.js';
|
||||
import { ipChart } from './charts/ppmt_ip.js';
|
||||
import { categoryChart } from './charts/ppmt_category.js';
|
||||
import { sankeyChart } from './charts/ppmt_sankey.js';
|
||||
import { regionChannelYoyChart } from './charts/ppmt_region_yoy.js';
|
||||
import { ppmtGrowthChart } from './charts/ppmt_growth.js';
|
||||
import { ppmtMarginsChart } from './charts/ppmt_margins.js';
|
||||
import { ppmtBridgeChart } from './charts/ppmt_bridge.js';
|
||||
import { ppmtCoreProfitChart } from './charts/ppmt_core_profit.js';
|
||||
import { ppmtCoreMarginChart } from './charts/ppmt_core_margin.js';
|
||||
import { ppmtIpShareChart } from './charts/ppmt_ip_share.js';
|
||||
import { ppmtIpShareHistoryChart } from './charts/ppmt_ip_share_history.js';
|
||||
import { ppmtIpExMonstersChart } from './charts/ppmt_ip_ex_monsters.js';
|
||||
|
||||
/** 图表清单：加新图只需在这里加一行 */
|
||||
const CHARTS = [
|
||||
// 示例图表
|
||||
{ id: 'chart-inventory', csv: 'data/inventory.csv', build: inventoryChart, height: 620 },
|
||||
{ id: 'chart-margin', csv: 'data/margin.csv', build: marginChart, height: 620 },
|
||||
{ id: 'chart-twoline', csv: 'data/margin.csv', build: twoLineChart, height: 620 },
|
||||
{ id: 'chart-growth', csv: 'data/growth.csv', build: growthChart, height: 700 },
|
||||
{ id: 'chart-fx', csv: 'data/fx.csv', build: fxChart, height: 780 },
|
||||
// 泡泡玛特图表
|
||||
{ id: 'chart-ppmt-assets', csv: 'data/ppmt_assets.csv', build: assetsChart, height: 680 },
|
||||
{ id: 'chart-ppmt-profit', csv: 'data/ppmt_profit.csv', build: profitChart, height: 680 },
|
||||
{ id: 'chart-ppmt-ip', csv: 'data/ppmt_ip.csv', build: ipChart, height: 720 },
|
||||
{ id: 'chart-ppmt-category', csv: 'data/ppmt_category.csv', build: categoryChart, height: 680 },
|
||||
{ id: 'chart-ppmt-sankey', csv: 'data/ppmt_sankey_2026h1.csv', build: sankeyChart, height: 800 },
|
||||
{ id: 'chart-ppmt-region-yoy', csv: 'data/ppmt_region_channel_yoy.csv', build: regionChannelYoyChart, height: 620 },
|
||||
{ id: 'chart-ppmt-growth', csv: 'data/ppmt_growth.csv', build: ppmtGrowthChart, height: 700 },
|
||||
{ id: 'chart-ppmt-margins', csv: 'data/ppmt_margins.csv', build: ppmtMarginsChart, height: 680 },
|
||||
{ id: 'chart-ppmt-bridge', csv: 'data/ppmt_margin_bridge.csv', build: ppmtBridgeChart, height: 700 },
|
||||
{ id: 'chart-ppmt-core', csv: 'data/ppmt_core_profit.csv', build: ppmtCoreProfitChart, height: 720 },
|
||||
{ id: 'chart-ppmt-core-margin', csv: 'data/ppmt_core_margin.csv', build: ppmtCoreMarginChart, height: 680 },
|
||||
{ id: 'chart-ppmt-ip-share', csv: 'data/ppmt_ip_share_2026h1.csv', build: ppmtIpShareChart, height: 720 },
|
||||
{ id: 'chart-ppmt-ip-share-history', csv: 'data/ppmt_ip_share_history.csv', build: ppmtIpShareHistoryChart, height: 700 },
|
||||
{ id: 'chart-ppmt-ip-ex-monsters', csv: 'data/ppmt_ip_ex_monsters.csv', build: ppmtIpExMonstersChart, height: 700 },
|
||||
];
|
||||
import { getChartBuilder } from './charts/index.js';
|
||||
import {
|
||||
createAppShell,
|
||||
renderAnchors,
|
||||
renderCards,
|
||||
renderCompanies,
|
||||
renderTabs,
|
||||
showChartError,
|
||||
} from './ui.js';
|
||||
|
||||
const instances = new Map();
|
||||
const activeViews = new Map();
|
||||
let manifest;
|
||||
let shell;
|
||||
let state;
|
||||
let renderVersion = 0;
|
||||
let cacheToken = Date.now();
|
||||
|
||||
async function render(spec) {
|
||||
const el = document.getElementById(spec.id);
|
||||
function validateManifest(value) {
|
||||
if (!Array.isArray(value?.companies) || value.companies.length === 0) {
|
||||
throw new Error('manifest 缺少 companies');
|
||||
}
|
||||
|
||||
const chartIds = new Set();
|
||||
value.companies.forEach((company) => {
|
||||
if (!company.id || !Array.isArray(company.tabs)) throw new Error('manifest 中存在无效公司配置');
|
||||
const tabIds = new Set();
|
||||
company.tabs.forEach((tab) => {
|
||||
if (!tab.id || tabIds.has(tab.id)) throw new Error(`公司 ${company.id} 的 tab id 重复或为空`);
|
||||
tabIds.add(tab.id);
|
||||
(tab.charts || []).forEach((chart) => {
|
||||
if (!chart.id || chartIds.has(chart.id)) throw new Error(`图表 id 重复或为空：${chart.id || '(空)'}`);
|
||||
if (!getChartBuilder(chart.key)) throw new Error(`图表 ${chart.id} 引用了未注册 key：${chart.key}`);
|
||||
if (Boolean(chart.csv) === Boolean(chart.views)) throw new Error(`图表 ${chart.id} 必须声明 csv 或 views 之一`);
|
||||
if (chart.views && (!chart.defaultView || !chart.views[chart.defaultView])) {
|
||||
throw new Error(`图表 ${chart.id} 的 defaultView 无效`);
|
||||
}
|
||||
chartIds.add(chart.id);
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function getCompany(companyId) {
|
||||
return manifest.companies.find((company) => company.id === companyId) || manifest.companies[0];
|
||||
}
|
||||
|
||||
function getTab(company, tabId) {
|
||||
return company.tabs.find((tab) => tab.id === tabId) || company.tabs[0];
|
||||
}
|
||||
|
||||
function parseHash() {
|
||||
const [path = '', query = ''] = window.location.hash.replace(/^#\/?/, '').split('?');
|
||||
const [companyId, tabId, chartId] = path.split('/').filter(Boolean).map(decodeURIComponent);
|
||||
const params = new URLSearchParams(query);
|
||||
return { companyId, tabId, chartId, view: params.get('view') || undefined };
|
||||
}
|
||||
|
||||
function normalizeState(nextState) {
|
||||
const company = getCompany(nextState.companyId);
|
||||
const tab = getTab(company, nextState.tabId);
|
||||
const chart = tab.charts.find((item) => item.id === nextState.chartId);
|
||||
const view = chart?.views && chart.views[nextState.view]
|
||||
? nextState.view
|
||||
: chart?.defaultView;
|
||||
if (chart?.views && view) activeViews.set(chart.id, view);
|
||||
return { companyId: company.id, tabId: tab.id, chartId: chart?.id, view };
|
||||
}
|
||||
|
||||
function serializeHash(nextState) {
|
||||
const path = [nextState.companyId, nextState.tabId, nextState.chartId]
|
||||
.filter(Boolean)
|
||||
.map(encodeURIComponent)
|
||||
.join('/');
|
||||
return `#/${path}${nextState.view ? `?view=${encodeURIComponent(nextState.view)}` : ''}`;
|
||||
}
|
||||
|
||||
function disposeAll() {
|
||||
instances.forEach((chart) => chart.dispose());
|
||||
instances.clear();
|
||||
}
|
||||
|
||||
function chartSource(chart) {
|
||||
if (!chart.views) return chart.csv;
|
||||
const view = activeViews.get(chart.id) || chart.defaultView;
|
||||
return chart.views[view];
|
||||
}
|
||||
|
||||
async function renderChart(chart, version) {
|
||||
const el = document.getElementById(`chart-${chart.id}`);
|
||||
if (!el) return;
|
||||
const source = chartSource(chart);
|
||||
|
||||
try {
|
||||
// 加时间戳绕过缓存，改完 CSV 刷新就能看到
|
||||
const rows = await loadCSV(`${spec.csv}?t=${Date.now()}`);
|
||||
const chart = instances.get(spec.id) || echarts.init(el, null, { renderer: 'canvas' });
|
||||
instances.set(spec.id, chart);
|
||||
const rows = await loadCSV(`${source}?t=${cacheToken}`);
|
||||
if (version !== renderVersion || !document.body.contains(el)) return;
|
||||
|
||||
const instance = echarts.init(el, null, { renderer: 'canvas' });
|
||||
instances.set(chart.id, instance);
|
||||
const { width, height } = el.getBoundingClientRect();
|
||||
chart.setOption(spec.build(rows, { width, height }), true);
|
||||
} catch (err) {
|
||||
el.innerHTML = `<div class="chart-error">${err.message}</div>`;
|
||||
console.error(spec.id, err);
|
||||
instance.setOption(getChartBuilder(chart.key)(rows, { width, height }), true);
|
||||
} catch (error) {
|
||||
if (version === renderVersion) showChartError(chart.id, error.message);
|
||||
console.error(`渲染图表失败：${chart.id}`, error);
|
||||
}
|
||||
}
|
||||
|
||||
async function renderAll() {
|
||||
await Promise.all(CHARTS.map(render));
|
||||
function exportPNG(chartId, filename) {
|
||||
const instance = instances.get(chartId);
|
||||
if (!instance) return;
|
||||
const anchor = document.createElement('a');
|
||||
anchor.href = instance.getDataURL({ type: 'png', pixelRatio: 2, backgroundColor: '#fff' });
|
||||
anchor.download = `${filename}.png`;
|
||||
anchor.click();
|
||||
}
|
||||
|
||||
/** 导出当前图为 PNG，2 倍图，微信公众号里够清晰 */
|
||||
function exportPNG(id, filename) {
|
||||
const chart = instances.get(id);
|
||||
if (!chart) return;
|
||||
const url = chart.getDataURL({ type: 'png', pixelRatio: 2, backgroundColor: '#fff' });
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = `${filename}.png`;
|
||||
a.click();
|
||||
function updateHash(nextState) {
|
||||
const hash = serializeHash(nextState);
|
||||
if (window.location.hash === hash) {
|
||||
state = normalizeState(nextState);
|
||||
renderCurrent();
|
||||
return;
|
||||
}
|
||||
window.location.hash = hash;
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
renderAll();
|
||||
function selectAnchor(chartId) {
|
||||
state = { ...state, chartId, view: activeViews.get(chartId) };
|
||||
history.replaceState(null, '', serializeHash(state));
|
||||
document.getElementById(`card-${chartId}`)?.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||||
}
|
||||
|
||||
document.getElementById('btn-reload').addEventListener('click', renderAll);
|
||||
function renderCurrent() {
|
||||
state = normalizeState(state);
|
||||
const company = getCompany(state.companyId);
|
||||
const tab = getTab(company, state.tabId);
|
||||
const version = ++renderVersion;
|
||||
disposeAll();
|
||||
|
||||
document.querySelectorAll('[data-export]').forEach((btn) => {
|
||||
btn.addEventListener('click', () => {
|
||||
exportPNG(btn.dataset.export, btn.dataset.filename || btn.dataset.export);
|
||||
renderCompanies(shell.companyNav, manifest.companies, company.id, (companyId) => {
|
||||
updateHash({ companyId });
|
||||
});
|
||||
renderTabs(shell.tabs, company.tabs, tab.id, (tabId) => {
|
||||
updateHash({ companyId: company.id, tabId });
|
||||
});
|
||||
renderCards(shell.cards, tab.charts || [], activeViews, {
|
||||
onExport: exportPNG,
|
||||
onSelectView: (chartId, view) => {
|
||||
activeViews.set(chartId, view);
|
||||
updateHash({ companyId: company.id, tabId: tab.id, chartId, view });
|
||||
},
|
||||
});
|
||||
renderAnchors(shell.chartNav, tab.charts || [], selectAnchor);
|
||||
Promise.all((tab.charts || []).map((chart) => renderChart(chart, version)));
|
||||
}
|
||||
|
||||
async function start() {
|
||||
try {
|
||||
const response = await fetch('manifest.json');
|
||||
if (!response.ok) throw new Error(`读取 manifest 失败：${response.status}`);
|
||||
manifest = await response.json();
|
||||
validateManifest(manifest);
|
||||
shell = createAppShell(document.getElementById('app'), {
|
||||
onReload: () => {
|
||||
cacheToken = Date.now();
|
||||
renderCurrent();
|
||||
},
|
||||
});
|
||||
});
|
||||
state = normalizeState(parseHash());
|
||||
if (!window.location.hash) history.replaceState(null, '', serializeHash(state));
|
||||
renderCurrent();
|
||||
} catch (error) {
|
||||
document.getElementById('app').textContent = `初始化失败：${error.message}`;
|
||||
console.error(error);
|
||||
}
|
||||
}
|
||||
|
||||
let timer;
|
||||
window.addEventListener('resize', () => {
|
||||
clearTimeout(timer);
|
||||
// resize 后水印数量要跟着画布变，所以整体重绘而不是 chart.resize()
|
||||
timer = setTimeout(renderAll, 200);
|
||||
});
|
||||
document.addEventListener('DOMContentLoaded', start);
|
||||
|
||||
window.addEventListener('hashchange', () => {
|
||||
if (!manifest) return;
|
||||
state = normalizeState(parseHash());
|
||||
renderCurrent();
|
||||
});
|
||||
|
||||
let resizeTimer;
|
||||
window.addEventListener('resize', () => {
|
||||
if (!shell) return;
|
||||
clearTimeout(resizeTimer);
|
||||
resizeTimer = setTimeout(renderCurrent, 200);
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user