From baf597ee70e83f2f0d69145f14296c740a47ad17 Mon Sep 17 00:00:00 2001
From: Burak Civan <burakcivan22@gmail.com>
Date: Fri, 10 Jun 2022 17:39:14 +0300
Subject: [PATCH] text controlled for donut chart

---
 app/Abstracts/Report.php                      |  2 +-
 app/Widgets/ExpensesByCategory.php            |  2 +-
 public/css/app.css                            | 31 +++++++++++++++++++
 resources/assets/sass/app.css                 | 27 ++++++++++++++++
 .../reports/summary/chart.blade.php           |  2 +-
 resources/views/widgets/donut_chart.blade.php |  2 +-
 6 files changed, 62 insertions(+), 4 deletions(-)

diff --git a/app/Abstracts/Report.php b/app/Abstracts/Report.php
index 9151b8cf7..06397a854 100644
--- a/app/Abstracts/Report.php
+++ b/app/Abstracts/Report.php
@@ -237,7 +237,7 @@ abstract class Report
             ->setColors(array_values($colors))
             ->setDataset($this->tables[$table_key], 'donut', array_values($values));
 
-        $chart->options['legend']['width'] = 150;
+        $chart->options['legend']['width'] = 105;
         $chart->options['legend']['position'] = 'right';
 
         return $chart;
diff --git a/app/Widgets/ExpensesByCategory.php b/app/Widgets/ExpensesByCategory.php
index 11010876a..269dfb9b2 100644
--- a/app/Widgets/ExpensesByCategory.php
+++ b/app/Widgets/ExpensesByCategory.php
@@ -27,7 +27,7 @@ class ExpensesByCategory extends Widget
 
         $chart = $this->getDonutChart(trans_choice('general.expenses', 2), '100%', 300, 6);
 
-        $chart->options['legend']['width'] = 210;
+        $chart->options['legend']['width'] = 160;
         $chart->options['legend']['position'] = 'right';
         
         return $this->view('widgets.donut_chart', [
diff --git a/public/css/app.css b/public/css/app.css
index 2be8f9bc1..47c26e139 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -47115,6 +47115,37 @@ html[dir='rtl'] .el-input__suffix {
   }
  /* element-ui */
 
+ /* apex-chart */
+    .apexcharts-donut-custom span.apexcharts-legend-text {
+        display: -webkit-box !important;
+        -webkit-line-clamp: 1 !important;
+        -webkit-box-orient: vertical !important;
+        overflow: hidden !important;
+        height: 1rem !important;
+    }
+
+    .apexcharts-donut-custom .apexcharts-legend-series {
+        display: -webkit-box !important;
+        display: -ms-flexbox !important;
+        display: flex !important;
+        -webkit-box-align: center !important;
+            -ms-flex-align: center !important;
+                align-items: center !important;
+    }
+
+    .apexcharts-donut-custom .apexcharts-legend {
+        padding: 0 !important;
+    }
+
+    .apexcharts-donut-custom .apexcharts-legend-marker {
+        width: 18px !important;
+    }
+
+    .apexcharts-donut-custom-report .apexcharts-legend-marker {
+        width: 12px !important;
+    }
+ /* apex-chart */
+
  /* collapse */
  .active-collapse{
   opacity: 1;
diff --git a/resources/assets/sass/app.css b/resources/assets/sass/app.css
index 457283f40..918028804 100644
--- a/resources/assets/sass/app.css
+++ b/resources/assets/sass/app.css
@@ -452,6 +452,33 @@ html[dir='rtl'] .el-input__suffix {
   }
  /* element-ui */
 
+ /* apex-chart */
+    .apexcharts-donut-custom span.apexcharts-legend-text {
+        display: -webkit-box !important;
+        -webkit-line-clamp: 1 !important;
+        -webkit-box-orient: vertical !important;
+        overflow: hidden !important;
+        height: 1rem !important;
+    }
+
+    .apexcharts-donut-custom .apexcharts-legend-series {
+        display: flex !important;
+        align-items: center !important;
+    }
+
+    .apexcharts-donut-custom .apexcharts-legend {
+        padding: 0 !important;
+    }
+
+    .apexcharts-donut-custom .apexcharts-legend-marker {
+        width: 18px !important;
+    }
+
+    .apexcharts-donut-custom-report .apexcharts-legend-marker {
+        width: 12px !important;
+    }
+ /* apex-chart */
+
  /* collapse */
  .active-collapse {
     @apply opacity-100;
diff --git a/resources/views/components/reports/summary/chart.blade.php b/resources/views/components/reports/summary/chart.blade.php
index 78a6e2860..298d668e3 100644
--- a/resources/views/components/reports/summary/chart.blade.php
+++ b/resources/views/components/reports/summary/chart.blade.php
@@ -18,7 +18,7 @@
             {!! $charts['bar']->container() !!}
         </div>
 
-        <div x-show="toggle === 'bar'">
+        <div class="apexcharts-donut-custom apexcharts-donut-custom-report" x-show="toggle === 'bar'">
             {!! $charts['donut']->container() !!}
         </div>
     </div>
diff --git a/resources/views/widgets/donut_chart.blade.php b/resources/views/widgets/donut_chart.blade.php
index d5a79b1bd..013d10f40 100644
--- a/resources/views/widgets/donut_chart.blade.php
+++ b/resources/views/widgets/donut_chart.blade.php
@@ -1,4 +1,4 @@
-<div id="widget-{{ $class->model->id }}" class="{{ $class->model->settings->width }} my-8">
+<div id="widget-{{ $class->model->id }}" class="apexcharts-donut-custom {{ $class->model->settings->width }} my-8">
     @include($class->views['header'], ['header_class' => ''])
 
     <div class="flex flex-col lg:flex-row mt-3" id="widget-donut-{{ $class->model->id }}">