animated-charts/dist/animated-charts/p-79dc618b.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 a}from"./p-CEKB1LyR.js";const i=".area-chart{width:100%;height:100%}.chart-svg{width:100%;height:100%}.area-labels{display:flex;justify-content:space-between;margin-top:8px;font-size:12px;color:#6b7280}.area-chart-wrapper{width:100%}.chart-title{text-align:center;font-weight:600;font-size:1.1rem;margin-bottom:0.5rem}";const s=class{constructor(e){t(this,e)}get el(){return e(this)}data=[];labels=[];color="#3b82f6";height=240;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[]}getPoints(){const t=this.parseArrayProp(this.data);const e=Math.max(...t,1);return t.map(((a,i)=>`${i/(t.length-1)*100},${100-a/e*100}`)).join(" ")}getAreaPoints(){const t=this.getPoints();return`0,100 ${t} 100,100`}render(){this.parseArrayProp(this.data);const t=this.parseArrayProp(this.labels);return a.jsxs("div",{class:"area-chart-wrapper",children:[this.chartTitle&&a.jsx("div",{class:"chart-title",children:this.chartTitle},"e6d6abea40efdfa817638f75bdf78c33345af9c6"),a.jsxs("div",{class:"area-chart",style:{height:`${this.height}px`},children:[a.jsxs("svg",{viewBox:"0 0 100 100",class:"chart-svg",children:[a.jsx("polygon",{fill:this.color+"33",points:this.getAreaPoints(),style:{transition:"all 1s cubic-bezier(0.4,0,0.2,1)"}},"4de0b2583b55753f758c5ee886ba6c0b540104c0"),a.jsx("polyline",{fill:"none",stroke:this.color,"stroke-width":"2",points:this.getPoints(),style:{transition:"all 1s cubic-bezier(0.4,0,0.2,1)"}},"35976594f869654cb6693af5e207971da56c40f9")]},"9965ad75abaaa47dc196c4cd2ce4e0694c45127a"),a.jsx("div",{class:"area-labels",children:t.map(((t,e)=>a.jsx("span",{children:t},e)))},"e8b9d3898f70af4d46a4e18571483ba1caef6257")]},"cea283a092cc958dae08eeb49da26b5a6d1d8581"),a.jsx("slot",{name:"tooltip"},"cc1311a1b8ca8c5ce335c979c2d694040e2c481f")]},"3f65677ef3c8c23cdc46142e4270fed6de6e173b")}};s.style=i;export{s as animated_area_chart};
//# sourceMappingURL=p-79dc618b.entry.js.map