dashboard.blade.php

@extends('layouts.app')

@section('content')

<style>
    .half-donut .label {
      font-size: 3rem;
    }
    .donut-chart-svg {
    }
    .donut-chart-legend {
      font-family: 'Open Sans', sans-serif;
    }
    /* legend */
    .legend {
      font-size: 14px;
    }
    rect {
      cursor: pointer; 
      stroke-width: 2;
    }
    rect.disabled {
      fill: transparent !important;
    }

    /* chart */
    #detail-donut {
      height: 800px;
      margin: 0 auto;
      position: relative;
      display: block;
      width: 800px; 
    }

</style>
<div class="container-fluid" id="container">
    <a href='{{ action('MarkController@heatchart', ["label" => "agregation.owa"]) }}'
            class='btn btn-primary btn-sm'>Heat</a>
    <div class="row">
        <div class="col-8 card">
            <h4 class="card-header text-center">Timeline 
                <select class="form-select form-select-sm" id="timeline-period">
                    <option selected>Time period</option>
                    <option value="1">2 hours</option>
                    <option value="2">1 hour</option>
                    <option value="3">30 min</option>
                </select>
                <button id="timeline_refresh" class="btn btn-primary btn-sm" >Refresh  <i class="fas fa-redo"></i></button>
                <a href='{{ action('MarkController@timeline') }}'
                    class='btn btn-primary btn-sm'>Full Screen  <i class="fas fa-external-link-alt"></i></a>
            </h4>
            <div class="card-body justify-content-center text-center" id="timeline"></div>
        </div>
        <div class="col-4 card">
            <h4 class="card-header text-center">Evidence per Agent
                <button id="donut-button" class="btn btn-primary btn-sm" >Show Detailed View</button>
            </h4>
            <div class="card-body justify-content-center text-center" id="evidence-count">
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-12 card" id="evidence-count-big" style="display: none; justify-content: center; align-items: center;">
            <h4> Total Evidences Selected Count: <span class="new-total-holder"></span> </h4>
            <p class="font">Uncheck categories to recalculate.</p>
            <div id="detail-donut"></div>
        </div>
    </div>
    <div class="row vh-100">
        <div class="col-sm-auto col-md-auto col-lg-auto col-xl-auto card">
            <div class="card-body">
                <h3 class="card-title">Available Agents <i class="fas fa-info-circle"></i></h3>
                <table class="table">
                    @foreach ($graph_elements as $graph_element)
                    @php
                        $name = $graph_element["name"];
                    @endphp
                    <tr>
                        <td>
                            <button id="{{ $name }}"
                            class="btn btn-primary btn-sm">
                                {{ $name }}
                            </button>
<!--                            <a href="/app/ranking/{{ $name }}"
                            class="btn btn-secondary btn-sm"> -->
                            <button id="{{ $name }}_search" class="btn btn-secondary btn-sm">
                                <i class="fas fa-search"></i>
                            </button>
<!--                            </a> -->
                        </td>
                    </tr>
                    @endforeach
                </table>
            </div>
        </div>
        <div class="col card" id="visualization"></div>
    </div>
</div>

<div class="text-muted bottom-right">
    Reload visualization in <span id="reload-countdown">300</span> seconds
</div>

<script type="text/javascript">
    //Initialize the RawData/Evidence/EvidencesPerAgent visualizations
    var rawdata_container = document.getElementById("data-donut");
    var evidence_container = document.getElementById("evidence-donut");
    var evidence_count = document.getElementById("evidence-count");
    var detail_evidence_count = document.getElementById("detail-donut");
    var agents = @json($graph_elements);

    //add a click listener to the timeline's refresh button
    document.getElementById("timeline_refresh").addEventListener("click", function () {
        var selected_period = $('#timeline-period').find("option:selected").text();
    })


    window.addEventListener('DOMContentLoaded', function() {

        //get timeline
        //Initialize the timeline
        $.get(
            'dashboard/timeline-data/3600',
            function(data) {
                console.log(data);
                //create the timeline evidences and sort them
                var timeline_evidences = create_timeline_evidences(data).sort((a, b) => (a.time > b.time ? 1 : -1));
                //create the donut evidences
                var donut_evidences = create_donut_evidences(timeline_evidences);
                //console.log(timeline_evidences);
                var svg_container = document.getElementById("timeline");
                var info_container = document.getElementById("evidence-count-big");

                LineChart(timeline_evidences,svg_container," ",  {
                    x: d => d.time,
                    y: d => d.amount,
                    z: d => d.label,
                    ev_data: d => d.evidences,
                    yLabel: "Amount",
                    width: (window.innerWidth*2)/3,
                    height: 500,
                    color: "steelblue"
                })

                //create the button to show/hide the detailed evidences per agent donut visualization
                var donut_button = document.getElementById("donut-button");
                $("#donut-button").click(function() {
                    $(this).toggleClass('btn-primary btn-secondary');
                    $("#evidence-count-big").toggle();
                    $(this).text(function(i, text) {
                        return text === "Hide" ? "Show Detailed View" : "Hide"; 
                    });
                });
                //create the small evidences per agent donut visualization
                new SimpleDonut({
                    element: evidence_count,
                    width: (window.innerWidth)/3,
                    height: 400,
                    data: donut_evidences
                });
                DetailDonut(donut_evidences, detail_evidence_count);
                }
        )
    });

    var json_elements = @json($graph_elements);
    var container = document.getElementById("visualization");
    //keep the ID of the interval function set for the refresh time
    var refresh_interval_id = 0;

    json_elements.forEach(function (arrayItem){
        var name = arrayItem.name;

        //add the EventListener to the Agent search button to display the rank listing
        var agent_search_name = name + "_search";
        document.getElementById(agent_search_name).addEventListener("click", function () {
            //clear the refreshing interval
            clearInterval(refresh_interval_id);
            var ranking_url = "ranking/" + name;
            //load the html of a page into the given container
            load_ranking_html(container, ranking_url);
        })
        //add the EventListener to the Agent buttons for drawing the Bubble Graphs
        document.getElementById(name).addEventListener("click", function () {
            //clear the refreshing interval if a new bubble graph is drawn
            clearInterval(refresh_interval_id);
            var reload_countdown = 300;
            //draw the Bubble graph for the given agent in the given container
            drawBubbleGraph(name, container, "");
            //set the refresh interval
            var refresh = setInterval(function() {
                reload_countdown -= 1;
                $('#reload-countdown').text(reload_countdown);

                if (reload_countdown === 0) {
                    //console.log('reload...');
                    reload_countdown = 300;
                    drawBubbleGraph(name, container, "");
                }
            }, 1000);
            //save the ID of the refresh Interval, to be cleared if new bubble graph is drawn
            refresh_interval_id = refresh;
        });
    })

    @include('scripts.line-chart')
    @include('scripts.simple-donut-script')
    @include('scripts.detail-donut-script')
    @include('scripts.bubble-script')
    @include('scripts.helper-functions')
</script>

@endsection