mirror of https://github.com/MISP/misp-dashboard
Added skeleton pieChart
=
parent
7d38f86e2d
commit
c3344cb804
|
|
@ -85,7 +85,7 @@ sources.addSource('global');
|
|||
var curNumLog = 0;
|
||||
var curMaxDataNumLog = 0;
|
||||
|
||||
var optionsGraph = {
|
||||
var optionsLineChart = {
|
||||
series: {
|
||||
shadowSize: 0 ,
|
||||
lines: {
|
||||
|
|
@ -109,6 +109,31 @@ var optionsGraph = {
|
|||
}
|
||||
};
|
||||
|
||||
function labelFormatter(label, series) {
|
||||
return "<div style='font-size:8pt; text-align:center; padding:2px; color:white;'>"
|
||||
+ label + "<br/>" + Math.round(series.percent) + "%</div>";
|
||||
}
|
||||
var optionsPieChart = {
|
||||
series: {
|
||||
pie: {
|
||||
innerRadius: 0.5,
|
||||
show: true,
|
||||
label: {
|
||||
show: true,
|
||||
radius: 1,
|
||||
formatter: labelFormatter,
|
||||
background: {
|
||||
opacity: 0.7,
|
||||
color: '#000'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
}
|
||||
};
|
||||
|
||||
$(document).ready(function () {
|
||||
createHead(function() {
|
||||
if (!!window.EventSource) {
|
||||
|
|
@ -133,9 +158,13 @@ $(document).ready(function () {
|
|||
});
|
||||
});
|
||||
|
||||
|
||||
//var plot1 = $.plot("#feedDiv1", [ { label: "Number of log messages", data: dataNumLog } ], optionsGraph);
|
||||
var plot1 = $.plot("#feedDiv1", sources.getEmptyData(), optionsGraph);
|
||||
var rData = [
|
||||
{ label: "Series1", data: 10},
|
||||
{ label: "Series2", data: 30},
|
||||
{ label: "Series3", data: 60}
|
||||
];
|
||||
var plotLineChart = $.plot("#feedDiv3", sources.getEmptyData(), optionsLineChart);
|
||||
var plotPieChart = $.plot("#feedDiv1", rData, optionsPieChart);
|
||||
updateChart()
|
||||
|
||||
function updateChart() {
|
||||
|
|
@ -147,10 +176,10 @@ function updateChart() {
|
|||
function updateChart1() {
|
||||
sources.slideSource();
|
||||
sources.resetCountOnSource();
|
||||
plot1.setData(sources.toArray());
|
||||
plot1.getOptions().yaxes[0].max = sources.getGlobalMax();
|
||||
plot1.setupGrid();
|
||||
plot1.draw();
|
||||
plotLineChart.setData(sources.toArray());
|
||||
plotLineChart.getOptions().yaxes[0].max = sources.getGlobalMax();
|
||||
plotLineChart.setupGrid();
|
||||
plotLineChart.draw();
|
||||
}
|
||||
|
||||
function updateChart2() {
|
||||
|
|
@ -171,12 +200,24 @@ function updateLogTable(feedName, log) {
|
|||
|
||||
// Remove old row
|
||||
var logSel = document.getElementById("log_select");
|
||||
if (tableBody.rows.length > logSel.options[logSel.options.selectedIndex].value){
|
||||
while (tableBody.rows.length != logSel.options[logSel.options.selectedIndex].value){
|
||||
//get height of pannel, find max num of item
|
||||
var maxNumLogItem = document.getElementById('divLogTable').clientHeight/37;
|
||||
maxNumLogItem -= 2; //take heading/padding/... into account
|
||||
if (maxNumLogItem - parseInt(maxNumLogItem) < 0.5) { //beautifier
|
||||
maxNumLogItem -= 1;
|
||||
}
|
||||
if (tableBody.rows.length > maxNumLogItem) {
|
||||
while (tableBody.rows.length >= maxNumLogItem){
|
||||
tableBody.deleteRow(0);
|
||||
}
|
||||
}
|
||||
|
||||
//if (tableBody.rows.length > logSel.options[logSel.options.selectedIndex].value){
|
||||
// while (tableBody.rows.length != logSel.options[logSel.options.selectedIndex].value){
|
||||
// tableBody.deleteRow(0);
|
||||
// }
|
||||
//}
|
||||
|
||||
}
|
||||
|
||||
function slide(orig, newData) {
|
||||
|
|
|
|||
|
|
@ -19,6 +19,12 @@
|
|||
|
||||
</head>
|
||||
|
||||
<style>
|
||||
table {
|
||||
overflow-y: scroll;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="wrapper">
|
||||
|
|
@ -37,40 +43,32 @@
|
|||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="col-lg-5">
|
||||
<div class="col-lg-5">
|
||||
|
||||
<div class="panel panel-default" style="margin-top: 15px;">
|
||||
<div class="panel panel-default" style="margin-top: 15px; height: 37vh;">
|
||||
<div class="panel-heading">
|
||||
<i class="fa fa-bar-chart-o fa-fw"></i> Log feed
|
||||
<i class="fa fa-bar-chart-o fa-fw"></i> Statistics
|
||||
</div>
|
||||
<div id="panelbody" class="panel-body">
|
||||
<div id="feedDiv1" style="width:100%; height:300px; position: relative;"></div>
|
||||
<div id="panelbody" class="panel-body" style="height: 37vh;">
|
||||
<div id="feedDiv1" style="width:100%; height: calc(100% - 30px); position: relative;"></div>
|
||||
</div>
|
||||
<!-- /.panel-body -->
|
||||
|
||||
</div>
|
||||
<!-- /.panel -->
|
||||
|
||||
<div class="panel panel-default">
|
||||
<div class="panel panel-default" style="height: 50vh;">
|
||||
<div class="panel-heading">
|
||||
<i class="fa fa-tasks fa-fw"></i> Logs
|
||||
<div class="pull-right">
|
||||
<label style="padding-bottom:2px;">
|
||||
<select class="form-control input-sm" id="log_select">
|
||||
<option value="10">10</option>
|
||||
<option value="25">25</option>
|
||||
<option value="50">50</option>
|
||||
<option value="100">100</option>
|
||||
</select>
|
||||
</label>
|
||||
<input id="checkbox_log_info" type="checkbox" value="info"> INFO
|
||||
<input id="checkbox_log_warning" type="checkbox" value="warning" checked="true"> WARNING
|
||||
<input id="checkbox_log_critical" type="checkbox" value="critical" checked="true"> CRITICAL
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div id="divLogTable" class="panel-body" style="height: 98%;">
|
||||
<div class="row" style="height: 100%;">
|
||||
<div class="col-lg-12" style="height: 100%;">
|
||||
<table class="table table-bordered table-hover table-striped" id="table_log">
|
||||
<thead id="table_log_head">
|
||||
</thead>
|
||||
|
|
@ -84,20 +82,30 @@
|
|||
</div>
|
||||
<!-- /.col-lg-6 -->
|
||||
<!-- /.col-lg-6 -->
|
||||
<!-- vh sum = 87 -->
|
||||
<div class="col-lg-7">
|
||||
|
||||
<div class="panel panel-default" style="margin-top: 15px;">
|
||||
<div class="panel panel-default" style="margin-top: 15px; height: 59vh;">
|
||||
<!--<div class="panel-heading">
|
||||
<i class="fa fa-bar-chart-o fa-fw"></i> Feed
|
||||
</div>-->
|
||||
<div id="panelbody" class="panel-body">
|
||||
<div id="feedDiv2" style="width:100%; height:700px; position: relative;"></div>
|
||||
<div id="panelbody" class="panel-body" style="height: 100%;">
|
||||
<div id="feedDiv2" style="width:100%; height: calc(100% - 30px); position: relative;"></div>
|
||||
</div>
|
||||
<!-- /.panel-body -->
|
||||
|
||||
</div>
|
||||
<!-- /.panel -->
|
||||
|
||||
<div class="panel panel-default" style="margin-top: 15px; height: 28vh;">
|
||||
<div class="panel-heading">
|
||||
<i class="fa fa-bar-chart-o fa-fw"></i> Log feed
|
||||
</div>
|
||||
<div id="panelbody" class="panel-body" style="width:100%; height: calc(100% - 30px);">
|
||||
<div id="feedDiv3" style="width:100%; height: calc(100% - 30px); position: relative;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- /.col-lg-6 -->
|
||||
</div>
|
||||
|
|
@ -124,6 +132,7 @@
|
|||
<script src="{{ url_for('static', filename='js/jquery.min.js') }}"></script>
|
||||
<!-- jQuery flot -->
|
||||
<script src="{{ url_for('static', filename='js/jquery.flot.js') }}"></script>
|
||||
<script src="{{ url_for('static', filename='js/jquery.flot.pie.min.js') }}"></script>
|
||||
<!-- Bootstrap Core JavaScript -->
|
||||
<script src="{{ url_for('static', filename='js/bootstrap.min.js') }}"></script>
|
||||
<!-- Index -->
|
||||
|
|
|
|||
Loading…
Reference in New Issue