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, LineAdvance } from 'bizcharts';
import Service from "../../utils/Service";

const { Title } = Typography;

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

    useEffect(() => {
        Service.call({
            url: `publicacoes/grafico`,
            method: "post",
            setData,
            setLoading,
            errorTitle: 'Gráfico de Publicações',
            errorMessage: 'Houve uma falha ao carregar o gráfico das publicações...'
        })
    }, []);

    return <>
        { Service.spin(loading) }
        <Chart padding={[10, 20, 50, 40]} autoFit height={300} data={data} >
            <LineAdvance
                shape="smooth"
                point
                area
                position="mes*total"
                color="comunidade"
            />
        </Chart>
    </>;
};

GraficoPublicacoes.propTypes = {
};

export default GraficoPublicacoes;