@littlebearapps/platform-admin-sdk 2.1.0 → 2.3.0

package/templates/shared/dashboard/src/components/usage/SparklineCard.astro

@@ -0,0 +1,399 @@
+---
+/**
+ * SparklineCard Component
+ *
+ * Enhanced usage card with mini sparkline chart, trend indicator, and status dot.
+ * Part of Usage Dashboard improvements.
+ */
+
+export interface SparklinePoint {
+  date: string;
+  value: number;
+}
+
+export interface Props {
+  label: string;
+  icon: string;
+  primaryValue: string;
+  primaryLabel: string;
+  sparklineData?: SparklinePoint[];
+  trend?: 'up' | 'down' | 'stable';
+  percentChange?: number;
+  status?: 'healthy' | 'warning' | 'high' | 'critical';
+  secondaryValue?: string;
+  secondaryLabel?: string;
+  comparisonText?: string;
+  cardId: string;
+}
+
+const {
+  label,
+  icon,
+  primaryValue,
+  primaryLabel,
+  sparklineData = [],
+  trend = 'stable',
+  percentChange = 0,
+  status = 'healthy',
+  secondaryValue,
+  secondaryLabel,
+  comparisonText,
+  cardId,
+} = Astro.props;
+
+// Status colours
+const statusColours = {
+  healthy: '#10B981',
+  warning: '#F59E0B',
+  high: '#F97316',
+  critical: '#EF4444',
+};
+
+const statusColour = statusColours[status];
+
+// Trend colours (inverted for errors - down is good)
+const isErrorMetric = label.toLowerCase().includes('error');
+const trendColour =
+  trend === 'stable'
+    ? '#6B7280'
+    : trend === 'up'
+      ? isErrorMetric
+        ? '#EF4444'
+        : '#10B981'
+      : isErrorMetric
+        ? '#10B981'
+        : '#EF4444';
+
+// Trend arrow
+const trendArrow = trend === 'up' ? '↑' : trend === 'down' ? '↓' : '→';
+---
+
+<div class="sparkline-card" role="region" aria-label={label} data-card-id={cardId}>
+  <div class="card-header">
+    <div class="header-left">
+      <span
+        class="status-dot"
+        style={`background-color: ${statusColour};`}
+        title={`Status: ${status}`}></span>
+      <span class="card-icon" aria-hidden="true" set:html={icon} />
+      <span class="card-label">{label}</span>
+    </div>
+    {
+      trend !== 'stable' && (
+        <div
+          class="trend-badge"
+          style={`color: ${trendColour}; background-color: ${trendColour}15;`}
+        >
+          <span class="trend-arrow">{trendArrow}</span>
+          <span class="trend-value">{Math.abs(percentChange).toFixed(1)}%</span>
+        </div>
+      )
+    }
+  </div>
+
+  <div class="card-primary">
+    <span class="primary-value">{primaryValue}</span>
+    <span class="primary-label">{primaryLabel}</span>
+  </div>
+
+  {
+    sparklineData.length > 1 && (
+      <div class="sparkline-container">
+        <canvas
+          id={`sparkline-${cardId}`}
+          class="sparkline-canvas"
+          aria-label={`${label} trend over time`}
+        />
+      </div>
+    )
+  }
+
+  {
+    (secondaryValue || comparisonText) && (
+      <div class="card-footer">
+        {secondaryValue && (
+          <div class="secondary-metric">
+            <span class="secondary-value">{secondaryValue}</span>
+            {secondaryLabel && <span class="secondary-label">{secondaryLabel}</span>}
+          </div>
+        )}
+        {comparisonText && (
+          <div class="comparison-text" style={`color: ${trendColour};`}>
+            {comparisonText}
+          </div>
+        )}
+      </div>
+    )
+  }
+</div>
+
+<style>
+  .sparkline-card {
+    background-color: white;
+    border: 1px solid #e5e7eb;
+    border-radius: 0.5rem;
+    padding: 1rem;
+    transition: all 0.15s ease;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    min-height: 180px;
+  }
+
+  :global(.dark) .sparkline-card {
+    background-color: #1f2937;
+    border-color: #374151;
+  }
+
+  .sparkline-card:hover {
+    border-color: #d1d5db;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+  }
+
+  :global(.dark) .sparkline-card:hover {
+    border-color: #4b5563;
+  }
+
+  .card-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 0.5rem;
+  }
+
+  .header-left {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .status-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    flex-shrink: 0;
+  }
+
+  .card-icon {
+    font-size: 1rem;
+    line-height: 1;
+  }
+
+  .card-label {
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: #374151;
+    text-transform: uppercase;
+    letter-spacing: 0.025em;
+  }
+
+  :global(.dark) .card-label {
+    color: #d1d5db;
+  }
+
+  .trend-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    padding: 0.125rem 0.375rem;
+    border-radius: 9999px;
+    font-size: 0.625rem;
+    font-weight: 600;
+  }
+
+  .trend-arrow {
+    font-size: 0.75rem;
+  }
+
+  .card-primary {
+    margin-bottom: 0.5rem;
+  }
+
+  .primary-value {
+    display: block;
+    font-size: 1.75rem;
+    font-weight: 700;
+    color: #1f2937;
+    line-height: 1;
+    margin-bottom: 0.125rem;
+  }
+
+  :global(.dark) .primary-value {
+    color: #f9fafb;
+  }
+
+  .primary-label {
+    font-size: 0.625rem;
+    color: #6b7280;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+
+  :global(.dark) .primary-label {
+    color: #9ca3af;
+  }
+
+  .sparkline-container {
+    flex: 1;
+    min-height: 40px;
+    max-height: 60px;
+    margin: 0.25rem 0;
+  }
+
+  .sparkline-canvas {
+    width: 100%;
+    height: 100%;
+  }
+
+  .card-footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding-top: 0.5rem;
+    border-top: 1px solid #f3f4f6;
+    margin-top: auto;
+  }
+
+  :global(.dark) .card-footer {
+    border-color: #374151;
+  }
+
+  .secondary-metric {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .secondary-value {
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: #374151;
+  }
+
+  :global(.dark) .secondary-value {
+    color: #d1d5db;
+  }
+
+  .secondary-label {
+    font-size: 0.625rem;
+    color: #6b7280;
+  }
+
+  :global(.dark) .secondary-label {
+    color: #9ca3af;
+  }
+
+  .comparison-text {
+    font-size: 0.625rem;
+    font-weight: 500;
+  }
+
+  @media (max-width: 640px) {
+    .sparkline-card {
+      padding: 0.75rem;
+      min-height: 140px;
+    }
+
+    .primary-value {
+      font-size: 1.25rem;
+    }
+
+    .sparkline-container {
+      display: none;
+    }
+  }
+</style>
+
+<script define:vars={{ sparklineData, cardId, statusColour, trend, isErrorMetric }}>
+  // Only render sparkline if we have data
+  if (sparklineData && sparklineData.length > 1) {
+    // Wait for DOM and Chart.js to be ready
+    document.addEventListener('DOMContentLoaded', async () => {
+      try {
+        const { Chart, registerables } = await import('chart.js');
+        Chart.register(...registerables);
+
+        const canvas = document.getElementById(`sparkline-${cardId}`);
+        if (!canvas) return;
+
+        const ctx = canvas.getContext('2d');
+        if (!ctx) return;
+
+        // Determine line colour based on trend and metric type
+        const lineColour =
+          trend === 'stable'
+            ? '#6B7280'
+            : trend === 'up'
+              ? isErrorMetric
+                ? '#EF4444'
+                : '#10B981'
+              : isErrorMetric
+                ? '#10B981'
+                : '#EF4444';
+
+        // Create gradient fill
+        const gradient = ctx.createLinearGradient(0, 0, 0, 50);
+        gradient.addColorStop(0, `${lineColour}40`);
+        gradient.addColorStop(1, `${lineColour}05`);
+
+        new Chart(ctx, {
+          type: 'line',
+          data: {
+            labels: sparklineData.map((p) => p.date),
+            datasets: [
+              {
+                data: sparklineData.map((p) => p.value),
+                borderColor: lineColour,
+                backgroundColor: gradient,
+                fill: true,
+                borderWidth: 1.5,
+                tension: 0.4,
+                pointRadius: 0,
+                pointHoverRadius: 3,
+                pointHoverBackgroundColor: lineColour,
+              },
+            ],
+          },
+          options: {
+            responsive: true,
+            maintainAspectRatio: false,
+            plugins: {
+              legend: { display: false },
+              tooltip: {
+                enabled: true,
+                mode: 'index',
+                intersect: false,
+                backgroundColor: '#1f2937',
+                titleFont: { size: 10 },
+                bodyFont: { size: 10 },
+                padding: 6,
+                displayColors: false,
+                callbacks: {
+                  title: (items) => {
+                    return items[0]?.label || '';
+                  },
+                  label: (item) => {
+                    const value = item.raw;
+                    if (typeof value === 'number') {
+                      return value.toLocaleString();
+                    }
+                    return String(value);
+                  },
+                },
+              },
+            },
+            scales: {
+              x: { display: false },
+              y: { display: false, beginAtZero: true },
+            },
+            interaction: {
+              mode: 'index',
+              intersect: false,
+            },
+          },
+        });
+      } catch (e) {
+        console.error('Failed to render sparkline:', e);
+      }
+    });
+  }
+</script>