animated-charts/dist/cjs/animated-area-chart.cjs.entry.js

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

'use strict';

var index = require('./index-BOxpMbh1.js');
var jsxRuntime = require('./jsx-runtime-COCbE79F.js');

const areaChartCss = ".area-chart{width:100%;height:100%}.chart-svg{width:100%;height:100%}.area-labels{display:flex;justify-content:space-between;margin-top:8px;font-size:12px;color:#6b7280}.area-chart-wrapper{width:100%}.chart-title{text-align:center;font-weight:600;font-size:1.1rem;margin-bottom:0.5rem}";

const AreaChart = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
    }
    get el() { return index.getElement(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(' ');
    }
    getAreaPoints() {
        const points = this.getPoints();
        return `0,100 ${points} 100,100`;
    }
    render() {
        this.parseArrayProp(this.data);
        const labels = this.parseArrayProp(this.labels);
        return (jsxRuntime.jsxRuntimeExports.jsxs("div", { class: "area-chart-wrapper", children: [this.chartTitle && jsxRuntime.jsxRuntimeExports.jsx("div", { class: "chart-title", children: this.chartTitle }, 'e6d6abea40efdfa817638f75bdf78c33345af9c6'), jsxRuntime.jsxRuntimeExports.jsxs("div", { class: "area-chart", style: { height: `${this.height}px` }, children: [jsxRuntime.jsxRuntimeExports.jsxs("svg", { viewBox: "0 0 100 100", class: "chart-svg", children: [jsxRuntime.jsxRuntimeExports.jsx("polygon", { fill: this.color + '33', points: this.getAreaPoints(), style: { transition: 'all 1s cubic-bezier(0.4,0,0.2,1)' } }, '4de0b2583b55753f758c5ee886ba6c0b540104c0'), jsxRuntime.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)' } }, '35976594f869654cb6693af5e207971da56c40f9')] }, '9965ad75abaaa47dc196c4cd2ce4e0694c45127a'), jsxRuntime.jsxRuntimeExports.jsx("div", { class: "area-labels", children: labels.map((l, i) => (jsxRuntime.jsxRuntimeExports.jsx("span", { children: l }, i))) }, 'e8b9d3898f70af4d46a4e18571483ba1caef6257')] }, 'cea283a092cc958dae08eeb49da26b5a6d1d8581'), jsxRuntime.jsxRuntimeExports.jsx("slot", { name: "tooltip" }, 'cc1311a1b8ca8c5ce335c979c2d694040e2c481f')] }, '3f65677ef3c8c23cdc46142e4270fed6de6e173b'));
    }
};
AreaChart.style = areaChartCss;

exports.animated_area_chart = AreaChart;
//# sourceMappingURL=animated-area-chart.entry.cjs.js.map

//# sourceMappingURL=animated-area-chart.cjs.entry.js.map