SERV-2286 - pie chart elements setup and configuration WIP

src/Views/Limitless/Piechart/Attachments/piechart.init.js

@@ -67,18 +67,13 @@ function set_data(elementObject, callback) {
             let title = elementObject.attr('title') ?? null;
             let subtitle = elementObject.attr('subtitle') ?? null;
             let colors = JSON.parse(elementObject.attr('colors')) ?? defaultColors;
-
+            let donut = (elementObject.attr('donut') == 'true' || elementObject.attr('donut') == true);
             let animationDuration = elementObject.attr('animation-duration') ?? 750;
 
             let series = JSON.parse(elementObject.attr('series')) ?? null;
-
-            console.log(series);
-
             let seriesNames = series && series.data.map(function(item){ return item.name });
-            let seriesObject = setSeries(series);
+            let seriesObject = setSeries(series, donut);
 
-            console.log(seriesNames);
-            console.log(seriesObject);
 
             // Options
             options = {
@@ -118,7 +113,7 @@ function set_data(elementObject, callback) {
 //#endregion
 
 //#region FUNCTIONS FOR OPTIONS
-function setSeries(series) {
+function setSeries(series, donut) {
 
     if(!series || series.length == 0) return [];
 
@@ -126,7 +121,7 @@ function setSeries(series) {
         name: series.name,
         type: 'pie',
         data: series.data,
-        radius: '70%',
+        radius: donut ? ['50%', '70%'] : '70%',
         center: ['50%', '57.5%'],
         itemStyle: {
             normal: {

src/Views/Limitless/Piechart/Config.php

@@ -65,6 +65,7 @@
             return View('Limitless::Piechart.PieChart')
             ->withTitle($parameters['title'] ?? null)
             ->withSubtitle($parameters['subtitle'] ?? null)
+            ->withDonut($parameters['donut'] ?? false)
             ->withColors($parameters['colors'] ?? null)
             ->withAnimationDuration($parameters['animation-duration'] ?? 750)
             ->withSeries($parameters['series'] ?? null)

src/Views/Limitless/Piechart/Documentation/Index.blade.php

@@ -18,22 +18,27 @@
 
     @endphp
 
-    <div class="col-xl-6">
-        @Limitless::CardStart(['title' => "Basic Setup", 'icon' => 'icon-info22' ] )
+    <div class="row">
+        <div class="col-xl-6">
+            @Limitless::CardStart(['title' => "Basic Pie Setup", 'icon' => 'icon-info22' ] )
             @Limitless::PieChart([
                 'title' => 'Basic Pie Chart',
-                'subtitle' => 'test basic pie chart setup',
+                'subtitle' => 'basic pie chart setup',
                 'series' => $data,
             ])
-        @Limitless::CardStop
-    </div>
+            @Limitless::CardStop
+        </div>
 
-    <div class="col-xl-6">
-        @Limitless::CardStart(['title' => "Basic Setup", 'icon' => 'icon-info22' ] )
+        <div class="col-xl-6">
+            @Limitless::CardStart(['title' => "Basic Donut Setup", 'icon' => 'icon-info22' ] )
             @Limitless::PieChart([
+                'title' => 'Basic Donut Chart',
+                'subtitle' => 'basic donut chart setup',
+                'donut' => true,
                 'series' => $data,
             ])
-        @Limitless::CardStop
+            @Limitless::CardStop
+        </div>
     </div>
 
 @stop

src/Views/Limitless/Piechart/PieChart.blade.php

@@ -3,6 +3,7 @@
          title="{{ $title }}"
          subtitle="{{ $subtitle }}"
          colors="{{ json_encode($colors) }}"
+         donut="{{$donut}}"
          animation-duration="{{ $animationDuration }}"
          series="{{ json_encode($series) }}"
          raw="{{ json_encode(json_decode($raw)) }}"