ワッフルチャートライブラリ比較

'use client';
// MantineWaffle.tsx（@mantine/core・@mantine/hooks・@mantine/charts 9.7）
import { useState } from 'react';
import { MantineProvider } from '@mantine/core';
import { WaffleChart } from '@mantine/charts';
import { useElementSize } from '@mantine/hooks';
import '@mantine/core/styles.css';
import '@mantine/charts/styles.css';

// サンプルデータ：サイトを訪れた100人の端末。1マス＝1人の 10×10。並びはマスを塗る順
const DEVICES = [
  { name: 'スマホ', value: 64, color: '#3987e5' },
  { name: 'PC', value: 31, color: '#d95926' },
  { name: 'タブレット', value: 5, color: '#199e70' },
];
const TOTAL = 100;

export default function MantineWaffle() {
  const [mode, setMode] = useState<'share' | 'breakdown'>('share');
  // WaffleChart の幅は size（px）で固定され、親の幅に合わせて縮まない。親の幅を測って渡す
  const { ref, width } = useElementSize();
  // 割合はスマホの1件だけを渡し、total で残りの36人を空のマスにする
  const data = mode === 'share' ? DEVICES.slice(0, 1) : DEVICES;

  return (
    <MantineProvider>
      {(['share', 'breakdown'] as const).map((m) => (
        <button key={m} type="button" onClick={() => setMode(m)} style={{ marginRight: 4, fontWeight: mode === m ? 700 : 400 }}>{m === 'share' ? '割合' : '内訳'}</button>
      ))}
      <p style={{ fontWeight: 600 }}>{mode === 'share' ? '100人中 64人がスマホ' : '100人の端末の内訳'}</p>
      <div ref={ref} style={{ maxWidth: 320 }}>
        {width > 0 && (
          <WaffleChart
            data={data}
            rows={10}
            columns={10}
            total={TOTAL}
            size={width}
            gap={3}
            cellRadius={3}
            // 左上から右へ、1行ずつ下へ塗る（既定）。ほかに right-to-left・top-to-bottom・bottom-to-top
            fillDirection="left-to-right"
            withTooltip
            // data の1件と、割り当てられたマスの数（count）が渡る
            getTooltipLabel={(cell) => `${cell.name} ${cell.value}人（${Math.round((cell.value / TOTAL) * 100)}%）`}
            legendPosition="bottom"
          />
        )}
      </div>
    </MantineProvider>
  );
}

'use client';
// NivoWaffle.tsx（@nivo/waffle 0.99 / @react-spring/web 10）
import { createContext, useContext, useState } from 'react';
import { ResponsiveWaffle, isDataCell, type CellComponentProps, type Datum, type TooltipProps } from '@nivo/waffle';
import { animated, to } from '@react-spring/web';

// サンプルデータ：サイトを訪れた100人の端末。1マス＝1人の 10×10。並びはマスを塗る順
const DEVICES = [
  { id: 'スマホ', label: 'スマホ', value: 64, color: '#3987e5' },
  { id: 'PC', label: 'PC', value: 31, color: '#d95926' },
  { id: 'タブレット', label: 'タブレット', value: 5, color: '#199e70' },
];
const TOTAL = 100;
// 空のマスの色。'var(--empty)' のような CSS 変数も渡せる（サイトのダークモードに合わせるとき）
const EMPTY = '#e5e7eb';
// 人の形のアイコン（24×24）。頭の円と、肩の丸い胴
const PERSON = 'M12 0.5a5 5 0 1 1 0 10a5 5 0 0 1 0-10ZM2 24v-3a7 7 0 0 1 7-7h6a7 7 0 0 1 7 7v3Z';

// hover している端末。マスの部品に context で渡す
// （部品を作り直すと、マスが付け直されてアニメーションが最初からになるので、部品は固定にする）
const Active = createContext<string | null>(null);

// hover している端末があれば、それ以外のマス（空のマスを含む）を薄くする
function useOpacity({ cell, animatedProps }: CellComponentProps<Datum>) {
  const active = useContext(Active);
  const dim = active !== null && !(isDataCell(cell) && cell.data.id === active);
  return to(animatedProps.opacity, (o) => (dim ? o * 0.3 : o));
}

// マス：既定の部品と同じ rect に、薄くする処理を足したもの。animatedProps を animated の要素に渡すと、アニメーションも残る
function SquareCell(props: CellComponentProps<Datum>) {
  const { animatedProps: a, borderRadius } = props;
  return <animated.rect x={a.x} y={a.y} width={a.size} height={a.size} rx={borderRadius} fill={a.color} opacity={useOpacity(props)} />;
}

// 人の形：アイコンをマスの位置へ動かし、マスの大きさに拡大する
function PersonCell(props: CellComponentProps<Datum>) {
  const { animatedProps: a } = props;
  return (
    <animated.path
      d={PERSON}
      fill={a.color}
      opacity={useOpacity(props)}
      transform={to([a.x, a.y, a.size], (x, y, s) => `translate(${x} ${y}) scale(${s / 24})`)}
    />
  );
}

const Tooltip = ({ data }: TooltipProps<Datum>) => (
  <div style={{ background: '#fff', border: '1px solid #e5e7eb', padding: '4px 10px', fontSize: 12, whiteSpace: 'nowrap' }}>
    <span style={{ color: data.color }}>■</span> {data.label} {data.value}人（{Math.round((data.value / TOTAL) * 100)}%）
  </div>
);

export default function NivoWaffle() {
  const [mode, setMode] = useState<'share' | 'breakdown'>('share');
  const [shape, setShape] = useState<'square' | 'person'>('square');
  const [active, setActive] = useState<string | null>(null);
  // 凡例：割合では、スマホと「それ以外」（空のマス）
  const legend = mode === 'share' ? [DEVICES[0], { id: 'それ以外', value: TOTAL - DEVICES[0].value, color: EMPTY }] : DEVICES;

  return (
    <div>
      {(['share', 'breakdown'] as const).map((m) => (
        <button key={m} type="button" onClick={() => setMode(m)} style={{ marginRight: 4, fontWeight: mode === m ? 700 : 400 }}>{m === 'share' ? '割合' : '内訳'}</button>
      ))}
      {(['square', 'person'] as const).map((s) => (
        <button key={s} type="button" onClick={() => setShape(s)} style={{ marginRight: 4, fontWeight: shape === s ? 700 : 400 }}>{s === 'square' ? 'マス' : '人の形'}</button>
      ))}
      <p style={{ fontWeight: 600 }}>{mode === 'share' ? '100人中 64人がスマホ' : '100人の端末の内訳'}</p>
      <div style={{ width: '100%', maxWidth: 320, aspectRatio: '1' }}>
        <Active.Provider value={active}>
          <ResponsiveWaffle
            data={DEVICES}
            // 割合は、スマホ以外を隠す（隠した id にはマスを割り当てないので、そのぶん空のマスになる）
            hiddenIds={mode === 'share' ? ['PC', 'タブレット'] : []}
            total={TOTAL}
            rows={10}
            columns={10}
            // 左上から右へ、1行ずつ下へ塗る（既定の 'top' は、右下のマスから左へ、1行ずつ上へ塗る）
            fillDirection="bottom"
            padding={3}
            borderRadius={3}
            colors={({ id }) => DEVICES.find((d) => d.id === id)!.color}
            emptyColor={EMPTY}
            // マスが1つずつ 4ms 遅れて動く。割合と内訳を切り替えると、順に塗り替わる
            motionStagger={4}
            cellComponent={shape === 'square' ? SquareCell : PersonCell}
            tooltip={Tooltip}
            // hover は、端末ごとのマスをまとめた外形（areas レイヤー）で受ける
            onMouseEnter={(d) => setActive(String(d.id))}
            onMouseLeave={() => setActive(null)}
          />
        </Active.Provider>
      </div>
      <ul style={{ display: 'flex', gap: 16, listStyle: 'none', padding: 0, fontSize: 12 }}>
        {legend.map((d) => (
          <li key={d.id} style={{ opacity: active && active !== d.id ? 0.4 : 1 }}><span style={{ color: d.color }}>■</span> {d.id} {d.value}人</li>
        ))}
      </ul>
    </div>
  );
}

'use client';
// SvgWaffle.tsx（ライブラリなし）
import { useRef, useState } from 'react';

// サンプルデータ：サイトを訪れた100人の端末。1マス＝1人の 10×10。並びはマスを塗る順
const DEVICES = [
  { name: 'スマホ', count: 64, color: '#3987e5' },
  { name: 'PC', count: 31, color: '#d95926' },
  { name: 'タブレット', count: 5, color: '#199e70' },
];
type Device = (typeof DEVICES)[number];
const TOTAL = 100;
const COLUMNS = 10;
const CELL = 24; // 1マスの大きさ（viewBox の単位。人のアイコンと同じ 24）
const GAP = 4;
const SIZE = COLUMNS * CELL + (COLUMNS - 1) * GAP;
const EMPTY = '#e5e7eb';
// 人の形のアイコン（24×24）。頭の円と、肩の丸い胴
const PERSON = 'M12 0.5a5 5 0 1 1 0 10a5 5 0 0 1 0-10ZM2 24v-3a7 7 0 0 1 7-7h6a7 7 0 0 1 7 7v3Z';
const label = (d: Device) => `${d.name} ${d.count}人（${Math.round((d.count / TOTAL) * 100)}%）`;

export default function SvgWaffle() {
  const [mode, setMode] = useState<'share' | 'breakdown'>('share');
  const [shape, setShape] = useState<'square' | 'person'>('square');
  const [hover, setHover] = useState<{ device: Device; x: number; y: number; side: 'left' | 'center' | 'right' } | null>(null);
  const boxRef = useRef<HTMLDivElement>(null);

  // マスごとの端末（左上から右へ、1行ずつ下へ）。割合ではスマホ以外を空（null）にする
  const cells = DEVICES.flatMap((d, i) => Array.from({ length: d.count }, () => (mode === 'share' && i > 0 ? null : d)));

  // ポインターの下のマスの端末と、ツールチップの位置（枠の左右の端では、内側へ寄せる）
  const show = (device: Device | null, e: React.PointerEvent) => {
    if (!device) return setHover(null);
    const box = boxRef.current!.getBoundingClientRect();
    const x = e.clientX - box.left;
    const side = x < box.width / 3 ? 'left' : x > (box.width * 2) / 3 ? 'right' : 'center';
    setHover({ device, x, y: e.clientY - box.top, side });
  };

  return (
    <div>
      {(['share', 'breakdown'] as const).map((m) => (
        <button key={m} type="button" onClick={() => setMode(m)} style={{ marginRight: 4, fontWeight: mode === m ? 700 : 400 }}>{m === 'share' ? '割合' : '内訳'}</button>
      ))}
      {(['square', 'person'] as const).map((s) => (
        <button key={s} type="button" onClick={() => setShape(s)} style={{ marginRight: 4, fontWeight: shape === s ? 700 : 400 }}>{s === 'square' ? 'マス' : '人の形'}</button>
      ))}
      <p style={{ fontWeight: 600 }}>{mode === 'share' ? '100人中 64人がスマホ' : '100人の端末の内訳'}</p>
      <div ref={boxRef} style={{ position: 'relative', maxWidth: 320 }}>
        <svg
          viewBox={`0 0 ${SIZE} ${SIZE}`}
          width="100%"
          role="img"
          aria-label={mode === 'share' ? 'サイトを訪れた100人のうち、64人がスマホ' : 'サイトを訪れた100人の端末：スマホ 64人、PC 31人、タブレット 5人'}
          // タッチでは指を離すと pointerleave が来るので、消すのはマウスのときだけ（タップしたマスの表示を残す）
          onPointerLeave={(e) => e.pointerType === 'mouse' && setHover(null)}
        >
          {cells.map((d, i) => {
            const x = (i % COLUMNS) * (CELL + GAP);
            const y = Math.floor(i / COLUMNS) * (CELL + GAP);
            const props = {
              fill: d ? d.color : EMPTY,
              // hover している端末があれば、それ以外を薄くする
              opacity: hover && hover.device !== d ? 0.3 : 1,
              // 色は1マスずつ 6ms 遅らせて変える（割合と内訳を切り替えると、左上から順に塗り替わる）
              style: { transition: `fill 300ms ease ${i * 6}ms, opacity 150ms` },
              // Tailwind CSS v4：prefers-reduced-motion では transition を切る
              className: 'motion-reduce:transition-none!',
              onPointerEnter: (e: React.PointerEvent) => show(d, e),
              onPointerMove: (e: React.PointerEvent) => show(d, e),
            };
            return shape === 'square' ? (
              <rect key={i} x={x} y={y} width={CELL} height={CELL} rx={3} {...props} />
            ) : (
              <path key={i} d={PERSON} transform={`translate(${x} ${y})`} {...props} />
            );
          })}
        </svg>
        {hover && (
          <div
            style={{
              position: 'absolute', left: hover.x, top: hover.y - 12, pointerEvents: 'none', whiteSpace: 'nowrap',
              transform: `translate(${hover.side === 'left' ? '-12px' : hover.side === 'right' ? 'calc(-100% + 12px)' : '-50%'}, -100%)`,
              background: '#fff', border: '1px solid #e5e7eb', padding: '4px 10px', fontSize: 12,
            }}
          >
            <span style={{ color: hover.device.color }}>■</span> {label(hover.device)}
          </div>
        )}
      </div>
      <ul style={{ display: 'flex', gap: 16, listStyle: 'none', padding: 0, fontSize: 12 }}>
        {(mode === 'share' ? [DEVICES[0], { name: 'それ以外', count: TOTAL - DEVICES[0].count, color: EMPTY }] : DEVICES).map((d) => (
          <li key={d.name} style={{ opacity: hover && hover.device.name !== d.name ? 0.4 : 1 }}><span style={{ color: d.color }}>■</span> {d.name} {d.count}人</li>
        ))}
      </ul>
    </div>
  );
}