Improved code

Added support for multi column chart
Added support for custom categories in Area Chart
2020-11-07 19:21:19 -05:00 · 2020-11-07 19:21:13 -05:00 · 2020-11-06 23:59:34 -05:00 · 2020-11-06 23:50:51 -05:00 · 2020-11-03 08:02:36 -05:00 · 2020-11-03 07:59:45 -05:00
19 changed files with 512 additions and 157 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,11 @@
 # Changelog

+## 1.3.0 - 2020-11-03
+
+- Added Multi Line Chart 
+- Added Data Labels configuration for all charts
+- Refactored title and animation to traits
+
 ## 1.2.0 - 2020-10-25

 - Fixed column chart growing infinitely 
--- a/README.md
+++ b/README.md
@@ -1,11 +1,13 @@
-# Livewire Charts
-
-Neat Livewire Charts for your Laravel projects.
+![Livewire Charts](https://banners.beyondco.de/Livewire%20Charts.png?theme=light&packageName=asantibanez%2Flivewire-charts&pattern=graphPaper&style=style_1&description=Neat+Livewire+Charts+for+your+Laravel+projects&md=1&fontSize=100px&images=chart-square-bar)

 ## Preview

 ![preview](https://github.com/asantibanez/livewire-charts/raw/master/preview.gif)

+## Demo
+
+https://github.com/asantibanez/livewire-charts-demo
+
 ## Installation

 You can install the package via composer:
@@ -23,7 +25,7 @@ This package requires the following packages/libraries to work:

 Please follow each package/library instructions on how to set them properly in your project.

-> Note: At the moment, `Apex Charts` is only supported for drawing charts.  
+>Note: At the moment, `Apex Charts` is only supported for drawing charts.  

 ## Usage

@@ -50,7 +52,7 @@ $columnChartModel =
    ;
 ``` 

-> Note: Chart model methods are chainable 💪 
+>Note: Chart model methods are chainable 💪 

 With `$columnChartModel` at hand, we pass it to our `LivewireColumnChart` component in our Blade template. 

@@ -64,8 +66,8 @@ And that's it! You have a beautiful rendered chart in seconds. 👌

 ![column chart example](https://github.com/asantibanez/livewire-charts/raw/master/column-chart-example.png)

-> Note: You can use these charts inside other Livewire components too. Just render them in your Blade template and you
-are good to go. 👍
+>Note: You can use these charts inside other Livewire components too. Just render them in your Blade template and you
+are good to go. 👍 

 ## Enabling Interactions

@@ -125,22 +127,33 @@ The parent component renders the charts as follows
 For each chart, a specific model class needs to be used. Here, it is detailed the api available
 for each type of chart.

-#### LivewireLineChart
+#### All

 | Method | Description |
 |--------|-------------|
 | setTitle(string $title) | Sets chart title |
 | setAnimated(boolean $animated) | Enables/disables animation |
-| addPoint(string $title, double $value, array $extras = []) | Adds a point to the line chart. `$extras` is forwarded on click event |
-| addMarker(string $title, double $value) | Adds a marker point to the line chart. Markers are used to emphasize particular points in the chart |
+| setDataLabelsEnabled(boolean $enabled) | Enables/disables data labels |
+| withDataLabels() | Enables data labels |
+| withoutDataLabels() | Disables data labels |
+| withLegends() | Shows legends |
+| withoutLegends() | Hides legends |
+
+#### LivewireLineChart
+
+| Method | Description |
+|--------|-------------|
+| multiLine() | Adds multiline support for line chart |
+| singleLine() | Adds single support for line chart |
+| addPoint(string $title, double $value, array $extras = []) | Adds a point to a single line chart. `$extras` is forwarded on click event |
+| addSeriesPoint(string $seriesName, string $title, double $value, array $extras = []) | Adds a point to series to a multi line chart. `$extras` is forwarded on click event |
+| addMarker(string $title, double $value) | Adds a marker point to the line chart. Markers are used to emphasize particular points in the chart (singleLine only) |
 | withOnPointClickEvent(string $eventName) | Event Name that will be fired when a point/marker of the chart is clicked |

 #### LivewireColumnChart

 | Method | Description |
 |--------|-------------|
-| setTitle(string $title) | Sets chart title |
-| setAnimated(boolean $animated) | Enables/disables animation |
 | setOpacity(int $opacity) | Sets columns' opacity |
 | addColumn(string $title, double $value, string $color, array $extras = []) | Adds a column to the chart with the specified color. `$extras` is forwarded on click event |
 | onColumnClickEventName(string $eventName) | Event Name that will be fired when a column of the chart is clicked |
@@ -149,8 +162,6 @@ for each type of chart.

 | Method | Description |
 |--------|-------------|
-| setTitle(string $title) | Sets chart title |
-| setAnimated(boolean $animated) | Enables/disables animation |
 | setOpacity(int $opacity) | Sets slices' opacity |
 | addSlice(string $title, double $value, string $color, array $extras = []) | Adds a slice to the chart with the specified color. `$extras` is forwarded on click event |
 | withOnSliceClickEvent(string $eventName) | Event Name that will be fired when a column of the chart is clicked |
@@ -159,13 +170,24 @@ for each type of chart.

 | Method | Description |
 |--------|-------------|
-| setTitle(string $title) | Sets chart title |
-| setAnimated(boolean $animated) | Enables/disables animation |
 | addPoint(string $title, double $value, array $extras = []) | Adds a point to the area chart. `$extras` is forwarded on click event |
 | withOnPointClickEvent(string $eventName) | Event Name that will be fired when a point of the chart is clicked |
 | setXAxisVisible(boolean $visible) | Shows/hides xAxis labels |
 | setYAxisVisible(boolean $visible) | Shows/hides yAxis labels |

+## Troubleshooting
+
+Chart components must be placed inside a container with fixed height. This is because the chart will use all the given
+vertical space. A fixed height is needed to render properly.
+
+ ```blade
+<div style="height: 32rem;">
+    <livewire:livewire-column-chart .../>
+</div>
+ ``` 
+
+>Note: if a fixed height is not given, the chart will grow vertically infinitely. That's not what we want, right?
+
 ## Testing

 ``` bash
--- a/resources/views/livewire-area-chart.blade.php
+++ b/resources/views/livewire-area-chart.blade.php
@@ -16,10 +16,21 @@
                        this.chart.destroy()
                    }

+                    const title = component.get('areaChartModel.title');
+                    const animated = component.get('areaChartModel.animated') || false;
+                    const dataLabels = component.get('areaChartModel.dataLabels') || {};
+                    const onPointClickEventName = component.get('areaChartModel.onPointClickEventName')
+                    const data = component.get('areaChartModel.data');
+
+                    const categories = component.get('areaChartModel.xAxis.categories').length > 0
+                        ? component.get('areaChartModel.xAxis.categories')
+                        : data.map(item => item.title)
+                    ;
+
                    var options = {
                        series: [{
-                            name: component.get('areaChartModel.title'),
-                            data: component.get('areaChartModel.data').map(item => item.value)
+                            name: title,
+                            data: data.map(item => item.value)
                        }],
                        chart: {
                            type: 'area',
@@ -30,25 +41,22 @@
                            toolbar: { show: false },

                            animations: {
-                                enabled: component.get('areaChartModel.animated') || false,
+                                enabled: animated,
                            },

                            events: {
                                markerClick: function(event, chartContext, { dataPointIndex }) {
-                                    const onPointClickEventName = component.get('areaChartModel.onPointClickEventName')
                                    if (!onPointClickEventName) {
                                        return
                                    }

-                                    const point = component.get('areaChartModel.data')[dataPointIndex]
+                                    const point = data[dataPointIndex]
                                    component.call('onPointClick', point)
                                }
                            }
                        },

-                        dataLabels: {
-                            enabled: false
-                        },
+                        dataLabels: dataLabels,

                        colors: [component.get('areaChartModel.color') || '#2E93fA'],

@@ -57,13 +65,16 @@
                        },

                        title: {
-                            text: component.get('areaChartModel.title'),
+                            text: title,
                            align: 'center'
                        },

-                        labels: component.get('areaChartModel.data').map(item => item.title),
+                        labels: data.map(item => item.title),

-                        xaxis: component.get('areaChartModel.xAxis') || {},
+                        xaxis: {
+                            labels: component.get('areaChartModel.xAxis.labels'),
+                            categories: categories,
+                        },

                        yaxis: component.get('areaChartModel.yAxis') || {},

--- a/resources/views/livewire-column-chart.blade.php
+++ b/resources/views/livewire-column-chart.blade.php
@@ -12,16 +12,17 @@
                chart: null,

                drawChart(component) {
-                    this.renderApex(component)
-                },
-
-                renderApex(component) {
                    if (this.chart) {
                        this.chart.destroy()
                    }

+                    const animated = component.get('columnChartModel.animated') || false;
+                    const onColumnClickEventName = component.get('columnChartModel.onColumnClickEventName')
+                    const dataLabels = component.get('columnChartModel.dataLabels') || {};
+                    const data = component.get('columnChartModel.data');
+
                    const options = {
-                        series: [{ data: component.get('columnChartModel.data').map(item => item.value)}],
+                        series: [{ data: data.map(item => item.value)}],

                        chart: {
                            type: 'bar',
@@ -32,29 +33,27 @@
                            },

                            animations: {
-                                enabled: component.get('columnChartModel.animated') || false,
+                                enabled: animated,
                            },

                            events: {
                                dataPointSelection: function(event, chartContext, config) {
-                                    const onColumnClickEventName = component.get('columnChartModel.onColumnClickEventName')
-
                                    if (!onColumnClickEventName) {
                                        return
                                    }

                                    const { dataPointIndex } = config
-                                    const column = component.get('columnChartModel.data')[dataPointIndex]
+                                    const column = data[dataPointIndex]
                                    component.call('onColumnClick', column)
                                },
                            }
                        },

-                        colors: component.get('columnChartModel.data').map(item => item.color),
+                        colors: data.map(item => item.color),

                        labels: {
                            style: {
-                                colors: component.get('columnChartModel.data').map(item => item.color),
+                                colors: data.map(item => item.color),
                            },
                        },

@@ -68,12 +67,10 @@
                            },
                        },

-                        dataLabels: {
-                            enabled: false,
-                        },
+                        dataLabels: dataLabels,

                        xaxis: {
-                            categories: component.get('columnChartModel.data').map(item => item.title),
+                            categories: data.map(item => item.title),
                        },

                        yaxis: {
--- a/resources/views/livewire-line-chart.blade.php
+++ b/resources/views/livewire-line-chart.blade.php
@@ -15,11 +15,23 @@
                        this.chart.destroy()
                    }

+                    const title = component.get('lineChartModel.title');
+                    const animated = component.get('lineChartModel.animated') || false;
+                    const dataLabels = component.get('lineChartModel.dataLabels') || {};
+                    const data = component.get('lineChartModel.data');
+                    const onPointClickEventName = component.get('lineChartModel.onPointClickEventName');
+
+                    const series = [{
+                        name: title,
+                        data: data.map(item => item.value),
+                    }]
+
+                    const categories = component.get('lineChartModel.xAxis.categories').length > 0
+                        ? component.get('lineChartModel.xAxis.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 +43,32 @@
                                show: false
                            },
                            animations: {
-                                enabled: component.get('lineChartModel.animated') || false,
+                                enabled: animated,
                            },
                            events: {
                                markerClick: function(event, chartContext, { dataPointIndex }) {
-                                    const onPointClickEventName = component.get('lineChartModel.onPointClickEventName')
                                    if (!onPointClickEventName) {
                                        return
                                    }

-                                    const point = component.get('lineChartModel.data')[dataPointIndex]
+                                    const point = data[dataPointIndex]
                                    component.call('onPointClick', point)
                                }
                            }
                        },

-                        dataLabels: {
-                            enabled: false
-                        },
+                        dataLabels: dataLabels,

                        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),
+                            labels: component.get('lineChartModel.xAxis.labels'),
+                            categories: categories,
                        },

                        yaxis: component.get('lineChartModel.yAxis') || {},
--- a/resources/views/livewire-multi-column-chart.blade.php
+++ 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>
+
--- a/resources/views/livewire-multi-line-chart.blade.php
+++ b/resources/views/livewire-multi-line-chart.blade.php
@@ -0,0 +1,86 @@
+<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 dataLabels = component.get('lineChartModel.dataLabels') || {};
+                    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 = component.get('lineChartModel.xAxis.categories').length > 0
+                        ? component.get('lineChartModel.xAxis.categories')
+                        : data[series[0].name].map(item => item.title)
+
+                    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 point = data[series[seriesIndex].name][dataPointIndex]
+                                    component.call('onPointClick', point)
+                                }
+                            }
+                        },
+
+                        dataLabels: dataLabels,
+
+                        stroke: component.get('lineChartModel.stroke') || {},
+
+                        title: {
+                            text: title,
+                            align: 'center'
+                        },
+
+                        xaxis: {
+                            labels: component.get('lineChartModel.xAxis.labels'),
+                            categories: categories,
+                        },
+
+                        yaxis: component.get('lineChartModel.yAxis') || {},
+                    };
+
+                    this.chart = new ApexCharts(this.$refs.container, options);
+                    this.chart.render();
+                }
+            }
+        }
+    </script>
+</div>
+
--- a/resources/views/livewire-pie-chart.blade.php
+++ b/resources/views/livewire-pie-chart.blade.php
@@ -15,46 +15,48 @@
                        this.chart.destroy()
                    }

+                    const title = component.get('pieChartModel.title');
+                    const animated = component.get('pieChartModel.animated') || false
+                    const dataLabels = component.get('pieChartModel.dataLabels') || {}
+                    const onSliceClickEventName = component.get('pieChartModel.onSliceClickEventName')
+                    const data = component.get('pieChartModel.data')
+
                    const options = {
-                        series: component.get('pieChartModel.data').map(item => item.value),
+                        series: data.map(item => item.value),

                        chart: {
                            height: '100%',
                            type: 'pie',

                            animations: {
-                                enabled: component.get('pieChartModel.animated') || false,
+                                enabled: animated,
                            },

                            events: {
                                dataPointSelection: function(event, chartContext, config) {
-                                    const onSliceClickEventName = component.get('pieChartModel.onSliceClickEventName')
-
                                    if (!onSliceClickEventName) {
                                        return
                                    }

                                    const { dataPointIndex } = config
-                                    const slice = component.get('pieChartModel.data')[dataPointIndex]
+                                    const slice = data[dataPointIndex]
                                    component.call('onSliceClick', slice)
                                },
                            }
                        },

-                        labels: component.get('pieChartModel.data').map(item => item.title),
+                        labels: data.map(item => item.title),

-                        dataLabels: {
-                            enabled: false,
-                        },
+                        dataLabels: dataLabels,

-                        colors: component.get('pieChartModel.data').map(item => item.color),
+                        colors: data.map(item => item.color),

                        fill: {
                            opacity: component.get('pieChartModel.opacity'),
                        },

                        title: {
-                            text: component.get('pieChartModel.title'),
+                            text: title,
                            align: 'center',
                        },

--- 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');
    }
 }
--- 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');
    }
 }
--- a/src/Models/AreaChartModel.php
+++ b/src/Models/AreaChartModel.php
@@ -9,10 +9,6 @@ namespace Asantibanez\LivewireCharts\Models;
 */
 class AreaChartModel extends BaseChartModel
 {
-    public $title;
-
-    public $animated;
-
    public $color;

    public $data;
@@ -23,10 +19,6 @@ class AreaChartModel extends BaseChartModel
    {
        parent::__construct();

-        $this->title = '';
-
-        $this->animated = false;
-
        $this->color = '#90cdf4';

        $this->onPointClickEventName = null;
@@ -34,20 +26,6 @@ class AreaChartModel extends BaseChartModel
        $this->data = collect();
    }

-    public function setTitle($title)
-    {
-        $this->title = $title;
-
-        return $this;
-    }
-
-    public function setAnimated($animated)
-    {
-        $this->animated = $animated;
-
-        return $this;
-    }
-
    public function setColor($color)
    {
        $this->color = $color;
@@ -76,8 +54,6 @@ class AreaChartModel extends BaseChartModel
    public function toArray()
    {
        return array_merge(parent::toArray(), [
-            'title' => $this->title,
-            'animated' => $this->animated,
            'color' => $this->color,
            'onPointClickEventName' => $this->onPointClickEventName,
            'data' => $this->data->toArray(),
@@ -88,10 +64,6 @@ class AreaChartModel extends BaseChartModel
    {
        parent::fromArray($array);

-        $this->title = data_get($array, 'title', '');
-
-        $this->animated = data_get($array, 'animated', false);
-
        $this->color = data_get($array, 'color', '#90cdf4');

        $this->onPointClickEventName = data_get($array, 'onPointClickEventName', null);
--- a/src/Models/BaseChartModel.php
+++ b/src/Models/BaseChartModel.php
@@ -9,15 +9,21 @@ namespace Asantibanez\LivewireCharts\Models;
 */
 class BaseChartModel
 {
+    use HasTitle;
+    use HasAnimation;
    use HasAxis;
    use HasStroke;
    use HasLegend;
+    use HasDataLabels;

    public function __construct()
    {
+        $this->initTitle();
+        $this->initAnimation();
        $this->initAxis();
        $this->initStroke();
        $this->initLegend();
+        $this->initDataLabels();
    }

    public function reactiveKey()
@@ -28,16 +34,22 @@ class BaseChartModel
    public function toArray()
    {
        return array_merge(
+            $this->titleToArray(),
+            $this->animationToArray(),
            $this->axisToArray(),
            $this->strokeToArray(),
-            $this->legendToArray()
+            $this->legendToArray(),
+            $this->dataLabelsToArray()
        );
    }

    public function fromArray($array)
    {
+        $this->titleFromArray($array);
+        $this->animationFromArray($array);
        $this->axisFromArray($array);
        $this->strokeFromArray($array);
        $this->legendFromArray($array);
+        $this->dataLabelsFromArray($array);
    }
 }
--- a/src/Models/ColumnChartModel.php
+++ b/src/Models/ColumnChartModel.php
@@ -6,15 +6,14 @@ namespace Asantibanez\LivewireCharts\Models;
 /**
 * Class ColumnChartModel
 * @package Asantibanez\LivewireCharts\Models
+ * @property boolean $isMultiColumn
 */
 class ColumnChartModel extends BaseChartModel
 {
-    public $title;
-
-    public $animated;
-
    public $opacity;

+    public $isMultiColumn;
+
    public $onColumnClickEventName;

    public $data;
@@ -23,27 +22,25 @@ class ColumnChartModel extends BaseChartModel
    {
        parent::__construct();

-        $this->title = '';
-
-        $this->animated = false;
-
        $this->onColumnClickEventName = null;

        $this->opacity = 0.5;

+        $this->isMultiColumn = false;
+
        $this->data = collect();
    }

-    public function setTitle($title)
+    public function multiColumn()
    {
-        $this->title = $title;
+        $this->isMultiColumn = true;

        return $this;
    }

-    public function setAnimated($animated)
+    public function singleColumn()
    {
-        $this->animated = $animated;
+        $this->isMultiColumn = false;

        return $this;
    }
@@ -74,13 +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(), [
-            'title' => $this->title,
-            'animated' => $this->animated,
            'onColumnClickEventName' => $this->onColumnClickEventName,
            'opacity' => $this->opacity,
+            'isMultiColumn' => $this->isMultiColumn,
            'data' => $this->data->toArray(),
        ]);
    }
@@ -89,14 +101,12 @@ class ColumnChartModel extends BaseChartModel
    {
        parent::fromArray($array);

-        $this->title = data_get($array, 'title', '');
-
-        $this->animated = data_get($array, 'animated', false);
-
        $this->onColumnClickEventName = data_get($array, 'onColumnClickEventName', null);

        $this->opacity = data_get($array, 'opacity', 0.5);

+        $this->isMultiColumn = data_get($array, 'isMultiColumn', false);
+
        $this->data = collect(data_get($array, 'data', []));
    }
 }
--- a/src/Models/HasAnimation.php
+++ b/src/Models/HasAnimation.php
@@ -0,0 +1,39 @@
+<?php
+
+
+namespace Asantibanez\LivewireCharts\Models;
+
+
+trait HasAnimation
+{
+    private $animated;
+
+    public function setAnimated($animated)
+    {
+        $this->animated = $animated;
+
+        return $this;
+    }
+
+    protected function initAnimation()
+    {
+        $this->animated = $this->defaultAnimated();
+    }
+
+    private function defaultAnimated()
+    {
+        return false;
+    }
+
+    protected function animationFromArray($array)
+    {
+        $this->animated = data_get($array, 'animated', $this->defaultAnimated());
+    }
+
+    protected function animationToArray()
+    {
+        return [
+            'animated' => $this->animated,
+        ];
+    }
+}
--- 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);
--- a/src/Models/HasDataLabels.php
+++ b/src/Models/HasDataLabels.php
@@ -0,0 +1,55 @@
+<?php
+
+
+namespace Asantibanez\LivewireCharts\Models;
+
+
+trait HasDataLabels
+{
+    private $dataLabels;
+
+    public function setDataLabelsEnabled($enabled)
+    {
+        data_set($this->dataLabels, 'enabled', $enabled);
+
+        return $this;
+    }
+
+    public function withDataLabels()
+    {
+        data_set($this->dataLabels, 'enabled', true);
+
+        return $this;
+    }
+
+    public function withoutDataLabels()
+    {
+        data_set($this->dataLabels, 'enabled', false);
+
+        return $this;
+    }
+
+    protected function initDataLabels()
+    {
+        $this->dataLabels = $this->defaultDataLabels();
+    }
+
+    private function defaultDataLabels()
+    {
+        return [
+            'enabled' => false,
+        ];
+    }
+
+    protected function dataLabelsFromArray($array)
+    {
+        $this->dataLabels = data_get($array, 'dataLabels', $this->defaultDataLabels());
+    }
+
+    protected function dataLabelsToArray()
+    {
+        return [
+            'dataLabels' => $this->dataLabels,
+        ];
+    }
+}
--- a/src/Models/HasTitle.php
+++ b/src/Models/HasTitle.php
@@ -0,0 +1,39 @@
+<?php
+
+
+namespace Asantibanez\LivewireCharts\Models;
+
+
+trait HasTitle
+{
+    private $title;
+
+    public function setTitle($title)
+    {
+        $this->title = $title;
+
+        return $this;
+    }
+
+    protected function initTitle()
+    {
+        $this->title = $this->defaultTitle();
+    }
+
+    private function defaultTitle()
+    {
+        return '';
+    }
+
+    protected function titleFromArray($array)
+    {
+        $this->title = data_get($array, 'title', $this->defaultTitle());
+    }
+
+    protected function titleToArray()
+    {
+        return [
+            'title' => $this->title,
+        ];
+    }
+}
--- a/src/Models/LineChartModel.php
+++ b/src/Models/LineChartModel.php
@@ -3,15 +3,16 @@

 namespace Asantibanez\LivewireCharts\Models;

+use Illuminate\Support\Collection;
+
 /**
 * Class LineChartModel
 * @package Asantibanez\LivewireCharts\Models
+ * @property boolean $isMultiLine
 */
 class LineChartModel extends BaseChartModel
 {
-    public $title;
-
-    public $animated;
+    public $isMultiLine;

    public $data;

@@ -23,9 +24,7 @@ class LineChartModel extends BaseChartModel
    {
        parent::__construct();

-        $this->title = '';
-
-        $this->animated = false;
+        $this->isMultiLine = false;

        $this->onPointClickEventName = null;

@@ -34,16 +33,20 @@ 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;
    }
@@ -59,6 +62,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',
@@ -88,8 +107,7 @@ class LineChartModel extends BaseChartModel
    public function toArray()
    {
        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(),
@@ -100,9 +118,7 @@ class LineChartModel extends BaseChartModel
    {
        parent::fromArray($array);

-        $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);

--- a/src/Models/PieChartModel.php
+++ b/src/Models/PieChartModel.php
@@ -9,10 +9,6 @@ namespace Asantibanez\LivewireCharts\Models;
 */
 class PieChartModel extends BaseChartModel
 {
-    public $title;
-
-    public $animated;
-
    public $onSliceClickEventName;

    public $opacity;
@@ -23,10 +19,6 @@ class PieChartModel extends BaseChartModel
    {
        parent::__construct();

-        $this->title = '';
-
-        $this->animated = false;
-
        $this->onSliceClickEventName = null;

        $this->opacity = 0.75;
@@ -34,20 +26,6 @@ class PieChartModel extends BaseChartModel
        $this->data = collect();
    }

-    public function setTitle($title)
-    {
-        $this->title = $title;
-
-        return $this;
-    }
-
-    public function setAnimated($animated)
-    {
-        $this->animated = $animated;
-
-        return $this;
-    }
-
    public function setOpacity($opacity)
    {
        $this->opacity = $opacity;
@@ -77,8 +55,6 @@ class PieChartModel extends BaseChartModel
    public function toArray()
    {
        return array_merge(parent::toArray(), [
-            'title' => $this->title,
-            'animated' => $this->animated,
            'onSliceClickEventName' => $this->onSliceClickEventName,
            'opacity' => $this->opacity,
            'data' => $this->data->toArray(),
@@ -89,10 +65,6 @@ class PieChartModel extends BaseChartModel
    {
        parent::fromArray($array);

-        $this->title = data_get($array, 'title', '');
-
-        $this->animated = data_get($array, 'animated', false);
-
        $this->onSliceClickEventName = data_get($array, 'onSliceClickEventName', null);

        $this->opacity = data_get($array, 'opacity', 0.75);
Author	SHA1	Message	Date
Andrés Santibáñez	e11c5ca375	Improved code	2020-11-07 19:21:19 -05:00
Andrés Santibáñez	0af61a2997	Added support for multi column chart	2020-11-07 19:21:13 -05:00
Andrés Santibáñez	cb3e4180a1	Added support for custom categories in Area Chart	2020-11-06 23:59:34 -05:00
Andrés Santibáñez	1e7ac1bffb	Added ability to add custom categories to xAxis	2020-11-06 23:50:51 -05:00
Andrés Santibáñez	0aedf541a9	Updated README and CHANGELOG	2020-11-03 08:02:36 -05:00
Andrés Santibáñez	316bb5a976	Removed markers support for multi line chart	2020-11-03 07:59:45 -05:00
Andrés Santibáñez	05c9f5c605	Added DataLabels support for charts	2020-11-03 07:44:32 -05:00
Andrés Santibáñez	63fe7a1533	Extracted title property to trait	2020-11-03 07:20:46 -05:00
Andrés Santibáñez	22b72c1980	Extracted multi line chart Blade view	2020-11-03 07:16:51 -05:00
Andrés Santibáñez	5e7cabfd16	Extracted animated property to trait	2020-11-03 07:10:30 -05:00
Andrés Santibáñez	71e2168b6c	Added MultiLine support for Line Chart	2020-11-03 07:07:02 -05:00
Andrés Santibáñez	9b74d45a86	Updated README	2020-11-02 22:01:02 -05:00
Andrés Santibáñez	19f3ce70ae	Updated README	2020-11-02 21:51:15 -05:00
Andrés Santibáñez	4c55e19486	Updated README	2020-10-25 01:01:39 -05:00