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