import { h } from "@stencil/core";
export class DgaMetricChart {
    constructor() {
        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: '0325b3e4cbdc5be5c7b22a7309ce9aba05dbac6c', width: this.width, height: this.height, viewBox: `0 0 ${this.width} ${this.height}` }, h("defs", { key: '5bb00eb7d3c0a462a5f131f51b0da1f190b8bff6' }, h("linearGradient", { key: '33fc763778b59fdbb003e9cacc7be0d52fdf4c6a', id: "areaGradient", x1: "0", x2: "0", y1: "0", y2: "1" }, h("stop", { key: 'f8f833cbe989ad91ea5bbfce033e311c5766f5f0', offset: "0%", "stop-color": this.fillColor, "stop-opacity": "0.25" }), h("stop", { key: '3e88f78194a53854ff2f3585ad318e97b127f8b0', offset: "100%", "stop-color": this.fillColor, "stop-opacity": "0" }))), h("path", { key: 'b959d03a8315f999fa71122772e838ee7172b96c', d: areaPath, fill: "url(#areaGradient)" }), h("path", { key: '94a41fac9f9e110963200055f1e557583647dac7', 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 is() { return "dga-metric-chart"; }
    static get properties() {
        return {
            "type": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'realistic' | 'wavy' | 'straight' | 'layers'",
                    "resolved": "\"layers\" | \"realistic\" | \"straight\" | \"wavy\"",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "type",
                "reflect": false,
                "defaultValue": "'realistic'"
            },
            "trend": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'positive' | 'negative'",
                    "resolved": "\"negative\" | \"positive\"",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "trend",
                "reflect": false,
                "defaultValue": "'positive'"
            },
            "size": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'sm' | 'lg'",
                    "resolved": "\"lg\" | \"sm\"",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "size",
                "reflect": false,
                "defaultValue": "'lg'"
            },
            "showMarker": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "show-marker",
                "reflect": false,
                "defaultValue": "false"
            },
            "data": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "number[]",
                    "resolved": "number[]",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "defaultValue": "[]"
            }
        };
    }
    static get states() {
        return {
            "lineColor": {},
            "fillColor": {},
            "width": {},
            "height": {}
        };
    }
    static get watchers() {
        return [{
                "propName": "size",
                "methodName": "handleSizeChange"
            }];
    }
}
//# sourceMappingURL=dga-metric-chart.js.map
