put data in d3 react

Question

hello I have a line graph where I should show dynamic data and if they do not pass me data that is just a straight line.

The problem I have is that I don't know how to pass the props to the line graph

var data `[
{
    "name": "Samantha White",
    "id": "484567489sda",
    "address": "4116 Barton Creek Boulevard Austin, TX 78735 USA",
    "logo": "https://sssssss.s3.amazonaws.com/ssss/express.png",
    "occupancy": {
      "capacity": 150,
      "occupancy": 0,
      "percentage": 0
    },
    "alerts": {
      "conglomerations": 0,
      "occupancy": 0
    },
    "visits": 2721
  "plot": []
  },
  {
    "name": "Jacqueline Wells",
    "id": "sdasdx45616a4dsa5",
    "address": "s15035 Highview Road Grand Junction, CO 81504 USA",
    "store_logo": "ssssss.s3.amazonaws.com/ssss/lider.png",
    "occupancy": {
      "capacity": 150,
      "occupancy": 0,
      "percentage": 0
    },
    "alerts": {
      "conglomerations": 0,
      "occupancy": 0
    },
    "visits": 2069,
    "plot": [9, 29, 48, 52, 88, 107, 130, 127, 122, 157, 165, 172, 211, 214, 267, 296, 331, 353, 371, 381]
  }
]`;

function App() {
  const [tiendas, setTiendas] = useState(JSON.parse(data));
  const [showTiendas, setShowTiendas] = useState(false)

  useEffect(() => {
    setTiendas(JSON.parse(data));
  }, []);


  return (
    <div className="w-full ">
      <Menu  showTiendas={setShowTiendas} menuData={tiendas} tiendasSet={setTiendas} />
      {showTiendas && tiendas.map((tienda) => (
        <Card key={Math.random()} {...tienda}></Card>
      ))}
    </div>
  );
}

export default App;

The data of the graph would be plot , within the card component I command to call the graph, this would be the code of the graph, I do not know how to send to call plot from the graph, right now the graph has random numbers

import React, { useState } from "react";
import { scaleLinear, scaleBand } from "d3-scale";
import Line from "./Line";
import { line, curveMonotoneX } from "d3-shape";
import { extent } from "d3-array";

function Chart(props) {
  const [data, setData] = useState(
    [
    Math.random()*30,
    Math.random()*30,
    Math.random()*30,
    Math.random()*30,
    Math.random()*30,
    Math.random()*30,
    Math.random()*30,
  ]
  );

  const parentWidth = 125;
  const margins = {
    top: 20,
    right: 20,
    bottom: 20,
    left: 20
  };

  const width = parentWidth - margins.left - margins.right;
  const height = 75 - margins.top - margins.bottom;

  const xScale = scaleBand()
    .domain(data.map(d => d))
    .rangeRound([0, width])
    .padding(0.1);

  const yScale = scaleLinear()
    .domain(extent(data, d => d))
    .range([height, 0])
    .nice();

  const lineGenerator = line()
    .x(d => xScale(d))
    .y(d => yScale(d))
    .curve(curveMonotoneX);
  return (
    <div>
      <svg
        className="lineChartSvg"
        width={width + margins.left + margins.right}
        height={height + margins.top + margins.bottom}
      >
        <g transform={`translate(${margins.left}, ${margins.top})`}>
          <Line
            data={data}
            xScale={xScale}
            yScale={yScale}
            lineGenerator={lineGenerator}
            width={width}
            height={height}
          />
        </g>
      </svg>
    </div>
  );
}
export default Chart;

Answer 1

I'm assuming that you component Chart is inside the Card component. First, you are doing this:

{showTiendas && tiendas.map((tienda) => (
    <Card key={Math.random()} {...tienda}></Card> 
))}

then, in the Card component you should have something like this:

function Card(props) {
    const { plot } = props;

    ...

    return (
        <Chart plot={plot}/> // you should pass the plot data to the Chart component like this
    )
    ...

and finally, in the Chart component you should be able to get the data from props just like this:

function Chart(props) {
    const { plot } = props;
    

Also, you are missing a comma in the first array object (before the plot attribute).

Answer 2

I don't really understand your code snippets, but you could pass your data to Charts in the same way that menu is.

<Chart data={data} />

Then within your Chart component you will be able to access that data via props.data