@principal-ai/subsystems-react 0.17.0

package/src/components/dashboard/components/MetricCard.tsx

@@ -0,0 +1,270 @@
+/**
+ * MetricCard
+ *
+ * Displays a single metric value with optional trend indicator and sparkline.
+ */
+
+import { useTheme } from '@principal-ade/industry-theme';
+import type { MetricCardProps } from '../types';
+
+export function MetricCard({
+  title,
+  value,
+  unit,
+  description,
+  trend,
+  changePercent,
+  showTrend = true,
+  showSparkline = false,
+  sparklineData,
+  thresholds,
+  size = 'medium',
+  onClick,
+}: MetricCardProps) {
+  const { theme } = useTheme();
+
+  // Font size indices into theme.fontSizes array
+  // Typical array: [12, 14, 16, 20, 24, 32, 48]
+  const sizeConfig = {
+    small: {
+      padding: '12px 16px',
+      titleIndex: 0,    // ~12px
+      valueIndex: 4,    // ~24px
+      unitIndex: 0,     // ~12px
+      trendIndex: 0,    // ~12px
+    },
+    medium: {
+      padding: '16px 20px',
+      titleIndex: 1,    // ~14px
+      valueIndex: 5,    // ~32px
+      unitIndex: 1,     // ~14px
+      trendIndex: 0,    // ~12px
+    },
+    large: {
+      padding: '20px 24px',
+      titleIndex: 2,    // ~16px
+      valueIndex: 6,    // ~48px
+      unitIndex: 2,     // ~16px
+      trendIndex: 1,    // ~14px
+    },
+  };
+
+  const config = sizeConfig[size];
+
+  const getValueColor = () => {
+    if (!thresholds || typeof value !== 'number') {
+      return theme.colors.text;
+    }
+    if (thresholds.critical !== undefined && value >= thresholds.critical) {
+      return theme.colors.error;
+    }
+    if (thresholds.warning !== undefined && value >= thresholds.warning) {
+      return theme.colors.warning;
+    }
+    return theme.colors.success;
+  };
+
+  const getTrendIcon = () => {
+    if (!trend || !showTrend) return null;
+
+    const iconSize = size === 'small' ? 12 : 16;
+    const iconStyle: React.CSSProperties = {
+      width: iconSize,
+      height: iconSize,
+      marginRight: 4,
+    };
+
+    if (trend === 'up') {
+      return (
+        <svg style={iconStyle} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}>
+          <path d="M7 17l5-5 5 5M7 7l5 5 5-5" />
+        </svg>
+      );
+    }
+    if (trend === 'down') {
+      return (
+        <svg style={iconStyle} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}>
+          <path d="M7 7l5 5 5-5M7 17l5-5 5 5" />
+        </svg>
+      );
+    }
+    return (
+      <svg style={iconStyle} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}>
+        <path d="M5 12h14" />
+      </svg>
+    );
+  };
+
+  const getTrendColor = () => {
+    if (!trend) return theme.colors.textSecondary;
+    if (trend === 'up') return theme.colors.success;
+    if (trend === 'down') return theme.colors.error;
+    return theme.colors.textSecondary;
+  };
+
+  const formatValue = (val: number | string): string => {
+    if (typeof val === 'string') return val;
+    if (val >= 1000000) return `${(val / 1000000).toFixed(1)}M`;
+    if (val >= 1000) return `${(val / 1000).toFixed(1)}K`;
+    if (val % 1 !== 0) return val.toFixed(1);
+    return val.toString();
+  };
+
+  const renderSparkline = () => {
+    if (!showSparkline || !sparklineData || sparklineData.length < 2) return null;
+
+    const values = sparklineData
+      .map((point) => point.value)
+      .filter((v): v is number => typeof v === 'number');
+
+    if (values.length < 2) return null;
+
+    const minVal = Math.min(...values);
+    const maxVal = Math.max(...values);
+    const range = maxVal - minVal || 1;
+
+    const width = size === 'small' ? 100 : size === 'medium' ? 140 : 180;
+    const height = size === 'small' ? 24 : size === 'medium' ? 32 : 40;
+    const padding = 2;
+
+    const points = values.map((val, i) => {
+      const x = padding + (i / (values.length - 1)) * (width - padding * 2);
+      const y = height - padding - ((val - minVal) / range) * (height - padding * 2);
+      return `${x},${y}`;
+    });
+
+    const pathD = `M ${points.join(' L ')}`;
+
+    // Create gradient fill path
+    const fillPoints = [
+      `${padding},${height - padding}`,
+      ...points,
+      `${width - padding},${height - padding}`,
+    ];
+    const fillD = `M ${fillPoints.join(' L ')} Z`;
+
+    const lineColor = trend === 'up' ? theme.colors.success : trend === 'down' ? theme.colors.error : theme.colors.primary || theme.colors.accent;
+
+    return (
+      <div style={{ marginTop: theme.space?.[2] || 8 }}>
+        <svg width={width} height={height} style={{ display: 'block' }}>
+          <defs>
+            <linearGradient id={`sparkline-gradient-${title}`} x1="0%" y1="0%" x2="0%" y2="100%">
+              <stop offset="0%" stopColor={lineColor} stopOpacity={0.3} />
+              <stop offset="100%" stopColor={lineColor} stopOpacity={0.05} />
+            </linearGradient>
+          </defs>
+          <path d={fillD} fill={`url(#sparkline-gradient-${title})`} />
+          <path d={pathD} fill="none" stroke={lineColor} strokeWidth={1.5} strokeLinecap="round" strokeLinejoin="round" />
+        </svg>
+      </div>
+    );
+  };
+
+  return (
+    <div
+      onClick={onClick}
+      style={{
+        backgroundColor: theme.colors.surface || theme.colors.background,
+        border: `1px solid ${theme.colors.border}`,
+        borderRadius: theme.radii?.[2] || 8,
+        padding: config.padding,
+        cursor: onClick ? 'pointer' : 'default',
+        transition: 'border-color 0.2s, box-shadow 0.2s',
+        minWidth: size === 'small' ? 140 : size === 'medium' ? 180 : 220,
+        fontFamily: theme.fonts.body,
+      }}
+      onMouseEnter={(e) => {
+        if (onClick) {
+          e.currentTarget.style.borderColor = theme.colors.primary || theme.colors.accent;
+        }
+      }}
+      onMouseLeave={(e) => {
+        e.currentTarget.style.borderColor = theme.colors.border;
+      }}
+    >
+      {/* Title */}
+      <div
+        style={{
+          fontSize: theme.fontSizes[config.titleIndex],
+          color: theme.colors.textSecondary,
+          marginBottom: theme.space?.[2] || 8,
+          fontWeight: theme.fontWeights.medium,
+        }}
+      >
+        {title}
+      </div>
+
+      {/* Value */}
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'baseline',
+          gap: 4,
+        }}
+      >
+        <span
+          style={{
+            fontSize: theme.fontSizes[config.valueIndex],
+            fontWeight: theme.fontWeights.semibold,
+            color: getValueColor(),
+            fontVariantNumeric: 'tabular-nums',
+            fontFamily: theme.fonts.monospace,
+          }}
+        >
+          {formatValue(value)}
+        </span>
+        {unit && (
+          <span
+            style={{
+              fontSize: theme.fontSizes[config.unitIndex],
+              color: theme.colors.textSecondary,
+            }}
+          >
+            {unit}
+          </span>
+        )}
+      </div>
+
+      {/* Trend */}
+      {showTrend && (trend || changePercent !== undefined) && (
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            marginTop: theme.space?.[2] || 8,
+            fontSize: theme.fontSizes[config.trendIndex],
+            color: getTrendColor(),
+            fontFamily: theme.fonts.monospace,
+          }}
+        >
+          {getTrendIcon()}
+          {changePercent !== undefined && (
+            <span>
+              {changePercent > 0 ? '+' : ''}
+              {changePercent.toFixed(1)}%
+            </span>
+          )}
+        </div>
+      )}
+
+      {/* Description */}
+      {description && (
+        <div
+          style={{
+            fontSize: theme.fontSizes[config.trendIndex],
+            color: theme.colors.textSecondary,
+            marginTop: theme.space?.[2] || 8,
+            lineHeight: theme.lineHeights.body,
+            opacity: 0.8,
+          }}
+        >
+          {description}
+        </div>
+      )}
+
+      {/* Sparkline */}
+      {renderSparkline()}
+    </div>
+  );
+}

package/src/components/dashboard/components/SourceLink.tsx

@@ -0,0 +1,63 @@
+/**
+ * SourceLink
+ *
+ * Displays a link to the workflow/canvas that sources a metric.
+ */
+
+import { useTheme } from '@principal-ade/industry-theme';
+import type { SourceLinkProps } from '../types';
+
+export function SourceLink({ source, onClick }: SourceLinkProps) {
+  const { theme } = useTheme();
+
+  const formatSource = () => {
+    const parts = [source.storyboard, source.workflow];
+    if (source.nodes && source.nodes.length > 0) {
+      parts.push(source.nodes.join(', '));
+    }
+    if (source.event) {
+      parts.push(source.event);
+    }
+    return parts.join(' → ');
+  };
+
+  return (
+    <button
+      onClick={() => onClick?.(source)}
+      style={{
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: 6,
+        padding: '4px 8px',
+        fontSize: theme.fontSizes[0],
+        fontFamily: theme.fonts.body,
+        color: theme.colors.primary || theme.colors.accent,
+        backgroundColor: 'transparent',
+        border: `1px solid ${theme.colors.border}`,
+        borderRadius: theme.radii?.[1] || 4,
+        cursor: 'pointer',
+        transition: 'background-color 0.2s',
+      }}
+      onMouseEnter={(e) => {
+        e.currentTarget.style.backgroundColor = theme.colors.surface || theme.colors.background;
+      }}
+      onMouseLeave={(e) => {
+        e.currentTarget.style.backgroundColor = 'transparent';
+      }}
+    >
+      {/* Link icon */}
+      <svg
+        width={12}
+        height={12}
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth={2}
+      >
+        <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" />
+        <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" />
+      </svg>
+      <span style={{ fontFamily: theme.fonts.monospace }}>{formatSource()}</span>
+    </button>
+  );
+}

package/src/components/dashboard/components/TimeRangeSelector.tsx

@@ -0,0 +1,280 @@
+/**
+ * TimeRangeSelector
+ *
+ * Dropdown selector for time range and auto-refresh interval.
+ */
+
+import { useState, useRef, useEffect } from 'react';
+import { useTheme } from '@principal-ade/industry-theme';
+import type { TimeRangeSelectorProps, TimeRangePreset, RefreshInterval } from '../types';
+
+const PRESET_LABELS: Record<TimeRangePreset, string> = {
+  last_5m: 'Last 5 minutes',
+  last_15m: 'Last 15 minutes',
+  last_30m: 'Last 30 minutes',
+  last_1h: 'Last 1 hour',
+  last_3h: 'Last 3 hours',
+  last_6h: 'Last 6 hours',
+  last_12h: 'Last 12 hours',
+  last_24h: 'Last 24 hours',
+  last_7d: 'Last 7 days',
+  last_30d: 'Last 30 days',
+  custom: 'Custom range',
+};
+
+const REFRESH_LABELS: Record<RefreshInterval, string> = {
+  off: 'Off',
+  '10s': '10 seconds',
+  '30s': '30 seconds',
+  '1m': '1 minute',
+  '5m': '5 minutes',
+  '10m': '10 minutes',
+};
+
+const DEFAULT_PRESETS: TimeRangePreset[] = [
+  'last_1h',
+  'last_3h',
+  'last_6h',
+  'last_12h',
+  'last_24h',
+  'last_7d',
+];
+
+const DEFAULT_REFRESH_INTERVALS: RefreshInterval[] = [
+  'off',
+  '30s',
+  '1m',
+  '5m',
+];
+
+export function TimeRangeSelector({
+  timeRange,
+  onTimeRangeChange,
+  refreshInterval = 'off',
+  onRefreshIntervalChange,
+  config,
+}: TimeRangeSelectorProps) {
+  const { theme } = useTheme();
+  const [isOpen, setIsOpen] = useState(false);
+  const [activeTab, setActiveTab] = useState<'range' | 'refresh'>('range');
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  const presets = config?.presets ?? DEFAULT_PRESETS;
+  const refreshIntervals = config?.refreshIntervals ?? DEFAULT_REFRESH_INTERVALS;
+
+  // Close dropdown when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  const getCurrentLabel = (): string => {
+    if (timeRange.preset && timeRange.preset !== 'custom') {
+      return PRESET_LABELS[timeRange.preset];
+    }
+    if (timeRange.start && timeRange.end) {
+      const formatDate = (d: Date) => d.toLocaleDateString();
+      return `${formatDate(timeRange.start)} - ${formatDate(timeRange.end)}`;
+    }
+    return 'Select time range';
+  };
+
+  const handlePresetSelect = (preset: TimeRangePreset) => {
+    onTimeRangeChange({ preset });
+    setIsOpen(false);
+  };
+
+  const handleRefreshSelect = (interval: RefreshInterval) => {
+    onRefreshIntervalChange?.(interval);
+    setIsOpen(false);
+  };
+
+  const buttonStyle: React.CSSProperties = {
+    display: 'flex',
+    alignItems: 'center',
+    gap: 8,
+    padding: '8px 12px',
+    backgroundColor: theme.colors.surface || theme.colors.background,
+    border: `1px solid ${theme.colors.border}`,
+    borderRadius: theme.radii?.[1] || 4,
+    fontSize: theme.fontSizes[1],
+    fontFamily: theme.fonts.body,
+    color: theme.colors.text,
+    cursor: 'pointer',
+    transition: 'border-color 0.2s',
+  };
+
+  const dropdownStyle: React.CSSProperties = {
+    position: 'absolute',
+    top: '100%',
+    right: 0,
+    marginTop: 4,
+    minWidth: 200,
+    backgroundColor: theme.colors.surface || theme.colors.background,
+    border: `1px solid ${theme.colors.border}`,
+    borderRadius: theme.radii?.[2] || 8,
+    boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
+    zIndex: 1000,
+    overflow: 'hidden',
+  };
+
+  const tabStyle = (isActive: boolean): React.CSSProperties => ({
+    flex: 1,
+    padding: '8px 12px',
+    backgroundColor: isActive ? theme.colors.surface : 'transparent',
+    border: 'none',
+    borderBottom: isActive ? `2px solid ${theme.colors.primary || theme.colors.accent}` : '2px solid transparent',
+    fontSize: theme.fontSizes[0],
+    fontFamily: theme.fonts.body,
+    fontWeight: isActive ? theme.fontWeights.medium : theme.fontWeights.body,
+    color: isActive ? theme.colors.text : theme.colors.textSecondary,
+    cursor: 'pointer',
+  });
+
+  const optionStyle = (isSelected: boolean): React.CSSProperties => ({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    padding: '8px 12px',
+    backgroundColor: isSelected ? (theme.colors.primary || theme.colors.accent) + '15' : 'transparent',
+    border: 'none',
+    width: '100%',
+    textAlign: 'left',
+    fontSize: theme.fontSizes[1],
+    fontFamily: theme.fonts.body,
+    color: theme.colors.text,
+    cursor: 'pointer',
+    transition: 'background-color 0.15s',
+  });
+
+  return (
+    <div ref={dropdownRef} style={{ position: 'relative', display: 'inline-block' }}>
+      {/* Main button */}
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        style={buttonStyle}
+        onMouseEnter={(e) => {
+          e.currentTarget.style.borderColor = theme.colors.primary || theme.colors.accent;
+        }}
+        onMouseLeave={(e) => {
+          e.currentTarget.style.borderColor = theme.colors.border;
+        }}
+      >
+        {/* Clock icon */}
+        <svg width={14} height={14} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}>
+          <circle cx="12" cy="12" r="10" />
+          <polyline points="12 6 12 12 16 14" />
+        </svg>
+        <span>{getCurrentLabel()}</span>
+        {/* Chevron */}
+        <svg
+          width={12}
+          height={12}
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth={2}
+          style={{ transform: isOpen ? 'rotate(180deg)' : 'rotate(0)', transition: 'transform 0.2s' }}
+        >
+          <polyline points="6 9 12 15 18 9" />
+        </svg>
+        {/* Refresh indicator */}
+        {refreshInterval !== 'off' && (
+          <span
+            style={{
+              marginLeft: 4,
+              padding: '2px 6px',
+              backgroundColor: theme.colors.primary || theme.colors.accent,
+              color: theme.colors.background,
+              fontSize: theme.fontSizes[0],
+              borderRadius: theme.radii?.[1] || 4,
+              fontWeight: theme.fontWeights.medium,
+            }}
+          >
+            {refreshInterval}
+          </span>
+        )}
+      </button>
+
+      {/* Dropdown */}
+      {isOpen && (
+        <div style={dropdownStyle}>
+          {/* Tabs */}
+          {onRefreshIntervalChange && (
+            <div style={{ display: 'flex', borderBottom: `1px solid ${theme.colors.border}` }}>
+              <button style={tabStyle(activeTab === 'range')} onClick={() => setActiveTab('range')}>
+                Time Range
+              </button>
+              <button style={tabStyle(activeTab === 'refresh')} onClick={() => setActiveTab('refresh')}>
+                Auto Refresh
+              </button>
+            </div>
+          )}
+
+          {/* Options */}
+          <div style={{ maxHeight: 300, overflowY: 'auto' }}>
+            {activeTab === 'range' &&
+              presets.map((preset) => (
+                <button
+                  key={preset}
+                  onClick={() => handlePresetSelect(preset)}
+                  style={optionStyle(timeRange.preset === preset)}
+                  onMouseEnter={(e) => {
+                    if (timeRange.preset !== preset) {
+                      e.currentTarget.style.backgroundColor = theme.colors.border + '40';
+                    }
+                  }}
+                  onMouseLeave={(e) => {
+                    e.currentTarget.style.backgroundColor =
+                      timeRange.preset === preset
+                        ? (theme.colors.primary || theme.colors.accent) + '15'
+                        : 'transparent';
+                  }}
+                >
+                  <span>{PRESET_LABELS[preset]}</span>
+                  {timeRange.preset === preset && (
+                    <svg width={14} height={14} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}>
+                      <polyline points="20 6 9 17 4 12" />
+                    </svg>
+                  )}
+                </button>
+              ))}
+
+            {activeTab === 'refresh' &&
+              refreshIntervals.map((interval) => (
+                <button
+                  key={interval}
+                  onClick={() => handleRefreshSelect(interval)}
+                  style={optionStyle(refreshInterval === interval)}
+                  onMouseEnter={(e) => {
+                    if (refreshInterval !== interval) {
+                      e.currentTarget.style.backgroundColor = theme.colors.border + '40';
+                    }
+                  }}
+                  onMouseLeave={(e) => {
+                    e.currentTarget.style.backgroundColor =
+                      refreshInterval === interval
+                        ? (theme.colors.primary || theme.colors.accent) + '15'
+                        : 'transparent';
+                  }}
+                >
+                  <span>{REFRESH_LABELS[interval]}</span>
+                  {refreshInterval === interval && (
+                    <svg width={14} height={14} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}>
+                      <polyline points="20 6 9 17 4 12" />
+                    </svg>
+                  )}
+                </button>
+              ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/dashboard/components/index.ts

@@ -0,0 +1,5 @@
+export { MetricCard } from './MetricCard';
+export { LineChart } from './LineChart';
+export { BarChart } from './BarChart';
+export { SourceLink } from './SourceLink';
+export { TimeRangeSelector } from './TimeRangeSelector';

package/src/components/dashboard/index.ts

@@ -0,0 +1,47 @@
+// Main renderer
+export { DashboardRenderer } from './DashboardRenderer';
+export { MetricPanel } from './MetricPanel';
+
+// Individual components
+export { MetricCard, LineChart, BarChart, SourceLink, TimeRangeSelector } from './components';
+
+// Data providers
+export { MockDataProvider, createMockDataProvider } from './MockDataProvider';
+
+// Types
+export type {
+  // Dashboard definition types
+  DashboardDefinition,
+  MetricDefinition,
+  MetricType,
+  MetricSource,
+  MetricQuery,
+  Derivation,
+  TimeGroup,
+  AlertDefinition,
+  MetricDisplay,
+  DisplayComponent,
+  DashboardLayout,
+  DashboardRow,
+  PanelPlacement,
+  // Time range types
+  TimeRangePreset,
+  TimeRange,
+  RefreshInterval,
+  TimeRangeConfig,
+  // Mock data types
+  MockMetricData,
+  TimeSeriesPoint,
+  HistogramData,
+  // Runtime types
+  MetricData,
+  DataProvider,
+  // Component props
+  DashboardRendererProps,
+  MetricPanelProps,
+  MetricCardProps,
+  LineChartProps,
+  BarChartProps,
+  SourceLinkProps,
+  TimeRangeSelectorProps,
+} from './types';