332 lines
13 KiB
PHP
Executable File
332 lines
13 KiB
PHP
Executable File
@extends('layouts.vertical', ["page_title"=> "Dashboard", "mode" => $mode ?? "", "demo" => $demo ?? ""])
|
|
|
|
@section('css')
|
|
<!-- third party css -->
|
|
<link href="{{asset('assets/libs/flatpickr/flatpickr.min.css')}}" rel="stylesheet" type="text/css" />
|
|
<link href="{{asset('assets/libs/selectize/selectize.min.css')}}" rel="stylesheet" type="text/css" />
|
|
<!-- third party css end -->
|
|
@endsection
|
|
|
|
@section('content')
|
|
<!-- Start Content-->
|
|
|
|
<div class="container-fluid">
|
|
|
|
<!-- start page title -->
|
|
<div class="row">
|
|
<div class="col-6">
|
|
<div class="page-title-box">
|
|
<h4 class="page-title">Dashboard</h4>
|
|
</div>
|
|
</div>
|
|
<div class="col-6 mt-2">
|
|
<a href="/index?refresh=1" class="btn btn-dark rounded waves-effect waves-light float-end">Refresh Data</a>
|
|
</div>
|
|
</div>
|
|
<!-- end page title -->
|
|
|
|
<div class="row">
|
|
@foreach($metrics as $metric)
|
|
<div class="col-lg-4">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h4 class="header-title mb-0">{{$metric->name}}</h4>
|
|
<h6>{{$metric->current_period}}</h6>
|
|
<div class="widget-chart text-center" dir="ltr">
|
|
<div id="chart-{{$metric->id}}" class="mt-0" data-colors="#f1556c"></div>
|
|
<h5 class="text-muted mt-0">{{$metric->label}}</h5>
|
|
<h2>{{$metric->value}} {{$metric->type=='verses' ? ' / ' . $metric->max : ''}} </h2>
|
|
<div class="button-list">
|
|
@foreach($metric->available_charts as $chart)
|
|
<a href="/metricreport/report?id={{$metric->id}}&type={{$chart->type}}&chart={{$chart->chart}}" class="btn btn-soft-blue btn-rounded">{{$chart->name}} Chart</a>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div> <!-- end card -->
|
|
</div> <!-- end col-->
|
|
@endforeach
|
|
</div>
|
|
|
|
@foreach($widgets as $widget)
|
|
@widget($widget->widget_name, (array)$widget)
|
|
@endforeach
|
|
<!-- end row -->
|
|
@if(sizeof($campaigns) >0)
|
|
<div class="row" id="campaign-wrapper">
|
|
<div class="col-12">
|
|
<div class="page-title-box">
|
|
<h4 class="page-title">Campaigns</h4>
|
|
</div>
|
|
</div>
|
|
@foreach($campaigns as $campaign)
|
|
<div class="col-lg-4">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h4 class="header-title mb-0">{{$campaign->title}}</h4>
|
|
<h6>This Month</h6>
|
|
<div class="row">
|
|
<div class="col-6">
|
|
<div class="text-center" dir="ltr">
|
|
<h2>{{$campaign->self_points->points}}</h2>
|
|
<h5>{{$campaign->self_points->text}}</h5>
|
|
</div>
|
|
</div>
|
|
<div class="col-6">
|
|
<div class="text-center" dir="ltr">
|
|
<h2>{{$campaign->team_rank->points}}</h2>
|
|
<h5>{{$campaign->team_rank->text}}</h5>
|
|
</div>
|
|
</div>
|
|
<div class="col-6">
|
|
<div class="text-center" dir="ltr">
|
|
<h2>{{$campaign->overall_rank->points}}</h2>
|
|
<h5>{{$campaign->overall_rank->text}}</h5>
|
|
</div>
|
|
</div>
|
|
<div class="col-6">
|
|
<div class="text-center" dir="ltr">
|
|
<h2>{{$campaign->rank_in_team->points}}</h2>
|
|
<h5>{{$campaign->rank_in_team->text}}</h5>
|
|
</div>
|
|
</div>
|
|
<div class="col-12">
|
|
<div class="button-list">
|
|
<div class="text-center" dir="ltr">
|
|
<a href="/campaign/dashboard?id={{$campaign->id}}" class="btn btn-soft-blue btn-rounded">Dashboard</a>
|
|
<a href="/campaign/report?id={{$campaign->id}}" class="btn btn-soft-blue btn-rounded">Detail View</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div> <!-- end card -->
|
|
</div> <!-- end col-->
|
|
@endforeach
|
|
</div>
|
|
@endif
|
|
</div> <!-- container -->
|
|
<div id="previewImg" class="d-none"></div>
|
|
<style type="text/css">
|
|
.apexcharts-legend {display: none;}
|
|
</style>
|
|
@endsection
|
|
|
|
@section('script')
|
|
<!-- third party js -->
|
|
<script src="{{asset('assets/libs/flatpickr/flatpickr.min.js')}}"></script>
|
|
<script src="{{asset('assets/libs/apexcharts/apexcharts.min.js')}}"></script>
|
|
<script src="{{asset('assets/js/html2canvas.min.js')}}" integrity="sha512-BNaRQnYJYiPSqHHDb58B0yaPfCu+Wgds8Gp/gU33kqBtgNS4tSPHuGibyoeqMV/TJlSKda6FXzoEyYGjTe+vXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
|
<!-- third party js ends -->
|
|
|
|
<script type="text/javascript">
|
|
jQuery(document).ready(function($){
|
|
$('.js-milestone-team-leaderboard').each(function() {
|
|
var $box = $(this);
|
|
var listUrl = $box.data('list-url');
|
|
$.ajax({
|
|
url: listUrl,
|
|
type: 'GET',
|
|
success: function(html) {
|
|
$box.html(html);
|
|
},
|
|
error: function() {
|
|
$box.html('<p class="text-danger mb-0">Unable to load leaderboards.</p>');
|
|
}
|
|
});
|
|
});
|
|
|
|
$(document).on('click', '.js-milestone-team-leaderboard .mlb-pill', function(e) {
|
|
e.preventDefault();
|
|
var $pill = $(this);
|
|
var $card = $pill.closest('.mlb-card');
|
|
var index = String($pill.data('index'));
|
|
var detailsUrl = $pill.attr('data-details-url');
|
|
var src = $card.find('.js-mlb-podium-src[data-index="' + index + '"]')[0];
|
|
|
|
$card.find('.mlb-pill').removeClass('is-active').attr('aria-pressed', 'false');
|
|
$pill.addClass('is-active').attr('aria-pressed', 'true');
|
|
|
|
if (detailsUrl) {
|
|
$card.find('.js-mlb-details').attr('href', detailsUrl);
|
|
}
|
|
if (src) {
|
|
$card.find('.js-mlb-podium').html(src.innerHTML);
|
|
}
|
|
});
|
|
|
|
var colors = ['#01C14B', '#FF8050', '#4A5CD0', '#FECD00', '#707070'];
|
|
var dataColors = $("#total-revenue").data('colors');
|
|
if (dataColors) {
|
|
colors = dataColors.split(",");
|
|
}
|
|
let options = {}
|
|
let chart = {}
|
|
let values = []
|
|
@foreach($metrics as $metric)
|
|
@if($metric->agg_type == 'individual')
|
|
@if($metric->type == 'grouped')
|
|
values = {!!json_encode($metric->values)!!}
|
|
options = {
|
|
series: values.map(a => a.value),
|
|
chart: {
|
|
width: 250,
|
|
type: 'pie',
|
|
animations: {
|
|
enabled: true,
|
|
easing: 'easeinout',
|
|
speed: 2000,
|
|
}
|
|
},
|
|
labels: values.map(a => a.label),
|
|
responsive: [{
|
|
breakpoint: 480,
|
|
options: {
|
|
chart: {
|
|
width: 250
|
|
},
|
|
legend: {
|
|
position: 'bottom'
|
|
}
|
|
}
|
|
}]
|
|
};
|
|
@elseif($metric->type == 'simple')
|
|
options = {
|
|
series: [{{ceil($metric->max>0 ? ($metric->value/$metric->max)*100 : 0 )}}],
|
|
chart: {
|
|
height: 250,
|
|
type: 'radialBar',
|
|
animations: {
|
|
enabled: true,
|
|
easing: 'easeinout',
|
|
speed: 2000,
|
|
}
|
|
},
|
|
plotOptions: {
|
|
radialBar: {
|
|
startAngle: -90,
|
|
endAngle: 270,
|
|
hollow: {
|
|
size: '58%',
|
|
}
|
|
},
|
|
},
|
|
fill: {
|
|
type: 'gradient',
|
|
gradient: {
|
|
shade: 'light',
|
|
shadeIntensity: 0.15,
|
|
inverseColors: false,
|
|
opacityFrom: 1,
|
|
opacityTo: 1,
|
|
stops: [0, 50, 65, 91]
|
|
},
|
|
},
|
|
stroke: {
|
|
dashArray: 7
|
|
},
|
|
colors: colors,
|
|
labels: ['{{$metric->label}}'],
|
|
};
|
|
@endif
|
|
|
|
@elseif($metric->agg_type == 'team')
|
|
@if($metric->type == 'grouped')
|
|
values = {!!json_encode($metric->values)!!}
|
|
options = {
|
|
series: values.map(a => a.value),
|
|
chart: {
|
|
width: 250,
|
|
type: 'pie',
|
|
animations: {
|
|
enabled: true,
|
|
easing: 'easeinout',
|
|
speed: 2000,
|
|
}
|
|
},
|
|
labels: values.map(a => a.label),
|
|
responsive: [{
|
|
breakpoint: 480,
|
|
options: {
|
|
chart: {
|
|
width: 250
|
|
},
|
|
legend: {
|
|
position: 'bottom'
|
|
}
|
|
}
|
|
}]
|
|
};
|
|
@elseif($metric->type == 'simple' || $metric->type == 'verses')
|
|
options = {
|
|
series: [{{ceil($metric->max>0 ? ($metric->value/$metric->max)*100 : 0 )}}],
|
|
chart: {
|
|
height: 250,
|
|
type: 'radialBar',
|
|
animations: {
|
|
enabled: true,
|
|
easing: 'easeinout',
|
|
speed: 2000,
|
|
}
|
|
},
|
|
plotOptions: {
|
|
radialBar: {
|
|
hollow: {
|
|
size: '68%',
|
|
},
|
|
@if($metric->type == 'verses')
|
|
dataLabels: {
|
|
name: { show: false },
|
|
value: {
|
|
show: true,
|
|
offsetY: 8,
|
|
fontSize: '22px'
|
|
}
|
|
}
|
|
@endif
|
|
},
|
|
},
|
|
fill: {
|
|
type: 'gradient',
|
|
gradient: {
|
|
shade: 'dark',
|
|
shadeIntensity: 0.15,
|
|
inverseColors: false,
|
|
opacityFrom: 1,
|
|
opacityTo: 1,
|
|
stops: [0, 50, 65, 91]
|
|
},
|
|
},
|
|
stroke: {
|
|
dashArray: 4
|
|
},
|
|
colors: colors,
|
|
labels: ['{{$metric->type == 'verses' ? '' : $metric->label}}'],
|
|
};
|
|
@endif
|
|
@endif
|
|
chart['{{$metric->id}}'] = new ApexCharts(document.querySelector("#chart-{{$metric->id}}"), options);
|
|
chart['{{$metric->id}}'].render();
|
|
@endforeach
|
|
|
|
$('.dlscreenshot').click(function(){
|
|
html2canvas(document.getElementById( $(this).attr('target') ), {
|
|
allowTaint: true, useCORS: true
|
|
}).then(function (canvas) {
|
|
var anchorTag = document.createElement("a");
|
|
document.body.appendChild(anchorTag);
|
|
document.getElementById("previewImg").appendChild(canvas);
|
|
anchorTag.download = "filename.jpg";
|
|
anchorTag.href = canvas.toDataURL();
|
|
anchorTag.target = '_blank';
|
|
anchorTag.click();
|
|
});
|
|
})
|
|
|
|
});
|
|
</script>
|
|
|
|
|
|
@endsection
|