diff --git a/resources/views/livewire-line-chart.blade.php b/resources/views/livewire-line-chart.blade.php index aceb3fe..bebc953 100644 --- a/resources/views/livewire-line-chart.blade.php +++ b/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') || {}, diff --git a/src/Models/LineChartModel.php b/src/Models/LineChartModel.php index 1188647..6439321 100644 --- a/src/Models/LineChartModel.php +++ b/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);