@design.estate/dees-catalog 3.51.2 → 3.52.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-catalog",
-  "version": "3.51.2",
+  "version": "3.52.0",
   "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",

package/ts_web/00_commitinfo_data.ts

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

package/ts_web/elements/00group-chart/dees-chart-area/component.ts

@@ -37,6 +37,9 @@ export class DeesChartArea extends DeesElement {
   @state()
   accessor seriesStats: Array<{ name: string; latest: number; min: number; max: number; avg: number; color: string }> = [];
 
+  @state()
+  accessor isFullPage: boolean = false;
+
   @property()
   accessor label: string = 'Untitled Chart';
 
@@ -577,6 +580,29 @@ export class DeesChartArea extends DeesElement {
     await this.resizeChart();
   }
 
+  public toggleFullPage() {
+    this.isFullPage = !this.isFullPage;
+    if (this.isFullPage) {
+      this.style.position = 'fixed';
+      this.style.inset = '0';
+      this.style.zIndex = '10000';
+      this.style.height = '100vh';
+      this.style.padding = '0';
+      document.body.style.overflow = 'hidden';
+    } else {
+      this.style.position = '';
+      this.style.inset = '';
+      this.style.zIndex = '';
+      this.style.height = '';
+      this.style.padding = '';
+      document.body.style.overflow = '';
+    }
+    // Give LC a tick to resize
+    requestAnimationFrame(() => {
+      this.chart?.timeScale().fitContent();
+    });
+  }
+
   private startAutoScroll() {
     if (this.autoScrollTimer) return;
     this.autoScrollTimer = window.setInterval(() => {

package/ts_web/elements/00group-chart/dees-chart-area/styles.ts

@@ -13,9 +13,40 @@ export const chartAreaStyles = [
       dees-tile {
         height: 100%;
       }
+      .chartHeader {
+        display: flex;
+        align-items: center;
+        height: 32px;
+        padding: 0 8px 0 16px;
+      }
+      .chartLabel {
+        flex: 1;
+        font-size: 14px;
+        font-weight: 500;
+        letter-spacing: -0.01em;
+        color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 63.9%)')};
+      }
+      .expandBtn {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 28px;
+        height: 28px;
+        border: none;
+        border-radius: 4px;
+        background: transparent;
+        cursor: pointer;
+        color: ${cssManager.bdTheme('hsl(0 0% 55%)', 'hsl(0 0% 45%)')};
+        transition: all 0.15s ease;
+        padding: 0;
+      }
+      .expandBtn:hover {
+        background: ${cssManager.bdTheme('hsl(0 0% 93%)', 'hsl(0 0% 12%)')};
+        color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 90%)')};
+      }
       .chartContainer {
         position: absolute;
-        inset: 0;
+        inset: 0 0 4px 0;
       }
       .statsBar {
         height: 32px;

package/ts_web/elements/00group-chart/dees-chart-area/template.ts

@@ -1,9 +1,16 @@
 import { html, type TemplateResult } from '@design.estate/dees-element';
 import type { DeesChartArea } from './component.js';
+import '../../00group-utility/dees-icon/dees-icon.js';
 
 export const renderChartArea = (component: DeesChartArea): TemplateResult => {
       return html`
-        <dees-tile .heading=${component.label}>
+        <dees-tile>
+          <div slot="header" class="chartHeader">
+            <span class="chartLabel">${component.label}</span>
+            <button class="expandBtn" @click=${() => component.toggleFullPage()} title="${component.isFullPage ? 'Exit full page' : 'Full page'}">
+              <dees-icon .icon=${component.isFullPage ? 'lucide:Minimize2' : 'lucide:Maximize2'} .iconSize=${14}></dees-icon>
+            </button>
+          </div>
           <div class="chartContainer"></div>
           ${component.seriesStats.length > 0 ? html`
             <div slot="footer" class="statsBar">