diff --git a/changelog.md b/changelog.md index 703d63b..3d672a3 100644 --- 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. diff --git a/readme.md b/readme.md index 821245d..0852123 100644 --- 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 + { + 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 +> +``` + +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` diff --git a/ts_web/00_commitinfo_data.ts b/ts_web/00_commitinfo_data.ts index bff0718..d237cdc 100644 --- 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.' } diff --git a/ts_web/elements/dees-statsgrid.ts b/ts_web/elements/dees-statsgrid.ts index f1efd40..383453f 100644 --- 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`
- + - + ${value}${tile.unit || ''} @@ -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 { -
+
${tile.value} ${tile.unit ? html`${tile.unit}` : ''}