@moontra/moonui-pro 2.0.22 → 2.1.0

package/src/components/advanced-chart/advanced-chart.test.tsx

@@ -0,0 +1,281 @@
+import { render, screen, fireEvent } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import { AdvancedChart } from './index'
+
+// Mock recharts to avoid canvas issues in tests
+jest.mock('recharts', () => ({
+  ResponsiveContainer: ({ children }: any) => <div data-testid="responsive-container">{children}</div>,
+  LineChart: ({ children }: any) => <div data-testid="line-chart">{children}</div>,
+  BarChart: ({ children }: any) => <div data-testid="bar-chart">{children}</div>,
+  AreaChart: ({ children }: any) => <div data-testid="area-chart">{children}</div>,
+  PieChart: ({ children }: any) => <div data-testid="pie-chart">{children}</div>,
+  ScatterChart: ({ children }: any) => <div data-testid="scatter-chart">{children}</div>,
+  Line: () => <div data-testid="line" />,
+  Bar: () => <div data-testid="bar" />,
+  Area: () => <div data-testid="area" />,
+  Pie: () => <div data-testid="pie" />,
+  Scatter: () => <div data-testid="scatter" />,
+  Cell: () => <div data-testid="cell" />,
+  XAxis: () => <div data-testid="x-axis" />,
+  YAxis: () => <div data-testid="y-axis" />,
+  CartesianGrid: () => <div data-testid="grid" />,
+  Tooltip: () => <div data-testid="tooltip" />,
+  Legend: () => <div data-testid="legend" />,
+  ReferenceLine: () => <div data-testid="reference-line" />,
+  ReferenceArea: () => <div data-testid="reference-area" />,
+  Brush: () => <div data-testid="brush" />,
+}))
+
+// Mock data for testing
+const mockData = [
+  { name: 'Jan', value: 400, revenue: 2400 },
+  { name: 'Feb', value: 300, revenue: 1398 },
+  { name: 'Mar', value: 200, revenue: 9800 },
+  { name: 'Apr', value: 278, revenue: 3908 },
+  { name: 'May', value: 189, revenue: 4800 },
+  { name: 'Jun', value: 239, revenue: 3800 },
+]
+
+const mockSeries = [
+  {
+    dataKey: 'value',
+    name: 'Users',
+    color: '#8884d8',
+  },
+  {
+    dataKey: 'revenue',
+    name: 'Revenue',
+    color: '#82ca9d',
+  },
+]
+
+describe('AdvancedChart', () => {
+  it('renders without crashing', () => {
+    render(
+      <AdvancedChart
+        data={mockData}
+        series={mockSeries}
+        type="line"
+      />
+    )
+    
+    expect(screen.getByText('Advanced Chart')).toBeInTheDocument()
+  })
+
+  it('renders with custom title', () => {
+    render(
+      <AdvancedChart
+        data={mockData}
+        series={mockSeries}
+        type="line"
+        title="Custom Chart Title"
+      />
+    )
+    
+    expect(screen.getByText('Custom Chart Title')).toBeInTheDocument()
+  })
+
+  it('renders with subtitle', () => {
+    render(
+      <AdvancedChart
+        data={mockData}
+        series={mockSeries}
+        type="line"
+        title="Chart Title"
+        subtitle="Chart Subtitle"
+      />
+    )
+    
+    expect(screen.getByText('Chart Subtitle')).toBeInTheDocument()
+  })
+
+  it('renders line chart type', () => {
+    render(
+      <AdvancedChart
+        data={mockData}
+        series={mockSeries}
+        type="line"
+      />
+    )
+    
+    expect(screen.getByTestId('line-chart')).toBeInTheDocument()
+  })
+
+  it('renders bar chart type', () => {
+    render(
+      <AdvancedChart
+        data={mockData}
+        series={mockSeries}
+        type="bar"
+      />
+    )
+    
+    expect(screen.getByTestId('bar-chart')).toBeInTheDocument()
+  })
+
+  it('renders area chart type', () => {
+    render(
+      <AdvancedChart
+        data={mockData}
+        series={mockSeries}
+        type="area"
+      />
+    )
+    
+    expect(screen.getByTestId('area-chart')).toBeInTheDocument()
+  })
+
+  it('renders pie chart type', () => {
+    render(
+      <AdvancedChart
+        data={mockData}
+        series={mockSeries}
+        type="pie"
+      />
+    )
+    
+    expect(screen.getByTestId('pie-chart')).toBeInTheDocument()
+  })
+
+  it('renders scatter chart type', () => {
+    render(
+      <AdvancedChart
+        data={mockData}
+        series={mockSeries}
+        type="scatter"
+      />
+    )
+    
+    expect(screen.getByTestId('scatter-chart')).toBeInTheDocument()
+  })
+
+  it('shows loading state', () => {
+    render(
+      <AdvancedChart
+        data={mockData}
+        series={mockSeries}
+        type="line"
+        loading={true}
+      />
+    )
+    
+    expect(screen.getByText('Loading chart...')).toBeInTheDocument()
+  })
+
+  it('shows error state', () => {
+    render(
+      <AdvancedChart
+        data={mockData}
+        series={mockSeries}
+        type="line"
+        error="Something went wrong"
+      />
+    )
+    
+    expect(screen.getByText('Something went wrong')).toBeInTheDocument()
+    expect(screen.getByText('Retry')).toBeInTheDocument()
+  })
+
+  it('calls onRefresh when refresh button is clicked', () => {
+    const mockOnRefresh = jest.fn()
+    
+    render(
+      <AdvancedChart
+        data={mockData}
+        series={mockSeries}
+        type="line"
+        onRefresh={mockOnRefresh}
+      />
+    )
+    
+    const refreshButton = screen.getByRole('button', { name: /refresh/i })
+    fireEvent.click(refreshButton)
+    
+    expect(mockOnRefresh).toHaveBeenCalled()
+  })
+
+  it('calls onExport when export button is clicked', () => {
+    const mockOnExport = jest.fn()
+    
+    render(
+      <AdvancedChart
+        data={mockData}
+        series={mockSeries}
+        type="line"
+        onExport={mockOnExport}
+      />
+    )
+    
+    const exportButton = screen.getByRole('button', { name: /download/i })
+    fireEvent.click(exportButton)
+    
+    expect(mockOnExport).toHaveBeenCalledWith('png')
+  })
+
+  it('displays trend indicator', () => {
+    render(
+      <AdvancedChart
+        data={mockData}
+        series={mockSeries}
+        type="line"
+        title="Revenue Chart"
+      />
+    )
+    
+    // Should display trend percentage
+    expect(screen.getByText(/%/)).toBeInTheDocument()
+  })
+
+  it('renders with custom height', () => {
+    render(
+      <AdvancedChart
+        data={mockData}
+        series={mockSeries}
+        type="line"
+        height={600}
+      />
+    )
+    
+    expect(screen.getByTestId('responsive-container')).toBeInTheDocument()
+  })
+
+  it('handles responsive mode', () => {
+    render(
+      <AdvancedChart
+        data={mockData}
+        series={mockSeries}
+        type="line"
+        responsive={true}
+      />
+    )
+    
+    expect(screen.getByTestId('responsive-container')).toBeInTheDocument()
+  })
+
+  it('handles non-responsive mode', () => {
+    render(
+      <AdvancedChart
+        data={mockData}
+        series={mockSeries}
+        type="line"
+        responsive={false}
+      />
+    )
+    
+    expect(screen.queryByTestId('responsive-container')).not.toBeInTheDocument()
+  })
+
+  it('applies custom className', () => {
+    render(
+      <AdvancedChart
+        data={mockData}
+        series={mockSeries}
+        type="line"
+        className="custom-chart"
+      />
+    )
+    
+    const chartContainer = screen.getByText('Advanced Chart').closest('div')
+    expect(chartContainer).toHaveClass('custom-chart')
+  })
+})

package/src/components/advanced-chart/index.tsx

@@ -0,0 +1,412 @@
+"use client"
+
+import React from 'react'
+import {
+  ResponsiveContainer,
+  LineChart,
+  BarChart,
+  AreaChart,
+  PieChart,
+  ScatterChart,
+  Line,
+  Bar,
+  Area,
+  Pie,
+  Cell,
+  Scatter,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  Legend,
+  ReferenceLine,
+  ReferenceArea,
+  Brush,
+} from 'recharts'
+import { Card, CardContent, CardHeader, CardTitle } from '../ui/card'
+import { Button } from '../ui/button'
+import { 
+  Download, 
+  Maximize2, 
+  Settings, 
+  RefreshCw,
+  TrendingUp,
+  TrendingDown,
+  Minus,
+  Lock,
+  Sparkles
+} from 'lucide-react'
+import { cn } from '@moontra/moonui'
+
+export type ChartType = 'line' | 'bar' | 'area' | 'pie' | 'scatter'
+
+export interface ChartDataPoint {
+  [key: string]: string | number | null
+}
+
+export interface ChartSeries {
+  dataKey: string
+  name: string
+  color: string
+  type?: 'monotone' | 'linear' | 'step'
+  strokeWidth?: number
+  fillOpacity?: number
+  hide?: boolean
+}
+
+export interface AdvancedChartProps {
+  data: ChartDataPoint[]
+  type: ChartType
+  series: ChartSeries[]
+  title?: string
+  subtitle?: string
+  height?: number
+  width?: number | string
+  xAxisKey?: string
+  yAxisKey?: string
+  showGrid?: boolean
+  showTooltip?: boolean
+  showLegend?: boolean
+  showBrush?: boolean
+  showReference?: boolean
+  referenceLines?: Array<{
+    value: number
+    label?: string
+    color?: string
+  }>
+  referenceAreas?: Array<{
+    x1: string | number
+    x2: string | number
+    label?: string
+    color?: string
+  }>
+  colors?: string[]
+  className?: string
+  onDataPointClick?: (data: ChartDataPoint) => void
+  onExport?: (format: 'png' | 'svg' | 'pdf') => void
+  onRefresh?: () => void
+  customTooltip?: React.ComponentType<any>
+  customLegend?: React.ComponentType<any>
+  loading?: boolean
+  error?: string | null
+  animated?: boolean
+  responsive?: boolean
+}
+
+const DEFAULT_COLORS = [
+  '#3b82f6', '#ef4444', '#10b981', '#f59e0b', '#8b5cf6',
+  '#06b6d4', '#f97316', '#84cc16', '#ec4899', '#6366f1'
+]
+
+export function AdvancedChart({
+  data,
+  type,
+  series,
+  title,
+  subtitle,
+  height = 400,
+  width = '100%',
+  xAxisKey = 'name',
+  yAxisKey,
+  showGrid = true,
+  showTooltip = true,
+  showLegend = true,
+  showBrush = false,
+  showReference = false,
+  referenceLines = [],
+  referenceAreas = [],
+  colors = DEFAULT_COLORS,
+  className,
+  onDataPointClick,
+  onExport,
+  onRefresh,
+  customTooltip,
+  customLegend,
+  loading = false,
+  error = null,
+  animated = true,
+  responsive = true,
+}: AdvancedChartProps) {
+  const [isFullscreen, setIsFullscreen] = React.useState(false)
+  const chartRef = React.useRef<HTMLDivElement>(null)
+
+  // Calculate trend for the first series
+  const trend = React.useMemo(() => {
+    if (!data.length || !series.length) return null
+    
+    const firstSeries = series[0]
+    const values = data.map(d => Number(d[firstSeries.dataKey])).filter(v => !isNaN(v))
+    
+    if (values.length < 2) return null
+    
+    const first = values[0]
+    const last = values[values.length - 1]
+    const change = ((last - first) / first) * 100
+    
+    return {
+      direction: change > 0 ? 'up' : change < 0 ? 'down' : 'neutral',
+      percentage: Math.abs(change).toFixed(1)
+    }
+  }, [data, series])
+
+  const handleExport = (format: 'png' | 'svg' | 'pdf') => {
+    if (onExport) {
+      onExport(format)
+    }
+  }
+
+  const renderChart = () => {
+    const commonProps = {
+      data,
+      width: typeof width === 'string' ? undefined : width,
+      height,
+      margin: { top: 20, right: 30, left: 20, bottom: 20 },
+      // onClick: onDataPointClick,
+    }
+
+    const visibleSeries = series.filter(s => !s.hide)
+
+    switch (type) {
+      case 'line':
+        return (
+          <LineChart {...commonProps}>
+            {showGrid && <CartesianGrid strokeDasharray="3 3" />}
+            <XAxis dataKey={xAxisKey} />
+            <YAxis />
+            {showTooltip && <Tooltip />}
+            {showLegend && <Legend />}
+            {visibleSeries.map((s, index) => (
+              <Line
+                key={s.dataKey}
+                type={s.type || 'monotone'}
+                dataKey={s.dataKey}
+                stroke={s.color || colors[index % colors.length]}
+                strokeWidth={s.strokeWidth || 2}
+                name={s.name}
+                animationDuration={animated ? 1000 : 0}
+              />
+            ))}
+            {showReference && referenceLines.map((ref, index) => (
+              <ReferenceLine
+                key={index}
+                y={ref.value}
+                stroke={ref.color || '#666'}
+                strokeDasharray="5 5"
+                label={ref.label}
+              />
+            ))}
+            {showReference && referenceAreas.map((ref, index) => (
+              <ReferenceArea
+                key={index}
+                x1={ref.x1}
+                x2={ref.x2}
+                fill={ref.color || '#f0f0f0'}
+                fillOpacity={0.3}
+                label={ref.label}
+              />
+            ))}
+            {showBrush && <Brush />}
+          </LineChart>
+        )
+
+      case 'bar':
+        return (
+          <BarChart {...commonProps}>
+            {showGrid && <CartesianGrid strokeDasharray="3 3" />}
+            <XAxis dataKey={xAxisKey} />
+            <YAxis />
+            {showTooltip && <Tooltip />}
+            {showLegend && <Legend />}
+            {visibleSeries.map((s, index) => (
+              <Bar
+                key={s.dataKey}
+                dataKey={s.dataKey}
+                fill={s.color || colors[index % colors.length]}
+                name={s.name}
+                animationDuration={animated ? 1000 : 0}
+              />
+            ))}
+            {showReference && referenceLines.map((ref, index) => (
+              <ReferenceLine
+                key={index}
+                y={ref.value}
+                stroke={ref.color || '#666'}
+                strokeDasharray="5 5"
+                label={ref.label}
+              />
+            ))}
+            {showBrush && <Brush />}
+          </BarChart>
+        )
+
+      case 'area':
+        return (
+          <AreaChart {...commonProps}>
+            {showGrid && <CartesianGrid strokeDasharray="3 3" />}
+            <XAxis dataKey={xAxisKey} />
+            <YAxis />
+            {showTooltip && <Tooltip />}
+            {showLegend && <Legend />}
+            {visibleSeries.map((s, index) => (
+              <Area
+                key={s.dataKey}
+                type={s.type || 'monotone'}
+                dataKey={s.dataKey}
+                stroke={s.color || colors[index % colors.length]}
+                fill={s.color || colors[index % colors.length]}
+                fillOpacity={s.fillOpacity || 0.3}
+                name={s.name}
+                animationDuration={animated ? 1000 : 0}
+              />
+            ))}
+            {showReference && referenceLines.map((ref, index) => (
+              <ReferenceLine
+                key={index}
+                y={ref.value}
+                stroke={ref.color || '#666'}
+                strokeDasharray="5 5"
+                label={ref.label}
+              />
+            ))}
+            {showBrush && <Brush />}
+          </AreaChart>
+        )
+
+      case 'pie':
+        return (
+          <PieChart {...commonProps}>
+            {showTooltip && <Tooltip />}
+            {showLegend && <Legend />}
+            <Pie
+              data={data}
+              dataKey={series[0]?.dataKey || 'value'}
+              nameKey={xAxisKey}
+              cx="50%"
+              cy="50%"
+              outerRadius={Math.min(height, typeof width === 'number' ? width : 400) / 3}
+              animationDuration={animated ? 1000 : 0}
+            >
+              {data.map((entry, index) => (
+                <Cell key={`cell-${index}`} fill={colors[index % colors.length]} />
+              ))}
+            </Pie>
+          </PieChart>
+        )
+
+      case 'scatter':
+        return (
+          <ScatterChart {...commonProps}>
+            {showGrid && <CartesianGrid strokeDasharray="3 3" />}
+            <XAxis dataKey={xAxisKey} />
+            <YAxis dataKey={yAxisKey} />
+            {showTooltip && <Tooltip />}
+            {showLegend && <Legend />}
+            {visibleSeries.map((s, index) => (
+              <Scatter
+                key={s.dataKey}
+                dataKey={s.dataKey}
+                fill={s.color || colors[index % colors.length]}
+                name={s.name}
+                animationDuration={animated ? 1000 : 0}
+              />
+            ))}
+          </ScatterChart>
+        )
+
+      default:
+        return <div>Unsupported chart type</div>
+    }
+  }
+
+  if (loading) {
+    return (
+      <Card className={cn("w-full", className)}>
+        <CardContent className="flex items-center justify-center" style={{ height }}>
+          <div className="flex items-center space-x-2">
+            <RefreshCw className="h-4 w-4 animate-spin" />
+            <span>Loading chart...</span>
+          </div>
+        </CardContent>
+      </Card>
+    )
+  }
+
+  if (error) {
+    return (
+      <Card className={cn("w-full", className)}>
+        <CardContent className="flex items-center justify-center" style={{ height }}>
+          <div className="text-center">
+            <p className="text-destructive mb-2">{error}</p>
+            {onRefresh && (
+              <Button variant="outline" onClick={onRefresh}>
+                <RefreshCw className="mr-2 h-4 w-4" />
+                Retry
+              </Button>
+            )}
+          </div>
+        </CardContent>
+      </Card>
+    )
+  }
+
+  return (
+    <Card className={cn("w-full", className)} ref={chartRef}>
+      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+        <div className="space-y-1">
+          <CardTitle className="text-base font-medium">
+            {title}
+            {trend && (
+              <span className="ml-2 inline-flex items-center">
+                {trend.direction === 'up' && <TrendingUp className="h-4 w-4 text-green-500" />}
+                {trend.direction === 'down' && <TrendingDown className="h-4 w-4 text-red-500" />}
+                {trend.direction === 'neutral' && <Minus className="h-4 w-4 text-gray-500" />}
+                <span className={cn(
+                  "ml-1 text-sm",
+                  trend.direction === 'up' && "text-green-500",
+                  trend.direction === 'down' && "text-red-500",
+                  trend.direction === 'neutral' && "text-gray-500"
+                )}>
+                  {trend.percentage}%
+                </span>
+              </span>
+            )}
+          </CardTitle>
+          {subtitle && (
+            <p className="text-xs text-muted-foreground">{subtitle}</p>
+          )}
+        </div>
+        <div className="flex items-center space-x-1">
+          {onRefresh && (
+            <Button variant="ghost" size="sm" onClick={onRefresh}>
+              <RefreshCw className="h-4 w-4" />
+            </Button>
+          )}
+          <Button variant="ghost" size="sm">
+            <Settings className="h-4 w-4" />
+          </Button>
+          {onExport && (
+            <Button variant="ghost" size="sm" onClick={() => handleExport('png')}>
+              <Download className="h-4 w-4" />
+            </Button>
+          )}
+          <Button variant="ghost" size="sm" onClick={() => setIsFullscreen(!isFullscreen)}>
+            <Maximize2 className="h-4 w-4" />
+          </Button>
+        </div>
+      </CardHeader>
+      <CardContent>
+        {responsive ? (
+          <ResponsiveContainer width="100%" height={height}>
+            {renderChart()}
+          </ResponsiveContainer>
+        ) : (
+          <div style={{ width: '100%', height: `${height}px` }}>
+            {renderChart()}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  )
+}
+
+export default AdvancedChart