changelog.md

@@ -1,34 +1,5 @@
 # Changelog
 
-## 2025-01-20 - 1.4.1 - fix(dependencies)
-Update dependency versions for smartpromise, webcontainer/api, tapbundle, and @types/node
-
-- Update @push.rocks/smartpromise to version ^4.2.0
-- Downgrade @webcontainer/api to version 1.2.0
-- Update @push.rocks/tapbundle to version ^5.5.6
-- Update @types/node to version ^22.10.7
-
-## 2025-01-20 - 1.4.0 - feat(dees-terminal)
-Enhanced the dees-terminal component to support environment variable settings and improved setup command execution.
-
-- Added environment property to pass custom environment variables.
-- Introduced webcontainerDeferred to handle the promise for web container creation.
-- Enhanced demo to illustrate environment variable usage.
-- Improved async interaction with the terminal for setting environment variables and executing setup commands.
-
-## 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
-
-- Added a missing declaration to the HTMLElementTagNameMap for 'dees-input-multitoggle' element.
-
 ## 2024-12-09 - 1.3.2 - fix(metadata)
 Updated package metadata and readme for better project description and structure.
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-catalog",
-  "version": "1.4.1",
+  "version": "1.3.2",
   "private": false,
   "description": "A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.",
   "main": "dist_ts_web/index.js",
@@ -15,23 +15,23 @@
   "author": "Lossless GmbH",
   "license": "MIT",
   "dependencies": {
-    "@design.estate/dees-domtools": "^2.1.1",
+    "@design.estate/dees-domtools": "^2.0.61",
     "@design.estate/dees-element": "^2.0.39",
     "@design.estate/dees-wcctools": "^1.0.90",
-    "@fortawesome/fontawesome-svg-core": "^6.7.2",
-    "@fortawesome/free-brands-svg-icons": "^6.7.2",
-    "@fortawesome/free-regular-svg-icons": "^6.7.2",
-    "@fortawesome/free-solid-svg-icons": "^6.7.2",
+    "@fortawesome/fontawesome-svg-core": "^6.6.0",
+    "@fortawesome/free-brands-svg-icons": "^6.6.0",
+    "@fortawesome/free-regular-svg-icons": "^6.6.0",
+    "@fortawesome/free-solid-svg-icons": "^6.6.0",
     "@push.rocks/smarti18n": "^1.0.4",
-    "@push.rocks/smartpromise": "^4.2.0",
+    "@push.rocks/smartpromise": "^4.0.4",
     "@push.rocks/smartstring": "^4.0.15",
-    "@tsclass/tsclass": "^4.4.0",
+    "@tsclass/tsclass": "^4.1.2",
     "@webcontainer/api": "1.2.0",
-    "apexcharts": "^4.3.0",
-    "highlight.js": "11.11.1",
+    "apexcharts": "^3.54.0",
+    "highlight.js": "11.10.0",
     "ibantools": "^4.5.1",
-    "monaco-editor": "^0.52.2",
-    "pdfjs-dist": "^4.10.38",
+    "monaco-editor": "^0.52.0",
+    "pdfjs-dist": "^4.6.82",
     "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.37",
+    "@git.zone/tswatch": "^2.0.23",
     "@push.rocks/projectinfo": "^5.0.2",
-    "@push.rocks/tapbundle": "^5.5.6",
-    "@types/node": "^22.10.7"
+    "@push.rocks/tapbundle": "^5.3.0",
+    "@types/node": "^22.7.4"
   },
   "files": [
     "ts/**/*",

ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-catalog',
-  version: '1.4.1',
+  version: '1.3.2',
   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: #111;
+        background: #222;
         border-radius: 8px;
       }
 
@@ -95,12 +95,10 @@ export class DeesChartArea extends DeesElement {
   ];
 
   public render(): TemplateResult {
-    return html`
-      <div class="mainbox">
-        <div class="chartTitle">${this.label}</div>
-        <div class="chartContainer"></div>
-      </div>
-    `;
+    return html` <div class="mainbox">
+      <div class="chartTitle">${this.label}</div>
+      <div class="chartContainer"></div>
+    </div> `;
   }
 
   public async firstUpdated() {
@@ -109,23 +107,11 @@ export class DeesChartArea extends DeesElement {
       series: [
         {
           name: 'cpu',
-          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 },
-          ],
+          data: [31, 40, 28, 51, 42, 109, 100],
         },
         {
           name: 'memory',
-          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 },
-          ],
+          data: [11, 32, 45, 32, 34, 52, 41],
         },
       ],
       chart: {
@@ -144,62 +130,35 @@ export class DeesChartArea extends DeesElement {
         curve: 'smooth',
       },
       xaxis: {
-        type: 'datetime', // Time-series data
-        labels: {
-          format: 'hh:mm A', // Time formatting
-          style: {
-            colors: '#9e9e9e', // Label color
-            fontSize: '12px',
+        crosshairs: {
+          stroke: {
+            width: 1,
+            color: '#444',
           },
         },
-        axisBorder: {
-          show: false, // Hide x-axis border
-        },
-        axisTicks: {
-          show: false, // Hide x-axis ticks
-        },
+        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',
+        ],
       },
       yaxis: {
-        min: 0,
-        labels: {
-          formatter: function (val: number) {
-            return `${val} Mbps`; // Format Y-axis labels
+        crosshairs: {
+          stroke: {
+            width: 1,
+            color: '#444',
           },
-          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: {
@@ -212,8 +171,8 @@ export class DeesChartArea extends DeesElement {
             show: true,
           },
         },
-        borderColor: '#333', // Set the color of the grid lines
-        strokeDashArray: 0, // Solid line
+        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,
@@ -223,15 +182,6 @@ 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();
@@ -239,22 +189,20 @@ export class DeesChartArea extends DeesElement {
   }
 
   public async resizeChart() {
-    const mainbox: HTMLDivElement = this.shadowRoot.querySelector('.mainbox');
-    const chartContainer: HTMLDivElement = this.shadowRoot.querySelector('.chartContainer');
+    const element = this.shadowRoot.querySelector('.chartContainer');
 
     // Get computed style of the element
-    const styleMainbox = window.getComputedStyle(mainbox);
-    const styleChartContainer = window.getComputedStyle(chartContainer);
+    const style = window.getComputedStyle(element);
 
     // Extract padding values
-    const paddingTop = parseInt(styleChartContainer.paddingTop, 10);
-    const paddingBottom = parseInt(styleChartContainer.paddingBottom, 10);
-    const paddingLeft = parseInt(styleChartContainer.paddingLeft, 10);
-    const paddingRight = parseInt(styleChartContainer.paddingRight, 10);
+    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 = mainbox.clientWidth - paddingLeft - paddingRight;
-    const actualHeight = mainbox.offsetHeight - paddingTop - paddingBottom;
+    const actualWidth = element.clientWidth - paddingLeft - paddingRight;
+    const actualHeight = element.clientHeight - paddingTop - paddingBottom;
 
     await this.chart.updateOptions({
       chart: {

ts_web/elements/dees-input-multitoggle.ts

@@ -12,12 +12,6 @@ import {
 
 const { demoFunc } = await import('./dees-input-multitoggle.demo.js');
 
-declare global {
-  interface HTMLElementTagNameMap {
-    'dees-input-multitoggle': DeesInputMultitoggle;
-  }
-}
-
 @customElement('dees-input-multitoggle')
 export class DeesInputMultitoggle extends DeesElement {
   public static demo = demoFunc;

ts_web/elements/dees-terminal.ts

@@ -22,25 +22,13 @@ declare global {
 
 @customElement('dees-terminal')
 export class DeesTerminal extends DeesElement {
-  public static demo = () => html` <dees-terminal
-    .environment=${{
-      NODE_ENV: 'development',
-      PORT: '3000',
-    }}
-  ></dees-terminal> `;
+  public static demo = () => html` <dees-terminal></dees-terminal> `;
 
   // INSTANCE
   private resizeObserver: ResizeObserver;
 
   @property()
-  public setupCommand = `pnpm install @serve.zone/cli && servezone cli\n`;
-
-  @property()
-  environment: {[key: string]: string} = {};
-
-  // exposing webcontainer
-  private webcontainerDeferred = new domtools.plugins.smartpromise.Deferred<webcontainer.WebContainer>();
-  public webcontainerPromise = this.webcontainerDeferred.promise;
+  public setupCommand = `pnpm install @git.zone/tsbuild && clear && echo 'welcome'`;
 
   constructor() {
     super();
@@ -294,15 +282,8 @@ export class DeesTerminal extends DeesElement {
       input.write(data);
     });
     await this.waitForPrompt(term, '~/');
-    // lets set the environment variables
-    await this.setEnvironmentVariables(this.environment, webcontainerInstance);
-    input.write(`source source.env\n`);
-    await this.waitForPrompt(term, '~/');
-    // lets run the setup command
     input.write(this.setupCommand);
-    await this.waitForPrompt(term, '~/');
-    input.write(`clear && echo 'welcome'\n`);
-    this.webcontainerDeferred.resolve(webcontainerInstance);
+    input.write(`\n`);
   }
 
   async connectedCallback(): Promise<void> {
@@ -319,16 +300,14 @@ export class DeesTerminal extends DeesElement {
     this.fitAddon.fit();
   }
 
-  public async waitForPrompt(term: Terminal, prompt: string): Promise<void> {
+  private async waitForPrompt(term: Terminal, prompt: string): Promise<void> {
     return new Promise<void>((resolve) => {
       const checkPrompt = () => {
         const lines = term.buffer.active;
         for (let i = 0; i < lines.length; i++) {
           const line = lines.getLine(i);
           if (line && line.translateToString().includes(prompt)) {
-            setTimeout(() => {
-              resolve();
-            }, 100);
+            resolve();
             return;
           }
         }
@@ -338,18 +317,4 @@ export class DeesTerminal extends DeesElement {
       checkPrompt();
     });
   }
-
-  public async setEnvironmentVariables(envArg: {[key: string]: string}, webcontainerInstanceArg?: webcontainer.WebContainer) {
-    const webcontainerInstance = webcontainerInstanceArg ||await this.webcontainerPromise;
-    let envFile = ``
-    for (const key in envArg) { 
-      envFile += `export ${key}="${envArg[key]}"\n`;
-    }
-
-    await webcontainerInstance.mount({'source.env': {
-      file: {
-        contents: envFile,
-      }
-    }});
-  }
 }