src/components/SanpiChart.astro


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

---
// 議案の賛否一覧（/sanpi/）の「会派ごとの賛否の傾向」グラフ。
// 年度別ページの表をビルド時に集計して、サーバー側で描画する
// （以前はページ内の表をブラウザで集計していた。集計ロジックは
// src/utils/sanpiStats.ts を参照）。
import { computeSanpiStats, SANPI_CHART_CAPTION } from "@/utils/sanpiStats";

const rows = computeSanpiStats();
---

{
  rows.length > 0 && (
    <div class="sanpi-chart">
      <p class="sanpi-chart-caption">{SANPI_CHART_CAPTION}</p>
      <ul class="sanpi-chart-list">
        {rows.map(({ label, yes, no, yesPct, noPct, me }) => (
          <li class="sanpi-chart-item">
            <span class="sanpi-chart-label" style={me ? "font-weight: 700" : undefined}>
              {label}
            </span>
            <span class="sanpi-chart-bar" title={`賛成${yes}件／反対${no}件`}>
              <span class="sanpi-chart-fill" style={`width: ${yesPct}%`} />
            </span>
            <span
              class="sanpi-chart-val"
              set:html={`賛成${yesPct}%<small>（${yes}）</small>／反対${noPct}%<small>（${no}）</small>`}
            />
          </li>
        ))}
      </ul>
    </div>
  )
}