@pattern-stack/frontend-patterns 0.0.3 → 0.0.5

package/src/organisms/entity/TrendAnalysisPanel.tsx

@@ -0,0 +1,337 @@
+import React, { useMemo, useState } from 'react';
+import { Chart } from '../../atoms/composed/Chart';
+import type { ChartDataPoint, ChartType } from '../../atoms/composed/Chart';
+import { Card } from '../../atoms/ui/card';
+import { Button } from '../../atoms/ui/button';
+import { Select } from '../../atoms/ui/Select';
+import { Badge } from '../../atoms/ui/Badge';
+import { MetricCalculationEngine } from '../../atoms/utils/metric-engine';
+import type { MetricConfig, EntityData, TemporalConfig, TemporalCycle } from '../../atoms/types';
+import { cn } from '../../atoms/utils/utils';
+import { TrendingUp, BarChart3, LineChart, AreaChart, Download } from 'lucide-react';
+
+export interface TrendAnalysisPanelProps {
+  metrics: MetricConfig[];
+  data: EntityData[];
+  temporal?: TemporalConfig;
+  isLoading?: boolean;
+  className?: string;
+  category?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
+  
+  // Chart configuration
+  defaultChartType?: ChartType;
+  dateField?: string;
+  enablePeriodSelection?: boolean;
+  enableChartTypeSelection?: boolean;
+  enableMetricSelection?: boolean;
+  showComparisons?: boolean;
+  
+  // Extension points
+  renderHeader?: () => React.ReactNode;
+  renderFooter?: () => React.ReactNode;
+  renderCustomChart?: (metric: MetricConfig, chartData: ChartDataPoint[], chartType: ChartType) => React.ReactNode;
+  headerSlot?: React.ReactNode;
+  footerSlot?: React.ReactNode;
+  
+  // Event handlers
+  onMetricChange?: (metric: MetricConfig) => void;
+  onPeriodChange?: (period: TemporalCycle) => void;
+  onChartTypeChange?: (chartType: ChartType) => void;
+  onExport?: (data: ChartDataPoint[], metric: MetricConfig) => void;
+}
+
+export const TrendAnalysisPanel: React.FC<TrendAnalysisPanelProps> = ({
+  metrics,
+  data,
+  temporal,
+  isLoading = false,
+  className,
+  category,
+  defaultChartType = 'line',
+  dateField = 'date',
+  enablePeriodSelection = true,
+  enableChartTypeSelection = true,
+  enableMetricSelection = true,
+  showComparisons = true,
+  renderHeader,
+  renderFooter,
+  renderCustomChart,
+  headerSlot,
+  footerSlot,
+  onMetricChange,
+  onPeriodChange,
+  onChartTypeChange,
+  onExport
+}) => {
+  const [selectedMetric, setSelectedMetric] = useState<MetricConfig>(metrics[0]);
+  const [selectedPeriod, setSelectedPeriod] = useState<TemporalCycle>(temporal?.defaultCycle || 'monthly');
+  const [selectedChartType, setSelectedChartType] = useState<ChartType>(defaultChartType);
+  const [showForecast, setShowForecast] = useState(false);
+
+  // Calculate trend data for selected metric
+  const trendData = useMemo(() => {
+    if (!selectedMetric || !data.length) return [];
+    
+    // Determine periods to show based on selected cycle
+    const periods = selectedPeriod === 'yearly' ? 5 :
+                   selectedPeriod === 'quarterly' ? 8 :
+                   selectedPeriod === 'monthly' ? 12 :
+                   selectedPeriod === 'weekly' ? 12 : 30;
+    
+    return MetricCalculationEngine.calculateTrendData(
+      selectedMetric,
+      data,
+      dateField,
+      periods
+    );
+  }, [selectedMetric, data, dateField, selectedPeriod]);
+
+  // Convert trend data to chart format
+  const chartData = useMemo((): ChartDataPoint[] => {
+    return trendData.map(point => ({
+      label: point.label || point.date,
+      value: point.value,
+      category: category
+    }));
+  }, [trendData, category]);
+
+  // Calculate trend percentage
+  const trendPercentage = useMemo(() => {
+    if (chartData.length < 2) return null;
+    
+    const first = chartData[0].value;
+    const last = chartData[chartData.length - 1].value;
+    
+    if (first === 0) return null;
+    
+    return ((last - first) / Math.abs(first)) * 100;
+  }, [chartData]);
+
+  // Generate forecast data if enabled
+  const forecastData = useMemo(() => {
+    if (!showForecast || !temporal?.forecasting?.enabled || chartData.length < 3) {
+      return [];
+    }
+
+    const periods = temporal?.forecasting?.periods || 3;
+    const lastValue = chartData[chartData.length - 1].value;
+    const trend = trendPercentage ? trendPercentage / 100 : 0;
+    
+    return Array.from({ length: periods }, (_, index) => ({
+      label: `Future ${index + 1}`,
+      value: lastValue * (1 + trend * (index + 1) / chartData.length),
+      category: 8 as const // Use category 8 for forecast
+    }));
+  }, [showForecast, temporal?.forecasting, chartData, trendPercentage]);
+
+  // Combined chart data with forecast
+  const combinedChartData = useMemo(() => {
+    if (forecastData.length === 0) return chartData;
+    return [...chartData, ...forecastData];
+  }, [chartData, forecastData]);
+
+  const handleMetricChange = (metricKey: string) => {
+    const metric = metrics.find(m => m.key === metricKey);
+    if (metric) {
+      setSelectedMetric(metric);
+      onMetricChange?.(metric);
+    }
+  };
+
+  const handlePeriodChange = (period: TemporalCycle) => {
+    setSelectedPeriod(period);
+    onPeriodChange?.(period);
+  };
+
+  const handleChartTypeChange = (chartType: ChartType) => {
+    setSelectedChartType(chartType);
+    onChartTypeChange?.(chartType);
+  };
+
+  const handleExport = () => {
+    if (onExport) {
+      onExport(combinedChartData, selectedMetric);
+    } else {
+      // Default CSV export
+      const csvContent = [
+        'Date,Value',
+        ...combinedChartData.map(point => `${point.label},${point.value}`)
+      ].join('\n');
+      
+      const blob = new Blob([csvContent], { type: 'text/csv' });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = `${selectedMetric.label}-trend-data.csv`;
+      a.click();
+      URL.revokeObjectURL(url);
+    }
+  };
+
+  const renderControls = () => {
+    return (
+      <div className="flex items-center justify-between mb-4">
+        <div className="flex items-center gap-4">
+          <div className="flex items-center gap-2">
+            <TrendingUp className="w-4 h-4 text-muted-foreground" />
+            <h3 className="text-lg font-semibold text-foreground">Trend Analysis</h3>
+          </div>
+          
+          {trendPercentage !== null && (
+            <Badge variant={trendPercentage > 0 ? 'default' : 'destructive'}>
+              {trendPercentage > 0 ? '+' : ''}{trendPercentage.toFixed(1)}%
+            </Badge>
+          )}
+        </div>
+        
+        <div className="flex items-center gap-2">
+          {enableMetricSelection && metrics.length > 1 && (
+            <Select
+              value={selectedMetric.key}
+              onValueChange={handleMetricChange}
+            >
+              {metrics.map(metric => (
+                <option key={metric.key} value={metric.key}>
+                  {metric.label}
+                </option>
+              ))}
+            </Select>
+          )}
+          
+          {enablePeriodSelection && (
+            <Select
+              value={selectedPeriod}
+              onValueChange={(value) => handlePeriodChange(value as TemporalCycle)}
+            >
+              {(temporal?.cycles || ['daily', 'weekly', 'monthly', 'quarterly', 'yearly']).map(cycle => (
+                <option key={cycle} value={cycle}>
+                  {cycle.charAt(0).toUpperCase() + cycle.slice(1)}
+                </option>
+              ))}
+            </Select>
+          )}
+          
+          {enableChartTypeSelection && (
+            <div className="flex items-center border rounded">
+              <Button
+                variant={selectedChartType === 'line' ? 'default' : 'ghost'}
+                size="sm"
+                onClick={() => handleChartTypeChange('line')}
+              >
+                <LineChart className="w-4 h-4" />
+              </Button>
+              <Button
+                variant={selectedChartType === 'bar' ? 'default' : 'ghost'}
+                size="sm"
+                onClick={() => handleChartTypeChange('bar')}
+              >
+                <BarChart3 className="w-4 h-4" />
+              </Button>
+              <Button
+                variant={selectedChartType === 'area' ? 'default' : 'ghost'}
+                size="sm"
+                onClick={() => handleChartTypeChange('area')}
+              >
+                <AreaChart className="w-4 h-4" />
+              </Button>
+            </div>
+          )}
+          
+          {temporal?.forecasting?.enabled && (
+            <Button
+              variant={showForecast ? 'default' : 'outline'}
+              size="sm"
+              onClick={() => setShowForecast(!showForecast)}
+            >
+              Forecast
+            </Button>
+          )}
+          
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={handleExport}
+            disabled={chartData.length === 0}
+          >
+            <Download className="w-4 h-4" />
+          </Button>
+        </div>
+      </div>
+    );
+  };
+
+  const renderChart = () => {
+    if (renderCustomChart) {
+      const customChart = renderCustomChart(selectedMetric, combinedChartData, selectedChartType);
+      if (customChart) return customChart;
+    }
+
+    return (
+      <Chart
+        title={selectedMetric.label}
+        subtitle={`${selectedPeriod} trend analysis`}
+        data={combinedChartData}
+        type={selectedChartType}
+        category={category}
+        showTrend={true}
+        trend={trendPercentage !== null ? {
+          value: trendPercentage,
+          label: 'overall trend'
+        } : undefined}
+        height="large"
+        isLoading={isLoading}
+        noWrapper={true}
+        showLegend={forecastData.length > 0}
+      />
+    );
+  };
+
+  const renderComparisons = () => {
+    if (!showComparisons || !temporal?.enableComparisons || chartData.length === 0) {
+      return null;
+    }
+
+    const currentValue = chartData[chartData.length - 1]?.value || 0;
+    const previousValue = chartData[chartData.length - 2]?.value || 0;
+    const periodChange = previousValue !== 0 ? ((currentValue - previousValue) / Math.abs(previousValue)) * 100 : 0;
+
+    return (
+      <div className="border-t pt-4 mt-4">
+        <h4 className="text-sm font-semibold text-foreground mb-3">Period Comparisons</h4>
+        <div className="grid grid-cols-3 gap-4">
+          <div className="text-center">
+            <div className="text-2xl font-bold">{currentValue.toFixed(0)}</div>
+            <div className="text-xs text-muted-foreground">Current</div>
+          </div>
+          <div className="text-center">
+            <div className="text-2xl font-bold">{previousValue.toFixed(0)}</div>
+            <div className="text-xs text-muted-foreground">Previous</div>
+          </div>
+          <div className="text-center">
+            <div className={cn(
+              "text-2xl font-bold",
+              periodChange > 0 ? 'text-status-success' : periodChange < 0 ? 'text-status-error' : 'text-muted-foreground'
+            )}>
+              {periodChange > 0 ? '+' : ''}{periodChange.toFixed(1)}%
+            </div>
+            <div className="text-xs text-muted-foreground">Change</div>
+          </div>
+        </div>
+      </div>
+    );
+  };
+
+  return (
+    <Card className={cn('p-6', className)} category={category} data-component-name="TrendAnalysisPanel">
+      {headerSlot}
+      {renderHeader && renderHeader()}
+      
+      {renderControls()}
+      {renderChart()}
+      {renderComparisons()}
+      
+      {renderFooter && renderFooter()}
+      {footerSlot}
+    </Card>
+  );
+};

package/src/organisms/entity/index.ts

@@ -0,0 +1,4 @@
+export * from './MetricsOverviewPanel';
+export * from './EntityListPanel';
+export * from './TrendAnalysisPanel';
+export * from './CategoryBreakdownPanel';

package/src/organisms/index.ts

@@ -0,0 +1,8 @@
+// Organisms - Complex component assemblies following atomic design
+// These are complete, reusable component interfaces that compose molecules and atoms
+
+// Showcase components
+export { ComponentShowcasePage } from './showcase/ComponentShowcasePage';
+
+// Entity components - Cross-domain configurable panels
+export * from './entity';