Initial commit

2026-07-05 17:06:59 +02:00
parent 0935b7a98a
commit 23b392a19b
11 changed files with 5144 additions and 0 deletions
@@ -0,0 +1,43 @@
+import { html, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import ApexCharts from 'apexcharts';
+
+@customElement('apex-chart')
+export class ApexChart extends LitElement {
+    private chart?: ApexCharts;
+
+    protected createRenderRoot() {
+        return this;
+    }
+
+    render() {
+        return html`<div id="container" style="width:100%;height:100%"></div>`;
+    }
+
+    async renderChart(optionsJson: string) {
+        await this.updateComplete;
+        const options = JSON.parse(optionsJson);
+
+        options.chart = {
+            ...options.chart,
+            events: {
+                dataPointSelection: (_e: unknown, _ctx: unknown, cfg: any) => {
+                    (this as any).$server.onPointClick(cfg.seriesIndex, cfg.dataPointIndex);
+                },
+            },
+        };
+
+        const container = this.querySelector('#container') as HTMLElement;
+        if (this.chart) {
+            await this.chart.updateOptions(options);
+        } else {
+            this.chart = new ApexCharts(container, options);
+            await this.chart.render();
+        }
+    }
+
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.chart?.destroy();
+    }
+}
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<!--
+This file is auto-generated by Vaadin.
+-->
+
+<html>
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+  <style>
+    html, body, #outlet {
+      height: 100%;
+      width: 100%;
+      margin: 0;
+    }
+
+    /*
+    Fix app height for iOS home screen apps:
+    - 100% doesn't cover the entire screen.
+    - 100vh would work on iOS 18 but not on iOS 17 (too tall in Safari, correct in standalone mode).
+    - 100lvh is too tall in Safari. 100svh is too short in standalone apps.
+    - 100dvh doesn't seem to work on first render when launched from home screen (initially like 100svh, then changes to 100lvh when you try to scroll the view).
+    - So, we use 100% for the regular case (Safari and other browsers), and 100lvh for iOS home screen apps. Note, that the `display-mode: standalone` media query only works if the webmanifest defines `"display": "standalone"`.
+    */
+    @supports (-webkit-touch-callout: none) {
+      @media (display-mode: standalone) {
+        html {
+          height: 100lvh;
+        }
+      }
+    }
+  </style>
+  <!-- index.ts is included here automatically (either by the dev server or during the build) -->
+</head>
+<body>
+  <!-- This outlet div is where the views are rendered -->
+  <div id="outlet"></div>
+</body>
+</html>