new dashboard charts
This commit is contained in:
denisdulici
parent
66b1ee9c54
commit
88c9366279
@ -12,6 +12,7 @@ use App\Models\Income\InvoicePayment;
|
||||
use App\Models\Income\Revenue;
|
||||
use App\Models\Setting\Category;
|
||||
use App\Traits\Currencies;
|
||||
use Charts;
|
||||
use Date;
|
||||
|
||||
class Dashboard extends Controller
|
||||
@ -58,20 +59,24 @@ class Dashboard extends Controller
|
||||
|
||||
$monthly_profit = $this->getProfit($monthly_income, $monthly_expense);
|
||||
|
||||
$cash_flow = [
|
||||
'daily' => [
|
||||
'date' => json_encode($day),
|
||||
'income' => json_encode(array_values($daily_income)),
|
||||
'expense' => json_encode(array_values($daily_expense)),
|
||||
'profit' => json_encode(array_values($daily_profit))
|
||||
],
|
||||
'monthly' => [
|
||||
'date' => json_encode($month),
|
||||
'income' => json_encode(array_values($monthly_income)),
|
||||
'expense' => json_encode(array_values($monthly_expense)),
|
||||
'profit' => json_encode(array_values($monthly_profit))
|
||||
],
|
||||
];
|
||||
$line_daily = Charts::multi('line', 'chartjs')
|
||||
->dimensions(0, 300)
|
||||
->colors(['#6da252', '#00c0ef', '#F56954'])
|
||||
->dataset(trans_choice('general.profits', 1), $daily_profit)
|
||||
->dataset(trans_choice('general.incomes', 1), $daily_income)
|
||||
->dataset(trans_choice('general.expenses', 1), $daily_expense)
|
||||
->labels($day)
|
||||
->credits(false)
|
||||
->view('vendor.consoletvs.charts.chartjs.multi.line');
|
||||
|
||||
$line_monthly = Charts::multi('bar', 'chartjs')
|
||||
->dimensions(0, 300)
|
||||
->colors(['#6da252', '#00c0ef', '#F56954'])
|
||||
->dataset(trans_choice('general.profits', 1), $monthly_profit)
|
||||
->dataset(trans_choice('general.incomes', 1), $monthly_income)
|
||||
->dataset(trans_choice('general.expenses', 1), $monthly_expense)
|
||||
->labels($month)
|
||||
->credits(false);
|
||||
|
||||
/*
|
||||
* Totals & Pie Charts
|
||||
@ -87,29 +92,21 @@ class Dashboard extends Controller
|
||||
|
||||
$incomes_amount += $invoice_paid_amount;
|
||||
|
||||
// Add to Incomes By Category
|
||||
$donut_incomes_colors[] = '#00c0ef';
|
||||
$donut_incomes_labels[] = money($invoice_paid_amount, setting('general.default_currency'), true)->format() . ' - ' . trans_choice('general.invoices', 2);
|
||||
$donut_incomes_values[] = (int) $invoice_paid_amount;
|
||||
|
||||
// Bills
|
||||
$bills = Bill::with('payments')->accrued()->get();
|
||||
list($bill_paid_amount, $open_bill, $overdue_bill) = $this->getTotals($bills, 'bill');
|
||||
|
||||
$expenses_amount += $bill_paid_amount;
|
||||
|
||||
// Add to Incomes By Category
|
||||
$incomes[] = array(
|
||||
'amount' => money($invoice_paid_amount, setting('general.default_currency'), true)->format(),
|
||||
'value' => (int) $invoice_paid_amount,
|
||||
'color' => '#00c0ef',
|
||||
'highlight' => '#00c0ef',
|
||||
'label' => trans_choice('general.invoices', 2)
|
||||
);
|
||||
|
||||
// Add to Expenses By Category
|
||||
$expenses[] = array(
|
||||
'amount' => money($bill_paid_amount, setting('general.default_currency'), true)->format(),
|
||||
'value' => (int) $bill_paid_amount,
|
||||
'color' => '#dd4b39',
|
||||
'highlight' => '#dd4b39',
|
||||
'label' => trans_choice('general.bills', 2)
|
||||
);
|
||||
$donut_expenses_colors[] = '#dd4b39';
|
||||
$donut_expenses_labels[] = money($bill_paid_amount, setting('general.default_currency'), true)->format() . ' - ' . trans_choice('general.bills', 2);
|
||||
$donut_expenses_values[] = (int) $bill_paid_amount;
|
||||
|
||||
// Revenues & Payments
|
||||
$categories = Category::orWhere('type', 'income')->orWhere('type', 'expense')->enabled()->get();
|
||||
@ -117,85 +114,49 @@ class Dashboard extends Controller
|
||||
foreach ($categories as $category) {
|
||||
switch ($category->type) {
|
||||
case 'income':
|
||||
$revenues = $category->revenues;
|
||||
|
||||
$amount = 0;
|
||||
|
||||
if ($revenues) {
|
||||
foreach ($revenues as $revenue) {
|
||||
$amount += $revenue->getConvertedAmount();
|
||||
}
|
||||
|
||||
$incomes[] = array(
|
||||
'amount' => money($amount, setting('general.default_currency'), true)->format(),
|
||||
'value' => (int) $amount,
|
||||
'color' => $category->color,
|
||||
'highlight' => $category->color,
|
||||
'label' => $category->name
|
||||
);
|
||||
} else {
|
||||
$incomes[] = array(
|
||||
'amount' => money(0, setting('general.default_currency'), true)->format(),
|
||||
'value' => (int) 0,
|
||||
'color' => $category->color,
|
||||
'highlight' => $category->color,
|
||||
'label' => $category->name
|
||||
);
|
||||
foreach ($category->revenues as $revenue) {
|
||||
$amount += $revenue->getConvertedAmount();
|
||||
}
|
||||
|
||||
$donut_incomes_colors[] = $category->color;
|
||||
$donut_incomes_labels[] = money($amount, setting('general.default_currency'), true)->format() . ' - ' . $category->name;
|
||||
$donut_incomes_values[] = (int) $amount;
|
||||
|
||||
$incomes_amount += $amount;
|
||||
break;
|
||||
case 'expense':
|
||||
$payments = $category->payments;
|
||||
|
||||
$amount = 0;
|
||||
|
||||
if ($payments) {
|
||||
foreach ($payments as $payment) {
|
||||
$amount += $payment->getConvertedAmount();
|
||||
}
|
||||
|
||||
$expenses[] = array(
|
||||
'amount' => money($amount, setting('general.default_currency'), true)->format(),
|
||||
'value' => (int) $amount,
|
||||
'color' => $category->color,
|
||||
'highlight' => $category->color,
|
||||
'label' => $category->name
|
||||
);
|
||||
} else {
|
||||
$expenses[] = array(
|
||||
'amount' => money(0, setting('general.default_currency'), true)->format(),
|
||||
'value' => (int) 0,
|
||||
'color' => $category->color,
|
||||
'highlight' => $category->color,
|
||||
'label' => $category->name
|
||||
);
|
||||
foreach ($category->payments as $payment) {
|
||||
$amount += $payment->getConvertedAmount();
|
||||
}
|
||||
|
||||
$donut_expenses_colors[] = $category->color;
|
||||
$donut_expenses_labels[] = money($amount, setting('general.default_currency'), true)->format() . ' - ' . $category->name;
|
||||
$donut_expenses_values[] = (int) $amount;
|
||||
|
||||
$expenses_amount += $amount;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if (empty($incomes_amount)) {
|
||||
foreach ($incomes as $key => $income) {
|
||||
$incomes[$key]['amount'] = money(0, setting('general.default_currency'), true)->format();
|
||||
$incomes[$key]['value'] = (int) 100 / count($incomes);
|
||||
}
|
||||
}
|
||||
$donut_incomes = Charts::create('donut', 'chartjs')
|
||||
->colors($donut_incomes_colors)
|
||||
->labels($donut_incomes_labels)
|
||||
->values($donut_incomes_values)
|
||||
->dimensions(0, 160)
|
||||
->credits(false)
|
||||
->view('vendor.consoletvs.charts.chartjs.donut');
|
||||
|
||||
// Incomes Pie Chart
|
||||
$income_graph = json_encode($incomes);
|
||||
|
||||
if (empty($expenses_amount)) {
|
||||
foreach ($expenses as $key => $expense) {
|
||||
$expenses[$key]['amount'] = money(0, setting('general.default_currency'), true)->format();
|
||||
$expenses[$key]['value'] = (int) 100 / count($expenses);
|
||||
}
|
||||
}
|
||||
|
||||
// Expenses Pie Chart
|
||||
$expense_graph = json_encode($expenses);
|
||||
$donut_expenses = Charts::create('donut', 'chartjs')
|
||||
->colors($donut_expenses_colors)
|
||||
->labels($donut_expenses_labels)
|
||||
->values($donut_expenses_values)
|
||||
->dimensions(0, 160)
|
||||
->credits(false)
|
||||
->view('vendor.consoletvs.charts.chartjs.donut');
|
||||
|
||||
$incomes_progress = 100;
|
||||
|
||||
@ -265,13 +226,10 @@ class Dashboard extends Controller
|
||||
'total_incomes',
|
||||
'total_expenses',
|
||||
'total_profit',
|
||||
'cash_flow',
|
||||
'incomes',
|
||||
'incomes_amount',
|
||||
'income_graph',
|
||||
'expenses',
|
||||
'expenses_amount',
|
||||
'expense_graph',
|
||||
'line_daily',
|
||||
'line_monthly',
|
||||
'donut_incomes',
|
||||
'donut_expenses',
|
||||
'accounts',
|
||||
'latest_incomes',
|
||||
'latest_expenses'
|
||||
|
||||
@ -16,6 +16,7 @@
|
||||
"barryvdh/laravel-dompdf": "0.*",
|
||||
"barryvdh/laravel-ide-helper": "2.3.*",
|
||||
"bkwld/cloner": "3.2.*",
|
||||
"consoletvs/charts": "4.6.*",
|
||||
"dingo/api": "1.0.0-beta8",
|
||||
"guzzlehttp/guzzle": "6.3.*",
|
||||
"intervention/image": "2.3.*",
|
||||
|
||||
@ -190,6 +190,7 @@ return [
|
||||
Barryvdh\DomPDF\ServiceProvider::class,
|
||||
Bkwld\Cloner\ServiceProvider::class,
|
||||
Collective\Html\HtmlServiceProvider::class,
|
||||
ConsoleTVs\Charts\ChartsServiceProvider::class,
|
||||
Dingo\Api\Provider\LaravelServiceProvider::class,
|
||||
EloquentFilter\ServiceProvider::class,
|
||||
Intervention\Image\ImageServiceProvider::class,
|
||||
@ -256,6 +257,7 @@ return [
|
||||
* Vendor Aliases...
|
||||
*/
|
||||
//'Api' => Dingo\Api\Facade\API,
|
||||
'Charts' => ConsoleTVs\Charts\Facades\Charts::class,
|
||||
'Debugbar' => Barryvdh\Debugbar\Facade::class,
|
||||
'Date' => Jenssegers\Date\Date::class,
|
||||
'DotenvEditor' => Jackiedo\DotenvEditor\Facades\DotenvEditor::class,
|
||||
|
||||
173
config/charts.php
Normal file
173
config/charts.php
Normal file
@ -0,0 +1,173 @@
|
||||
<?php
|
||||
|
||||
return [
|
||||
|
||||
/*
|
||||
|--------------------------------------------------------------------------
|
||||
| Default settings for charts.
|
||||
|--------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
'default' => [
|
||||
'type' => 'line', // The default chart type.
|
||||
'library' => 'material', // The default chart library.
|
||||
'element_label' => '', // The default chart element label.
|
||||
'empty_dataset_label' => 'No Data Set',
|
||||
'empty_dataset_value' => 0,
|
||||
'title' => '', // Default chart title.
|
||||
'height' => 400, // 0 Means it will take 100% of the division height.
|
||||
'width' => 0, // 0 Means it will take 100% of the division width.
|
||||
'responsive' => false, // Not recommended since all libraries have diferent sizes.
|
||||
'background_color' => 'inherit', // The chart division background color.
|
||||
'colors' => [], // Default chart colors if using no template is set.
|
||||
'one_color' => false, // Only use the first color in all values.
|
||||
'template' => 'material', // The default chart color template.
|
||||
'legend' => true, // Whether to enable the chart legend (where applicable).
|
||||
'x_axis_title' => false, // The title of the x-axis
|
||||
'y_axis_title' => null, // The title of the y-axis (When set to null will use element_label value).
|
||||
'loader' => [
|
||||
'active' => false, // Determines the if loader is active by default.
|
||||
'duration' => 500, // In milliseconds.
|
||||
'color' => '#6da252', // Determines the default loader color.
|
||||
],
|
||||
],
|
||||
|
||||
/*
|
||||
|--------------------------------------------------------------------------
|
||||
| All the color templates available for the charts.
|
||||
|--------------------------------------------------------------------------
|
||||
*/
|
||||
'templates' => [
|
||||
'material' => [
|
||||
'#2196F3', '#F44336', '#FFC107',
|
||||
],
|
||||
'red-material' => [
|
||||
'#B71C1C', '#F44336', '#E57373',
|
||||
],
|
||||
'indigo-material' => [
|
||||
'#1A237E', '#3F51B5', '#7986CB',
|
||||
],
|
||||
'blue-material' => [
|
||||
'#0D47A1', '#2196F3', '#64B5F6',
|
||||
],
|
||||
'teal-material' => [
|
||||
'#004D40', '#009688', '#4DB6AC',
|
||||
],
|
||||
'green-material' => [
|
||||
'#1B5E20', '#4CAF50', '#81C784',
|
||||
],
|
||||
'yellow-material' => [
|
||||
'#F57F17', '#FFEB3B', '#FFF176',
|
||||
],
|
||||
'orange-material' => [
|
||||
'#E65100', '#FF9800', '#FFB74D',
|
||||
],
|
||||
],
|
||||
|
||||
/*
|
||||
|--------------------------------------------------------------------------
|
||||
| Assets required by the libraries.
|
||||
|--------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
'assets' => [
|
||||
'global' => [
|
||||
'scripts' => [
|
||||
//'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js',
|
||||
],
|
||||
],
|
||||
|
||||
'canvas-gauges' => [
|
||||
'scripts' => [
|
||||
'https://cdn.rawgit.com/Mikhus/canvas-gauges/gh-pages/download/2.1.2/all/gauge.min.js',
|
||||
],
|
||||
],
|
||||
|
||||
'chartist' => [
|
||||
'scripts' => [
|
||||
'https://cdnjs.cloudflare.com/ajax/libs/chartist/0.10.1/chartist.min.js',
|
||||
],
|
||||
'styles' => [
|
||||
'https://cdnjs.cloudflare.com/ajax/libs/chartist/0.10.1/chartist.min.css',
|
||||
],
|
||||
],
|
||||
|
||||
'chartjs' => [
|
||||
'scripts' => [
|
||||
'https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js',
|
||||
],
|
||||
],
|
||||
|
||||
'fusioncharts' => [
|
||||
'scripts' => [
|
||||
'https://static.fusioncharts.com/code/latest/fusioncharts.js',
|
||||
'https://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js',
|
||||
],
|
||||
],
|
||||
|
||||
'google' => [
|
||||
'scripts' => [
|
||||
'https://www.google.com/jsapi',
|
||||
'https://www.gstatic.com/charts/loader.js',
|
||||
"google.charts.load('current', {'packages':['corechart', 'gauge', 'geochart', 'bar', 'line']})",
|
||||
],
|
||||
],
|
||||
|
||||
'highcharts' => [
|
||||
'styles' => [
|
||||
// The following CSS is not added due to color compatibility errors.
|
||||
// 'https://cdnjs.cloudflare.com/ajax/libs/highcharts/5.0.7/css/highcharts.css',
|
||||
],
|
||||
'scripts' => [
|
||||
'https://cdnjs.cloudflare.com/ajax/libs/highcharts/5.0.7/highcharts.js',
|
||||
'https://cdnjs.cloudflare.com/ajax/libs/highcharts/5.0.7/js/modules/offline-exporting.js',
|
||||
'https://cdnjs.cloudflare.com/ajax/libs/highmaps/5.0.7/js/modules/map.js',
|
||||
'https://cdnjs.cloudflare.com/ajax/libs/highmaps/5.0.7/js/modules/data.js',
|
||||
'https://code.highcharts.com/mapdata/custom/world.js',
|
||||
],
|
||||
],
|
||||
|
||||
'justgage' => [
|
||||
'scripts' => [
|
||||
'https://cdnjs.cloudflare.com/ajax/libs/raphael/2.2.6/raphael.min.js',
|
||||
'https://cdnjs.cloudflare.com/ajax/libs/justgage/1.2.2/justgage.min.js',
|
||||
],
|
||||
],
|
||||
|
||||
'morris' => [
|
||||
'styles' => [
|
||||
'https://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css',
|
||||
],
|
||||
'scripts' => [
|
||||
'https://cdnjs.cloudflare.com/ajax/libs/raphael/2.2.6/raphael.min.js',
|
||||
'https://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js',
|
||||
],
|
||||
],
|
||||
|
||||
'plottablejs' => [
|
||||
'scripts' => [
|
||||
'https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js',
|
||||
'https://cdnjs.cloudflare.com/ajax/libs/plottable.js/2.8.0/plottable.min.js',
|
||||
],
|
||||
'styles' => [
|
||||
'https://cdnjs.cloudflare.com/ajax/libs/plottable.js/2.2.0/plottable.css',
|
||||
],
|
||||
],
|
||||
|
||||
'progressbarjs' => [
|
||||
'scripts' => [
|
||||
'https://cdnjs.cloudflare.com/ajax/libs/progressbar.js/1.0.1/progressbar.min.js',
|
||||
],
|
||||
],
|
||||
|
||||
'c3' => [
|
||||
'scripts' => [
|
||||
'https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js',
|
||||
'https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.min.js',
|
||||
],
|
||||
'styles' => [
|
||||
'https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.min.css',
|
||||
],
|
||||
],
|
||||
],
|
||||
];
|
||||
@ -75,74 +75,11 @@
|
||||
</ul>
|
||||
|
||||
<div class="tab-content no-padding">
|
||||
<div class="chart tab-pane active" id="daily-chart" style="position: relative; height: 300px;">
|
||||
<div class="row">
|
||||
<div class="chart">
|
||||
<canvas id="cash_flow_daily" style="height: 246px; width: 1069px;" height="246" width="1069"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row daily-footer">
|
||||
<div class="col-md-2">
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<div id="sale"></div>
|
||||
</div>
|
||||
<div class="col-md-8 scp">
|
||||
{{ trans_choice('general.incomes', 1) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<div id="cost"></div>
|
||||
</div>
|
||||
<div class="col-md-8 scp">
|
||||
{{ trans_choice('general.expenses', 1) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<div id="profit"></div>
|
||||
</div>
|
||||
<div class="col-md-8 scp">
|
||||
{{ trans_choice('general.profits', 1) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chart tab-pane active" id="daily-chart" style="position: relative; height: 310px;">
|
||||
{!! $line_daily->render() !!}
|
||||
</div>
|
||||
<div class="chart tab-pane" id="monthly-chart" style="position: relative; height: 300px;">
|
||||
@if ($cash_flow['monthly'])
|
||||
<div class="col-md-2">
|
||||
<div style="margin : 7px 0px; border-left: 3px solid #00c0ef; padding-left: 10px;">
|
||||
<p style="font-size: 16px; margin: 0px;">
|
||||
@money($total_incomes['total'], setting('general.default_currency'), true)
|
||||
</p>
|
||||
{{ trans_choice('general.incomes', 1) }}
|
||||
</div>
|
||||
<div style="margin : 7px 0px; border-left: 3px solid #C9302C; padding-left: 10px;">
|
||||
<p style="font-size: 16px; margin: 0px;">
|
||||
@money($total_expenses['total'], setting('general.default_currency'), true)
|
||||
</p>
|
||||
{{ trans_choice('general.expenses', 1) }}
|
||||
</div>
|
||||
<div style="margin : 7px 0px; border-left: 3px solid #00a65a; padding-left: 10px;">
|
||||
<p style="font-size: 16px; margin: 0px;">
|
||||
@money($total_incomes['total'] - $total_expenses['total'], setting('general.default_currency'), true)
|
||||
</p>
|
||||
{{ trans_choice('general.profits', 1) }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-10">
|
||||
<div id="cash_flow_monthly" style="min-width: 800px; height: 300px; margin: 0 auto"></div>
|
||||
</div>
|
||||
@else
|
||||
<h5 class="text-center">{{ trans('dashboard.no_profit_loss') }}</h5>
|
||||
@endif
|
||||
<div class="chart tab-pane" id="monthly-chart" style="position: relative; height: 310px;">
|
||||
{!! $line_monthly->render() !!}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -162,20 +99,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-body">
|
||||
<div class="row">
|
||||
<div class="col-md-8">
|
||||
<div class="chart-responsive">
|
||||
<canvas id="income_category" height="155" width="328" style="width: 328px; height: 155px;"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<ul class="chart-legend clearfix">
|
||||
@foreach ($incomes as $item)
|
||||
<li><i class="fa fa-circle" style="color:{{ $item['color'] }};"></i> {{ $item['amount'] . ' ' . $item['label'] }}</li>
|
||||
@endforeach
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
{!! $donut_incomes->render() !!}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -190,20 +114,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-body">
|
||||
<div class="row">
|
||||
<div class="col-md-8">
|
||||
<div class="chart-responsive">
|
||||
<canvas id="expense_category" height="155" width="328" style="width: 328px; height: 155px;"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<ul class="chart-legend clearfix">
|
||||
@foreach ($expenses as $item)
|
||||
<li><i class="fa fa-circle" style="color:{{ $item['color'] }};"></i> {{ $item['amount'] . ' ' . $item['label'] }}</li>
|
||||
@endforeach
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
{!! $donut_expenses->render() !!}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -316,151 +227,5 @@
|
||||
@endsection
|
||||
|
||||
@push('js')
|
||||
<script src="{{ asset('vendor/almasaeed2010/adminlte/plugins/chartjs/Chart.min.js') }}"></script>
|
||||
<script src="{{ asset('public/js/highchart/highcharts.js') }}"></script>
|
||||
@endpush
|
||||
|
||||
@push('scripts')
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function () {
|
||||
var areaChartData = {
|
||||
labels: {!! $cash_flow['daily']['date'] !!},
|
||||
datasets: [
|
||||
{
|
||||
label: "{{ trans_choice('general.incomes', 1) }}",
|
||||
fillColor: "#00c0ef",
|
||||
strokeColor: "#00c0ef",
|
||||
pointColor: "#00c0ef",
|
||||
pointStrokeColor: "#00c0ef",
|
||||
pointHighlightFill: "#FFF",
|
||||
pointHighlightStroke: "#00c0ef",
|
||||
data: {!! $cash_flow['daily']['income'] !!}
|
||||
},
|
||||
{
|
||||
label: "{{ trans_choice('general.expenses', 1) }}",
|
||||
fillColor: "#F56954",
|
||||
strokeColor: "#F56954",
|
||||
pointColor: "#F56954",
|
||||
pointStrokeColor: "#F56954",
|
||||
pointHighlightFill: "#FFF",
|
||||
pointHighlightStroke: "#F56954",
|
||||
data: {!! $cash_flow['daily']['expense'] !!}
|
||||
},
|
||||
{
|
||||
label: "{{ trans_choice('general.profits', 1) }}",
|
||||
fillColor: "#6da252",
|
||||
strokeColor: "#6da252",
|
||||
pointColor: "#6da252",
|
||||
pointStrokeColor: "#6da252",
|
||||
pointHighlightFill: "#FFF",
|
||||
pointHighlightStroke: "#6da252",
|
||||
data: {!! $cash_flow['daily']['profit'] !!}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
var areaChartOptions = {
|
||||
showScale: true,
|
||||
scaleShowGridLines: true,
|
||||
scaleGridLineColor: "rgba(0,0,0,.05)",
|
||||
scaleGridLineWidth: 1,
|
||||
scaleShowHorizontalLines: true,
|
||||
scaleShowVerticalLines: true,
|
||||
bezierCurve: true,
|
||||
bezierCurveTension: 0.3,
|
||||
pointDot: false,
|
||||
pointDotRadius: 4,
|
||||
pointDotStrokeWidth: 1,
|
||||
pointHitDetectionRadius: 20,
|
||||
datasetStroke: true,
|
||||
datasetStrokeWidth: 2,
|
||||
datasetFill: true,
|
||||
legendTemplate: '<ul class="<%=name.toLowerCase()%>-legend"><% for (var i=0; i<datasets.length; i++){%><li><span style="background-color:<%=datasets[i].lineColor%>"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>',
|
||||
maintainAspectRatio: true,
|
||||
responsive: true
|
||||
};
|
||||
|
||||
var cashFlowDailyCanvas = $("#cash_flow_daily").get(0).getContext("2d");
|
||||
var cashFlowDaily = new Chart(cashFlowDailyCanvas);
|
||||
var cashFlowDailyOptions = areaChartOptions;
|
||||
|
||||
cashFlowDailyOptions.datasetFill = false;
|
||||
cashFlowDaily.Line(areaChartData, cashFlowDailyOptions);
|
||||
|
||||
var income_category_canvas = $("#income_category").get(0).getContext("2d");
|
||||
var income_category_pie_chart = new Chart(income_category_canvas);
|
||||
var income_category_data = jQuery.parseJSON('{!! $income_graph !!}');
|
||||
|
||||
var income_category_options = {
|
||||
segmentShowStroke: true,
|
||||
segmentStrokeColor: "#fff",
|
||||
segmentStrokeWidth: 1,
|
||||
percentageInnerCutout: 50, // This is 0 for Pie charts
|
||||
animationSteps: 100,
|
||||
animationEasing: "easeOutBounce",
|
||||
animateRotate: true,
|
||||
animateScale: false,
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>",
|
||||
tooltipTemplate: "<%=label%>"
|
||||
};
|
||||
|
||||
income_category_pie_chart.Doughnut(income_category_data, income_category_options);
|
||||
|
||||
var expense_category_canvas = $("#expense_category").get(0).getContext("2d");
|
||||
var expense_category_pie_chart = new Chart(expense_category_canvas);
|
||||
var expense_category_data = jQuery.parseJSON('{!! $expense_graph !!}');
|
||||
|
||||
var expense_category_options = {
|
||||
segmentShowStroke: true,
|
||||
segmentStrokeColor: "#fff",
|
||||
segmentStrokeWidth: 1,
|
||||
percentageInnerCutout: 50, // This is 0 for Pie charts
|
||||
animationSteps: 100,
|
||||
animationEasing: "easeOutBounce",
|
||||
animateRotate: true,
|
||||
animateScale: false,
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>",
|
||||
tooltipTemplate: "<%=label%>"
|
||||
};
|
||||
|
||||
expense_category_pie_chart.Doughnut(expense_category_data, expense_category_options);
|
||||
|
||||
@if ($cash_flow['monthly'])
|
||||
Highcharts.chart('cash_flow_monthly', {
|
||||
chart: {
|
||||
type: 'column'
|
||||
},
|
||||
title: {
|
||||
text: ''
|
||||
},
|
||||
xAxis: {
|
||||
categories: {!! $cash_flow['monthly']['date'] !!}
|
||||
},
|
||||
credits: {
|
||||
enabled: false
|
||||
},
|
||||
series: [{
|
||||
name: '{{ trans_choice('general.incomes', 1) }}',
|
||||
data: {!! $cash_flow['monthly']['income'] !!}
|
||||
},{
|
||||
name: '{{ trans_choice('general.expenses', 1) }}',
|
||||
data: {!! $cash_flow['monthly']['expense'] !!}
|
||||
}, {
|
||||
name: '{{ trans_choice('general.profits', 1) }}',
|
||||
data: {!! $cash_flow['monthly']['profit'] !!}
|
||||
}]
|
||||
});
|
||||
@endif
|
||||
});
|
||||
|
||||
jQuery(document).on( 'shown.bs.tab', 'a[data-toggle="tab"]', function () {
|
||||
$('#cash_flow_monthly').each(function() {
|
||||
$(this).highcharts().reflow();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@endpush
|
||||
{!! Charts::assets() !!}
|
||||
@endpush
|
||||
49
resources/views/vendor/consoletvs/charts/chartjs/area.blade.php
vendored
Normal file
49
resources/views/vendor/consoletvs/charts/chartjs/area.blade.php
vendored
Normal file
@ -0,0 +1,49 @@
|
||||
@if(!$model->customId)
|
||||
@include('charts::_partials.container.canvas2')
|
||||
@endif
|
||||
|
||||
@include('charts::_partials.helpers.hex2rgb')
|
||||
|
||||
<script type="text/javascript">
|
||||
var ctx = document.getElementById("{{ $model->id }}")
|
||||
|
||||
var data = {
|
||||
labels: [
|
||||
@foreach($model->labels as $label)
|
||||
"{!! $label !!}",
|
||||
@endforeach
|
||||
],
|
||||
datasets: [{
|
||||
fill: true,
|
||||
@if($model->colors)
|
||||
backgroundColor: hex2rgba_convert("{{ $model->colors[0] }}", 50),
|
||||
@endif
|
||||
label: "{!! $model->element_label !!}",
|
||||
lineTension: 0.3,
|
||||
@if($model->colors)
|
||||
borderColor: "{{ $model->colors[0] }}",
|
||||
@endif
|
||||
data: [
|
||||
@foreach($model->values as $dta)
|
||||
{{ $dta }},
|
||||
@endforeach
|
||||
],
|
||||
}]
|
||||
};
|
||||
|
||||
var myLineChart = new Chart(ctx, {
|
||||
type: 'line',
|
||||
data: data,
|
||||
options: {
|
||||
responsive: {{ $model->responsive || !$model->width ? 'true' : 'false' }},
|
||||
maintainAspectRatio: false,
|
||||
@if($model->title)
|
||||
title: {
|
||||
display: true,
|
||||
text: "{!! $model->title !!}",
|
||||
fontSize: 20,
|
||||
}
|
||||
@endif
|
||||
}
|
||||
});
|
||||
</script>
|
||||
57
resources/views/vendor/consoletvs/charts/chartjs/bar.blade.php
vendored
Normal file
57
resources/views/vendor/consoletvs/charts/chartjs/bar.blade.php
vendored
Normal file
@ -0,0 +1,57 @@
|
||||
@if(!$model->customId)
|
||||
@include('charts::_partials.container.canvas2')
|
||||
@endif
|
||||
|
||||
<script type="text/javascript">
|
||||
var ctx = document.getElementById("{{ $model->id }}")
|
||||
var myChart = new Chart(ctx, {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: [
|
||||
@foreach($model->labels as $label)
|
||||
"{!! $label !!}",
|
||||
@endforeach
|
||||
],
|
||||
datasets: [
|
||||
{
|
||||
label: "{!! $model->element_label !!}",
|
||||
backgroundColor: [
|
||||
@if($model->colors)
|
||||
@foreach($model->colors as $color)
|
||||
"{{ $color }}",
|
||||
@endforeach
|
||||
@else
|
||||
@foreach($model->values as $dta)
|
||||
"{{ sprintf('#%06X', mt_rand(0, 0xFFFFFF)) }}",
|
||||
@endforeach
|
||||
@endif
|
||||
],
|
||||
data: [
|
||||
@foreach($model->values as $dta)
|
||||
{{ $dta }},
|
||||
@endforeach
|
||||
],
|
||||
}
|
||||
]
|
||||
},
|
||||
options: {
|
||||
responsive: {{ $model->responsive || !$model->width ? 'true' : 'false' }},
|
||||
maintainAspectRatio: false,
|
||||
@if($model->title)
|
||||
title: {
|
||||
display: true,
|
||||
text: "{!! $model->title !!}",
|
||||
fontSize: 20,
|
||||
},
|
||||
@endif
|
||||
scales: {
|
||||
yAxes: [{
|
||||
display: true,
|
||||
ticks: {
|
||||
beginAtZero: true,
|
||||
}
|
||||
}]
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
72
resources/views/vendor/consoletvs/charts/chartjs/donut.blade.php
vendored
Normal file
72
resources/views/vendor/consoletvs/charts/chartjs/donut.blade.php
vendored
Normal file
@ -0,0 +1,72 @@
|
||||
@if(!$model->customId)
|
||||
@include('charts::_partials.container.canvas2')
|
||||
@endif
|
||||
|
||||
<script type="text/javascript">
|
||||
var ctx = document.getElementById("{{ $model->id }}")
|
||||
|
||||
var myChart = new Chart(ctx, {
|
||||
type: 'doughnut',
|
||||
data: {
|
||||
labels: [
|
||||
@foreach($model->labels as $label)
|
||||
"{!! $label !!}",
|
||||
@endforeach
|
||||
],
|
||||
datasets: [{
|
||||
data: [
|
||||
@foreach($model->values as $dta)
|
||||
{{ $dta }},
|
||||
@endforeach
|
||||
],
|
||||
backgroundColor: [
|
||||
@if($model->colors)
|
||||
@foreach($model->colors as $color)
|
||||
"{{ $color }}",
|
||||
@endforeach
|
||||
@else
|
||||
@foreach($model->values as $dta)
|
||||
"{{ sprintf('#%06X', mt_rand(0, 0xFFFFFF)) }}",
|
||||
@endforeach
|
||||
@endif
|
||||
],
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: {{ $model->responsive || !$model->width ? 'true' : 'false' }},
|
||||
maintainAspectRatio: false,
|
||||
legend: {
|
||||
display: true,
|
||||
fullWidth: true,
|
||||
position: 'right',
|
||||
},
|
||||
tooltips: {
|
||||
callbacks: {
|
||||
label: function(tooltipItem, data) {
|
||||
var allData = data.datasets[tooltipItem.datasetIndex].data;
|
||||
var tooltipLabel = data.labels[tooltipItem.index];
|
||||
var tooltipData = allData[tooltipItem.index];
|
||||
var total = 0;
|
||||
|
||||
var label = tooltipLabel.split(" - ");
|
||||
|
||||
for (var i in allData) {
|
||||
total += allData[i];
|
||||
}
|
||||
|
||||
var tooltipPercentage = Math.round((tooltipData / total) * 100);
|
||||
|
||||
return label[1] + ': ' + label[0] + ' (' + tooltipPercentage + '%)';
|
||||
}
|
||||
}
|
||||
},
|
||||
@if($model->title)
|
||||
title: {
|
||||
display: true,
|
||||
text: "{!! $model->title !!}",
|
||||
fontSize: 20,
|
||||
}
|
||||
@endif
|
||||
}
|
||||
});
|
||||
</script>
|
||||
46
resources/views/vendor/consoletvs/charts/chartjs/line.blade.php
vendored
Normal file
46
resources/views/vendor/consoletvs/charts/chartjs/line.blade.php
vendored
Normal file
@ -0,0 +1,46 @@
|
||||
@if(!$model->customId)
|
||||
@include('charts::_partials.container.canvas2')
|
||||
@endif
|
||||
|
||||
<script type="text/javascript">
|
||||
var ctx = document.getElementById("{{ $model->id }}")
|
||||
var data = {
|
||||
labels: [
|
||||
@foreach($model->labels as $label)
|
||||
"{!! $label !!}",
|
||||
@endforeach
|
||||
],
|
||||
datasets: [
|
||||
{
|
||||
fill: false,
|
||||
label: "{!! $model->element_label !!}",
|
||||
lineTension: 0.3,
|
||||
@if($model->colors)
|
||||
borderColor: "{{ $model->colors[0] }}",
|
||||
backgroundColor: "{{ $model->colors[0] }}",
|
||||
@endif
|
||||
data: [
|
||||
@foreach($model->values as $dta)
|
||||
{{ $dta }},
|
||||
@endforeach
|
||||
],
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
var myLineChart = new Chart(ctx, {
|
||||
type: 'line',
|
||||
data: data,
|
||||
options: {
|
||||
responsive: {{ $model->responsive || !$model->width ? 'true' : 'false' }},
|
||||
maintainAspectRatio: false,
|
||||
@if($model->title)
|
||||
title: {
|
||||
display: true,
|
||||
text: "{!! $model->title !!}",
|
||||
fontSize: 20,
|
||||
}
|
||||
@endif
|
||||
}
|
||||
});
|
||||
</script>
|
||||
56
resources/views/vendor/consoletvs/charts/chartjs/multi/area.blade.php
vendored
Normal file
56
resources/views/vendor/consoletvs/charts/chartjs/multi/area.blade.php
vendored
Normal file
@ -0,0 +1,56 @@
|
||||
@if(!$model->customId)
|
||||
@include('charts::_partials.container.canvas2')
|
||||
@endif
|
||||
|
||||
@include('charts::_partials.helpers.hex2rgb')
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
var ctx = document.getElementById("{{ $model->id }}")
|
||||
var data = {
|
||||
labels: [
|
||||
@foreach($model->labels as $label)
|
||||
"{!! $label !!}",
|
||||
@endforeach
|
||||
],
|
||||
datasets: [
|
||||
@for ($i = 0; $i < count($model->datasets); $i++)
|
||||
{
|
||||
fill: true,
|
||||
label: "{!! $model->datasets[$i]['label'] !!}",
|
||||
lineTension: 0.3,
|
||||
@if($model->colors and count($model->colors) > $i)
|
||||
@php($c = $model->colors[$i])
|
||||
@else
|
||||
@php($c = sprintf('#%06X', mt_rand(0, 0xFFFFFF)))
|
||||
@endif
|
||||
borderColor: "{{ $c }}",
|
||||
backgroundColor: hex2rgba_convert("{{ $c }}", 50),
|
||||
data: [
|
||||
@foreach($model->datasets[$i]['values'] as $dta)
|
||||
{{ $dta }},
|
||||
@endforeach
|
||||
],
|
||||
},
|
||||
@endfor
|
||||
]
|
||||
};
|
||||
|
||||
var myLineChart = new Chart(ctx, {
|
||||
type: 'line',
|
||||
data: data,
|
||||
options: {
|
||||
responsive: {{ $model->responsive || !$model->width ? 'true' : 'false' }},
|
||||
maintainAspectRatio: false,
|
||||
@if($model->title)
|
||||
title: {
|
||||
display: true,
|
||||
text: "{!! $model->title !!}",
|
||||
fontSize: 20,
|
||||
}
|
||||
@endif
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
58
resources/views/vendor/consoletvs/charts/chartjs/multi/bar.blade.php
vendored
Normal file
58
resources/views/vendor/consoletvs/charts/chartjs/multi/bar.blade.php
vendored
Normal file
@ -0,0 +1,58 @@
|
||||
@if(!$model->customId)
|
||||
@include('charts::_partials.container.canvas2')
|
||||
@endif
|
||||
|
||||
<script type="text/javascript">
|
||||
var ctx = document.getElementById("{{ $model->id }}")
|
||||
var myChart = new Chart(ctx, {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: [
|
||||
@foreach($model->labels as $label)
|
||||
"{!! $label !!}",
|
||||
@endforeach
|
||||
],
|
||||
datasets: [
|
||||
@for ($i = 0; $i < count($model->datasets); $i++)
|
||||
{
|
||||
fill: true,
|
||||
label: "{!! $model->datasets[$i]['label'] !!}",
|
||||
lineTension: 0.3,
|
||||
@if($model->colors and count($model->colors) > $i)
|
||||
borderColor: "{{ $model->colors[$i] }}",
|
||||
backgroundColor: "{{ $model->colors[$i] }}",
|
||||
@else
|
||||
$c = sprintf('#%06X', mt_rand(0, 0xFFFFFF))
|
||||
borderColor: "{{ $c }}",
|
||||
backgroundColor: "{{ $c }}",
|
||||
@endif
|
||||
data: [
|
||||
@foreach($model->datasets[$i]['values'] as $dta)
|
||||
{{ $dta }},
|
||||
@endforeach
|
||||
],
|
||||
},
|
||||
@endfor
|
||||
]
|
||||
},
|
||||
options: {
|
||||
responsive: {{ $model->responsive || !$model->width ? 'true' : 'false' }},
|
||||
maintainAspectRatio: false,
|
||||
@if($model->title)
|
||||
title: {
|
||||
display: true,
|
||||
text: "{!! $model->title !!}",
|
||||
fontSize: 20,
|
||||
},
|
||||
@endif
|
||||
scales: {
|
||||
yAxes: [{
|
||||
display: true,
|
||||
ticks: {
|
||||
beginAtZero: true,
|
||||
}
|
||||
}]
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
55
resources/views/vendor/consoletvs/charts/chartjs/multi/line.blade.php
vendored
Normal file
55
resources/views/vendor/consoletvs/charts/chartjs/multi/line.blade.php
vendored
Normal file
@ -0,0 +1,55 @@
|
||||
@if(!$model->customId)
|
||||
@include('charts::_partials.container.canvas2')
|
||||
@endif
|
||||
|
||||
<script type="text/javascript">
|
||||
var ctx = document.getElementById("{{ $model->id }}")
|
||||
var data = {
|
||||
labels: [
|
||||
@foreach($model->labels as $label)
|
||||
"{!! $label !!}",
|
||||
@endforeach
|
||||
],
|
||||
datasets: [
|
||||
@for ($i = 0; $i < count($model->datasets); $i++)
|
||||
{
|
||||
fill: false,
|
||||
label: "{!! $model->datasets[$i]['label'] !!}",
|
||||
lineTension: 0.3,
|
||||
@if($model->colors and count($model->colors) > $i)
|
||||
@php($c = $model->colors[$i])
|
||||
@else
|
||||
@php($c = sprintf('#%06X', mt_rand(0, 0xFFFFFF)))
|
||||
@endif
|
||||
borderColor: "{{ $c }}",
|
||||
backgroundColor: "{{ $c }}",
|
||||
data: [
|
||||
@foreach($model->datasets[$i]['values'] as $dta)
|
||||
{{ $dta }},
|
||||
@endforeach
|
||||
],
|
||||
},
|
||||
@endfor
|
||||
]
|
||||
};
|
||||
|
||||
var myLineChart = new Chart(ctx, {
|
||||
type: 'line',
|
||||
data: data,
|
||||
options: {
|
||||
responsive: {{ $model->responsive || !$model->width ? 'true' : 'false' }},
|
||||
maintainAspectRatio: false,
|
||||
legend: {
|
||||
display: true,
|
||||
position: 'top'
|
||||
},
|
||||
@if($model->title)
|
||||
title: {
|
||||
display: true,
|
||||
text: "{!! $model->title !!}",
|
||||
fontSize: 20,
|
||||
}
|
||||
@endif
|
||||
}
|
||||
});
|
||||
</script>
|
||||
47
resources/views/vendor/consoletvs/charts/chartjs/pie.blade.php
vendored
Normal file
47
resources/views/vendor/consoletvs/charts/chartjs/pie.blade.php
vendored
Normal file
@ -0,0 +1,47 @@
|
||||
@if(!$model->customId)
|
||||
@include('charts::_partials.container.canvas2')
|
||||
@endif
|
||||
|
||||
<script type="text/javascript">
|
||||
var ctx = document.getElementById("{{ $model->id }}")
|
||||
|
||||
var myChart = new Chart(ctx, {
|
||||
type: 'pie',
|
||||
data: {
|
||||
labels: [
|
||||
@foreach($model->labels as $label)
|
||||
"{!! $label !!}",
|
||||
@endforeach
|
||||
],
|
||||
datasets: [{
|
||||
data: [
|
||||
@foreach($model->values as $dta)
|
||||
{{ $dta }},
|
||||
@endforeach
|
||||
],
|
||||
backgroundColor: [
|
||||
@if($model->colors)
|
||||
@foreach($model->colors as $color)
|
||||
"{{ $color }}",
|
||||
@endforeach
|
||||
@else
|
||||
@foreach($model->values as $dta)
|
||||
"{{ sprintf('#%06X', mt_rand(0, 0xFFFFFF)) }}",
|
||||
@endforeach
|
||||
@endif
|
||||
],
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: {{ $model->responsive || !$model->width ? 'true' : 'false' }},
|
||||
maintainAspectRatio: false,
|
||||
@if($model->title)
|
||||
title: {
|
||||
display: true,
|
||||
text: "{!! $model->title !!}",
|
||||
fontSize: 20,
|
||||
}
|
||||
@endif
|
||||
}
|
||||
});
|
||||
</script>
|
||||
Loading…
x
Reference in New Issue
Block a user