html-anything/next/src/lib/templates/skills/data-report/example.html at main · nexu-io/html-anything · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>数据周报 · 2025 年 5 月</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Noto+Sans+SC:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
<style>
  body { background:#fafaf7; font-family:'Inter','Noto Sans SC',sans-serif; color:#15140f; -webkit-font-smoothing:antialiased; }
  .num { font-family:'Inter',sans-serif; font-feature-settings:'tnum' on; letter-spacing:-0.02em; }
  .section h2 { font-size:11px; font-weight:700; letter-spacing:0.18em; text-transform:uppercase; color:#5a564e; margin:0 0 16px; }
  table { border-collapse:collapse; width:100%; font-size:13px; }
  thead th { background:#f4f1ec; text-align:left; padding:10px 14px; font-size:11px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:#5a564e; position:sticky; top:0; }
  tbody td { padding:10px 14px; border-bottom:1px solid #e7e5e0; }
  tbody tr:nth-child(even) { background:#fbfaf7; }
  tbody tr:hover { background:#f4f1ec; }
  .delta-up { color:#1f7a3a; font-weight:600; }
  .delta-down { color:#9c2a25; font-weight:600; }
</style>
</head>
<body>

<div class="max-w-6xl mx-auto px-8 py-12">

  <header class="pb-7 mb-8 border-b border-[#e7e5e0]">
    <div class="flex items-baseline justify-between flex-wrap gap-3">
      <div>
        <div class="text-[11px] font-semibold tracking-[0.22em] uppercase text-[#c96442] mb-2">Weekly Report · Week 19</div>
        <h1 class="text-4xl font-extrabold tracking-tight">数据周报 · 2025 年 5 月</h1>
      </div>
      <div class="text-xs text-[#5a564e] text-right">
        <div>来源: <span class="font-semibold text-[#15140f]">内部 BI</span></div>
        <div>截止 <span class="font-mono text-[#15140f]">2025-05-11</span></div>
      </div>
    </div>
    <p class="mt-3 text-sm text-[#5a564e] max-w-2xl leading-relaxed">本周关键指标全部向好。MAU 同比增长 184%, 付费转化与流失双双改善。</p>
  </header>

  <section class="section mb-10">
    <h2>核心指标 · KPI</h2>
    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
      <div class="rounded-2xl bg-white p-5 border border-[#e7e5e0] shadow-[0_1px_0_#f0ece5]">
        <div class="text-[11px] font-semibold uppercase tracking-wider text-[#5a564e] mb-2">月活用户 · MAU</div>
        <div class="text-3xl font-extrabold num">23,950</div>
        <div class="text-xs mt-2"><span class="delta-up">▲ 16.0%</span> <span class="text-[#5a564e]">vs 上月</span></div>
        <div class="mt-3" style="position:relative;height:40px"><canvas id="kpi1"></canvas></div>
      </div>
      <div class="rounded-2xl bg-white p-5 border border-[#e7e5e0] shadow-[0_1px_0_#f0ece5]">
        <div class="text-[11px] font-semibold uppercase tracking-wider text-[#5a564e] mb-2">新增 · Signups</div>
        <div class="text-3xl font-extrabold num">4,250</div>
        <div class="text-xs mt-2"><span class="delta-up">▲ 15.5%</span> <span class="text-[#5a564e]">vs 上月</span></div>
        <div class="mt-3" style="position:relative;height:40px"><canvas id="kpi2"></canvas></div>
      </div>
      <div class="rounded-2xl bg-white p-5 border border-[#e7e5e0] shadow-[0_1px_0_#f0ece5]">
        <div class="text-[11px] font-semibold uppercase tracking-wider text-[#5a564e] mb-2">付费 · Paying</div>
        <div class="text-3xl font-extrabold num">2,418 <span class="text-base text-[#5a564e]">/ 10.1%</span></div>
        <div class="text-xs mt-2"><span class="delta-up">▲ 18.5%</span> <span class="text-[#5a564e]">vs 上月</span></div>
        <div class="mt-3" style="position:relative;height:40px"><canvas id="kpi3"></canvas></div>
      </div>
      <div class="rounded-2xl bg-white p-5 border border-[#e7e5e0] shadow-[0_1px_0_#f0ece5]">
        <div class="text-[11px] font-semibold uppercase tracking-wider text-[#5a564e] mb-2">流失 · Churn</div>
        <div class="text-3xl font-extrabold num">1.8%</div>
        <div class="text-xs mt-2"><span class="delta-up">▼ 0.1pp</span> <span class="text-[#5a564e]">vs 上月</span></div>
        <div class="mt-3" style="position:relative;height:40px"><canvas id="kpi4"></canvas></div>
      </div>
    </div>
  </section>

  <section class="section mb-10">
    <h2>趋势 · Growth</h2>
    <div class="grid lg:grid-cols-3 gap-4">
      <div class="lg:col-span-2 rounded-2xl bg-white p-5 border border-[#e7e5e0]">
        <div class="text-sm font-semibold mb-3">MAU & 付费用户增长</div>
        <div style="position:relative;height:260px"><canvas id="chart-main"></canvas></div>
      </div>
      <div class="rounded-2xl bg-white p-5 border border-[#e7e5e0]">
        <div class="text-sm font-semibold mb-3">流失率 · 月度</div>
        <div style="position:relative;height:260px"><canvas id="chart-churn"></canvas></div>
      </div>
    </div>
  </section>

  <section class="section mb-10">
    <h2>明细 · Raw data</h2>
    <div class="rounded-2xl border border-[#e7e5e0] overflow-hidden bg-white">
      <table>
        <thead><tr><th>月份</th><th class="text-right">MAU</th><th class="text-right">新增</th><th class="text-right">付费</th><th class="text-right">流失率</th></tr></thead>
        <tbody id="rows"></tbody>
      </table>
    </div>
  </section>

  <section class="section mb-10">
    <h2>洞察 · Insights</h2>
    <div class="grid md:grid-cols-3 gap-4">
      <div class="rounded-2xl bg-white p-5 border border-[#e7e5e0]">
        <div class="text-3xl mb-2">📈</div>
        <div class="font-semibold mb-1.5">MAU 半年增长 184%</div>
        <div class="text-sm text-[#5a564e] leading-relaxed">主要来自小红书自然流量, 单条爆款笔记带来 8k+ 新增。</div>
      </div>
      <div class="rounded-2xl bg-white p-5 border border-[#e7e5e0]">
        <div class="text-3xl mb-2">💰</div>
        <div class="font-semibold mb-1.5">付费转化 7.3% → 10.1%</div>
        <div class="text-sm text-[#5a564e] leading-relaxed">团队 Pro 套餐贡献最大。新引导流程 + 30 天试用是关键。</div>
      </div>
      <div class="rounded-2xl bg-white p-5 border border-[#e7e5e0]">
        <div class="text-3xl mb-2">🎯</div>
        <div class="font-semibold mb-1.5">月流失 3.4% → 1.8%</div>
        <div class="text-sm text-[#5a564e] leading-relaxed">AI 起草功能上线后, 沉默用户激活率翻倍。</div>
      </div>
    </div>
  </section>

  <details class="mt-12 rounded-xl border border-[#e7e5e0] bg-white p-5">
    <summary class="cursor-pointer text-sm font-semibold text-[#5a564e] flex items-center justify-between">
      方法论 · Methodology <span class="text-[#5a564e]">▾</span>
    </summary>
    <div class="text-xs text-[#5a564e] leading-relaxed mt-3 max-w-3xl">
      MAU = 30 天内至少打开一次产品的去重用户。付费 = 当月有效付费订阅。流失率 = 上月付费但本月未续的比例。数据来自内部 BI, 已剔除测试账号与 bot。
    </div>
  </details>

</div>

<script>
const data = [
  {month:'2024-09', mau:8420,  signups:1240, paying:612,  churn:0.034},
  {month:'2024-10', mau:9180,  signups:1380, paying:701,  churn:0.031},
  {month:'2024-11', mau:10240, signups:1610, paying:840,  churn:0.028},
  {month:'2024-12', mau:11800, signups:1890, paying:1012, churn:0.025},
  {month:'2025-01', mau:13620, signups:2240, paying:1218, churn:0.023},
  {month:'2025-02', mau:15440, signups:2680, paying:1455, churn:0.021},
  {month:'2025-03', mau:17890, signups:3120, paying:1722, churn:0.020},
  {month:'2025-04', mau:20640, signups:3680, paying:2041, churn:0.019},
  {month:'2025-05', mau:23950, signups:4250, paying:2418, churn:0.018},
];

document.getElementById('rows').innerHTML = data.map(d => `
  <tr>
    <td class="font-mono text-xs">${d.month}</td>
    <td class="text-right num">${d.mau.toLocaleString()}</td>
    <td class="text-right num">${d.signups.toLocaleString()}</td>
    <td class="text-right num">${d.paying.toLocaleString()}</td>
    <td class="text-right num">${(d.churn*100).toFixed(1)}%</td>
  </tr>
`).join('');

const sparkOpts = { responsive:true, maintainAspectRatio:false, plugins:{legend:{display:false},tooltip:{enabled:false}}, scales:{x:{display:false},y:{display:false}}, elements:{point:{radius:0},line:{tension:0.4,borderWidth:2}} };
new Chart(document.getElementById('kpi1'), { type:'line', data:{labels:data.map(d=>d.month), datasets:[{data:data.map(d=>d.mau), borderColor:'#c96442', fill:false}]}, options:sparkOpts });
new Chart(document.getElementById('kpi2'), { type:'line', data:{labels:data.map(d=>d.month), datasets:[{data:data.map(d=>d.signups), borderColor:'#e9b94a', fill:false}]}, options:sparkOpts });
new Chart(document.getElementById('kpi3'), { type:'line', data:{labels:data.map(d=>d.month), datasets:[{data:data.map(d=>d.paying), borderColor:'#1f7a3a', fill:false}]}, options:sparkOpts });
new Chart(document.getElementById('kpi4'), { type:'line', data:{labels:data.map(d=>d.month), datasets:[{data:data.map(d=>d.churn*100), borderColor:'#2348b8', fill:false}]}, options:sparkOpts });

new Chart(document.getElementById('chart-main'), {
  type:'bar',
  data:{
    labels:data.map(d=>d.month),
    datasets:[
      {label:'MAU', data:data.map(d=>d.mau), backgroundColor:'rgba(201,100,66,0.18)', borderColor:'#c96442', borderWidth:1.5, borderRadius:4, yAxisID:'y'},
      {label:'付费', type:'line', data:data.map(d=>d.paying), borderColor:'#1f7a3a', backgroundColor:'#1f7a3a', tension:0.35, borderWidth:2.5, pointRadius:3, yAxisID:'y'},
    ]
  },
  options:{ responsive:true, maintainAspectRatio:false, plugins:{legend:{position:'bottom',labels:{usePointStyle:true,boxWidth:8}}}, scales:{x:{grid:{display:false}},y:{grid:{color:'#f0ece5'}, ticks:{callback:v=>v.toLocaleString()}}} }
});

new Chart(document.getElementById('chart-churn'), {
  type:'line',
  data:{ labels:data.map(d=>d.month), datasets:[{label:'流失率 %', data:data.map(d=>(d.churn*100).toFixed(2)), borderColor:'#9c2a25', backgroundColor:'rgba(156,42,37,0.08)', tension:0.4, borderWidth:2.5, fill:true, pointRadius:3}] },
  options:{ responsive:true, maintainAspectRatio:false, plugins:{legend:{display:false}}, scales:{x:{grid:{display:false}},y:{grid:{color:'#f0ece5'}, ticks:{callback:v=>v+'%'}, beginAtZero:true}} }
});
</script>

</body>
</html>