Графики на Admin-на-отдыхе

Question

Мне нужно сделать веб-страницу, чтобы закончить мой универ, и я на 90% сделал с этим, однако, я изо всех сил пытаюсь заставить работать собственные итераторы и диаграммы. Я пытаюсь использовать Recharts, но я понятия не имею, как заставить его собирать информацию, которую я хочу (мне нужно, чтобы получить количество зарегистрированных пользователей и количество вакцин, которые они приняли), но все, что я вижу в документации, готово результаты, я не уверен, что ChartJS сделает это лучше, и даже если это произойдет, я запутался в том, как работают пользовательские итераторы, так как я взял свой "Analytics" из другого вопроса StackOverflow, однако это меньше всего меня беспокоит, так как это кажется быть проще, чем заставить НАСТОЯЩИЕ графики работать. Помощь была бы признательна, так как у меня есть 2 недели, чтобы доставить ее, и я застрял на этом, и это важно, я заставлю это работать.

О да, я тоже очень плох в Javascript, поэтому любая информация приветствуется.

РЕДАКТИРОВАТЬ: Забыл сказать, что я осмотрелся, но многие из них предназначены для более простых и статичных вещей вместо подсчета в базе данных или тому подобного.

Answer 1

Добро пожаловать на SO.

1) Recharts хочет массив, который он должен перебирать и отображать.Поэтому я обычно делаю компонент Chart дочерним по отношению к компоненту List.2) Я использую фильтр на странице «Список», чтобы выбрать различные компоненты диаграммы, когда пользователь выбирает разные варианты из выпадающего списка (в случае, если на вашей странице аналитики должны отображаться разные диаграммы на одной и той же странице)к JS, но это довольно просто, если вы хотите попасть в него.3) Я думаю, что для вас лучше всего будет создавать разные компоненты и ресурсы Списка для каждой страницы и просто отображать разные диаграммы на их собственной странице.

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

вот как компонент Analytics равен

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

Надеюсь, это поможет.