1.0.283

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-catalog",
-  "version": "1.0.280",
+  "version": "1.0.283",
   "private": false,
   "description": "website for lossless.com",
   "main": "dist_ts_web/index.js",

ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-catalog',
-  version: '1.0.280',
+  version: '1.0.283',
   description: 'website for lossless.com'
 }

ts_web/elements/dees-chart-area.demo.ts

@@ -13,7 +13,7 @@ export const demoFunc = () => {
     </style>
     <div class="demoBox">
       <dees-chart-area
-        .title=${'System Usage'}
+        .label=${'System Usage'}
       ></dees-chart-area>
     </div>
   `;

ts_web/elements/dees-chart-area.ts

@@ -30,7 +30,7 @@ export class DeesChartArea extends DeesElement {
   public chart: ApexCharts;
 
   @property()
-  public title: string = 'Untitled Chart';
+  public label: string = 'Untitled Chart';
 
   constructor() {
     super();
@@ -74,7 +74,7 @@ export class DeesChartArea extends DeesElement {
 
   public render(): TemplateResult {
     return html` <div class="mainbox">
-      <div class="chartTitle">${this.title}</div>
+      <div class="chartTitle">${this.label}</div>
       <div class="chartContainer"></div>
     </div> `;
   }

ts_web/elements/dees-chart-log.demo.ts

@@ -0,0 +1,20 @@
+import { html } from '@design.estate/dees-element';
+
+export const demoFunc = () => {
+  return html`
+    <style>
+      .demoBox {
+        position: relative;
+        background: #000000;
+        height: 100%;
+        width: 100%;
+        padding: 40px;
+      }
+    </style>
+    <div class="demoBox">
+      <dees-chart-log
+        .label=${'Event Log'}
+      ></dees-chart-log>
+    </div>
+  `;
+};

ts_web/elements/dees-chart-log.ts

@@ -0,0 +1,90 @@
+import {
+  DeesElement,
+  css,
+  cssManager,
+  customElement,
+  html,
+  property,
+  state,
+  type CSSResult,
+  type TemplateResult,
+} from '@design.estate/dees-element';
+
+import * as domtools from '@design.estate/dees-domtools';
+import { demoFunc } from './dees-chart-log.demo.js';
+
+import ApexCharts from 'apexcharts';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-chart-log': DeesChartLog;
+  }
+}
+
+@customElement('dees-chart-log')
+export class DeesChartLog extends DeesElement {
+  public static demo = demoFunc;
+
+  // instance
+  @state()
+  public chart: ApexCharts;
+
+  @property()
+  public label: string = 'Untitled Chart';
+
+  constructor() {
+    super();
+    domtools.elementBasic.setup();
+  }
+
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+      :host {
+        font-family: 'Roboto', sans-serif;
+        color: #ccc;
+        font-weight: 600;
+        font-size: 12px;
+      }
+      .mainbox {
+        position: relative;
+        width: 100%;
+        max-width: 600px;
+        height: 400px;
+        background: #222;
+        border-radius: 8px;
+        padding: 32px 16px 16px 0px;
+      }
+
+      .chartTitle {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        text-align: center;
+        padding-top: 16px;
+      }
+      .chartContainer {
+        position: relative;
+        width: 100%;
+        height: 100%;
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    return html` <div class="mainbox">
+      <div class="chartTitle">${this.label}</div>
+      <div class="chartContainer"></div>
+    </div> `;
+  }
+
+  public async firstUpdated() {
+    const domtoolsInstance = await this.domtoolsPromise;
+    
+  }
+
+  public async updateLog() {
+    
+  }
+}

ts_web/elements/index.ts

@@ -7,6 +7,7 @@ export * from './dees-appui-mainselector.js';
 export * from './dees-button-exit.js';
 export * from './dees-button.js';
 export * from './dees-chart-area.js';
+export * from './dees-chart-log.js';
 export * from './dees-chips.js';
 export * from './dees-contextmenu.js';
 export * from './dees-dataview-codebox.js';