animated-charts/dist/collection/components/heatmap/heatmap.js

Animated chart web components for all frameworks (React, Angular, Vue, HTML)

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import "./heatmap.css";
function getColor(value, min, max, colors) {
    const t = (value - min) / (max - min || 1);
    // Simple gradient between first and last color
    return colors.length > 1 ? `url(#heatmap-gradient)` : colors[0];
}
export const Heatmap = ({ data, width = 300, height = 300, colors = ["#f8f9fa", "#dc3545"], animationDuration = 800, }) => {
    const rows = data.length;
    const cols = data[0]?.length || 0;
    const min = Math.min(...data.flat());
    const max = Math.max(...data.flat());
    const cellWidth = width / cols;
    const cellHeight = height / rows;
    return (_jsxs("svg", { width: width, height: height, className: "heatmap", role: "img", "aria-label": "Heatmap Chart", children: [_jsx("defs", { children: _jsxs("linearGradient", { id: "heatmap-gradient", x1: "0", y1: "0", x2: "1", y2: "0", children: [_jsx("stop", { offset: "0%", stopColor: colors[0] }), _jsx("stop", { offset: "100%", stopColor: colors[colors.length - 1] })] }) }), data.map((row, i) => row.map((value, j) => (_jsx("rect", { x: j * cellWidth, y: i * cellHeight, width: cellWidth, height: cellHeight, fill: getColor(value, min, max, colors), style: {
                    transition: `all ${animationDuration}ms cubic-bezier(0.4,0,0.2,1)`
                } }, `${i}-${j}`))))] }));
};
//# sourceMappingURL=heatmap.js.map