update

ts_web/elements/upl-statuspage-statusdetails.ts

@@ -85,10 +85,10 @@ export class UplStatuspageStatusdetails extends DeesElement {
       .mainbox .barContainer {
         position: relative;
         display: flex;
-        gap: 1px;
+        gap: 2px;
         padding: ${unsafeCSS(spacing.sm)};
         background: ${cssManager.bdTheme('#fafafa', '#0a0a0a')};
-        border: 1px solid ${cssManager.bdTheme('#f3f4f6', '#1f1f1f')};
+        border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
         border-radius: ${unsafeCSS(borderRadius.base)};
         overflow: hidden;
         height: 40px;
@@ -98,12 +98,14 @@ export class UplStatuspageStatusdetails extends DeesElement {
         flex: 1;
         height: 100%;
         cursor: pointer;
-        transition: opacity 0.15s ease;
+        transition: all 0.15s ease;
         position: relative;
+        border-radius: 2px;
       }
 
       .mainbox .barContainer .bar:hover {
-        opacity: 0.8;
+        transform: scaleY(1.1);
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
       }
 
       .mainbox .barContainer .bar.operational {
@@ -127,7 +129,8 @@ export class UplStatuspageStatusdetails extends DeesElement {
       }
 
       .mainbox .barContainer .bar.no-data {
-        background: ${cssManager.bdTheme('#f3f4f6', '#27272a')};
+        background: ${cssManager.bdTheme('#e5e7eb', '#27272a')};
+        opacity: 0.6;
       }
 
 
@@ -196,36 +199,6 @@ export class UplStatuspageStatusdetails extends DeesElement {
         100% { background-position: -200% 0; }
       }
 
-      .stats-row {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        margin-top: ${unsafeCSS(spacing.lg)};
-        padding: ${unsafeCSS(spacing.sm)} 0;
-        border-top: 1px solid ${cssManager.bdTheme('#f3f4f6', '#1f1f1f')};
-        font-size: 12px;
-      }
-      
-      .stat-item {
-        display: flex;
-        align-items: center;
-        gap: ${unsafeCSS(spacing.sm)};
-        color: ${cssManager.bdTheme('#6b7280', '#a1a1aa')};
-      }
-      
-      .stat-value {
-        font-weight: 500;
-        color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
-        font-variant-numeric: tabular-nums;
-      }
-      
-      .status-indicator {
-        display: inline-block;
-        width: 6px;
-        height: 6px;
-        border-radius: 50%;
-        margin-right: 4px;
-      }
 
       @media (max-width: 640px) {
         .container {
@@ -283,11 +256,6 @@ export class UplStatuspageStatusdetails extends DeesElement {
           </div>
         `}
         </div>
-        ${!this.loading && this.getData().length > 0 ? html`
-          <div class="stats-row">
-            ${this.renderStats()}
-          </div>
-        ` : ''}
         <div class="tooltip" id="tooltip"></div>
       </div>
     `;
@@ -383,45 +351,4 @@ export class UplStatuspageStatusdetails extends DeesElement {
     }));
   }
 
-  private renderStats(): TemplateResult {
-    const data = this.getData();
-    const operational = data.filter(d => d.status === 'operational').length;
-    const uptime = (operational / data.length) * 100;
-    const avgResponseTime = data
-      .filter(d => d.responseTime && d.responseTime > 0)
-      .reduce((sum, d) => sum + (d.responseTime || 0), 0) / data.length || 0;
-    
-    const currentStatus = data[data.length - 1]?.status || 'no-data';
-    
-    return html`
-      <div class="stat-item">
-        <span class="status-indicator" style="background: ${this.getStatusColor(currentStatus)}"></span>
-        <span class="stat-value">${this.formatStatus(currentStatus)}</span>
-      </div>
-      <div class="stat-item">
-        <span>${uptime.toFixed(1)}%</span>
-        <span style="color: ${cssManager.bdTheme('#9ca3af', '#71717a')}">uptime</span>
-      </div>
-      <div class="stat-item">
-        <span>${avgResponseTime.toFixed(0)}ms</span>
-        <span style="color: ${cssManager.bdTheme('#9ca3af', '#71717a')}">avg response</span>
-      </div>
-    `;
-  }
-  
-  private getStatusColor(status: string): string {
-    const colors: Record<string, string> = {
-      operational: '#22c55e',
-      degraded: '#fbbf24',
-      partial_outage: '#f87171',
-      major_outage: '#ef4444',
-      maintenance: '#60a5fa',
-      'no-data': '#e5e7eb'
-    };
-    return colors[status] || '#e5e7eb';
-  }
-  
-  private formatStatus(status: string): string {
-    return status.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase());
-  }
 }