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

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

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import "./bar-chart.css";
export class BarChart {
    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 (_jsxs("div", { class: "bar-chart-wrapper", children: [this.chartTitle && _jsx("div", { class: "chart-title", children: this.chartTitle }, '80d177298e9d44a926f1a5e1d34c435a715984f3'), _jsx("div", { class: "bar-chart", style: { height: `${this.height}px` }, children: data.map((value, i) => (_jsxs("div", { class: "bar-container", children: [_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)',
                                } }), _jsx("span", { class: "bar-label", children: labels[i] })] }, labels[i] || i))) }, '408dcd75af6da60470015c7ba7a63d5e59204edd'), _jsx("slot", { name: "tooltip" }, '886d234477e62c43a0dd4044928be305e831fa8d')] }, '1612c98fed5e4655e0dca151eca47ebbb9ddfb9a'));
    }
    static get is() { return "animated-bar-chart"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["bar-chart.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["bar-chart.css"]
        };
    }
    static get properties() {
        return {
            "data": {
                "type": "unknown",
                "attribute": "data",
                "mutable": false,
                "complexType": {
                    "original": "number[]",
                    "resolved": "number[]",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "defaultValue": "[]"
            },
            "labels": {
                "type": "unknown",
                "attribute": "labels",
                "mutable": false,
                "complexType": {
                    "original": "string[]",
                    "resolved": "string[]",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "defaultValue": "[]"
            },
            "colors": {
                "type": "unknown",
                "attribute": "colors",
                "mutable": false,
                "complexType": {
                    "original": "string[]",
                    "resolved": "string[]",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "defaultValue": "[]"
            },
            "height": {
                "type": "number",
                "attribute": "height",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "240"
            },
            "chartTitle": {
                "type": "string",
                "attribute": "chart-title",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false
            }
        };
    }
}
//# sourceMappingURL=bar-chart.js.map