1 files changed, 33 insertions, 0 deletions
diff --git a/src/components/SanpiChart.astro b/src/components/SanpiChart.astro
new file mode 100644
index 0000000..7bc4174
--- /dev/null
+++ b/src/components/SanpiChart.astro
@@ -0,0 +1,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>
+  )
+}