animated-charts/dist/animated-charts/p-6e96a883.entry.js

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

import{r as t,g as e}from"./p-58QfBuzl.js";import{j as s}from"./p-CEKB1LyR.js";const i=".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 r=class{constructor(e){t(this,e)}get el(){return e(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(t){if(Array.isArray(t))return t;if(typeof t==="string"){try{return JSON.parse(t)}catch{return t.split(",")}}return[]}render(){const t=this.parseArrayProp(this.data);const e=this.parseArrayProp(this.labels);const i=this.parseArrayProp(this.colors);const r=t.reduce(((t,e)=>t+e),0)||1;let n=0;const a=(this.size-this.strokeWidth)/2;const c=2*Math.PI*a;return s.jsxs("div",{class:"donut-chart-wrapper",children:[this.chartTitle&&s.jsx("div",{class:"chart-title",children:this.chartTitle},"98a02673e1c6b4381ac52fe8013ea3bf855b40fb"),s.jsxs("div",{class:"donut-chart",children:[s.jsx("svg",{width:this.size,height:this.size,viewBox:`0 0 ${this.size} ${this.size}`,children:t.map(((t,e)=>{const o=t/r*c;const d=`${o} ${c-o}`;const h=n;n+=o;return s.jsx("circle",{cx:this.size/2,cy:this.size/2,r:a,fill:"none",stroke:i[e]||"#3b82f6","stroke-width":this.strokeWidth,"stroke-dasharray":d,"stroke-dashoffset":-h,style:{transition:"stroke-dasharray 1s cubic-bezier(0.4,0,0.2,1)"}},e)}))},"4bcc85b0f9b3bf39fe596a341f95b938216673b0"),s.jsx("div",{class:"donut-labels",children:e.map(((t,e)=>s.jsxs("span",{class:"donut-legend",children:[s.jsx("span",{class:"donut-dot",style:{background:i[e]||"#3b82f6"}}),t]},e)))},"b2733d552c779b733c90c5bab13a7948794761b2")]},"85c1736a1194124ed44addfde407b8b9917770a7"),s.jsx("slot",{name:"tooltip"},"43ab15148ccdf9831cd6760bcd345125b3362cc2")]},"0db20fb72ddce800b3a137bf9018b4e382904cc7")}};r.style=i;export{r as animated_donut_chart};
//# sourceMappingURL=p-6e96a883.entry.js.map