animated-charts/dist/collection/components/line-chart/line-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 "./line-chart.css";
export class LineChart {
    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(' ');
    }
    render() {
        const data = this.parseArrayProp(this.data);
        const labels = this.parseArrayProp(this.labels);
        return (_jsxs("div", { class: "line-chart-wrapper", children: [this.chartTitle && _jsx("div", { class: "chart-title", children: this.chartTitle }, '558502c1fb375b56c50cd80c9e91fcc81392f430'), _jsxs("div", { class: "line-chart", style: { height: `${this.height}px` }, children: [_jsxs("svg", { viewBox: "0 0 100 100", class: "chart-svg", children: [_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'), data.map((v, i) => (_jsx("circle", { cx: (i / (data.length - 1)) * 100, cy: 100 - (v / Math.max(...data, 1)) * 100, r: 2.5, fill: this.color }, i)))] }, '1cd35b90410ecc42db4cb9f47bf1ec18b0fe8eda'), _jsx("div", { class: "line-labels", children: labels.map((l, i) => (_jsx("span", { children: l }, i))) }, 'c6e7fc2d1e9a3d92817ad5857dc241a27e19b4a1')] }, '17cf874c2cc0d924dd32e8cf65a446b32a6237fd'), _jsx("slot", { name: "tooltip" }, 'd1b8512a8d5b41504a8a7d6a6117b4d5bc9171bc')] }, '71d87040a1516b696de481f894b53a7b64a54da8'));
    }
    static get is() { return "animated-line-chart"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["line-chart.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["line-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=line-chart.js.map