SERV-2286 - area options for line chart.

src/Views/Limitless/Linechart/Attachments/linechart.init.js

@@ -63,7 +63,7 @@ function set_data(elementObject, multichart, numberOfCharts, rawData, callback)
     setTimeout(function() {
 
         let options;
-        const defaultColors = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc', '#a1887f'];
+        const defaultColors = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#a1887f', '#ffb980', '#2ec7c9','#b6a2de','#5ab1ef', '#d87a80', '#ea7ccc'];
 
         if(rawData == null) {
 
@@ -76,17 +76,18 @@ function set_data(elementObject, multichart, numberOfCharts, rawData, callback)
             let inverted = (elementObject.attr('inverted') == 'true' || elementObject.attr('inverted') == true); // default false
             let showDataZoom = (elementObject.attr('data-zoom') == 'true' || elementObject.attr('data-zoom') == true); // default false
             let stacked = (elementObject.attr('stacked') == 'true' || elementObject.attr('stacked') == true); // default false
+            let isArea = (elementObject.attr('is-area') == 'true' || elementObject.attr('is-area') == true); // default false
 
             let animationDuration = elementObject.attr('animation-duration') ?? 750;
             // ex '{value} users'  - https://echarts.apache.org/en/option.html#yAxis.axisLabel.formatter
-            let yAxisLabelValueFormat = elementObject.attr('y-axis-label-value-format') ?? '{value}';
+            let yAxisLabelValueFormat = elementObject.attr('y-axis-label-value-format') ?? null;
             // min | max | average
             let markLine = elementObject.attr('mark-line') ?? null;
             let categories = JSON.parse(elementObject.attr('categories')) ?? null;
 
             let series = JSON.parse(elementObject.attr('series')) ?? null;
             let seriesNames = series && series.map(function(item){ return item.name });
-            let seriesObject = setSeries(series, showPointValues, markLine, stacked);
+            let seriesObject = setSeries(series, showPointValues, markLine, stacked, isArea);
 
             console.log('titles', titles);
             console.log('colors', colors);
@@ -95,6 +96,7 @@ function set_data(elementObject, multichart, numberOfCharts, rawData, callback)
             console.log('inverted', inverted);
             console.log('data-zoom', showDataZoom);
             console.log('stacked', stacked);
+            console.log('is-area', isArea);
             console.log('animation-duration', animationDuration);
             console.log('y-axis-label-value-format', yAxisLabelValueFormat);
             console.log('mark-line', markLine);
@@ -157,7 +159,7 @@ function set_data(elementObject, multichart, numberOfCharts, rawData, callback)
 }
 
 // sub functions
-function setSeries(seriesData, showPointValues  = false, markLineDataType = null, stack = false) {
+function setSeries(seriesData, showPointValues  = false, markLineDataType = null, stack = false, isArea = false) {
 
     // uses series options if available else use global options.
     let seriesArray = [];
@@ -208,6 +210,12 @@ function setSeries(seriesData, showPointValues  = false, markLineDataType = null
 
         }
 
+        let area = seriesData[i].isArea ?? isArea;
+
+        if(area == true) {
+            series.areaStyle = {};
+        }
+
         seriesArray.push(series);
 
     }

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

@@ -8,6 +8,7 @@
          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

src/Views/Limitless/Linechart/Config.php

@@ -64,6 +64,7 @@
                 ->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)

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

@@ -47,13 +47,14 @@
         @Limitless::Chart([
             'titles' => 'Sample 1',
             'charts' => 1,
-            'colors' => ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc', '#a1887f'],
+            'colors' => ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#a1887f', '#ffb980', '#2ec7c9','#b6a2de','#5ab1ef', '#d87a80', '#ea7ccc'],
             'point-values' => true,
-            'boundary-gap' => true,
+            'boundary-gap' => false,
             'inverted' => false,
             'data-zoom' => true,
             'stacked' => false,
-            'animation-duration' => 1000,
+            'is-area' => true,
+            'animation-duration' => 500,
             'y-axis-label-value-format' => '{value} users',
             'mark-line' => 'average',
             'categories' => $categories,