fix(core): update

2024-02-03 11:26:15 +01:00
parent d029a6c346
commit be5124217a
7 changed files with 190 additions and 1 deletions
--- a/ts_web/elements/dees-chart-area.ts
+++ b/ts_web/elements/dees-chart-area.ts
@ -0,0 +1,92 @@
+import {
+  DeesElement,
+  css,
+  cssManager,
+  customElement,
+  html,
+  property,
+  type CSSResult,
+  type TemplateResult,
+} from '@design.estate/dees-element';
+
+import * as domtools from '@design.estate/dees-domtools';
+import { demoFunc } from './dees-chart-area.demo.js';
+
+import ApexCharts from 'apexcharts';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-chart-area': DeesChartArea;
+  }
+}
+
+@customElement('dees-chart-area')
+export class DeesChartArea extends DeesElement {
+  public static demo = demoFunc;
+
+  constructor() {
+    super();
+    domtools.elementBasic.setup();
+  }
+
+  public static styles = [cssManager.defaultStyles, css`
+    .mainbox {
+      width: 600px;
+      height: 600px;
+      background: #222;
+      border-radius: 3px;
+      padding: 16px;
+      padding-top: 32px;
+    }
+  `];
+
+  public render(): TemplateResult {
+    return html` <div class="mainbox"></div> `;
+  }
+
+  public async firstUpdated() {
+    var options = {
+      series: [
+        {
+          name: 'series1',
+          data: [31, 40, 28, 51, 42, 109, 100],
+        },
+        {
+          name: 'series2',
+          data: [11, 32, 45, 32, 34, 52, 41],
+        },
+      ],
+      chart: {
+        width: 560,
+        height: 540,
+        type: 'area',
+      },
+      dataLabels: {
+        enabled: false,
+      },
+      stroke: {
+        curve: 'smooth',
+      },
+      xaxis: {
+        type: 'datetime',
+        categories: [
+          '2018-09-19T00:00:00.000Z',
+          '2018-09-19T01:30:00.000Z',
+          '2018-09-19T02:30:00.000Z',
+          '2018-09-19T03:30:00.000Z',
+          '2018-09-19T04:30:00.000Z',
+          '2018-09-19T05:30:00.000Z',
+          '2018-09-19T06:30:00.000Z',
+        ],
+      },
+      tooltip: {
+        x: {
+          format: 'dd/MM/yy HH:mm',
+        },
+      },
+    };
+
+    var chart = new ApexCharts(this.shadowRoot.querySelector('.mainbox'), options);
+    chart.render();
+  }
+}