Claude の artifact でダッシュボードを作る — CSV を貼る前に集計する理由と、実運用で落ち着いた構成

データ契約（この形から外れないでください）:
  week: string "YYYY-MM-DD"（月曜始まり）
  app: string
  revenue: number（USD・小数2桁）
  impressions: number（整数）
  ecpm: number（USD・小数2桁）
 
描画の指定:
  左軸 = revenue（棒）
  右軸 = ecpm（線）
  app ごとに系列を分ける
  キーの追加・改名はしないでください

import { useMemo, useState } from "react";
import {
  ComposedChart, Bar, Line, XAxis, YAxis,
  CartesianGrid, Tooltip, Legend, ResponsiveContainer, ReferenceLine,
} from "recharts";
 
// 前処理スクリプトが吐いた JSON をそのまま貼る場所
const RAW = [
  { week: "2026-01-05", app: "Wallpapers", revenue: 412.8, impressions: 318400, ecpm: 1.3 },
  { week: "2026-01-12", app: "Wallpapers", revenue: 455.1, impressions: 331200, ecpm: 1.37 },
  { week: "2026-01-19", app: "Wallpapers", revenue: 398.4, impressions: 349800, ecpm: 1.14 },
  { week: "2026-01-26", app: "Wallpapers", revenue: 501.6, impressions: 356100, ecpm: 1.41 },
];
 
// 色覚特性に配慮した並び。既定のパレットに任せると赤と緑が隣り合います
const PALETTE = { revenue: "#0072B2", ecpm: "#E69F00", target: "#999999" };
 
const ECPM_TARGET = 1.3;
 
export default function AdRevenueDashboard() {
  const [showTarget, setShowTarget] = useState(true);
 
  const { data, delta } = useMemo(() => {
    const sorted = [...RAW].sort((a, b) => a.week.localeCompare(b.week));
    const head = sorted[0]?.revenue ?? 0;
    const tail = sorted[sorted.length - 1]?.revenue ?? 0;
    // ゼロ除算をここで潰しておかないと、初週のデータが空の月に NaN が出ます
    const pct = head === 0 ? null : ((tail - head) / head) * 100;
    return { data: sorted, delta: pct };
  }, []);
 
  return (
    <div className="w-full p-4 space-y-3">
      <div className="flex items-baseline justify-between">
        <h2 className="text-lg font-semibold">週次 収益と eCPM</h2>
        <span className="text-sm text-gray-600">
          {delta === null ? "期首データなし" : `期首比 ${delta.toFixed(1)}%`}
        </span>
      </div>
 
      <label className="flex items-center gap-2 text-sm">
        <input
          type="checkbox"
          checked={showTarget}
          onChange={(e) => setShowTarget(e.target.checked)}
        />
        eCPM の目標線を表示する
      </label>
 
      <ResponsiveContainer width="100%" height={320}>
        <ComposedChart data={data} margin={{ top: 8, right: 16, bottom: 8, left: 0 }}>
          <CartesianGrid strokeDasharray="3 3" />
          <XAxis dataKey="week" tick={{ fontSize: 12 }} />
          <YAxis yAxisId="left" tick={{ fontSize: 12 }} />
          <YAxis yAxisId="right" orientation="right" tick={{ fontSize: 12 }} />
          <Tooltip />
          <Legend />
          <Bar yAxisId="left" dataKey="revenue" name="収益 (USD)" fill={PALETTE.revenue} />
          <Line
            yAxisId="right"
            type="monotone"
            dataKey="ecpm"
            name="eCPM (USD)"
            stroke={PALETTE.ecpm}
            strokeWidth={2}
            dot={{ r: 3 }}
          />
          {showTarget && (
            <ReferenceLine
              yAxisId="right"
              y={ECPM_TARGET}
              stroke={PALETTE.target}
              strokeDasharray="4 4"
              label={{ value: `目標 ${ECPM_TARGET}`, position: "right", fontSize: 11 }}
            />
          )}
        </ComposedChart>
      </ResponsiveContainer>
    </div>
  );
}

#!/usr/bin/env bash
# daily_dashboard.sh — 日次で集計してダッシュボード用JSONを差し替える
set -euo pipefail
 
WORK="$HOME/metrics"
OUT="$WORK/public/data/weekly.json"
 
cd "$WORK"
 
# エクスポート済みCSVを畳む。失敗したら既存JSONを残したまま終了する
# （壊れたJSONで上書きするより、昨日の数字が残っている方がましです）
if python3 aggregate_admob.py exports/admob_daily.csv > /tmp/weekly.json.new; then
  mv /tmp/weekly.json.new "$OUT"
  echo "[$(date +%F)] updated: $(wc -c < "$OUT") bytes"
else
  echo "[$(date +%F)] aggregation failed, keeping previous JSON" >&2
  exit 1
fi