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

2025-06-10 18:58:05 +00:00
parent f7e4582fde
commit cd86001713
4 changed files with 268 additions and 26 deletions
--- a/changelog.md
+++ b/changelog.md
@ -1,5 +1,14 @@
 # Changelog

+## 2025-06-10 - 1.8.1 - fix(dees-statsgrid)
+Adjust stats grid styling for better alignment and improved visualizations in gauge and trend tiles.
+
+- Center-align tile header elements by setting align-items to center and ensuring full width.
+- Increase tile content height to 90px and center its content.
+- Update gauge visualization: reduce circle radius from 40 to 30, adjust stroke dasharray (from 251.2 to 188.5), and decrease gauge text font size.
+- Refine trend chart layout: set trend-svg height to 40px, center trend value and adjust typography to larger, bolder text.
+- Ensure overall grid responsiveness with adjusted gap and column sizing.
+
 ## 2025-04-25 - 1.8.0 - feat(dees-pagination)
 Add new pagination component to the library along with its demo and integration in the main export.

--- a/readme.md
+++ b/readme.md
@ -15,7 +15,7 @@ npm install @design.estate/dees-catalog
 | Core UI | `DeesButton`, `DeesBadge`, `DeesChips`, `DeesIcon`, `DeesLabel`, `DeesSpinner`, `DeesToast` |
 | Forms | `DeesForm`, `DeesInputText`, `DeesInputCheckbox`, `DeesInputDropdown`, `DeesInputRadio`, `DeesInputFileupload`, `DeesInputIban`, `DeesInputPhone`, `DeesInputQuantitySelector`, `DeesInputMultitoggle`, `DeesFormSubmit` |
 | Layout | `DeesAppuiBase`, `DeesAppuiMainmenu`, `DeesAppuiMainselector`, `DeesAppuiMaincontent`, `DeesAppuiAppbar`, `DeesMobileNavigation` |
-| Data Display | `DeesTable`, `DeesDataviewCodebox`, `DeesDataviewStatusobject`, `DeesPdf` |
+| Data Display | `DeesTable`, `DeesDataviewCodebox`, `DeesDataviewStatusobject`, `DeesPdf`, `DeesStatsGrid` |
 | Visualization | `DeesChartArea`, `DeesChartLog` |
 | Dialogs & Overlays | `DeesModal`, `DeesContextmenu`, `DeesSpeechbubble`, `DeesWindowlayer` |
 | Navigation | `DeesStepper`, `DeesProgressbar` |
@ -528,6 +528,213 @@ Key Features:
  - Responsive layout
  - Loading states

+#### `DeesStatsGrid`
+A responsive grid component for displaying statistical data with various visualization types including numbers, gauges, percentages, and trends.
+
+```typescript
+<dees-statsgrid
+  .tiles=${[
+    {
+      id: 'revenue',
+      title: 'Total Revenue',
+      value: 125420,
+      unit: '$',
+      type: 'number',
+      icon: 'faDollarSign',
+      description: '+12.5% from last month',
+      color: '#22c55e',
+      actions: [
+        {
+          name: 'View Details',
+          iconName: 'faChartLine',
+          action: async () => {
+            console.log('Viewing revenue details');
+          }
+        },
+        {
+          name: 'Export Data',
+          iconName: 'faFileExport',
+          action: async () => {
+            console.log('Exporting revenue data');
+          }
+        }
+      ]
+    },
+    {
+      id: 'cpu',
+      title: 'CPU Usage',
+      value: 73,
+      type: 'gauge',
+      icon: 'faMicrochip',
+      gaugeOptions: {
+        min: 0,
+        max: 100,
+        thresholds: [
+          { value: 0, color: '#22c55e' },
+          { value: 60, color: '#f59e0b' },
+          { value: 80, color: '#ef4444' }
+        ]
+      }
+    },
+    {
+      id: 'storage',
+      title: 'Storage Used',
+      value: 65,
+      type: 'percentage',
+      icon: 'faHardDrive',
+      description: '650 GB of 1 TB',
+      color: '#3b82f6'
+    },
+    {
+      id: 'requests',
+      title: 'API Requests',
+      value: '1.2k',
+      unit: '/min',
+      type: 'trend',
+      icon: 'faServer',
+      trendData: [45, 52, 38, 65, 72, 68, 75, 82, 79, 85, 88, 92]
+    },
+    {
+      id: 'uptime',
+      title: 'System Uptime',
+      value: '99.95%',
+      type: 'text',
+      icon: 'faCheckCircle',
+      color: '#22c55e',
+      description: 'Last 30 days'
+    }
+  ]}
+  .gridActions=${[
+    {
+      name: 'Refresh',
+      iconName: 'faSync',
+      action: async () => {
+        console.log('Refreshing stats...');
+      }
+    },
+    {
+      name: 'Export Report',
+      iconName: 'faFileExport',
+      action: async () => {
+        console.log('Exporting stats report...');
+      }
+    }
+  ]}
+  .minTileWidth=${250}  // Minimum tile width in pixels
+  .gap=${16}            // Gap between tiles in pixels
+></dees-statsgrid>
+```
+
+Key Features:
+- Auto-responsive grid layout with configurable minimum tile width
+- Multiple tile types for different data visualizations
+- Full theme support (light/dark mode)
+- Interactive tiles with action support
+- Grid-level and tile-level actions
+- Smooth animations and transitions
+- Icon support for visual hierarchy
+
+Tile Types:
+1. **`number`** - Display numeric values with optional units
+   - Large, prominent value display
+   - Optional unit display
+   - Custom color support
+   - Description text
+
+2. **`gauge`** - Circular gauge visualization
+   - Min/max value configuration
+   - Color thresholds for visual alerts
+   - Animated value transitions
+   - Compact circular design
+
+3. **`percentage`** - Progress bar visualization
+   - Horizontal progress bar
+   - Percentage display overlay
+   - Custom color support
+   - Ideal for capacity metrics
+
+4. **`trend`** - Mini sparkline chart
+   - Array of numeric values for trend data
+   - Area chart visualization
+   - Current value display
+   - Responsive SVG rendering
+
+5. **`text`** - Simple text display
+   - Flexible text content
+   - Custom color support
+   - Ideal for status messages
+
+Action System:
+- **Grid Actions**: Displayed as buttons in the grid header
+  - Apply to the entire stats grid
+  - Use standard `dees-button` components
+  - Support icons and text
+
+- **Tile Actions**: Context-specific actions per tile
+  - Single action: Direct click on tile
+  - Multiple actions: Right-click context menu
+  - Actions access tile data through closures
+  - Consistent with other library components
+
+Configuration Options:
+- `tiles`: Array of `IStatsTile` objects defining the grid content
+- `gridActions`: Array of actions for the entire grid
+- `minTileWidth`: Minimum width for tiles (default: 250px)
+- `gap`: Space between tiles (default: 16px)
+
+Best Practices:
+1. **Data Organization**
+   - Group related metrics together
+   - Use consistent units and scales
+   - Provide meaningful descriptions
+   - Choose appropriate tile types for data
+
+2. **Visual Hierarchy**
+   - Use colors strategically for alerts
+   - Include relevant icons
+   - Keep titles concise
+   - Balance tile types for visual interest
+
+3. **Interactivity**
+   - Provide relevant actions for detailed views
+   - Use tile actions for item-specific operations
+   - Use grid actions for global operations
+   - Keep action names clear and concise
+
+4. **Performance**
+   - Update only changed tiles
+   - Use reasonable update intervals
+   - Batch updates when possible
+   - Consider data volume for trends
+
+Common Use Cases:
+- System monitoring dashboards
+- Business intelligence displays
+- Performance metrics
+- Resource utilization
+- Real-time statistics
+- KPI tracking
+
+Integration Example:
+```typescript
+// Real-time updates
+setInterval(() => {
+  const grid = document.querySelector('dees-statsgrid');
+  const updatedTiles = [...grid.tiles];
+  
+  // Update specific tile
+  const cpuTile = updatedTiles.find(t => t.id === 'cpu');
+  cpuTile.value = Math.round(Math.random() * 100);
+  
+  // Update trend data
+  const trendTile = updatedTiles.find(t => t.id === 'requests');
+  trendTile.trendData = [...trendTile.trendData.slice(1), 
+    Math.round(Math.random() * 100)];
+  
+  grid.tiles = updatedTiles;
+}, 3000);
+```
+
 ### Visualization Components

 #### `DeesChartArea`
--- 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.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.'
 }
--- a/ts_web/elements/dees-statsgrid.ts
+++ b/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>