apoloz/livewire-charts
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added sparkline feature to charts

Browse Source
This commit is contained in:
Andrés Santibáñez
2020-11-09 08:29:43 -05:00
parent f5b40ec73d
commit 8e9aed484e
8 changed files with 89 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
resources/views/livewire-area-chart.blade.php
View File

@@ -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 }) {

11
resources/views/livewire-column-chart.blade.php
View File

@@ -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) {

19
resources/views/livewire-line-chart.blade.php
View File

@@ -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) {

3
resources/views/livewire-multi-column-chart.blade.php
View File

@@ -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 },

19
resources/views/livewire-multi-line-chart.blade.php
View File

@@ -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) {

7
resources/views/livewire-pie-chart.blade.php
View File

@@ -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) {

6
src/Models/BaseChartModel.php
View File

@@ -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);
}
}

48
src/Models/HasSparkline.php Normal file
View File

@@ -0,0 +1,48 @@
<?php
namespace Asantibanez\LivewireCharts\Models;
trait HasSparkline
{
private $sparkline;
public function setSparklineEnabled($isEnabled)
{
data_set($this->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,
];
}
}