animated-charts/dist/components/animated-bar-chart.js

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

import { proxyCustomElement, HTMLElement } from '@stencil/core/internal/client';
import { j as jsxRuntimeExports } from './jsx-runtime.js';

const barChartCss = ".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 BarChart = /*@__PURE__*/ proxyCustomElement(class BarChart extends HTMLElement {
    constructor() {
        super();
        this.__registerHost();
        this.__attachShadow();
    }
    data = [];
    labels = [];
    colors = [];
    height = 240;
    chartTitle;
    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);
        console.log('BarChart render', { data, labels, colors, title: this.chartTitle });
        const max = Math.max(...data, 1);
        return (jsxRuntimeExports.jsxs("div", { class: "bar-chart-wrapper", children: [this.chartTitle && jsxRuntimeExports.jsx("div", { class: "chart-title", children: this.chartTitle }, '80d177298e9d44a926f1a5e1d34c435a715984f3'), jsxRuntimeExports.jsx("div", { class: "bar-chart", style: { height: `${this.height}px` }, children: data.map((value, i) => (jsxRuntimeExports.jsxs("div", { class: "bar-container", children: [jsxRuntimeExports.jsx("div", { class: "bar", style: {
                                    height: `${(value / max) * 100}%`,
                                    background: colors[i] || '#3b82f6',
                                    transition: 'height 0.8s cubic-bezier(0.4,0,0.2,1)',
                                } }), jsxRuntimeExports.jsx("span", { class: "bar-label", children: labels[i] })] }, labels[i] || i))) }, '408dcd75af6da60470015c7ba7a63d5e59204edd'), jsxRuntimeExports.jsx("slot", { name: "tooltip" }, '886d234477e62c43a0dd4044928be305e831fa8d')] }, '1612c98fed5e4655e0dca151eca47ebbb9ddfb9a'));
    }
    static get style() { return barChartCss; }
}, [1, "animated-bar-chart", {
        "data": [16],
        "labels": [16],
        "colors": [16],
        "height": [2],
        "chartTitle": [1, "chart-title"]
    }]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["animated-bar-chart"];
    components.forEach(tagName => { switch (tagName) {
        case "animated-bar-chart":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, BarChart);
            }
            break;
    } });
}

const AnimatedBarChart = BarChart;
const defineCustomElement = defineCustomElement$1;

export { AnimatedBarChart, defineCustomElement };
//# sourceMappingURL=animated-bar-chart.js.map

//# sourceMappingURL=animated-bar-chart.js.map