Генерация стиля grid-контейнера при отображении через массив

Question

Сводка

У меня есть следующее изображение диаграммы (реагирующий):

My Код React (ниже) создает его с помощью map через массив. Как мне изменить код так, чтобы диаграммы go по всей странице содержались в какой-то жидкой обертке, например:

На что я смотрел / пробовал?

У меня есть базовое c понимание HTML и CSS, но я не знал бы, как подойти к такого рода задачам и изменить код.

Нужно ли мне использовать что-то подобное и интегрировать с приведенным выше кодом?

<div class="grid-container">
  <div className="grid-item">1</div>
  <div className="grid-item">2</div>
  <div className="grid-item">3</div>
  <div className="grid-item">4</div>
</div>

Я хотел бы понять эффективный способ сделать это, используя CSS, bootstrap или что-то еще, что будет считаться лучшей практикой.

Код:

MyComp. js

import React, { useState, useEffect } from "react"
import Example from "./plotBar.js"

function getJson() {
  return fetch("http://secstat.info/testthechartdata3.json")
    .then(response => response.json())
    .catch(error => {
      console.error(error)
    })
}

const MyComp = () => {
  const [list, setList] = useState([])

  useEffect(() => {
    getJson().then(list => setList(list))
  }, [])

  return (
    <div>
      {list.map((data, index) => (
        <Example
          key={index}
          data={data.map(({ id, count }) => ({
            x: id,
            y: count,
          }))}
        />
      ))}
    </div>
  )
}

export default MyComp

plotBar. js

import React from "react"

import {
  XYPlot,
  XAxis,
  YAxis,
  VerticalGridLines,
  HorizontalGridLines,
  VerticalBarSeries,
} from "react-vis"

export default function Example({ data }) {
  return (
    <XYPlot margin={{ bottom: 70 }} xType="ordinal" width={300} height={300}>
      <VerticalGridLines />
      <HorizontalGridLines />
      <XAxis tickLabelAngle={-45} />
      <YAxis />
      <VerticalBarSeries data={data} />
    </XYPlot>
  )
}

Данные выглядят так:

URL для JSON

http://secstat.info/testthechartdata3.json

Answer 1

Вы должны прочитать о flex и flex-flow, после этого он просто применяет незначительный стиль, это пример CSS -in- JS:

const Item = styled(Example)``;

const Container = styled.div`
  display: flex;
  flex-flow: row wrap;
  background: lightgray;
  padding: 0.5rem;
  ${Item} {
    margin: 0.5rem;
    padding: 1rem;
    background: white;
  }
`;

---

const Item = styled(Example)``;

const Container = styled.div`
  display: flex;
  flex-flow: row wrap;
  background: lightgray;
  padding: 0.5rem;
  ${Item} {
    margin: 0.5rem;
    padding: 1rem;
    background: white;
  }
`;

export default function Example({ data, className }) {
  return (
    <XYPlot className={className} xType="ordinal" width={200} height={200}>
      <VerticalGridLines />
      <HorizontalGridLines />
      <XAxis tickLabelAngle={-45} />
      <YAxis />
      <VerticalBarSeries data={data} />
    </XYPlot>
  );
}

const list = // fetch on mount

const MyComp = () => {
  return (
    <Container>
      {list.map((data, index) => (
        <Item
          key={index}
          data={data.map(({ id, count }) => ({
            x: id,
            y: count,
          }))}
        />
      ))}
    </Container>
  );
};