<!DOCTYPE html>
<html lang="pt">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">

    <title>DashBoard</title>

    <style>
        body {
            background-color: black;
            width: 870px;
        }

        .box {
            width: 92px;
            height: 71px;
            display: inline-block;
        }

        .title {
            font: 14px Trebuchet MS;
            color: #fff;
            text-align: right;
            width: 87px;
            display: inline-block;
            margin-top: 10px;
        }

        .value {
            font: 25px Trebuchet MS;
            color: #fff;
            text-align: right;
            width: 87px;
            display: inline-block;
            margin-top: 10px;
        }

        .boxYellowTitle {
            width: 92px;
            height: 30px;
            background-color: #F39C12;
        }

        .boxYellowContent {
            width: 92px;
            height: 41px;
            background-color: #F1C40F;
        }

        .boxPurpleTitle {
            width: 92px;
            height: 30px;
            background-color: #8E44AD;
        }

        .boxPurpleContent {
            width: 92px;
            height: 41px;
            background-color: #9B59B6;
        }

        .boxGreenTitle {
            width: 92px;
            height: 30px;
            background-color: #27AE60;
        }

        .boxGreenContent {
            width: 92px;
            height: 41px;
            background-color: #2ECC71;
        }

        .boxOrangeTitle {
            width: 92px;
            height: 30px;
            background-color: #D35400;
        }

        .boxOrangeContent {
            width: 92px;
            height: 41px;
            background-color: #E67E22;
        }

        .boxBlueTitle {
            width: 92px;
            height: 30px;
            background-color: #2980B9;
        }

        .boxBlueContent {
            width: 92px;
            height: 41px;
            background-color: #3498DB;
        }

        .boxGreyTitle {
            width: 92px;
            height: 30px;
            background-color: #7F8C8D;
        }

        .boxGreyContent {
            width: 92px;
            height: 41px;
            background-color: #95A5A6;
        }

        .boxRedTitle {
            width: 92px;
            height: 30px;
            background-color: #C0392B;
        }

        .boxRedContent {
            width: 92px;
            height: 41px;
            background-color: #E74C3C;
        }

        .boxGreenyTitle {
            width: 92px;
            height: 30px;
            background-color: #16A085;
        }

        .boxGreenyContent {
            width: 92px;
            height: 41px;
            background-color: #1ABC9C;
        }

        .graphGauge {
            height: 214px;
            width: 191px;
            background-color: #192B37;
        }

        .graphGaugeTitle {
            height: 23px;
            width: 191px;
            background-color: #253849;
            /*font: 12px Trebuchet MS;*/
            /*display: inline-block;*/
            /*color: #fff;*/
        }

        .graphGaugeContent {
            height: 191px;
            width: 191px;
            background-color: #192B37;
        }

        .graphBox {
            height: 215px;
            width: 320px;
            background-color: #192B37;
        }

        .graphBoxTitle {
            height: 20px;
            width: 320px;
            background-color: #253849;
        }

        .graphTitle {
            margin-left: 10px;
            font: 12px Trebuchet MS;
            color: #fff;
        }

        .graphBoxContent {
            height: 190px;
            width: 320px;
            background-color: #192B37;
        }

        .titleAreaGraph {
            width: 320px;
            color: #fff;
            font: Bold 15px Trebuchet MS;
            display: inline-block;
            text-align: center;
        }

        .brand {
            padding-left:300px;
            color: #fff;
            font: 12px Trebuchet MS;
            text-align: center;
        }
    </style>

    <!--Objetivos Propostas-->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
        google.load('visualization', '1.0', { 'packages': ['corechart'] });

        google.setOnLoadCallback(drawChart);

        function drawChart() {

            // Create the data table.
            var data = new google.visualization.DataTable();
            data.addColumn('string','element');
            data.addColumn('number','value');
            data.addRows(@Model.dtSourceObjetivosPropostas);

            // Set chart options
            var options = {
                backgroundColor: '#192B37',
                backgroundColor: { fill: '#192B37' },
                'title': '',
                titleTextStyle: { color: 'white' },
                chartArea: { left: '40', height: '80%', width: '80%' },
                is3D: true,
                //slices: { 0: { offset: 0.2 } },
                legend: {
                    textStyle: {color: 'white'}
                }
            };

            // Instantiate and draw our chart, passing in some options.
            var chart = new google.visualization.PieChart(document.getElementById('chart_divObjetivosPropostas'));
            chart.draw(data, options);
        }
    </script>

    <!--Objetivos Atividades-->
    <script type="text/javascript">
        google.load('visualization', '1.0', { 'packages': ['corechart'] });

        google.setOnLoadCallback(drawChart);

        function drawChart() {

            // Create the data table.
            var data = new google.visualization.DataTable();
            data.addColumn('string','element');
            data.addColumn('number','value');
            data.addRows(@!Model.dtSourceObjetivosAtividades);

            // Set chart options
            var options = {
                backgroundColor: '#192B37',
                backgroundColor: { fill: '#192B37' },
                'title': '',
                titleTextStyle: { color: 'white' },
                chartArea: { left: '40', height: '80%', width: '80%' },
                is3D: true,
                //slices: { 0: { offset: 0.2 } },
                legend: {
                    textStyle: {color: 'white'}
                }
            };

            // Instantiate and draw our chart, passing in some options.
            var chart = new google.visualization.PieChart(document.getElementById('chart_divObjetivosAtividades'));
            chart.draw(data, options);
        }
    </script>

    <!--Altura Propostas-->
    <script type="text/javascript">
        google.load("visualization", "1", { packages: ["corechart"] });
        google.setOnLoadCallback(drawChart);

        function drawChart() {

            var data = new google.visualization.DataTable();
            data.addColumn('string', 'element');
            data.addColumn('number', 'Percentagem');
            data.addRows(@Model.dtSourceAlturaPropostas);

            var options = {
                annotations: {
                    textStyle: { color: 'white' }
                },
                backgroundColor: '#192B37',
                'title': '',
                titleTextStyle: { color: 'white' },
                hAxis: { title: '', minValue: 0, baselineColor: 'white', textStyle: {color: 'white' } },
                chartArea: { left: '100', height: '80%', width: '80%' },
                legend: { position: "none" },
                vAxis: { title: '', textStyle: {color: 'white'} }
            };

            var chart = new google.visualization.BarChart(document.getElementById('chart_divAlturaPropostas'));
            chart.draw(data, options);
        }
    </script>

    <!--Altura Atividades-->
    <script type="text/javascript">
        google.load("visualization", "1", { packages: ["corechart"] });
        google.setOnLoadCallback(drawChart);

        function drawChart() {

            var data = new google.visualization.DataTable();
            data.addColumn('string', 'element');
            data.addColumn('number', 'Percentagem');
            data.addRows(@Model.dtSourceAlturaAtividades);

            var options = {
                annotations: {
                    textStyle: { color: 'white' }
                },
                backgroundColor: '#192B37',
                'title': '',
                titleTextStyle: { color: 'white' },
                hAxis: { title: '', minValue: 0, baselineColor: 'white', textStyle: {color: 'white' } },
                chartArea: { left: '100', height: '80%', width: '80%' },
                legend: { position: "none" },
                vAxis: { title: '', textStyle: {color: 'white'} }
            };

            var chart = new google.visualization.BarChart(document.getElementById('chart_divAlturaAtividades'));
            chart.draw(data, options);
        }
    </script>

    <!--Anos Propostas-->
    <script type="text/javascript">
        google.load("visualization", "1", { packages: ["corechart"] });
        google.setOnLoadCallback(drawChart);

        function drawChart() {

            var data = new google.visualization.DataTable();
            data.addColumn('string', 'element');
            data.addColumn('number', 'Percentagem');
            data.addRows(@Model.dtSourceAnosPropostas);

            var options = {
                annotations: {
                    textStyle: { color: 'white' }
                },
                backgroundColor: '#192B37',
                'title': '',
                titleTextStyle: { color: 'white' },
                hAxis: { title: '', minValue: 0, baselineColor: 'white', textStyle: {color: 'white' } },
                chartArea: { left: '100', height: '80%', width: '80%' },
                legend: { position: "none" },
                vAxis: { title: '', textStyle: {color: 'white'} }
            };

            var chart = new google.visualization.BarChart(document.getElementById('chart_divAnosPropostas'));
            chart.draw(data, options);
        }
    </script>

    <!--Anos Atividades-->
    <script type="text/javascript">
        google.load("visualization", "1", { packages: ["corechart"] });
        google.setOnLoadCallback(drawChart);

        function drawChart() {

            var data = new google.visualization.DataTable();
            data.addColumn('string', 'element');
            data.addColumn('number', 'Percentagem');
            data.addRows(@Model.dtSourceAnosAtividades);

            var options = {
                annotations: {
                    textStyle: { color: 'white' }
                },
                backgroundColor: '#192B37',
                'title': '',
                titleTextStyle: { color: 'white' },
                hAxis: { title: '', minValue: 0, baselineColor: 'white', textStyle: {color: 'white' } },
                chartArea: { left: '100', height: '80%', width: '80%' },
                legend: { position: "none" },
                vAxis: { title: '', textStyle: {color: 'white'} }
            };

            var chart = new google.visualization.BarChart(document.getElementById('chart_divAnosAtividades'));
            chart.draw(data, options);
        }
    </script>

    <!--Estrutura Area Atividades-->
    <script type="text/javascript">
        google.load('visualization', '1.0', { 'packages': ['corechart'] });

        google.setOnLoadCallback(drawChart);

        function drawChart() {

            // Create the data table.
            var data = new google.visualization.DataTable();
            data.addColumn('string','element');
            data.addColumn('number','value');
            data.addRows(@Model.dtSourceEstruturaAtividades);

            // Set chart options
            var options = {
                backgroundColor: '#192B37',
                backgroundColor: { fill: '#192B37' },
                'title': '',
                titleTextStyle: { color: 'white' },
                chartArea: { left: '40', height: '80%', width: '80%' },
                is3D: true,
                //slices: { 0: { offset: 0.2 } },
                legend: {
                    textStyle: {color: 'white'}
                }
            };

            // Instantiate and draw our chart, passing in some options.
            var chart = new google.visualization.PieChart(document.getElementById('chart_divEstruturaAreaAtividades'));
            chart.draw(data, options);
        }
    </script>

    <!--Estrutura Area Propostas-->
    <script type="text/javascript">
        google.load('visualization', '1.0', { 'packages': ['corechart'] });

        google.setOnLoadCallback(drawChart);

        function drawChart() {

            // Create the data table.
            var data = new google.visualization.DataTable();
            data.addColumn('string','element');
            data.addColumn('number','value');
            data.addRows(@Model.dtSourceEstruturaPropostas);

            // Set chart options
            var options = {
                backgroundColor: '#192B37',
                backgroundColor: { fill: '#192B37' },
                'title': '',
                titleTextStyle: { color: 'white' },
                chartArea: { left: '40', height: '80%', width: '80%' },
                is3D: true,
                //slices: { 0: { offset: 0.2 } },
                legend: {
                    textStyle: {color: 'white'}
                }
            };

            // Instantiate and draw our chart, passing in some options.
            var chart = new google.visualization.PieChart(document.getElementById('chart_divEstruturaAreaPropostas'));
            chart.draw(data, options);
        }
    </script>

    <!--Categoria Modalidade Atividades-->
    <script type="text/javascript">
        google.load("visualization", "1", { packages: ["corechart"] });
        google.setOnLoadCallback(drawChart);

        function drawChart() {

            var data = new google.visualization.DataTable();
            data.addColumn('string', 'element');
            data.addColumn('number', 'Percentagem');
            data.addRows(@Model.dtSourceCategoriaAtividades);

            var options = {
                annotations: {
                    textStyle: { color: 'white' }
                },
                backgroundColor: '#192B37',
                'title': '',
                titleTextStyle: { color: 'white' },
                hAxis: { title: '', minValue: 0, baselineColor: 'white', textStyle: {color: 'white' } },
                chartArea: { left: '100', height: '80%', width: '80%' },
                legend: { position: "none" },
                vAxis: { title: '', textStyle: {color: 'white'} }
            };

            var chart = new google.visualization.BarChart(document.getElementById('chart_divCategoriaModalidadeAtividades'));
            chart.draw(data, options);
        }
    </script>

    <!--Categoria Modalidade Proposta-->
    <script type="text/javascript">
        google.load("visualization", "1", { packages: ["corechart"] });
        google.setOnLoadCallback(drawChart);

        function drawChart() {

            var data = new google.visualization.DataTable();
            data.addColumn('string', 'element');
            data.addColumn('number', 'Percentagem');
            data.addRows(@Model.dtSourceCategoriaPropostas);

            var options = {
                annotations: {
                    textStyle: { color: 'white' }
                },
                backgroundColor: '#192B37',
                'title': '',
                titleTextStyle: { color: 'white' },
                hAxis: { title: '', minValue: 0, baselineColor: 'white', textStyle: {color: 'white' } },
                chartArea: { left: '100', height: '80%', width: '80%' },
                legend: { position: "none" },
                vAxis: { title: '', textStyle: {color: 'white'} }
            };

            var chart = new google.visualization.BarChart(document.getElementById('chart_divCategoriaModalidadePropostas'));
            chart.draw(data, options);
        }
    </script>

    <!--Atividades Realizadas-->
    <script type="text/javascript">
        google.load("visualization", "1", { packages: ["gauge"] });
        google.setOnLoadCallback(drawChart);

        function drawChart() {

            var data = google.visualization.arrayToDataTable([['Label','Value'],[' ', 0]]);

            var options = {
                width: '100%', height: '100%',
                redFrom: @Model.atividadesRealizadasRedLine, redTo: 100,
                yellowFrom: 0, yellowTo: 0,
                minorTicks: 5,
                animation:{
                    duration: 5000,
                    easing: 'out'},
            };

            var chart = new google.visualization.Gauge(document.getElementById('chart_divAtividadesRealizadas'));
            chart.draw(data, options);

            //needed to make the annimation run
            var filledData = google.visualization.arrayToDataTable([['Label','Value'],[' ', @Model.atividadesRealizadas]]);
            chart.draw(filledData, options);
        }
    </script>

    <!--Propostas Aprovadas-->
    <script type="text/javascript">
        google.load("visualization", "1", { packages: ["gauge"] });
        google.setOnLoadCallback(drawChart);

        function drawChart() {

            var data = google.visualization.arrayToDataTable([['Label','Value'],[' ', 0]]);

            var options = {
                width: '100%', height: '100%',
                redFrom: 100, redTo: 100,
                yellowFrom: 0, yellowTo: 0,
                minorTicks: 5,
                animation:{
                    duration: 5000,
                    easing: 'out'},
            };

            var chart = new google.visualization.Gauge(document.getElementById('chart_divPropostasAprovadas'));
            chart.draw(data, options);

            //needed to make the annimation run
            var filledData = google.visualization.arrayToDataTable([['Label','Value'],[' ', @Model.propostasAprovadas]]);
            chart.draw(filledData, options);
        }
    </script>
</head>
<body>

    <div>
        <div>
            <div class="box">
                <div class="boxYellowTitle"><label class="title">Propostas</label></div>
                <div class="boxYellowContent"><label class="value">@Model.numPropostas</label></div>
            </div>

            <div class="box" style="margin-left:30px;">
                <div class="boxPurpleTitle"><label class="title">Submetidas</label></div>
                <div class="boxPurpleContent"><label class="value">@Model.numSubmetidas</label></div>
            </div>

            <div class="box">
                <div class="boxGreenTitle"><label class="title">Validadas</label></div>
                <div class="boxGreenContent"><label class="value">@Model.numValidadas</label></div>
            </div>

            <div class="box">
                <div class="boxOrangeTitle"><label class="title">Devolvidas</label></div>
                <div class="boxOrangeContent"><label class="value">@Model.numDevolvidas</label></div>
            </div>

            <div class="box">
                <div class="boxBlueTitle"><label class="title">Aprovadas</label></div>
                <div class="boxBlueContent"><label class="value">@Model.numAprovadas</label></div>
            </div>

            <div class="box" style="margin-left:46px;">
                <div class="boxGreyTitle"><label class="title">Atividades</label></div>
                <div class="boxGreyContent"><label class="value">@Model.numAtividades</label></div>
            </div>

            <div class="box" style="margin-left:30px;">
                <div class="boxRedTitle"><label class="title">Canceladas</label></div>
                <div class="boxRedContent"><label class="value">@Model.numCanceladas</label></div>
            </div>

            <div class="box">
                <div class="boxGreenyTitle"><label class="title">Realizadas</label></div>
                <div class="boxGreenyContent"><label class="value">@Model.numRealizadas</label></div>
            </div>
        </div>

        <div style="margin-top: 10px;">
            <label class="titleAreaGraph">Propostas</label>
            <label class="titleAreaGraph">Atividades</label>
        </div>

        <div>
            <div style="height:460px; width:665px; overflow-y: auto; float:left;">
                <div style="">
                    <div style="display: inline-block;">
                        <div class="graphBox">
                            <div class ="graphBoxTitle">
                                <label class="graphTitle">Objetivos do projecto educativo</label>
                            </div>

                            <div id="chart_divObjetivosPropostas" class="graphBoxContent"></div>
                        </div>
                    </div>

                    <div style="display: inline-block;">
                        <div class="graphBox">
                            <div class="graphBoxTitle">
                                <label class="graphTitle">Objetivos do projecto educativo</label>
                            </div>
                            <div id="chart_divObjetivosAtividades" class="graphBoxContent"></div>
                        </div>
                    </div>
                </div>

                <div style="margin-top: 5px;">
                    <div style="display: inline-block;">
                        <div class="graphBox">
                            <div class="graphBoxTitle">
                                <label class="graphTitle">Altura da realização</label>
                            </div>
                            <div id="chart_divAlturaPropostas" class="graphBoxContent"></div>
                        </div>
                    </div>

                    <div style="display: inline-block;">
                        <div class="graphBox">
                            <div class="graphBoxTitle">
                                <label class="graphTitle">Altura da realização</label>
                            </div>
                            <div id="chart_divAlturaAtividades" class="graphBoxContent"></div>
                        </div>
                    </div>
                </div>

                <div style="margin-top: 5px;">
                    <div style="display: inline-block;">
                        <div class="graphBox">
                            <div class="graphBoxTitle">
                                <label class="graphTitle">Anos de escolaridade</label>
                            </div>
                            <div id="chart_divAnosPropostas" class="graphBoxContent"></div>
                        </div>
                    </div>

                    <div style="display: inline-block;">
                        <div class="graphBox">
                            <div class="graphBoxTitle">
                                <label class="graphTitle">Anos de escolaridade</label>
                            </div>
                            <div id="chart_divAnosAtividades" class="graphBoxContent"></div>
                        </div>
                    </div>
                </div>

                <div style="margin-top: 5px;">
                    <div style="display: inline-block;">
                        <div class="graphBox">
                            <div class="graphBoxTitle">
                                <label class="graphTitle">Estrutura/Área</label>
                            </div>
                            <div id="chart_divEstruturaAreaPropostas" class="graphBoxContent"></div>
                        </div>
                    </div>

                    <div style="display: inline-block;">
                        <div class="graphBox">
                            <div class="graphBoxTitle">
                                <label class="graphTitle">Estrutura/Área</label>
                            </div>
                            <div id="chart_divEstruturaAreaAtividades" class="graphBoxContent"></div>
                        </div>
                    </div>
                </div>

                <div style="margin-top: 5px;">
                    <div style="display: inline-block;">
                        <div class="graphBox">
                            <div class="graphBoxTitle">
                                <label class="graphTitle">Categoria/Modalidade</label>
                            </div>
                            <div id="chart_divCategoriaModalidadePropostas" class="graphBoxContent"></div>
                        </div>
                    </div>

                    <div style="display: inline-block;">
                        <div class="graphBox">
                            <div class="graphBoxTitle">
                                <label class="graphTitle">Categoria/Modalidade</label>
                            </div>
                            <div id="chart_divCategoriaModalidadeAtividades" class="graphBoxContent"></div>
                        </div>
                    </div>
                </div>
            </div>

            <!--Gauge-->
            <div style="float:right;">
                <div style="">
                    <div class="graphGauge">
                        <div class="graphGaugeTitle">
                            <label class="graphTitle">% propostas aprovadas</label>
                        </div>
                        <div id="chart_divPropostasAprovadas" class="graphGaugeContent"></div>
                    </div>

                    <div class="graphGauge" style="margin-top:20px;">
                        <div class="graphGaugeTitle">
                            <label class="graphTitle">% atividades realizadas</label>
                        </div>
                        <div id="chart_divAtividadesRealizadas" class="graphGaugeContent"></div>
                    </div>
                </div>
            </div>

        </div>

    </div>

    <div style="width: 100%; float:left; padding-top:5px;">
        <label class="brand">Inovar +AZ - Sistemas de Informação© - Todos os direitos reservados</label>
    </div>

</body>
</html>