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

const DgaMetricChartV2$1 = /*@__PURE__*/ proxyCustomElement(class DgaMetricChartV2 extends H {
    constructor() {
        super();
        this.__registerHost();
        this.__attachShadow();
        this.width = 130;
        this.height = 66;
        this.strokeColor = '#067647';
        this.fillColor = '#079455';
        this.strokeWidth = 2;
        this.data = [];
        this.showMarker = true;
        this.pathD = '';
        this.areaD = '';
        this.currentMarkerPos = { x: 76, y: 5 }; // default position
    }
    dataChangeHandler() {
        this.generatePaths();
        this.updateMarkerPosition();
    }
    componentWillLoad() {
        this.generatePaths();
        this.updateMarkerPosition();
    }
    normalizeData() {
        if (this.data.length === 0)
            return [];
        const xValues = this.data.map(d => d.x);
        const yValues = this.data.map(d => d.y);
        const minX = Math.min(...xValues);
        const maxX = Math.max(...xValues);
        const minY = Math.min(...yValues);
        const maxY = Math.max(...yValues);
        const margin = 10;
        return this.data.map(point => ({
            x: ((point.x - minX) / (maxX - minX)) * (128 - 2 * margin) + margin,
            y: 64 - (((point.y - minY) / (maxY - minY)) * (64 - 2 * margin) + margin)
        }));
    }
    updateMarkerPosition() {
        if (this.markerPosition) {
            this.currentMarkerPos = this.markerPosition;
        }
        else if (this.data.length > 0) {
            const normalizedData = this.normalizeData();
            const lastPoint = normalizedData[normalizedData.length - 1];
            // Calculate marker position based on the last data point
            // Adjust these offsets to position the marker correctly relative to the point
            this.currentMarkerPos = {
                x: lastPoint.x - 10, // Adjust these offsets as needed
                y: lastPoint.y - 15 // Adjust these offsets as needed
            };
        }
    }
    generatePaths() {
        const normalizedData = this.normalizeData();
        if (normalizedData.length === 0)
            return;
        this.pathD = normalizedData.reduce((path, point, i) => {
            return path + `${i === 0 ? 'M' : 'L'} ${point.x} ${point.y} `;
        }, '');
        this.areaD = `${this.pathD} L ${normalizedData[normalizedData.length - 1].x} 65 L 1 65 Z`;
    }
    render() {
        const { x: markerX, y: markerY } = this.currentMarkerPos;
        return (h("svg", { key: '561214e9b0e9ede3a8292cb509600eded68201d2', width: this.width, height: this.height, viewBox: "0 0 130 66", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("defs", { key: 'd421cb49aca9ad1f78e3fac0f7093d2dceb09aea' }, h("linearGradient", { key: 'c6ebd0531820c13db12ed62ec74a865a4cb60db4', id: "gradientMask", x1: "64", y1: "0", x2: "64", y2: "64", gradientUnits: "userSpaceOnUse" }, h("stop", { key: '12a26b01ff78fcf99038f1f91c0252ac15380d24' }), h("stop", { key: 'e9dcb0a9c64fa9cf318a64f51eb3dde55aa03b1e', offset: "1", "stop-opacity": "0" })), h("mask", { key: '70b3672f6ac99f494e3f12eaa5bdfcb3750fe089', id: "chartMask", style: { maskType: 'alpha' }, maskUnits: "userSpaceOnUse", x: "1", y: "1", width: "128", height: "64" }, h("rect", { key: '3769defd85dc7b29d420f321a169541ca394a785', width: "128", height: "64", transform: "translate(1 1)", fill: "url(#gradientMask)" }))), h("g", { key: '4abdc3367f61f2fd3018e5af6cc5edb42da6b248', mask: "url(#chartMask)" }, h("path", { key: 'dc14b1914fc17cc139d833863f6103f1ca08b5b0', opacity: "0.2", d: this.areaD, fill: this.fillColor })), h("path", { key: '7cda141c4ff7627be41c17907d0ae9da9690cea2', d: this.pathD, stroke: this.strokeColor, "stroke-width": this.strokeWidth, "stroke-linecap": "round", "stroke-linejoin": "round", fill: "none" }), this.showMarker && (h("g", { key: '88623bb601a89cb0b5597b23d7d7fc959e450949', transform: `translate(${markerX}, ${markerY})` }, h("g", { key: '5a55ca9038e444b9c0bfa4477b45ef2b1e61a168', opacity: "0.2" }, h("rect", { key: 'd3d3602f98630dfd2abe6bb2ff77f9f895a494fe', width: "20", height: "20", rx: "10", stroke: this.strokeColor, "stroke-width": this.strokeWidth })), h("rect", { key: 'b9400d4f3dde157f52983b71b361621b5a4f202b', x: "5", y: "5", width: "10", height: "10", rx: "5", fill: "white" }), h("rect", { key: '3ae04377914612dfbe93beed89734dcae5530db3', x: "5", y: "5", width: "10", height: "10", rx: "5", stroke: this.strokeColor, "stroke-width": this.strokeWidth })))));
    }
    static get watchers() { return {
        "data": ["dataChangeHandler"]
    }; }
}, [1, "dga-metric-chart-v2", {
        "width": [2],
        "height": [2],
        "strokeColor": [1, "stroke-color"],
        "fillColor": [1, "fill-color"],
        "strokeWidth": [2, "stroke-width"],
        "data": [16],
        "showMarker": [4, "show-marker"],
        "markerPosition": [16]
    }, undefined, {
        "data": ["dataChangeHandler"]
    }]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["dga-metric-chart-v2"];
    components.forEach(tagName => { switch (tagName) {
        case "dga-metric-chart-v2":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, DgaMetricChartV2$1);
            }
            break;
    } });
}

const DgaMetricChartV2 = DgaMetricChartV2$1;
const defineCustomElement = defineCustomElement$1;

export { DgaMetricChartV2, defineCustomElement };

//# sourceMappingURL=dga-metric-chart-v2.js.map