progress.js

gistfile1.txt

import {
  CartesianGrid, Line, LineChart, XAxis, YAxis, Tooltip,
} from 'recharts';
import React, { Fragment } from 'react';
import gql from 'graphql-tag';
import { Query } from 'react-apollo';

const GET_INFO = gql`
  query getInfo {
    getInfo {
      donations {
        guid
        amount
        datetime
      }
    }
  }
`;

const formatDate = (date) => {
  const newDate = new Date(date);
  console.log(newDate);
  console.log(toDateString(newDate));
  return newDate;
};

const Progress = () => (
  <Fragment>
    <Query query={GET_INFO}>
      {({ loading, error, data }) => {
        if (loading) return 'Loading...';
        if (error) return `Error! ${error.message}`;
        const { donations } = data.getInfo[0];
        
        console.log(donations);

        return (
          <LineChart width={600} height={400} data={donations}>
            <CartesianGrid />
            <YAxis dataKey="amount" />
            <XAxis dataKey="datetime" tickFormatter={formatDate} />
            <Tooltip />
            <Line type="monotone" dataKey="datetime" stroke="#8884d8" />
          </LineChart>
        );
      }}
    </Query>
  </Fragment>
);

export default Progress;