refactored widget charts

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,
         ]);
     }

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,
         ]);
     }

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,
         ]);
     }

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--------*/

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

resources/views/widgets/income_by_category.blade.php

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

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

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>

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>