270 lines
11 KiB
PHP
270 lines
11 KiB
PHP
@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 -->
|
|
<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>
|
|
<!-- third party js ends -->
|
|
|
|
<script type="text/javascript">
|
|
jQuery(document).ready(function($){
|
|
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%',
|
|
}
|
|
},
|
|
},
|
|
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->label}}'],
|
|
};
|
|
@endif
|
|
@endif
|
|
chart['{{$metric->id}}'] = new ApexCharts(document.querySelector("#chart-{{$metric->id}}"), options);
|
|
chart['{{$metric->id}}'].render();
|
|
@endforeach
|
|
});
|
|
</script>
|
|
|
|
|
|
@endsection |