From 8e9aed484e349d06cfd84d14c8bbc008c85fcdb1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s=20Santib=C3=A1=C3=B1ez?= Date: Mon, 9 Nov 2020 08:29:43 -0500 Subject: [PATCH] Added sparkline feature to charts --- resources/views/livewire-area-chart.blade.php | 7 +-- .../views/livewire-column-chart.blade.php | 11 ++--- resources/views/livewire-line-chart.blade.php | 19 ++++---- .../livewire-multi-column-chart.blade.php | 3 ++ .../views/livewire-multi-line-chart.blade.php | 19 ++++---- resources/views/livewire-pie-chart.blade.php | 7 +-- src/Models/BaseChartModel.php | 6 ++- src/Models/HasSparkline.php | 48 +++++++++++++++++++ 8 files changed, 89 insertions(+), 31 deletions(-) create mode 100644 src/Models/HasSparkline.php diff --git a/resources/views/livewire-area-chart.blade.php b/resources/views/livewire-area-chart.blade.php index efbb420..9e86970 100644 --- a/resources/views/livewire-area-chart.blade.php +++ b/resources/views/livewire-area-chart.blade.php @@ -21,6 +21,7 @@ const dataLabels = component.get('areaChartModel.dataLabels') || {}; const onPointClickEventName = component.get('areaChartModel.onPointClickEventName') const data = component.get('areaChartModel.data'); + const sparkline = component.get('areaChartModel.sparkline'); const categories = component.get('areaChartModel.xAxis.categories').length > 0 ? component.get('areaChartModel.xAxis.categories') @@ -36,13 +37,13 @@ type: 'area', height: '100%', + ...sparkline, + zoom: { enabled: false }, toolbar: { show: false }, - animations: { - enabled: animated, - }, + animations: { enabled: animated }, events: { markerClick: function(event, chartContext, { dataPointIndex }) { diff --git a/resources/views/livewire-column-chart.blade.php b/resources/views/livewire-column-chart.blade.php index 6151d4e..01d7535 100644 --- a/resources/views/livewire-column-chart.blade.php +++ b/resources/views/livewire-column-chart.blade.php @@ -20,6 +20,7 @@ const onColumnClickEventName = component.get('columnChartModel.onColumnClickEventName') const dataLabels = component.get('columnChartModel.dataLabels') || {}; const data = component.get('columnChartModel.data'); + const sparkline = component.get('columnChartModel.sparkline'); const options = { series: [{ data: data.map(item => item.value)}], @@ -28,13 +29,11 @@ type: 'bar', height: '100%', - toolbar: { - show: false - }, + ...sparkline, - animations: { - enabled: animated, - }, + toolbar: { show: false }, + + animations: { enabled: animated }, events: { dataPointSelection: function(event, chartContext, config) { diff --git a/resources/views/livewire-line-chart.blade.php b/resources/views/livewire-line-chart.blade.php index ddb04f2..561ecc7 100644 --- a/resources/views/livewire-line-chart.blade.php +++ b/resources/views/livewire-line-chart.blade.php @@ -20,6 +20,7 @@ const dataLabels = component.get('lineChartModel.dataLabels') || {}; const data = component.get('lineChartModel.data'); const onPointClickEventName = component.get('lineChartModel.onPointClickEventName'); + const sparkline = component.get('lineChartModel.sparkline'); const series = [{ name: title, @@ -36,15 +37,15 @@ chart: { type: 'line', height: '100%', - zoom: { - enabled: false - }, - toolbar: { - show: false - }, - animations: { - enabled: animated, - }, + + ...sparkline, + + zoom: { enabled: false }, + + toolbar: { show: false }, + + animations: { enabled: animated }, + events: { markerClick: function(event, chartContext, { dataPointIndex }) { if (!onPointClickEventName) { diff --git a/resources/views/livewire-multi-column-chart.blade.php b/resources/views/livewire-multi-column-chart.blade.php index fd6c5ed..c38ce2c 100644 --- a/resources/views/livewire-multi-column-chart.blade.php +++ b/resources/views/livewire-multi-column-chart.blade.php @@ -21,6 +21,7 @@ const onColumnClickEventName = component.get('columnChartModel.onColumnClickEventName') const dataLabels = component.get('columnChartModel.dataLabels'); const data = component.get('columnChartModel.data'); + const sparkline = component.get('columnChartModel.sparkline'); const series = Object.keys(data) .map(seriesName => ({ @@ -41,6 +42,8 @@ height: '100%', stacked: stacked, + ...sparkline, + toolbar: { show: false }, animations: { enabled: animated }, diff --git a/resources/views/livewire-multi-line-chart.blade.php b/resources/views/livewire-multi-line-chart.blade.php index f82333b..1022d91 100644 --- a/resources/views/livewire-multi-line-chart.blade.php +++ b/resources/views/livewire-multi-line-chart.blade.php @@ -20,6 +20,7 @@ const dataLabels = component.get('lineChartModel.dataLabels') || {}; const data = component.get('lineChartModel.data'); const onPointClickEventName = component.get('lineChartModel.onPointClickEventName'); + const sparkline = component.get('lineChartModel.sparkline'); const series = Object.keys(data).map(key => { return { @@ -38,15 +39,15 @@ chart: { type: 'line', height: '100%', - zoom: { - enabled: false - }, - toolbar: { - show: false - }, - animations: { - enabled: animated, - }, + + ...sparkline, + + zoom: { enabled: false }, + + toolbar: { show: false }, + + animations: { enabled: animated }, + events: { markerClick: function(event, chartContext, { seriesIndex, dataPointIndex }) { if (!onPointClickEventName) { diff --git a/resources/views/livewire-pie-chart.blade.php b/resources/views/livewire-pie-chart.blade.php index 3154ebc..3bf015f 100644 --- a/resources/views/livewire-pie-chart.blade.php +++ b/resources/views/livewire-pie-chart.blade.php @@ -20,6 +20,7 @@ const dataLabels = component.get('pieChartModel.dataLabels') || {} const onSliceClickEventName = component.get('pieChartModel.onSliceClickEventName') const data = component.get('pieChartModel.data') + const sparkline = component.get('pieChartModel.sparkline') const options = { series: data.map(item => item.value), @@ -28,9 +29,9 @@ height: '100%', type: 'pie', - animations: { - enabled: animated, - }, + ...sparkline, + + animations: { enabled: animated }, events: { dataPointSelection: function(event, chartContext, config) { diff --git a/src/Models/BaseChartModel.php b/src/Models/BaseChartModel.php index 8334aef..61f4998 100644 --- a/src/Models/BaseChartModel.php +++ b/src/Models/BaseChartModel.php @@ -15,6 +15,7 @@ class BaseChartModel use HasStroke; use HasLegend; use HasDataLabels; + use HasSparkline; public function __construct() { @@ -24,6 +25,7 @@ class BaseChartModel $this->initStroke(); $this->initLegend(); $this->initDataLabels(); + $this->initSparkline(); } public function reactiveKey() @@ -39,7 +41,8 @@ class BaseChartModel $this->axisToArray(), $this->strokeToArray(), $this->legendToArray(), - $this->dataLabelsToArray() + $this->dataLabelsToArray(), + $this->sparklineToArray() ); } @@ -51,5 +54,6 @@ class BaseChartModel $this->strokeFromArray($array); $this->legendFromArray($array); $this->dataLabelsFromArray($array); + $this->sparklineFromArray($array); } } diff --git a/src/Models/HasSparkline.php b/src/Models/HasSparkline.php new file mode 100644 index 0000000..2da4bb1 --- /dev/null +++ b/src/Models/HasSparkline.php @@ -0,0 +1,48 @@ +sparkline, 'sparkline.enabled', $isEnabled); + + return $this; + } + + public function sparklined() + { + return $this->setSparklineEnabled(true); + } + + protected function initSparkline() + { + $this->sparkline = $this->defaultSparkline(); + } + + private function defaultSparkline() + { + return [ + 'sparkline' => [ + 'enabled' => false, + ], + ]; + } + + protected function sparklineFromArray($array) + { + $this->sparkline = data_get($array, 'sparkline', $this->defaultSparkline()); + } + + protected function sparklineToArray() + { + return [ + 'sparkline' => $this->sparkline, + ]; + } +}