hafifierahman
850 lines
29 KiB
PHP
850 lines
29 KiB
PHP
@extends('layouts.indexforth')
|
|
@section('content')
|
|
|
|
<style>
|
|
.breadcrumb-second {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
padding: 0.5rem 1rem;
|
|
margin-bottom: 1rem;
|
|
list-style: none;
|
|
border-radius: 0.375rem;
|
|
}
|
|
|
|
.icon-shape i {
|
|
top: 11px;
|
|
left: 15px;
|
|
}
|
|
|
|
@media (min-width:1400px) {
|
|
.card-title {
|
|
max-width: 180px;
|
|
}
|
|
|
|
.col-auto {
|
|
height: 48px;
|
|
position: absolute;
|
|
right: 0;
|
|
}
|
|
|
|
}
|
|
|
|
@media (max-width:1399px) {
|
|
.card-title {
|
|
max-width: 135px;
|
|
}
|
|
|
|
.col-auto {
|
|
height: 48px;
|
|
position: absolute;
|
|
right: 0;
|
|
}
|
|
|
|
}
|
|
|
|
@media (max-width:1200px) {
|
|
.card-title {
|
|
max-width: inherit;
|
|
}
|
|
}
|
|
|
|
.card-bg {
|
|
box-shadow: 0rem 1rem 2rem #0000003d !important;
|
|
}
|
|
</style>
|
|
|
|
<title>Analisa | Portal Pelanggan</title>
|
|
|
|
<section>
|
|
<img src="{{ asset('assets/img/material-kit/waves-white.svg') }}" alt="pattern-lines" class="position-absolute opacity-1 w-100">
|
|
<div class="container py-lg-4 py-4">
|
|
<div class="row mt-6">
|
|
<nav aria-label="breadcrumb-second">
|
|
<ol class="breadcrumb-second">
|
|
<li class="breadcrumb-item text-white opacity-5"><a href="/" style="color: #fff;">Home</a></li>
|
|
<li class="breadcrumb-item text-white active" aria-current="page">Ringkasan Transaksi Pembiayaan</li>
|
|
</ol>
|
|
</nav>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-xl-3 col-lg-6">
|
|
<div class="card card-stats mb-4 mb-xl-0">
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col">
|
|
<h6 class="card-title text-uppercase text-muted mb-0"> Jumlah Pembiayaan Semasa</h6>
|
|
<span class="h4 font-weight-bold mb-0">RM{{ number_format($totalgadai,2) }}</span>
|
|
</div>
|
|
<div class="col-auto">
|
|
<div class="icon icon-shape bg-danger text-white rounded-circle shadow">
|
|
<i class="fas fa-chart-bar"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-xl-3 col-lg-6">
|
|
<div class="card card-stats mb-4 mb-xl-0">
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col">
|
|
<h6 class="card-title text-uppercase text-muted mb-0">Pembiayaan Aktif</h6>
|
|
<span class="h4 font-weight-bold mb-0">{{ number_format($bilangan_belum_tebus) }}</span>
|
|
</div>
|
|
<div class="col-auto">
|
|
<div class="icon icon-shape bg-warning text-white rounded-circle shadow">
|
|
<i class="fas fa-chart-pie"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xl-3 col-lg-6">
|
|
<div class="card card-stats mb-4 mb-xl-0">
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col">
|
|
<h6 class="card-title text-uppercase text-muted mb-0">Pembiayaan Melebihi 6 Bulan</h6>
|
|
<span class="h4 font-weight-bold mb-0">{{ number_format($bilangan_melebihi_6_bulan) }}</span>
|
|
</div>
|
|
<div class="col-auto">
|
|
<div class="icon icon-shape bg-success text-white rounded-circle shadow">
|
|
<i class="fas fa-users"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xl-3 col-lg-6">
|
|
<div class="card card-stats mb-4 mb-xl-0">
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col">
|
|
<h6 class="card-title text-uppercase text-muted mb-0">Pembiayaan Akan Dilelong</h6>
|
|
<span class="h4 font-weight-bold mb-0">{{ number_format($bilakandilelong) }}</span>
|
|
</div>
|
|
<div class="col-auto">
|
|
<div class="icon icon-shape bg-info text-white rounded-circle shadow">
|
|
<i class="fas fa-gavel" style="margin-left: 2px;"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- <section class="py-7">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-xl-6 mb-5 mb-xl-0">
|
|
<div class="card bg-gradient-default shadow">
|
|
<div class="card-header bg-transparent">
|
|
<div class="row align-items-center">
|
|
<div class="col">
|
|
<h6 class="text-uppercase text-muted ls-1 mb-1">Keseluruhan</h6>
|
|
<h4 class="mb-0 text-primary">Jumlah Bayaran</h4>
|
|
</div>
|
|
<div class="col">
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="chart">
|
|
<canvas id="chart-sales" class="chart-canvas" style="height: 265px !important;"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xl-6">
|
|
<div class="card shadow">
|
|
<div class="card-header bg-transparent">
|
|
<div class="row align-items-center">
|
|
<div class="col">
|
|
<h6 class="text-uppercase text-muted ls-1 mb-1">Prestasi</h6>
|
|
<h4 class="mb-0 text-primary">Pembiayaan (Bulanan)</h4>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="chart">
|
|
<canvas id="chart-orders" class="chart-canvas" style="height: 265px !important;"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section> -->
|
|
<section class="bg-white">
|
|
<div class="container py-lg-4 py-4">
|
|
<div class="row justify-content-center">
|
|
<!-- <div class="col-xl-7 mb-5 mb-xl-0">
|
|
<div class="card shadow p-4">
|
|
<div class="card-header border-0">
|
|
<div class="row align-items-center">
|
|
<div class="col">
|
|
<h4 class="mb-0 text-primary">Pembiayaan Aktif</h4>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="table-responsive">
|
|
<table class="table align-items-center table-bordered table-hover border" style="text-align: center; width: 100%" id="sag_aktif">
|
|
<thead class="thead-light bg-dark text-white text-center">
|
|
<tr>
|
|
<th scope="col">No. SAG</th>
|
|
<th scope="col">Pembiayaan (RM)</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@foreach($belum_tebus as $index1=>$bt)
|
|
<tr>
|
|
<td>{{ $bt['norujukan'] }}</td>
|
|
<td>{{ number_format($bt['pinjaman'],2) }}</td>
|
|
</tr>
|
|
@endforeach
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div> -->
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<script>
|
|
var api_url = "{{ config('api.url') }}";
|
|
var icno = "{{ Auth::User()->icno }}";
|
|
var datafin = "{{ $financemonth }}";
|
|
|
|
datafin = datafin.replace(/"/g, '\"');
|
|
datafin = JSON.parse(datafin);
|
|
|
|
var hargaemastable = $('#harga_emas').DataTable({
|
|
"bLengthChange": false,
|
|
"bFilter": false,
|
|
language: {
|
|
'paginate': {
|
|
'previous': '<span class="fas fa-backward"></span>',
|
|
'next': '<span class="fas fa-forward"></span>'
|
|
}
|
|
},
|
|
"scrollX": true,
|
|
"pageLength": 5
|
|
|
|
});
|
|
|
|
var sagaktiftable = $('#sag_aktif').DataTable({
|
|
"bLengthChange": false,
|
|
"bFilter": false,
|
|
"pageLength": 5,
|
|
"scrollX": true,
|
|
language: {
|
|
'paginate': {
|
|
'previous': '<span class="fas fa-backward"></span>',
|
|
'next': '<span class="fas fa-forward"></span>'
|
|
}
|
|
}
|
|
});
|
|
|
|
|
|
|
|
//
|
|
// Charts
|
|
//
|
|
|
|
'use strict';
|
|
|
|
var Charts = (function() {
|
|
|
|
// Variable
|
|
|
|
var $toggle = $('[data-toggle="chart"]');
|
|
var mode = 'light'; //(themeMode) ? themeMode : 'light';
|
|
var fonts = {
|
|
base: 'Open Sans'
|
|
}
|
|
|
|
// Colors
|
|
var colors = {
|
|
gray: {
|
|
100: '#f6f9fc',
|
|
200: '#e9ecef',
|
|
300: '#dee2e6',
|
|
400: '#ced4da',
|
|
500: '#adb5bd',
|
|
600: '#8898aa',
|
|
700: '#525f7f',
|
|
800: '#32325d',
|
|
900: '#212529'
|
|
},
|
|
theme: {
|
|
'default': '#172b4d',
|
|
'primary': '#5e72e4',
|
|
'secondary': '#f4f5f7',
|
|
'info': '#11cdef',
|
|
'success': '#2dce89',
|
|
'danger': '#f5365c',
|
|
'warning': '#fb6340'
|
|
},
|
|
black: '#12263F',
|
|
white: '#FFFFFF',
|
|
transparent: 'transparent',
|
|
};
|
|
|
|
|
|
// Methods
|
|
|
|
// Chart.js global options
|
|
function chartOptions() {
|
|
|
|
// Options
|
|
var options = {
|
|
defaults: {
|
|
global: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
defaultColor: (mode == 'dark') ? colors.gray[700] : colors.gray[600],
|
|
defaultFontColor: (mode == 'dark') ? colors.gray[700] : colors.gray[600],
|
|
defaultFontFamily: fonts.base,
|
|
defaultFontSize: 13,
|
|
layout: {
|
|
padding: 0
|
|
},
|
|
legend: {
|
|
display: false,
|
|
position: 'bottom',
|
|
labels: {
|
|
usePointStyle: true,
|
|
padding: 16
|
|
}
|
|
},
|
|
elements: {
|
|
point: {
|
|
radius: 0,
|
|
backgroundColor: colors.theme['primary']
|
|
},
|
|
line: {
|
|
tension: .4,
|
|
borderWidth: 4,
|
|
borderColor: colors.theme['primary'],
|
|
backgroundColor: colors.transparent,
|
|
borderCapStyle: 'rounded'
|
|
},
|
|
rectangle: {
|
|
backgroundColor: colors.theme['warning']
|
|
},
|
|
arc: {
|
|
backgroundColor: colors.theme['primary'],
|
|
borderColor: (mode == 'dark') ? colors.gray[800] : colors.white,
|
|
borderWidth: 4
|
|
}
|
|
},
|
|
tooltips: {
|
|
enabled: false,
|
|
mode: 'index',
|
|
intersect: false,
|
|
custom: function(model) {
|
|
|
|
// Get tooltip
|
|
var $tooltip = $('#chart-tooltip');
|
|
|
|
// Create tooltip on first render
|
|
if (!$tooltip.length) {
|
|
$tooltip = $('<div id="chart-tooltip" class="popover bs-popover-top" role="tooltip"></div>');
|
|
|
|
// Append to body
|
|
$('body').append($tooltip);
|
|
}
|
|
|
|
// Hide if no tooltip
|
|
if (model.opacity === 0) {
|
|
$tooltip.css('display', 'none');
|
|
return;
|
|
}
|
|
|
|
function getBody(bodyItem) {
|
|
return bodyItem.lines;
|
|
}
|
|
|
|
// Fill with content
|
|
if (model.body) {
|
|
var titleLines = model.title || [];
|
|
var bodyLines = model.body.map(getBody);
|
|
var html = '';
|
|
|
|
// Add arrow
|
|
html += '<div class="arrow"></div>';
|
|
|
|
// Add header
|
|
titleLines.forEach(function(title) {
|
|
html += '<h3 class="popover-header text-center">' + title + '</h3>';
|
|
});
|
|
|
|
// Add body
|
|
bodyLines.forEach(function(body, i) {
|
|
var colors = model.labelColors[i];
|
|
var styles = 'background-color: ' + colors.backgroundColor;
|
|
var indicator = '<span class="badge badge-dot"><i class="bg-primary"></i></span>';
|
|
var align = (bodyLines.length > 1) ? 'justify-content-left' : 'justify-content-center';
|
|
html += '<div class="popover-body d-flex align-items-center ' + align + '">' + indicator + body + '</div>';
|
|
});
|
|
|
|
$tooltip.html(html);
|
|
}
|
|
|
|
// Get tooltip position
|
|
var $canvas = $(this._chart.canvas);
|
|
|
|
var canvasWidth = $canvas.outerWidth();
|
|
var canvasHeight = $canvas.outerHeight();
|
|
|
|
var canvasTop = $canvas.offset().top;
|
|
var canvasLeft = $canvas.offset().left;
|
|
|
|
var tooltipWidth = $tooltip.outerWidth();
|
|
var tooltipHeight = $tooltip.outerHeight();
|
|
|
|
var top = canvasTop + model.caretY - tooltipHeight - 16;
|
|
var left = canvasLeft + model.caretX - tooltipWidth / 2;
|
|
|
|
// Display tooltip
|
|
$tooltip.css({
|
|
'top': top + 'px',
|
|
'left': left + 'px',
|
|
'display': 'block',
|
|
'z-index': '100'
|
|
});
|
|
|
|
},
|
|
callbacks: {
|
|
label: function(item, data) {
|
|
var label = data.datasets[item.datasetIndex].label || '';
|
|
var yLabel = item.yLabel;
|
|
var content = '';
|
|
|
|
if (data.datasets.length > 1) {
|
|
content += '<span class="badge badge-primary mr-auto">' + label + '</span>';
|
|
}
|
|
|
|
content += '<span class="popover-body-value">' + yLabel + '</span>';
|
|
return content;
|
|
}
|
|
}
|
|
}
|
|
},
|
|
doughnut: {
|
|
cutoutPercentage: 83,
|
|
tooltips: {
|
|
callbacks: {
|
|
title: function(item, data) {
|
|
var title = data.labels[item[0].index];
|
|
return title;
|
|
},
|
|
label: function(item, data) {
|
|
var value = data.datasets[0].data[item.index];
|
|
var content = '';
|
|
|
|
content += '<span class="popover-body-value">' + value + '</span>';
|
|
return content;
|
|
}
|
|
}
|
|
},
|
|
legendCallback: function(chart) {
|
|
var data = chart.data;
|
|
var content = '';
|
|
|
|
data.labels.forEach(function(label, index) {
|
|
var bgColor = data.datasets[0].backgroundColor[index];
|
|
|
|
content += '<span class="chart-legend-item">';
|
|
content += '<i class="chart-legend-indicator" style="background-color: ' + bgColor + '"></i>';
|
|
content += label;
|
|
content += '</span>';
|
|
});
|
|
|
|
return content;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// yAxes
|
|
Chart.scaleService.updateScaleDefaults('linear', {
|
|
gridLines: {
|
|
borderDash: [2],
|
|
borderDashOffset: [2],
|
|
color: (mode == 'dark') ? colors.gray[900] : colors.gray[300],
|
|
drawBorder: false,
|
|
drawTicks: false,
|
|
lineWidth: 0,
|
|
zeroLineWidth: 0,
|
|
zeroLineColor: (mode == 'dark') ? colors.gray[900] : colors.gray[300],
|
|
zeroLineBorderDash: [2],
|
|
zeroLineBorderDashOffset: [2]
|
|
},
|
|
ticks: {
|
|
beginAtZero: true,
|
|
padding: 10,
|
|
callback: function(value) {
|
|
if (!(value % 10)) {
|
|
return value
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
// xAxes
|
|
Chart.scaleService.updateScaleDefaults('category', {
|
|
gridLines: {
|
|
drawBorder: false,
|
|
drawOnChartArea: false,
|
|
drawTicks: false
|
|
},
|
|
ticks: {
|
|
padding: 20
|
|
},
|
|
maxBarThickness: 10
|
|
});
|
|
|
|
return options;
|
|
|
|
}
|
|
|
|
// Parse global options
|
|
function parseOptions(parent, options) {
|
|
for (var item in options) {
|
|
if (typeof options[item] !== 'object') {
|
|
parent[item] = options[item];
|
|
} else {
|
|
parseOptions(parent[item], options[item]);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Push options
|
|
function pushOptions(parent, options) {
|
|
for (var item in options) {
|
|
if (Array.isArray(options[item])) {
|
|
options[item].forEach(function(data) {
|
|
parent[item].push(data);
|
|
});
|
|
} else {
|
|
pushOptions(parent[item], options[item]);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Pop options
|
|
function popOptions(parent, options) {
|
|
for (var item in options) {
|
|
if (Array.isArray(options[item])) {
|
|
options[item].forEach(function(data) {
|
|
parent[item].pop();
|
|
});
|
|
} else {
|
|
popOptions(parent[item], options[item]);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Toggle options
|
|
function toggleOptions(elem) {
|
|
var options = elem.data('add');
|
|
var $target = $(elem.data('target'));
|
|
var $chart = $target.data('chart');
|
|
|
|
if (elem.is(':checked')) {
|
|
|
|
// Add options
|
|
pushOptions($chart, options);
|
|
|
|
// Update chart
|
|
$chart.update();
|
|
} else {
|
|
|
|
// Remove options
|
|
popOptions($chart, options);
|
|
|
|
// Update chart
|
|
$chart.update();
|
|
}
|
|
}
|
|
|
|
// Update options
|
|
function updateOptions(elem) {
|
|
var options = elem.data('update');
|
|
var $target = $(elem.data('target'));
|
|
var $chart = $target.data('chart');
|
|
|
|
// Parse options
|
|
parseOptions($chart, options);
|
|
|
|
// Toggle ticks
|
|
toggleTicks(elem, $chart);
|
|
|
|
// Update chart
|
|
$chart.update();
|
|
}
|
|
|
|
// Toggle ticks
|
|
function toggleTicks(elem, $chart) {
|
|
|
|
if (elem.data('prefix') !== undefined || elem.data('prefix') !== undefined) {
|
|
var prefix = elem.data('prefix') ? elem.data('prefix') : '';
|
|
var suffix = elem.data('suffix') ? elem.data('suffix') : '';
|
|
|
|
// Update ticks
|
|
$chart.options.scales.yAxes[0].ticks.callback = function(value) {
|
|
if (!(value % 10)) {
|
|
return prefix + value + suffix;
|
|
}
|
|
}
|
|
|
|
// Update tooltips
|
|
$chart.options.tooltips.callbacks.label = function(item, data) {
|
|
var label = data.datasets[item.datasetIndex].label || '';
|
|
var yLabel = item.yLabel;
|
|
var content = '';
|
|
|
|
if (data.datasets.length > 1) {
|
|
content += '<span class="popover-body-label mr-auto">' + label + '</span>';
|
|
}
|
|
|
|
content += '<span class="popover-body-value">' + prefix + yLabel + suffix + '</span>';
|
|
return content;
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
|
|
// Events
|
|
|
|
// Parse global options
|
|
if (window.Chart) {
|
|
parseOptions(Chart, chartOptions());
|
|
}
|
|
|
|
// Toggle options
|
|
$toggle.on({
|
|
'change': function() {
|
|
var $this = $(this);
|
|
|
|
if ($this.is('[data-add]')) {
|
|
toggleOptions($this);
|
|
}
|
|
},
|
|
'click': function() {
|
|
var $this = $(this);
|
|
|
|
if ($this.is('[data-update]')) {
|
|
updateOptions($this);
|
|
}
|
|
}
|
|
});
|
|
|
|
|
|
// Return
|
|
|
|
return {
|
|
colors: colors,
|
|
fonts: fonts,
|
|
mode: mode
|
|
};
|
|
|
|
})();
|
|
|
|
|
|
//
|
|
// Orders chart
|
|
//
|
|
|
|
var OrdersChart = (function() {
|
|
|
|
//
|
|
// Variables
|
|
//
|
|
|
|
var $chart = $('#chart-orders');
|
|
var $ordersSelect = $('[name="ordersSelect"]');
|
|
|
|
|
|
//
|
|
// Methods
|
|
//
|
|
|
|
// Init chart
|
|
function initChart($chart) {
|
|
|
|
var PembiayaanBulanan = new Array();
|
|
var BayaranBulanan = new Array();
|
|
var NamaBulan = new Array();
|
|
|
|
|
|
$.each(datafin, function(index, finance) {
|
|
PembiayaanBulanan.push(finance['pembiayaan']);
|
|
BayaranBulanan.push(finance['bayaran']);
|
|
NamaBulan.push(finance['namabulan']);
|
|
});
|
|
|
|
|
|
const formatter = new Intl.NumberFormat('en-US', {});
|
|
|
|
// Create chart
|
|
var ordersChart = new Chart($chart, {
|
|
type: 'bar',
|
|
options: {
|
|
scales: {
|
|
yAxes: [{
|
|
ticks: {
|
|
callback: function(value) {
|
|
if (!(value % 10)) {
|
|
//return '$' + value + 'k'
|
|
return formatter.format(value)
|
|
}
|
|
}
|
|
}
|
|
}]
|
|
},
|
|
tooltips: {
|
|
callbacks: {
|
|
label: function(item, data) {
|
|
var label = data.datasets[item.datasetIndex].label || '';
|
|
var yLabel = item.yLabel;
|
|
var content = '';
|
|
|
|
if (data.datasets.length > 1) {
|
|
content += '<span class="popover-body-label mr-auto">' + label + '</span>';
|
|
}
|
|
|
|
content += '<span class="popover-body-value">' + yLabel + '</span>';
|
|
|
|
return content;
|
|
}
|
|
}
|
|
}
|
|
},
|
|
data: {
|
|
labels: NamaBulan,
|
|
datasets: [{
|
|
label: 'Pembiayaan',
|
|
data: PembiayaanBulanan
|
|
}]
|
|
}
|
|
});
|
|
|
|
// Save to jQuery object
|
|
$chart.data('chart', ordersChart);
|
|
}
|
|
|
|
|
|
// Init chart
|
|
if ($chart.length) {
|
|
initChart($chart);
|
|
}
|
|
|
|
})();
|
|
|
|
//
|
|
// Charts
|
|
//
|
|
|
|
'use strict';
|
|
|
|
//
|
|
// Sales chart
|
|
//
|
|
|
|
var SalesChart = (function() {
|
|
|
|
// Variables
|
|
|
|
var $chart = $('#chart-sales');
|
|
|
|
|
|
// Methods
|
|
|
|
function init($chart) {
|
|
|
|
var PembiayaanBulanan = new Array();
|
|
var BayaranBulanan = new Array();
|
|
var NamaBulan = new Array();
|
|
|
|
$.each(datafin, function(index, finance) {
|
|
PembiayaanBulanan.push(finance['pembiayaan']);
|
|
BayaranBulanan.push(finance['bayaran']);
|
|
NamaBulan.push(finance['namabulan']);
|
|
});
|
|
|
|
|
|
const formatter = new Intl.NumberFormat('en-US', {});
|
|
|
|
var salesChart = new Chart($chart, {
|
|
type: 'bar',
|
|
options: {
|
|
scales: {
|
|
yAxes: [{
|
|
gridLines: {
|
|
color: Charts.colors.gray[900],
|
|
zeroLineColor: Charts.colors.gray[900]
|
|
},
|
|
ticks: {
|
|
callback: function(value) {
|
|
if (!(value % 10)) {
|
|
return 'RM' + formatter.format(value);
|
|
}
|
|
}
|
|
}
|
|
}]
|
|
},
|
|
tooltips: {
|
|
callbacks: {
|
|
label: function(item, data) {
|
|
var label = data.datasets[item.datasetIndex].label || '';
|
|
var yLabel = item.yLabel;
|
|
var content = '';
|
|
|
|
if (data.datasets.length > 1) {
|
|
content += '<span class="popover-body-label mr-auto">' + label + '</span>';
|
|
}
|
|
|
|
content += '<span class="popover-body-value">RM' + formatter.format(yLabel) + '</span>';
|
|
return content;
|
|
}
|
|
}
|
|
}
|
|
},
|
|
data: {
|
|
labels: NamaBulan,
|
|
datasets: [{
|
|
label: 'Prestasi',
|
|
data: BayaranBulanan
|
|
}]
|
|
}
|
|
});
|
|
|
|
// Save to jQuery object
|
|
|
|
$chart.data('chart', salesChart);
|
|
|
|
};
|
|
|
|
|
|
// Events
|
|
|
|
if ($chart.length) {
|
|
init($chart);
|
|
}
|
|
|
|
})();
|
|
</script>
|
|
|
|
@endsection |