From 1e7ac1bffb50ea4902e45e3787cd90ccfba0a611 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9s=20Santib=C3=A1=C3=B1ez?=
 <santibanez.andres@gmail.com>
Date: Fri, 6 Nov 2020 23:50:51 -0500
Subject: [PATCH] Added ability to add custom categories to xAxis

---
 resources/views/livewire-line-chart.blade.php       |  6 ++++--
 resources/views/livewire-multi-line-chart.blade.php |  6 ++++--
 src/Models/HasAxis.php                              | 10 +++++++++-
 3 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/resources/views/livewire-line-chart.blade.php b/resources/views/livewire-line-chart.blade.php
index 0b0012a..ddb04f2 100644
--- a/resources/views/livewire-line-chart.blade.php
+++ b/resources/views/livewire-line-chart.blade.php
@@ -26,7 +26,9 @@
                         data: data.map(item => item.value),
                     }]
 
-                    const categories = data.map(item => item.title)
+                    const categories = component.get('lineChartModel.xAxis.categories').length > 0
+                        ? component.get('lineChartModel.xAxis.categories')
+                        : data.map(item => item.title)
 
                     const options = {
                         series: series,
@@ -65,7 +67,7 @@
                         },
 
                         xaxis: {
-                            ...component.get('lineChartModel.xAxis') || {},
+                            labels: component.get('lineChartModel.xAxis.labels'),
                             categories: categories,
                         },
 
diff --git a/resources/views/livewire-multi-line-chart.blade.php b/resources/views/livewire-multi-line-chart.blade.php
index e1c81bf..63935c0 100644
--- a/resources/views/livewire-multi-line-chart.blade.php
+++ b/resources/views/livewire-multi-line-chart.blade.php
@@ -28,7 +28,9 @@
                         }
                     })
 
-                    const categories = []
+                    const categories = component.get('lineChartModel.xAxis.categories').length > 0
+                        ? component.get('lineChartModel.xAxis.categories')
+                        : data[series[0].name].map(item => item.title)
 
                     const options = {
                         series: series,
@@ -68,7 +70,7 @@
                         },
 
                         xaxis: {
-                            ...component.get('lineChartModel.xAxis') || {},
+                            labels: component.get('lineChartModel.xAxis.labels'),
                             categories: categories,
                         },
 
diff --git a/src/Models/HasAxis.php b/src/Models/HasAxis.php
index 01ae7aa..f38298f 100644
--- a/src/Models/HasAxis.php
+++ b/src/Models/HasAxis.php
@@ -10,7 +10,7 @@ trait HasAxis
 
     private $yAxis;
 
-    public function initAxis()
+    protected function initAxis()
     {
         $this->xAxis = $this->defaultXAxis();
         $this->yAxis = $this->defaultYAxis();
@@ -19,6 +19,7 @@ trait HasAxis
     private function defaultXAxis()
     {
         return [
+            'categories' => [],
             'labels' => [
                 'show' => true,
             ],
@@ -39,6 +40,13 @@ trait HasAxis
         return $this;
     }
 
+    public function setXAxisCategories($categories = [])
+    {
+        data_set($this->xAxis, 'categories', $categories);
+
+        return $this;
+    }
+
     public function setYAxisVisible($visible)
     {
         data_set($this->yAxis, 'show', $visible);