From 38b4df1ce3eab42fbebc53382a535a52f95dc4bd Mon Sep 17 00:00:00 2001
From: Philipp Kunz <gitlab@philkunz.com>
Date: Sat, 3 Feb 2024 14:42:20 +0100
Subject: [PATCH] fix(core): update

---
 ts_web/00_commitinfo_data.ts            |   2 +-
 ts_web/elements/dees-chart-area.demo.ts |   4 +-
 ts_web/elements/dees-chart-area.ts      | 136 ++++++++++++++++++++----
 3 files changed, 122 insertions(+), 20 deletions(-)

diff --git a/ts_web/00_commitinfo_data.ts b/ts_web/00_commitinfo_data.ts
index d013852..f142e56 100644
--- a/ts_web/00_commitinfo_data.ts
+++ b/ts_web/00_commitinfo_data.ts
@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-catalog',
-  version: '1.0.279',
+  version: '1.0.280',
   description: 'website for lossless.com'
 }
diff --git a/ts_web/elements/dees-chart-area.demo.ts b/ts_web/elements/dees-chart-area.demo.ts
index bb85cfb..44c03ff 100644
--- a/ts_web/elements/dees-chart-area.demo.ts
+++ b/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
+        .title=${'System Usage'}
+      ></dees-chart-area>
     </div>
   `;
 };
diff --git a/ts_web/elements/dees-chart-area.ts b/ts_web/elements/dees-chart-area.ts
index ef9af18..dc33020 100644
--- a/ts_web/elements/dees-chart-area.ts
+++ b/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 title: 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.title}</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,
+      },
+    });
   }
 }