SERV-2286 - barchart element WIP

src/Views/Limitless/Barchart/BarChart.blade.php

+<div class="chart-container">
+    <div class="chart has-fixed-height LimitlessLineChart"
+         charts="{{ $charts }}"
+         titles="{{ json_encode($titles) }}"
+         colors="{{ json_encode($colors) }}"
+         point-values="{{ $pointValues }}"
+         boundary-gap="{{ $boundaryGap }}"
+         inverted="{{ $inverted }}"
+         data-zoom="{{ $dataZoom }}"
+         stacked="{{ $stacked }}"
+         is-area="{{ $isArea }}"
+         animation-duration="{{ $animationDuration }}"
+         @if($yAxisLabelValueFormat != null) y-axis-label-value-format="{{ $yAxisLabelValueFormat }}" @endif
+         @if($markLine != null) mark-line="{{ $markLine }}" @endif
+         categories="{{ json_encode($categories) }}"
+         series="{{ json_encode($series) }}"
+         raw="{{ $raw }}"
+    >
+    </div>
+</div>
\ No newline at end of file

src/Views/Limitless/Barchart/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:27:31
+    |
+    */
+    namespace Ceetrox\Sidekick\Views\Limitless\Barchart;
+
+
+    /*
+    |------------------------------------------------------------------------------------------------
+    | Dependencies
+    |------------------------------------------------------------------------------------------------
+    */
+    use View;
+
+
+    /*
+    |------------------------------------------------------------------------------------------------
+    | Class "Config"
+    |------------------------------------------------------------------------------------------------
+    */
+    class Config 
+    {
+        public $methodAllocation = [
+        'Limitless::BarChart' => 'barChart'
+        ];
+
+        
+        public $assetAllocation;
+
+
+        /*
+        |--------------------------------------------------------------------------------------------
+        | Method "__construct"
+        |--------------------------------------------------------------------------------------------
+        */
+        public function __construct()
+        {
+            $this->assetAllocation = [
+            'Limitless::LineChart' => [
+            'Attachments/barchart.init.js',
+            secure_url('/ceetrox/sidekick/resource/public/Webdesigns/design-limitless/Template/global_assets/js/plugins/visualization/echarts/echarts.min.js'),
+            ]
+            ];
+
+        }
+
+
+        /*
+        |--------------------------------------------------------------------------------------------
+        | Method "barChart"
+        |--------------------------------------------------------------------------------------------
+        */
+        public function barChart($parameters)
+        {
+            return View('Limitless::Barchart.barChart')
+            ->withCharts($parameters['charts'] ?? 1)
+            ->withTitles($parameters['titles'] ?? null)
+            ->withColors($parameters['colors'] ?? null)
+            ->withPointValues($parameters['point-values'] ?? false)
+            ->withBoundaryGap($parameters['boundary-gap'] ?? true)
+            ->withInverted($parameters['inverted'] ?? false)
+            ->withDataZoom($parameters['data-zoom'] ?? false)
+            ->withStacked($parameters['stacked'] ?? false)
+            ->withIsArea($parameters['is-area'] ?? false)
+            ->withAnimationDuration($parameters['animation-duration'] ?? 750)
+            ->withYAxisLabelValueFormat($parameters['y-axis-label-value-format'] ?? null)
+            ->withMarkLine($parameters['mark-line'] ?? null)
+            ->withCategories($parameters['categories'] ?? null)
+            ->withSeries($parameters['series'] ?? null)
+            ->withRaw($parameters['raw'] ?? null);
+
+        }
+
+    }
+
+
+

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

+{{-- Layout Reference --}}
+@extends('Limitless::Help.Layout.Master')
+
+@section('Limitless::Content')
+
+    @php
+
+        // sample backend data
+        $categories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'July', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+        $series = ['ONC', 'APR', 'SPR', 'PHX', 'SIG', 'BRG', 'MNT', 'SDK', 'OCT'];
+
+        $seriesData = [];
+        foreach ($series as $s) {
+            $data['name'] = $s;
+            $dataArray = [];
+            foreach ($categories as $c) {
+               $dataArray[] = rand(1,100);
+            }
+            $data['data'] = $dataArray;
+            $data['index'] = 0; //rand(0,1); on what chart index to add.
+            $seriesData[] = $data;
+        }
+
+        // json string data should be valid else it will return null
+        $rawData = '{
+           "xAxis":{
+              "type":"category",
+              "boundaryGap":false,
+              "data":["Mon","Tue","Wed","Thu","Fri","Sat","Sun"]
+           },
+           "yAxis":{
+              "type":"value"
+           },
+           "series":[
+              {
+                 "data":[820,932,901,934,1290,1330,1320],
+                 "type":"line",
+                 "areaStyle":{}
+              }
+           ]
+        }';
+
+    @endphp
+
+    @Limitless::CardStart(['title' => "Basic Setup", 'icon' => 'icon-info22' ] )
+        @Limitless::LineChart([
+            'categories' => $categories,
+            'series' => $seriesData,
+        ])
+    @Limitless::CardStop
+
+    @Limitless::CardStart(['title' => "Chart 2  (raw)", 'icon' => 'icon-info22' ] )
+        @Limitless::LineChart([
+            'raw' => $rawData
+        ])
+    @Limitless::CardStop
+
+{{--    @Limitless::CardStart(['title' => "Chart 3", 'icon' => 'icon-info22' ] )--}}
+{{--        @Limitless::LineChartStart--}}
+{{--        @Limitless::LineChartStop--}}
+{{--    @Limitless::CardStop--}}
+
+@stop

src/Views/Limitless/Linechart/Config.php

@@ -9,8 +9,8 @@
     | This file is beautified by the command "sidekick:CodebeautifierCommand" of the ceetrox
     | sidekick package.
     |
-    | Author: Marco Schmiedel <marco.schmiedel@itmax.email>
-    | Update: 2022-06-15 10:07:09
+    | Author: Kevin Almond Roe Yumang <kevin.yumang@itmax.email>
+    | Update: 2022-07-21 01:24:33
     |
     */
     namespace Ceetrox\Sidekick\Views\Limitless\Linechart;
@@ -29,22 +29,29 @@
     | Class "Config"
     |------------------------------------------------------------------------------------------------
     */
-    class Config
+    class Config 
     {
         public $methodAllocation = [
-            'Limitless::LineChart' => 'lineChart'
+        'Limitless::LineChart' => 'lineChart'
         ];
 
         public $assetAllocation;
 
+
+        /*
+        |--------------------------------------------------------------------------------------------
+        | Method "__construct"
+        |--------------------------------------------------------------------------------------------
+        */
         public function __construct()
         {
             $this->assetAllocation = [
-                'Limitless::LineChart' => [
-                    'Attachments/linechart.init.js',
-                    secure_url('/ceetrox/sidekick/resource/public/Webdesigns/design-limitless/Template/global_assets/js/plugins/visualization/echarts/echarts.min.js'),
-                ]
+            'Limitless::LineChart' => [
+            'Attachments/linechart.init.js',
+            secure_url('/ceetrox/sidekick/resource/public/Webdesigns/design-limitless/Template/global_assets/js/plugins/visualization/echarts/echarts.min.js'),
+            ]
             ];
+
         }
 
 
@@ -56,21 +63,21 @@
         public function lineChart($parameters)
         {
             return View('Limitless::Linechart.LineChart')
-                ->withCharts($parameters['charts'] ?? 1)
-                ->withTitles($parameters['titles'] ?? null)
-                ->withColors($parameters['colors'] ?? null)
-                ->withPointValues($parameters['point-values'] ?? false)
-                ->withBoundaryGap($parameters['boundary-gap'] ?? true)
-                ->withInverted($parameters['inverted'] ?? false)
-                ->withDataZoom($parameters['data-zoom'] ?? false)
-                ->withStacked($parameters['stacked'] ?? false)
-                ->withIsArea($parameters['is-area'] ?? false)
-                ->withAnimationDuration($parameters['animation-duration'] ?? 750)
-                ->withYAxisLabelValueFormat($parameters['y-axis-label-value-format'] ?? null)
-                ->withMarkLine($parameters['mark-line'] ?? null)
-                ->withCategories($parameters['categories'] ?? null)
-                ->withSeries($parameters['series'] ?? null)
-                ->withRaw($parameters['raw'] ?? null);
+            ->withCharts($parameters['charts'] ?? 1)
+            ->withTitles($parameters['titles'] ?? null)
+            ->withColors($parameters['colors'] ?? null)
+            ->withPointValues($parameters['point-values'] ?? false)
+            ->withBoundaryGap($parameters['boundary-gap'] ?? true)
+            ->withInverted($parameters['inverted'] ?? false)
+            ->withDataZoom($parameters['data-zoom'] ?? false)
+            ->withStacked($parameters['stacked'] ?? false)
+            ->withIsArea($parameters['is-area'] ?? false)
+            ->withAnimationDuration($parameters['animation-duration'] ?? 750)
+            ->withYAxisLabelValueFormat($parameters['y-axis-label-value-format'] ?? null)
+            ->withMarkLine($parameters['mark-line'] ?? null)
+            ->withCategories($parameters['categories'] ?? null)
+            ->withSeries($parameters['series'] ?? null)
+            ->withRaw($parameters['raw'] ?? null);
 
         }