SERV-2286 - linked backend/frontend data to js file. (parameters) WIP

src/Views/Limitless/Linechart/Chart.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 }}"
+         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) }}"
+    >

src/Views/Limitless/Linechart/Config.php

@@ -32,8 +32,7 @@
     class Config
     {
         public $methodAllocation = [
-            'Limitless::LineChartStart' => 'lineChartStart',
-            'Limitless::LineChartStop' => 'LineChartStop',
+            'Limitless::Chart' => 'chart'
         ];
 
         public $assetAllocation;
@@ -41,7 +40,7 @@
         public function __construct()
         {
             $this->assetAllocation = [
-                'Limitless::LineChartStart' => [
+                'Limitless::Chart' => [
                     'Attachments/linechart.init.js',
                     secure_url('/ceetrox/sidekick/resource/public/Webdesigns/design-limitless/Template/global_assets/js/plugins/visualization/echarts/echarts.min.js'),
                 ]
@@ -51,24 +50,25 @@
 
         /*
         |--------------------------------------------------------------------------------------------
-        | Method "lineChartStart"
+        | Method "chart"
         |--------------------------------------------------------------------------------------------
         */
-        public function lineChartStart($parameters)
+        public function chart($parameters)
         {
-            return View('Limitless::Linechart.Start');
-
-        }
-
-
-        /*
-        |--------------------------------------------------------------------------------------------
-        | Method "LineChartStop"
-        |--------------------------------------------------------------------------------------------
-        */
-        public function LineChartStop($parameters)
-        {
-            return View('Limitless::Linechart.Stop');
+            return View('Limitless::Linechart.Chart')
+                ->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)
+                ->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);;
 
         }
 

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

@@ -3,16 +3,52 @@
 
 @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);
+            $seriesData[] = $data;
+        }
+
+    @endphp
+
+
     @Limitless::CardStart(['title' => "Description", 'icon' => 'icon-info22' ] )
-        @Limitless::LineChartStart
+        @Limitless::Chart([
+            'titles' => 'Sample 1',
+            'charts' => 1,
+            'colors' => ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc', '#a1887f'],
+            'point-values' => true,
+            'boundary-gap' => true,
+            'inverted' => true,
+            'data-zoom' => true,
+            'stacked' => true,
+            'animation-duration' => 1000,
+            'y-axis-label-value-format' => '{value} users',
+            'mark-line' => 'average',
+            'categories' => $categories,
+            'series' => $seriesData
+        ])
     @Limitless::CardStop
 
-    @Limitless::CardStart(['title' => "Chart 2", 'icon' => 'icon-info22' ] )
-        @Limitless::LineChartStart
-    @Limitless::CardStop
+{{--    @Limitless::CardStart(['title' => "Chart 2", 'icon' => 'icon-info22' ] )--}}
+{{--        @Limitless::Chart--}}
+{{--    @Limitless::CardStop--}}
 
-    @Limitless::CardStart(['title' => "Chart 3", 'icon' => 'icon-info22' ] )
-        @Limitless::LineChartStart
-    @Limitless::CardStop
+{{--    @Limitless::CardStart(['title' => "Chart 3", 'icon' => 'icon-info22' ] )--}}
+{{--        @Limitless::LineChartStart--}}
+{{--        @Limitless::LineChartStop--}}
+{{--    @Limitless::CardStop--}}
 
 @stop

src/Views/Limitless/Linechart/Start.blade.php

-<div class="chart-container">
-    <div class="chart has-fixed-height LimitlessLineChart">
-
-    </div>
-</div>
\ No newline at end of file