import { Meteor } from 'meteor/meteor';
import React, { Component } from 'react';
import ReactDOM from 'react-dom';

import { Chart, Axis, Series, Tooltip, Cursor, Line } from 'react-charts';
import { ResizableBox } from 'react-resizable'

export default class Estadisticas extends Component {

  render() {
    const data = [
      [[450, 100], [1000, 500], [1000, 250]],
      [[600, 330], [200, 310], [400, 440]],
      [[700, 203], [266, 344], [546, 299]]
    ];
    return (
        <div>
          <h1>Estadisticas</h1>
            <ResizableBox width={500} height={300}>
              <Chart data={data}>
                <Axis primary type="linear" position="bottom" />
                <Axis type="linear" position="left" />
                <Series type={Line} />
                <Cursor primary />
                <Cursor />
                <Tooltip />
              </Chart>
            </ResizableBox>
        </div>
    );
  }
}