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

Added DataLabels support for charts

Browse Source
This commit is contained in:
Andrés Santibáñez
2020-11-03 07:44:32 -05:00
parent 63fe7a1533
commit 05c9f5c605
7 changed files with 102 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -16,10 +16,16 @@
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');
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 +36,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,11 +60,11 @@
},
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') || {},

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

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

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

@@ -17,7 +17,7 @@
const title = component.get('lineChartModel.title');
const animated = component.get('lineChartModel.animated') || false;
const isMultiLine = component.get('lineChartModel.isMultiLine')
const dataLabels = component.get('lineChartModel.dataLabels') || {};
const data = component.get('lineChartModel.data');
const onPointClickEventName = component.get('lineChartModel.onPointClickEventName');
@@ -55,9 +55,7 @@
}
},
dataLabels: {
enabled: false,
},
dataLabels: dataLabels,
stroke: component.get('lineChartModel.stroke') || {},

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

@@ -17,7 +17,7 @@
const title = component.get('lineChartModel.title');
const animated = component.get('lineChartModel.animated') || false;
const isMultiLine = component.get('lineChartModel.isMultiLine')
const dataLabels = component.get('lineChartModel.dataLabels') || {};
const data = component.get('lineChartModel.data');
const onPointClickEventName = component.get('lineChartModel.onPointClickEventName');
@@ -58,9 +58,7 @@
}
},
dataLabels: {
enabled: false,
},
dataLabels: dataLabels,
stroke: component.get('lineChartModel.stroke') || {},

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

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

6
src/Models/BaseChartModel.php
View File

@@ -14,6 +14,7 @@ class BaseChartModel
use HasAxis;
use HasStroke;
use HasLegend;
use HasDataLabels;
public function __construct()
{
@@ -22,6 +23,7 @@ class BaseChartModel
$this->initAxis();
$this->initStroke();
$this->initLegend();
$this->initDataLabels();
}
public function reactiveKey()
@@ -36,7 +38,8 @@ class BaseChartModel
$this->animationToArray(),
$this->axisToArray(),
$this->strokeToArray(),
$this->legendToArray()
$this->legendToArray(),
$this->dataLabelsToArray()
);
}
@@ -47,5 +50,6 @@ class BaseChartModel
$this->axisFromArray($array);
$this->strokeFromArray($array);
$this->legendFromArray($array);
$this->dataLabelsFromArray($array);
}
}

55
src/Models/HasDataLabels.php Normal file
View File

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