Reactで、数字の並びから小さな折れ線グラフを描く方法

// 数字の並びを、スパークライン用の座標に直す関数

export type Point = { x: number; y: number };

// いちばん小さい値と大きい値（Math.min(...values) は件数が多いと例外になるので、1つずつ見る）
export function extent(values: readonly number[]): { min: number; max: number } {
  let min = Infinity;
  let max = -Infinity;
  for (const v of values) {
    if (v < min) min = v;
    if (v > max) max = v;
  }
  return { min, max };
}

// width × height の箱の中に、上下左右 pad だけ余白を空けて並べる
export function toPoints(values: readonly number[], width: number, height: number, pad: number): Point[] {
  const n = values.length;
  if (n === 0) return [];
  const { min, max } = extent(values);
  const range = max - min;
  const innerW = width - pad * 2;
  const innerH = height - pad * 2;
  return values.map((v, i) => ({
    // 1件だけのときは真ん中に置く（n - 1 が 0 で割り算にならないように）
    x: n === 1 ? width / 2 : pad + (innerW * i) / (n - 1),
    // SVG は下へ行くほど y が大きいので、最大値が上の端（pad）に来るようにする
    // 全部同じ値のときは range が 0 になるので、高さの真ん中に置く
    y: range === 0 ? height / 2 : pad + ((max - v) / range) * innerH,
  }));
}

// "12, 15 11、18" のような文字列から数字だけを取り出す
export function parseNumbers(text: string): number[] {
  return text
    .normalize('NFKC') // 全角の数字やカンマを半角にする
    .split(/[\s,、]+/)
    .filter((s) => s !== '')
    .map(Number)
    .filter(Number.isFinite);
}

toPoints([10,20,15,30], 120, 32, 3.5): [{"x":3.5,"y":28.5},{"x":41.166666666666664,"y":16},{"x":78.83333333333333,"y":22.25},{"x":116.5,"y":3.5}]

割り算だけで y を出すと（全部同じ値）: [ NaN, NaN, NaN ]

n=100000 Math.min(...values) -> -0.9999999999848337 / extent().min -> -0.9999999999848337
n=200000 Math.min(...values) -> RangeError: Maximum call stack size exceeded / extent().min -> -0.9999999999848337

import { extent, toPoints } from './spark';

type Props = {
  values: readonly number[];
  label: string; // 何の数字か（読み上げ用）
  width?: number;
  height?: number;
};

const DOT_R = 2.5;
const round = (n: number) => Math.round(n * 100) / 100;

export function Sparkline({ values, label, width = 120, height = 32 }: Props) {
  // 最後の点の丸が切れないように、余白は丸の半径より大きくする
  const pad = DOT_R + 1;
  const points = toPoints(values, width, height, pad);
  if (points.length === 0) {
    return <span className="sparkline-empty">データなし</span>;
  }

  const { min, max } = extent(values);
  const last = points[points.length - 1];
  const summary = `${label}：${values.length}件、最小 ${min}、最大 ${max}、最後 ${values[values.length - 1]}`;

  return (
    <svg
      className="sparkline"
      width={width}
      height={height}
      viewBox={`0 0 ${width} ${height}`}
      role="img"
      aria-label={summary}
    >
      <polyline
        points={points.map((p) => `${round(p.x)},${round(p.y)}`).join(' ')}
        fill="none"
        stroke="#00c8e8"
        strokeWidth={1.5}
        strokeLinejoin="round"
        strokeLinecap="round"
      />
      <circle cx={round(last.x)} cy={round(last.y)} r={DOT_R} fill="#d85878" />
    </svg>
  );
}

parse "12, 15 11、18\n-3.5 abc 1e2 ,,": [12,15,11,18,-3.5,100]
parse "１２，３．５ 4"（全角）: [12,3.5,4]

import { useState } from 'react';
import { Sparkline } from './Sparkline';
import { parseNumbers } from './spark';

// 架空の数字
const rows = [
  { name: '来店数', values: [32, 35, 31, 38, 42, 39, 45, 44, 50, 48] },
  { name: '返品数', values: [9, 7, 8, 6, 6, 5, 4, 5, 3, 2] },
  { name: '気温の差', values: [-3, -1, 2, 0, -4, 1, 3] },
  { name: '在庫（変化なし）', values: [20, 20, 20, 20, 20] },
  { name: '1件だけ', values: [7] },
];

export function App() {
  const [text, setText] = useState('12, 15, 11, 18, 22, 19, 25, 24, 30, 28');
  const values = parseNumbers(text);

  return (
    <main>
      <label htmlFor="nums">数字（カンマ、空白、改行で区切る）</label>
      <textarea id="nums" rows={2} value={text} onChange={(e) => setText(e.target.value)} />
      <p className="preview">
        <Sparkline values={values} label="入力した数字" width={240} height={48} />
        <span className="count">{values.length}件</span>
      </p>

      <table>
        <tbody>
          {rows.map((r) => (
            <tr key={r.name}>
              <th scope="row">{r.name}</th>
              <td>
                <Sparkline values={r.values} label={r.name} />
              </td>
              <td className="num">{r.values[r.values.length - 1]}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </main>
  );
}