feat(statuspage-ui): improve styling and animations across status page components
This commit is contained in:
@@ -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');
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user