Multiple requests on demand for graph Highchart

[laurent512]

Hi everyone,

I work on a dashboard to show a stock chart (using Highcharts).

When the dashboard is opened, a default stock curve is shown. Next to it, a side panel contains several checkboxes allowing the visitor to superpose other stock curve on the already visible one.

Each chart curve contains unique data and has to be fetched from external API.
Problem is that many different graphs will be available and I assume they should not be loaded at the same time via a single API call and unique fetch.

I believe that "hard writing" multiple fetcher for each chart is not the ideal solution. (maybe it is ? )

Could you guide me towards the right approach?

Thank you so much.

[shuding]

Please take a look at https://swr.vercel.app/getting-started#make-it-reusable, which is a good pattern for implementing applications like this.

[laurent512]

Thank you for your reply :)

I have written this :

function loadData(id) {
    const { data, error } = useSWR(`http://www.randomnumberapi.com/api/v1.0/random?min=${id}&max=${id}&count=50`, fetcher);

    return {
        data: data,
        isLoading: !error && !data,
        isError: error
    };
}

and then define inside the component :

    const stockValue  = loadData(1);
    const graph2  = loadData(2);
    const graph3  = loadData(3);

Is this what you suggest to do ? Because it means that I would load all the data at the begining , without even knowing if it will be used ? (not sure it is ideal behaviour , maybe it is ? )

Also, I can not call the hook inside my click event I got invalid hook call ;/
Sorry, I am a very beginner and this is very difficult to me.

import React, { useState } from 'react';
import Highcharts from 'highcharts/highstock';
import HighchartsExporting from 'highcharts/modules/exporting';
import HighchartsReact from 'highcharts-react-official';
import useSWR from 'swr';

//Because I am developing on NextJs
if (typeof Highcharts === 'object') {
    HighchartsExporting(Highcharts);
}

//I define which graphs will be displayable. Stockvalue should be displayed by default
const availableGraphs = [
    {
        name: 'stockvalue',
        key: 'stockvalue',
        label: 'stockvalue'
    },
    {
        name: 'graph2',
        key: 'graph2',
        label: 'graph2'
    },
    {
        name: 'graph3',
        key: 'graph3',
        label: 'graph3'
    }  
];

const baseUrl = `http://www.randomnumberapi.com/api/v1.0/random?min=100&max=1000&count=100`;
const fetcher = (...args) => fetch(...args).then((res) => res.json());



function loadData(id) {
    const { data, error } = useSWR(`http://www.randomnumberapi.com/api/v1.0/random?min=${id}&max=${id}&count=50`, fetcher);

    return {
        data: data,
        isLoading: !error && !data,
        isError: error
    };
}

const SentimentStockChart = () => {
    const [checkedItems, setCheckedItems] = useState({ stockvalue: true });


    //Here I load every plot at once. Only stockData should be displayed by default
    const stockValue  = loadData(1);
    const graph2  = loadData(2);
    const graph3  = loadData(3);
    

    const handleChange = (event) => {
        if (event.target.checked) {
        //Can not call the load data hook here 
            addSerieOnChart(event.target.name);
        } else {
            hideSerieFromChart(event.target.name);
        }
        setCheckedItems({
            ...checkedItems,
            [event.target.name]: event.target.checked
        });
    };

    const [chartOptions, setChartOptions] = useState({
        series: [
            {
                marker: {
                    fillColor: 'transparent'
                },
                id: 'stockvalue',
                name: 'stockvalue',
                data:  stockValue.data //display the stock graph bydefault 
            } 
        ],
        legend: {
            enabled: true
        }
    });

    const addSerieOnChart = (serieIDtoAdd) => {
        let tempSeries;
        tempSeries = [
            ...chartOptions.series,
            {
                marker: {
                    fillColor: 'transparent'
                },
                id: serieIDtoAdd,
                name:serieIDtoAdd,
                data:   graph2.data  //issue because I dont know how to display the data I want 
            }
        ];
        setChartOptions({ series: tempSeries });
    };

    
    const hideSerieFromChart = (serieIDtoRemove) => {
        const tempSeries = chartOptions.series.filter((item) => {
            return item.id != serieIDtoRemove;
        });
        setChartOptions({ series: tempSeries });
    };

    return (
        <>
            <div className="flex-grow-0 mx-2  ">
                <span className="text-gray-800 font-semibold">Plot List</span>
                <div className="mt-2 flex flex-col">
                    {availableGraphs.map((item) => (
                        <label key={item.key} className="inline-flex items-center">
                            <input type="checkbox" name={item.name} checked={checkedItems[item.name]} onChange={handleChange} />
                            <span className="ml-2 text-sm"> {item.name}</span>
                        </label>
                    ))}
                </div>
            </div>
            <div className="flex-grow">
                <HighchartsReact highcharts={Highcharts} options={chartOptions} constructorType={'stockChart'} />
            </div>
        </>
    );
};

export default SentimentStockChart;