animated-charts/dist/collection/components/area-chart/area-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 "./area-chart.css";
export class AreaChart {
    el;
    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(prop) {
        if (Array.isArray(prop))
            return prop;
        if (typeof prop === 'string') {
            try {
                return JSON.parse(prop);
            }
            catch {
                return prop.split(',');
            }
        }
        return [];
    }
    getPoints() {
        const data = this.parseArrayProp(this.data);
        const max = Math.max(...data, 1);
        return data.map((v, i) => `${(i / (data.length - 1)) * 100},${100 - (v / max) * 100}`).join(' ');
    }
    getAreaPoints() {
        const points = this.getPoints();
        return `0,100 ${points} 100,100`;
    }
    render() {
        const data = this.parseArrayProp(this.data);
        const labels = this.parseArrayProp(this.labels);
        return (_jsxs("div", { class: "area-chart-wrapper", children: [this.chartTitle && _jsx("div", { class: "chart-title", children: this.chartTitle }, 'e6d6abea40efdfa817638f75bdf78c33345af9c6'), _jsxs("div", { class: "area-chart", style: { height: `${this.height}px` }, children: [_jsxs("svg", { viewBox: "0 0 100 100", class: "chart-svg", children: [_jsx("polygon", { fill: this.color + '33', points: this.getAreaPoints(), style: { transition: 'all 1s cubic-bezier(0.4,0,0.2,1)' } }, '4de0b2583b55753f758c5ee886ba6c0b540104c0'), _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'), _jsx("div", { class: "area-labels", children: labels.map((l, i) => (_jsx("span", { children: l }, i))) }, 'e8b9d3898f70af4d46a4e18571483ba1caef6257')] }, 'cea283a092cc958dae08eeb49da26b5a6d1d8581'), _jsx("slot", { name: "tooltip" }, 'cc1311a1b8ca8c5ce335c979c2d694040e2c481f')] }, '3f65677ef3c8c23cdc46142e4270fed6de6e173b'));
    }
    static get is() { return "animated-area-chart"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["area-chart.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["area-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": "[]"
            },
            "color": {
                "type": "string",
                "attribute": "color",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "'#3b82f6'"
            },
            "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
            }
        };
    }
    static get elementRef() { return "el"; }
}
//# sourceMappingURL=area-chart.js.map