From 0af61a2997907d9b400b37e5fbd76a3a3b8acf03 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9s=20Santib=C3=A1=C3=B1ez?=
 <santibanez.andres@gmail.com>
Date: Sat, 7 Nov 2020 19:21:13 -0500
Subject: [PATCH] Added support for multi column chart

---
 .../livewire-multi-column-chart.blade.php     | 91 +++++++++++++++++++
 src/Charts/LivewireColumnChart.php            |  4 +
 src/Models/ColumnChartModel.php               | 38 ++++++++
 3 files changed, 133 insertions(+)
 create mode 100644 resources/views/livewire-multi-column-chart.blade.php

diff --git a/resources/views/livewire-multi-column-chart.blade.php b/resources/views/livewire-multi-column-chart.blade.php
new file mode 100644
index 0000000..92cfa57
--- /dev/null
+++ b/resources/views/livewire-multi-column-chart.blade.php
@@ -0,0 +1,91 @@
+<div
+    class="w-full h-full"
+    x-data="{ ...multiColumnChart() }"
+    x-init="drawChart(@this)"
+    x-on:draw-column-chart.window="drawChart(@this)"
+>
+    <div wire:ignore x-ref="container"></div>
+
+    <script>
+        function multiColumnChart() {
+            return {
+                chart: null,
+
+                drawChart(component) {
+                    if (this.chart) {
+                        this.chart.destroy()
+                    }
+
+                    const animated = component.get('columnChartModel.animated');
+                    const onColumnClickEventName = component.get('columnChartModel.onColumnClickEventName')
+                    const dataLabels = component.get('columnChartModel.dataLabels');
+                    const data = component.get('columnChartModel.data');
+
+                    const series = Object.keys(data)
+                        .map(seriesName => ({
+                            name: seriesName,
+                            data: data[seriesName].map(item => item.value)
+                        }))
+
+                    const categories = component.get('columnChartModel.xAxis.categories').length > 0
+                        ? component.get('columnChartModel.xAxis.categories')
+                        : data[series[0].name].map(item => item.title)
+                    ;
+
+                    const options = {
+                        series: series,
+
+                        chart: {
+                            type: 'bar',
+                            height: '100%',
+
+                            toolbar: { show: false },
+
+                            animations: { enabled: animated },
+
+                            events: {
+                                dataPointSelection: function(event, chartContext, {seriesIndex, dataPointIndex}) {
+                                    if (!onColumnClickEventName) {
+                                        return
+                                    }
+
+                                    const column = data[series[seriesIndex].name][dataPointIndex]
+                                    component.call('onColumnClick', column)
+                                },
+                            }
+                        },
+
+                        legend: component.get('columnChartModel.legend'),
+
+                        plotOptions: {
+                            bar: {
+                                horizontal: false,
+                                columnWidth: '50%',
+                            },
+                        },
+
+                        dataLabels: dataLabels,
+
+                        xaxis: {
+                            categories: categories,
+                        },
+
+                        yaxis: {
+                            title: {
+                                text: component.get('columnChartModel.title'),
+                            }
+                        },
+
+                        fill: {
+                            opacity: component.get('columnChartModel.opacity'),
+                        },
+                    };
+
+                    this.chart = new ApexCharts(this.$refs.container, options);
+                    this.chart.render();
+                }
+            }
+        }
+    </script>
+</div>
+
diff --git a/src/Charts/LivewireColumnChart.php b/src/Charts/LivewireColumnChart.php
index 16fe6e5..753d6cb 100644
--- a/src/Charts/LivewireColumnChart.php
+++ b/src/Charts/LivewireColumnChart.php
@@ -31,6 +31,10 @@ class LivewireColumnChart extends Component
 
     public function render()
     {
+        if ($this->columnChartModel['isMultiColumn']) {
+            return view('livewire-charts::livewire-multi-column-chart');
+        }
+
         return view('livewire-charts::livewire-column-chart');
     }
 }
diff --git a/src/Models/ColumnChartModel.php b/src/Models/ColumnChartModel.php
index 1bbdfb9..0802664 100644
--- a/src/Models/ColumnChartModel.php
+++ b/src/Models/ColumnChartModel.php
@@ -6,11 +6,14 @@ namespace Asantibanez\LivewireCharts\Models;
 /**
  * Class ColumnChartModel
  * @package Asantibanez\LivewireCharts\Models
+ * @property boolean $isMultiColumn
  */
 class ColumnChartModel extends BaseChartModel
 {
     public $opacity;
 
+    public $isMultiColumn;
+
     public $onColumnClickEventName;
 
     public $data;
@@ -23,9 +26,25 @@ class ColumnChartModel extends BaseChartModel
 
         $this->opacity = 0.5;
 
+        $this->isMultiColumn = false;
+
         $this->data = collect();
     }
 
+    public function multiColumn()
+    {
+        $this->isMultiColumn = true;
+
+        return $this;
+    }
+
+    public function singleColumn()
+    {
+        $this->isMultiColumn = false;
+
+        return $this;
+    }
+
     public function setOpacity($opacity)
     {
         $this->opacity = $opacity;
@@ -52,11 +71,28 @@ class ColumnChartModel extends BaseChartModel
         return $this;
     }
 
+    public function addSeriesColumn($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 toArray()
     {
         return array_merge(parent::toArray(), [
             'onColumnClickEventName' => $this->onColumnClickEventName,
             'opacity' => $this->opacity,
+            'isMultiColumn' => $this->isMultiColumn,
             'data' => $this->data->toArray(),
         ]);
     }
@@ -69,6 +105,8 @@ class ColumnChartModel extends BaseChartModel
 
         $this->opacity = data_get($array, 'opacity', 0.5);
 
+        $this->isMultiColumn = data_get($array, 'isMultiColumn', false);
+
         $this->data = collect(data_get($array, 'data', []));
     }
 }