@pattern-stack/frontend-patterns 0.0.5 → 0.1.0

package/src/organisms/entity/TrendAnalysisPanel.tsx

@@ -1,337 +0,0 @@
-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

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

package/src/organisms/index.ts

@@ -1,8 +0,0 @@
-// 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';