0

I am building a website where the user can select a date(s) and a product(s) and see the relative inventory. The representation of the inventory is made via a table and a chart (using react-chartjs-2). I am using React Hooks

The props are sent correctly, however I am not sure why the chart is not upgrading dynamically. It does upgrade the value on the bar, but not the bar itself.

Example: In date 15-11-2019, the product Desktop ITG56 has an inventory of 25.

The user can click on the table and modify the inventory. For example, the user sets the inventory of Desktop ITG56 to 11.

If I console.log the new results, the array containing the inventory is updated. However the bar chart does not decrease. If I hover on it, it shows that inventory 25 is replaced by inventory 11 (so it is good!) but the bar does not decrease.

Before the user types "11" in the table

enter image description here

After the user types "11" in the table enter image description here

MyGraph component

import React, {Component,  useState, useEffect, useCallback} from 'react';
import { Line, Bar } from 'react-chartjs-2'


function MyChart({results}) {

    let selected_dates = results['selected_dates']
    let products_results = results['selected_products']


    let my_dataset = []

    var i;
    if (products_results) {
        my_dataset = []

        for (i = 0; i < products_results.length; i++) {
            let dataset_dict = {}
            dataset_dict['label'] = products_results[i]['product_name']
            dataset_dict['data'] = products_results[i]['inventory']
            dataset_dict['lineTension'] = 0.5
            dataset_dict['fill'] = false
            dataset_dict['borderColor'] = products_results[i]['color']
            dataset_dict['backgroundColor'] = products_results[i]['color']
            my_dataset.push(dataset_dict)
            console.log(my_dataset)
        }
    }


    let data = {
        labels: selected_dates,
        datasets: my_dataset
    };

    if (results.length === 0) {
        return null
    } else if (results["selected_dates"].length > 1) {
        return(
            <div>
                    <Line
                        data={data}
                        options={{ maintainAspectRatio: true }}
                        redraw
                    />
                </div>
                )
    } else {
        return(
                <div>
                    <Bar
                        data={data}
                        options={{ maintainAspectRatio: true }}
                        redraw
                    />
                </div>
        )
    }
}

export default MyChart;
Magofoco
  • 5,098
  • 6
  • 35
  • 77
  • What kind of state logic has the parent of ? – Jurrian Nov 13 '19 at 10:37
  • The `Table` component and `MyChart` component are a child of the `Form`. When the user modifies the `Table`, a handler function is called so that the `Form` is updated with the latest table entities. This works. Since `MyChart` is child of `Form`, and since `Form` resuls update, I do not understand why the bar doe not change. – Magofoco Nov 13 '19 at 11:12
  • I don't see you updating the chart or clearing and redrawing the canvas. That's important. – HeadhunterKev Nov 13 '19 at 11:29
  • I am not sure if I understand that. I am using `redraw` – Magofoco Nov 13 '19 at 11:38
  • I've actually never seen this syntax before and I can't find anything in the chart.js docs. Do you have a source for that? – HeadhunterKev Nov 13 '19 at 15:05

0 Answers0