@littlebearapps/platform-admin-sdk 2.1.0 → 2.2.0

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

@@ -0,0 +1,311 @@
+---
+/**
+ * CostDonutChart Component
+ *
+ * Visual donut chart showing cost breakdown by resource type.
+ * Uses Chart.js for rendering with center text showing total.
+ */
+
+export interface CostItem {
+  label: string;
+  amount: number;
+  colour: string;
+}
+
+interface Props {
+  items: CostItem[];
+  totalCost: number;
+  currency?: string;
+  title?: string;
+  trend?: 'up' | 'down' | 'stable';
+  percentChange?: number;
+  chartId: string;
+}
+
+const {
+  items,
+  totalCost,
+  currency = '$',
+  title = 'Cost Breakdown',
+  trend = 'stable',
+  percentChange = 0,
+  chartId,
+} = Astro.props;
+
+// Trend colours (for costs, down is good)
+const trendColour = trend === 'stable' ? '#6B7280' : trend === 'up' ? '#EF4444' : '#10B981';
+const trendArrow = trend === 'up' ? '↑' : trend === 'down' ? '↓' : '→';
+
+// Format currency amount
+function formatCurrency(amount: number): string {
+  if (amount >= 1000) {
+    return `${currency}${(amount / 1000).toFixed(1)}K`;
+  }
+  return `${currency}${amount.toFixed(2)}`;
+}
+
+// Prepare chart data for client-side
+const chartData = {
+  labels: items.map((item) => item.label),
+  amounts: items.map((item) => item.amount),
+  colours: items.map((item) => item.colour),
+  totalFormatted: formatCurrency(totalCost),
+};
+---
+
+<div class="cost-donut-container">
+  <div class="chart-header">
+    <h3 class="chart-title">{title}</h3>
+    {
+      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="chart-content">
+    <div class="chart-wrapper">
+      <canvas
+        id={`donut-${chartId}`}
+        class="donut-canvas"
+        aria-label={`${title}: ${formatCurrency(totalCost)}`}></canvas>
+      <div class="center-text">
+        <span class="total-value">{formatCurrency(totalCost)}</span>
+        <span class="total-label">Total</span>
+      </div>
+    </div>
+
+    <div class="legend">
+      {
+        items.map((item) => (
+          <div class="legend-item">
+            <span class="legend-colour" style={`background-color: ${item.colour};`} />
+            <span class="legend-label">{item.label}</span>
+            <span class="legend-value">{formatCurrency(item.amount)}</span>
+          </div>
+        ))
+      }
+    </div>
+  </div>
+</div>
+
+<style>
+  .cost-donut-container {
+    background-color: white;
+    border: 1px solid #e5e7eb;
+    border-radius: 0.5rem;
+    padding: 1rem;
+  }
+
+  :global(.dark) .cost-donut-container {
+    background-color: #1f2937;
+    border-color: #374151;
+  }
+
+  .chart-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 1rem;
+  }
+
+  .chart-title {
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: #374151;
+    margin: 0;
+  }
+
+  :global(.dark) .chart-title {
+    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;
+  }
+
+  .chart-content {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+  }
+
+  .chart-wrapper {
+    position: relative;
+    width: 120px;
+    height: 120px;
+    flex-shrink: 0;
+  }
+
+  .donut-canvas {
+    width: 100% !important;
+    height: 100% !important;
+  }
+
+  .center-text {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    text-align: center;
+    pointer-events: none;
+  }
+
+  .total-value {
+    display: block;
+    font-size: 1rem;
+    font-weight: 700;
+    color: #1f2937;
+    line-height: 1;
+  }
+
+  :global(.dark) .total-value {
+    color: #f9fafb;
+  }
+
+  .total-label {
+    font-size: 0.625rem;
+    color: #6b7280;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+
+  :global(.dark) .total-label {
+    color: #9ca3af;
+  }
+
+  .legend {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 0.375rem;
+    min-width: 0;
+  }
+
+  .legend-item {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 0.75rem;
+  }
+
+  .legend-colour {
+    width: 10px;
+    height: 10px;
+    border-radius: 2px;
+    flex-shrink: 0;
+  }
+
+  .legend-label {
+    flex: 1;
+    color: #6b7280;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  :global(.dark) .legend-label {
+    color: #9ca3af;
+  }
+
+  .legend-value {
+    font-weight: 600;
+    color: #374151;
+    font-family: monospace;
+    font-size: 0.6875rem;
+  }
+
+  :global(.dark) .legend-value {
+    color: #d1d5db;
+  }
+
+  @media (max-width: 480px) {
+    .chart-content {
+      flex-direction: column;
+    }
+
+    .chart-wrapper {
+      width: 100px;
+      height: 100px;
+    }
+
+    .legend {
+      width: 100%;
+    }
+  }
+</style>
+
+<script define:vars={{ chartData, chartId }}>
+  document.addEventListener('DOMContentLoaded', async () => {
+    try {
+      const { Chart, registerables } = await import('chart.js');
+      Chart.register(...registerables);
+
+      const canvas = document.getElementById(`donut-${chartId}`);
+      if (!canvas) return;
+
+      const ctx = canvas.getContext('2d');
+      if (!ctx) return;
+
+      new Chart(ctx, {
+        type: 'doughnut',
+        data: {
+          labels: chartData.labels,
+          datasets: [
+            {
+              data: chartData.amounts,
+              backgroundColor: chartData.colours,
+              borderColor: 'transparent',
+              borderWidth: 0,
+              hoverOffset: 4,
+            },
+          ],
+        },
+        options: {
+          responsive: true,
+          maintainAspectRatio: true,
+          cutout: '65%',
+          plugins: {
+            legend: {
+              display: false,
+            },
+            tooltip: {
+              enabled: true,
+              backgroundColor: '#1f2937',
+              titleFont: { size: 11 },
+              bodyFont: { size: 11 },
+              padding: 8,
+              displayColors: true,
+              callbacks: {
+                label: (context) => {
+                  const value = context.raw;
+                  const total = chartData.amounts.reduce((a, b) => a + b, 0);
+                  const percentage = total > 0 ? ((value / total) * 100).toFixed(1) : 0;
+                  return ` $${value.toFixed(2)} (${percentage}%)`;
+                },
+              },
+            },
+          },
+        },
+      });
+    } catch (e) {
+      console.error('Failed to render donut chart:', e);
+    }
+  });
+</script>