chart-implementation

チャート実装スキル

データの可視化には、shadcn/ui の ChartContainer を介して Recharts を使用します。色には常に CSS 変数を使用してください（design-language-system スキルを参照）。

基本パターン

すべてのチャートは、@sgcarstrends/ui/components/chart の ChartContainer を @web/components/charts/widget の ChartWidget でラップして使用します。ResponsiveContainer を直接使用しないでください。

"use client";

import {
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
} from "@sgcarstrends/ui/components/chart";
import { ChartWidget } from "@web/components/charts/widget";
import { BarChart, Bar, CartesianGrid, XAxis, YAxis } from "recharts";

export function TopMakesChart({ data }: { data: { make: string; count: number }[] }) {
  const chartConfig = {
    count: { label: "Count", color: "var(--chart-1)" },
  };

  return (
    <ChartWidget title="Top Makes" isEmpty={data.length === 0}>
      <ChartContainer config={chartConfig} className="h-[300px] w-full">
        <BarChart data={data}>
          <CartesianGrid vertical={false} strokeDasharray="3 3" className="stroke-default-200" />
          <XAxis dataKey="make" tickLine={false} axisLine={false} className="text-xs" />
          <YAxis tickLine={false} axisLine={false} className="text-xs" />
          <ChartTooltip content={<ChartTooltipContent />} />
          <Bar dataKey="count" fill="var(--chart-1)" radius={[8, 8, 0, 0]} />
        </BarChart>
      </ChartContainer>
    </ChartWidget>
  );
}

ChartContainer

ChartContainer は、テーマ設定に対応した Recharts の ResponsiveContainer ラッパーです。コンテナーの CSS クラスで寸法を設定します。

// ✅ Correct - height via className
<ChartContainer config={chartConfig} className="h-[300px] w-full">
  <BarChart data={data}>...</BarChart>
</ChartContainer>

// ❌ Wrong - raw ResponsiveContainer
<ResponsiveContainer width="100%" height={400}>
  <BarChart data={data}>...</BarChart>
</ResponsiveContainer>

幅／高さ -1 の警告

ResizeObserver が実行される前の初回レンダリング時に、Recharts の ResponsiveContainer は width(-1) and height(-1) の警告を出力します。packages/ui/src/components/chart.tsx の ResponsiveContainer に initialDimension を設定して修正してください。

<RechartsPrimitive.ResponsiveContainer initialDimension={{ width: 0, height: 400 }}>
  {children}
</RechartsPrimitive.ResponsiveContainer>

参照：shadcn/ui PR #8486、recharts #6716

ChartWidget

チャートを、タイトル、サブタイトル、空の状態、表示アニメーションを備えた Card でラップします。

<ChartWidget
  title="Registration Trends"
  subtitle="Monthly breakdown"
  isEmpty={data.length === 0}
  emptyMessage="No trend data available"
>
  <ChartContainer ...>...</ChartContainer>
</ChartWidget>

チャート設定

テーマ設定と凡例／ツールチップのラベルに使用するチャート設定を定義します。

const chartConfig = {
  diesel: { label: "Diesel", color: "var(--chart-1)" },
  petrol: { label: "Petrol", color: "var(--chart-2)" },
  electric: { label: "Electric", color: "var(--chart-3)" },
};

パフォーマンス

データと設定をメモ化する

const chartConfig = useMemo(() => {
  return Object.fromEntries(
    categories.map((category, index) => [
      category,
      { label: category, color: `var(--chart-${index + 1})` },
    ]),
  );
}, [categories]);

ベストプラクティス

1. ChartContainer - 常に className="h-[300px] w-full" を指定した ChartContainer を使用します（ResponsiveContainer の直接使用は禁止）
2. ChartWidget - カードレイアウトと空の状態を統一するため、ChartWidget でラップします
3. CSS 変数 - 色には var(--chart-N) を使用します（1〜6 を利用できます）
4. 軸のスタイル - すっきりした軸にするため、tickLine={false} axisLine={false} className="text-xs" を使用します
5. グリッド - <CartesianGrid vertical={false} strokeDasharray="3 3" className="stroke-default-200" /> を使用します
6. ツールチップ - shadcn の <ChartTooltip content={<ChartTooltipContent />} /> を使用します
7. メモ化 - チャート設定とデータ変換には useMemo を使用します

参考資料

• Recharts：最新のドキュメントは Context7 を使用してください
• デザイン言語システム：色については design-language-system スキルを参照してください
• チャートコンポーネントのソース：packages/ui/src/components/chart.tsx
• ウィジェットコンポーネント：apps/web/src/components/charts/widget.tsx