SERV-2286 - pie chart elements setup and configuration WIP

src/Views/Limitless/Help/Layout/Master.blade.php

@@ -43,6 +43,7 @@
             @Limitless::SideNavMenuSectionTitle(['title' => 'Charts'])
             @Limitless::SideNavMenuItem(['url' => '?page=Linechart', 'target' => '_self', 'icon' => 'icon-statistics', 'title' => 'Line chart'])
             @Limitless::SideNavMenuItem(['url' => '?page=Barchart', 'target' => '_self', 'icon' => 'icon-stats-bars3', 'title' => 'Bar chart'])
+            @Limitless::SideNavMenuItem(['url' => '?page=Piechart', 'target' => '_self', 'icon' => 'icon-stats-bars3', 'title' => 'Pie chart'])
 
             @Limitless::SideNavMenuSectionTitle(['title' => 'Navigations'])
             @Limitless::SideNavMenuItem(['url' => '?page=Sidenav', 'target' => '_self', 'icon' => 'icon-sort', 'title' => 'Side Navigation'])

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

+//#region MAIN FUNCTIONS
+function set_chart() {
+
+    if (typeof echarts == 'undefined') {
+        console.warn('Warning - echarts.min.js is not loaded.');
+        return;
+    }
+
+    let chartCounter = 0;
+
+    $('.LimitlessPieChart').each(function() {
+
+        chartCounter++;
+        let elementChart = $(this);
+        elementChart.attr('id', 'LimitlessPieChart' + chartCounter);
+
+        init_chart(elementChart[0].id);
+
+    });
+
+}
+
+function init_chart(chartId) {
+
+    // Define element
+    let chartElement = document.getElementById(chartId);
+
+    if (chartElement) {
+
+        let elementObject = $(chartElement);
+        let chartInstance = echarts.init(chartElement);
+
+        chartInstance.showLoading({
+            text: 'LADE DATEN',
+            maskColor: '#353f53',
+            color: '#fff',
+            textColor: '#fff',
+            fontSize: 15
+        });
+
+        set_data(elementObject, function(options) {
+            chartInstance.hideLoading();
+            chartInstance.setOption(options);
+            setResizeEvent(chartElement, chartInstance);
+        })
+    }
+}
+
+function set_data(elementObject, callback) {
+
+    setTimeout(function() {
+
+        const defaultColors = [
+            '#2ec7c9','#b6a2de','#5ab1ef','#ffb980','#d87a80',
+            '#8d98b3','#e5cf0d','#97b552','#95706d','#dc69aa',
+            '#07a2a4','#9a7fd1','#588dd5','#f5994e','#c05050',
+            '#59678c','#c9ab00','#7eb00a','#6f5553','#c14089',
+            '#66bb6a'
+        ];
+
+        let options;
+        let rawData = elementObject.attr('raw') ? JSON.parse(elementObject.attr('raw')) : null;
+
+        if(rawData == null) {
+
+            // variables (this will be set by user)
+            let title = elementObject.attr('title') ?? null;
+            let subtitle = elementObject.attr('subtitle') ?? null;
+            let colors = JSON.parse(elementObject.attr('colors')) ?? defaultColors;
+
+            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);
+
+            console.log(seriesNames);
+            console.log(seriesObject);
+
+            // Options
+            options = {
+
+                // Chart title
+                title: setTitle(title, subtitle),
+
+                // Define colors
+                color: colors,
+
+                // Global text styles
+                textStyle: setGlobalTextStyle(),
+
+                // Chart animation duration
+                animationDuration: animationDuration,
+
+                // Add legend
+                legend: setLegend(seriesNames),
+
+                // Add tooltip
+                tooltip: setTooltip(),
+
+                // Add series
+                series: seriesObject
+            };
+
+        } else {
+            options = rawData;
+        }
+
+        callback(options);
+
+    }, 1000);
+
+}
+
+//#endregion
+
+//#region FUNCTIONS FOR OPTIONS
+function setSeries(series) {
+
+    if(!series || series.length == 0) return [];
+
+    let data = {
+        name: series.name,
+        type: 'pie',
+        data: series.data,
+        radius: '70%',
+        center: ['50%', '57.5%'],
+        itemStyle: {
+            normal: {
+                borderWidth: 2,
+                borderColor: '#353f53'
+            }
+        },
+    }
+
+    return data;
+}
+
+function setLegend(legendData) {
+    return  {
+        orient: 'vertical',
+        top: 'center',
+        left: 0,
+        data: legendData,
+        itemHeight: 8,
+        itemWidth: 8,
+        textStyle: {
+            color: '#fff'
+        }
+    }
+}
+
+function setTitle(title, subtitle) {
+
+    if(title == null) return null;
+
+    return {
+        text: title,
+        subtext: subtitle,
+        left: 'center',
+        textStyle: {
+            fontSize: 17,
+            fontWeight: 500,
+            color: '#fff'
+        },
+        subtextStyle: {
+            fontSize: 12,
+            color: '#fff'
+        }
+    }
+
+}
+
+function setTooltip() {
+    return {
+        trigger: 'item',
+        backgroundColor: 'rgba(255,255,255,0.9)',
+        padding: [10, 15],
+        textStyle: {
+            color: '#222',
+            fontSize: 13,
+            fontFamily: 'Roboto, sans-serif'
+        },
+        formatter: "{a} <br/>{b}: {c} ({d}%)"
+    }
+}
+
+function setGlobalTextStyle() {
+    return {
+        fontFamily: 'Roboto, Arial, Verdana, sans-serif',
+        fontSize: 13
+    };
+}
+
+//#endregion
+
+function setResizeEvent(chartElement, chartInstance) {
+    // Resize function
+    let triggerChartResize = function() {
+        chartElement && chartInstance.resize();
+    };
+
+    // On sidebar width change
+    let sidebarToggle = document.querySelector('.sidebar-control');
+    sidebarToggle && sidebarToggle.addEventListener('click', triggerChartResize);
+
+    // On window resize
+    let resizeCharts;
+    window.addEventListener('resize', function() {
+        clearTimeout(resizeCharts);
+        resizeCharts = setTimeout(function () {
+            triggerChartResize();
+        }, 200);
+    });
+}
+
+$(document).ready(function() { set_chart(); });
\ No newline at end of file

src/Views/Limitless/Piechart/Config.php

+<?php
+
+
+    /*
+    |------------------------------------------------------------------------------------------------
+    | Information
+    |------------------------------------------------------------------------------------------------
+    |
+    | This file is beautified by the command "sidekick:CodebeautifierCommand" of the ceetrox
+    | sidekick package.
+    |
+    | Author: Kevin Almond Roe Yumang <kevin.yumang@itmax.email>
+    | Update: 2022-07-21 01:24:33
+    |
+    */
+    namespace Ceetrox\Sidekick\Views\Limitless\Piechart;
+
+
+    /*
+    |------------------------------------------------------------------------------------------------
+    | Dependencies
+    |------------------------------------------------------------------------------------------------
+    */
+    use View;
+
+
+    /*
+    |------------------------------------------------------------------------------------------------
+    | Class "Config"
+    |------------------------------------------------------------------------------------------------
+    */
+    class Config 
+    {
+        public $methodAllocation = [
+        'Limitless::PieChart' => 'pieChart'
+        ];
+
+        public $assetAllocation;
+
+
+        /*
+        |--------------------------------------------------------------------------------------------
+        | Method "__construct"
+        |--------------------------------------------------------------------------------------------
+        */
+        public function __construct()
+        {
+            $this->assetAllocation = [
+            'Limitless::PieChart' => [
+            'Attachments/piechart.init.js',
+            secure_url('/ceetrox/sidekick/resource/public/Webdesigns/design-limitless/Template/global_assets/js/plugins/visualization/echarts/echarts.min.js'),
+            ]
+            ];
+
+        }
+
+
+        /*
+        |--------------------------------------------------------------------------------------------
+        | Method "lineChart"
+        |--------------------------------------------------------------------------------------------
+        */
+        public function pieChart($parameters)
+        {
+            return View('Limitless::Piechart.PieChart')
+            ->withTitle($parameters['title'] ?? null)
+            ->withSubtitle($parameters['subtitle'] ?? null)
+            ->withColors($parameters['colors'] ?? null)
+            ->withAnimationDuration($parameters['animation-duration'] ?? 750)
+            ->withSeries($parameters['series'] ?? null)
+            ->withRaw($parameters['raw'] ?? null);
+
+        }
+
+    }
+
+
+

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

+{{-- Layout Reference --}}
+@extends('Limitless::Help.Layout.Master')
+
+@section('Limitless::Content')
+
+    @php
+
+        // sample backend data
+        $series = ['ONC', 'APR', 'SPR', 'PHX', 'BRG'];
+
+        $data['name'] = 'Projects';
+        foreach ($series as $s) {
+            $seriesData = (object)[];
+            $seriesData->name = $s;
+            $seriesData->value = rand(1,100);
+            $data['data'][] = $seriesData;
+        }
+
+    @endphp
+
+    <div class="col-xl-6">
+        @Limitless::CardStart(['title' => "Basic Setup", 'icon' => 'icon-info22' ] )
+            @Limitless::PieChart([
+                'title' => 'Basic Pie Chart',
+                'subtitle' => 'test basic pie chart setup',
+                'series' => $data,
+            ])
+        @Limitless::CardStop
+    </div>
+
+    <div class="col-xl-6">
+        @Limitless::CardStart(['title' => "Basic Setup", 'icon' => 'icon-info22' ] )
+            @Limitless::PieChart([
+                'series' => $data,
+            ])
+        @Limitless::CardStop
+    </div>
+
+@stop

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

+<div class="chart-container">
+    <div class="chart has-fixed-height LimitlessPieChart"
+         title="{{ $title }}"
+         subtitle="{{ $subtitle }}"
+         colors="{{ json_encode($colors) }}"
+         animation-duration="{{ $animationDuration }}"
+         series="{{ json_encode($series) }}"
+         raw="{{ json_encode(json_decode($raw)) }}"
+    >
+    </div>
+</div>
\ No newline at end of file