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

Question

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

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

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

Answer 1

Добро пожаловать в ТАК.

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

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