import React, {Component} from "react";
import {Pie, Doughnut} from 'react-chartjs-2';

const state = {
    labels: ['January', 'February', 'March',
        'April', 'May'],
    datasets: [
        {
            label: 'Rainfall',
            backgroundColor: [
                '#B21F00',
                '#C9DE00',
                '#2FDE00',
                '#00A6B4',
                '#6800B4'
            ],
            hoverBackgroundColor: [
                '#501800',
                '#4B5000',
                '#175000',
                '#003350',
                '#35014F'
            ],
            data: [65, 59, 80, 81, 56]
        }
    ]
}

export default class Analytics extends Component{
    render() {
        return (
            <div>
                <div className="app-page-title">
                    <div className="page-title-wrapper">
                        <div className="page-title-heading">
                            <div className="page-title-icon">
                                <i className="pe-7s-display1 fa fa-tachometer"></i>
                            </div>
                            <div>
                                Dashboard
                            </div>
                        </div>
                    </div>
                </div>

                <div className="row">
                    <div className="col-md-6 col-xl-4">
                        <div className="card mb-3 widget-content bg-midnight-bloom">
                            <div className="widget-content-wrapper text-white">
                                <div className="widget-content-left">
                                    <div className="widget-heading" style={{paddingRight: "40px"}}>Total Students</div>
                                    {/*<div className="widget-subheading">Last year expenses</div>*/}
                                </div>
                                <div className="widget-content-right">
                                    <div className="widget-numbers text-white"><span>1000</span></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div className="col-md-6 col-xl-4">
                        <div className="card mb-3 widget-content bg-arielle-smile">
                            <div className="widget-content-wrapper text-white">
                                <div className="widget-content-left">
                                    <div className="widget-heading" style={{paddingRight: "40px"}}>Institutes</div>
                                    {/*<div className="widget-subheading">Total Clients Profit</div>*/}
                                </div>
                                <div className="widget-content-right">
                                    <div className="widget-numbers text-white"><span>2</span></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div className="col-md-6 col-xl-4">
                        <div className="card mb-3 widget-content bg-grow-early">
                            <div className="widget-content-wrapper text-white">
                                <div className="widget-content-left">
                                    <div className="widget-heading" style={{paddingRight: "40px"}}>Subjects</div>
                                    {/*<div className="widget-subheading">People Interested</div>*/}
                                </div>
                                <div className="widget-content-right">
                                    <div className="widget-numbers text-white"><span>1</span></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div className="row">

                    <div className="col-md-6 col-lg-4">
                        <div className="mb-3 card">
                            <div className="card-header-tab card-header-tab-animation card-header">
                                <div className="card-header-title">
                                    <i className="header-icon lnr-apartment icon-gradient bg-love-kiss"> </i>
                                    Monthly Income
                                </div>
                                <ul className="nav">
                                    <li className="nav-item"><a href="javascript:void(0);"
                                                                className="active nav-link">Last</a></li>
                                    <li className="nav-item"><a href="javascript:void(0);"
                                                                className="nav-link second-tab-toggle">Current</a></li>
                                </ul>
                            </div>
                            <div className="card-body">
                                <div className="tab-content">
                                    <div className="tab-pane fade show active" id="tabs-eg-77">
                                        <div className="card mb-3 widget-chart widget-chart2 text-left w-100">
                                            <div className="widget-chat-wrapper-outer">
                                                <div
                                                    className="widget-chart-wrapper widget-chart-wrapper-lg opacity-10 m-0">
                                                    {/*<canvas id="canvas" />*/}
                                                    {/*<Bar data={data} options={options}/>*/}
                                                    <Pie
                                                        data={state}
                                                        options={{
                                                            title:{
                                                                display:true,
                                                                text:'Average Rainfall per month',
                                                                fontSize:20
                                                            },
                                                            legend:{
                                                                display:true,
                                                                position:'right'
                                                            }
                                                        }}
                                                    />
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div className="col-md-6 col-lg-4">
                        <div className="mb-3 card">
                            <div className="card-header-tab card-header-tab-animation card-header">
                                <div className="card-header-title">
                                    <i className="header-icon lnr-apartment icon-gradient bg-love-kiss"> </i>
                                    Monthly Expenses
                                </div>
                                <ul className="nav">
                                    <li className="nav-item"><a href="javascript:void(0);"
                                                                className="active nav-link">Last</a></li>
                                    <li className="nav-item"><a href="javascript:void(0);"
                                                                className="nav-link second-tab-toggle">Current</a></li>
                                </ul>
                            </div>
                            <div className="card-body">
                                <div className="tab-content">
                                    <div className="tab-pane fade show active" id="tabs-eg-77">
                                        <div className="card mb-3 widget-chart widget-chart2 text-left w-100">
                                            <div className="widget-chat-wrapper-outer">
                                                <div
                                                    className="widget-chart-wrapper widget-chart-wrapper-lg opacity-10 m-0">
                                                    {/*<canvas id="canvas" />*/}
                                                    {/*<Bar data={data} options={options}/>*/}
                                                    <Pie
                                                        data={state}
                                                        options={{
                                                            title:{
                                                                display:true,
                                                                text:'Average Rainfall per month',
                                                                fontSize:20
                                                            },
                                                            legend:{
                                                                display:true,
                                                                position:'right'
                                                            }
                                                        }}
                                                    />
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div className="col-md-6 col-lg-4">
                        <div className="mb-3 card">
                            <div className="card-header-tab card-header-tab-animation card-header">
                                <div className="card-header-title">
                                    <i className="header-icon lnr-apartment icon-gradient bg-love-kiss"> </i>
                                    Monthly Revenue
                                </div>
                                <ul className="nav">
                                    <li className="nav-item"><a href="javascript:void(0);"
                                                                className="active nav-link">Last</a></li>
                                    <li className="nav-item"><a href="javascript:void(0);"
                                                                className="nav-link second-tab-toggle">Current</a></li>
                                </ul>
                            </div>
                            <div className="card-body">
                                <div className="tab-content">
                                    <div className="tab-pane fade show active" id="tabs-eg-77">
                                        <div className="card mb-3 widget-chart widget-chart2 text-left w-100">
                                            <div className="widget-chat-wrapper-outer">
                                                <div
                                                    className="widget-chart-wrapper widget-chart-wrapper-lg opacity-10 m-0">
                                                    {/*<canvas id="canvas" />*/}
                                                    {/*<Bar data={data} options={options}/>*/}
                                                    <Pie
                                                        data={state}
                                                        options={{
                                                            title:{
                                                                display:true,
                                                                text:'Average Rainfall per month',
                                                                fontSize:20
                                                            },
                                                            legend:{
                                                                display:true,
                                                                position:'right'
                                                            }
                                                        }}
                                                    />
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>

            </div>
        );
    }
}
