1.0.283

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-catalog",
-  "version": "1.0.278",
+  "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.278',
+  version: '1.0.283',
   description: 'website for lossless.com'
 }

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

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

ts_web/elements/dees-chart-area.ts

@@ -5,6 +5,7 @@ import {
   customElement,
   html,
   property,
+  state,
   type CSSResult,
   type TemplateResult,
 } from '@design.estate/dees-element';
@@ -24,50 +25,95 @@ declare global {
 export class DeesChartArea 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`
-    .mainbox {
-      width: 600px;
-      height: 600px;
-      background: #222;
-      border-radius: 3px;
-      padding: 16px;
-      padding-top: 32px;
-    }
-  `];
+  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> `;
+    return html` <div class="mainbox">
+      <div class="chartTitle">${this.label}</div>
+      <div class="chartContainer"></div>
+    </div> `;
   }
 
   public async firstUpdated() {
-    var options = {
+    const domtoolsInstance = await this.domtoolsPromise;
+    var options: ApexCharts.ApexOptions = {
       series: [
         {
-          name: 'series1',
+          name: 'cpu',
           data: [31, 40, 28, 51, 42, 109, 100],
         },
         {
-          name: 'series2',
+          name: 'memory',
           data: [11, 32, 45, 32, 34, 52, 41],
         },
       ],
       chart: {
-        width: 560,
-        height: 540,
+        width: 0, // Adjusted for responsive width
+        height: 0, // Adjusted for responsive height
         type: 'area',
+        toolbar: {
+          show: false, // This line disables the toolbar
+        },
       },
       dataLabels: {
         enabled: false,
       },
       stroke: {
+        width: 1,
         curve: 'smooth',
       },
       xaxis: {
+        crosshairs: {
+          stroke: {
+            width: 1,
+            color: '#444',
+          },
+        },
         type: 'datetime',
         categories: [
           '2018-09-19T00:00:00.000Z',
@@ -79,14 +125,68 @@ export class DeesChartArea extends DeesElement {
           '2018-09-19T06:30:00.000Z',
         ],
       },
+      yaxis: {
+        crosshairs: {
+          stroke: {
+            width: 1,
+            color: '#444',
+          },
+        },
+      },
       tooltip: {
         x: {
           format: 'dd/MM/yy HH:mm',
         },
       },
+      grid: {
+        xaxis: {
+          lines: {
+            show: true, // This enables the grid lines along the x-axis
+          },
+        },
+        yaxis: {
+          lines: {
+            show: true,
+          },
+        },
+        borderColor: '#666', // Set the color of the grid lines
+        strokeDashArray: 2, // Solid line
+        row: {
+          colors: [], // This can be used to alternate the shading of the horizontal rows
+          opacity: 0.1,
+        },
+        column: {
+          colors: [], // For vertical column bands, not needed here but available for customization
+          opacity: 0.1,
+        },
+      },
     };
+    this.chart = new ApexCharts(this.shadowRoot.querySelector('.chartContainer'), options);
+    await this.chart.render();
+    await this.resizeChart();
+  }
 
-    var chart = new ApexCharts(this.shadowRoot.querySelector('.mainbox'), options);
-    chart.render();
+  public async resizeChart() {
+    const element = this.shadowRoot.querySelector('.chartContainer');
+
+    // Get computed style of the element
+    const style = window.getComputedStyle(element);
+
+    // Extract padding values
+    const paddingTop = parseInt(style.paddingTop, 10);
+    const paddingBottom = parseInt(style.paddingBottom, 10);
+    const paddingLeft = parseInt(style.paddingLeft, 10);
+    const paddingRight = parseInt(style.paddingRight, 10);
+
+    // Calculate the actual width and height to use, subtracting padding
+    const actualWidth = element.clientWidth - paddingLeft - paddingRight;
+    const actualHeight = element.clientHeight - paddingTop - paddingBottom;
+
+    await this.chart.updateOptions({
+      chart: {
+        width: actualWidth,
+        height: actualHeight,
+      },
+    });
   }
 }

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/dees-simple-appdash.ts

@@ -184,6 +184,7 @@ export class DeesSimpleAppDash extends DeesElement {
   public async firstUpdated(_changedProperties): Promise<void> {
     const domtools = await this.domtoolsPromise;
     super.firstUpdated(_changedProperties);
+    await this.loadView(this.viewTabs[0]);
   }
 
   public async launchTerminal() {

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';