lit-litelements 1.0.2 → 2.0.0

package/dist/component/chart.lit.d.ts

@@ -0,0 +1,18 @@
+import { LitElement } from "lit";
+declare class ChartElement extends LitElement {
+    stockData: any[];
+    constructor();
+    firstUpdated(): void;
+    customLinePlugin: {
+        id: string;
+        afterDraw: (chart: any) => void;
+    };
+    _createChart(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "stock-chart-display": ChartElement;
+    }
+}
+export {};

package/dist/component/chart.lit.js

@@ -0,0 +1,99 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+import { LitElement, html } from "lit";
+import Chart from 'chart.js/auto';
+import { customElement, property } from "lit/decorators.js";
+let ChartElement = class ChartElement extends LitElement {
+    constructor() {
+        super();
+        this.stockData = [];
+        // Define the custom plugin
+        this.customLinePlugin = {
+            id: 'customLinePlugin', // Ensure you give it an id
+            afterDraw: function (chart) {
+                if (chart.tooltip._active && chart.tooltip._active.length) {
+                    const ctx = chart.ctx;
+                    const activePoint = chart.tooltip._active[0];
+                    const x = activePoint.element.x;
+                    const topY = chart.scales.yPrice.top;
+                    const bottomY = chart.scales.yPrice.bottom;
+                    ctx.save();
+                    ctx.beginPath();
+                    ctx.moveTo(x, topY);
+                    ctx.lineTo(x, bottomY);
+                    ctx.lineWidth = 1;
+                    ctx.strokeStyle = "rgba(0, 0, 0, 0.5)";
+                    ctx.stroke();
+                    ctx.restore();
+                }
+            }
+        };
+        this.stockData = [];
+    }
+    // First updated is called after the element has been rendered into the DOM
+    firstUpdated() {
+        this._createChart();
+    }
+    // This will handle creating the Chart.js chart
+    _createChart() {
+        const dates = this.stockData.map((data) => data === null || data === void 0 ? void 0 : data.date);
+        const closePrices = this.stockData.map((data) => data === null || data === void 0 ? void 0 : data.close);
+        const ma20 = this.stockData.map((data) => data === null || data === void 0 ? void 0 : data.MA20);
+        const ma50 = this.stockData.map((data) => data === null || data === void 0 ? void 0 : data.MA50);
+        const ma200 = this.stockData.map((data) => data === null || data === void 0 ? void 0 : data.MA200);
+        const RSI = this.stockData.map((data) => data === null || data === void 0 ? void 0 : data.RSI);
+        const MACDLine = this.stockData.map((data) => data === null || data === void 0 ? void 0 : data.MACDLine);
+        const SignalLine = this.stockData.map((data) => data === null || data === void 0 ? void 0 : data.SignalLine);
+        const MACDHistogram = this.stockData.map((data) => data === null || data === void 0 ? void 0 : data.MACDHistogram);
+        const canvas = this.shadowRoot.getElementById("stockChart");
+        const ctx = canvas.getContext("2d");
+        // Register the custom plugin
+        Chart.register(this.customLinePlugin);
+        new Chart(ctx, {
+            type: "line",
+            data: {
+                labels: dates,
+                datasets: [
+                    { label: "RSI", data: RSI, borderColor: "rgba(15, 92, 92, 1)", backgroundColor: "rgba(15, 92, 92, 0.2)", fill: false, borderWidth: 2, yAxisID: "yRSI" },
+                    { label: "MACDHistogram", data: MACDHistogram, borderColor: "rgba(175, 92, 92, 1)", backgroundColor: "rgba(175, 92, 92, 0.2)", fill: false, borderWidth: 2, yAxisID: "yMACD" },
+                    { label: "SignalLine", data: SignalLine, borderColor: "rgba(75, 92, 192, 1)", backgroundColor: "rgba(75, 92, 192, 0.2)", fill: false, borderWidth: 1, yAxisID: "yMACD" },
+                    { label: "MACDLine", data: MACDLine, borderColor: "rgba(175, 192, 192, 1)", backgroundColor: "rgba(175, 192, 192, 0.2)", fill: false, borderWidth: 1, yAxisID: "yMACD" },
+                    { label: "Close Price", data: closePrices, borderColor: "rgba(75, 192, 192, 1)", backgroundColor: "rgba(75, 192, 192, 0.2)", fill: true, borderWidth: 1, yAxisID: "yPrice" },
+                    { label: "MA20", data: ma20, borderColor: "rgba(255, 99, 132, 1)", backgroundColor: "rgba(255, 99, 132, 0.2)", fill: false, borderWidth: 2, yAxisID: "yPrice" },
+                    { label: "MA50", data: ma50, borderColor: "rgba(255, 206, 86, 1)", backgroundColor: "rgba(255, 206, 86, 0.2)", fill: false, borderWidth: 2, yAxisID: "yPrice" },
+                    { label: "MA200", data: ma200, borderColor: "rgba(153, 102, 255, 1)", backgroundColor: "rgba(153, 102, 255, 0.2)", fill: false, borderWidth: 2, yAxisID: "yPrice" },
+                ],
+            },
+            options: {
+                responsive: true,
+                scales: {
+                    yPrice: { type: "linear", position: "left", beginAtZero: false, title: { display: true, text: "Price" } },
+                    yRSI: { type: "linear", position: "right", beginAtZero: true, title: { display: true, text: "RSI" }, grid: { drawOnChartArea: false } },
+                    yMACD: { type: "linear", position: "right", beginAtZero: true, title: { display: true, text: "MACD" }, grid: { drawOnChartArea: false } },
+                },
+                interaction: { mode: "index", intersect: false },
+                plugins: {
+                    tooltip: { mode: "index", axis: "x" },
+                },
+            },
+        });
+    }
+    render() {
+        return html `<canvas id="stockChart"></canvas>`;
+    }
+};
+__decorate([
+    property({ type: Array }),
+    __metadata("design:type", Object)
+], ChartElement.prototype, "stockData", void 0);
+ChartElement = __decorate([
+    customElement("stock-chart-display"),
+    __metadata("design:paramtypes", [])
+], ChartElement);

package/dist/component/icon.lit.d.ts

@@ -0,0 +1,17 @@
+import { LitElement } from "lit";
+declare class MyElement extends LitElement {
+    firstName: string;
+    lastName: string;
+    iconSize: string;
+    textSize: string;
+    backgroundColor: string;
+    static styles: import("lit").CSSResult;
+    updated(changedProperties: any): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "icon-element": MyElement;
+    }
+}
+export {};

package/dist/component/icon.lit.js

@@ -0,0 +1,75 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+import { LitElement, html, css } from "lit";
+import { customElement, property } from "lit/decorators.js";
+let MyElement = class MyElement extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.firstName = "L";
+        this.lastName = "L";
+        this.iconSize = "64px";
+        this.textSize = "16px";
+        this.backgroundColor = "red";
+    }
+    updated(changedProperties) {
+        if (changedProperties.has("iconSize")) {
+            this.style.setProperty("--lds-dual-ring-size", this.iconSize);
+        }
+        if (changedProperties.has("textSize")) {
+            this.style.setProperty("--textSize", this.textSize);
+        }
+        if (changedProperties.has("backgroundColor")) {
+            this.style.setProperty("--lds-backgroundColor", this.backgroundColor);
+        }
+    }
+    render() {
+        return html `
+      <div class="icon">${this.firstName.charAt(0).toUpperCase()}${this.lastName.charAt(0).toUpperCase()}</div>
+    `;
+    }
+};
+MyElement.styles = css `
+  .icon {
+    border-radius: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-weight: 500;
+    line-height: 150%;
+    width: var(--lds-dual-ring-size, 64px);
+    height: var(--lds-dual-ring-size, 64px);
+    font-size: var(--textSize, 16px);
+    background-color: var(--backgroundColor, rgb(153, 153, 153)); 
+    color: black;
+}
+  `;
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], MyElement.prototype, "firstName", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], MyElement.prototype, "lastName", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], MyElement.prototype, "iconSize", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], MyElement.prototype, "textSize", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], MyElement.prototype, "backgroundColor", void 0);
+MyElement = __decorate([
+    customElement("icon-element")
+], MyElement);

package/dist/main.d.ts

@@ -1,2 +1,2 @@
 import './component/spinner.lit';
-import './component/markdown.lit';
+import './component/chart.lit';