Диаграмма Google не отображает должным образом-React JS - PullRequest
Новая
       20

Диаграмма Google не отображает должным образом-React JS

1 голос
/ 15 марта 2019

Я новичок в React JS.Мое требование - создание графика на основе ответа API.Я использую диаграмму Google для создания диаграммы.Найдите код 

import React from "react";
import PropTypes from 'prop-types';
import MonitoringDashboardAPI from "../utils/apis/MonitoringDashboardAPI";
import {HTTPStatus} from "../utils/Constants";
import Chart from "react-google-charts";

const cpuMetaData = {names: ['Time', 'System CPU'], types: ['time', 'linear']};
const cpuLineChartConfig = {
    x: 'Time',
    charts: [{type: 'line', y: 'System CPU', style: {markRadius: 2}}],
    gridColor: '#FF0000',
    tipTimeFormat: "%M:%S %Z",
    style: {
        axisLabelColor: '#9c9898',
        legendTitleColor: '#9c9898',
        legendTextColor: '#9c9898',
        tickLabelColor: '#f2f2f2',
    }
};

const styles = {
    root: {display: 'flex', flexWrap: 'wrap', justifyContent: 'space-around'},
    gridList: {height: '50%', overflowY: 'auto', padding: '0 10px', margin: '-10px 0'}
};

const options = {
    title: "Company Performance",
    curveType: "function",
    legend: { position: "bottom" }
};

export default class Dashboard extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            isApiCalled: false,
            cpu: [],
            memUsage: [],
            test:[],
            //statusMessage: this.context.intl.formatMessage({id:'systemDetails', defaultMessage:'Currently metrics are not available'}),
            isError: false,
            pInterval: 1000,
            interval: 1000
        };
        //this.renderWorkers = this.renderWorkers.bind(this);
         this.renderCPUChart = this.renderCPUChart.bind(this);
    }

    initAutoSync() {
        let interval = '';
        let that = this;
        let queryParams = {
            params: {
                period: '5sec'
            }
        };

        interval = setInterval(() => {
            // that.setState({currentTime: new Date().getTime()});
            MonitoringDashboardAPI.getSystemDetails()
                .then((response) => {
                  // this.state.memUsage.push(Math.floor(Date.now() / 1000),response.data.healthDeterminer.memoryUsage);
                    this.setState({
                        cpu: response.data.healthDeterminer.cpuUsage,
                        memUsage: response.data.healthDeterminer.memoryUsage,
                    });
                   // this.state.memUsage.push(response.data.healthDeterminer.memoryUsage)
                }).catch((error) => {
            });

        }, parseInt(this.state.pInterval));
        this.setState({interval: interval});

    }


    componentDidMount()
     {
       MonitoringDashboardAPI.getSystemDetails()
            .then((response) => {
                if (response.status === HTTPStatus.OK) {
                    this.setState({
                        cpu: response.data.healthDeterminer.cpuUsage,
                        memUsage: response.data.healthDeterminer.memoryUsage,
                        isApiCalled: true,
                        //   statusMessage: response.data === null ? this.context.intl.formatMessage({id:'systemDetails', defaultMessage:'Currently metrics are not available'}) : ''
                    });
                }
            }).catch((error) => {
            if (error.response.status === 401) {
                this.setState({
                    isApiCalled: true,
                    //  statusMessage: this.context.intl.formatMessage({id:'systemDetails', defaultMessage:'Authentication failed. Please login again'})
                });
            } else if (error.response.status === 403) {
                this.setState({
                    isApiCalled: true,
                    // statusMessage: this.context.intl.formatMessage({id:'systemDetails', defaultMessage:'User have no permission to view this page'})
                });
            } else {
                this.setState({
                    isError: true,
                    isApiCalled: true,
                    //statusMessage: this.context.intl.formatMessage({id:'unknownError', defaultMessage: 'Unknown error occurred! : {data}', values: { data: JSON.stringify(error.response.data) } })
                });
            }
        });
        clearInterval(this.interval);
        this.initAutoSync();
        console.log(this.state.memUsage)
    }

    renderCPUChart() {
        return (
            <div style={{backgroundColor: '#131313', paddingTop: 10, height: '370px'}}>
                <div style={{backgroundColor: '#131313', paddingTop: 60, height: 255, width: '100%'}}>
                    <h1 style={{color: '#3366cc'}}>{this.state.memUsage} </h1>
                    <div className="App">
                        <Chart
                            chartType="LineChart"
                            width="100%"
                            height="400px"
                            data={[
                                ["Time stamp", "Memory Usage"],
                                [Math.floor(Date.now() / 1000), this.state.memUsage],
                            ]}
                            options={options}
                        />
                    </div>
                </div>
            </div>
        );
    }


    render() {
        console.log(this.state.cpu.length)
        return (
            this.renderCPUChart()
        );
    }
}

initAutoSync () метод, используемый для вызова API в определенный период времени.В этом примере я вызываю API каждые 1 секунду.

Моя проблема в том, что массив memUsage всегда содержит только один элемент, даже если вызывается API.Но значение обновляется в соответствии с ответом API.В основном значения не добавляются. Это перезаписывает значения.Итак, я получаю только одну точку на графике.

Пожалуйста, найдите скриншот моего вывода

screenshot

1 Ответ

0 голосов
/ 15 марта 2019

попробуйте инициализировать все данные диаграммы в componentDidMount ... 

this.setState({
    chartData: [
        ["Time stamp", "Memory Usage"],
        [Math.floor(Date.now() / 1000), response.data.healthDeterminer.memoryUsage],
    ],
    isApiCalled: true,
});

затем добавить в течение интервала ... 

this.state.chartData.push([Math.floor(Date.now() / 1000), response.data.healthDeterminer.memoryUsage]);

и график ... 

<Chart
    chartType="LineChart"
    width="100%"
    height="400px"
    data={this.state.chartData}
    options={options}
/>
...