animated-charts/dist/components/animated-line-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 lineChartCss = ".line-chart{width:100%;height:100%}.chart-svg{width:100%;height:100%}.line-labels{display:flex;justify-content:space-between;margin-top:8px;font-size:12px;color:#6b7280}.line-chart-wrapper{width:100%}.chart-title{text-align:center;font-weight:600;font-size:1.1rem;margin-bottom:0.5rem}";

const LineChart = /*@__PURE__*/ proxyCustomElement(class LineChart extends HTMLElement {
    constructor() {
        super();
        this.__registerHost();
        this.__attachShadow();
    }
    get el() { return this; }
    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 (jsxRuntimeExports.jsxs("div", { class: "line-chart-wrapper", children: [this.chartTitle && jsxRuntimeExports.jsx("div", { class: "chart-title", children: this.chartTitle }, '558502c1fb375b56c50cd80c9e91fcc81392f430'), jsxRuntimeExports.jsxs("div", { class: "line-chart", style: { height: `${this.height}px` }, children: [jsxRuntimeExports.jsxs("svg", { viewBox: "0 0 100 100", class: "chart-svg", children: [jsxRuntimeExports.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) => (jsxRuntimeExports.jsx("circle", { cx: (i / (data.length - 1)) * 100, cy: 100 - (v / Math.max(...data, 1)) * 100, r: 2.5, fill: this.color }, i)))] }, '1cd35b90410ecc42db4cb9f47bf1ec18b0fe8eda'), jsxRuntimeExports.jsx("div", { class: "line-labels", children: labels.map((l, i) => (jsxRuntimeExports.jsx("span", { children: l }, i))) }, 'c6e7fc2d1e9a3d92817ad5857dc241a27e19b4a1')] }, '17cf874c2cc0d924dd32e8cf65a446b32a6237fd'), jsxRuntimeExports.jsx("slot", { name: "tooltip" }, 'd1b8512a8d5b41504a8a7d6a6117b4d5bc9171bc')] }, '71d87040a1516b696de481f894b53a7b64a54da8'));
    }
    static get style() { return lineChartCss; }
}, [1, "animated-line-chart", {
        "data": [16],
        "labels": [16],
        "color": [1],
        "height": [2],
        "chartTitle": [1, "chart-title"]
    }]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["animated-line-chart"];
    components.forEach(tagName => { switch (tagName) {
        case "animated-line-chart":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, LineChart);
            }
            break;
    } });
}

const AnimatedLineChart = LineChart;
const defineCustomElement = defineCustomElement$1;

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

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