@pattern-stack/frontend-patterns 0.0.4 → 0.0.5

package/src/organisms/entity/CategoryBreakdownPanel.tsx

@@ -0,0 +1,427 @@
+import React, { useMemo, useState } from 'react';
+import { Chart } from '../../atoms/composed/Chart';
+import type { ChartDataPoint } from '../../atoms/composed/Chart';
+import { Card } from '../../atoms/ui/card';
+import { Button } from '../../atoms/ui/button';
+import { Badge } from '../../atoms/ui/Badge';
+import { DataBadge } from '../../atoms/composed/DataBadge';
+import { MetricCalculationEngine } from '../../atoms/utils/metric-engine';
+import type { CategoryConfig, EntityData, CategoryBreakdown } from '../../atoms/types';
+import { cn } from '../../atoms/utils/utils';
+import { 
+  ChevronRight, 
+  ChevronDown, 
+  PieChart, 
+  BarChart3, 
+  List,
+  Download,
+  Filter
+} from 'lucide-react';
+
+export interface CategoryBreakdownPanelProps {
+  data: EntityData[];
+  categoryConfig: CategoryConfig;
+  valueField: string;
+  isLoading?: boolean;
+  className?: string;
+  category?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
+  
+  // Display configuration
+  title?: string;
+  subtitle?: string;
+  defaultView?: 'chart' | 'list' | 'both';
+  defaultChartType?: 'pie' | 'bar';
+  maxCategories?: number;
+  showPercentages?: boolean;
+  enableDrillDown?: boolean;
+  
+  // Extension points
+  renderHeader?: () => React.ReactNode;
+  renderFooter?: () => React.ReactNode;
+  renderCustomCategory?: (category: CategoryBreakdown, index: number) => React.ReactNode;
+  renderDrillDownContent?: (category: string, subcategories: CategoryBreakdown[]) => React.ReactNode;
+  headerSlot?: React.ReactNode;
+  footerSlot?: React.ReactNode;
+  
+  // Event handlers
+  onCategoryClick?: (category: CategoryBreakdown) => void;
+  onDrillDown?: (category: string, level: number) => void;
+  onExport?: (data: CategoryBreakdown[]) => void;
+}
+
+export const CategoryBreakdownPanel: React.FC<CategoryBreakdownPanelProps> = ({
+  data,
+  categoryConfig,
+  valueField,
+  isLoading = false,
+  className,
+  category,
+  title = 'Category Breakdown',
+  subtitle,
+  defaultView = 'both',
+  defaultChartType = 'pie',
+  maxCategories = 8,
+  showPercentages = true,
+  enableDrillDown = true,
+  renderHeader,
+  renderFooter,
+  renderCustomCategory,
+  renderDrillDownContent,
+  headerSlot,
+  footerSlot,
+  onCategoryClick,
+  onDrillDown,
+  onExport
+}) => {
+  const [currentView, setCurrentView] = useState<'chart' | 'list' | 'both'>(defaultView);
+  const [chartType, setChartType] = useState<'pie' | 'bar'>(defaultChartType);
+  const [expandedCategories, setExpandedCategories] = useState<Set<string>>(new Set());
+  const [drillDownLevel, setDrillDownLevel] = useState(0);
+  const [drillDownPath, setDrillDownPath] = useState<string[]>([]);
+
+  // Calculate category breakdown
+  const categoryBreakdown = useMemo(() => {
+    if (!data.length) return [];
+    
+    const currentCategoryField = categoryConfig?.hierarchy?.[drillDownLevel] || categoryConfig?.defaultGroupBy || 'category';
+    
+    return MetricCalculationEngine.calculateCategoryBreakdown(
+      data,
+      currentCategoryField,
+      valueField,
+      maxCategories
+    );
+  }, [data, categoryConfig, valueField, maxCategories, drillDownLevel]);
+
+  // Convert to chart data
+  const chartData = useMemo((): ChartDataPoint[] => {
+    return categoryBreakdown.map((item, index) => ({
+      label: item.category,
+      value: item.value,
+      category: ((index % 8) + 1) as 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8
+    }));
+  }, [categoryBreakdown]);
+
+  // Calculate total value
+  const totalValue = useMemo(() => {
+    return categoryBreakdown.reduce((sum, item) => sum + item.value, 0);
+  }, [categoryBreakdown]);
+
+  const handleCategoryClick = (categoryItem: CategoryBreakdown) => {
+    onCategoryClick?.(categoryItem);
+    
+    if (enableDrillDown && categoryConfig?.enableDrillDown && drillDownLevel < (categoryConfig?.hierarchy?.length || 0) - 1) {
+      setDrillDownLevel(prev => prev + 1);
+      setDrillDownPath(prev => [...prev, categoryItem.category]);
+      onDrillDown?.(categoryItem.category, drillDownLevel + 1);
+    }
+  };
+
+  const handleDrillUp = (level: number) => {
+    if (level < drillDownLevel) {
+      setDrillDownLevel(level);
+      setDrillDownPath(prev => prev.slice(0, level));
+      onDrillDown?.(level > 0 ? drillDownPath[level - 1] : '', level);
+    }
+  };
+
+  const toggleCategoryExpansion = (categoryName: string) => {
+    setExpandedCategories(prev => {
+      const newSet = new Set(prev);
+      if (newSet.has(categoryName)) {
+        newSet.delete(categoryName);
+      } else {
+        newSet.add(categoryName);
+      }
+      return newSet;
+    });
+  };
+
+  const handleExport = () => {
+    if (onExport) {
+      onExport(categoryBreakdown);
+    } else {
+      // Default CSV export
+      const csvContent = [
+        'Category,Value,Percentage',
+        ...categoryBreakdown.map(item => 
+          `${item.category},${item.value},${item.percentage.toFixed(2)}%`
+        )
+      ].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 = `category-breakdown-${Date.now()}.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">
+            <PieChart className="w-4 h-4 text-muted-foreground" />
+            <h3 className="text-lg font-semibold text-foreground">{title}</h3>
+          </div>
+          
+          {subtitle && (
+            <Badge variant="outline" className="text-xs">
+              {subtitle}
+            </Badge>
+          )}
+          
+          {totalValue > 0 && (
+            <Badge variant="outline">
+              Total: {new Intl.NumberFormat().format(totalValue)}
+            </Badge>
+          )}
+        </div>
+        
+        <div className="flex items-center gap-2">
+          {/* View toggle */}
+          <div className="flex items-center border rounded">
+            <Button
+              variant={currentView === 'chart' ? 'default' : 'ghost'}
+              size="sm"
+              onClick={() => setCurrentView('chart')}
+            >
+              <PieChart className="w-4 h-4" />
+            </Button>
+            <Button
+              variant={currentView === 'list' ? 'default' : 'ghost'}
+              size="sm"
+              onClick={() => setCurrentView('list')}
+            >
+              <List className="w-4 h-4" />
+            </Button>
+            <Button
+              variant={currentView === 'both' ? 'default' : 'ghost'}
+              size="sm"
+              onClick={() => setCurrentView('both')}
+            >
+              Both
+            </Button>
+          </div>
+          
+          {/* Chart type toggle */}
+          {(currentView === 'chart' || currentView === 'both') && (
+            <div className="flex items-center border rounded">
+              <Button
+                variant={chartType === 'pie' ? 'default' : 'ghost'}
+                size="sm"
+                onClick={() => setChartType('pie')}
+              >
+                <PieChart className="w-4 h-4" />
+              </Button>
+              <Button
+                variant={chartType === 'bar' ? 'default' : 'ghost'}
+                size="sm"
+                onClick={() => setChartType('bar')}
+              >
+                <BarChart3 className="w-4 h-4" />
+              </Button>
+            </div>
+          )}
+          
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={handleExport}
+            disabled={categoryBreakdown.length === 0}
+          >
+            <Download className="w-4 h-4" />
+          </Button>
+        </div>
+      </div>
+    );
+  };
+
+  const renderBreadcrumb = () => {
+    if (drillDownLevel === 0) return null;
+
+    return (
+      <div className="flex items-center gap-2 mb-4 text-sm text-muted-foreground">
+        <Button
+          variant="ghost"
+          size="sm"
+          onClick={() => handleDrillUp(0)}
+          className="p-0 h-auto font-normal"
+        >
+          All
+        </Button>
+        {drillDownPath.map((segment, index) => (
+          <React.Fragment key={index}>
+            <ChevronRight className="w-3 h-3" />
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => handleDrillUp(index + 1)}
+              className="p-0 h-auto font-normal"
+            >
+              {segment}
+            </Button>
+          </React.Fragment>
+        ))}
+      </div>
+    );
+  };
+
+  const renderChart = () => {
+    if (currentView === 'list') return null;
+
+    return (
+      <div className={cn(currentView === 'both' && 'mb-6')}>
+        <Chart
+          title=""
+          data={chartData}
+          type={chartType}
+          category={category}
+          showLegend={true}
+          height="medium"
+          isLoading={isLoading}
+          noWrapper={true}
+          onClick={() => {}}
+        />
+      </div>
+    );
+  };
+
+  const renderCategoryList = () => {
+    if (currentView === 'chart') return null;
+
+    return (
+      <div className="space-y-2">
+        {categoryBreakdown.map((item, index) => {
+          if (renderCustomCategory) {
+            const customContent = renderCustomCategory(item, index);
+            if (customContent) return customContent;
+          }
+
+          const canExpand = enableDrillDown && categoryConfig.enableDrillDown && 'subcategories' in item && item.subcategories && Array.isArray(item.subcategories) && item.subcategories.length > 0;
+          const isExpanded = expandedCategories.has(item.category);
+
+          return (
+            <div key={item.category} className="border rounded-lg">
+              <div
+                className={cn(
+                  "flex items-center justify-between p-3 cursor-pointer hover:bg-muted/50",
+                  canExpand && "cursor-pointer"
+                )}
+                onClick={() => handleCategoryClick(item)}
+              >
+                <div className="flex items-center gap-3">
+                  {canExpand && (
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      className="p-0 w-4 h-4"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        toggleCategoryExpansion(item.category);
+                      }}
+                    >
+                      {isExpanded ? (
+                        <ChevronDown className="w-3 h-3" />
+                      ) : (
+                        <ChevronRight className="w-3 h-3" />
+                      )}
+                    </Button>
+                  )}
+                  
+                  <DataBadge
+                    variant="category"
+                    category={((index % 8) + 1) as 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8}
+                    size="sm"
+                  >
+                    {item.category}
+                  </DataBadge>
+                </div>
+                
+                <div className="flex items-center gap-3">
+                  <div className="text-right">
+                    <div className="font-semibold">
+                      {new Intl.NumberFormat().format(item.value)}
+                    </div>
+                    {showPercentages && (
+                      <div className="text-xs text-muted-foreground">
+                        {item.percentage.toFixed(1)}%
+                      </div>
+                    )}
+                  </div>
+                  
+                  {/* Progress bar */}
+                  <div className="w-20 h-2 bg-muted rounded-full overflow-hidden">
+                    <div
+                      className={cn(
+                        "h-full transition-all duration-300",
+                        `bg-category-${((index % 8) + 1)}`
+                      )}
+                      style={{ width: `${item.percentage}%` }}
+                    />
+                  </div>
+                </div>
+              </div>
+              
+              {/* Subcategories */}
+              {canExpand && isExpanded && 'subcategories' in item && item.subcategories && (
+                <div className="border-t bg-muted/20">
+                  {renderDrillDownContent ? (
+                    renderDrillDownContent(item.category, item.subcategories)
+                  ) : (
+                    <div className="p-3 space-y-1">
+                      {Array.isArray(item.subcategories) && item.subcategories.map((subItem: CategoryBreakdown) => (
+                        <div key={subItem.category} className="flex items-center justify-between text-sm pl-4">
+                          <span className="text-muted-foreground">{subItem.category}</span>
+                          <span className="font-medium">{new Intl.NumberFormat().format(subItem.value)}</span>
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                </div>
+              )}
+            </div>
+          );
+        })}
+      </div>
+    );
+  };
+
+  const renderEmptyState = () => {
+    if (categoryBreakdown.length > 0) return null;
+
+    return (
+      <div className="text-center py-12">
+        <Filter className="w-8 h-8 text-muted-foreground mx-auto mb-4" />
+        <div className="text-muted-foreground">
+          No category data available
+        </div>
+      </div>
+    );
+  };
+
+  return (
+    <Card className={cn('p-6', className)} category={category} data-component-name="CategoryBreakdownPanel">
+      {headerSlot}
+      {renderHeader && renderHeader()}
+      
+      {renderControls()}
+      {renderBreadcrumb()}
+      
+      {categoryBreakdown.length === 0 ? (
+        renderEmptyState()
+      ) : (
+        <>
+          {renderChart()}
+          {renderCategoryList()}
+        </>
+      )}
+      
+      {renderFooter && renderFooter()}
+      {footerSlot}
+    </Card>
+  );
+};