Keep income statistics columns readable with grouped rows

Reviewed-on: #29

apps/docs/src/components/IncomeDistribution.tsx

@@ -75,7 +75,7 @@ export default function IncomeDistribution({ data, onSelect }: {
         </svg></div>
         <figcaption>圆点：产品观测　竖线：样本均值　菱形：样本中位数。业务类别标题下各行按支付平台{splitModels && "及收费与交付模式"}分别统计；n为该组产品数。点击点或下表产品名可看原始证据。</figcaption>
       </figure>
-      <div className="research-table-wrap"><table><caption>{metric}样本统计；每行是类别下的一个统计组，CV使用样本标准差</caption><thead><tr><th scope="col">业务类别</th><th scope="col">支付平台 / 收费模式</th><th scope="col">n</th><th scope="col">均值</th><th scope="col">中位数</th><th scope="col">均值/中位数</th><th scope="col">CV</th><th scope="col">去除最大值后的均值 / 下降幅度</th><th scope="col">产品与限制</th></tr></thead>{categoryGroups.map(({ category, rows }) => <tbody key={category}>{rows.map((group, index) => <tr key={group.key}>
+      <div className="research-table-wrap"><table className="income-statistics"><caption>{metric}样本统计；每行是类别下的一个统计组，CV使用样本标准差</caption><thead><tr><th scope="col">业务类别</th><th scope="col">支付平台 / 收费模式</th><th scope="col">n</th><th scope="col">均值</th><th scope="col">中位数</th><th scope="col">均值/中位数</th><th scope="col">CV</th><th scope="col">去除最大值后的均值 / 下降幅度</th><th scope="col">产品与限制</th></tr></thead>{categoryGroups.map(({ category, rows }) => <tbody key={category}>{rows.map((group, index) => <tr key={group.key}>
         {index === 0 && <th scope="rowgroup" rowSpan={rows.length}>{categories.get(category)}<small>{rows.length}个统计组</small></th>}
         <td>{group.provider}<small>{group.model}</small></td><td>{group.stats.n}</td><td>{usd(group.stats.mean)}</td><td>{usd(group.stats.median)}</td><td>{group.stats.meanMedianRatio?.toFixed(2) ?? "—"}</td><td>{group.stats.cv?.toFixed(2) ?? "—"}</td><td>{usd(group.stats.meanWithoutLargest)}<small>{percent(group.stats.largestRemovalDrop)}</small></td>
         <td>{group.points.map((point) => <span key={point.company.id}><button className="research-company-name" onClick={() => onSelect(point.company.id)}>{point.company.name}</button>{" "}</span>)}<small>{group.stats.n < 3 ? "样本少于3，不能据此判断领域典型收入。" : "自选的小样本，须结合产品年龄、成本与留存评估。"}</small></td>

apps/docs/src/styles/globals.css

@@ -1473,6 +1473,13 @@ svg { flex-shrink: 0; }
 
 .research-distribution { margin: 24px 0 38px; }
 .research-distribution figure { margin: 20px 0; }
+.ai-research .income-statistics { min-width: 1200px; }
+/* Row-spanning category headings shift cell indexes between rows. */
+.ai-research .income-statistics td { min-width: 0; }
+.ai-research .income-statistics th[scope="rowgroup"] { min-width: 150px; white-space: nowrap; }
+.ai-research .income-statistics th[scope="rowgroup"] small { display: block; margin-top: 5px; }
+.ai-research .income-statistics td:not(:last-child) { white-space: nowrap; }
+.ai-research .income-statistics td:last-child { min-width: 220px; }
 .income-distribution-chart { display: block; width: 100%; min-width: 900px; height: auto; }
 .income-distribution-chart [role="button"] { cursor: pointer; outline: none; }
 .income-distribution-chart [role="button"]:focus circle:last-child { stroke: #b17725; stroke-width: 3; }