@uptime.link/statuspage 1.0.74 → 1.2.0

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

@@ -5,11 +5,15 @@ import {
   customElement,
   type TemplateResult,
   css,
-  cssManager
+  cssManager,
+  unsafeCSS
 } from '@design.estate/dees-element';
 import * as domtools from '@design.estate/dees-domtools';
+import type { IMonthlyUptime } from '../interfaces/index.js';
+import * as sharedStyles from '../styles/shared.styles.js';
 
 import './internal/uplinternal-miniheading.js';
+import { demoFunc } from './upl-statuspage-statusmonth.demo.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -19,7 +23,25 @@ declare global {
 
 @customElement('upl-statuspage-statusmonth')
 export class UplStatuspageStatusmonth extends DeesElement {
-  public static demo = () => html` <upl-statuspage-statusmonth></upl-statuspage-statusmonth> `;
+  public static demo = demoFunc;
+
+  @property({ type: Array })
+  accessor monthlyData: IMonthlyUptime[] = [];
+
+  @property({ type: String })
+  accessor serviceId: string = '';
+
+  @property({ type: String })
+  accessor serviceName: string = 'Service';
+
+  @property({ type: Boolean })
+  accessor loading: boolean = false;
+
+  @property({ type: Boolean })
+  accessor showTooltip: boolean = true;
+
+  @property({ type: Number })
+  accessor monthsToShow: number = 5;
 
   constructor() {
     super();
@@ -27,104 +49,587 @@ export class UplStatuspageStatusmonth extends DeesElement {
 
   public static styles = [
     domtools.elementBasic.staticStyles,
+    sharedStyles.commonStyles,
     css`
       :host {
-          position: relative;
-          padding: 0px 0px 15px 0px;
-          display: block;
-          background:  ${cssManager.bdTheme('#eeeeeb', '#222222')};;
-          font-family: Inter;
-          color: #fff;
+        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 {
+          padding: 0 ${unsafeCSS(sharedStyles.spacing.md)} ${unsafeCSS(sharedStyles.spacing.md)} ${unsafeCSS(sharedStyles.spacing.md)};
         }
 
         .mainbox {
-          margin: auto;
-          max-width: 900px;
-          display: grid;
-          grid-template-columns: repeat(5, calc(100% / 5 - 80px / 5));
-          grid-column-gap: 20px;
+          grid-template-columns: 1fr;
+          gap: ${unsafeCSS(sharedStyles.spacing.md)};
         }
 
         .statusMonth {
-          background:  ${cssManager.bdTheme('#ffffff', '#333333')};;
-          min-height: 20px;
-          display: grid;
-          padding: 10px;
-          grid-template-columns: repeat(6, auto);
-          grid-gap: 9px;
-          border-radius: 3px;
+          padding: ${unsafeCSS(sharedStyles.spacing.md)};
+          min-height: 260px;
+        }
+
+        .days-grid {
+          gap: 3px;
+        }
+
+        .statusDay:hover:not(.empty) {
+          transform: scale(1.1);
         }
 
-        .statusMonth .statusDay {
-          width: 16px;
-          height: 16px;
-          background: #2deb51;
-          border-radius: 3px;
+        .loading-skeleton {
+          height: 180px;
+          padding: ${unsafeCSS(sharedStyles.spacing.md)};
         }
+      }
     `
   ]
 
   public render(): TemplateResult {
+    const totalDays = this.monthlyData.reduce((sum, month) => sum + month.days.length, 0);
+    
     return html`
-      <style></style>
-      <uplinternal-miniheading>Last 150 days</uplinternal-miniheading>
-      <div class="mainbox">
-        <div class="statusMonth">
-          ${(() => {
-            let counter = 0;
-            const returnArray: TemplateResult[] = [];
-            while (counter < 30) {
-              counter++;
-              returnArray.push(html` <div class="statusDay"></div> `);
-            }
-            return returnArray;
-          })()}
-        </div>
-        <div class="statusMonth">
-          ${(() => {
-            let counter = 0;
-            const returnArray: TemplateResult[] = [];
-            while (counter < 30) {
-              counter++;
-              returnArray.push(html` <div class="statusDay"></div> `);
-            }
-            return returnArray;
-          })()}
+      <div class="container">
+        <uplinternal-miniheading>${this.serviceName} - Last ${totalDays} Days</uplinternal-miniheading>
+        <div class="mainbox">
+          ${this.loading ? html`
+            ${Array(this.monthsToShow).fill(0).map((_, index) => html`
+              <div class="statusMonth">
+                <div class="loading-skeleton">
+                  <div class="skeleton-header"></div>
+                  <div class="days-container">
+                    <div class="skeleton-grid">
+                      ${Array(42).fill(0).map((_, i) => html`
+                        <div class="skeleton-day" style="--index: ${i}"></div>
+                      `)}
+                    </div>
+                  </div>
+                  <div style="height: 48px; border-top: 1px solid ${cssManager.bdTheme('#f3f4f6', '#1f1f1f')}; margin-top: auto; padding-top: 16px;"></div>
+                </div>
+              </div>
+            `)}
+          ` : this.monthlyData.length === 0 ? html`
+            <div class="no-data-message">No uptime data available</div>
+          ` : this.monthlyData.map(month => this.renderMonth(month))}
         </div>
-        <div class="statusMonth">
-          ${(() => {
-            let counter = 0;
-            const returnArray: TemplateResult[] = [];
-            while (counter < 30) {
-              counter++;
-              returnArray.push(html` <div class="statusDay"></div> `);
-            }
-            return returnArray;
-          })()}
+        ${this.showTooltip ? html`<div class="tooltip" id="tooltip"></div>` : ''}
+      </div>
+    `;
+  }
+
+  private renderMonth(monthData: IMonthlyUptime): TemplateResult {
+    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}
+          ${isCurrentMonth ? html`<span class="current-badge">Current</span>` : ''}
         </div>
-        <div class="statusMonth">
-          ${(() => {
-            let counter = 0;
-            const returnArray: TemplateResult[] = [];
-            while (counter < 30) {
-              counter++;
-              returnArray.push(html` <div class="statusDay"></div> `);
-            }
-            return returnArray;
-          })()}
+        <div class="days-container">
+          <div class="days-grid">
+            ${this.renderWeekdayLabels()}
+            ${this.renderEmptyDays(firstDayOfWeek)}
+            ${monthData.days.map((day, index) => this.renderDay(day, index))}
+            ${this.renderTrailingEmptyDays(firstDayOfWeek + monthData.days.length)}
+          </div>
         </div>
-        <div class="statusMonth">
-          ${(() => {
-            let counter = 0;
-            const returnArray: TemplateResult[] = [];
-            while (counter < 30) {
-              counter++;
-              returnArray.push(html` <div class="statusDay"></div> `);
-            }
-            return returnArray;
-          })()}
+        <div class="overall-uptime">
+          <div class="uptime-stat">
+            <span>Uptime</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">
+              <span>Incidents</span>
+              <span class="uptime-value">${monthData.totalIncidents}</span>
+            </div>
+          ` : ''}
         </div>
       </div>
     `;
   }
+
+  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>`);
+  }
+
+  private renderEmptyDays(count: number): TemplateResult[] {
+    return Array(count).fill(0).map(() => html`<div class="statusDay empty"></div>`);
+  }
+  
+  private renderTrailingEmptyDays(totalCells: number): TemplateResult[] {
+    const remainder = totalCells % 7;
+    const trailingCount = remainder === 0 ? 0 : 7 - remainder;
+    return Array(trailingCount).fill(0).map(() => html`<div class="statusDay empty"></div>`);
+  }
+
+  private renderDay(day: any, index: number = 0): TemplateResult {
+    const status = day.status || 'no-data';
+    const date = new Date(day.date);
+    const now = new Date();
+    const isToday = date.toDateString() === now.toDateString();
+    const uptimeIntensity = this.getUptimeIntensity(day.uptime);
+
+    return html`
+      <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') && 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: '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">
+        <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 - 10}px`;
+    tooltip.style.transform = 'translateX(-50%) translateY(-100%)';
+    tooltip.classList.add('visible');
+  }
+
+  private hideTooltip() {
+    const tooltip = this.shadowRoot?.getElementById('tooltip') as HTMLElement;
+    if (tooltip) {
+      tooltip.classList.remove('visible');
+    }
+  }
+
+  private handleDayClick(day: any) {
+    this.dispatchEvent(new CustomEvent('dayClick', {
+      detail: {
+        date: day.date,
+        uptime: day.uptime,
+        incidents: day.incidents,
+        status: day.status,
+        serviceId: this.serviceId
+      },
+      bubbles: true,
+      composed: true
+    }));
+  }
 }