如何将数据推送到仪表板以便能够在 react-admin 中创建图表？

Question

我有一个基本的dashboard.js，它在 React-admin 的教程中。

import React from 'react';
import Card from '@material-ui/core/Card';
import CardContent from '@material-ui/core/CardContent';
import CardHeader from '@material-ui/core/CardHeader';

export default () => (
    <Card>
        <CardHeader title="Welcome to the administration" />
        <CardContent>Juhejj ez is mukodik!</CardContent>
    </Card>
);

我在哪里可以找到有关如何将来自我的 App.js < Resource >（来自我的 Rest API）的数据推送到仪表板的文档？

我想在我的管理仪表板上创建小部件、图表，但到目前为止我发现的所有内容都是关于在 dashboard.js 中创建一个包含虚假数据的简单仪表板。

const data = [{ bla: 1, bla2: 2 }];

我的 App.js 看起来像这样：

import React from 'react';
import { Admin, Resource, mergeTranslations, ListGuesser } from 'react-admin';
import { AdList } from './ads/AdsList';
import { AdEdit } from './ads/AdsEdit';
import { PostCreate } from './ads/posts';
import { LeadList } from './leads/leads';
import { UserList, UserShow, UserEdit, UserCreate } from './users/users';
import { ClickList, ClickMonthly, ClicksmonthlyList } from './clicks/clicks';
import PostIcon from '@material-ui/icons/Book';
import UserIcon from '@material-ui/icons/Group';
import Dashboard from './dashboard/Dashboard';
import authProvider from './authprovider/authProvider';
import jsonServerProvider from './dataprovider/rest';
import { reducer as tree } from 'ra-tree-ui-materialui';
import englishMessages from 'ra-language-english';
import treeEnglishMessages from 'ra-tree-language-english';

const messages = {
    'en': mergeTranslations(englishMessages, treeEnglishMessages),
};

const dataProvider = jsonServerProvider('http://my.api.to/api/v1/');
const App = () => (
    <Admin dashboard={Dashboard} authProvider={authProvider} dataProvider={dataProvider} locale="en" messages={messages} customReducers={{ tree }}>
    {permissions => [
        <Resource name="ads" options={{ label: 'Hirdetések' }} list={AdList} edit={AdEdit} create={PostCreate} icon={PostIcon}/>,
        permissions === 'admin' ? <Resource name="users" options={{ label: 'Felhasználók' }} list={UserList} show={UserShow} edit={UserEdit} create={UserCreate} icon={UserIcon}/> : null,
        <Resource name="clicks" options={{ label: 'Legutóbbi kattintások' }} list={ClickList} />,
        <Resource name="clicksmonthly" options={{ label: 'Havi összesítés' }} list={ClicksmonthlyList} />,
        <Resource name="leads" options={{ label: 'Legutóbbi leadek' }} list={LeadList} />,
        <Resource name="sites" />

]}
    </Admin>
);

export default App;

Answer 1

有两种方法可以做到这一点：

一个是像我们官方demo (source)那样做的，我们直接调用dataProvider，没有使用redux。您可以像调用经典提取一样调用它（可能在您的 componentDidMount 中）。类似于：

dataProvider(GET_LIST, 'commands', {
    filter: { date_gte: aMonthAgo.toISOString() },
    sort: { field: 'date', order: 'DESC' },
    pagination: { page: 1, perPage: 50 },
})
    .then(response => {
        this.setState({ commands: response.data });
    });

这种方法的缺点是您必须自己处理错误、通知等。

另一种方法是使用 react-admin redux 动作创建者来做同样的事情，但利用它的副作用处理（错误通知等）。这一次，你必须让你的 <Dashboard> 成为一个连通分量：

import { connect } from 'react-redux';
import { crudGetList } from 'react-admin';

const mapStateToProps = state => {
    const commandState = state.admin.commands;

    // Is an object where keys are the commands identifiers
    // and the values are the command
    const commandsByIds = commandState.data;

    return {
        commands: Object.values(commandsByIds),
    }
}

const mapDispatchToProps = {
    crudGetList,
}

const ConnectedDashboard = connect(mapStateToProps, mapDispatchToProps)(Dashboard);

然后您也可以在 componentDidMount 中调用 crudGetList：

componentDidMount() {
    this.props.crudGetList(
        'commands', // resource name
        { page: 1, perPage: 50 }, // pagination
        { field: 'date', order: 'DESC' }, // sorting
        { date_gte: aMonthAgo.toISOString() } // filters
    );
}

最后的注释：

我们知道可以针对这些用例改进文档。好消息是我们很快就会让它变得更容易（可能在 2.8 版本中）：参见 https://github.com/marmelab/react-admin/pull/2899

如何将数据推送到仪表板以便能够在 react-admin 中创建图表？

How to push data feed to Dashboard to be able create charts on it in react-admin?

reactjs

react-admin