animated-charts
Version:
Animated chart web components for all frameworks (React, Angular, Vue, HTML)
18 lines (17 loc) • 1.56 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { motion } from "framer-motion";
const DonutChart = ({ data, labels, colors, size = 120, strokeWidth = 16 }) => {
const total = data.reduce((a, b) => a + b, 0) || 1;
let offset = 0;
return (_jsxs("div", { className: "flex flex-col items-center", children: [_jsx("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, className: "block", children: data.map((value, i) => {
const radius = (size - strokeWidth) / 2;
const circumference = 2 * Math.PI * radius;
const dash = (value / total) * circumference;
const dashArray = `${dash} ${circumference - dash}`;
const circleOffset = offset;
offset += dash;
return (_jsx(motion.circle, { cx: size / 2, cy: size / 2, r: radius, fill: "none", stroke: colors?.[i] || '#3b82f6', strokeWidth: strokeWidth, strokeDasharray: dashArray, strokeDashoffset: -circleOffset, initial: { pathLength: 0 }, animate: { pathLength: 1 }, transition: { duration: 1 + i * 0.2 } }, i));
}) }), _jsx("div", { className: "flex flex-wrap justify-center mt-2 text-xs text-gray-600", children: labels.map((l, i) => (_jsxs("span", { className: "mx-2 flex items-center", children: [_jsx("span", { className: "inline-block w-3 h-3 rounded-full mr-1", style: { background: colors?.[i] || '#3b82f6' } }), l] }, i))) })] }));
};
export default DonutChart;
//# sourceMappingURL=DonutChart.js.map