Вставить динамические случайные цвета в состояние глубокого вложенного графика? - PullRequest
Новая
       6

Вставить динамические случайные цвета в состояние глубокого вложенного графика?

0 голосов
/ 08 сентября 2018

Я пытаюсь добавить динамические цвета в свой график, но мне трудно это сделать. В моем состоянии у меня есть цвет фона внутри массива объектов для моих наборов данных. Тем не менее, я не уверен, как добавить в него мои динамические цвета.

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

Я читал в Интернете, что могу использовать помощников по неизменности, чтобы добиться проталкивания этих цветов внутрь глубоко вложенного объекта, но мне трудно это понять.

Вот мой код: 

import React from 'react';

import reportsService from '../../services/reportsService';
import update from 'react-addons-update';

import {Bar, Line, Pie} from 'react-chartjs-2';

class Reportspage extends React.Component {
    constructor(props){
        super(props);

        this.state = {
            chartData: {
                // Placeholder labels for now
                labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
                datasets: [{
                    label: 'Population',
                    data: [12, 19, 3, 5, 2, 3],
                    backgroundColor: []
                }]
            }
        }
    }

    chartColors(){
        let colors = [];
        // Start with 100 random colors for now. If data increases, increase loop value
        for(let i = 0; i < 100; i++) {
            let r = Math.floor(Math.random() * 200);
            let g = Math.floor(Math.random() * 200);
            let b = Math.floor(Math.random() * 200);
            let c = 'rgb(' + r + ', ' + g + ', ' + b + ')';
            colors.push(c);
        }
        // How can I push these colors inside of my deep nested state?
        this.setState({
            chartData: update(this.state.chartData.datasets, {datasets: {$set: colors}})
        })
    }


    async componentDidMount(){
        this.chartColors();

        const showReports = await reportsService.showDowntime();

        console.log(showReports);

        console.log(this.state);
    }

    render(){
        return (
            <div className="fluid-container">
                <div className="container">
                    <h1>Reports</h1>
                    <div className="chartContainer">
                        <Bar
                            data={this.state.chartData}
                            options={{
                                maintainAspectRatio: false
                            }}
                        />
                    </div>
                </div>
            </div>
        )
    }
}

export default Reportspage;
...