307 lines
14 KiB
PHP
307 lines
14 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-12">
|
|
<div class="page-title-box">
|
|
<h4 class="page-title">Dashboard</h4>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- end page title -->
|
|
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h4 class="header-title mb-2">{{$graph->name}}</h4>
|
|
|
|
<div id="cardCollpase4" class="collapse pt-3 show">
|
|
@if($graph->agg_type == 'individual')
|
|
<div class="btn-group mb-2">
|
|
<button type="button" class="btn btn-info leaderboard-prev" {{$graph->current_level==$graph->level?'disabled':''}}><i class="mdi mdi-play mdi-rotate-180 mdi-18px"></i></button>
|
|
<button type="button" class="btn btn-info">Level {{$graph->current_level}}</button>
|
|
<button type="button" class="btn btn-info leaderboard-next" {{$graph->current_level==1?'disabled':''}}><i class="mdi mdi-play mdi-18px"></i></button>
|
|
</div>
|
|
@endif
|
|
<div class="table-responsive">
|
|
<table class="table table-centered table-nowrap table-borderless mb-0">
|
|
<thead class="table-light">
|
|
<tr>
|
|
<th>Rank</th>
|
|
<th colspan="2">User</th>
|
|
<th>Designation</th>
|
|
<th>Units</th>
|
|
<th>Percent</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@foreach($graph->values as $i => $val)
|
|
<tr>
|
|
<td><img src="https://ui-avatars.com/api/?background={{$i>3?$colors[4]:$colors[$i]}}&name={{$val->rank}}" class="avatar-md"></td>
|
|
<td><img src="{{$val->user->avatar}}" class="avatar-sm rounded-circle"></td>
|
|
<td style="text-align:left;">{{$val->user->name}}</td>
|
|
<td>{{$val->user->designation}}</td>
|
|
<td>{{round($val->score, 2)}}</td>
|
|
<td>{{$graph->values[0]->rank != 0 ? ($graph->values[0]->rank == 1 ? ($graph->values[0]->score ? ceil(($val->score/$graph->values[0]->score)*100) : 0) : ($graph->values[1]->score ? ceil(($val->score/$graph->values[1]->score)*100) : 0 ) ) : 0 }}%</td>
|
|
</tr>
|
|
@endforeach
|
|
</tbody>
|
|
</table>
|
|
</div> <!-- .table-responsive -->
|
|
</div> <!-- end collapse-->
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="row">
|
|
@foreach($metrics as $metric)
|
|
<div class="col-lg-4">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<!-- <div class="dropdown float-end">
|
|
<a href="#" class="dropdown-toggle arrow-none card-drop" data-bs-toggle="dropdown" aria-expanded="false">
|
|
<i class="mdi mdi-dots-vertical"></i>
|
|
</a>
|
|
<div class="dropdown-menu dropdown-menu-end">
|
|
@foreach($metric->available_charts as $chart)
|
|
<a href="/metricreport/report?id={{$metric->id}}&type={{$chart->type}}&chart={{$chart->chart}}&period={{$metric->periods[0]->value}}" class="dropdown-item">{{$chart->name}} Chart</a>
|
|
@endforeach
|
|
</div>
|
|
</div> -->
|
|
<h4 class="header-title mb-0">{{$metric->name}}</h4>
|
|
<h6>{{$metric->periods[0]->label}}</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}}</h2>
|
|
<div class="button-list">
|
|
@foreach($metric->available_charts as $chart)
|
|
<a href="/metricreport/report?id={{$metric->id}}&type={{$chart->type}}&chart={{$chart->chart}}&period={{$metric->periods[0]->value}}" class="btn btn-soft-blue btn-rounded">{{$chart->name}} Chart</a>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div> <!-- end card -->
|
|
</div> <!-- end col-->
|
|
@endforeach
|
|
</div>
|
|
<!-- end row -->
|
|
|
|
@if(array_key_exists('value', $submission) )
|
|
<div class="row">
|
|
<div class="col-12 p-0">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="responsive-table-plugin">
|
|
<div class="table-rep-plugin">
|
|
<div class="table-responsive" data-pattern="priority-columns">
|
|
<table id="tech-companies-1" class="table table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th data-priority="1">Last Accessment</th>
|
|
<th data-priority="1">{{date("M Y", strtotime($submission['value']->record_date))}}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@php
|
|
$ques = ['area_of_strength','area_of_development','coaching_objective','development_time_frame','next_coaching_visit','development_action_plan'];
|
|
@endphp
|
|
@foreach($submission['questions'] as $code => $question)
|
|
@if(in_array($code, $ques))
|
|
<tr>
|
|
<th>{{$question->label}}</th>
|
|
@if(count((array)$question->options) > 0)
|
|
<td>{{ isset($question->options->{ $submission['value']->formdata->{$code} }) ? $question->options->{ $submission['value']->formdata->{$code} } : $submission['value']->formdata->{$code} }}</td>
|
|
@else
|
|
<td>{{ $submission['value']->formdata->{$code} }}</td>
|
|
@endif
|
|
</tr>
|
|
@endif
|
|
@endforeach
|
|
</tbody>
|
|
</table>
|
|
</div> <!-- end .table-responsive -->
|
|
|
|
</div> <!-- end .table-rep-plugin-->
|
|
</div> <!-- end .responsive-table-plugin-->
|
|
|
|
</div> <!-- end card body-->
|
|
</div> <!-- end card -->
|
|
</div><!-- end col-->
|
|
</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')
|
|
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 = new ApexCharts(document.querySelector("#chart-{{$metric->id}}"), options);
|
|
chart.render();
|
|
@endforeach
|
|
});
|
|
</script>
|
|
|
|
|
|
@endsection |