{% extends "layouts/base.html" %}

{% block title %}Minerva - AWS Costs{% endblock %}

{% block stylesheets %}{% endblock stylesheets %}

{% block content %}

        <!-- ============================================================== -->
        <!-- Bread crumb and right sidebar toggle -->
        <!-- ============================================================== -->
        <div class="page-breadcrumb">
            <div class="row align-items-center">
                <div class="col-md-6 col-8 align-self-center">
                    <h3 class="page-title mb-0 p-0">Minerva</h3>
                    <div class="d-flex align-items-center">
                        <nav aria-label="breadcrumb">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="home">Home</a></li>
                                <li class="breadcrumb-item active"><a href="minerva">Minerva</a></li>
                                <li class="breadcrumb-item active" aria-current="page">AWS Costs</li>
                            </ol>
                        </nav>
                    </div>
                </div>
                {%  include 'includes/component/button__support.html' %}
            </div>
        </div>

        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-body">

                            <h3>AWS Services used by CBR</h3>

                            <p>
                            <div class="badge bg-danger">Temporarily disabled </div>

                                Until we add more cost-effective way to do this (AWS pricing model for these calls is really not working as it should)
                            </p>

                            <div id="chart_div" style="height: 500px; width: 100%"></div>

                            <!-- Div for the table chart -->
                            <div id="table_div" style="margin-top: 50px;"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

{% endblock content %}

{% block javascripts %}

    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

    <script>
        // Load the Visualization API and the corechart package.
        google.charts.load('current', {'packages':['corechart','table']});

        // Data from Flask
        var labels = {{ chart_labels | tojson }};
        var series = {{ chart_series | tojson }};
        var all_services = {{ all_services | tojson }};

        // Draw the chart when Visualization API is loaded
        google.charts.setOnLoadCallback(drawChart);

        function drawChart() {
            // Create an array to hold the chart data
            var dataArr = [ ['Day'].concat(all_services) ];

            for (var i = 0; i < labels.length; i++) {
                var row = [ labels[i] ];
                for (var j = 0; j < series.length; j++) {
                    row.push(series[j][i] || 0);
                }
                dataArr.push(row);
            }

            // Create DataTable
            var data = google.visualization.arrayToDataTable(dataArr);

            // Chart options
            var options = {
                //title: 'AWS Costs by Service Over Days',
                hAxis: {title: 'Day'},
                vAxis: {title: 'Cost'},
                legend: {
                   position: 'right',
                    textStyle: { fontSize: 12 }
                        },
                padding: 0,

                //legend: 'top'
            };

            return
            // Create and draw the chart
            var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
            chart.draw(data, options);


            // Create and draw the table
            var table = new google.visualization.Table(document.getElementById('table_div'));

            table.draw(data, {showRowNumber: true, width: '100%', height: '100%'});



        }
    </script>

        <style>
        #custom_legends {
            margin-top: 20px;
        }

        #legend_list li {
            display: inline-block;
            margin-right: 10px;
        }
    </style>


{% endblock javascripts %}
