animated-charts/dist/collection/components/pie-chart/pie-chart.js

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

import { jsx as _jsx } from "react/jsx-runtime";
import "./pie-chart.css";
function describeArc(cx, cy, r, startAngle, endAngle) {
    const start = {
        x: cx + r * Math.cos(startAngle),
        y: cy + r * Math.sin(startAngle),
    };
    const end = {
        x: cx + r * Math.cos(endAngle),
        y: cy + r * Math.sin(endAngle),
    };
    const largeArcFlag = endAngle - startAngle > Math.PI ? 1 : 0;
    return [
        `M ${cx} ${cy}`,
        `L ${start.x} ${start.y}`,
        `A ${r} ${r} 0 ${largeArcFlag} 1 ${end.x} ${end.y}`,
        "Z",
    ].join(" ");
}
export const PieChart = ({ data, width = 300, height = 300, colors = ["#007bff", "#28a745", "#ffc107", "#dc3545"], animationDuration = 800, }) => {
    const total = data.reduce((sum, d) => sum + d.value, 0);
    const cx = width / 2;
    const cy = height / 2;
    const r = Math.min(width, height) / 2 - 10;
    let startAngle = -Math.PI / 2;
    return (_jsx("svg", { width: width, height: height, className: "pie-chart", role: "img", "aria-label": "Pie Chart", children: data.map((d, i) => {
            const angle = (d.value / total) * 2 * Math.PI;
            const endAngle = startAngle + angle;
            const path = describeArc(cx, cy, r, startAngle, endAngle);
            const fill = d.color || colors[i % colors.length];
            const el = (_jsx("path", { d: path, fill: fill, style: {
                    transition: `all ${animationDuration}ms cubic-bezier(0.4,0,0.2,1)`
                } }, i));
            startAngle = endAngle;
            return el;
        }) }));
};
//# sourceMappingURL=pie-chart.js.map