У меня возникают проблемы с синтаксическим анализом больших объектов JSON из моих вызовов Axios и установкой их в качестве состояния, которое затем будет передано как данные осей X и Y для построения графиков в react-chartist. В моем случае я рисую данные фондового рынка.

Я пытался проанализировать данные с помощью обработчиков состояний, chartData, но не могу заставить их работать, например response.data.symbol, response.data.adj_close и response.data.date

Я также попытался создать три разных состояния для X, Y и символьных данных, взятых непосредственно из вызова axios, но не смог этого сделать.

Вот код, который я использую:

export default function Graph() {
const [chartData, setChartData] = useState([])

    const getData = () => {
      axiosInstance
        .get('price/' + slug)
        .then(result => setChartData(result.data))
    }
    useEffect(() => {
        getData()
    }, [])


    const graphChart = () =>
    {
        var data = {
            
            labels: //date values from JSON object
            series: //adj_close values from JSON object
        };
        var options = {
            width: 500,
            height: 400
        };
        
        return (
                <ChartistGraph data={data} options={options} type="Line" />
        );
    };
     return (
         <Container>
             <Grid>
                 {graphChart()} 
             </Grid>
         </Container>

     );
};

Я неправильно подхожу к этому? Есть ли более простой способ сделать это?

Я добавил данные, чтобы воспроизвести проблему, которая в основном состоит в том, как я могу анализировать такие большие объекты? Имея в виду, что каждая строка должна быть сгруппирована по соответствующему symbol для построения графиков. В приведенных ниже данных представлены данные по 8 компаниям. Помещать все эти данные на график было бы плохо, но если бы я знал, как анализировать определенные символы, то я смог бы построить график самостоятельно.

[{"symbol":"PG","date":"2020-12-04","adj_close":137.47}, 
 {"symbol":"HSY","date":"2020-12-04","adj_close":150.87}, 
 {"symbol":"CLX","date":"2020-12-04","adj_close":199.98}, 
 {"symbol":"COST","date":"2020-12-04","adj_close":373.43}, 
 {"symbol":"MDLZ","date":"2020-12-04","adj_close":59.03}, 
 {"symbol":"K","date":"2020-12-04","adj_close":62.37}, 
 {"symbol":"KHC","date":"2020-12-04","adj_close":34.12}, 
 {"symbol":"PEP","date":"2020-12-04","adj_close":145.85}, 
 {"symbol":"PG","date":"2020-12-07","adj_close":137.68}, 
 {"symbol":"HSY","date":"2020-12-07","adj_close":149.72}, 
 {"symbol":"CLX","date":"2020-12-07","adj_close":200.61}, 
 {"symbol":"COST","date":"2020-12-07","adj_close":373.33}, 
 {"symbol":"MDLZ","date":"2020-12-07","adj_close":58.41}, 
 {"symbol":"K","date":"2020-12-07","adj_close":61.95}, 
 {"symbol":"KHC","date":"2020-12-07","adj_close":33.6}, 
 {"symbol":"PEP","date":"2020-12-07","adj_close":145.37}, 
 {"symbol":"PG","date":"2020-12-08","adj_close":138.05}, 
 {"symbol":"HSY","date":"2020-12-08","adj_close":150.63}, 
 {"symbol":"CLX","date":"2020-12-08","adj_close":202.88}, 
 {"symbol":"COST","date":"2020-12-08","adj_close":377.6}, 
 {"symbol":"MDLZ","date":"2020-12-08","adj_close":58.29}, 
 {"symbol":"K","date":"2020-12-08","adj_close":62.55}, 
 {"symbol":"KHC","date":"2020-12-08","adj_close":34.34}, 
 {"symbol":"PEP","date":"2020-12-08","adj_close":145.52}, 
 {"symbol":"PG","date":"2020-12-09","adj_close":136.41}, 
 {"symbol":"HSY","date":"2020-12-09","adj_close":152.14}, 
 {"symbol":"CLX","date":"2020-12-09","adj_close":200.51}, 
 {"symbol":"COST","date":"2020-12-09","adj_close":374.29}, 
 {"symbol":"MDLZ","date":"2020-12-09","adj_close":57.72}, 
 {"symbol":"K","date":"2020-12-09","adj_close":62}, 
 {"symbol":"KHC","date":"2020-12-09","adj_close":34.22}, 
 {"symbol":"PEP","date":"2020-12-09","adj_close":145.69}, 
 {"symbol":"PG","date":"2020-12-10","adj_close":135.51}, 
 {"symbol":"HSY","date":"2020-12-10","adj_close":149.7}, 
 {"symbol":"CLX","date":"2020-12-10","adj_close":200.6}, 
 {"symbol":"COST","date":"2020-12-10","adj_close":372.79}, 
 {"symbol":"MDLZ","date":"2020-12-10","adj_close":57.18}, 
 {"symbol":"K","date":"2020-12-10","adj_close":61.98}, 
 {"symbol":"KHC","date":"2020-12-10","adj_close":34.1}, 
 {"symbol":"PEP","date":"2020-12-10","adj_close":144.67}, 
 {"symbol":"PG","date":"2020-12-11","adj_close":136.51}, 
 {"symbol":"HSY","date":"2020-12-11","adj_close":149.11}, 
 {"symbol":"CLX","date":"2020-12-11","adj_close":201.73}, 
 {"symbol":"COST","date":"2020-12-11","adj_close":375.1}, 
 {"symbol":"MDLZ","date":"2020-12-11","adj_close":57.4}, 
 {"symbol":"K","date":"2020-12-11","adj_close":62.11}, 
 {"symbol":"KHC","date":"2020-12-11","adj_close":34.07}, 
 {"symbol":"PEP","date":"2020-12-11","adj_close":144.97}, 
 {"symbol":"PG","date":"2020-12-14","adj_close":135.85}, 
 {"symbol":"HSY","date":"2020-12-14","adj_close":149.14}, 
 {"symbol":"CLX","date":"2020-12-14","adj_close":202.38}, 
 {"symbol":"COST","date":"2020-12-14","adj_close":374.38}, 
 {"symbol":"MDLZ","date":"2020-12-14","adj_close":57.29}, 
 {"symbol":"K","date":"2020-12-14","adj_close":61.92}, 
 {"symbol":"KHC","date":"2020-12-14","adj_close":34.42}, 
 {"symbol":"PEP","date":"2020-12-14","adj_close":144.23}, 
 {"symbol":"PG","date":"2020-12-15","adj_close":136.65}, 
 {"symbol":"HSY","date":"2020-12-15","adj_close":150.23}, 
 {"symbol":"CLX","date":"2020-12-15","adj_close":203.04}, 
 {"symbol":"COST","date":"2020-12-15","adj_close":371.88}, 
 {"symbol":"MDLZ","date":"2020-12-15","adj_close":57.45}, 
 {"symbol":"K","date":"2020-12-15","adj_close":61.24}, 
 {"symbol":"KHC","date":"2020-12-15","adj_close":34.33}, 
 {"symbol":"PEP","date":"2020-12-15","adj_close":144.77}, 
 {"symbol":"PG","date":"2020-12-16","adj_close":137.27}, 
 {"symbol":"HSY","date":"2020-12-16","adj_close":150.28}, 
 {"symbol":"CLX","date":"2020-12-16","adj_close":203.44}, 
 {"symbol":"COST","date":"2020-12-16","adj_close":369.44}, 
 {"symbol":"MDLZ","date":"2020-12-16","adj_close":57.2}, 
 {"symbol":"K","date":"2020-12-16","adj_close":61.5}, 
 {"symbol":"KHC","date":"2020-12-16","adj_close":34.43}, 
 {"symbol":"PEP","date":"2020-12-16","adj_close":144.89}, 
 {"symbol":"PG","date":"2020-12-17","adj_close":138.25}, 
 {"symbol":"HSY","date":"2020-12-17","adj_close":151.61}, 
 {"symbol":"CLX","date":"2020-12-17","adj_close":202.34}, 
 {"symbol":"COST","date":"2020-12-17","adj_close":370.29}, 
 {"symbol":"MDLZ","date":"2020-12-17","adj_close":57.93}, 
 {"symbol":"K","date":"2020-12-17","adj_close":62.48}, 
 {"symbol":"KHC","date":"2020-12-17","adj_close":34.62}, 
 {"symbol":"PEP","date":"2020-12-17","adj_close":145.71}, 
 {"symbol":"PG","date":"2020-12-18","adj_close":139.04}, 
 {"symbol":"HSY","date":"2020-12-18","adj_close":150.88}, 
 {"symbol":"CLX","date":"2020-12-18","adj_close":203.17}, 
 {"symbol":"COST","date":"2020-12-18","adj_close":367}, 
 {"symbol":"MDLZ","date":"2020-12-18","adj_close":58.32}, 
 {"symbol":"K","date":"2020-12-18","adj_close":62.08}, 
 {"symbol":"KHC","date":"2020-12-18","adj_close":34.77}, 
 {"symbol":"PEP","date":"2020-12-18","adj_close":146.93}, 
 {"symbol":"PG","date":"2020-12-21","adj_close":137.52}, 
 {"symbol":"HSY","date":"2020-12-21","adj_close":149.66}, 
 {"symbol":"CLX","date":"2020-12-21","adj_close":202.45}, 
 {"symbol":"COST","date":"2020-12-21","adj_close":364.97}, 
 {"symbol":"MDLZ","date":"2020-12-21","adj_close":57.68}, 
 {"symbol":"K","date":"2020-12-21","adj_close":61.53}, 
 {"symbol":"KHC","date":"2020-12-21","adj_close":34.57}, 
 {"symbol":"PEP","date":"2020-12-21","adj_close":145.4}, 
 {"symbol":"PG","date":"2020-12-22","adj_close":136.55}, 
 {"symbol":"HSY","date":"2020-12-22","adj_close":148.62}, 
 {"symbol":"CLX","date":"2020-12-22","adj_close":201.39}, 
 {"symbol":"COST","date":"2020-12-22","adj_close":362.03}, 
 {"symbol":"MDLZ","date":"2020-12-22","adj_close":57.16}, 
 {"symbol":"K","date":"2020-12-22","adj_close":61.19}, 
 {"symbol":"KHC","date":"2020-12-22","adj_close":34.39}, 
 {"symbol":"PEP","date":"2020-12-22","adj_close":144.02}, 
 {"symbol":"PG","date":"2020-12-23","adj_close":136.34}, 
 {"symbol":"HSY","date":"2020-12-23","adj_close":149.45}, 
 {"symbol":"CLX","date":"2020-12-23","adj_close":202.33}, 
 {"symbol":"COST","date":"2020-12-23","adj_close":361.89}, 
 {"symbol":"MDLZ","date":"2020-12-23","adj_close":57.35}, 
 {"symbol":"K","date":"2020-12-23","adj_close":61.61}, 
 {"symbol":"KHC","date":"2020-12-23","adj_close":34.8}, 
 {"symbol":"PEP","date":"2020-12-23","adj_close":144.41}, 
 {"symbol":"PG","date":"2020-12-24","adj_close":137.72}, 
 {"symbol":"HSY","date":"2020-12-24","adj_close":149.95}, 
 {"symbol":"CLX","date":"2020-12-24","adj_close":203.8}, 
 {"symbol":"COST","date":"2020-12-24","adj_close":364.58}, 
 {"symbol":"MDLZ","date":"2020-12-24","adj_close":57.85}, 
 {"symbol":"K","date":"2020-12-24","adj_close":61.78}, 
 {"symbol":"KHC","date":"2020-12-24","adj_close":34.98}, 
 {"symbol":"PEP","date":"2020-12-24","adj_close":145.06}, 
 {"symbol":"PG","date":"2020-12-28","adj_close":138.68}, 
 {"symbol":"HSY","date":"2020-12-28","adj_close":151.8}, 
 {"symbol":"CLX","date":"2020-12-28","adj_close":202.25}, 
 {"symbol":"COST","date":"2020-12-28","adj_close":371.06}, 
 {"symbol":"MDLZ","date":"2020-12-28","adj_close":58.27}, 
 {"symbol":"K","date":"2020-12-28","adj_close":62.34}, 
 {"symbol":"KHC","date":"2020-12-28","adj_close":35.21}, 
 {"symbol":"PEP","date":"2020-12-28","adj_close":146.91}, 
 {"symbol":"PG","date":"2020-12-29","adj_close":138.42}, 
 {"symbol":"HSY","date":"2020-12-29","adj_close":151.44}, 
 {"symbol":"CLX","date":"2020-12-29","adj_close":201.76}, 
 {"symbol":"COST","date":"2020-12-29","adj_close":372.72}, 
 {"symbol":"MDLZ","date":"2020-12-29","adj_close":58.45}, 
 {"symbol":"K","date":"2020-12-29","adj_close":62.29}, 
 {"symbol":"KHC","date":"2020-12-29","adj_close":34.9}, 
 {"symbol":"PEP","date":"2020-12-29","adj_close":147.42}, 
 {"symbol":"PG","date":"2020-12-30","adj_close":137.77}, 
 {"symbol":"HSY","date":"2020-12-30","adj_close":150.53}, 
 {"symbol":"CLX","date":"2020-12-30","adj_close":201.04}, 
 {"symbol":"COST","date":"2020-12-30","adj_close":374.45}, 
 {"symbol":"MDLZ","date":"2020-12-30","adj_close":58}, 
 {"symbol":"K","date":"2020-12-30","adj_close":61.53}, 
 {"symbol":"KHC","date":"2020-12-30","adj_close":34.67}, 
 {"symbol":"PEP","date":"2020-12-30","adj_close":147.31}, 
 {"symbol":"PG","date":"2020-12-31","adj_close":139.14}, 
 {"symbol":"HSY","date":"2020-12-31","adj_close":152.33}, 
 {"symbol":"CLX","date":"2020-12-31","adj_close":201.92}, 
 {"symbol":"COST","date":"2020-12-31","adj_close":376.78}, 
 {"symbol":"MDLZ","date":"2020-12-31","adj_close":58.47}, 
 {"symbol":"K","date":"2020-12-31","adj_close":62.23}, 
 {"symbol":"KHC","date":"2020-12-31","adj_close":34.66}, 
 {"symbol":"PEP","date":"2020-12-31","adj_close":148.3}, 
 {"symbol":"PG","date":"2021-01-04","adj_close":137.82}, 
 {"symbol":"HSY","date":"2021-01-04","adj_close":150.9}, 
 {"symbol":"CLX","date":"2021-01-04","adj_close":200.44}, 
 {"symbol":"COST","date":"2021-01-04","adj_close":380.15}, 
 {"symbol":"MDLZ","date":"2021-01-04","adj_close":57.92}, 
 {"symbol":"K","date":"2021-01-04","adj_close":61.45}, 
 {"symbol":"KHC","date":"2021-01-04","adj_close":34.23}, 
 {"symbol":"PEP","date":"2021-01-04","adj_close":144.27}, 
 {"symbol":"PG","date":"2021-01-05","adj_close":138.7}, 
 {"symbol":"HSY","date":"2021-01-05","adj_close":150.73}, 
 {"symbol":"CLX","date":"2021-01-05","adj_close":200.01}, 
 {"symbol":"COST","date":"2021-01-05","adj_close":375.74}, 
 {"symbol":"MDLZ","date":"2021-01-05","adj_close":57.98}, 
 {"symbol":"K","date":"2021-01-05","adj_close":61.8}, 
 {"symbol":"KHC","date":"2021-01-05","adj_close":33.57}, 
 {"symbol":"PEP","date":"2021-01-05","adj_close":144.7}, 
 {"symbol":"PG","date":"2021-01-06","adj_close":140.16}, 
 {"symbol":"HSY","date":"2021-01-06","adj_close":151.26}, 
 {"symbol":"CLX","date":"2021-01-06","adj_close":197.41}, 
 {"symbol":"COST","date":"2021-01-06","adj_close":370.02}, 
 {"symbol":"MDLZ","date":"2021-01-06","adj_close":57.87}, 
 {"symbol":"K","date":"2021-01-06","adj_close":61.32}, 
 {"symbol":"KHC","date":"2021-01-06","adj_close":33.94}, 
 {"symbol":"PEP","date":"2021-01-06","adj_close":142.93}, 
 {"symbol":"PG","date":"2021-01-07","adj_close":138.85}, 
 {"symbol":"HSY","date":"2021-01-07","adj_close":151.17}, 
 {"symbol":"CLX","date":"2021-01-07","adj_close":196.43}, 
 {"symbol":"COST","date":"2021-01-07","adj_close":367.92}, 
 {"symbol":"MDLZ","date":"2021-01-07","adj_close":57.76}, 
 {"symbol":"K","date":"2021-01-07","adj_close":60.89}, 
 {"symbol":"KHC","date":"2021-01-07","adj_close":33.695}, 
 {"symbol":"PEP","date":"2021-01-07","adj_close":142.47}, 
 {"symbol":"PG","date":"2021-01-08","adj_close":138.79}, 
 {"symbol":"HSY","date":"2021-01-08","adj_close":152.03}, 
 {"symbol":"CLX","date":"2021-01-08","adj_close":197.84}, 
 {"symbol":"COST","date":"2021-01-08","adj_close":369.94}, 
 {"symbol":"MDLZ","date":"2021-01-08","adj_close":58.19}, 
 {"symbol":"K","date":"2021-01-08","adj_close":60.2}, 
 {"symbol":"KHC","date":"2021-01-08","adj_close":33.62}, 
 {"symbol":"PEP","date":"2021-01-08","adj_close":144.18}, 
 {"symbol":"PG","date":"2021-01-11","adj_close":137.85}, 
 {"symbol":"HSY","date":"2021-01-11","adj_close":150.11}, 
 {"symbol":"CLX","date":"2021-01-11","adj_close":193.73}, 
 {"symbol":"COST","date":"2021-01-11","adj_close":364.01}, 
 {"symbol":"MDLZ","date":"2021-01-11","adj_close":57.09}, 
 {"symbol":"K","date":"2021-01-11","adj_close":59.37}, 
 {"symbol":"KHC","date":"2021-01-11","adj_close":32.85}, 
 {"symbol":"PEP","date":"2021-01-11","adj_close":142.09}, 
 {"symbol":"PG","date":"2021-01-12","adj_close":137.05}, 
 {"symbol":"HSY","date":"2021-01-12","adj_close":149.38}, 
 {"symbol":"CLX","date":"2021-01-12","adj_close":194.24}, 
 {"symbol":"COST","date":"2021-01-12","adj_close":364.2}, 
 {"symbol":"MDLZ","date":"2021-01-12","adj_close":57.32}, 
 {"symbol":"K","date":"2021-01-12","adj_close":58.56}, 
 {"symbol":"KHC","date":"2021-01-12","adj_close":32.18}, 
 {"symbol":"PEP","date":"2021-01-12","adj_close":141.43}, 
 {"symbol":"PG","date":"2021-01-13","adj_close":137.26}, 
 {"symbol":"HSY","date":"2021-01-13","adj_close":149.92}, 
 {"symbol":"CLX","date":"2021-01-13","adj_close":193.74}, 
 {"symbol":"COST","date":"2021-01-13","adj_close":366.95}, 
 {"symbol":"MDLZ","date":"2021-01-13","adj_close":57.37}, 
 {"symbol":"K","date":"2021-01-13","adj_close":59.14}, 
 {"symbol":"KHC","date":"2021-01-13","adj_close":32.01}, 
 {"symbol":"PEP","date":"2021-01-13","adj_close":142.59}, 
 {"symbol":"PG","date":"2021-01-14","adj_close":135.8}, 
 {"symbol":"HSY","date":"2021-01-14","adj_close":147.42}, 
 {"symbol":"CLX","date":"2021-01-14","adj_close":195.55}, 
 {"symbol":"COST","date":"2021-01-14","adj_close":362.35}, 
 {"symbol":"MDLZ","date":"2021-01-14","adj_close":57.31}, 
 {"symbol":"K","date":"2021-01-14","adj_close":59.05}, 
 {"symbol":"KHC","date":"2021-01-14","adj_close":32.08}, 
 {"symbol":"PEP","date":"2021-01-14","adj_close":141.76}, 
 {"symbol":"PG","date":"2021-01-15","adj_close":134.78}, 
 {"symbol":"HSY","date":"2021-01-15","adj_close":148.46}, 
 {"symbol":"CLX","date":"2021-01-15","adj_close":197.52}, 
 {"symbol":"COST","date":"2021-01-15","adj_close":362.16}, 
 {"symbol":"MDLZ","date":"2021-01-15","adj_close":57.22}, 
 {"symbol":"K","date":"2021-01-15","adj_close":59.03}, 
 {"symbol":"KHC","date":"2021-01-15","adj_close":31.99}, 
 {"symbol":"PEP","date":"2021-01-15","adj_close":141.39}, 
 {"symbol":"PG","date":"2021-01-15","adj_close":134.78}, 
 {"symbol":"HSY","date":"2021-01-15","adj_close":148.46}, 
 {"symbol":"CLX","date":"2021-01-15","adj_close":197.52}, 
 {"symbol":"COST","date":"2021-01-15","adj_close":362.16}, 
 {"symbol":"MDLZ","date":"2021-01-15","adj_close":57.22}, 
 {"symbol":"K","date":"2021-01-15","adj_close":59.03}, 
 {"symbol":"KHC","date":"2021-01-15","adj_close":31.99}, 
 {"symbol":"PEP","date":"2021-01-15","adj_close":141.39}, 
 {"symbol":"PG","date":"2021-01-19","adj_close":133.6}, 
 {"symbol":"HSY","date":"2021-01-19","adj_close":148.75}, 
 {"symbol":"CLX","date":"2021-01-19","adj_close":196.51}, 
 {"symbol":"COST","date":"2021-01-19","adj_close":354.47}, 
 {"symbol":"MDLZ","date":"2021-01-19","adj_close":57.14}, 
 {"symbol":"K","date":"2021-01-19","adj_close":58.46}, 
 {"symbol":"KHC","date":"2021-01-19","adj_close":32.36}, 
 {"symbol":"PEP","date":"2021-01-19","adj_close":142.06}, 
 {"symbol":"PG","date":"2021-01-20","adj_close":131.93}, 
 {"symbol":"HSY","date":"2021-01-20","adj_close":149.63}, 
 {"symbol":"CLX","date":"2021-01-20","adj_close":196.93}, 
 {"symbol":"COST","date":"2021-01-20","adj_close":361.3}, 
 {"symbol":"MDLZ","date":"2021-01-20","adj_close":57.1}, 
 {"symbol":"K","date":"2021-01-20","adj_close":57.64}, 
 {"symbol":"KHC","date":"2021-01-20","adj_close":32.86}, 
 {"symbol":"PEP","date":"2021-01-20","adj_close":141.33}, 
 {"symbol":"PG","date":"2021-01-21","adj_close":131.01}, 
 {"symbol":"HSY","date":"2021-01-21","adj_close":148.98}, 
 {"symbol":"CLX","date":"2021-01-21","adj_close":197.21}, 
 {"symbol":"COST","date":"2021-01-21","adj_close":362.8}, 
 {"symbol":"MDLZ","date":"2021-01-21","adj_close":56.12}, 
 {"symbol":"K","date":"2021-01-21","adj_close":57.89}, 
 {"symbol":"KHC","date":"2021-01-21","adj_close":32.78}, 
 {"symbol":"PEP","date":"2021-01-21","adj_close":139.61}, 
 {"symbol":"PG","date":"2021-01-22","adj_close":130}, 
 {"symbol":"HSY","date":"2021-01-22","adj_close":148.2}, 
 {"symbol":"CLX","date":"2021-01-22","adj_close":202.35}, 
 {"symbol":"COST","date":"2021-01-22","adj_close":362.3}, 
 {"symbol":"MDLZ","date":"2021-01-22","adj_close":56.25}, 
 {"symbol":"K","date":"2021-01-22","adj_close":58.3}, 
 {"symbol":"KHC","date":"2021-01-22","adj_close":32.91}, 
 {"symbol":"PEP","date":"2021-01-22","adj_close":138.59}, 
 {"symbol":"PG","date":"2021-01-25","adj_close":132.24}, 
 {"symbol":"HSY","date":"2021-01-25","adj_close":147.53}, 
 {"symbol":"CLX","date":"2021-01-25","adj_close":211.96}, 
 {"symbol":"COST","date":"2021-01-25","adj_close":361.88}, 
 {"symbol":"MDLZ","date":"2021-01-25","adj_close":56.87}, 
 {"symbol":"K","date":"2021-01-25","adj_close":59.84}, 
 {"symbol":"KHC","date":"2021-01-25","adj_close":33.75}, 
 {"symbol":"PEP","date":"2021-01-25","adj_close":140.18}, 
 {"symbol":"PG","date":"2021-01-26","adj_close":133.09}, 
 {"symbol":"HSY","date":"2021-01-26","adj_close":149.52}, 
 {"symbol":"CLX","date":"2021-01-26","adj_close":212.99}, 
 {"symbol":"COST","date":"2021-01-26","adj_close":364.98}, 
 {"symbol":"MDLZ","date":"2021-01-26","adj_close":57.59}, 
 {"symbol":"K","date":"2021-01-26","adj_close":60.92}, 
 {"symbol":"KHC","date":"2021-01-26","adj_close":34.39}, 
 {"symbol":"PEP","date":"2021-01-26","adj_close":141.8}, 
 {"symbol":"PG","date":"2021-01-27","adj_close":128.38}, 
 {"symbol":"HSY","date":"2021-01-27","adj_close":146.19}, 
 {"symbol":"CLX","date":"2021-01-27","adj_close":222.18}, 
 {"symbol":"COST","date":"2021-01-27","adj_close":356.39}, 
 {"symbol":"MDLZ","date":"2021-01-27","adj_close":56.42}, 
 {"symbol":"K","date":"2021-01-27","adj_close":62.36}, 
 {"symbol":"KHC","date":"2021-01-27","adj_close":34.74}, 
 {"symbol":"PEP","date":"2021-01-27","adj_close":138.04}, 
 {"symbol":"PG","date":"2021-01-28","adj_close":130.36}, 
 {"symbol":"HSY","date":"2021-01-28","adj_close":148.21}, 
 {"symbol":"CLX","date":"2021-01-28","adj_close":209.57}, 
 {"symbol":"COST","date":"2021-01-28","adj_close":357.06}, 
 {"symbol":"MDLZ","date":"2021-01-28","adj_close":57.12}, 
 {"symbol":"K","date":"2021-01-28","adj_close":60.17}, 
 {"symbol":"KHC","date":"2021-01-28","adj_close":33.96}, 
 {"symbol":"PEP","date":"2021-01-28","adj_close":139.19}, 
 {"symbol":"PG","date":"2021-01-29","adj_close":128.21}, 
 {"symbol":"HSY","date":"2021-01-29","adj_close":145.44}, 
 {"symbol":"CLX","date":"2021-01-29","adj_close":209.46}, 
 {"symbol":"COST","date":"2021-01-29","adj_close":352.43}, 
 {"symbol":"MDLZ","date":"2021-01-29","adj_close":55.44}, 
 {"symbol":"K","date":"2021-01-29","adj_close":58.94}, 
 {"symbol":"KHC","date":"2021-01-29","adj_close":33.51}, 
 {"symbol":"PEP","date":"2021-01-29","adj_close":136.57}, 
 {"symbol":"PG","date":"2021-02-01","adj_close":128.97}, 
 {"symbol":"HSY","date":"2021-02-01","adj_close":145.11}, 
 {"symbol":"CLX","date":"2021-02-01","adj_close":210.02}, 
 {"symbol":"COST","date":"2021-02-01","adj_close":350.52}, 
 {"symbol":"MDLZ","date":"2021-02-01","adj_close":55.25}, 
 {"symbol":"K","date":"2021-02-01","adj_close":58.82}, 
 {"symbol":"KHC","date":"2021-02-01","adj_close":33.25}, 
 {"symbol":"PEP","date":"2021-02-01","adj_close":136.98}, 
 {"symbol":"PG","date":"2021-02-02","adj_close":128.79}, 
 {"symbol":"HSY","date":"2021-02-02","adj_close":147.12}, 
 {"symbol":"CLX","date":"2021-02-02","adj_close":204.23}, 
 {"symbol":"COST","date":"2021-02-02","adj_close":355.58}, 
 {"symbol":"MDLZ","date":"2021-02-02","adj_close":56.16}, 
 {"symbol":"K","date":"2021-02-02","adj_close":58.45}, 
 {"symbol":"KHC","date":"2021-02-02","adj_close":33.16}, 
 {"symbol":"PEP","date":"2021-02-02","adj_close":138.38}, 
 {"symbol":"PG","date":"2021-02-03","adj_close":128.95}, 
 {"symbol":"HSY","date":"2021-02-03","adj_close":146.58}, 
 {"symbol":"CLX","date":"2021-02-03","adj_close":204.59}, 
 {"symbol":"COST","date":"2021-02-03","adj_close":355.21}, 
 {"symbol":"MDLZ","date":"2021-02-03","adj_close":55.28}, 
 {"symbol":"K","date":"2021-02-03","adj_close":58.01}, 
 {"symbol":"KHC","date":"2021-02-03","adj_close":33.01}, 
 {"symbol":"PEP","date":"2021-02-03","adj_close":138.02}, 
 {"symbol":"PG","date":"2021-02-04","adj_close":129.03}, 
 {"symbol":"HSY","date":"2021-02-04","adj_close":147.22}, 
 {"symbol":"CLX","date":"2021-02-04","adj_close":191.65}, 
 {"symbol":"COST","date":"2021-02-04","adj_close":355.85}, 
 {"symbol":"MDLZ","date":"2021-02-04","adj_close":56}, 
 {"symbol":"K","date":"2021-02-04","adj_close":57.87}, 
 {"symbol":"KHC","date":"2021-02-04","adj_close":32.92}, 
 {"symbol":"PEP","date":"2021-02-04","adj_close":139.68}, 
 {"symbol":"PG","date":"2021-02-05","adj_close":129.57}, 
 {"symbol":"HSY","date":"2021-02-05","adj_close":146.6}, 
 {"symbol":"CLX","date":"2021-02-05","adj_close":191.25}, 
 {"symbol":"COST","date":"2021-02-05","adj_close":355.17}, 
 {"symbol":"MDLZ","date":"2021-02-05","adj_close":56.21}, 
 {"symbol":"K","date":"2021-02-05","adj_close":58.03}, 
 {"symbol":"KHC","date":"2021-02-05","adj_close":33.8}, 
 {"symbol":"PEP","date":"2021-02-05","adj_close":140.96}, 
 {"symbol":"PG","date":"2021-02-08","adj_close":129.17}, 
 {"symbol":"HSY","date":"2021-02-08","adj_close":149.33}, 
 {"symbol":"CLX","date":"2021-02-08","adj_close":190}, 
 {"symbol":"COST","date":"2021-02-08","adj_close":359.83}, 
 {"symbol":"MDLZ","date":"2021-02-08","adj_close":56.02}, 
 {"symbol":"K","date":"2021-02-08","adj_close":57.74}, 
 {"symbol":"KHC","date":"2021-02-08","adj_close":33.91}, 
 {"symbol":"PEP","date":"2021-02-08","adj_close":140.4}, 
 {"symbol":"PG","date":"2021-02-09","adj_close":128.67}, 
 {"symbol":"HSY","date":"2021-02-09","adj_close":149.62}, 
 {"symbol":"CLX","date":"2021-02-09","adj_close":187.35}, 
 {"symbol":"COST","date":"2021-02-09","adj_close":359.56}, 
 {"symbol":"MDLZ","date":"2021-02-09","adj_close":55.5}, 
 {"symbol":"PEP","date":"2021-02-09","adj_close":139.6}, 
 {"symbol":"KHC","date":"2021-02-09","adj_close":33.71}, 
 {"symbol":"K","date":"2021-02-09","adj_close":57.64}]
0
woof 11 Фев 2021 в 05:52

3 ответа

Лучший ответ

Вот пример, включающий селектор тикера компании:

Presentator.js :

export function Presentator() {
  const [data, setData] = useState([]);
  const [ticker, setTicker] = useState('');

  useEffect(() => {
    const fetchData = async () => {
      /* DO ACTUAL FETCH FROM SERVICE */
      const result = await Promise.resolve(response);

      setData(result);
    }

    fetchData();
  }, []);

  const handleTickerChange = (event) => {
    setTicker(event.target.value);
  }

  const getTickerData = (ticker) => {
      return data.filter(item => item.symbol.toLowerCase() === ticker.toLowerCase());
  };

  const getTickerDropdownValues = () => {
    const set = new Set();

    data.forEach(item => {
      if (!set.has(item.symbol)) {
        set.add(item.symbol);
      }
    });

    return Array.from(set);
  }

  const getTickerDropdown = () => {
    const options = getTickerDropdownValues();

    return (
      <select value={ticker} onChange={handleTickerChange}>
        {options.map(option => {
          return (
            <option key={option} value={option}>{option}</option>
          );
        })}
      </select>
    );
  }

  return (
    <>
      {getTickerDropdown()}
      <Graph data={getTickerData(ticker)} />
    </>
  );
}

Graph.js:

export function Graph(props) {
  const { data } = props;

  const getChartData = () => {
    const labels = [];
    const series = [];

    data.forEach(item => {
      labels.push(item.date);
      series.push(item.adj_close);
    });

    return {
      labels: labels,
      series: [series]
    };
  }

  // Add your graph configuration here
  const chartOptions = {
    // width: 2000,
    height: 400,
    // scaleMinSpace: 20
  };

  return (
    <ChartistGraph data={getChartData()} options={chartOptions} type="Line" />
  );
}

По сути, Presentator обрабатывает начальную выборку данных и логику для разделения данных по тикеру. Затем компонент Graph сам обрабатывает визуализацию конкретных данных тикера.

Вы можете проверить рабочий пример в этой папке с кодами .

Вам не нужно хранить в состоянии больше ничего, кроме самих данных. В нашем случае мы также сохраняем выбранное значение для раскрывающегося списка тикеров. Все остальное можно посчитать.

В функции getChartData вы можете выполнять дальнейшую фильтрацию и манипулирование данными, например, представление только последних 10 записей (дат) вместо всего набора.

1
zhulien 14 Фев 2021 в 14:12

Если я вас правильно понял, вам нужно отобразить значения adj_close для каждой даты, сгруппированные по symbol. Это верно?


Сначала внесите изменения в свое состояние:

  const [chartData, setChartData] = useState({
    labels: [],
    series: []
  });

Вы можете сгруппировать ответ по symbol следующим образом:

const symbols = response.reduce((map, value) => {
        if (map.has(value.symbol)) {
          map.set(value.symbol, [...map.get(value.symbol), value]);
        } else {
          map.set(value.symbol, [value]);
        }
        return map;
}, new Map())

Тогда получите уникальные даты:

const dates = [...new Set(response.map(r => r.date))]; // note: it doesn't sort dates!

Затем построим многомерный массив серий. Для каждого символа вы включаете значения adj_close для каждой даты.


const series = Array.from(symbols).map(value => {
    const valuesForSymbol = value[1];
    return dates.map(date => {
      const valueForDate = valuesForSymbol.find(v => v.date === date);
      return valueForDate.adj_close;
    });
});

Установите состояние:

setChartData({labels: dates, series });

И, наконец, отобразите диаграмму следующим образом:

<ChartistGraph data={chartData} options={options} type="Line" />

Полный пример здесь.

1
Riwen 14 Фев 2021 в 14:20

Я переписал ваш код, проверьте, работает ли он для вашей ситуации

import React, { useState, useEffect } from "react";
import ChartistGraph from 'react-chartist';

export default function Graph() {
  const [data, setData] = useState({
    chart: {
      label: [],
      series: []
    },
    dataBySymbols: {},
    symbols: [],
    select: "",
  });

  const getData = () => {
    setTimeout(() => {
      const _tmp = new Set();
      const dataBySymbols = {};

      response.forEach(item => {
        _tmp.add(item.symbol);
        if (!dataBySymbols.hasOwnProperty(item.symbol)) {
          dataBySymbols[item.symbol] = {
            label: [],
            series: [
              []
            ]
          };
        }

        dataBySymbols[item.symbol]['label'].push(item.date);
        dataBySymbols[item.symbol]['series'][0].push(item.adj_close);
      });

      const copy = {...data};
      copy['dataBySymbols'] = dataBySymbols;
      copy['symbols'] = Array.from(_tmp);
      copy['chart'] = dataBySymbols[copy['symbols'][0]];

      setData(copy);
    }, 3000)
  }

  useEffect(() => {
    getData()
  }, [])

  function onSelectChange(evt) {
    const copy = {...data};
    copy['select'] = evt.target.value;
    copy['chart'] = copy.dataBySymbols[evt.target.value]
    setData(copy);
  }

  const options = {
    width: 500,
    height: 400
  };

  return (
    <div>
      <select value={data.select} onChange={onSelectChange}>
        {data.symbols.map(option => {
          return (
            <option key={option} value={option}>{option}</option>
          );
        })}
      </select>

      <ChartistGraph data={data.chart} options={options} type="Line" />
    </div>

  );
};

export default function App() {
  return (
    <Graph />
  );
}

Здесь работает пример

1
Chandan 16 Фев 2021 в 05:11
66148102