// import { Component, h, Prop } from '@stencil/core';
// @Component({
//   tag: 'reusable-chart',
//   // styleUrl: 'reusable-chart.css',
//   // shadow: true,
// })
// export class ReusableChart {
//   // Props to make the chart reusable
//   @Prop() width: number = 330;
//   @Prop() height: number = 66;
//   @Prop() strokeColor: string = '#067647';
//   @Prop() fillColor: string = '#079455';
//   @Prop() strokeWidth: number = 2;
//   @Prop() opacity: number = 0.2;
//   // Data prop for passing an array of data points
//   @Prop() data: number[] = [];
//   // A method to generate a path based on the data
//   generatePath(): string {
//     if (!this.data || this.data.length === 0) {
//       return '';
//     }
//     const maxValue = Math.max(...this.data);
//     const minValue = Math.min(...this.data);
//     const verticalScale = this.height / (maxValue - minValue);
//     const horizontalScale = this.width / (this.data.length - 1);
//     return this.data
//       .map((value, index) => {
//         const x = index * horizontalScale;
//         const y = this.height - (value - minValue) * verticalScale;
//         return `${index === 0 ? 'M' : 'L'} ${x} ${y}`;
//       })
//       .join(' ');
//   }
//   render() {
//     const pathD = this.generatePath();
//     return (
//       <svg
//         width={this.width}
//         height={this.height}
//         viewBox={`0 0 ${this.width} ${this.height}`}
//         fill="none"
//         xmlns="http://www.w3.org/2000/svg"
//       >
//         {/* Mask for clipping */}
//         <mask
//           id="mask0"
//           style={{ maskType: 'alpha' }}
//           maskUnits="userSpaceOnUse"
//           x="1"
//           y="1"
//           width={this.width - 2}
//           height={this.height - 2}
//         >
//           <rect
//             width={this.width - 2}
//             height={this.height - 2}
//             transform="translate(1 1)"
//             fill="url(#paint0_linear)"
//           />
//         </mask>
//         <g mask="url(#mask0)">
//           {/* Dynamic path generated from data */}
//           <path
//             d={pathD}
//             fill={this.fillColor}
//             opacity={this.opacity}
//           />
//         </g>
//         {/* Border or outline path */}
//         <path
//           d={pathD}
//           stroke={this.strokeColor}
//           stroke-width={this.strokeWidth}
//           stroke-linecap="round"
//           stroke-linejoin="round"
//         />
//         <defs>
//           <linearGradient
//             id="paint0_linear"
//             x1="164"
//             y1="0"
//             x2="164"
//             y2="64"
//             gradientUnits="userSpaceOnUse"
//           >
//             <stop />
//             <stop offset="1" stop-opacity="0" />
//           </linearGradient>
//         </defs>
//       </svg>
//     );
//   }
// }
// import { Component, Prop, h } from '@stencil/core';
// @Component({
//   tag: 'dga-realistic-chart',
//   // styleUrl: 'dga-chart.css',
//   shadow: true,
// })
// export class DgaRealisticChart {
//   @Prop() data: number[] = [];
//   @Prop() width: number = 330;
//   @Prop() height: number = 66;
//   private calculatePath(): string {
//     // Function to generate SVG path based on data
//     const maxData = Math.max(...this.data);
//     const minData = Math.min(...this.data);
//     const range = maxData - minData || 1;
//     const scaleX = this.width / (this.data.length - 1);
//     const scaleY = this.height / range;
//     return this.data
//       .map((point, i) => {
//         const x = i * scaleX;
//         const y = this.height - (point - minData) * scaleY;
//         return `${i === 0 ? 'M' : 'L'} ${x} ${y}`;
//       })
//       .join(' ');
//   }
//   render() {
//     const pathData = this.calculatePath();
//     return (
//       <svg width={this.width} height={this.height} viewBox={`0 0 ${this.width} ${this.height}`} xmlns="http://www.w3.org/2000/svg">
//         <mask id="mask0" maskUnits="userSpaceOnUse" x="1" y="1" width={this.width - 2} height={this.height - 2}>
//           <rect width={this.width - 2} height={this.height - 2} fill="url(#paint0_linear)" />
//         </mask>
//         <g mask="url(#mask0)">
//           <path
//             d={pathData}
//             opacity="0.2"
//             fill="#079455"
//           />
//         </g>
//         <path
//           d={pathData}
//           stroke="#067647"
//           stroke-width="2"
//           stroke-linecap="round"
//           stroke-linejoin="round"
//         />
//         {/* Optional marker */}
//         <g opacity="0.2">
//           <rect x="210.786" y="3.78571" width="20.4286" height="20.4286" rx="10.2143" stroke="#067647" stroke-width="1.57143" />
//         </g>
//         <rect x="215.786" y="8.78571" width="10.4286" height="10.4286" rx="5.21429" fill="white" />
//         <rect x="215.786" y="8.78571" width="10.4286" height="10.4286" rx="5.21429" stroke="#067647" stroke-width="1.57143" />
//         <defs>
//           <linearGradient id="paint0_linear" x1="164" y1="0" x2="164" y2="64" gradientUnits="userSpaceOnUse">
//             <stop />
//             <stop offset="1" stop-opacity="0" />
//           </linearGradient>
//         </defs>
//       </svg>
//     );
//   }
// }
import { h } from "@stencil/core";
export class DgaMetricChartV2 {
    constructor() {
        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 is() { return "dga-metric-chart-v2"; }
    static get encapsulation() { return "shadow"; }
    static get properties() {
        return {
            "width": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "width",
                "reflect": false,
                "defaultValue": "130"
            },
            "height": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "height",
                "reflect": false,
                "defaultValue": "66"
            },
            "strokeColor": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "stroke-color",
                "reflect": false,
                "defaultValue": "'#067647'"
            },
            "fillColor": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "fill-color",
                "reflect": false,
                "defaultValue": "'#079455'"
            },
            "strokeWidth": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "stroke-width",
                "reflect": false,
                "defaultValue": "2"
            },
            "data": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "DataPoint[]",
                    "resolved": "DataPoint[]",
                    "references": {
                        "DataPoint": {
                            "location": "local",
                            "path": "/home/mamoud/Documents/temp/components/platform-code-cross-platform-storybook/packages/core/src/components/dga-metric/dga-metric-chart-v2.tsx",
                            "id": "src/components/dga-metric/dga-metric-chart-v2.tsx::DataPoint"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "defaultValue": "[]"
            },
            "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": "true"
            },
            "markerPosition": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "MarkerPosition",
                    "resolved": "MarkerPosition",
                    "references": {
                        "MarkerPosition": {
                            "location": "local",
                            "path": "/home/mamoud/Documents/temp/components/platform-code-cross-platform-storybook/packages/core/src/components/dga-metric/dga-metric-chart-v2.tsx",
                            "id": "src/components/dga-metric/dga-metric-chart-v2.tsx::MarkerPosition"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false
            }
        };
    }
    static get watchers() {
        return [{
                "propName": "data",
                "methodName": "dataChangeHandler"
            }];
    }
}
//# sourceMappingURL=dga-metric-chart-v2.js.map
