animated-charts/dist/cjs/animated-donut-chart.cjs.entry.js

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

'use strict';

var index = require('./index-BOxpMbh1.js');
var jsxRuntime = require('./jsx-runtime-COCbE79F.js');

const donutChartCss = ".donut-chart{display:flex;flex-direction:column;align-items:center}.donut-labels{display:flex;flex-wrap:wrap;justify-content:center;margin-top:8px;font-size:12px;color:#6b7280}.donut-legend{display:flex;align-items:center;margin:0 8px}.donut-dot{width:12px;height:12px;border-radius:50%;margin-right:4px}.donut-chart-wrapper{width:100%}.chart-title{text-align:center;font-weight:600;font-size:1.1rem;margin-bottom:0.5rem}";

const DonutChart = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
    }
    get el() { return index.getElement(this); }
    data = [];
    labels = [];
    colors = [];
    size = 120;
    strokeWidth = 16;
    chartTitle;
    componentDidLoad() {
        this.handleResize();
        window.addEventListener('resize', this.handleResize);
    }
    disconnectedCallback() {
        window.removeEventListener('resize', this.handleResize);
    }
    handleResize = () => {
        if (this.el) {
            this.el.style.width = '100%';
        }
    };
    parseArrayProp(prop) {
        if (Array.isArray(prop))
            return prop;
        if (typeof prop === 'string') {
            try {
                return JSON.parse(prop);
            }
            catch {
                return prop.split(',');
            }
        }
        return [];
    }
    render() {
        const data = this.parseArrayProp(this.data);
        const labels = this.parseArrayProp(this.labels);
        const colors = this.parseArrayProp(this.colors);
        const total = data.reduce((a, b) => a + b, 0) || 1;
        let offset = 0;
        const radius = (this.size - this.strokeWidth) / 2;
        const circumference = 2 * Math.PI * radius;
        return (jsxRuntime.jsxRuntimeExports.jsxs("div", { class: "donut-chart-wrapper", children: [this.chartTitle && jsxRuntime.jsxRuntimeExports.jsx("div", { class: "chart-title", children: this.chartTitle }, '98a02673e1c6b4381ac52fe8013ea3bf855b40fb'), jsxRuntime.jsxRuntimeExports.jsxs("div", { class: "donut-chart", children: [jsxRuntime.jsxRuntimeExports.jsx("svg", { width: this.size, height: this.size, viewBox: `0 0 ${this.size} ${this.size}`, children: data.map((value, i) => {
                                const dash = (value / total) * circumference;
                                const dashArray = `${dash} ${circumference - dash}`;
                                const circleOffset = offset;
                                offset += dash;
                                return (jsxRuntime.jsxRuntimeExports.jsx("circle", { cx: this.size / 2, cy: this.size / 2, r: radius, fill: "none", stroke: colors[i] || '#3b82f6', "stroke-width": this.strokeWidth, "stroke-dasharray": dashArray, "stroke-dashoffset": -circleOffset, style: { transition: 'stroke-dasharray 1s cubic-bezier(0.4,0,0.2,1)' } }, i));
                            }) }, '4bcc85b0f9b3bf39fe596a341f95b938216673b0'), jsxRuntime.jsxRuntimeExports.jsx("div", { class: "donut-labels", children: labels.map((l, i) => (jsxRuntime.jsxRuntimeExports.jsxs("span", { class: "donut-legend", children: [jsxRuntime.jsxRuntimeExports.jsx("span", { class: "donut-dot", style: { background: colors[i] || '#3b82f6' } }), l] }, i))) }, 'b2733d552c779b733c90c5bab13a7948794761b2')] }, '85c1736a1194124ed44addfde407b8b9917770a7'), jsxRuntime.jsxRuntimeExports.jsx("slot", { name: "tooltip" }, '43ab15148ccdf9831cd6760bcd345125b3362cc2')] }, '0db20fb72ddce800b3a137bf9018b4e382904cc7'));
    }
};
DonutChart.style = donutChartCss;

exports.animated_donut_chart = DonutChart;
//# sourceMappingURL=animated-donut-chart.entry.cjs.js.map

//# sourceMappingURL=animated-donut-chart.cjs.entry.js.map