CODEWITHSUNDEEP
javascriptreactjs
nipy
nipy

Reputation: 5498

How to use remote data in React-Vis example

I'm very new to React and working on this example.

I've modified one of the example charts from react-vis and have it working with my local data:

This is my plotBar.js file:

import React from "react"

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

const data = [
  { id: "ransomware", count: 413 },
  { id: "phishing", count: 368 },
  { id: "apt", count: 303 },
  { id: "trojans", count: 183 },
  { id: "viruses", count: 137 },
  { id: "backdoors", count: 101 },
  { id: "dos", count: 100 },
  { id: "social engineering", count: 75 },
  { id: "insider threat", count: 71 },
  { id: "payloads", count: 66 },
]

const dataUpdated = data.map(s => ({
  x: s.id,
  y: s.count,
}))

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

This is my MyComp.js file and you can see the Example function JSX used below:

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 (
    <ul>
      <Example />
      {list.map(container => (
        <li className="container">
          <ul>
            {container.map(item => (
              <li key={item.id}>
                {item.count} {item.id}
              </li>
            ))}
          </ul>
        </li>
      ))}
    </ul>
  )
}

export default MyComp

The list array data is currently mapping into some <li> tag.

How do I map this list array data:

{list.map(container => (
        <li className="container">
          <ul>
            {container.map(item => (
              <li key={item.id}>
                {item.count} {item.id}

...into the <Example /> JSX in the MyComp function please so it shows on the chart as my local data does?

chart1

Upvotes: 1

Views: 298

Answers (1)

HMR
HMR

Reputation: 39320

I think something like this should work:

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

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

Upvotes: 1

Related Questions