fix(chart): Fix chart rendering and appearance issues in the DeesChartArea component.

changelog.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## 2025-01-15 - 1.3.4 - fix(chart)
+Fix chart rendering and appearance issues in the DeesChartArea component.
+
+- Resolved issues with chart dimensions calculation based on padding.
+- Adjusted grid and axis lines appearance for better visibility.
+- Updated tooltip and grid line styling for better accessibility.
+- Improved series data representation as time-series for more accurate display.
+
 ## 2024-12-17 - 1.3.3 - fix(dees-input-multitoggle)
 Add missing TypeScript declaration for dees-input-multitoggle
 

package.json

@@ -15,23 +15,23 @@
   "author": "Lossless GmbH",
   "license": "MIT",
   "dependencies": {
-    "@design.estate/dees-domtools": "^2.0.61",
+    "@design.estate/dees-domtools": "^2.1.1",
     "@design.estate/dees-element": "^2.0.39",
     "@design.estate/dees-wcctools": "^1.0.90",
-    "@fortawesome/fontawesome-svg-core": "^6.6.0",
+    "@fortawesome/fontawesome-svg-core": "^6.7.2",
-    "@fortawesome/free-brands-svg-icons": "^6.6.0",
+    "@fortawesome/free-brands-svg-icons": "^6.7.2",
-    "@fortawesome/free-regular-svg-icons": "^6.6.0",
+    "@fortawesome/free-regular-svg-icons": "^6.7.2",
-    "@fortawesome/free-solid-svg-icons": "^6.6.0",
+    "@fortawesome/free-solid-svg-icons": "^6.7.2",
     "@push.rocks/smarti18n": "^1.0.4",
-    "@push.rocks/smartpromise": "^4.0.4",
+    "@push.rocks/smartpromise": "^4.1.0",
     "@push.rocks/smartstring": "^4.0.15",
-    "@tsclass/tsclass": "^4.1.2",
+    "@tsclass/tsclass": "^4.4.0",
-    "@webcontainer/api": "1.2.0",
+    "@webcontainer/api": "1.5.1-internal.6",
-    "apexcharts": "^3.54.0",
+    "apexcharts": "^4.3.0",
-    "highlight.js": "11.10.0",
+    "highlight.js": "11.11.1",
     "ibantools": "^4.5.1",
-    "monaco-editor": "^0.52.0",
+    "monaco-editor": "^0.52.2",
-    "pdfjs-dist": "^4.6.82",
+    "pdfjs-dist": "^4.10.38",
     "xterm": "^5.3.0",
     "xterm-addon-fit": "^0.8.0"
   },
@@ -39,10 +39,10 @@
     "@git.zone/tsbuild": "^2.1.84",
     "@git.zone/tsbundle": "^2.0.15",
     "@git.zone/tstest": "^1.0.90",
-    "@git.zone/tswatch": "^2.0.23",
+    "@git.zone/tswatch": "^2.0.37",
     "@push.rocks/projectinfo": "^5.0.2",
-    "@push.rocks/tapbundle": "^5.3.0",
+    "@push.rocks/tapbundle": "^5.5.4",
-    "@types/node": "^22.7.4"
+    "@types/node": "^22.10.6"
   },
   "files": [
     "ts/**/*",

ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-catalog',
-  version: '1.3.3',
+  version: '1.3.4',
   description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.'
 }

ts_web/elements/dees-chart-area.ts

@@ -38,7 +38,7 @@ export class DeesChartArea extends DeesElement {
     super();
     domtools.elementBasic.setup();
 
-    this.resizeObserver = new ResizeObserver(entries => {
+    this.resizeObserver = new ResizeObserver((entries) => {
       for (let entry of entries) {
         if (entry.target.classList.contains('mainbox')) {
           this.resizeChart(); // Call resizeChart when the .mainbox size changes
@@ -55,7 +55,7 @@ export class DeesChartArea extends DeesElement {
     });
     this.registerGarbageFunction(async () => {
       this.resizeObserver.disconnect();
-    })
+    });
   }
 
   public static styles = [
@@ -71,7 +71,7 @@ export class DeesChartArea extends DeesElement {
         position: relative;
         width: 100%;
         height: 400px;
-        background: #222;
+        background: #111;
         border-radius: 8px;
       }
 
@@ -95,10 +95,12 @@ export class DeesChartArea extends DeesElement {
   ];
 
   public render(): TemplateResult {
-    return html` <div class="mainbox">
+    return html`
+      <div class="mainbox">
         <div class="chartTitle">${this.label}</div>
         <div class="chartContainer"></div>
-    </div> `;
+      </div>
+    `;
   }
 
   public async firstUpdated() {
@@ -107,11 +109,23 @@ export class DeesChartArea extends DeesElement {
       series: [
         {
           name: 'cpu',
-          data: [31, 40, 28, 51, 42, 109, 100],
+          data: [
+            { x: '2025-01-15T03:00:00', y: 25 },
+            { x: '2025-01-15T07:00:00', y: 30 },
+            { x: '2025-01-15T11:00:00', y: 20 },
+            { x: '2025-01-15T15:00:00', y: 35 },
+            { x: '2025-01-15T19:00:00', y: 25 },
+          ],
         },
         {
           name: 'memory',
-          data: [11, 32, 45, 32, 34, 52, 41],
+          data: [
+            { x: '2025-01-15T03:00:00', y: 10 },
+            { x: '2025-01-15T07:00:00', y: 12 },
+            { x: '2025-01-15T11:00:00', y: 10 },
+            { x: '2025-01-15T15:00:00', y: 30 },
+            { x: '2025-01-15T19:00:00', y: 40 },
+          ],
         },
       ],
       chart: {
@@ -130,35 +144,62 @@ export class DeesChartArea extends DeesElement {
         curve: 'smooth',
       },
       xaxis: {
-        crosshairs: {
+        type: 'datetime', // Time-series data
-          stroke: {
+        labels: {
-            width: 1,
+          format: 'hh:mm A', // Time formatting
-            color: '#444',
+          style: {
+            colors: '#9e9e9e', // Label color
+            fontSize: '12px',
           },
         },
-        type: 'datetime',
+        axisBorder: {
-        categories: [
+          show: false, // Hide x-axis border
-          '2018-09-19T00:00:00.000Z',
+        },
-          '2018-09-19T01:30:00.000Z',
+        axisTicks: {
-          '2018-09-19T02:30:00.000Z',
+          show: false, // Hide x-axis ticks
-          '2018-09-19T03:30:00.000Z',
+        },
-          '2018-09-19T04:30:00.000Z',
-          '2018-09-19T05:30:00.000Z',
-          '2018-09-19T06:30:00.000Z',
-        ],
       },
       yaxis: {
-        crosshairs: {
+        min: 0,
-          stroke: {
+        labels: {
-            width: 1,
+          formatter: function (val: number) {
-            color: '#444',
+            return `${val} Mbps`; // Format Y-axis labels
           },
+          style: {
+            colors: '#9e9e9e', // Label color
+            fontSize: '12px',
+          },
+        },
+        axisBorder: {
+          show: false, // Hide y-axis border
+        },
+        axisTicks: {
+          show: false, // Hide y-axis ticks
         },
       },
       tooltip: {
+        shared: true, // Enables the tooltip to display across series
+        intersect: false, // Allows hovering anywhere on the chart
+        followCursor: true, // Makes tooltip follow mouse even between points
         x: {
           format: 'dd/MM/yy HH:mm',
         },
+        custom: function ({ series, seriesIndex, dataPointIndex, w }) {
+          // Get the x value
+          const xValue = w.globals.labels[dataPointIndex];
+          // Iterate through each series and get its value
+          let tooltipContent = `<div style="padding: 10px; background: #1e1e2f; color: white; border-radius: 5px;">`;
+          tooltipContent += ``; // `<strong>Time:</strong> ${xValue}<br/>`;
+
+          series.forEach((s, index) => {
+            const label = w.globals.seriesNames[index]; // Get series label
+            const value = s[dataPointIndex]; // Get value at data point
+            tooltipContent += `<strong>${label}:</strong> ${value} Mbps<br/>`;
+          });
+
+          tooltipContent += `</div>`;
+          return tooltipContent;
+        },
       },
       grid: {
         xaxis: {
@@ -171,8 +212,8 @@ export class DeesChartArea extends DeesElement {
             show: true,
           },
         },
-        borderColor: '#666', // Set the color of the grid lines
+        borderColor: '#333', // Set the color of the grid lines
-        strokeDashArray: 2, // Solid line
+        strokeDashArray: 0, // Solid line
         row: {
           colors: [], // This can be used to alternate the shading of the horizontal rows
           opacity: 0.1,
@@ -182,6 +223,15 @@ export class DeesChartArea extends DeesElement {
           opacity: 0.1,
         },
       },
+      fill: {
+        type: 'gradient', // Gradient fill for the area
+        gradient: {
+          shade: 'dark',
+          type: 'vertical',
+          gradientToColors: ['#9c27b0'], // Gradient color ending
+          stops: [0, 100],
+        },
+      },
     };
     this.chart = new ApexCharts(this.shadowRoot.querySelector('.chartContainer'), options);
     await this.chart.render();
@@ -189,20 +239,22 @@ export class DeesChartArea extends DeesElement {
   }
 
   public async resizeChart() {
-    const element = this.shadowRoot.querySelector('.chartContainer');
+    const mainbox: HTMLDivElement = this.shadowRoot.querySelector('.mainbox');
+    const chartContainer: HTMLDivElement = this.shadowRoot.querySelector('.chartContainer');
 
     // Get computed style of the element
-    const style = window.getComputedStyle(element);
+    const styleMainbox = window.getComputedStyle(mainbox);
+    const styleChartContainer = window.getComputedStyle(chartContainer);
 
     // Extract padding values
-    const paddingTop = parseInt(style.paddingTop, 10);
+    const paddingTop = parseInt(styleChartContainer.paddingTop, 10);
-    const paddingBottom = parseInt(style.paddingBottom, 10);
+    const paddingBottom = parseInt(styleChartContainer.paddingBottom, 10);
-    const paddingLeft = parseInt(style.paddingLeft, 10);
+    const paddingLeft = parseInt(styleChartContainer.paddingLeft, 10);
-    const paddingRight = parseInt(style.paddingRight, 10);
+    const paddingRight = parseInt(styleChartContainer.paddingRight, 10);
 
     // Calculate the actual width and height to use, subtracting padding
-    const actualWidth = element.clientWidth - paddingLeft - paddingRight;
+    const actualWidth = mainbox.clientWidth - paddingLeft - paddingRight;
-    const actualHeight = element.clientHeight - paddingTop - paddingBottom;
+    const actualHeight = mainbox.offsetHeight - paddingTop - paddingBottom;
 
     await this.chart.updateOptions({
       chart: {