@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