From 22b72c19804dfc4e6ca46db63aae4f8fd92fd69a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9s=20Santib=C3=A1=C3=B1ez?=
 <santibanez.andres@gmail.com>
Date: Tue, 3 Nov 2020 07:16:51 -0500
Subject: [PATCH] Extracted multi line chart Blade view

---
 resources/views/livewire-line-chart.blade.php |  35 +-----
 .../views/livewire-multi-line-chart.blade.php | 111 ++++++++++++++++++
 src/Charts/LivewireLineChart.php              |   4 +
 3 files changed, 121 insertions(+), 29 deletions(-)
 create mode 100644 resources/views/livewire-multi-line-chart.blade.php

diff --git a/resources/views/livewire-line-chart.blade.php b/resources/views/livewire-line-chart.blade.php
index bebc953..eef2137 100644
--- a/resources/views/livewire-line-chart.blade.php
+++ b/resources/views/livewire-line-chart.blade.php
@@ -21,28 +21,12 @@
                     const data = component.get('lineChartModel.data');
                     const onPointClickEventName = component.get('lineChartModel.onPointClickEventName');
 
-                    let series = []
-                    let categories = []
+                    const series = [{
+                        name: title,
+                        data: data.map(item => item.value),
+                    }]
 
-                    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 categories = data.map(item => item.title)
 
                     const options = {
                         series: series,
@@ -60,15 +44,8 @@
                                 enabled: animated,
                             },
                             events: {
-                                markerClick: function(event, chartContext, { seriesIndex, dataPointIndex }) {
+                                markerClick: function(event, chartContext, { 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
                                     }
 
diff --git a/resources/views/livewire-multi-line-chart.blade.php b/resources/views/livewire-multi-line-chart.blade.php
new file mode 100644
index 0000000..cb86f82
--- /dev/null
+++ b/resources/views/livewire-multi-line-chart.blade.php
@@ -0,0 +1,111 @@
+<div
+    class="w-full h-full"
+    x-data="{ ...multiLineChart() }"
+    x-init="drawChart(@this)"
+>
+    <div wire:ignore x-ref="container"></div>
+
+    <script>
+        function multiLineChart() {
+            return {
+                chart: null,
+
+                drawChart(component) {
+                    if (this.chart) {
+                        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');
+
+                    const series = Object.keys(data).map(key => {
+                        return {
+                            name: key,
+                            data: data[key].map(item => item.value),
+                        }
+                    })
+
+                    const categories = []
+
+                    const options = {
+                        series: series,
+
+                        chart: {
+                            type: 'line',
+                            height: '100%',
+                            zoom: {
+                                enabled: false
+                            },
+                            toolbar: {
+                                show: false
+                            },
+                            animations: {
+                                enabled: animated,
+                            },
+                            events: {
+                                markerClick: function(event, chartContext, { seriesIndex, dataPointIndex }) {
+                                    if (!onPointClickEventName) {
+                                        return
+                                    }
+
+                                    const seriesName = Object.keys(data)[Object.keys(data).findIndex((el, index) => index === seriesIndex)]
+                                    const point = data[seriesName][dataPointIndex]
+                                    component.call('onPointClick', point)
+                                }
+                            }
+                        },
+
+                        dataLabels: {
+                            enabled: false,
+                        },
+
+                        stroke: component.get('lineChartModel.stroke') || {},
+
+                        title: {
+                            text: title,
+                            align: 'center'
+                        },
+
+                        xaxis: {
+                            ...component.get('lineChartModel.xAxis') || {},
+                            categories: categories,
+                        },
+
+                        yaxis: component.get('lineChartModel.yAxis') || {},
+
+                        annotations: {
+                            points: component.get('lineChartModel.markers').map(item => {
+                                    return {
+                                        x: item.title,
+                                        y: item.value,
+                                        marker: {
+                                            size: 6,
+                                            fillColor: '#fff',
+                                            strokeColor: item.strokeColor,
+                                            radius: 2,
+                                        },
+                                        label: {
+                                            offsetY: 0,
+                                            style: {
+                                                color: item.textColor,
+                                                background: item.textBackgroundColor,
+                                            },
+                                            text: item.text || '',
+                                        }
+                                    }
+                                }
+                            )
+                        },
+                    };
+
+                    this.chart = new ApexCharts(this.$refs.container, options);
+                    this.chart.render();
+                }
+            }
+        }
+    </script>
+</div>
+
diff --git a/src/Charts/LivewireLineChart.php b/src/Charts/LivewireLineChart.php
index e76c5a0..9ac4496 100755
--- a/src/Charts/LivewireLineChart.php
+++ b/src/Charts/LivewireLineChart.php
@@ -31,6 +31,10 @@ class LivewireLineChart extends Component
 
     public function render()
     {
+        if ($this->lineChartModel['isMultiLine']) {
+            return view('livewire-charts::livewire-multi-line-chart');
+        }
+
         return view('livewire-charts::livewire-line-chart');
     }
 }