CODEWITHSUNDEEP
reactjsadmin-on-rest
Rafael Pauwels
Rafael Pauwels

Reputation: 43

How can I make use of REST with <Resource ...> for a custom page

When I want to display a list on admin-on-rest I add something like

<Admin restClient={rest}>
    <Resource name="users" list={userList}>
</Admin>

and this handles the GET requesition to my http://localhost/users API and inside the userList.js I handle the data with something like <Datagrid />

The question is, how can I use this scructure to write a custom page which display charts with recharts, it is not a list (I think) nor does it match any of the other components inside the resource tag, I read some of the admin-on-rest source but since I'm just a beginner I'm finding it really hard to understand where to begin or what should I use to do this. Should I write a custom tag or the list (being it the R from CRUD) can handle this problem?

From what I gathered from source the list tag renders a list from default, can I draw a chart inside it? If I can do it and it's not a bad thing to do, how can I handle the data since Recharts charts expects an array and I have no idea how to even deal with the data in a way different from <Datagrid>

I tried writing a custom page using fetch to get the data but it didn't really work (probably because I don't understand fully where or how I should do it), couldn't really find a noob-friendly example and in my belief would be better to keep all my pages having the same building structure.

PS.: I'm an almost complete noob when the matter is web, please be forgiving.

Upvotes: 0

Views: 327

Answers (1)

kunal pareek
kunal pareek

Reputation: 1283

Recharts is surprisingly simple to integrate.

Recharts are all essentially like a datagrid. They are iterator components. Read more about them below https://marmelab.com/admin-on-rest/List.html#using-a-custom-iterator

Here is a chart component I wrote

import React from 'react';
import {BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend} from 'recharts';

export const Analytics = (props) => {
    return (
      <BarChart width={800} height={400} data={Object.values(props.data)} margin={{top: 5, right: 30, left: 20, bottom: 5}}>
         <XAxis dataKey="name"/>
         <YAxis dataKey="charLimit" />
         <CartesianGrid strokeDasharray="3 3"/>
         <Tooltip/>
         <Legend />
         <Bar dataKey="charLimit" fill="#82ca9d" />
      </BarChart>
  );
}

This was the component that was displaying the above component. 

import React from 'react';
import {
  List
} from 'admin-on-rest'
import {Analytics} from '../PublisherComponents/Analytics' //importing the above component here

export const AnalyticsList = (props) => {
  return (
    <List title="Analytics" {...props} perPage={20} sort={{ field: 'id', order: 'ASC' }}>
      <Analytics />
    </List>
  )
}

Upvotes: 1

Related Questions