From f6e0c4dfc2a162c15161f841eb0d602cef4d615f Mon Sep 17 00:00:00 2001
From: denisdulici <denisdulici@gmail.com>
Date: Fri, 3 Jan 2020 19:00:38 +0300
Subject: [PATCH] refactored widget charts

---
 app/Widgets/CashFlow.php                      |  2 +-
 app/Widgets/ExpensesByCategory.php            |  2 +-
 app/Widgets/IncomeByCategory.php              |  2 +-
 public/css/custom.css                         |  6 ++---
 ...tegory.blade.php => donut_chart.blade.php} |  8 +++----
 .../widgets/income_by_category.blade.php      | 23 -------------------
 ...sh_flow.blade.php => line_chart.blade.php} |  6 ++---
 .../views/widgets/total_expenses.blade.php    |  2 +-
 .../views/widgets/total_income.blade.php      | 22 +++++++++---------
 9 files changed, 25 insertions(+), 48 deletions(-)
 rename resources/views/widgets/{expenses_by_category.blade.php => donut_chart.blade.php} (64%)
 delete mode 100644 resources/views/widgets/income_by_category.blade.php
 rename resources/views/widgets/{cash_flow.blade.php => line_chart.blade.php} (70%)

diff --git a/app/Widgets/CashFlow.php b/app/Widgets/CashFlow.php
index 9c557b7c1..4604e6198 100644
--- a/app/Widgets/CashFlow.php
+++ b/app/Widgets/CashFlow.php
@@ -92,7 +92,7 @@ class CashFlow extends Widget
                 ])
             ->fill(false);
 
-        return $this->view('widgets.cash_flow', [
+        return $this->view('widgets.line_chart', [
             'chart' => $chart,
         ]);
     }
diff --git a/app/Widgets/ExpensesByCategory.php b/app/Widgets/ExpensesByCategory.php
index 37f5a9601..b138f7d00 100644
--- a/app/Widgets/ExpensesByCategory.php
+++ b/app/Widgets/ExpensesByCategory.php
@@ -23,7 +23,7 @@ class ExpensesByCategory extends Widget
 
         $chart = $this->getDonutChart(trans_choice('general.expenses', 2), 0, 160, 6);
 
-        return $this->view('widgets.expenses_by_category', [
+        return $this->view('widgets.donut_chart', [
             'chart' => $chart,
         ]);
     }
diff --git a/app/Widgets/IncomeByCategory.php b/app/Widgets/IncomeByCategory.php
index b23bf08ef..fc9f536ac 100644
--- a/app/Widgets/IncomeByCategory.php
+++ b/app/Widgets/IncomeByCategory.php
@@ -23,7 +23,7 @@ class IncomeByCategory extends Widget
 
         $chart = $this->getDonutChart(trans_choice('general.incomes', 1), 0, 160, 6);
 
-        return $this->view('widgets.income_by_category', [
+        return $this->view('widgets.donut_chart', [
             'chart' => $chart,
         ]);
     }
diff --git a/public/css/custom.css b/public/css/custom.css
index 19c71f49a..0e5273bdb 100644
--- a/public/css/custom.css
+++ b/public/css/custom.css
@@ -39,13 +39,13 @@ button:focus
 /*--------Forgot Text Finish--------*/
 
 
-/*--------Dashboard Categories--------*/
-.dashboard-categories
+/*--------Chart Donut Height--------*/
+.chart-donut
 {
     position:relative !important;
     height:23vh !important;
 }
-/*--------Dashboard Categories Finish--------*/
+/*--------Chart Donut Height Finish--------*/
 
 
 /*--------Cursor Pointer--------*/
diff --git a/resources/views/widgets/expenses_by_category.blade.php b/resources/views/widgets/donut_chart.blade.php
similarity index 64%
rename from resources/views/widgets/expenses_by_category.blade.php
rename to resources/views/widgets/donut_chart.blade.php
index 7c2f1959d..5441b2709 100644
--- a/resources/views/widgets/expenses_by_category.blade.php
+++ b/resources/views/widgets/donut_chart.blade.php
@@ -2,8 +2,8 @@
     <div class="card">
         @include('partials.widgets.standard_header')
 
-        <div class="card-body" id="expenses-category-doughnut">
-            <div class="dashboard-categories">
+        <div class="card-body" id="widget-donut-{{ $model->id }}">
+            <div class="chart-donut">
                 {!! $chart->container() !!}
             </div>
         </div>
@@ -12,8 +12,8 @@
 
 @push('charts')
     <script>
-        var expenses_category_doughnut = new Vue({
-            el: '#expenses-category-doughnut',
+        var widget_donut_{{ $model->id }} = new Vue({
+            el: '#widget-donut-{{ $model->id }}',
         });
     </script>
 @endpush
diff --git a/resources/views/widgets/income_by_category.blade.php b/resources/views/widgets/income_by_category.blade.php
deleted file mode 100644
index 1c23a440c..000000000
--- a/resources/views/widgets/income_by_category.blade.php
+++ /dev/null
@@ -1,23 +0,0 @@
-<div id="widget-{{ $model->id }}" class="{{ $model->settings->width }}">
-    <div class="card">
-        @include('partials.widgets.standard_header')
-
-        <div class="card-body" id="income-category-doughnut">
-            <div class="dashboard-categories">
-                {!! $chart->container() !!}
-            </div>
-        </div>
-    </div>
-</div>
-
-@push('charts')
-    <script>
-        var income_category_doughnut = new Vue({
-            el: '#income-category-doughnut',
-        });
-    </script>
-@endpush
-
-@push('body_scripts')
-    {!! $chart->script() !!}
-@endpush
diff --git a/resources/views/widgets/cash_flow.blade.php b/resources/views/widgets/line_chart.blade.php
similarity index 70%
rename from resources/views/widgets/cash_flow.blade.php
rename to resources/views/widgets/line_chart.blade.php
index 22bfc2845..2f3d8efad 100644
--- a/resources/views/widgets/cash_flow.blade.php
+++ b/resources/views/widgets/line_chart.blade.php
@@ -2,7 +2,7 @@
     <div class="card">
         @include('partials.widgets.standard_header')
 
-        <div class="card-body" id="cashflow">
+        <div class="card-body" id="widget-line-{{ $model->id }}">
             <div class="chart">
                 {!! $chart->container() !!}
             </div>
@@ -12,8 +12,8 @@
 
 @push('charts')
     <script>
-        var cash_flow = new Vue({
-            el: '#cashflow',
+        var widget_line_{{ $model->id }} = new Vue({
+            el: '#widget-line-{{ $model->id }}',
         });
     </script>
 @endpush
diff --git a/resources/views/widgets/total_expenses.blade.php b/resources/views/widgets/total_expenses.blade.php
index 5ae815424..904d23682 100644
--- a/resources/views/widgets/total_expenses.blade.php
+++ b/resources/views/widgets/total_expenses.blade.php
@@ -10,7 +10,7 @@
                 </div>
 
                 <div class="col-auto">
-                    <div class="icon icon-shape  bg-white text-danger rounded-circle shadow">
+                    <div class="icon icon-shape bg-white text-danger rounded-circle shadow">
                         <i class="fa fa-shopping-cart"></i>
                     </div>
                 </div>
diff --git a/resources/views/widgets/total_income.blade.php b/resources/views/widgets/total_income.blade.php
index 4f2dc128c..87bd52f3f 100644
--- a/resources/views/widgets/total_income.blade.php
+++ b/resources/views/widgets/total_income.blade.php
@@ -16,17 +16,17 @@
                 </div>
             </div>
 
-                <p class="mt-3 mb-0 text-sm cursor-default">
-                    <span class="text-white">{{ trans('widgets.receivables') }}</span>
-                    <el-tooltip
-                    content="{{ trans('widgets.open_invoices') }}: {{ $totals['open'] }} / {{ trans('widgets.overdue_invoices') }}: {{ $totals['overdue'] }}"
-                    effect="light"
-                    :open-delay="200"
-                    placement="top"
-                    popper-class="text-dark">
-                        <span class="text-white font-weight-bold float-right">{{ $totals['open'] }} / {{ $totals['overdue'] }}</span>
-                    </el-tooltip>
-                </p>
+            <p class="mt-3 mb-0 text-sm cursor-default">
+                <span class="text-white">{{ trans('widgets.receivables') }}</span>
+                <el-tooltip
+                content="{{ trans('widgets.open_invoices') }}: {{ $totals['open'] }} / {{ trans('widgets.overdue_invoices') }}: {{ $totals['overdue'] }}"
+                effect="light"
+                :open-delay="200"
+                placement="top"
+                popper-class="text-dark">
+                    <span class="text-white font-weight-bold float-right">{{ $totals['open'] }} / {{ $totals['overdue'] }}</span>
+                </el-tooltip>
+            </p>
         </div>
     </div>
 </div>