59 lines
2.4 KiB
PHP
59 lines
2.4 KiB
PHP
@extends('layouts.master')
|
|
@section('content')
|
|
<!-- Page Title Start -->
|
|
<div class="flex justify-between items-center mb-6">
|
|
<h4 class="text-slate-900 dark:text-slate-200 text-lg font-medium">{{ $title }}</h4>
|
|
@if(auth()->user()->group_id == 1)
|
|
<a href="{{ url('dashboard/dataset/resource/'.encode_id($id)) }}" class="btn bg-primary text-white"><i class="ri-arrow-left-line"></i> Kembali</a>
|
|
@else
|
|
<a href="{{ url('dashboard') }}" class="btn bg-primary text-white"><i class="ri-arrow-left-line"></i> Kembali</a>
|
|
@endif
|
|
</div>
|
|
<!-- Page Title End -->
|
|
<div class="grid xl:grid-cols-1 lg:grid-cols-1 grid-cols-1 gap-6 mb-6">
|
|
<div class="card">
|
|
<div class="p-6">
|
|
<div class="flex flex-col items-center">
|
|
<div class="w-full">
|
|
<h5 class="text-lg bold mb-5">{{@$dataset->instansi->name}}</h5>
|
|
<p>Ini adalah data {{$dataset->template->name}} 5 tahun terakhir, berdasarkan data yang sudah di upload sebelumnya</p>
|
|
<div id="chart"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- end row -->
|
|
@endsection
|
|
@section('js')
|
|
<!-- Apex Charts js -->
|
|
<script src="{{asset('assets/libs/apexcharts/apexcharts.min.js')}}"></script>
|
|
|
|
<!-- Vector Map Js -->
|
|
<script src="{{asset('assets/libs/jsvectormap/js/jsvectormap.min.js')}}"></script>
|
|
<script src="{{asset('assets/libs/jsvectormap/maps/world-merc.js')}}"></script>
|
|
<script src="{{asset('assets/libs/jsvectormap/maps/world.js')}}"></script>
|
|
<script>
|
|
var base_url = '{{ url("dashboard/api/chart/".encode_id($template->MsTemplateId)."/".encode_id($instansi_id)) }}';
|
|
fetch(base_url).then(res => res.json()).then(
|
|
res => {
|
|
const options = {
|
|
chart: {
|
|
type: 'line',
|
|
height: 480
|
|
},
|
|
title: { text: res.title, align: 'center' },
|
|
xaxis: { categories: res.years, title: { text: 'Tahun' } },
|
|
yaxis: [
|
|
|
|
{ opposite: false, min: 0, title: { text: res.yOpposite } }
|
|
],
|
|
tooltip: { shared: true, intersect: false },
|
|
stroke: { width: [0,1] },
|
|
plotOptions: { bar: { columnWidth: '45%' } },
|
|
legend: { position: 'left' },
|
|
series: res.series
|
|
}; new ApexCharts(document.querySelector("#chart"), options).render(); });
|
|
</script>
|
|
|
|
@endsection |