@uptime.link/statuspage 1.1.0 → 1.3.0

package/ts_web/elements/upl-statuspage-statusmonth.ts

@@ -52,242 +52,402 @@ export class UplStatuspageStatusmonth extends DeesElement {
     sharedStyles.commonStyles,
     css`
       :host {
-          position: relative;
-          display: block;
-          background: transparent;
-          font-family: ${unsafeCSS(sharedStyles.fonts.base)};
-          color: ${sharedStyles.colors.text.primary};
+        position: relative;
+        display: block;
+        background: transparent;
+        font-family: ${unsafeCSS(sharedStyles.fonts.base)};
+        color: ${sharedStyles.colors.text.primary};
+      }
+
+      .container {
+        max-width: 1200px;
+        margin: 0 auto;
+        padding: 0 ${unsafeCSS(sharedStyles.spacing.lg)} ${unsafeCSS(sharedStyles.spacing.lg)} ${unsafeCSS(sharedStyles.spacing.lg)};
+      }
+
+      .mainbox {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+        gap: ${unsafeCSS(sharedStyles.spacing.lg)};
+      }
+
+      /* Month card with entrance animation */
+      .statusMonth {
+        background: ${sharedStyles.colors.background.card};
+        padding: ${unsafeCSS(sharedStyles.spacing.lg)};
+        border-radius: ${unsafeCSS(sharedStyles.borderRadius.lg)};
+        border: 1px solid ${sharedStyles.colors.border.default};
+        position: relative;
+        transition: all ${unsafeCSS(sharedStyles.durations.normal)} ${unsafeCSS(sharedStyles.easings.default)};
+        display: flex;
+        flex-direction: column;
+        min-height: 280px;
+        box-shadow: ${unsafeCSS(sharedStyles.shadows.sm)};
+        animation: fadeInUp 0.5s ${unsafeCSS(sharedStyles.easings.default)} both;
+      }
+
+      .statusMonth:nth-child(1) { animation-delay: 0ms; }
+      .statusMonth:nth-child(2) { animation-delay: 100ms; }
+      .statusMonth:nth-child(3) { animation-delay: 200ms; }
+      .statusMonth:nth-child(4) { animation-delay: 300ms; }
+      .statusMonth:nth-child(5) { animation-delay: 400ms; }
+
+      @keyframes fadeInUp {
+        from {
+          opacity: 0;
+          transform: translateY(16px);
         }
-
+        to {
+          opacity: 1;
+          transform: translateY(0);
+        }
+      }
+
+      .statusMonth:hover {
+        border-color: ${sharedStyles.colors.border.muted};
+        box-shadow: ${unsafeCSS(sharedStyles.shadows.md)};
+        transform: translateY(-2px);
+      }
+
+      .month-header {
+        font-size: 12px;
+        font-weight: 600;
+        margin-bottom: ${unsafeCSS(sharedStyles.spacing.md)};
+        color: ${sharedStyles.colors.text.primary};
+        letter-spacing: 0.04em;
+        text-transform: uppercase;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      }
+
+      .month-header .current-badge {
+        font-size: 9px;
+        padding: 2px 6px;
+        background: ${sharedStyles.colors.status.operational};
+        color: white;
+        border-radius: ${unsafeCSS(sharedStyles.borderRadius.full)};
+        font-weight: 500;
+        letter-spacing: 0.02em;
+      }
+
+      .days-container {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        margin-bottom: ${unsafeCSS(sharedStyles.spacing.lg)};
+      }
+
+      .days-grid {
+        display: grid;
+        grid-template-columns: repeat(7, 1fr);
+        gap: 4px;
+        width: 100%;
+      }
+
+      .weekday-label {
+        font-size: 9px;
+        text-align: center;
+        color: ${sharedStyles.colors.text.muted};
+        font-weight: 600;
+        height: 20px;
+        line-height: 20px;
+        margin-bottom: ${unsafeCSS(sharedStyles.spacing.xs)};
+        text-transform: uppercase;
+        letter-spacing: 0.02em;
+      }
+
+      /* Calendar day cell */
+      .statusDay {
+        aspect-ratio: 1;
+        border-radius: 4px;
+        cursor: pointer;
+        transition: all ${unsafeCSS(sharedStyles.durations.fast)} ${unsafeCSS(sharedStyles.easings.default)};
+        position: relative;
+        animation: dayFadeIn 0.3s ${unsafeCSS(sharedStyles.easings.default)} both;
+        animation-delay: calc(var(--day-index, 0) * 15ms);
+      }
+
+      @keyframes dayFadeIn {
+        from {
+          opacity: 0;
+          transform: scale(0.8);
+        }
+        to {
+          opacity: 1;
+          transform: scale(1);
+        }
+      }
+
+      .statusDay:hover:not(.empty) {
+        transform: scale(1.2);
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+        z-index: 2;
+      }
+
+      /* Current day highlight */
+      .statusDay.today {
+        box-shadow: 0 0 0 2px ${sharedStyles.colors.text.primary};
+        z-index: 1;
+      }
+
+      .statusDay.today:hover {
+        box-shadow: 0 0 0 2px ${sharedStyles.colors.text.primary}, 0 4px 8px rgba(0, 0, 0, 0.15);
+      }
+
+      /* Status colors with intensity variations based on uptime */
+      .statusDay.operational {
+        background: ${sharedStyles.colors.status.operational};
+      }
+
+      .statusDay.operational.uptime-high {
+        background: ${cssManager.bdTheme('#22c55e', '#22c55e')};
+      }
+
+      .statusDay.operational.uptime-mid {
+        background: ${cssManager.bdTheme('#4ade80', '#4ade80')};
+      }
+
+      .statusDay.degraded {
+        background: ${sharedStyles.colors.status.degraded};
+      }
+
+      .statusDay.partial_outage {
+        background: ${sharedStyles.colors.status.partial};
+      }
+
+      .statusDay.major_outage {
+        background: ${sharedStyles.colors.status.major};
+        animation: dayFadeIn 0.3s ${unsafeCSS(sharedStyles.easings.default)} both,
+                   majorOutagePulse 2s ease-in-out infinite;
+      }
+
+      @keyframes majorOutagePulse {
+        0%, 100% { opacity: 1; }
+        50% { opacity: 0.8; }
+      }
+
+      .statusDay.maintenance {
+        background: ${sharedStyles.colors.status.maintenance};
+      }
+
+      .statusDay.no-data {
+        background: ${sharedStyles.colors.background.muted};
+        opacity: 0.5;
+      }
+
+      .statusDay.empty {
+        background: transparent;
+        cursor: default;
+        pointer-events: none;
+        animation: none;
+      }
+
+      /* Incident count indicator */
+      .incident-count {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        font-size: 8px;
+        font-weight: 700;
+        color: white;
+        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+        line-height: 1;
+      }
+
+      /* Overall uptime footer */
+      .overall-uptime {
+        font-size: 12px;
+        margin-top: auto;
+        padding-top: ${unsafeCSS(sharedStyles.spacing.md)};
+        color: ${sharedStyles.colors.text.secondary};
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+        border-top: 1px solid ${sharedStyles.colors.border.default};
+      }
+
+      .uptime-stat {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+
+      .uptime-value {
+        font-weight: 600;
+        color: ${sharedStyles.colors.text.primary};
+        font-variant-numeric: tabular-nums;
+        font-size: 13px;
+      }
+
+      .uptime-value.good {
+        color: ${sharedStyles.colors.status.operational};
+      }
+
+      .uptime-value.warning {
+        color: ${sharedStyles.colors.status.degraded};
+      }
+
+      .uptime-value.bad {
+        color: ${sharedStyles.colors.status.partial};
+      }
+
+      /* Uptime bar visualization */
+      .uptime-bar {
+        height: 4px;
+        background: ${sharedStyles.colors.background.muted};
+        border-radius: 2px;
+        overflow: hidden;
+        margin-top: 4px;
+      }
+
+      .uptime-bar-fill {
+        height: 100%;
+        border-radius: 2px;
+        transition: width ${unsafeCSS(sharedStyles.durations.slow)} ${unsafeCSS(sharedStyles.easings.default)};
+      }
+
+      .uptime-bar-fill.good {
+        background: ${sharedStyles.colors.status.operational};
+      }
+
+      .uptime-bar-fill.warning {
+        background: ${sharedStyles.colors.status.degraded};
+      }
+
+      .uptime-bar-fill.bad {
+        background: ${sharedStyles.colors.status.partial};
+      }
+
+      /* Loading skeleton */
+      .loading-skeleton {
+        display: flex;
+        flex-direction: column;
+        gap: ${unsafeCSS(sharedStyles.spacing.sm)};
+        height: 100%;
+      }
+
+      .skeleton-header {
+        height: 20px;
+        width: 80px;
+        background: ${sharedStyles.colors.background.muted};
+        border-radius: 4px;
+        animation: shimmer 1.5s infinite;
+      }
+
+      .skeleton-grid {
+        flex: 1;
+        display: grid;
+        grid-template-columns: repeat(7, 1fr);
+        gap: 3px;
+      }
+
+      .skeleton-day {
+        background: ${sharedStyles.colors.background.muted};
+        border-radius: 3px;
+        animation: shimmer 1.5s infinite;
+        animation-delay: calc(var(--index) * 30ms);
+      }
+
+      @keyframes shimmer {
+        0% { opacity: 0.5; }
+        50% { opacity: 1; }
+        100% { opacity: 0.5; }
+      }
+
+      /* Tooltip */
+      .tooltip {
+        position: absolute;
+        background: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
+        color: ${cssManager.bdTheme('#fafafa', '#0a0a0a')};
+        padding: 10px 14px;
+        border-radius: ${unsafeCSS(sharedStyles.borderRadius.base)};
+        font-size: 12px;
+        pointer-events: none;
+        opacity: 0;
+        transition: opacity ${unsafeCSS(sharedStyles.durations.fast)} ${unsafeCSS(sharedStyles.easings.default)},
+                    transform ${unsafeCSS(sharedStyles.durations.fast)} ${unsafeCSS(sharedStyles.easings.default)};
+        z-index: 50;
+        white-space: nowrap;
+        box-shadow: ${unsafeCSS(sharedStyles.shadows.lg)};
+        line-height: 1.5;
+        transform: translateX(-50%) translateY(4px);
+      }
+
+      .tooltip.visible {
+        opacity: 1;
+        transform: translateX(-50%) translateY(0);
+      }
+
+      .tooltip-date {
+        font-weight: 600;
+        margin-bottom: 6px;
+        font-size: 13px;
+      }
+
+      .tooltip-stat {
+        font-size: 11px;
+        opacity: 0.85;
+        display: flex;
+        align-items: center;
+        gap: 6px;
+      }
+
+      .tooltip-stat + .tooltip-stat {
+        margin-top: 2px;
+      }
+
+      .tooltip-uptime-bar {
+        height: 3px;
+        width: 60px;
+        background: rgba(128, 128, 128, 0.3);
+        border-radius: 2px;
+        overflow: hidden;
+        margin-top: 8px;
+      }
+
+      .tooltip-uptime-fill {
+        height: 100%;
+        border-radius: 2px;
+      }
+
+      .no-data-message {
+        grid-column: 1 / -1;
+        text-align: center;
+        padding: ${unsafeCSS(sharedStyles.spacing['2xl'])};
+        color: ${sharedStyles.colors.text.secondary};
+        animation: fadeInUp 0.4s ${unsafeCSS(sharedStyles.easings.default)} both;
+      }
+
+      @media (max-width: 640px) {
         .container {
-          max-width: 1200px;
-          margin: 0 auto;
-          padding: 0 ${unsafeCSS(sharedStyles.spacing.lg)} ${unsafeCSS(sharedStyles.spacing.lg)} ${unsafeCSS(sharedStyles.spacing.lg)};
+          padding: 0 ${unsafeCSS(sharedStyles.spacing.md)} ${unsafeCSS(sharedStyles.spacing.md)} ${unsafeCSS(sharedStyles.spacing.md)};
         }
 
         .mainbox {
-          display: grid;
-          grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
-          gap: ${unsafeCSS(sharedStyles.spacing.lg)};
+          grid-template-columns: 1fr;
+          gap: ${unsafeCSS(sharedStyles.spacing.md)};
         }
 
         .statusMonth {
-          background: ${cssManager.bdTheme('#ffffff', '#0a0a0a')};
-          padding: ${unsafeCSS(sharedStyles.spacing.lg)};
-          border-radius: ${unsafeCSS(sharedStyles.borderRadius.base)};
-          border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
-          position: relative;
-          transition: all 0.2s ease;
-          display: flex;
-          flex-direction: column;
-          min-height: 280px;
-          box-shadow: ${cssManager.bdTheme('0 1px 2px 0 rgba(0, 0, 0, 0.05)', 'none')};
-        }
-
-        .statusMonth:hover {
-          border-color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
-          box-shadow: ${cssManager.bdTheme('0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)', '0 0 0 1px rgba(255, 255, 255, 0.1)')};
-        }
-
-        .month-header {
-          font-size: 13px;
-          font-weight: 600;
-          margin-bottom: ${unsafeCSS(sharedStyles.spacing.md)};
-          color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
-          letter-spacing: 0.02em;
-          text-transform: uppercase;
-        }
-
-        .days-container {
-          flex: 1;
-          display: flex;
-          flex-direction: column;
-          margin-bottom: ${unsafeCSS(sharedStyles.spacing.lg)};
+          padding: ${unsafeCSS(sharedStyles.spacing.md)};
+          min-height: 260px;
         }
 
         .days-grid {
-          display: grid;
-          grid-template-columns: repeat(7, 1fr);
           gap: 3px;
-          width: 100%;
-        }
-
-        .weekday-label {
-          font-size: 10px;
-          text-align: center;
-          color: ${cssManager.bdTheme('#9ca3af', '#71717a')};
-          font-weight: 500;
-          height: 20px;
-          line-height: 20px;
-          margin-bottom: ${unsafeCSS(sharedStyles.spacing.sm)};
-          text-transform: uppercase;
-        }
-
-        .statusDay {
-          aspect-ratio: 1;
-          border-radius: 4px;
-          cursor: pointer;
-          transition: all 0.15s ease;
-          position: relative;
         }
 
         .statusDay:hover:not(.empty) {
-          transform: scale(1.15);
-          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-          z-index: 1;
-        }
-
-        .statusDay.operational {
-          background: #22c55e;
-        }
-
-        .statusDay.degraded {
-          background: #fbbf24;
-        }
-
-        .statusDay.partial_outage {
-          background: #f87171;
-        }
-
-        .statusDay.major_outage {
-          background: #ef4444;
-        }
-        
-        .statusDay.maintenance {
-          background: #60a5fa;
-        }
-
-        .statusDay.no-data {
-          background: ${cssManager.bdTheme('#e5e7eb', '#27272a')};
-          opacity: 0.6;
-        }
-
-        .statusDay.empty {
-          background: transparent;
-          cursor: default;
-          pointer-events: none;
-        }
-
-        .overall-uptime {
-          font-size: 12px;
-          margin-top: auto;
-          padding-top: ${unsafeCSS(sharedStyles.spacing.md)};
-          color: ${cssManager.bdTheme('#6b7280', '#a1a1aa')};
-          display: flex;
-          flex-direction: column;
-          gap: 6px;
-          border-top: 1px solid ${cssManager.bdTheme('#f3f4f6', '#1f1f1f')};
-        }
-
-        .uptime-stat {
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-        }
-        
-        .uptime-value {
-          font-weight: 600;
-          color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
-          font-variant-numeric: tabular-nums;
-          font-size: 13px;
+          transform: scale(1.1);
         }
 
         .loading-skeleton {
-          display: flex;
-          flex-direction: column;
-          gap: ${unsafeCSS(sharedStyles.spacing.sm)};
-          height: 100%;
-        }
-        
-        .skeleton-header {
-          height: 20px;
-          width: 80px;
-          background: ${cssManager.bdTheme('#f3f4f6', '#27272a')};
-          border-radius: 4px;
-          animation: pulse 2s infinite;
-        }
-        
-        .skeleton-grid {
-          flex: 1;
-          display: grid;
-          grid-template-columns: repeat(7, 1fr);
-          gap: 2px;
-        }
-        
-        .skeleton-day {
-          background: ${cssManager.bdTheme('#f3f4f6', '#27272a')};
-          border-radius: 2px;
-          animation: pulse 2s infinite;
-          animation-delay: calc(var(--index) * 0.05s);
-        }
-        
-        @keyframes pulse {
-          0%, 100% { opacity: 1; }
-          50% { opacity: 0.5; }
-        }
-
-        @keyframes loading {
-          0% { transform: translateX(-100%); }
-          100% { transform: translateX(200%); }
-        }
-
-        .tooltip {
-          position: absolute;
-          background: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
-          color: ${cssManager.bdTheme('#fafafa', '#0a0a0a')};
-          padding: 8px 12px;
-          border-radius: 4px;
-          font-size: 12px;
-          pointer-events: none;
-          opacity: 0;
-          transition: opacity 0.15s;
-          z-index: 50;
-          white-space: nowrap;
-          box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-          line-height: 1.5;
-        }
-
-        .tooltip.visible {
-          opacity: 1;
-        }
-        
-        .tooltip-date {
-          font-weight: 500;
-          margin-bottom: 4px;
-        }
-        
-        .tooltip-stat {
-          font-size: 11px;
-          opacity: 0.9;
-        }
-
-        .no-data-message {
-          grid-column: 1 / -1;
-          text-align: center;
-          padding: ${unsafeCSS(sharedStyles.spacing['2xl'])};
-          color: ${sharedStyles.colors.text.secondary};
-        }
-
-        @media (max-width: 640px) {
-          .container {
-            padding: 0 ${unsafeCSS(sharedStyles.spacing.md)} ${unsafeCSS(sharedStyles.spacing.md)} ${unsafeCSS(sharedStyles.spacing.md)};
-          }
-
-          .mainbox {
-            grid-template-columns: 1fr;
-            gap: ${unsafeCSS(sharedStyles.spacing.md)};
-          }
-
-          .statusMonth {
-            padding: ${unsafeCSS(sharedStyles.spacing.md)};
-            min-height: 260px;
-          }
-
-          .loading-skeleton {
-            height: 180px;
-            padding: ${unsafeCSS(sharedStyles.spacing.md)};
-          }
+          height: 180px;
+          padding: ${unsafeCSS(sharedStyles.spacing.md)};
         }
+      }
     `
   ]
 
@@ -327,22 +487,31 @@ export class UplStatuspageStatusmonth extends DeesElement {
     const monthDate = new Date(monthData.month + '-01');
     const monthName = monthDate.toLocaleDateString('en-US', { month: 'short', year: 'numeric' });
     const firstDayOfWeek = new Date(monthDate.getFullYear(), monthDate.getMonth(), 1).getDay();
-    
+    const now = new Date();
+    const isCurrentMonth = monthDate.getMonth() === now.getMonth() && monthDate.getFullYear() === now.getFullYear();
+    const uptimeClass = this.getUptimeClass(monthData.overallUptime);
+
     return html`
       <div class="statusMonth" @mouseleave=${this.hideTooltip}>
-        <div class="month-header">${monthName}</div>
+        <div class="month-header">
+          ${monthName}
+          ${isCurrentMonth ? html`<span class="current-badge">Current</span>` : ''}
+        </div>
         <div class="days-container">
           <div class="days-grid">
             ${this.renderWeekdayLabels()}
             ${this.renderEmptyDays(firstDayOfWeek)}
-            ${monthData.days.map(day => this.renderDay(day))}
+            ${monthData.days.map((day, index) => this.renderDay(day, index))}
             ${this.renderTrailingEmptyDays(firstDayOfWeek + monthData.days.length)}
           </div>
         </div>
         <div class="overall-uptime">
           <div class="uptime-stat">
             <span>Uptime</span>
-            <span class="uptime-value">${monthData.overallUptime.toFixed(2)}%</span>
+            <span class="uptime-value ${uptimeClass}">${monthData.overallUptime.toFixed(2)}%</span>
+          </div>
+          <div class="uptime-bar">
+            <div class="uptime-bar-fill ${uptimeClass}" style="width: ${monthData.overallUptime}%"></div>
           </div>
           ${monthData.totalIncidents > 0 ? html`
             <div class="uptime-stat">
@@ -355,6 +524,12 @@ export class UplStatuspageStatusmonth extends DeesElement {
     `;
   }
 
+  private getUptimeClass(uptime: number): string {
+    if (uptime >= 99.9) return 'good';
+    if (uptime >= 99) return 'warning';
+    return 'bad';
+  }
+
   private renderWeekdayLabels(): TemplateResult[] {
     const weekdays = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];
     return weekdays.map(day => html`<div class="weekday-label">${day}</div>`);
@@ -370,61 +545,70 @@ export class UplStatuspageStatusmonth extends DeesElement {
     return Array(trailingCount).fill(0).map(() => html`<div class="statusDay empty"></div>`);
   }
 
-  private renderDay(day: any): TemplateResult {
+  private renderDay(day: any, index: number = 0): TemplateResult {
     const status = day.status || 'no-data';
     const date = new Date(day.date);
-    const dayNumber = date.getDate();
-    
+    const now = new Date();
+    const isToday = date.toDateString() === now.toDateString();
+    const uptimeIntensity = this.getUptimeIntensity(day.uptime);
+
     return html`
-      <div 
-        class="statusDay ${status}"
+      <div
+        class="statusDay ${status} ${isToday ? 'today' : ''} ${status === 'operational' ? uptimeIntensity : ''}"
+        style="--day-index: ${index}"
         @mouseenter=${(e: MouseEvent) => this.showTooltip && this.showDayTooltip(e, day)}
         @click=${() => this.handleDayClick(day)}
       >
-        ${status === 'major_outage' || status === 'partial_outage' ? html`
-          <div style="
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            font-size: 8px;
-            font-weight: bold;
-            color: white;
-          ">${day.incidents}</div>
+        ${(status === 'major_outage' || status === 'partial_outage') && day.incidents > 0 ? html`
+          <span class="incident-count">${day.incidents}</span>
         ` : ''}
       </div>
     `;
   }
 
+  private getUptimeIntensity(uptime: number): string {
+    if (uptime >= 99.9) return 'uptime-high';
+    if (uptime >= 99) return 'uptime-mid';
+    return '';
+  }
+
   private showDayTooltip(event: MouseEvent, day: any) {
     const tooltip = this.shadowRoot?.getElementById('tooltip') as HTMLElement;
     if (!tooltip) return;
-    
+
     const date = new Date(day.date);
-    const dateStr = date.toLocaleDateString('en-US', { 
-      weekday: 'long', 
-      year: 'numeric', 
-      month: 'long', 
-      day: 'numeric' 
+    const dateStr = date.toLocaleDateString('en-US', {
+      weekday: 'short',
+      month: 'short',
+      day: 'numeric'
     });
-    
+
     let statusText = day.status.replace(/_/g, ' ');
     statusText = statusText.charAt(0).toUpperCase() + statusText.slice(1);
-    
+
+    const uptimeColor = day.uptime >= 99.9 ? '#22c55e' :
+                        day.uptime >= 99 ? '#fbbf24' : '#f87171';
+
     tooltip.innerHTML = `
       <div class="tooltip-date">${dateStr}</div>
-      <div class="tooltip-stat">Status: ${statusText}</div>
-      <div class="tooltip-stat">Uptime: ${day.uptime.toFixed(2)}%</div>
-      ${day.incidents > 0 ? `<div class="tooltip-stat">Incidents: ${day.incidents}</div>` : ''}
-      ${day.totalDowntime > 0 ? `<div class="tooltip-stat">Downtime: ${day.totalDowntime} min</div>` : ''}
+      <div class="tooltip-stat">
+        <span style="display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: ${uptimeColor};"></span>
+        ${statusText}
+      </div>
+      <div class="tooltip-stat">Uptime: <strong>${day.uptime.toFixed(2)}%</strong></div>
+      ${day.incidents > 0 ? `<div class="tooltip-stat">Incidents: <strong>${day.incidents}</strong></div>` : ''}
+      ${day.totalDowntime > 0 ? `<div class="tooltip-stat">Downtime: <strong>${day.totalDowntime}m</strong></div>` : ''}
+      <div class="tooltip-uptime-bar">
+        <div class="tooltip-uptime-fill" style="width: ${day.uptime}%; background: ${uptimeColor};"></div>
+      </div>
     `;
-    
+
     const rect = (event.target as HTMLElement).getBoundingClientRect();
     const containerRect = this.getBoundingClientRect();
-    
+
     tooltip.style.left = `${rect.left - containerRect.left + rect.width / 2}px`;
-    tooltip.style.top = `${rect.top - containerRect.top - 80}px`;
-    tooltip.style.transform = 'translateX(-50%)';
+    tooltip.style.top = `${rect.top - containerRect.top - 10}px`;
+    tooltip.style.transform = 'translateX(-50%) translateY(-100%)';
     tooltip.classList.add('visible');
   }