@moontra/moonui-pro 2.4.4 → 2.4.6

package/src/components/data-table/data-table-column-toggle.tsx

@@ -25,7 +25,12 @@ export function DataTableColumnToggle({ table, trigger }: DataTableColumnToggleP
   // Get all columns that can be hidden
   const columns = table
     .getAllColumns()
-    .filter((column: any) => column.getCanHide())
+    .filter((column: any) => 
+      column.getCanHide() && 
+      column.id !== 'select' && 
+      column.id !== 'actions' &&
+      column.id !== 'expander'
+    )
 
   // Filter columns based on search
   const filteredColumns = React.useMemo(() => {
@@ -45,9 +50,7 @@ export function DataTableColumnToggle({ table, trigger }: DataTableColumnToggleP
   const visibleCount = columns.filter((col: any) => col.getIsVisible()).length
 
   const handleToggleAll = (visible: boolean) => {
-    columns.forEach((column: any) => {
-      column.toggleVisibility(visible)
-    })
+    table.toggleAllColumnsVisible(visible)
   }
 
   return (

package/src/components/data-table/data-table-filter-drawer.tsx

@@ -44,6 +44,8 @@ export interface DataTableFilterDrawerProps<TData> {
   filters?: FilterCondition[]
   onFiltersChange?: (filters: FilterCondition[]) => void
   customFilters?: React.ReactNode
+  matchAll?: boolean
+  onMatchAllChange?: (matchAll: boolean) => void
 }
 
 const operatorLabels: Record<FilterOperator, string> = {
@@ -88,12 +90,16 @@ export function DataTableFilterDrawer<TData>({
   filters: externalFilters,
   onFiltersChange,
   customFilters,
+  matchAll: externalMatchAll,
+  onMatchAllChange,
 }: DataTableFilterDrawerProps<TData>) {
   const [internalFilters, setInternalFilters] = useState<FilterCondition[]>([])
-  const [matchAll, setMatchAll] = useState(true)
+  const [internalMatchAll, setInternalMatchAll] = useState(true)
 
   const filters = externalFilters || internalFilters
   const setFilters = onFiltersChange || setInternalFilters
+  const matchAll = externalMatchAll !== undefined ? externalMatchAll : internalMatchAll
+  const setMatchAll = onMatchAllChange || setInternalMatchAll
 
   // Get filterable columns
   const filterableColumns = useMemo(() => {
@@ -135,64 +141,64 @@ export function DataTableFilterDrawer<TData>({
   }
 
   const applyFilters = () => {
-    // Reset all column filters first
-    table.resetColumnFilters()
+    // Create a custom filter function that handles all our conditions
+    const customFilterFn = (row: any, columnId: string, filterValue: any) => {
+      // Find the filter condition for this column
+      const filterCondition = filters.find(f => f.column === columnId)
+      if (!filterCondition) return true
 
-    // Apply each filter
-    filters.forEach(filter => {
-      const column = table.getColumn(filter.column)
-      if (!column) return
+      const cellValue = row.getValue(columnId)
+      const filterVal = filterCondition.value
 
-      // Apply filter based on operator
-      switch (filter.operator) {
+      switch (filterCondition.operator) {
         case 'equals':
-          column.setFilterValue(filter.value)
-          break
+          return cellValue === filterVal
         case 'notEquals':
-          column.setFilterValue((value: any) => value !== filter.value)
-          break
+          return cellValue !== filterVal
         case 'contains':
-          column.setFilterValue((value: any) => 
-            String(value).toLowerCase().includes(String(filter.value).toLowerCase())
-          )
-          break
+          return String(cellValue).toLowerCase().includes(String(filterVal).toLowerCase())
         case 'notContains':
-          column.setFilterValue((value: any) => 
-            !String(value).toLowerCase().includes(String(filter.value).toLowerCase())
-          )
-          break
+          return !String(cellValue).toLowerCase().includes(String(filterVal).toLowerCase())
         case 'startsWith':
-          column.setFilterValue((value: any) => 
-            String(value).toLowerCase().startsWith(String(filter.value).toLowerCase())
-          )
-          break
+          return String(cellValue).toLowerCase().startsWith(String(filterVal).toLowerCase())
         case 'endsWith':
-          column.setFilterValue((value: any) => 
-            String(value).toLowerCase().endsWith(String(filter.value).toLowerCase())
-          )
-          break
+          return String(cellValue).toLowerCase().endsWith(String(filterVal).toLowerCase())
         case 'greaterThan':
-          column.setFilterValue((value: any) => Number(value) > Number(filter.value))
-          break
+          return Number(cellValue) > Number(filterVal)
         case 'lessThan':
-          column.setFilterValue((value: any) => Number(value) < Number(filter.value))
-          break
+          return Number(cellValue) < Number(filterVal)
         case 'greaterThanOrEqual':
-          column.setFilterValue((value: any) => Number(value) >= Number(filter.value))
-          break
+          return Number(cellValue) >= Number(filterVal)
         case 'lessThanOrEqual':
-          column.setFilterValue((value: any) => Number(value) <= Number(filter.value))
-          break
+          return Number(cellValue) <= Number(filterVal)
         case 'isNull':
-          column.setFilterValue((value: any) => value == null || value === '')
-          break
+          return cellValue == null || cellValue === ''
         case 'isNotNull':
-          column.setFilterValue((value: any) => value != null && value !== '')
-          break
-        // Add more operators as needed
+          return cellValue != null && cellValue !== ''
+        default:
+          return true
       }
+    }
+
+    // Reset all column filters first
+    table.resetColumnFilters()
+
+    // Apply filter for each column that has a filter condition
+    const columnsWithFilters = [...new Set(filters.map(f => f.column))]
+    
+    columnsWithFilters.forEach(columnId => {
+      const column = table.getColumn(columnId)
+      if (!column) return
+      
+      // Set filter with custom function
+      column.setFilterValue({ custom: true, filters, matchAll })
     })
 
+    // If no filters, ensure all filters are cleared
+    if (filters.length === 0) {
+      table.resetColumnFilters()
+    }
+
     onOpenChange(false)
   }
 

package/src/components/data-table/index.tsx

@@ -44,7 +44,7 @@ import { motion, AnimatePresence } from 'framer-motion'
 import { DataTableColumnToggle } from './data-table-column-toggle'
 import { DataTableBulkActions, type BulkAction } from './data-table-bulk-actions'
 import { exportData, type ExportFormat, getVisibleColumns } from './data-table-export'
-import { DataTableFilterDrawer, type FilterCondition } from './data-table-filter-drawer'
+import { DataTableFilterDrawer, type FilterCondition, type FilterOperator } from './data-table-filter-drawer'
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -153,12 +153,17 @@ export function DataTable<TData, TValue>({
   onColumnFiltersChange,
   state: externalState,
 }: DataTableProps<TData, TValue>) {
-  // Process columns to ensure they can be hidden
+  // Process columns to ensure they can be hidden and use custom filter
   const columns = React.useMemo(() => {
-    return originalColumns.map(col => ({
-      ...col,
-      enableHiding: col.enableHiding !== false,
-    }))
+    return originalColumns.map(col => {
+      // Remove any enableHiding: false to avoid conflicts
+      const { enableHiding, ...restCol } = col as any;
+      return {
+        ...restCol,
+        enableHiding: true, // Force all columns to be hideable
+        filterFn: 'custom', // Use our custom filter function
+      }
+    })
   }, [originalColumns])
   // Check if we're in docs mode or have pro access
   const { hasProAccess, isLoading } = useSubscription()
@@ -226,17 +231,65 @@ export function DataTable<TData, TValue>({
     onRowSelectionChange: setRowSelection,
     onGlobalFilterChange: setGlobalFilter,
     globalFilterFn: 'includesString',
+    filterFns: {
+      custom: (row, columnId, filterValue) => {
+        if (!filterValue?.custom || !filterValue?.filters) return true
+        
+        const filters = filterValue.filters as FilterCondition[]
+        const matchAll = filterValue.matchAll !== undefined ? filterValue.matchAll : true
+        
+        // Get all filter conditions (not just for this column)
+        const allFilterResults = filters.map(filterCondition => {
+          const cellValue = row.getValue(filterCondition.column)
+          const filterVal = filterCondition.value
+
+          switch (filterCondition.operator) {
+            case 'equals':
+              return cellValue === filterVal
+            case 'notEquals':
+              return cellValue !== filterVal
+            case 'contains':
+              return String(cellValue).toLowerCase().includes(String(filterVal).toLowerCase())
+            case 'notContains':
+              return !String(cellValue).toLowerCase().includes(String(filterVal).toLowerCase())
+            case 'startsWith':
+              return String(cellValue).toLowerCase().startsWith(String(filterVal).toLowerCase())
+            case 'endsWith':
+              return String(cellValue).toLowerCase().endsWith(String(filterVal).toLowerCase())
+            case 'greaterThan':
+              return Number(cellValue) > Number(filterVal)
+            case 'lessThan':
+              return Number(cellValue) < Number(filterVal)
+            case 'greaterThanOrEqual':
+              return Number(cellValue) >= Number(filterVal)
+            case 'lessThanOrEqual':
+              return Number(cellValue) <= Number(filterVal)
+            case 'isNull':
+              return cellValue == null || cellValue === ''
+            case 'isNotNull':
+              return cellValue != null && cellValue !== ''
+            default:
+              return true
+          }
+        })
+        
+        // Apply match logic
+        if (matchAll) {
+          return allFilterResults.every(result => result)
+        } else {
+          return allFilterResults.some(result => result)
+        }
+      }
+    },
     manualPagination,
     pageCount,
-    enableColumnFilters: true,
-    enableSorting: true,
-    enableHiding: true,
-    state: externalState || {
-      sorting,
-      columnFilters,
-      columnVisibility,
-      rowSelection,
-      globalFilter,
+    state: {
+      sorting: externalState?.sorting ?? sorting,
+      columnFilters: externalState?.columnFilters ?? columnFilters,
+      columnVisibility: externalState?.columnVisibility ?? columnVisibility,
+      rowSelection: externalState?.rowSelection ?? rowSelection,
+      globalFilter: externalState?.globalFilter ?? globalFilter,
+      ...(externalState || {}),
     },
     initialState: {
       pagination: {
@@ -485,6 +538,7 @@ export function DataTable<TData, TValue>({
                       isExpanded={isExpanded}
                       enableExpandable={enableExpandable}
                       renderSubComponent={renderSubComponent}
+                      visibilityState={table.getState().columnVisibility}
                     />
                   );
                 })}
@@ -706,6 +760,7 @@ interface TableRowProps {
   isExpanded: boolean
   enableExpandable: boolean
   renderSubComponent?: (props: { row: { original: any; id: string } }) => React.ReactNode
+  visibilityState: Record<string, boolean>
 }
 
 const TableRow = React.memo(({ 
@@ -713,7 +768,8 @@ const TableRow = React.memo(({
   columns, 
   isExpanded, 
   enableExpandable,
-  renderSubComponent 
+  renderSubComponent,
+  visibilityState 
 }: TableRowProps) => {
   const rowId = (row.original as any).id || row.id
   
@@ -726,16 +782,26 @@ const TableRow = React.memo(({
           isExpanded && "border-b-0"
         )}
       >
-        {row.getVisibleCells().map((cell) => (
-          <td key={cell.id} className="moonui-data-table-td p-4 align-middle">
-            {flexRender(cell.column.columnDef.cell, cell.getContext())}
-          </td>
-        ))}
+        {row.getAllCells()
+          .filter((cell) => {
+            // Manual visibility check
+            const isVisible = visibilityState[cell.column.id] !== false;
+            return isVisible;
+          })
+          .map((cell) => {
+            return (
+              <td key={cell.id} className="moonui-data-table-td p-4 align-middle">
+                {flexRender(cell.column.columnDef.cell, cell.getContext())}
+              </td>
+            );
+          })}
       </tr>
       
       {isExpanded && renderSubComponent && (
         <tr className="border-b">
-          <td colSpan={row.getVisibleCells().length} className="p-0 overflow-hidden">
+          <td colSpan={row.getAllCells().filter(cell => 
+            visibilityState[cell.column.id] !== false
+          ).length || 1} className="p-0 overflow-hidden">
             <div 
               className="transition-all duration-300 ease-out"
               style={{
@@ -753,13 +819,21 @@ const TableRow = React.memo(({
     </>
   )
 }, (prevProps, nextProps) => {
-  // Custom comparison - only re-render if row data or expanded state changed
+  // Custom comparison - only re-render if row data, expanded state, or visibility changed
   const prevRowId = (prevProps.row.original as any).id || prevProps.row.id
   const nextRowId = (nextProps.row.original as any).id || nextProps.row.id
   
+  // Include visibility state in comparison
+  const prevVisibilityKeys = Object.keys(prevProps.visibilityState).sort().join(',')
+  const nextVisibilityKeys = Object.keys(nextProps.visibilityState).sort().join(',')
+  const prevVisibilityValues = Object.values(prevProps.visibilityState).join(',')
+  const nextVisibilityValues = Object.values(nextProps.visibilityState).join(',')
+  
   return prevRowId === nextRowId && 
          prevProps.isExpanded === nextProps.isExpanded &&
-         prevProps.row.getIsSelected() === nextProps.row.getIsSelected()
+         prevProps.row.getIsSelected() === nextProps.row.getIsSelected() &&
+         prevVisibilityKeys === nextVisibilityKeys &&
+         prevVisibilityValues === nextVisibilityValues
 })
 
 TableRow.displayName = 'TableRow'

package/src/styles/advanced-chart.css

@@ -0,0 +1,239 @@
+/* Advanced Chart Styles */
+
+/* Chart animation classes */
+.chart-animate-in {
+  animation: chartFadeIn 0.5s ease-out;
+}
+
+.chart-point-pulse {
+  animation: pointPulse 2s ease-in-out infinite;
+}
+
+.chart-gradient-shift {
+  animation: gradientShift 3s ease-in-out infinite;
+}
+
+/* Custom chart tooltips */
+.recharts-tooltip-wrapper {
+  outline: none !important;
+}
+
+.recharts-tooltip-cursor {
+  fill: hsl(var(--muted) / 0.1);
+}
+
+/* Legend hover effects */
+.recharts-legend-item {
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.recharts-legend-item:hover {
+  transform: translateY(-1px);
+}
+
+/* Smooth chart transitions */
+.recharts-line-curve,
+.recharts-area-curve {
+  transition: all 0.3s ease;
+}
+
+.recharts-bar-rectangle {
+  transition: all 0.2s ease;
+}
+
+.recharts-bar-rectangle:hover {
+  filter: brightness(1.1);
+}
+
+/* Pie chart enhancements */
+.recharts-pie-sector {
+  transition: all 0.2s ease;
+  cursor: pointer;
+}
+
+.recharts-pie-sector:hover {
+  filter: brightness(1.1);
+  transform: scale(1.02);
+}
+
+/* Brush styling */
+.recharts-brush {
+  fill: hsl(var(--primary) / 0.1);
+  stroke: hsl(var(--primary) / 0.3);
+}
+
+.recharts-brush-slide {
+  fill: hsl(var(--primary) / 0.2);
+  fill-opacity: 0.5;
+}
+
+/* Grid styling */
+.recharts-cartesian-grid-horizontal line,
+.recharts-cartesian-grid-vertical line {
+  stroke-dasharray: 3 3;
+  opacity: 0.3;
+}
+
+/* Axis styling */
+.recharts-xAxis .recharts-cartesian-axis-tick-value,
+.recharts-yAxis .recharts-cartesian-axis-tick-value {
+  fill: hsl(var(--muted-foreground));
+  font-size: 11px;
+}
+
+/* Dark mode enhancements */
+.dark .recharts-tooltip-wrapper {
+  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3));
+}
+
+.dark .recharts-cartesian-grid-horizontal line,
+.dark .recharts-cartesian-grid-vertical line {
+  opacity: 0.2;
+}
+
+/* Sparkline mode */
+.sparkline-chart .recharts-surface {
+  overflow: visible !important;
+}
+
+/* Loading skeleton animation */
+@keyframes chartSkeletonPulse {
+  0%, 100% {
+    opacity: 0.5;
+    transform: scaleY(0.8);
+  }
+  50% {
+    opacity: 1;
+    transform: scaleY(1);
+  }
+}
+
+/* Chart animations */
+@keyframes chartFadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes pointPulse {
+  0%, 100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  50% {
+    transform: scale(1.2);
+    opacity: 0.8;
+  }
+}
+
+@keyframes gradientShift {
+  0%, 100% {
+    stop-opacity: 0.8;
+  }
+  50% {
+    stop-opacity: 0.4;
+  }
+}
+
+/* Interactive legend styles */
+.chart-legend-item {
+  position: relative;
+  overflow: hidden;
+}
+
+.chart-legend-item::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, hsl(var(--primary) / 0.1), transparent);
+  transition: left 0.5s ease;
+}
+
+.chart-legend-item:hover::before {
+  left: 100%;
+}
+
+/* Crosshair cursor */
+.chart-crosshair {
+  stroke: hsl(var(--muted-foreground));
+  stroke-width: 1;
+  stroke-dasharray: 5 5;
+  opacity: 0.5;
+}
+
+/* Mini map styles */
+.chart-minimap {
+  border: 1px solid hsl(var(--border));
+  border-radius: var(--radius-md);
+  background: hsl(var(--background) / 0.8);
+  backdrop-filter: blur(8px);
+}
+
+/* Export menu animation */
+.chart-export-menu {
+  animation: slideDown 0.2s ease-out;
+}
+
+@keyframes slideDown {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Zoom indicator */
+.chart-zoom-indicator {
+  background: hsl(var(--background) / 0.9);
+  backdrop-filter: blur(8px);
+  border: 1px solid hsl(var(--border));
+  border-radius: var(--radius-full);
+  padding: 0.25rem 0.5rem;
+  font-size: 0.75rem;
+  font-weight: 500;
+}
+
+/* Performance optimizations */
+.recharts-surface {
+  will-change: transform;
+}
+
+.recharts-line,
+.recharts-area,
+.recharts-bar {
+  will-change: opacity, transform;
+}
+
+/* Responsive adjustments */
+@media (max-width: 640px) {
+  .recharts-wrapper {
+    font-size: 0.875rem;
+  }
+  
+  .recharts-legend-wrapper {
+    margin-top: 1rem !important;
+  }
+}
+
+/* Print styles */
+@media print {
+  .chart-controls {
+    display: none !important;
+  }
+  
+  .recharts-tooltip-wrapper {
+    display: none !important;
+  }
+}

package/src/styles/index.css

@@ -1,4 +1,5 @@
 /* MoonUI Pro - Complete CSS System */
 @import "./tailwind.css";
 @import "./tokens.css";
-@import "./design-system.css";
+@import "./design-system.css";
+@import "./advanced-chart.css";

package/src/utils/chart-helpers.ts

@@ -255,3 +255,103 @@ export function exportChartAsImage(
   // Implementation would go here
   // This is a placeholder for the actual export functionality
 }
+
+export function exportChartData(
+  data: ChartDataPoint[],
+  filename: string = 'chart-data',
+  format: 'json' | 'csv' = 'json'
+): void {
+  let content: string
+  let mimeType: string
+  
+  if (format === 'json') {
+    content = JSON.stringify(data, null, 2)
+    mimeType = 'application/json'
+  } else {
+    // CSV export
+    const headers = Object.keys(data[0] || {})
+    const csvRows = [
+      headers.join(','),
+      ...data.map(row => 
+        headers.map(header => {
+          const value = row[header]
+          return typeof value === 'string' && value.includes(',') 
+            ? `"${value}"` 
+            : value
+        }).join(',')
+      )
+    ]
+    content = csvRows.join('\n')
+    mimeType = 'text/csv'
+  }
+  
+  const blob = new Blob([content], { type: mimeType })
+  const url = window.URL.createObjectURL(blob)
+  const link = document.createElement('a')
+  link.href = url
+  link.download = `${filename}.${format}`
+  document.body.appendChild(link)
+  link.click()
+  document.body.removeChild(link)
+  window.URL.revokeObjectURL(url)
+}
+
+// Gradient color generator
+export function generateGradientColors(baseColor: string, count: number = 5): string[] {
+  const colors: string[] = []
+  const rgb = hexToRgb(baseColor)
+  
+  if (!rgb) return [baseColor]
+  
+  for (let i = 0; i < count; i++) {
+    const factor = i / (count - 1)
+    const r = Math.round(rgb.r + (255 - rgb.r) * factor * 0.5)
+    const g = Math.round(rgb.g + (255 - rgb.g) * factor * 0.5)
+    const b = Math.round(rgb.b + (255 - rgb.b) * factor * 0.5)
+    colors.push(`rgb(${r}, ${g}, ${b})`)
+  }
+  
+  return colors
+}
+
+function hexToRgb(hex: string): { r: number; g: number; b: number } | null {
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
+  return result ? {
+    r: parseInt(result[1], 16),
+    g: parseInt(result[2], 16),
+    b: parseInt(result[3], 16)
+  } : null
+}
+
+// Performance optimization helpers
+export function throttleChartData(data: ChartDataPoint[], maxPoints: number = 1000): ChartDataPoint[] {
+  if (data.length <= maxPoints) return data
+  
+  const step = Math.ceil(data.length / maxPoints)
+  return data.filter((_, index) => index % step === 0)
+}
+
+// Format large numbers
+export function formatChartValue(value: number): string {
+  if (value >= 1e9) return `${(value / 1e9).toFixed(1)}B`
+  if (value >= 1e6) return `${(value / 1e6).toFixed(1)}M`
+  if (value >= 1e3) return `${(value / 1e3).toFixed(1)}K`
+  return value.toString()
+}
+
+// Calculate chart statistics
+export function calculateChartStats(data: ChartDataPoint[], keys: string[]): Record<string, { min: number; max: number; avg: number; total: number }> {
+  const stats: Record<string, { min: number; max: number; avg: number; total: number }> = {}
+  
+  keys.forEach(key => {
+    const values = data.map(point => Number(point[key]) || 0)
+    stats[key] = {
+      min: Math.min(...values),
+      max: Math.max(...values),
+      avg: values.reduce((sum, val) => sum + val, 0) / values.length,
+      total: values.reduce((sum, val) => sum + val, 0)
+    }
+  })
+  
+  return stats
+}