@principal-ai/subsystems-react 0.17.0 → 0.18.0

package/src/components/dashboard/components/BarChart.tsx

@@ -1,299 +0,0 @@
-/**
- * BarChart
- *
- * Simple SVG-based bar chart for grouped/stacked 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 { BarChartProps } from '../types';
-
-const CHART_COLORS = [
-  '#3b82f6', // blue
-  '#22c55e', // green
-  '#f59e0b', // amber
-  '#ef4444', // red
-  '#8b5cf6', // violet
-  '#ec4899', // pink
-];
-
-export function BarChart({
-  title,
-  data,
-  xKey = 'date',
-  series,
-  stacked = false,
-  unit,
-  height = 200,
-  onClick,
-}: BarChartProps) {
-  const { theme } = useTheme();
-
-  const padding = { top: 20, right: 20, bottom: 40, left: 60 };
-  const chartWidth = 400;
-  const chartHeight = height;
-
-  const { bars, yAxisLabels, xAxisLabels } = useMemo(() => {
-    if (!data || data.length === 0 || !series || series.length === 0) {
-      return { bars: [], yAxisLabels: [], xAxisLabels: [], maxValue: 0 };
-    }
-
-    // Find max value
-    let max = 0;
-    for (const point of data) {
-      if (stacked) {
-        // Sum all series for stacked bars
-        let sum = 0;
-        for (const key of series) {
-          const val = point[key];
-          if (typeof val === 'number') sum += val;
-        }
-        if (sum > max) max = sum;
-      } else {
-        // Max of individual values for grouped bars
-        for (const key of series) {
-          const val = point[key];
-          if (typeof val === 'number' && val > max) max = val;
-        }
-      }
-    }
-
-    max = max * 1.1; // Add padding
-
-    const innerWidth = chartWidth - padding.left - padding.right;
-    const innerHeight = chartHeight - padding.top - padding.bottom;
-
-    const barGroupWidth = innerWidth / data.length;
-    const barPadding = barGroupWidth * 0.2;
-    const barAreaWidth = barGroupWidth - barPadding;
-
-    const barsResult: Array<{
-      x: number;
-      y: number;
-      width: number;
-      height: number;
-      color: string;
-      label: string;
-      value: number;
-    }> = [];
-
-    data.forEach((point, i) => {
-      const groupX = padding.left + i * barGroupWidth + barPadding / 2;
-
-      if (stacked) {
-        // Stacked bars
-        let currentY = padding.top + innerHeight;
-
-        series.forEach((key, keyIndex) => {
-          const val = point[key];
-          if (typeof val === 'number') {
-            const barHeight = (val / max) * innerHeight;
-            currentY -= barHeight;
-
-            barsResult.push({
-              x: groupX,
-              y: currentY,
-              width: barAreaWidth,
-              height: barHeight,
-              color: CHART_COLORS[keyIndex % CHART_COLORS.length],
-              label: key,
-              value: val,
-            });
-          }
-        });
-      } else {
-        // Grouped bars
-        const singleBarWidth = barAreaWidth / series.length;
-
-        series.forEach((key, keyIndex) => {
-          const val = point[key];
-          if (typeof val === 'number') {
-            const barHeight = (val / max) * innerHeight;
-            const barX = groupX + keyIndex * singleBarWidth;
-            const barY = padding.top + innerHeight - barHeight;
-
-            barsResult.push({
-              x: barX,
-              y: barY,
-              width: singleBarWidth * 0.9,
-              height: barHeight,
-              color: CHART_COLORS[keyIndex % CHART_COLORS.length],
-              label: key,
-              value: val,
-            });
-          }
-        });
-      }
-    });
-
-    // Y-axis labels
-    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
-    const xLabels: Array<{ value: string; x: number }> = [];
-    data.forEach((point, i) => {
-      const x = padding.left + i * barGroupWidth + barGroupWidth / 2;
-      xLabels.push({
-        value: String(point[xKey] || '').slice(-5), // Show last 5 chars (e.g., MM-DD)
-        x,
-      });
-    });
-
-    return {
-      bars: barsResult,
-      yAxisLabels: yLabels,
-      xAxisLabels: xLabels,
-      maxValue: max,
-    };
-  }, [data, series, xKey, stacked, 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>
-        ))}
-
-        {/* Bars */}
-        {bars.map((bar, i) => (
-          <rect
-            key={i}
-            x={bar.x}
-            y={bar.y}
-            width={bar.width}
-            height={bar.height}
-            fill={bar.color}
-            rx={2}
-          />
-        ))}
-      </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: 12,
-                  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/LineChart.tsx

@@ -1,279 +0,0 @@
-/**
- * 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();
-}