@beppla/tapas-ui 1.2.33 → 1.2.34

package/components/StatisticsTable/StatisticsTable.tsx

@@ -0,0 +1,337 @@
+import React, { useMemo } from 'react';
+import { View, ScrollView, StyleSheet, Platform } from 'react-native';
+import Text from '../Text/Text';
+import Pagination from '../Pagination/Pagination';
+
+export interface StatisticsTableColumn {
+  key: string;
+  title: string;
+  width?: number;
+}
+
+export interface StatisticsTableCell {
+  rowKey: string;
+  columnKey: string;
+  quantity: number;
+  amount: number;
+}
+
+export interface StatisticsTableProps {
+  // 行标题（如日期）
+  rows: Array<{ key: string; label: string }>;
+  // 列标题（如门店）
+  columns: StatisticsTableColumn[];
+  // 单元格数据
+  cells: StatisticsTableCell[];
+  // 是否显示行统计（Sum/Mean 列）
+  showRowStats?: boolean;
+  // 是否显示列统计（Sum/Mean 行）
+  showColumnStats?: boolean;
+  // 分页配置
+  pagination?: {
+    current: number;
+    pageSize: number;
+    total: number;
+    onChange?: (page: number, pageSize: number) => void;
+  } | false;
+  loading?: boolean;
+  emptyText?: string;
+  maxHeight?: number;
+  rowLabelWidth?: number;
+  style?: any;
+}
+
+export function StatisticsTable({
+  rows,
+  columns,
+  cells,
+  showRowStats = false,
+  showColumnStats = false,
+  pagination,
+  loading = false,
+  emptyText = 'No data',
+  maxHeight = 500,
+  rowLabelWidth = 150,
+  style,
+}: StatisticsTableProps) {
+  
+  // 构建矩阵数据
+  const matrix = useMemo(() => {
+    const data: Record<string, Record<string, { quantity: number; amount: number }>> = {};
+    rows.forEach(row => {
+      if (!data[row.key]) {
+        data[row.key] = {};
+      }
+      columns.forEach(col => {
+        const cell = cells.find(c => c.rowKey === row.key && c.columnKey === col.key);
+        data[row.key]![col.key] = cell || { quantity: 0, amount: 0 };
+      });
+    });
+    return data;
+  }, [rows, columns, cells]);
+
+  // 计算行统计（每行的总和和平均值）
+  const rowStats = useMemo(() => {
+    if (!showRowStats) return null;
+    return rows.map(row => {
+      const rowCells = columns.map(col => matrix[row.key]?.[col.key] || { quantity: 0, amount: 0 });
+      const sumQuantity = rowCells.reduce((sum, cell) => sum + cell.quantity, 0);
+      const sumAmount = rowCells.reduce((sum, cell) => sum + cell.amount, 0);
+      const count = rowCells.length || 1;
+      const meanQuantity = sumQuantity / count;
+      const meanAmount = sumAmount / count;
+      return { sumQuantity, sumAmount, meanQuantity, meanAmount };
+    });
+  }, [rows, columns, matrix, showRowStats]);
+
+  // 计算列统计（每列的总和和平均值）
+  const columnStats = useMemo(() => {
+    if (!showColumnStats) return null;
+    return columns.map(col => {
+      const colCells = rows.map(row => matrix[row.key]?.[col.key] || { quantity: 0, amount: 0 });
+      const sumQuantity = colCells.reduce((sum, cell) => sum + cell.quantity, 0);
+      const sumAmount = colCells.reduce((sum, cell) => sum + cell.amount, 0);
+      const count = colCells.length || 1;
+      const meanQuantity = sumQuantity / count;
+      const meanAmount = sumAmount / count;
+      return { sumQuantity, sumAmount, meanQuantity, meanAmount };
+    });
+  }, [rows, columns, matrix, showColumnStats]);
+
+  if (loading) {
+    return (
+      <View style={[styles.container, style]}>
+        <View style={styles.loadingRow}>
+          <Text>Loading...</Text>
+        </View>
+      </View>
+    );
+  }
+
+  if (rows.length === 0 || columns.length === 0) {
+    return (
+      <View style={[styles.container, style]}>
+        <View style={styles.emptyRow}>
+          <Text style={styles.emptyText}>{emptyText}</Text>
+        </View>
+      </View>
+    );
+  }
+
+  return (
+    <View style={[styles.container, style]}>
+      <ScrollView
+        horizontal
+        showsHorizontalScrollIndicator={Platform.OS === 'web'}
+      >
+        <View>
+          {/* Table Header */}
+          <View style={styles.header}>
+            <View style={[styles.headerCell, { width: rowLabelWidth }]}>
+              <Text style={styles.headerText}></Text>
+            </View>
+            {columns.map((column) => (
+              <View key={column.key} style={[styles.headerCell, { width: column.width || 150 }]}>
+                <Text style={styles.headerText}>{column.title}</Text>
+              </View>
+            ))}
+            {showRowStats && (
+              <>
+                <View style={[styles.headerCell, { width: 120 }]}>
+                  <Text style={styles.headerText}>Sum</Text>
+                </View>
+                <View style={[styles.headerCell, { width: 120 }]}>
+                  <Text style={styles.headerText}>Mean</Text>
+                </View>
+              </>
+            )}
+          </View>
+
+          {/* Table Body */}
+          <ScrollView
+            style={{ maxHeight }}
+            showsVerticalScrollIndicator={Platform.OS === 'web'}
+          >
+            {rows.map((row, rowIndex) => {
+              const rowStat = rowStats?.[rowIndex];
+              
+              return (
+                <View key={row.key} style={styles.row}>
+                  <View style={[styles.cell, { width: rowLabelWidth }]}>
+                    <Text style={styles.rowLabel}>{row.label}</Text>
+                  </View>
+                  {columns.map((column) => {
+                    const cell = matrix[row.key]?.[column.key] || { quantity: 0, amount: 0 };
+                    return (
+                      <View key={column.key} style={[styles.cell, { width: column.width || 150 }]}>
+                        <Text style={styles.cellQuantity}>{cell.quantity}</Text>
+                        <Text style={styles.cellAmount}>€{cell.amount.toFixed(2)}</Text>
+                      </View>
+                    );
+                  })}
+                  {showRowStats && rowStat && (
+                    <>
+                      <View style={[styles.cell, { width: 120 }]}>
+                        <Text style={styles.cellQuantity}>{rowStat.sumQuantity}</Text>
+                        <Text style={styles.cellAmount}>€{rowStat.sumAmount.toFixed(2)}</Text>
+                      </View>
+                      <View style={[styles.cell, { width: 120 }]}>
+                        <Text style={styles.cellQuantity}>{rowStat.meanQuantity.toFixed(1)}</Text>
+                        <Text style={styles.cellAmount}>€{rowStat.meanAmount.toFixed(2)}</Text>
+                      </View>
+                    </>
+                  )}
+                </View>
+              );
+            })}
+
+            {/* Column Statistics (Sum/Mean rows) */}
+            {showColumnStats && columnStats && (
+              <>
+                <View style={[styles.row, styles.statsRow]}>
+                  <View style={[styles.cell, { width: rowLabelWidth }]}>
+                    <Text style={styles.statsLabel}>Sum</Text>
+                  </View>
+                  {columns.map((column, colIndex) => {
+                    const stat = columnStats[colIndex];
+                    return (
+                      <View key={column.key} style={[styles.cell, { width: column.width || 150 }]}>
+                        <Text style={styles.cellQuantity}>{stat?.sumQuantity || 0}</Text>
+                        <Text style={styles.cellAmount}>€{stat?.sumAmount.toFixed(2) || '0.00'}</Text>
+                      </View>
+                    );
+                  })}
+                  {showRowStats && (
+                    <>
+                      <View style={[styles.cell, { width: 120 }]} />
+                      <View style={[styles.cell, { width: 120 }]} />
+                    </>
+                  )}
+                </View>
+                <View style={[styles.row, styles.statsRow]}>
+                  <View style={[styles.cell, { width: rowLabelWidth }]}>
+                    <Text style={styles.statsLabel}>Mean</Text>
+                  </View>
+                  {columns.map((column, colIndex) => {
+                    const stat = columnStats[colIndex];
+                    return (
+                      <View key={column.key} style={[styles.cell, { width: column.width || 150 }]}>
+                        <Text style={styles.cellQuantity}>{stat?.meanQuantity.toFixed(1) || '0.0'}</Text>
+                        <Text style={styles.cellAmount}>€{stat?.meanAmount.toFixed(2) || '0.00'}</Text>
+                      </View>
+                    );
+                  })}
+                  {showRowStats && (
+                    <>
+                      <View style={[styles.cell, { width: 120 }]} />
+                      <View style={[styles.cell, { width: 120 }]} />
+                    </>
+                  )}
+                </View>
+              </>
+            )}
+          </ScrollView>
+        </View>
+      </ScrollView>
+
+      {/* Pagination */}
+      {pagination !== false && pagination && (
+        <View style={styles.paginationContainer}>
+          <Pagination
+            totalCount={`${pagination.total} items`}
+            pageParams={{
+              page: pagination.current,
+              pageSize: pagination.pageSize,
+              totalItems: pagination.total,
+              totalPage: Math.ceil(pagination.total / pagination.pageSize),
+            }}
+            onPageChange={(params) => {
+              pagination.onChange?.(params.page, params.pageSize);
+            }}
+          />
+        </View>
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: '#FFFFFF',
+    borderRadius: 8,
+    overflow: 'hidden',
+  },
+  header: {
+    flexDirection: 'row',
+    backgroundColor: '#F5F5F5',
+    borderBottomWidth: 2,
+    borderBottomColor: '#E0E0E0',
+  },
+  headerCell: {
+    padding: 12,
+    borderRightWidth: 1,
+    borderRightColor: '#E0E0E0',
+    justifyContent: 'center',
+  },
+  headerText: {
+    fontSize: 14,
+    fontWeight: '600',
+    color: '#2C3E50',
+  },
+  row: {
+    flexDirection: 'row',
+    borderBottomWidth: 1,
+    borderBottomColor: '#F0F0F0',
+    backgroundColor: '#FFFFFF',
+  },
+  statsRow: {
+    backgroundColor: '#F9F9F9',
+  },
+  cell: {
+    padding: 12,
+    justifyContent: 'center',
+    borderRightWidth: 1,
+    borderRightColor: '#F0F0F0',
+  },
+  rowLabel: {
+    fontSize: 14,
+    fontWeight: '500',
+    color: '#2C3E50',
+  },
+  cellQuantity: {
+    fontSize: 14,
+    fontWeight: '500',
+    color: '#2C3E50',
+    marginBottom: 4,
+  },
+  cellAmount: {
+    fontSize: 12,
+    color: '#7F8C8D',
+  },
+  statsLabel: {
+    fontSize: 14,
+    fontWeight: '600',
+    color: '#2C3E50',
+  },
+  loadingRow: {
+    padding: 40,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  emptyRow: {
+    padding: 40,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  emptyText: {
+    fontSize: 14,
+    color: '#999',
+  },
+  paginationContainer: {
+    padding: 16,
+    borderTopWidth: 1,
+    borderTopColor: '#E0E0E0',
+    backgroundColor: '#FAFAFA',
+  },
+});
+

package/components/StatisticsTable/index.tsx

@@ -0,0 +1,7 @@
+export { StatisticsTable } from './StatisticsTable';
+export type { 
+  StatisticsTableProps, 
+  StatisticsTableColumn, 
+  StatisticsTableCell 
+} from './StatisticsTable';
+

package/components/index.tsx

@@ -175,6 +175,8 @@ export { DataTable } from "./DataTable";
 export type { DataTableProps, DataTableColumn } from "./DataTable";
 export { StatisticCard } from "./StatisticCard";
 export type { StatisticCardProps } from "./StatisticCard";
+export { StatisticsTable } from "./StatisticsTable";
+export type { StatisticsTableProps, StatisticsTableColumn, StatisticsTableCell } from "./StatisticsTable";
 
 // 工具函数
 export { isMobile, capitalizeFirstLetter } from "./common";