import React, { useState, useEffect } from "react";
import PropTypes from "prop-types";
import Spin from 'antd/lib/spin';
import Typography from 'antd/lib/typography';
import { Chart, Interval } from 'bizcharts';
import Service from "../../utils/Service";

const { Title } = Typography;

const GraficoStock = () => {
    const [ loading, setLoading ] = useState(false);
    const [ data, setData ] = useState([]);

    useEffect(() => {
        Service.call({
            url: `stock/grafico`,
            method: "post",
            setData,
            setLoading,
            errorTitle: 'Gráfico do Stock',
            errorMessage: 'Houve uma falha ao carregar o gráfico do stock...'
        })
    }, []);

    return <>
        { Service.spin(loading) }
        <Chart height={300} autoFit data={data} >
            <Interval position="nome*quantidade"  />
        </Chart>
    </>;
};

GraficoStock.propTypes = {
};

export default GraficoStock;