fix(dees-statsgrid): Adjust stats grid styling for better alignment and improved visualizations in gauge and trend tiles.

ts_web/00_commitinfo_data.ts

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

ts_web/elements/dees-statsgrid.ts

@@ -136,8 +136,9 @@ export class DeesStatsGrid extends DeesElement {
       .tile-header {
         display: flex;
         justify-content: space-between;
-        align-items: flex-start;
+        align-items: center;
         margin-bottom: 12px;
+        width: 100%;
       }
 
       .tile-title {
@@ -152,10 +153,12 @@ export class DeesStatsGrid extends DeesElement {
       }
 
       .tile-content {
-        min-height: 60px;
+        height: 90px;
         display: flex;
         flex-direction: column;
         justify-content: center;
+        align-items: center;
+        position: relative;
       }
 
       .tile-value {
@@ -165,7 +168,9 @@ export class DeesStatsGrid extends DeesElement {
         line-height: 1.2;
         display: flex;
         align-items: baseline;
+        justify-content: center;
         gap: 6px;
+        width: 100%;
       }
 
       .tile-unit {
@@ -182,8 +187,11 @@ export class DeesStatsGrid extends DeesElement {
 
       .gauge-container {
         width: 100%;
-        height: 120px;
+        height: 80px;
         position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
       }
 
       .gauge-svg {
@@ -194,22 +202,21 @@ export class DeesStatsGrid extends DeesElement {
       .gauge-background {
         fill: none;
         stroke: ${cssManager.bdTheme('#e0e0e0', '#2a2a2a')};
-        stroke-width: 8;
+        stroke-width: 6;
       }
 
       .gauge-fill {
         fill: none;
-        stroke-width: 8;
+        stroke-width: 6;
         stroke-linecap: round;
         transition: stroke-dashoffset 0.5s ease;
       }
 
       .gauge-text {
         fill: ${cssManager.bdTheme('#333', '#fff')};
-        font-size: 24px;
+        font-size: 18px;
         font-weight: 600;
         text-anchor: middle;
-        alignment-baseline: middle;
       }
 
       .percentage-container {
@@ -240,13 +247,19 @@ export class DeesStatsGrid extends DeesElement {
 
       .trend-container {
         width: 100%;
-        height: 60px;
+        height: 100%;
         position: relative;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        gap: 4px;
       }
 
       .trend-svg {
         width: 100%;
-        height: 100%;
+        height: 40px;
+        flex-shrink: 0;
       }
 
       .trend-line {
@@ -260,11 +273,24 @@ export class DeesStatsGrid extends DeesElement {
       }
 
       .text-value {
-        font-size: 18px;
-        font-weight: 500;
+        font-size: 32px;
+        font-weight: 600;
         color: ${cssManager.bdTheme('#333', '#fff')};
       }
 
+      .trend-value {
+        font-size: 32px;
+        font-weight: 600;
+        color: ${cssManager.bdTheme('#333', '#fff')};
+        display: flex;
+        align-items: baseline;
+        gap: 6px;
+      }
+
+      .trend-value .tile-unit {
+        font-size: 18px;
+      }
+
       dees-contextmenu {
         position: fixed;
         z-index: 1000;
@@ -370,7 +396,7 @@ export class DeesStatsGrid extends DeesElement {
     const value = typeof tile.value === 'number' ? tile.value : parseFloat(tile.value);
     const options = tile.gaugeOptions || { min: 0, max: 100 };
     const percentage = ((value - options.min) / (options.max - options.min)) * 100;
-    const strokeDasharray = 251.2; // Circumference of circle with r=40
+    const strokeDasharray = 188.5; // Circumference of circle with r=30
     const strokeDashoffset = strokeDasharray - (strokeDasharray * percentage) / 100;
 
     let strokeColor = tile.color || cssManager.bdTheme('#0084ff', '#0066cc');
@@ -385,25 +411,25 @@ export class DeesStatsGrid extends DeesElement {
 
     return html`
       <div class="gauge-container">
-        <svg class="gauge-svg" viewBox="0 0 120 120">
+        <svg class="gauge-svg" viewBox="0 0 80 80">
           <circle
             class="gauge-background"
-            cx="60"
-            cy="60"
-            r="40"
-            transform="rotate(-90 60 60)"
+            cx="40"
+            cy="40"
+            r="30"
+            transform="rotate(-90 40 40)"
           />
           <circle
             class="gauge-fill"
-            cx="60"
-            cy="60"
-            r="40"
-            transform="rotate(-90 60 60)"
+            cx="40"
+            cy="40"
+            r="30"
+            transform="rotate(-90 40 40)"
             stroke="${strokeColor}"
             stroke-dasharray="${strokeDasharray}"
             stroke-dashoffset="${strokeDashoffset}"
           />
-          <text class="gauge-text" x="60" y="60">
+          <text class="gauge-text" x="40" y="40" dy="0.35em">
             ${value}${tile.unit || ''}
           </text>
         </svg>
@@ -436,7 +462,7 @@ export class DeesStatsGrid extends DeesElement {
     const min = Math.min(...data);
     const range = max - min || 1;
     const width = 200;
-    const height = 60;
+    const height = 40;
     const points = data.map((value, index) => {
       const x = (index / (data.length - 1)) * width;
       const y = height - ((value - min) / range) * height;
@@ -451,7 +477,7 @@ export class DeesStatsGrid extends DeesElement {
           <polygon class="trend-area" points="${areaPoints}" />
           <polyline class="trend-line" points="${points}" />
         </svg>
-        <div class="tile-value" style="margin-top: 8px">
+        <div class="trend-value">
           <span>${tile.value}</span>
           ${tile.unit ? html`<span class="tile-unit">${tile.unit}</span>` : ''}
         </div>