Charts on Admin-on-rest

Question

I need to do a webpage to finish my uni, and im about 90% done with it, however, im struggling with getting custom Iterators and Charts to work. Im trying to use Recharts, but i have no idea on how to make it gather the info i want (I need it to get the number of users registered and the number of vaccines they took), but all i see on the documentation is ready results, im not sure if ChartJS will make it any better, and even if it does, im confused on how custom iterators work since i took my "Analytics" one from another StackOverflow question, however that's the least of my worries, since this seems to be simplier than getting the ACTUAL charts to work. Help would be appreciated since i have 2 weeks to deliver it and im stuck on that, and its CRUCIAL i get that to work.

Oh yes, im also very bad at Javascript so every info is welcome.

EDIT:Forgot to say i've looked around but lots of them are for simplier and static stuff instead of database counts or stuff like that.

score 1 · Accepted Answer · answered Nov 13 '18 at 08:53

Welcome to SO.

1) Recharts wants an array that it needs to iterate over and display. So what I usually do is make the Chart Component a child of a List component. 2) I use the Filter on the List page to select different chart components when the user selects different options from the dropdown (in case your analytics page needs to show different charts from the same page) ^^this is a bit tricky for peeps new to JS but is quite straightforward if you want to get into it. 3) For you i think the best bet will be that you make different List components and resources for each page and just display different charts on their own page.

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

here is how the Analytics Component is

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>
  );
}

Hope this helps.

Charts on Admin-on-rest

1 Answers1