shihaam/akaunting
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

new dashboard charts

Browse Source
This commit is contained in:
denisdulici
2017-12-11 19:07:09 +03:00
parent 66b1ee9c54
commit 88c9366279
13 changed files with 681 additions and 342 deletions
Download Patch File Download Diff File Expand all files Collapse all files

156
app/Http/Controllers/Dashboard/Dashboard.php
View File

@@ -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'

1
composer.json
View File

@@ -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.*",

2
config/app.php
View File

@@ -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
View 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',
],
],
],
];

251
resources/views/dashboard/dashboard/index.blade.php
View File

@@ -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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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>