gpDA

// ./components/Chart/Chart.js

import Moment from 'moment';
import { extendMoment } from 'moment-range';

        // moment.js + moment-range
        const moment = extendMoment(Moment);
        let now = moment(new Date());
        // var formatted_now = now.format('HH:mm:ss');
        let five_min_ago = moment(now).subtract(5, 'minutes');

gpDA

// ./components/Chart/Chart.js

        // line1
        let inital_line_1 = this.state.inital_line_1;
        // slicing the array EXAMPLE (5, length) if counter is 5
        let line_line1 = inital_line_1.slice(this.state.counter, inital_line_1.length)
        // line2
        let inital_line_2 = this.state.inital_line_2;
        let line_line2 = inital_line_2.slice(this.state.counter, inital_line_2.length)
        // line3

gpDA

  d3.json("/sentiment-endpoint", function(data) {
    var height = $("body").height()*0.6 - $(".panel-header").height() - 20,
        width  = $("body").width()*0.6 - 10,
        stock = d3.stock();

    var chart = d3.select("#chart").append("svg")
        .attr("width", width)
        .attr("height", height)
        .attr('class', 'chart')
        .attr('id','stockchart')

gpDA

import { Line } from 'react-chartjs-2';

...

        // data for LINE
        const chart_data = {
            // x_axis (time range)
            labels: x_axis,
            // dataset LINE1

gpDA

import { Line } from 'react-chartjs-2';

...
    render(){
        // moment.js + moment-range
        const moment = extendMoment(Moment);
        let now = moment(new Date());
        // var formatted_now = now.format('HH:mm:ss');
        let five_min_ago = moment(now).subtract(5, 'minutes');

gpDA

import {Doughnut, Line} from 'react-chartjs-2';
import ReactHeatmap from 'react-heatmap-grid';

...

//Doughnut
<Doughnut
    data={this.state.piechartData}
    width={1000}
    height={400}

gpDA

const Chart = ({data}) => {
    // data ==> filteredData
    // console.log('chart.js ?',data)
    
    // get bytes_ts
    const bytes_ts  = Array.from(data.map(datum => datum.map(ele => {return ele.bytes_ts})))

    // get the length of data...
    const len_data = data.map(ele => {return ele.length});

gpDA

    // axios GET request
    componentDidMount(){
        axios.get('http://127.0.0.1:8000/api/bandwidth')
        .then(response => {
            // console.log(response.data);

            // set Initial data
            this.setState({
                data: response.data,
                loaded: true

gpDA

import Amplify, { API } from 'aws-amplify';

Amplify.configure({
  Auth: {
  // REQUIRED - Amazon Cognito Identity Pool ID
      identityPoolId: 'XXXXX',
  // REQUIRED - Amazon Cognito Region
      region: 'us-east-1',
  // OPTIONAL - Amazon Cognito User Pool ID
      userPoolId: 'XXXXX',

gpDA

import { Auth } from 'aws-amplify';
import * as aws4 from 'aws4';

// get Function
export const get = async (path, use_access_token, options = null) => {
  let user = await Auth.currentAuthenticatedUser();
  let idToken = user.signInUserSession.idToken.jwtToken;
  let accessToken = user.signInUserSession.accessToken.jwtToken;
  const apiName = "XXXX"
  const signer = aws4.sign({