SimpleLineChart.tsx

import React, {FC} from "react";

const SimpleLineChart: FC<{
    width: number;
    height: number;
    strokeWidth?: number;
    strokeColor?: string;
    data: { value: number; label?: string }[];
    padding?: number;
}> = ({
          width,
          height,
          data,
          strokeWidth,
          strokeColor = "#000a",
          padding = 16,
      }) => {
    const legendHeight = 12;
    const w = width - padding * 2;
    const h = height - padding * 2 - legendHeight;
    const maxValue = Math.max(...data.map(d => d.value), h, 100);
    const ratio = h / maxValue;
    const d = buildPath(data.map((d, i) => ([
        i / (data.length - 1) * w,
        h - d.value * ratio
    ])));
    const d2 = d + `L ${w},${h} L ${0},${h}`;
    const id = 'bg-' + funhash(strokeColor);

    return <svg width={width} height={height}>
        <defs>
            <linearGradient id={id} gradientTransform="rotate(90)">
                <stop offset="0%" stopColor={strokeColor} stopOpacity={0.25}/>
                <stop offset="100%" stopColor={strokeColor} stopOpacity={0}/>
            </linearGradient>
        </defs>
        <g transform={`translate(${padding},${padding})`}>
            <path d={d} stroke={strokeColor} strokeWidth={strokeWidth || 4} strokeLinecap={"round"} fill="none"/>
            {/* glow */}
            <path d={d} stroke={strokeColor} strokeOpacity={0.2} strokeWidth={(strokeWidth || 4) + 2} strokeLinecap={"round"} fill="none"/>
            <path d={d} stroke={strokeColor} strokeOpacity={0.1} strokeWidth={(strokeWidth || 4) + 5} strokeLinecap={"round"} fill="none"/>
            <path d={d} stroke={strokeColor} strokeOpacity={0.05} strokeWidth={(strokeWidth || 4) + 8} strokeLinecap={"round"} fill="none"/>
            {/* bg */}
            <path d={d2} stroke={"none"} fill={`url('#${id}')`}/>
            {
                data.map((d, i) =>
                    (data.length - i) % 2 === 1
                        ? <text fill="#0008" dy={16} fontSize={10} textAnchor="middle"
                                x={i / (data.length - 1) * w} y={h}>{d.label}</text>
                        : null)
            }
        </g>
    </svg>
}

export default SimpleLineChart;

type Point = [number, number];

function buildPath(points: Point[], smoothing = 0.2) {
    const line = (pointA: Point, pointB: Point) => {
        const lengthX = pointB[0] - pointA[0];
        const lengthY = pointB[1] - pointA[1];
        return {
            length: Math.sqrt(Math.pow(lengthX, 2) + Math.pow(lengthY, 2)),
            angle: Math.atan2(lengthY, lengthX)
        };
    }

    const controlPoint = (current: Point, previous: Point, next: Point, reverse: boolean = false) => {
        const p = previous || current;
        const n = next || current;
        const o = line(p, n);
        const angle = o.angle + (reverse ? Math.PI : 0);
        const length = o.length * smoothing;
        const x = current[0] + Math.cos(angle) * length;
        const y = current[1] + Math.sin(angle) * length;
        return [x, y];
    }

    const bezierCommand = (point: Point, i: number, a: Point[]) => {
        const [cpsX, cpsY] = controlPoint(a[i - 1], a[i - 2], point);
        const [cpeX, cpeY] = controlPoint(point, a[i - 1], a[i + 1], true);
        return `C ${cpsX},${cpsY} ${cpeX},${cpeY} ${point[0]},${point[1]}`;
    }

    return points.reduce((acc, point, i, a) => i === 0
        ? `M ${point[0]},${point[1]}`
        : `${acc} ${bezierCommand(point, i, a)}`
        , '');
}

function funhash(s: string) {
    for (var i = 0, h = 0xdeadbeef; i < s.length; i++)
        h = Math.imul(h ^ s.charCodeAt(i), 2654435761);
    return (h ^ h >>> 16) >>> 0;
}