From 88c9366279637073ed81c8e54a32c8a699e11449 Mon Sep 17 00:00:00 2001 From: denisdulici Date: Mon, 11 Dec 2017 19:07:09 +0300 Subject: [PATCH] new dashboard charts --- app/Http/Controllers/Dashboard/Dashboard.php | 156 ++++------- composer.json | 1 + config/app.php | 2 + config/charts.php | 173 ++++++++++++ .../views/dashboard/dashboard/index.blade.php | 251 +----------------- .../consoletvs/charts/chartjs/area.blade.php | 49 ++++ .../consoletvs/charts/chartjs/bar.blade.php | 57 ++++ .../consoletvs/charts/chartjs/donut.blade.php | 72 +++++ .../consoletvs/charts/chartjs/line.blade.php | 46 ++++ .../charts/chartjs/multi/area.blade.php | 56 ++++ .../charts/chartjs/multi/bar.blade.php | 58 ++++ .../charts/chartjs/multi/line.blade.php | 55 ++++ .../consoletvs/charts/chartjs/pie.blade.php | 47 ++++ 13 files changed, 681 insertions(+), 342 deletions(-) create mode 100644 config/charts.php create mode 100644 resources/views/vendor/consoletvs/charts/chartjs/area.blade.php create mode 100644 resources/views/vendor/consoletvs/charts/chartjs/bar.blade.php create mode 100644 resources/views/vendor/consoletvs/charts/chartjs/donut.blade.php create mode 100644 resources/views/vendor/consoletvs/charts/chartjs/line.blade.php create mode 100644 resources/views/vendor/consoletvs/charts/chartjs/multi/area.blade.php create mode 100644 resources/views/vendor/consoletvs/charts/chartjs/multi/bar.blade.php create mode 100644 resources/views/vendor/consoletvs/charts/chartjs/multi/line.blade.php create mode 100644 resources/views/vendor/consoletvs/charts/chartjs/pie.blade.php diff --git a/app/Http/Controllers/Dashboard/Dashboard.php b/app/Http/Controllers/Dashboard/Dashboard.php index 6aed71170..f401b3b19 100644 --- a/app/Http/Controllers/Dashboard/Dashboard.php +++ b/app/Http/Controllers/Dashboard/Dashboard.php @@ -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' diff --git a/composer.json b/composer.json index 3b38ef5ce..bfe3a069c 100644 --- a/composer.json +++ b/composer.json @@ -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.*", diff --git a/config/app.php b/config/app.php index 45067ec55..fbfa3c154 100644 --- a/config/app.php +++ b/config/app.php @@ -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, diff --git a/config/charts.php b/config/charts.php new file mode 100644 index 000000000..5d4e790c6 --- /dev/null +++ b/config/charts.php @@ -0,0 +1,173 @@ + [ + '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', + ], + ], + ], +]; diff --git a/resources/views/dashboard/dashboard/index.blade.php b/resources/views/dashboard/dashboard/index.blade.php index 3e8e55970..dd9d6542b 100644 --- a/resources/views/dashboard/dashboard/index.blade.php +++ b/resources/views/dashboard/dashboard/index.blade.php @@ -75,74 +75,11 @@
-
-
-
- -
-
- -
-
-
-
-
-
-
- {{ trans_choice('general.incomes', 1) }} -
-
-
-
-
-
-
-
-
- {{ trans_choice('general.expenses', 1) }} -
-
-
-
-
-
-
-
-
- {{ trans_choice('general.profits', 1) }} -
-
-
-
+
+ {!! $line_daily->render() !!}
-
- @if ($cash_flow['monthly']) -
-
-

- @money($total_incomes['total'], setting('general.default_currency'), true) -

- {{ trans_choice('general.incomes', 1) }} -
-
-

- @money($total_expenses['total'], setting('general.default_currency'), true) -

- {{ trans_choice('general.expenses', 1) }} -
-
-

- @money($total_incomes['total'] - $total_expenses['total'], setting('general.default_currency'), true) -

- {{ trans_choice('general.profits', 1) }} -
-
-
-
-
- @else -
{{ trans('dashboard.no_profit_loss') }}
- @endif +
+ {!! $line_monthly->render() !!}
@@ -162,20 +99,7 @@
-
-
-
- -
-
-
-
    - @foreach ($incomes as $item) -
  • {{ $item['amount'] . ' ' . $item['label'] }}
    • - @endforeach -
-
-
+ {!! $donut_incomes->render() !!}
@@ -190,20 +114,7 @@
-
-
-
- -
-
-
-
    - @foreach ($expenses as $item) -
  • {{ $item['amount'] . ' ' . $item['label'] }}
    • - @endforeach -
-
-
+ {!! $donut_expenses->render() !!}
@@ -316,151 +227,5 @@ @endsection @push('js') - - -@endpush - -@push('scripts') - -@endpush +{!! Charts::assets() !!} +@endpush \ No newline at end of file diff --git a/resources/views/vendor/consoletvs/charts/chartjs/area.blade.php b/resources/views/vendor/consoletvs/charts/chartjs/area.blade.php new file mode 100644 index 000000000..8f48dc96c --- /dev/null +++ b/resources/views/vendor/consoletvs/charts/chartjs/area.blade.php @@ -0,0 +1,49 @@ +@if(!$model->customId) + @include('charts::_partials.container.canvas2') +@endif + +@include('charts::_partials.helpers.hex2rgb') + + diff --git a/resources/views/vendor/consoletvs/charts/chartjs/bar.blade.php b/resources/views/vendor/consoletvs/charts/chartjs/bar.blade.php new file mode 100644 index 000000000..94ab0fd5d --- /dev/null +++ b/resources/views/vendor/consoletvs/charts/chartjs/bar.blade.php @@ -0,0 +1,57 @@ +@if(!$model->customId) + @include('charts::_partials.container.canvas2') +@endif + + diff --git a/resources/views/vendor/consoletvs/charts/chartjs/donut.blade.php b/resources/views/vendor/consoletvs/charts/chartjs/donut.blade.php new file mode 100644 index 000000000..e671bb1c4 --- /dev/null +++ b/resources/views/vendor/consoletvs/charts/chartjs/donut.blade.php @@ -0,0 +1,72 @@ +@if(!$model->customId) + @include('charts::_partials.container.canvas2') +@endif + + diff --git a/resources/views/vendor/consoletvs/charts/chartjs/line.blade.php b/resources/views/vendor/consoletvs/charts/chartjs/line.blade.php new file mode 100644 index 000000000..378a76104 --- /dev/null +++ b/resources/views/vendor/consoletvs/charts/chartjs/line.blade.php @@ -0,0 +1,46 @@ +@if(!$model->customId) + @include('charts::_partials.container.canvas2') +@endif + + diff --git a/resources/views/vendor/consoletvs/charts/chartjs/multi/area.blade.php b/resources/views/vendor/consoletvs/charts/chartjs/multi/area.blade.php new file mode 100644 index 000000000..5b3bdcff3 --- /dev/null +++ b/resources/views/vendor/consoletvs/charts/chartjs/multi/area.blade.php @@ -0,0 +1,56 @@ +@if(!$model->customId) + @include('charts::_partials.container.canvas2') +@endif + +@include('charts::_partials.helpers.hex2rgb') + + diff --git a/resources/views/vendor/consoletvs/charts/chartjs/multi/bar.blade.php b/resources/views/vendor/consoletvs/charts/chartjs/multi/bar.blade.php new file mode 100644 index 000000000..cc109cbef --- /dev/null +++ b/resources/views/vendor/consoletvs/charts/chartjs/multi/bar.blade.php @@ -0,0 +1,58 @@ +@if(!$model->customId) + @include('charts::_partials.container.canvas2') +@endif + + diff --git a/resources/views/vendor/consoletvs/charts/chartjs/multi/line.blade.php b/resources/views/vendor/consoletvs/charts/chartjs/multi/line.blade.php new file mode 100644 index 000000000..45874dd4a --- /dev/null +++ b/resources/views/vendor/consoletvs/charts/chartjs/multi/line.blade.php @@ -0,0 +1,55 @@ +@if(!$model->customId) + @include('charts::_partials.container.canvas2') +@endif + + diff --git a/resources/views/vendor/consoletvs/charts/chartjs/pie.blade.php b/resources/views/vendor/consoletvs/charts/chartjs/pie.blade.php new file mode 100644 index 000000000..c04743a46 --- /dev/null +++ b/resources/views/vendor/consoletvs/charts/chartjs/pie.blade.php @@ -0,0 +1,47 @@ +@if(!$model->customId) + @include('charts::_partials.container.canvas2') +@endif + +