@principal-ai/principal-view-react 0.14.13 → 0.14.15

package/src/components/dashboard/components/LineChart.tsx

@@ -0,0 +1,279 @@
+/**
+ * LineChart
+ *
+ * Simple SVG-based line chart for time series data.
+ * For prototyping - can be replaced with a more robust charting library later.
+ */
+
+import { useMemo } from 'react';
+import { useTheme } from '@principal-ade/industry-theme';
+import type { LineChartProps } from '../types';
+
+const CHART_COLORS = [
+  '#3b82f6', // blue
+  '#22c55e', // green
+  '#f59e0b', // amber
+  '#ef4444', // red
+  '#8b5cf6', // violet
+  '#ec4899', // pink
+];
+
+export function LineChart({
+  title,
+  data,
+  xKey = 'date',
+  yKey = 'value',
+  series,
+  unit,
+  height = 200,
+  onClick,
+}: LineChartProps) {
+  const { theme } = useTheme();
+
+  const padding = { top: 20, right: 20, bottom: 40, left: 60 };
+  const chartWidth = 400;
+  const chartHeight = height;
+
+  const { paths, yAxisLabels, xAxisLabels } = useMemo(() => {
+    if (!data || data.length === 0) {
+      return { paths: [], yAxisLabels: [], xAxisLabels: [], maxValue: 0 };
+    }
+
+    // Determine which keys to plot
+    const keys = series || [yKey];
+
+    // Find max value across all series
+    let max = 0;
+    for (const point of data) {
+      for (const key of keys) {
+        const val = point[key];
+        if (typeof val === 'number' && val > max) {
+          max = val;
+        }
+      }
+    }
+
+    // Add 10% padding to max
+    max = max * 1.1;
+
+    const innerWidth = chartWidth - padding.left - padding.right;
+    const innerHeight = chartHeight - padding.top - padding.bottom;
+
+    // Generate paths for each series
+    const pathsResult: Array<{ path: string; color: string; label: string }> = [];
+
+    keys.forEach((key, keyIndex) => {
+      const points: Array<{ x: number; y: number }> = [];
+
+      data.forEach((point, i) => {
+        const val = point[key];
+        if (typeof val === 'number') {
+          const x = padding.left + (i / (data.length - 1 || 1)) * innerWidth;
+          const y = padding.top + innerHeight - (val / max) * innerHeight;
+          points.push({ x, y });
+        }
+      });
+
+      if (points.length > 0) {
+        const pathD = points
+          .map((p, i) => `${i === 0 ? 'M' : 'L'} ${p.x} ${p.y}`)
+          .join(' ');
+
+        pathsResult.push({
+          path: pathD,
+          color: CHART_COLORS[keyIndex % CHART_COLORS.length],
+          label: key,
+        });
+      }
+    });
+
+    // Y-axis labels (5 ticks)
+    const yLabels: Array<{ value: string; y: number }> = [];
+    for (let i = 0; i <= 4; i++) {
+      const value = (max / 4) * (4 - i);
+      const y = padding.top + (i / 4) * innerHeight;
+      yLabels.push({
+        value: formatNumber(value),
+        y,
+      });
+    }
+
+    // X-axis labels (show first, middle, last)
+    const xLabels: Array<{ value: string; x: number }> = [];
+    const indices = [0, Math.floor(data.length / 2), data.length - 1];
+    for (const idx of indices) {
+      if (data[idx]) {
+        const x = padding.left + (idx / (data.length - 1 || 1)) * innerWidth;
+        xLabels.push({
+          value: String(data[idx][xKey] || ''),
+          x,
+        });
+      }
+    }
+
+    return {
+      paths: pathsResult,
+      yAxisLabels: yLabels,
+      xAxisLabels: xLabels,
+      maxValue: max,
+    };
+  }, [data, series, yKey, xKey, chartWidth, chartHeight]);
+
+  return (
+    <div
+      onClick={onClick}
+      style={{
+        backgroundColor: theme.colors.surface || theme.colors.background,
+        border: `1px solid ${theme.colors.border}`,
+        borderRadius: theme.radii?.[2] || 8,
+        padding: theme.space?.[3] || 16,
+        cursor: onClick ? 'pointer' : 'default',
+        fontFamily: theme.fonts.body,
+      }}
+    >
+      {/* Title */}
+      <div
+        style={{
+          fontSize: theme.fontSizes[1],
+          fontWeight: theme.fontWeights.medium,
+          color: theme.colors.text,
+          marginBottom: theme.space?.[3] || 16,
+        }}
+      >
+        {title}
+        {unit && (
+          <span style={{ color: theme.colors.textSecondary, fontWeight: theme.fontWeights.body }}>
+            {' '}
+            ({unit})
+          </span>
+        )}
+      </div>
+
+      {/* Chart */}
+      <svg
+        width="100%"
+        height={chartHeight}
+        viewBox={`0 0 ${chartWidth} ${chartHeight}`}
+        preserveAspectRatio="xMidYMid meet"
+      >
+        {/* Grid lines */}
+        {yAxisLabels.map((label, i) => (
+          <line
+            key={i}
+            x1={padding.left}
+            y1={label.y}
+            x2={chartWidth - padding.right}
+            y2={label.y}
+            stroke={theme.colors.border}
+            strokeDasharray="4 4"
+            opacity={0.5}
+          />
+        ))}
+
+        {/* Y-axis labels */}
+        {yAxisLabels.map((label, i) => (
+          <text
+            key={i}
+            x={padding.left - 8}
+            y={label.y}
+            textAnchor="end"
+            dominantBaseline="middle"
+            fontSize={theme.fontSizes[0]}
+            fontFamily={theme.fonts.monospace}
+            fill={theme.colors.textSecondary}
+          >
+            {label.value}
+          </text>
+        ))}
+
+        {/* X-axis labels */}
+        {xAxisLabels.map((label, i) => (
+          <text
+            key={i}
+            x={label.x}
+            y={chartHeight - padding.bottom + 20}
+            textAnchor="middle"
+            fontSize={theme.fontSizes[0]}
+            fontFamily={theme.fonts.monospace}
+            fill={theme.colors.textSecondary}
+          >
+            {label.value}
+          </text>
+        ))}
+
+        {/* Lines */}
+        {paths.map((p, i) => (
+          <path
+            key={i}
+            d={p.path}
+            fill="none"
+            stroke={p.color}
+            strokeWidth={2}
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        ))}
+
+        {/* Data points */}
+        {paths.map((p, pathIndex) => {
+          const points = p.path.split(/[ML]/).filter(Boolean);
+          return points.map((point, i) => {
+            const [x, y] = point.trim().split(' ').map(Number);
+            return (
+              <circle
+                key={`${pathIndex}-${i}`}
+                cx={x}
+                cy={y}
+                r={3}
+                fill={p.color}
+              />
+            );
+          });
+        })}
+      </svg>
+
+      {/* Legend */}
+      {series && series.length > 1 && (
+        <div
+          style={{
+            display: 'flex',
+            gap: theme.space?.[3] || 16,
+            marginTop: theme.space?.[3] || 12,
+            justifyContent: 'center',
+          }}
+        >
+          {series.map((s, i) => (
+            <div
+              key={s}
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                gap: 6,
+                fontSize: theme.fontSizes[0],
+                color: theme.colors.textSecondary,
+                fontFamily: theme.fonts.body,
+              }}
+            >
+              <div
+                style={{
+                  width: 12,
+                  height: 3,
+                  backgroundColor: CHART_COLORS[i % CHART_COLORS.length],
+                  borderRadius: 2,
+                }}
+              />
+              {s}
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function formatNumber(value: number): string {
+  if (value >= 1000000) return `${(value / 1000000).toFixed(1)}M`;
+  if (value >= 1000) return `${(value / 1000).toFixed(1)}K`;
+  if (value % 1 !== 0) return value.toFixed(1);
+  return Math.round(value).toString();
+}

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>
+  );
+}