animated-charts/dist/animated-charts/p-8690ff68.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 i}from"./p-CEKB1LyR.js";const s=".line-chart{width:100%;height:100%}.chart-svg{width:100%;height:100%}.line-labels{display:flex;justify-content:space-between;margin-top:8px;font-size:12px;color:#6b7280}.line-chart-wrapper{width:100%}.chart-title{text-align:center;font-weight:600;font-size:1.1rem;margin-bottom:0.5rem}";const c=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(((i,s)=>`${s/(t.length-1)*100},${100-i/e*100}`)).join(" ")}render(){const t=this.parseArrayProp(this.data);const e=this.parseArrayProp(this.labels);return i.jsxs("div",{class:"line-chart-wrapper",children:[this.chartTitle&&i.jsx("div",{class:"chart-title",children:this.chartTitle},"558502c1fb375b56c50cd80c9e91fcc81392f430"),i.jsxs("div",{class:"line-chart",style:{height:`${this.height}px`},children:[i.jsxs("svg",{viewBox:"0 0 100 100",class:"chart-svg",children:[i.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)"}},"8313d3b5a9184219eedb4a162cc6400af5083ba9"),t.map(((e,s)=>i.jsx("circle",{cx:s/(t.length-1)*100,cy:100-e/Math.max(...t,1)*100,r:2.5,fill:this.color},s)))]},"1cd35b90410ecc42db4cb9f47bf1ec18b0fe8eda"),i.jsx("div",{class:"line-labels",children:e.map(((t,e)=>i.jsx("span",{children:t},e)))},"c6e7fc2d1e9a3d92817ad5857dc241a27e19b4a1")]},"17cf874c2cc0d924dd32e8cf65a446b32a6237fd"),i.jsx("slot",{name:"tooltip"},"d1b8512a8d5b41504a8a7d6a6117b4d5bc9171bc")]},"71d87040a1516b696de481f894b53a7b64a54da8")}};c.style=s;export{c as animated_line_chart};
//# sourceMappingURL=p-8690ff68.entry.js.map