animated-charts/dist/animated-charts/p-8883a531.entry.js

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

import{r as t}from"./p-58QfBuzl.js";import{j as r}from"./p-CEKB1LyR.js";const a=".bar-chart{display:flex;align-items:flex-end;width:100%;height:100%}.bar-container{flex:1;display:flex;flex-direction:column;align-items:center;margin:0 4px}.bar{width:24px;border-radius:6px 6px 0 0;min-height:4px}.bar-label{margin-top:8px;font-size:12px;color:#6b7280}.bar-chart-wrapper{width:100%}.chart-title{text-align:center;font-weight:600;font-size:1.1rem;margin-bottom:0.5rem}";const e=class{constructor(r){t(this,r)}data=[];labels=[];colors=[];height=240;chartTitle;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 a=this.parseArrayProp(this.labels);const e=this.parseArrayProp(this.colors);console.log("BarChart render",{data:t,labels:a,colors:e,title:this.chartTitle});const i=Math.max(...t,1);return r.jsxs("div",{class:"bar-chart-wrapper",children:[this.chartTitle&&r.jsx("div",{class:"chart-title",children:this.chartTitle},"80d177298e9d44a926f1a5e1d34c435a715984f3"),r.jsx("div",{class:"bar-chart",style:{height:`${this.height}px`},children:t.map(((t,s)=>r.jsxs("div",{class:"bar-container",children:[r.jsx("div",{class:"bar",style:{height:`${t/i*100}%`,background:e[s]||"#3b82f6",transition:"height 0.8s cubic-bezier(0.4,0,0.2,1)"}}),r.jsx("span",{class:"bar-label",children:a[s]})]},a[s]||s)))},"408dcd75af6da60470015c7ba7a63d5e59204edd"),r.jsx("slot",{name:"tooltip"},"886d234477e62c43a0dd4044928be305e831fa8d")]},"1612c98fed5e4655e0dca151eca47ebbb9ddfb9a")}};e.style=a;export{e as animated_bar_chart};
//# sourceMappingURL=p-8883a531.entry.js.map