animated-charts
Version:
Animated chart web components for all frameworks (React, Angular, Vue, HTML)
187 lines (186 loc) • 6.92 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import "./donut-chart.css";
export class DonutChart {
el;
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 (_jsxs("div", { class: "donut-chart-wrapper", children: [this.chartTitle && _jsx("div", { class: "chart-title", children: this.chartTitle }, '98a02673e1c6b4381ac52fe8013ea3bf855b40fb'), _jsxs("div", { class: "donut-chart", children: [_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 (_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'), _jsx("div", { class: "donut-labels", children: labels.map((l, i) => (_jsxs("span", { class: "donut-legend", children: [_jsx("span", { class: "donut-dot", style: { background: colors[i] || '#3b82f6' } }), l] }, i))) }, 'b2733d552c779b733c90c5bab13a7948794761b2')] }, '85c1736a1194124ed44addfde407b8b9917770a7'), _jsx("slot", { name: "tooltip" }, '43ab15148ccdf9831cd6760bcd345125b3362cc2')] }, '0db20fb72ddce800b3a137bf9018b4e382904cc7'));
}
static get is() { return "animated-donut-chart"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["donut-chart.css"]
};
}
static get styleUrls() {
return {
"$": ["donut-chart.css"]
};
}
static get properties() {
return {
"data": {
"type": "unknown",
"attribute": "data",
"mutable": false,
"complexType": {
"original": "number[]",
"resolved": "number[]",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"defaultValue": "[]"
},
"labels": {
"type": "unknown",
"attribute": "labels",
"mutable": false,
"complexType": {
"original": "string[]",
"resolved": "string[]",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"defaultValue": "[]"
},
"colors": {
"type": "unknown",
"attribute": "colors",
"mutable": false,
"complexType": {
"original": "string[]",
"resolved": "string[]",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"defaultValue": "[]"
},
"size": {
"type": "number",
"attribute": "size",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"reflect": false,
"defaultValue": "120"
},
"strokeWidth": {
"type": "number",
"attribute": "stroke-width",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"reflect": false,
"defaultValue": "16"
},
"chartTitle": {
"type": "string",
"attribute": "chart-title",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"reflect": false
}
};
}
static get elementRef() { return "el"; }
}
//# sourceMappingURL=donut-chart.js.map