@littlebearapps/platform-admin-sdk 2.1.0 → 2.2.0

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

@@ -0,0 +1,632 @@
+---
+/**
+ * DailyCostChart.astro
+ *
+ * Interactive stacked bar chart showing daily cost breakdown by resource type.
+ * - Chart.js v4 stacked bar chart
+ * - Theme-aware colors using CSS custom properties
+ * - Hover tooltips with date, per-resource costs, and total
+ * - Click emits `usage:date-selected` event
+ * - Visual highlight for selected bar
+ *
+ * Part of task-18: Usage Dashboard Interactive Chart & Table Enhancement
+ */
+
+import type { DailyCostBreakdown } from '../../lib/cloudflare/graphql';
+import { RESOURCE_INFO, type ResourceType } from './usage-colors';
+
+interface Props {
+  data: DailyCostBreakdown[];
+  selectedDate?: string;
+  class?: string;
+}
+
+const { data = [], selectedDate, class: className = '' } = Astro.props;
+
+// Prepare data for Chart.js
+const labels = data.map((d) => d.date);
+const chartId = `daily-cost-chart-${Math.random().toString(36).slice(2, 9)}`;
+
+// Resource keys in display order
+const resourceKeys: ResourceType[] = [
+  'workers',
+  'd1',
+  'kv',
+  'r2',
+  'vectorize',
+  'aiGateway',
+  'durableObjects',
+];
+
+// Calculate total across all days
+const grandTotal = data.reduce((sum, d) => sum + d.total, 0);
+
+function formatCost(value: number): string {
+  return new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency: 'USD',
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2,
+  }).format(value);
+}
+
+function formatDate(dateStr: string): string {
+  const date = new Date(dateStr + 'T00:00:00');
+  return date.toLocaleDateString('en-US', {
+    weekday: 'short',
+    month: 'short',
+    day: 'numeric',
+  });
+}
+
+// Prepare dataset for each resource type
+const datasets = resourceKeys.map((key) => {
+  const info = RESOURCE_INFO.find((r) => r.key === key);
+  return {
+    key,
+    label: info?.label || key,
+    data: data.map((d) => d[key]),
+  };
+});
+
+// Serialize data for client-side script
+const chartData = JSON.stringify({
+  labels,
+  datasets,
+  resourceInfo: RESOURCE_INFO,
+  selectedDate,
+});
+---
+
+<div class:list={['daily-cost-chart', className]} data-component="daily-cost-chart">
+  <div class="chart-header">
+    <h3 class="chart-title">Daily Cost Breakdown</h3>
+    <span class="chart-total">{formatCost(grandTotal)} total</span>
+  </div>
+
+  <div class="chart-container">
+    {
+      data.length === 0 ? (
+        <div class="empty-state">
+          <svg
+            class="empty-icon"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="1.5"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z"
+            />
+          </svg>
+          <span class="empty-text">No cost data available for this period</span>
+        </div>
+      ) : (
+        <canvas id={chartId} class="chart-canvas" />
+      )
+    }
+  </div>
+
+  <div class="chart-legend">
+    {
+      RESOURCE_INFO.map((resource) => (
+        <div class="legend-item" data-resource={resource.key}>
+          <span
+            class="legend-color"
+            style={`background-color: var(--usage-resource-${resource.key}, ${resource.color.light.fill})`}
+          />
+          <span class="legend-label">{resource.label}</span>
+        </div>
+      ))
+    }
+  </div>
+
+  {
+    selectedDate && (
+      <div class="selection-indicator">
+        <span class="selection-text">Showing: {formatDate(selectedDate)}</span>
+        <button type="button" class="clear-selection" data-action="clear-selection">
+          <svg viewBox="0 0 16 16" fill="currentColor" class="clear-icon">
+            <path d="M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z" />
+          </svg>
+          Clear
+        </button>
+      </div>
+    )
+  }
+</div>
+
+<style>
+  .daily-cost-chart {
+    background: var(--usage-bg-secondary, #f6f8fa);
+    border: 1px solid var(--usage-border-default, #d1d9e0);
+    border-radius: var(--usage-radius-lg, 8px);
+    padding: var(--usage-spacing-lg, 1.5rem);
+    transition:
+      background-color var(--usage-transition-normal, 200ms ease),
+      border-color var(--usage-transition-normal, 200ms ease);
+  }
+
+  .chart-header {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    margin-bottom: var(--usage-spacing-lg, 1.5rem);
+    padding-bottom: var(--usage-spacing-md, 1rem);
+    border-bottom: 1px solid var(--usage-border-subtle, #e8ecef);
+  }
+
+  .chart-title {
+    margin: 0;
+    font-family: var(--usage-font-sans, 'Inter', sans-serif);
+    font-size: 1rem;
+    font-weight: 600;
+    color: var(--usage-text-primary, #1f2328);
+    letter-spacing: -0.01em;
+  }
+
+  .chart-total {
+    font-family: var(--usage-font-mono, 'JetBrains Mono', monospace);
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: var(--usage-text-secondary, #656d76);
+  }
+
+  .chart-container {
+    position: relative;
+    height: 280px;
+    margin-bottom: var(--usage-spacing-md, 1rem);
+  }
+
+  .chart-canvas {
+    width: 100% !important;
+    height: 100% !important;
+  }
+
+  .chart-legend {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--usage-spacing-md, 1rem);
+    padding-top: var(--usage-spacing-md, 1rem);
+    border-top: 1px solid var(--usage-border-subtle, #e8ecef);
+  }
+
+  .legend-item {
+    display: flex;
+    align-items: center;
+    gap: var(--usage-spacing-xs, 0.25rem);
+    cursor: pointer;
+    padding: 2px 6px;
+    border-radius: var(--usage-radius-sm, 4px);
+    transition: background-color var(--usage-transition-fast, 150ms ease);
+  }
+
+  .legend-item:hover {
+    background: var(--usage-bg-hover, #eaeef2);
+  }
+
+  .legend-item.dimmed {
+    opacity: 0.4;
+  }
+
+  .legend-color {
+    width: 12px;
+    height: 12px;
+    border-radius: 2px;
+    flex-shrink: 0;
+  }
+
+  .legend-label {
+    font-family: var(--usage-font-sans, 'Inter', sans-serif);
+    font-size: 0.75rem;
+    font-weight: 500;
+    color: var(--usage-text-secondary, #656d76);
+  }
+
+  .selection-indicator {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-top: var(--usage-spacing-md, 1rem);
+    padding: var(--usage-spacing-sm, 0.5rem) var(--usage-spacing-md, 1rem);
+    background: var(--usage-accent-blue, #0969da);
+    border-radius: var(--usage-radius-md, 6px);
+    color: white;
+  }
+
+  .selection-text {
+    font-family: var(--usage-font-sans, 'Inter', sans-serif);
+    font-size: 0.8125rem;
+    font-weight: 500;
+  }
+
+  .clear-selection {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    padding: 4px 8px;
+    background: rgba(255, 255, 255, 0.2);
+    border: none;
+    border-radius: var(--usage-radius-sm, 4px);
+    color: white;
+    font-family: var(--usage-font-sans, 'Inter', sans-serif);
+    font-size: 0.75rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: background-color var(--usage-transition-fast, 150ms ease);
+  }
+
+  .clear-selection:hover {
+    background: rgba(255, 255, 255, 0.3);
+  }
+
+  .clear-icon {
+    width: 14px;
+    height: 14px;
+  }
+
+  .empty-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    gap: var(--usage-spacing-sm, 0.5rem);
+  }
+
+  .empty-icon {
+    width: 48px;
+    height: 48px;
+    color: var(--usage-text-muted, #8c959f);
+    opacity: 0.5;
+  }
+
+  .empty-text {
+    font-family: var(--usage-font-sans, 'Inter', sans-serif);
+    font-size: 0.875rem;
+    color: var(--usage-text-muted, #8c959f);
+  }
+
+  /* Responsive adjustments */
+  @media (max-width: 768px) {
+    .chart-container {
+      height: 220px;
+    }
+
+    .chart-legend {
+      gap: var(--usage-spacing-sm, 0.5rem);
+    }
+
+    .legend-label {
+      font-size: 0.6875rem;
+    }
+  }
+
+  @media (max-width: 480px) {
+    .chart-header {
+      flex-direction: column;
+      gap: var(--usage-spacing-xs, 0.25rem);
+    }
+
+    .chart-container {
+      height: 180px;
+    }
+  }
+</style>
+
+<script define:vars={{ chartId, chartData }}>
+  // Initialize chart when DOM is ready
+  document.addEventListener('DOMContentLoaded', () => {
+    initDailyCostChart();
+  });
+
+  // Also handle Astro page transitions
+  document.addEventListener('astro:page-load', () => {
+    initDailyCostChart();
+  });
+
+  function initDailyCostChart() {
+    const canvas = document.getElementById(chartId);
+    if (!canvas || !(canvas instanceof HTMLCanvasElement)) return;
+
+    // Parse the serialized data
+    const data = JSON.parse(chartData);
+    if (!data.labels || data.labels.length === 0) return;
+
+    // Detect theme
+    const isDark = document.documentElement.getAttribute('data-theme') === 'dark';
+
+    // Color palettes for light and dark modes
+    const colorPalettes = {
+      workers: { light: '#f59e0b', dark: '#fbbf24' },
+      d1: { light: '#3b82f6', dark: '#60a5fa' },
+      kv: { light: '#10b981', dark: '#34d399' },
+      r2: { light: '#8b5cf6', dark: '#a78bfa' },
+      vectorize: { light: '#ec4899', dark: '#f472b6' },
+      aiGateway: { light: '#06b6d4', dark: '#22d3ee' },
+      durableObjects: { light: '#f97316', dark: '#fb923c' },
+    };
+
+    // Build datasets for Chart.js
+    const chartDatasets = data.datasets.map((ds, index) => ({
+      label: ds.label,
+      data: ds.data,
+      backgroundColor: colorPalettes[ds.key]?.[isDark ? 'dark' : 'light'] || '#888',
+      borderColor: 'transparent',
+      borderWidth: 0,
+      borderRadius: index === data.datasets.length - 1 ? { topLeft: 4, topRight: 4 } : 0,
+      borderSkipped: false,
+    }));
+
+    // Chart.js configuration
+    const config = {
+      type: 'bar',
+      data: {
+        labels: data.labels.map((d) => formatDateShort(d)),
+        datasets: chartDatasets,
+      },
+      options: {
+        responsive: true,
+        maintainAspectRatio: false,
+        interaction: {
+          mode: 'index',
+          intersect: false,
+        },
+        plugins: {
+          legend: {
+            display: false, // We use custom legend
+          },
+          tooltip: {
+            enabled: true,
+            backgroundColor: isDark ? '#21262d' : '#ffffff',
+            titleColor: isDark ? '#e6edf3' : '#1f2328',
+            bodyColor: isDark ? '#8b949e' : '#656d76',
+            borderColor: isDark ? '#30363d' : '#d1d9e0',
+            borderWidth: 1,
+            padding: 12,
+            cornerRadius: 6,
+            titleFont: {
+              family: "'Inter', sans-serif",
+              size: 13,
+              weight: 600,
+            },
+            bodyFont: {
+              family: "'JetBrains Mono', monospace",
+              size: 11,
+            },
+            callbacks: {
+              title: (items) => {
+                if (!items.length) return '';
+                const idx = items[0].dataIndex;
+                return formatDateLong(data.labels[idx]);
+              },
+              label: (context) => {
+                const value = context.raw || 0;
+                return `${context.dataset.label}: ${formatCurrency(value)}`;
+              },
+              afterBody: (items) => {
+                if (!items.length) return '';
+                const idx = items[0].dataIndex;
+                const total = data.datasets.reduce((sum, ds) => sum + (ds.data[idx] || 0), 0);
+                return `\nTotal: ${formatCurrency(total)}`;
+              },
+            },
+          },
+        },
+        scales: {
+          x: {
+            stacked: true,
+            grid: {
+              display: false,
+            },
+            ticks: {
+              color: isDark ? '#8b949e' : '#656d76',
+              font: {
+                family: "'Inter', sans-serif",
+                size: 10,
+              },
+              maxRotation: 45,
+              minRotation: 0,
+            },
+            border: {
+              display: false,
+            },
+          },
+          y: {
+            stacked: true,
+            beginAtZero: true,
+            grid: {
+              color: isDark ? '#21262d' : '#e8ecef',
+            },
+            ticks: {
+              color: isDark ? '#8b949e' : '#656d76',
+              font: {
+                family: "'JetBrains Mono', monospace",
+                size: 10,
+              },
+              callback: (value) => formatCurrency(value),
+            },
+            border: {
+              display: false,
+            },
+          },
+        },
+        onClick: (event, elements) => {
+          if (elements.length > 0) {
+            const idx = elements[0].index;
+            const date = data.labels[idx];
+
+            // Dispatch custom event
+            document.dispatchEvent(
+              new CustomEvent('usage:date-selected', {
+                detail: { date },
+                bubbles: true,
+              })
+            );
+
+            // Update URL
+            const url = new URL(window.location.href);
+            url.searchParams.set('selectedDate', date);
+            window.history.replaceState({}, '', url.toString());
+
+            // Highlight selected bar
+            highlightBar(chart, idx);
+          }
+        },
+        onHover: (event, elements) => {
+          const canvas = event.native?.target;
+          if (canvas) {
+            canvas.style.cursor = elements.length > 0 ? 'pointer' : 'default';
+          }
+        },
+      },
+    };
+
+    // Create chart
+    const chart = new Chart(canvas, config);
+
+    // Highlight selected date if present
+    if (data.selectedDate) {
+      const idx = data.labels.indexOf(data.selectedDate);
+      if (idx !== -1) {
+        highlightBar(chart, idx);
+      }
+    }
+
+    // Handle clear selection
+    const clearBtn = document.querySelector('[data-action="clear-selection"]');
+    if (clearBtn) {
+      clearBtn.addEventListener('click', () => {
+        document.dispatchEvent(
+          new CustomEvent('usage:clear-selection', {
+            bubbles: true,
+          })
+        );
+
+        const url = new URL(window.location.href);
+        url.searchParams.delete('selectedDate');
+        window.history.replaceState({}, '', url.toString());
+
+        // Reset bar highlighting
+        chart.data.datasets.forEach((ds) => {
+          ds.backgroundColor = colorPalettes[ds.key]?.[isDark ? 'dark' : 'light'] || '#888';
+        });
+        chart.update();
+      });
+    }
+
+    // Handle legend clicks for filtering
+    const legendItems = document.querySelectorAll('.legend-item');
+    const hiddenDatasets = new Set();
+
+    legendItems.forEach((item) => {
+      item.addEventListener('click', () => {
+        const resourceKey = item.getAttribute('data-resource');
+        const dsIndex = data.datasets.findIndex((ds) => ds.key === resourceKey);
+
+        if (dsIndex !== -1) {
+          const isHidden = chart.getDatasetMeta(dsIndex).hidden;
+          chart.getDatasetMeta(dsIndex).hidden = !isHidden;
+
+          if (isHidden) {
+            hiddenDatasets.delete(resourceKey);
+            item.classList.remove('dimmed');
+          } else {
+            hiddenDatasets.add(resourceKey);
+            item.classList.add('dimmed');
+          }
+
+          chart.update();
+        }
+      });
+    });
+
+    // Handle theme changes
+    const observer = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        if (mutation.attributeName === 'data-theme') {
+          const newIsDark = document.documentElement.getAttribute('data-theme') === 'dark';
+
+          chart.data.datasets.forEach((ds, i) => {
+            const key = data.datasets[i].key;
+            ds.backgroundColor = colorPalettes[key]?.[newIsDark ? 'dark' : 'light'] || '#888';
+          });
+
+          chart.options.plugins.tooltip.backgroundColor = newIsDark ? '#21262d' : '#ffffff';
+          chart.options.plugins.tooltip.titleColor = newIsDark ? '#e6edf3' : '#1f2328';
+          chart.options.plugins.tooltip.bodyColor = newIsDark ? '#8b949e' : '#656d76';
+          chart.options.plugins.tooltip.borderColor = newIsDark ? '#30363d' : '#d1d9e0';
+          chart.options.scales.x.ticks.color = newIsDark ? '#8b949e' : '#656d76';
+          chart.options.scales.y.ticks.color = newIsDark ? '#8b949e' : '#656d76';
+          chart.options.scales.y.grid.color = newIsDark ? '#21262d' : '#e8ecef';
+
+          chart.update();
+        }
+      });
+    });
+
+    observer.observe(document.documentElement, { attributes: true });
+
+    // Store chart instance for cleanup
+    canvas._chartInstance = chart;
+  }
+
+  function highlightBar(chart, selectedIndex) {
+    const isDark = document.documentElement.getAttribute('data-theme') === 'dark';
+
+    chart.data.datasets.forEach((ds, dsIdx) => {
+      const key =
+        chart.config.data.datasets[dsIdx].key ||
+        ['workers', 'd1', 'kv', 'r2', 'vectorize', 'aiGateway', 'durableObjects'][dsIdx];
+      const baseColor =
+        {
+          workers: { light: '#f59e0b', dark: '#fbbf24' },
+          d1: { light: '#3b82f6', dark: '#60a5fa' },
+          kv: { light: '#10b981', dark: '#34d399' },
+          r2: { light: '#8b5cf6', dark: '#a78bfa' },
+          vectorize: { light: '#ec4899', dark: '#f472b6' },
+          aiGateway: { light: '#06b6d4', dark: '#22d3ee' },
+          durableObjects: { light: '#f97316', dark: '#fb923c' },
+        }[key]?.[isDark ? 'dark' : 'light'] || '#888';
+
+      // Create array of colors for each bar
+      const colors = [];
+      for (let i = 0; i < ds.data.length; i++) {
+        if (i === selectedIndex) {
+          colors.push(baseColor);
+        } else {
+          colors.push(baseColor + '40'); // 25% opacity for non-selected
+        }
+      }
+      ds.backgroundColor = colors;
+    });
+
+    chart.update();
+  }
+
+  function formatDateShort(dateStr) {
+    const date = new Date(dateStr + 'T00:00:00');
+    return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
+  }
+
+  function formatDateLong(dateStr) {
+    const date = new Date(dateStr + 'T00:00:00');
+    return date.toLocaleDateString('en-US', {
+      weekday: 'long',
+      month: 'long',
+      day: 'numeric',
+      year: 'numeric',
+    });
+  }
+
+  function formatCurrency(value) {
+    return new Intl.NumberFormat('en-US', {
+      style: 'currency',
+      currency: 'USD',
+      minimumFractionDigits: 2,
+      maximumFractionDigits: 2,
+    }).format(value);
+  }
+</script>