import { p as proxyCustomElement, H, h } from './p-BhqVmlhr.js';

const DgaMetricChart = /*@__PURE__*/ proxyCustomElement(class DgaMetricChart extends H {
    constructor() {
        super();
        this.__registerHost();
        this.type = 'realistic';
        this.trend = 'positive';
        this.size = 'lg';
        this.showMarker = false;
        this.data = [];
        this.lineColor = this.trend === 'positive' ? '#067647' : '#B42318';
        this.fillColor = this.trend === 'positive' ? '#079455' : '#D92D20';
        this.width = this.size === 'lg' ? 328 : 128;
        this.height = 64;
    }
    handleSizeChange() {
        this.width = this.size === 'lg' ? 328 : 128;
    }
    getLinePath() {
        const points = this.getPoints();
        switch (this.type) {
            case 'realistic':
                return this.getSmoothPath(points);
            case 'wavy':
                return this.getWavyPath(points);
            case 'straight':
                return this.getStraightPath(points);
            case 'layers':
                return this.getSmoothPath(points);
            default:
                return '';
        }
    }
    getPoints() {
        return this.data.map((d, i) => ({
            x: (i / (this.data.length - 1)) * this.width,
            y: this.height - (d / Math.max(...this.data)) * this.height
        }));
    }
    getSmoothPath(points) {
        return points.reduce((acc, point, i, arr) => {
            if (i === 0)
                return `M ${point.x},${point.y}`;
            const prev = arr[i - 1];
            const cX = (prev.x + point.x) / 2;
            return `${acc} C ${cX},${prev.y} ${cX},${point.y} ${point.x},${point.y}`;
        }, '');
    }
    getWavyPath(points) {
        return points.reduce((acc, point, i) => i === 0 ? `M ${point.x},${point.y}` : `${acc} Q ${point.x - 10},${point.y + 10} ${point.x},${point.y}`, '');
    }
    getStraightPath(points) {
        return points.reduce((acc, point, i) => i === 0 ? `M ${point.x},${point.y}` : `${acc} L ${point.x},${point.y}`, '');
    }
    getAreaPath() {
        const linePath = this.getLinePath();
        return `${linePath} L ${this.width},${this.height} L 0,${this.height} Z`;
    }
    render() {
        const linePath = this.getLinePath();
        const areaPath = this.getAreaPath();
        return (h("svg", { key: '307dff369c3c7b97b21b4f9935ecaebe037f9f88', width: this.width, height: this.height, viewBox: `0 0 ${this.width} ${this.height}` }, h("defs", { key: '870be4a080f43cbc3bab0415611def0fe8972867' }, h("linearGradient", { key: 'da285ca623dbb895b5a68439b5e294d3c473b29b', id: "areaGradient", x1: "0", x2: "0", y1: "0", y2: "1" }, h("stop", { key: '4b52d643e6ba6fdcadb458c0927080d15a76cf4a', offset: "0%", "stop-color": this.fillColor, "stop-opacity": "0.25" }), h("stop", { key: '3551bc2093619f416e8dbdaebb01552a2e2cb856', offset: "100%", "stop-color": this.fillColor, "stop-opacity": "0" }))), h("path", { key: 'd3e56ca310551702902d949efe9c560dc22ea6df', d: areaPath, fill: "url(#areaGradient)" }), h("path", { key: 'ba195d1f6b961271efc86deae9a98543ca04ecee', d: linePath, fill: "none", stroke: this.lineColor, "stroke-width": "2" }), this.showMarker && this.getPoints().map((point) => (h("circle", { cx: point.x, cy: point.y, r: "4", fill: "white", stroke: this.lineColor, "stroke-width": "2" })))));
    }
    static get watchers() { return {
        "size": ["handleSizeChange"]
    }; }
}, [0, "dga-metric-chart", {
        "type": [1],
        "trend": [1],
        "size": [1],
        "showMarker": [4, "show-marker"],
        "data": [16],
        "lineColor": [32],
        "fillColor": [32],
        "width": [32],
        "height": [32]
    }, undefined, {
        "size": ["handleSizeChange"]
    }]);
function defineCustomElement() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["dga-metric-chart"];
    components.forEach(tagName => { switch (tagName) {
        case "dga-metric-chart":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, DgaMetricChart);
            }
            break;
    } });
}

export { DgaMetricChart as D, defineCustomElement as d };
