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--------*/
+/*--------Chart Donut Height--------*/
-.dashboard-categories
+.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="card-body" id="widget-donut-{{ $model->id }}">
-            <div class="dashboard-categories">
+            <div class="chart-donut">
                 {!! $chart->container() !!}
             </div>
         </div>
@@ -12,8 +12,8 @@
 
 @push('charts')
     <script>
-        var expenses_category_doughnut = new Vue({
+        var widget_donut_{{ $model->id }} = new Vue({
-            el: '#expenses-category-doughnut',
+            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({
+        var widget_line_{{ $model->id }} = new Vue({
-            el: '#cashflow',
+            el: '#widget-line-{{ $model->id }}',
         });
     </script>
 @endpush