Added MultiLine support for Line Chart

resources/views/livewire-line-chart.blade.php

@@ -15,11 +15,37 @@
                         this.chart.destroy()
                     }
 
+                    const title = component.get('lineChartModel.title');
+                    const animated = component.get('lineChartModel.animated') || false;
+                    const isMultiLine = component.get('lineChartModel.isMultiLine')
+                    const data = component.get('lineChartModel.data');
+                    const onPointClickEventName = component.get('lineChartModel.onPointClickEventName');
+
+                    let series = []
+                    let categories = []
+
+                    if (isMultiLine) {
+                        series = Object.keys(data).map(key => {
+                            return {
+                                name: key,
+                                data: data[key].map(item => item.value),
+                            }
+                        })
+
+                        categories = []
+                    }
+
+                    if (!isMultiLine) {
+                        series = [{
+                            name: title,
+                            data: data.map(item => item.value),
+                        }]
+
+                        categories = data.map(item => item.title)
+                    }
+
                     const options = {
-                        series: [{
-                            name: component.get('lineChartModel.title'),
-                            data: component.get('lineChartModel.data').map(item => item.value),
-                        }],
+                        series: series,
 
                         chart: {
                             type: 'line',
@@ -31,35 +57,41 @@
                                 show: false
                             },
                             animations: {
-                                enabled: component.get('lineChartModel.animated') || false,
+                                enabled: animated,
                             },
                             events: {
-                                markerClick: function(event, chartContext, { dataPointIndex }) {
-                                    const onPointClickEventName = component.get('lineChartModel.onPointClickEventName')
+                                markerClick: function(event, chartContext, { seriesIndex, dataPointIndex }) {
                                     if (!onPointClickEventName) {
+                                       return
+                                    }
+
+                                    if (isMultiLine) {
+                                        const seriesName = Object.keys(data)[Object.keys(data).findIndex((el, index) => index === seriesIndex)]
+                                        const point = data[seriesName][dataPointIndex]
+                                        component.call('onPointClick', point)
                                         return
                                     }
 
-                                    const point = component.get('lineChartModel.data')[dataPointIndex]
+                                    const point = data[dataPointIndex]
                                     component.call('onPointClick', point)
                                 }
                             }
                         },
 
                         dataLabels: {
-                            enabled: false
+                            enabled: false,
                         },
 
                         stroke: component.get('lineChartModel.stroke') || {},
 
                         title: {
-                            text: component.get('lineChartModel.title'),
+                            text: title,
                             align: 'center'
                         },
 
                         xaxis: {
                             ...component.get('lineChartModel.xAxis') || {},
-                            categories: component.get('lineChartModel.data').map(item => item.title),
+                            categories: categories,
                         },
 
                         yaxis: component.get('lineChartModel.yAxis') || {},

src/Models/LineChartModel.php

@@ -3,15 +3,19 @@
 
 namespace Asantibanez\LivewireCharts\Models;
 
+use Illuminate\Support\Collection;
+
 /**
  * Class LineChartModel
  * @package Asantibanez\LivewireCharts\Models
+ * @property string $title
+ * @property boolean $isMultiLine
  */
 class LineChartModel extends BaseChartModel
 {
     public $title;
 
-    public $animated;
+    public $isMultiLine;
 
     public $data;
 
@@ -25,7 +29,7 @@ class LineChartModel extends BaseChartModel
 
         $this->title = '';
 
-        $this->animated = false;
+        $this->isMultiLine = false;
 
         $this->onPointClickEventName = null;
 
@@ -34,16 +38,27 @@ class LineChartModel extends BaseChartModel
         $this->markers = collect();
     }
 
-    public function setTitle($title)
+    public function multiLine()
     {
-        $this->title = $title;
+        $this->isMultiLine = true;
+
+        $this->data = collect();
 
         return $this;
     }
 
-    public function setAnimated($animated)
+    public function singleLine()
     {
-        $this->animated = $animated;
+        $this->isMultiLine = false;
+
+        $this->data = collect();
+
+        return $this;
+    }
+
+    public function setTitle($title)
+    {
+        $this->title = $title;
 
         return $this;
     }
@@ -59,6 +74,22 @@ class LineChartModel extends BaseChartModel
         return $this;
     }
 
+    public function addSeriesPoint($seriesName, $title, $value, $extras = [])
+    {
+        $series = $this->data->get($seriesName, collect());
+
+        $series->push([
+            'seriesName' => $seriesName,
+            'title' => $title,
+            'value' => $value,
+            'extras' => $extras,
+        ]);
+
+        $this->data->put($seriesName, $series);
+
+        return $this;
+    }
+
     public function addMarker($title,
                               $value,
                               $strokeColor = 'green',
@@ -89,7 +120,7 @@ class LineChartModel extends BaseChartModel
     {
         return array_merge(parent::toArray(), [
             'title' => $this->title,
-            'animated' => $this->animated,
+            'isMultiLine' => $this->isMultiLine,
             'onPointClickEventName' => $this->onPointClickEventName,
             'data' => $this->data->toArray(),
             'markers' => $this->markers->toArray(),
@@ -102,7 +133,7 @@ class LineChartModel extends BaseChartModel
 
         $this->title = data_get($array, 'title', '');
 
-        $this->animated = data_get($array, 'animated', false);
+        $this->isMultiLine = data_get($array, 'isMultiLine', false);
 
         $this->onPointClickEventName = data_get($array, 'onPointClickEventName', null);