SERV-2286 - bar chart element configuration WIP

src/Views/Limitless/Barchart/Attachments/barchart.init.js

@@ -57,7 +57,7 @@ function set_data(elementObject, callback) {
             let title = elementObject.attr('title') ?? null;
             let colors = JSON.parse(elementObject.attr('colors')) ?? defaultColors;
 
-            let inverted = (elementObject.attr('inverted') == 'true' || elementObject.attr('inverted') == true); // default false
+            let horizontal = (elementObject.attr('horizontal') == 'true' || elementObject.attr('horizontal') == true); // default false
 
             let animationDuration = elementObject.attr('animation-duration') ?? 750;
             // ex '{value} users'  - https://echarts.apache.org/en/option.html#yAxis.axisLabel.formatter
@@ -66,7 +66,7 @@ function set_data(elementObject, callback) {
 
             let series = JSON.parse(elementObject.attr('series')) ?? null;
             let seriesNames = series && series.map(function(item){ return item.name });
-            let seriesObject = setSeries(series, elementObject);
+            let seriesObject = setSeries(series, elementObject, horizontal);
 
             // Options
             options = {
@@ -93,10 +93,10 @@ function set_data(elementObject, callback) {
                 tooltip: setTooltip(),
 
                 // Horizontal axis
-                xAxis: inverted ? setYAxis(yAxisLabelValueFormat) : setXAxis(categories),
+                xAxis: horizontal ? setYAxis(yAxisLabelValueFormat) : setXAxis(categories),
 
                 // Vertical axis
-                yAxis: inverted ? setXAxis(categories) : setYAxis(yAxisLabelValueFormat),
+                yAxis: horizontal ? setXAxis(categories) : setYAxis(yAxisLabelValueFormat),
 
                 // Add series
                 series: seriesObject
@@ -114,7 +114,7 @@ function set_data(elementObject, callback) {
 //#endregion
 
 //#region FUNCTIONS FOR OPTIONS
-function setSeries(seriesData, elementObject) {
+function setSeries(seriesData, elementObject, horizontal = false) {
 
     // uses series options if available else use global options.
     let seriesArray = [];
@@ -136,7 +136,7 @@ function setSeries(seriesData, elementObject) {
                 normal: {
                     label: {
                         show: seriesData[i].showBarValues ?? showBarValues,
-                        position: 'top',
+                        position: horizontal ? 'insideRight' : 'top',
                         textStyle: {
                             fontWeight: 500
                         }

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

@@ -3,7 +3,7 @@
          title="{{ $title }}"
          colors="{{ json_encode($colors) }}"
          bar-values="{{ $barValues }}"
-         inverted="{{ $inverted }}"
+         horizontal="{{ $horizontal }}"
          stacked="{{ $stacked }}"
          animation-duration="{{ $animationDuration }}"
          @if($yAxisLabelValueFormat != null) y-axis-label-value-format="{{ $yAxisLabelValueFormat }}" @endif

src/Views/Limitless/Barchart/Config.php

@@ -67,7 +67,7 @@
             ->withTitle($parameters['title'] ?? null)
             ->withColors($parameters['colors'] ?? null)
             ->withBarValues($parameters['bar-values'] ?? false)
-            ->withInverted($parameters['inverted'] ?? false)
+            ->withHorizontal($parameters['horizontal'] ?? false)
             ->withStacked($parameters['stacked'] ?? false)
             ->withAnimationDuration($parameters['animation-duration'] ?? 750)
             ->withYAxisLabelValueFormat($parameters['y-axis-label-value-format'] ?? null)

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

@@ -23,9 +23,15 @@
 
         // json string data should be valid else it will return null
         $rawData = '{
+            "color":[
+              "#8dd3c7",
+              "#ffffb3"
+           ],
+           "textStyle":{
+              "color":"#fff"
+           },
            "xAxis":{
               "type":"category",
-              "boundaryGap":false,
               "data":["Mon","Tue","Wed","Thu","Fri","Sat","Sun"]
            },
            "yAxis":{
@@ -34,7 +40,7 @@
            "series":[
               {
                  "data":[820,932,901,934,1290,1330,1320],
-                 "type":"line",
+                 "type":"bar",
                  "areaStyle":{}
               }
            ]
@@ -44,6 +50,7 @@
 
     @Limitless::CardStart(['title' => "Basic Setup", 'icon' => 'icon-info22' ] )
         @Limitless::BarChart([
+            'title' => 'Basic',
             'mark-line' => 'average',
             'categories' => $categories,
             'series' => $seriesData,
@@ -58,12 +65,20 @@
         ])
     @Limitless::CardStop
 
-    @Limitless::CardStart(['title' => "Stacked Setup", 'icon' => 'icon-info22' ] )
+    @Limitless::CardStart(['title' => "Stacked Horizontal Setup", 'icon' => 'icon-info22' ] )
         @Limitless::BarChart([
+            'horizontal' => true,
             'stacked' => true,
+            'bar-values' => true,
             'categories' => $categories,
             'series' => $seriesData,
         ])
     @Limitless::CardStop
 
+    @Limitless::CardStart(['title' => "Raw Setup", 'icon' => 'icon-info22' ] )
+        @Limitless::BarChart([
+            'raw' => $rawData
+        ])
+    @Limitless::CardStop
+
 @stop