@principal-ai/subsystems-react 0.17.0 → 0.18.0

package/src/components/dashboard/MetricPanel.tsx

@@ -1,254 +0,0 @@
-/**
- * MetricPanel
- *
- * Wrapper component that determines which visualization to render
- * based on the metric definition and data.
- */
-
-import React from 'react';
-import { useTheme } from '@principal-ade/industry-theme';
-import type {
-  MetricPanelProps,
-  MetricDefinition,
-  MetricData,
-  DisplayComponent,
-} from './types';
-import { MetricCard, LineChart, BarChart, SourceLink } from './components';
-
-export function MetricPanel({
-  metric,
-  data,
-  onMetricClick,
-  onSourceClick,
-}: MetricPanelProps) {
-  const { theme } = useTheme();
-
-  // Determine which component to use
-  const componentType = getComponentType(metric, data);
-
-  // Render loading state
-  if (data.loading) {
-    return (
-      <div
-        style={{
-          backgroundColor: theme.colors.surface || theme.colors.background,
-          border: `1px solid ${theme.colors.border}`,
-          borderRadius: theme.radii?.[2] || 8,
-          padding: theme.space?.[3] || 16,
-          minHeight: 100,
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          fontFamily: theme.fonts.body,
-        }}
-      >
-        <span style={{ color: theme.colors.textSecondary, fontSize: theme.fontSizes[1] }}>
-          Loading...
-        </span>
-      </div>
-    );
-  }
-
-  // Render error state
-  if (data.error) {
-    return (
-      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
-        <div
-          style={{
-            backgroundColor: theme.colors.surface || theme.colors.background,
-            border: `1px solid ${theme.colors.error}`,
-            borderRadius: theme.radii?.[2] || 8,
-            padding: theme.space?.[3] || 16,
-            fontFamily: theme.fonts.body,
-          }}
-        >
-          <div
-            style={{
-              color: theme.colors.error,
-              marginBottom: theme.space?.[2] || 8,
-              fontSize: theme.fontSizes[1],
-              fontWeight: theme.fontWeights.medium,
-            }}
-          >
-            {metric.name}
-          </div>
-          <div style={{ color: theme.colors.textSecondary, fontSize: theme.fontSizes[0] }}>
-            {data.error}
-          </div>
-        </div>
-
-        {/* Source links - show even in error state for navigation to workflows */}
-        {metric.sources && metric.sources.length > 0 && onSourceClick && (
-          <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
-            {metric.sources.map((source, i) => (
-              <SourceLink key={i} source={source} onClick={onSourceClick} />
-            ))}
-          </div>
-        )}
-      </div>
-    );
-  }
-
-  const handleClick = () => {
-    onMetricClick?.(metric.id);
-  };
-
-  return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
-      {/* The visualization component */}
-      {renderComponent(componentType, metric, data, handleClick)}
-
-      {/* Source links */}
-      {metric.sources && metric.sources.length > 0 && onSourceClick && (
-        <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
-          {metric.sources.map((source, i) => (
-            <SourceLink key={i} source={source} onClick={onSourceClick} />
-          ))}
-        </div>
-      )}
-    </div>
-  );
-}
-
-/**
- * Determine which component to render based on metric definition and data
- */
-function getComponentType(metric: MetricDefinition, data: MetricData): DisplayComponent {
-  // Explicit display hint takes precedence
-  if (metric.display?.component) {
-    return metric.display.component;
-  }
-
-  const { type, query } = metric;
-
-  // Time series data → chart
-  if (data.series && data.series.length > 0) {
-    if (query.groupBy && query.groupBy.length > 0) {
-      return 'StackedBarChart';
-    }
-    return 'LineChart';
-  }
-
-  // Histogram data
-  if (data.histogram) {
-    return 'Histogram';
-  }
-
-  // Counter with time grouping → line/bar chart (but no series data yet)
-  if (type === 'counter' && query.timeGroup) {
-    return query.groupBy?.length ? 'BarChart' : 'LineChart';
-  }
-
-  // Gauge (percentage) → gauge or metric card
-  if (type === 'gauge') {
-    return metric.thresholds ? 'GaugeChart' : 'MetricCard';
-  }
-
-  // Default to metric card
-  return 'MetricCard';
-}
-
-/**
- * Render the appropriate component
- */
-function renderComponent(
-  componentType: DisplayComponent,
-  metric: MetricDefinition,
-  data: MetricData,
-  onClick?: () => void
-): React.ReactNode {
-  switch (componentType) {
-    case 'MetricCard':
-    case 'GaugeChart': // Use MetricCard for now, can add GaugeChart later
-      return (
-        <MetricCard
-          title={metric.name}
-          value={data.current ?? 0}
-          unit={metric.unit}
-          description={metric.description}
-          trend={data.trend}
-          changePercent={data.changePercent}
-          showTrend={metric.display?.showTrend ?? true}
-          showSparkline={metric.display?.showSparkline}
-          sparklineData={data.series}
-          thresholds={metric.thresholds}
-          size={metric.display?.size || 'medium'}
-          onClick={onClick}
-        />
-      );
-
-    case 'LineChart':
-      return (
-        <LineChart
-          title={metric.name}
-          data={data.series || []}
-          xKey="date"
-          yKey="value"
-          unit={metric.unit}
-          onClick={onClick}
-        />
-      );
-
-    case 'BarChart':
-    case 'StackedBarChart':
-      // Extract series keys from data
-      const series = data.series && data.series.length > 0
-        ? Object.keys(data.series[0]).filter(k => k !== 'date')
-        : metric.query.groupBy || [];
-
-      return (
-        <BarChart
-          title={metric.name}
-          data={data.series || []}
-          xKey="date"
-          series={series}
-          stacked={componentType === 'StackedBarChart'}
-          unit={metric.unit}
-          onClick={onClick}
-        />
-      );
-
-    case 'Histogram':
-      // TODO: Implement Histogram component
-      return (
-        <MetricCard
-          title={metric.name}
-          value="Histogram (TODO)"
-          description={metric.description}
-          onClick={onClick}
-        />
-      );
-
-    case 'PieChart':
-      // TODO: Implement PieChart component
-      return (
-        <MetricCard
-          title={metric.name}
-          value="PieChart (TODO)"
-          description={metric.description}
-          onClick={onClick}
-        />
-      );
-
-    case 'DataTable':
-      // TODO: Implement DataTable component
-      return (
-        <MetricCard
-          title={metric.name}
-          value="DataTable (TODO)"
-          description={metric.description}
-          onClick={onClick}
-        />
-      );
-
-    default:
-      return (
-        <MetricCard
-          title={metric.name}
-          value={data.current ?? 0}
-          unit={metric.unit}
-          onClick={onClick}
-        />
-      );
-  }
-}

package/src/components/dashboard/MockDataProvider.ts

@@ -1,330 +0,0 @@
-/**
- * MockDataProvider
- *
- * Provides mock data for dashboard metrics during prototyping.
- * Can use inline _mockData from the dashboard definition or generate realistic data.
- */
-
-import type {
-  DashboardDefinition,
-  MetricDefinition,
-  MetricData,
-  DataProvider,
-  TimeSeriesPoint,
-} from './types';
-
-export class MockDataProvider implements DataProvider {
-  private data: Record<string, MetricData> = {};
-
-  constructor(dashboard: DashboardDefinition) {
-    for (const metric of dashboard.metrics) {
-      this.data[metric.id] = this.resolveData(metric);
-    }
-  }
-
-  get(metricId: string): MetricData {
-    return this.data[metricId] || { error: `No data for metric: ${metricId}` };
-  }
-
-  getAll(): Record<string, MetricData> {
-    return this.data;
-  }
-
-  private resolveData(metric: MetricDefinition): MetricData {
-    // Use inline mock data if provided
-    if (metric._mockData) {
-      return this.transformMockData(metric._mockData, metric);
-    }
-
-    // Generate data based on metric type and query
-    return this.generateData(metric);
-  }
-
-  private transformMockData(
-    mockData: NonNullable<MetricDefinition['_mockData']>,
-    _metric: MetricDefinition
-  ): MetricData {
-    const result: MetricData = {};
-
-    if (mockData.current !== undefined) {
-      result.current = mockData.current;
-    }
-
-    if (mockData.previous !== undefined) {
-      result.previous = mockData.previous;
-      // Calculate change percent if not provided
-      if (result.current !== undefined) {
-        result.changePercent =
-          ((result.current - mockData.previous) / mockData.previous) * 100;
-        result.trend =
-          result.changePercent > 0
-            ? 'up'
-            : result.changePercent < 0
-              ? 'down'
-              : 'flat';
-      }
-    }
-
-    if (mockData.trend) {
-      result.trend = mockData.trend;
-    }
-
-    if (mockData.series) {
-      result.series = mockData.series;
-    }
-
-    if (mockData.breakdown) {
-      result.breakdown = mockData.breakdown;
-    }
-
-    if (mockData.histogram) {
-      result.histogram = mockData.histogram;
-    }
-
-    return result;
-  }
-
-  private generateData(metric: MetricDefinition): MetricData {
-    const { type, query } = metric;
-
-    // Time series data
-    if (query.timeGroup) {
-      return this.generateTimeSeries(metric);
-    }
-
-    // Single value
-    if (type === 'gauge') {
-      return this.generateGaugeData(metric);
-    }
-
-    if (type === 'counter') {
-      return this.generateCounterData(metric);
-    }
-
-    if (type === 'histogram') {
-      return this.generateHistogramData(metric);
-    }
-
-    // Fallback
-    return {
-      current: Math.floor(Math.random() * 1000),
-      trend: 'flat',
-    };
-  }
-
-  private generateTimeSeries(metric: MetricDefinition): MetricData {
-    const { query } = metric;
-    const points = this.getPointCount(query.timeGroup);
-    const series: TimeSeriesPoint[] = [];
-
-    const baseValue = this.getBaseValue(metric);
-    const variance = 0.2;
-
-    // Generate dates
-    const dates = this.generateDates(query.timeGroup, points);
-
-    if (query.groupBy && query.groupBy.length > 0) {
-      // Grouped data (e.g., by isMobile)
-      const groups = this.getGroupValues(query.groupBy[0]);
-
-      for (let i = 0; i < points; i++) {
-        const point: TimeSeriesPoint = { date: dates[i] };
-        for (const group of groups) {
-          point[group] = Math.floor(
-            baseValue * (0.3 + Math.random() * 0.7) * (1 + (Math.random() - 0.5) * variance)
-          );
-        }
-        series.push(point);
-      }
-    } else {
-      // Simple time series
-      for (let i = 0; i < points; i++) {
-        series.push({
-          date: dates[i],
-          value: Math.floor(baseValue * (1 + (Math.random() - 0.5) * variance)),
-        });
-      }
-    }
-
-    return { series };
-  }
-
-  private generateGaugeData(metric: MetricDefinition): MetricData {
-    const { query } = metric;
-
-    // Percentage derivations
-    if (
-      query.derivation === 'percentage' ||
-      query.derivation === 'error_rate' ||
-      query.derivation === 'success_rate'
-    ) {
-      const current = Math.random() * 100;
-      const previous = Math.random() * 100;
-      return {
-        current: Math.round(current * 10) / 10,
-        previous: Math.round(previous * 10) / 10,
-        trend: current > previous ? 'up' : current < previous ? 'down' : 'flat',
-        changePercent: Math.round(((current - previous) / previous) * 100 * 10) / 10,
-      };
-    }
-
-    // Rate
-    if (query.derivation === 'rate') {
-      const current = Math.floor(Math.random() * 1000);
-      const previous = Math.floor(Math.random() * 1000);
-      return {
-        current,
-        previous,
-        trend: current > previous ? 'up' : current < previous ? 'down' : 'flat',
-        changePercent: Math.round(((current - previous) / previous) * 100),
-      };
-    }
-
-    const current = Math.floor(Math.random() * 10000);
-    return { current, trend: 'flat' };
-  }
-
-  private generateCounterData(_metric: MetricDefinition): MetricData {
-    const current = Math.floor(Math.random() * 100000);
-    const previous = Math.floor(Math.random() * 100000);
-    return {
-      current,
-      previous,
-      trend: current > previous ? 'up' : current < previous ? 'down' : 'flat',
-      changePercent: Math.round(((current - previous) / previous) * 100),
-    };
-  }
-
-  private generateHistogramData(metric: MetricDefinition): MetricData {
-    const { query } = metric;
-
-    // Percentile value
-    if (query.percentile) {
-      const values = [50, 120, 200, 350, 500, 800, 1200];
-      const percentileIndex = Math.min(
-        Math.floor((query.percentile / 100) * values.length),
-        values.length - 1
-      );
-      const current = values[percentileIndex] + Math.floor(Math.random() * 100);
-      const previous = values[percentileIndex] + Math.floor(Math.random() * 100);
-
-      return {
-        current,
-        previous,
-        trend: current > previous ? 'up' : current < previous ? 'down' : 'flat',
-        changePercent: Math.round(((current - previous) / previous) * 100),
-      };
-    }
-
-    // Full histogram
-    return {
-      histogram: {
-        buckets: ['0-50ms', '50-100ms', '100-200ms', '200-500ms', '500ms-1s', '>1s'],
-        counts: [
-          Math.floor(Math.random() * 1000),
-          Math.floor(Math.random() * 800),
-          Math.floor(Math.random() * 400),
-          Math.floor(Math.random() * 200),
-          Math.floor(Math.random() * 100),
-          Math.floor(Math.random() * 50),
-        ],
-      },
-    };
-  }
-
-  private getPointCount(timeGroup?: string): number {
-    switch (timeGroup) {
-      case 'minute':
-        return 60;
-      case 'hour':
-        return 24;
-      case 'day':
-        return 7;
-      case 'week':
-        return 12;
-      case 'month':
-        return 12;
-      default:
-        return 7;
-    }
-  }
-
-  private getBaseValue(metric: MetricDefinition): number {
-    // Estimate reasonable base value based on metric type
-    if (metric.query.derivation === 'percentage' || metric.query.derivation === 'error_rate') {
-      return 50;
-    }
-    if (metric.unit === 'views' || metric.unit === 'count') {
-      return 10000;
-    }
-    if (metric.unit === 'milliseconds' || metric.unit === 'ms') {
-      return 200;
-    }
-    return 1000;
-  }
-
-  private generateDates(timeGroup: string | undefined, count: number): string[] {
-    const dates: string[] = [];
-    const now = new Date();
-
-    for (let i = count - 1; i >= 0; i--) {
-      const date = new Date(now);
-
-      switch (timeGroup) {
-        case 'minute':
-          date.setMinutes(date.getMinutes() - i);
-          dates.push(date.toISOString().slice(11, 16)); // HH:MM
-          break;
-        case 'hour':
-          date.setHours(date.getHours() - i);
-          dates.push(date.toISOString().slice(11, 13) + ':00'); // HH:00
-          break;
-        case 'day':
-          date.setDate(date.getDate() - i);
-          dates.push(date.toISOString().slice(0, 10)); // YYYY-MM-DD
-          break;
-        case 'week':
-          date.setDate(date.getDate() - i * 7);
-          dates.push(`W${this.getWeekNumber(date)}`);
-          break;
-        case 'month':
-          date.setMonth(date.getMonth() - i);
-          dates.push(date.toISOString().slice(0, 7)); // YYYY-MM
-          break;
-        default:
-          date.setDate(date.getDate() - i);
-          dates.push(date.toISOString().slice(0, 10));
-      }
-    }
-
-    return dates;
-  }
-
-  private getWeekNumber(date: Date): number {
-    const firstDayOfYear = new Date(date.getFullYear(), 0, 1);
-    const pastDaysOfYear = (date.getTime() - firstDayOfYear.getTime()) / 86400000;
-    return Math.ceil((pastDaysOfYear + firstDayOfYear.getDay() + 1) / 7);
-  }
-
-  private getGroupValues(groupBy: string): string[] {
-    // Common group values based on attribute name
-    if (groupBy === 'isMobile') {
-      return ['mobile', 'desktop'];
-    }
-    if (groupBy === 'status' || groupBy === 'status.code') {
-      return ['success', 'error'];
-    }
-    if (groupBy === 'user.tier') {
-      return ['free', 'pro', 'enterprise'];
-    }
-    // Default generic groups
-    return ['group_a', 'group_b'];
-  }
-}
-
-/**
- * Create a mock data provider from a dashboard definition
- */
-export function createMockDataProvider(dashboard: DashboardDefinition): DataProvider {
-  return new MockDataProvider(dashboard);
-}