如何使用react-admin搭建数据统计分析看板？

该需求完全可以在react-admin框架下实现，框架的自定义自由度足以覆盖常规统计看板的开发需求，不需要依赖额外的专属集成工具，以下是具体实现方案：

react-admin支持添加任意自定义路由页面，不受内置资源页的限制，你可以直接新增独立的统计看板作为一级页面，也可以将统计模块嵌入现有资源页的指定位置。
配置独立统计页的示例代码如下：

// App.jsx 入口文件配置
import { Admin, Resource, CustomRoutes } from 'react-admin';
import { Route } from 'react-router-dom';
import { dataProvider } from './dataProvider'; // 你已配置好的dataProvider
import Dashboard from './Dashboard'; // 自定义统计看板组件
// 其他资源组件引入省略

const App = () => (
  <Admin dataProvider={dataProvider}>
    {/* 原有资源配置 */}
    <Resource name="posts" />
    <Resource name="users" />
    <Resource name="comments" />
    {/* 新增自定义统计页面路由 */}
    <CustomRoutes>
      <Route path="/dashboard" element={<Dashboard />} />
    </CustomRoutes>
    {/* 如需将统计页设为登录后默认首页，添加dashboard属性即可 */}
    {/* <Admin dataProvider={dataProvider} dashboard={Dashboard}> */}
  </Admin>
);

react-admin提供了官方钩子可以直接调用dataProvider的能力，不需要额外封装请求逻辑：

• 如果你需要分别拉取各资源的总数量，直接用useGetList钩子，仅拉取1条数据即可拿到接口返回的total总数值，不会浪费带宽拉取全量资源：

// Dashboard.jsx 统计页组件
import { useGetList, Card, CardContent, Typography, Loading } from 'react-admin';
import { Grid, Box } from '@mui/material';

const Dashboard = () => {
  // 拉取帖子总数
  const { total: postCount, isLoading: postLoading } = useGetList('posts', {
    pagination: { page: 1, perPage: 1 },
    filter: {}
  });
  // 拉取用户总数
  const { total: userCount, isLoading: userLoading } = useGetList('users', {
    pagination: { page: 1, perPage: 1 },
    filter: {}
  });
  // 拉取评论总数
  const { total: commentCount, isLoading: commentLoading } = useGetList('comments', {
    pagination: { page: 1, perPage: 1 },
    filter: {}
  });

  if (postLoading || userLoading || commentLoading) return <Loading />;

  return (
    <Box p={2}>
      <Typography variant="h4" mb={3}>数据概览</Typography>
      <Grid container spacing={3}>
        <Grid item xs={12} sm={4}>
          <Card>
            <CardContent>
              <Typography variant="body2" color="text.secondary">总帖子数</Typography>
              <Typography variant="h3">{postCount}</Typography>
            </CardContent>
          </Card>
        </Grid>
        <Grid item xs={12} sm={4}>
          <Card>
            <CardContent>
              <Typography variant="body2" color="text.secondary">总用户数</Typography>
              <Typography variant="h3">{userCount}</Typography>
            </CardContent>
          </Card>
        </Grid>
        <Grid item xs={12} sm={4}>
          <Card>
            <CardContent>
              <Typography variant="body2" color="text.secondary">总评论数</Typography>
              <Typography variant="h3">{commentCount}</Typography>
            </CardContent>
          </Card>
        </Grid>
      </Grid>
    </Box>
  );
};

export default Dashboard;

• 如果你的后端提供了聚合统计的专属接口，可以直接用useDataProvider钩子调用自定义方法，一次请求拿到所有统计数据：

import { useDataProvider, useNotify } from 'react-admin';
import { useState, useEffect } from 'react';

const Dashboard = () => {
  const dataProvider = useDataProvider();
  const notify = useNotify();
  const [stats, setStats] = useState(null);

  useEffect(() => {
    // 调用你在dataProvider中自定义的统计接口
    dataProvider.getAggregateStats()
      .then(res => setStats(res.data))
      .catch(() => notify('统计数据加载失败', { type: 'error' }));
  }, [dataProvider, notify]);

  // 渲染逻辑和上述一致
}

react-admin没有UI层的强制限制，你可以自由搭配任意可视化库实现复杂的图表展示：

• 基础的卡片、列表、筛选组件可以直接使用react-admin自带组件，或者其默认依赖的MUI组件库，无需额外安装依赖
• 如需实现折线图、柱状图、饼图等图表效果，直接接入Recharts、ECharts、Chart.js等通用可视化库即可，不存在适配障碍，拿到统计数据后直接传给图表组件即可渲染。

• 如果需要按时间、分类等维度筛选统计数据，直接使用react-admin自带的Filter组件获取筛选参数，传入useGetList的filter字段即可实现动态统计
• 权限控制可以直接复用react-admin的usePermissions钩子，不同角色的用户可以展示不同的统计模块
• 如需将统计模块嵌入现有资源列表页，直接重写对应资源的List组件头部，插入统计区块即可。

内容的提问来源于stack exchange，提问作者theKid