@littlebearapps/platform-admin-sdk 2.1.0 → 2.2.0

package/templates/shared/dashboard/src/components/usage/daily/CostChart.astro

@@ -0,0 +1,461 @@
+---
+/**
+ * CostChart.astro
+ *
+ * Stacked bar chart for daily cost breakdown.
+ * Subscribes to nanostores for reactive data updates.
+ * Part of task-20.4: Phase 2.2 - Create CostChart.astro (simplified)
+ *
+ * @example
+ * ```astro
+ * <CostChart />
+ * ```
+ */
+
+// Generate unique chart ID for canvas reference
+const chartId = `cost-chart-${Math.random().toString(36).slice(2, 9)}`;
+---
+
+<div class="cost-chart" data-component="cost-chart" data-chart-id={chartId}>
+  <div class="chart-wrapper">
+    <canvas id={chartId} class="chart-canvas"></canvas>
+  </div>
+
+  <!-- Custom legend -->
+  <div class="chart-legend" id={`${chartId}-legend`}>
+    <div class="legend-row">
+      <span class="legend-item" data-resource="workers">
+        <span class="legend-dot legend-dot--workers"></span>
+        <span class="legend-label">Workers</span>
+      </span>
+      <span class="legend-item" data-resource="d1">
+        <span class="legend-dot legend-dot--d1"></span>
+        <span class="legend-label">D1</span>
+      </span>
+      <span class="legend-item" data-resource="kv">
+        <span class="legend-dot legend-dot--kv"></span>
+        <span class="legend-label">KV</span>
+      </span>
+      <span class="legend-item" data-resource="r2">
+        <span class="legend-dot legend-dot--r2"></span>
+        <span class="legend-label">R2</span>
+      </span>
+      <span class="legend-item" data-resource="vectorize">
+        <span class="legend-dot legend-dot--vectorize"></span>
+        <span class="legend-label">Vectorize</span>
+      </span>
+    </div>
+    <div class="legend-row">
+      <span class="legend-item" data-resource="aiGateway">
+        <span class="legend-dot legend-dot--aiGateway"></span>
+        <span class="legend-label">AI Gateway</span>
+      </span>
+      <span class="legend-item" data-resource="durableObjects">
+        <span class="legend-dot legend-dot--durableObjects"></span>
+        <span class="legend-label">Durable Objects</span>
+      </span>
+      <span class="legend-item" data-resource="workersAI">
+        <span class="legend-dot legend-dot--workersAI"></span>
+        <span class="legend-label">Workers AI</span>
+      </span>
+      <span class="legend-item" data-resource="queues">
+        <span class="legend-dot legend-dot--queues"></span>
+        <span class="legend-label">Queues</span>
+      </span>
+    </div>
+  </div>
+</div>
+
+<style>
+  .cost-chart {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    min-height: 280px;
+  }
+
+  .chart-wrapper {
+    flex: 1;
+    position: relative;
+    padding: var(--usage-spacing-md);
+  }
+
+  .chart-canvas {
+    width: 100% !important;
+    height: 100% !important;
+  }
+
+  /* Legend */
+  .chart-legend {
+    display: flex;
+    flex-direction: column;
+    gap: var(--usage-spacing-xs);
+    padding: var(--usage-spacing-sm) var(--usage-spacing-md);
+    border-top: 1px solid var(--usage-border-subtle);
+    background: var(--usage-bg-tertiary, var(--usage-bg-secondary));
+  }
+
+  .legend-row {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--usage-spacing-sm) var(--usage-spacing-md);
+    justify-content: center;
+  }
+
+  .legend-item {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 0.75rem;
+    color: var(--usage-text-muted);
+    cursor: pointer;
+    transition: opacity 0.15s ease;
+  }
+
+  .legend-item:hover {
+    opacity: 0.8;
+  }
+
+  .legend-item[data-hidden='true'] {
+    opacity: 0.4;
+  }
+
+  .legend-item[data-hidden='true'] .legend-dot {
+    background: var(--usage-text-muted);
+  }
+
+  .legend-dot {
+    width: 10px;
+    height: 10px;
+    border-radius: 2px;
+    flex-shrink: 0;
+  }
+
+  .legend-dot--workers {
+    background: var(--usage-resource-workers, #f59e0b);
+  }
+  .legend-dot--d1 {
+    background: var(--usage-resource-d1, #3b82f6);
+  }
+  .legend-dot--kv {
+    background: var(--usage-resource-kv, #10b981);
+  }
+  .legend-dot--r2 {
+    background: var(--usage-resource-r2, #8b5cf6);
+  }
+  .legend-dot--vectorize {
+    background: var(--usage-resource-vectorize, #ec4899);
+  }
+  .legend-dot--aiGateway {
+    background: var(--usage-resource-aiGateway, #06b6d4);
+  }
+  .legend-dot--durableObjects {
+    background: var(--usage-resource-durableObjects, #f97316);
+  }
+  .legend-dot--workersAI {
+    background: var(--usage-resource-workersAI, #6366f1);
+  }
+  .legend-dot--queues {
+    background: var(--usage-resource-queues, #14b8a6);
+  }
+
+  .legend-label {
+    white-space: nowrap;
+  }
+
+  /* Empty state */
+  .chart-empty {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    min-height: 200px;
+    color: var(--usage-text-muted);
+    gap: var(--usage-spacing-sm);
+  }
+
+  .chart-empty-icon {
+    opacity: 0.4;
+  }
+
+  .chart-empty-text {
+    font-size: 0.875rem;
+  }
+
+  /* Dark mode overrides */
+  :global([data-theme='dark']) .cost-chart,
+  :global(.dark) .cost-chart {
+    background: #21262d;
+  }
+
+  :global([data-theme='dark']) .chart-wrapper,
+  :global(.dark) .chart-wrapper {
+    background: #21262d;
+  }
+
+  :global([data-theme='dark']) .chart-legend,
+  :global(.dark) .chart-legend {
+    background: #161b22;
+    border-color: #21262d;
+  }
+
+  :global([data-theme='dark']) .legend-item,
+  :global(.dark) .legend-item {
+    color: #8b949e;
+  }
+
+  :global([data-theme='dark']) .chart-empty,
+  :global(.dark) .chart-empty {
+    color: #8b949e;
+  }
+</style>
+
+<script>
+  import { Chart, registerables } from 'chart.js';
+  import { $dailyData, $selectedDate, $timezone } from '../state/usageStore';
+  import { RESOURCE_INFO, getChartColors } from '../usage-colors';
+
+  // Register Chart.js components
+  Chart.register(...registerables);
+
+  // Get chartId from data attribute
+  const container = document.querySelector('[data-component="cost-chart"]');
+  const chartId = container?.dataset.chartId;
+  if (!chartId) {
+    console.error('CostChart: Missing chart ID');
+  }
+
+  // Resource keys in display order
+  const RESOURCE_KEYS = [
+    'workers',
+    'd1',
+    'kv',
+    'r2',
+    'vectorize',
+    'aiGateway',
+    'durableObjects',
+    'workersAI',
+    'queues',
+  ];
+
+  // Melbourne date formatter
+  function formatDateLabel(dateStr, tz) {
+    const date = new Date(dateStr);
+    return date.toLocaleDateString('en-AU', {
+      timeZone: tz,
+      day: 'numeric',
+      month: 'short',
+    });
+  }
+
+  // Get current theme
+  function getTheme() {
+    return document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light';
+  }
+
+  // Build datasets from daily data
+  function buildDatasets(data, theme) {
+    const colors = getChartColors(theme);
+
+    return RESOURCE_KEYS.map((key, index) => {
+      const info = RESOURCE_INFO.find((r) => r.key === key);
+      return {
+        label: info?.label || key,
+        data: data.map((d) => d[key] || 0),
+        backgroundColor: colors.backgroundColor[index],
+        hoverBackgroundColor: colors.hoverBackgroundColor[index],
+        borderRadius: 3,
+        borderSkipped: false,
+      };
+    });
+  }
+
+  // Chart instance
+  let chart = null;
+  const canvas = chartId ? document.getElementById(chartId) : null;
+
+  if (canvas) {
+    const ctx = canvas.getContext('2d');
+    const theme = getTheme();
+    const initialData = $dailyData.get();
+    const tz = $timezone.get();
+
+    // Initial chart config
+    chart = new Chart(ctx, {
+      type: 'bar',
+      data: {
+        labels: initialData.map((d) => formatDateLabel(d.date, tz)),
+        datasets: buildDatasets(initialData, theme),
+      },
+      options: {
+        responsive: true,
+        maintainAspectRatio: false,
+        interaction: {
+          mode: 'index',
+          intersect: false,
+        },
+        plugins: {
+          legend: {
+            display: false, // Using custom legend
+          },
+          tooltip: {
+            backgroundColor: theme === 'dark' ? '#1f2937' : '#ffffff',
+            titleColor: theme === 'dark' ? '#f9fafb' : '#111827',
+            bodyColor: theme === 'dark' ? '#d1d5db' : '#4b5563',
+            borderColor: theme === 'dark' ? '#374151' : '#e5e7eb',
+            borderWidth: 1,
+            padding: 12,
+            cornerRadius: 8,
+            displayColors: true,
+            boxWidth: 12,
+            boxHeight: 12,
+            boxPadding: 4,
+            callbacks: {
+              title: (items) => {
+                if (!items.length) return '';
+                const idx = items[0].dataIndex;
+                const data = $dailyData.get();
+                if (data[idx]) {
+                  return formatDateLabel(data[idx].date, $timezone.get());
+                }
+                return items[0].label;
+              },
+              label: (item) => {
+                const value = item.raw || 0;
+                if (value === 0) return null; // Hide zero values
+                return ` ${item.dataset.label}: $${value.toFixed(4)}`;
+              },
+              footer: (items) => {
+                const total = items.reduce((sum, item) => sum + (item.raw || 0), 0);
+                return `Total: $${total.toFixed(2)}`;
+              },
+            },
+          },
+        },
+        scales: {
+          x: {
+            stacked: true,
+            grid: {
+              display: false,
+            },
+            ticks: {
+              color: theme === 'dark' ? '#9ca3af' : '#6b7280',
+              font: { size: 11 },
+              maxRotation: 45,
+              minRotation: 0,
+            },
+            border: {
+              display: false,
+            },
+          },
+          y: {
+            stacked: true,
+            beginAtZero: true,
+            grid: {
+              color: theme === 'dark' ? '#374151' : '#f3f4f6',
+            },
+            ticks: {
+              color: theme === 'dark' ? '#9ca3af' : '#6b7280',
+              font: { size: 11 },
+              callback: (value) => `$${value.toFixed(2)}`,
+            },
+            border: {
+              display: false,
+            },
+          },
+        },
+        onClick: (_event, elements) => {
+          if (elements.length > 0) {
+            const idx = elements[0].index;
+            const data = $dailyData.get();
+            if (data[idx]) {
+              const currentSelected = $selectedDate.get();
+              // Toggle selection
+              if (currentSelected === data[idx].date) {
+                $selectedDate.set(null);
+              } else {
+                $selectedDate.set(data[idx].date);
+              }
+            }
+          }
+        },
+      },
+    });
+
+    // Subscribe to data changes
+    $dailyData.subscribe((data) => {
+      if (!chart) return;
+
+      const tz = $timezone.get();
+      const theme = getTheme();
+
+      chart.data.labels = data.map((d) => formatDateLabel(d.date, tz));
+      chart.data.datasets = buildDatasets(data, theme);
+      chart.update('none'); // Skip animation for data updates
+    });
+
+    // Subscribe to selection changes - highlight selected bar
+    $selectedDate.subscribe((selectedDate) => {
+      if (!chart) return;
+
+      const data = $dailyData.get();
+      const selectedIndex = data.findIndex((d) => d.date === selectedDate);
+
+      // Update bar border to show selection
+      chart.data.datasets.forEach((dataset) => {
+        dataset.borderWidth = data.map((_, i) => (i === selectedIndex ? 2 : 0));
+        dataset.borderColor = data.map((_, i) =>
+          i === selectedIndex ? 'rgba(255, 255, 255, 0.8)' : 'transparent'
+        );
+      });
+
+      chart.update('none');
+    });
+
+    // Theme change observer
+    const observer = new MutationObserver(() => {
+      if (!chart) return;
+
+      const theme = getTheme();
+      const data = $dailyData.get();
+
+      // Update datasets with new theme colors
+      chart.data.datasets = buildDatasets(data, theme);
+
+      // Update tooltip colors
+      chart.options.plugins.tooltip.backgroundColor = theme === 'dark' ? '#1f2937' : '#ffffff';
+      chart.options.plugins.tooltip.titleColor = theme === 'dark' ? '#f9fafb' : '#111827';
+      chart.options.plugins.tooltip.bodyColor = theme === 'dark' ? '#d1d5db' : '#4b5563';
+      chart.options.plugins.tooltip.borderColor = theme === 'dark' ? '#374151' : '#e5e7eb';
+
+      // Update scale colors
+      chart.options.scales.x.ticks.color = theme === 'dark' ? '#9ca3af' : '#6b7280';
+      chart.options.scales.y.ticks.color = theme === 'dark' ? '#9ca3af' : '#6b7280';
+      chart.options.scales.y.grid.color = theme === 'dark' ? '#374151' : '#f3f4f6';
+
+      chart.update('none');
+    });
+
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['data-theme'],
+    });
+
+    // Legend toggle handlers
+    const legendItems = document.querySelectorAll(`#${chartId}-legend .legend-item`);
+    legendItems.forEach((item) => {
+      item.addEventListener('click', () => {
+        const resource = item.getAttribute('data-resource');
+        const datasetIndex = RESOURCE_KEYS.indexOf(resource);
+
+        if (datasetIndex >= 0 && chart) {
+          const meta = chart.getDatasetMeta(datasetIndex);
+          meta.hidden = !meta.hidden;
+          item.setAttribute('data-hidden', String(meta.hidden));
+          chart.update();
+        }
+      });
+    });
+  }
+</script>