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

Merge branch 'master' into theme-mods

Browse Source
This commit is contained in:
/SyntaxLexx
2023-06-10 03:44:07 +03:00
committed by GitHub
parent 1e04ebf6d9 ac1e6130d4
commit c408b639e9
12 changed files with 11684 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
CHANGELOG.md
View File

@@ -1,5 +1,11 @@
# Changelog
## 2.5.0 - 2023-02-01
- Added tooltip override via `extras.tooltip`
## 2.4.2 - 2023-02-01
- Fixed hover title on column chart
## 2.4.1 - 2022-02-18
- Fixed xAxis auto-categories for MultiColumnChart

7
composer.json
View File

@@ -17,12 +17,12 @@
],
"require": {
"php": "^7.2|^7.3|^7.4|^8.0",
"illuminate/support": "^7.0|^8.0|^9.0",
"illuminate/support": "^7.0|^8.0|^9.0|^10.0",
"livewire/livewire": "^2.3"
},
"require-dev": {
"orchestra/testbench": "^5.0|^6.0|^7.0",
"phpunit/phpunit": "^8.0"
"orchestra/testbench": "^5.0|^6.0|^7.0|^8.0",
"phpunit/phpunit": "^8.0|^9.5.10"
},
"autoload": {
"psr-4": {
@@ -37,7 +37,6 @@
"scripts": {
"test": "vendor/bin/phpunit",
"test-coverage": "vendor/bin/phpunit --coverage-html coverage"
},
"config": {
"sort-packages": true

11575
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

3
package.json
View File

@@ -12,5 +12,8 @@
"cross-env": "^7.0.2",
"laravel-mix": "^5.0.9",
"vue-template-compiler": "^2.6.12"
},
"dependencies": {
"deepmerge": "^2.2.1"
}
}

3
public/app.js
View File

File diff suppressed because one or more lines are too long

20
resources/js/columnChart.js
View File

@@ -1,3 +1,4 @@
import { mergedOptionsWithJsonConfig } from './helpers'
const columnChart = () => {
return {
@@ -14,6 +15,7 @@ const columnChart = () => {
this.chart.destroy()
}
const title = component.get('columnChartModel.title')
const animated = component.get('columnChartModel.animated') || false;
const onColumnClickEventName = component.get('columnChartModel.onColumnClickEventName')
const dataLabels = component.get('columnChartModel.dataLabels') || {};
@@ -22,9 +24,13 @@ const columnChart = () => {
const grid = component.get('columnChartModel.grid');
const columnWidth = component.get('columnChartModel.columnWidth');
const horizontal = component.get('columnChartModel.horizontal');
const jsonConfig = component.get('columnChartModel.jsonConfig');
const data = component.get('columnChartModel.data');
const series = [{ data: data.map(item => item.value)}]
const series = [{
name: title,
data: data.map(item => item.value)
}]
const options = {
series: series,
@@ -80,7 +86,7 @@ const columnChart = () => {
yaxis: {
title: {
text: component.get('columnChartModel.title'),
text: title,
}
},
@@ -90,6 +96,14 @@ const columnChart = () => {
theme: component.get('columnChartModel.theme') || {},
tooltip: {
y: {
formatter: function(value, series) {
return data[series.dataPointIndex].extras.tooltip || value;
}
}
},
};
const colors = component.get('columnChartModel.colors');
@@ -98,7 +112,7 @@ const columnChart = () => {
options['colors'] = colors
}
this.chart = new ApexCharts(this.$refs.container, options);
this.chart = new ApexCharts(this.$refs.container, mergedOptionsWithJsonConfig(options, jsonConfig));
this.chart.render();
}
}

27
resources/js/helpers.js Normal file
View File

@@ -0,0 +1,27 @@
import deepmerge from 'deepmerge'
export const addPathToObjectWithValue = (obj, path, value) => {
const pList = path.split('.');
const key = pList.pop();
const pointer = pList.reduce((accumulator, currentValue) => {
if (accumulator[currentValue] === undefined) accumulator[currentValue] = {};
return accumulator[currentValue];
}, obj);
pointer[key] = value;
return obj;
}
export const mergedOptionsWithJsonConfig = (options, jsonConfig) => {
const customOptions = Object.keys(jsonConfig)
.reduce(function (obj, key) {
const value = jsonConfig[key]
if (typeof value === 'string' && value.includes('function')) {
return addPathToObjectWithValue(obj, key, eval('(' + value + ')'))
}
return addPathToObjectWithValue(obj, key, eval(value))
}, {})
return deepmerge(options, customOptions)
}

8
resources/js/lineChart.js
View File

@@ -98,6 +98,14 @@ const lineChart = () => {
}
)
},
tooltip: {
y: {
formatter: function(value, series) {
return data[series.dataPointIndex].extras.tooltip || value;
}
}
},
};
this.chart = new ApexCharts(this.$refs.container, options);

3
resources/js/multiColumnChart.js
View File

@@ -14,6 +14,7 @@ const multiColumnChart = () => {
this.chart.destroy()
}
const title = component.get('columnChartModel.title')
const stacked = component.get('columnChartModel.isStacked');
const animated = component.get('columnChartModel.animated');
const onColumnClickEventName = component.get('columnChartModel.onColumnClickEventName')
@@ -81,7 +82,7 @@ const multiColumnChart = () => {
yaxis: {
title: {
text: component.get('columnChartModel.title'),
text: title,
}
},

11
resources/js/pieChart.js
View File

@@ -1,3 +1,4 @@
import {mergedOptionsWithJsonConfig} from './helpers'
const pieChart = () => {
return {
@@ -21,6 +22,7 @@ const pieChart = () => {
const data = component.get('pieChartModel.data')
const sparkline = component.get('pieChartModel.sparkline')
const type = component.get('pieChartModel.type')
const jsonConfig = component.get('pieChartModel.jsonConfig');
const options = {
series: data.map(item => item.value),
@@ -76,6 +78,13 @@ const pieChart = () => {
theme: component.get('pieChartModel.theme') || {},
tooltip: {
y: {
formatter: function(value, series) {
return data[series.dataPointIndex].extras.tooltip || value;
}
}
},
};
const colors = component.get('pieChartModel.colors');
@@ -84,7 +93,7 @@ const pieChart = () => {
options['colors'] = colors
}
this.chart = new ApexCharts(this.$refs.container, options);
this.chart = new ApexCharts(this.$refs.container, mergedOptionsWithJsonConfig(options, jsonConfig));
this.chart.render();
}
}

4
src/Models/BaseChartModel.php
View File

@@ -19,6 +19,7 @@ class BaseChartModel
use HasGrid;
use HasColors;
use HasTheme;
use HasJsonConfig;
public function __construct()
{
@@ -32,6 +33,7 @@ class BaseChartModel
$this->initGrid();
$this->initColors();
$this->initTheme();
$this->initJsonConfig();
}
public function reactiveKey()
@@ -52,6 +54,7 @@ class BaseChartModel
$this->gridToArray(),
$this->colorsToArray(),
$this->themeToArray()
$this->jsonConfigToArray()
);
}
@@ -67,5 +70,6 @@ class BaseChartModel
$this->gridFromArray($array);
$this->colorsFromArray($array);
$this->themeFromArray($array);
$this->jsonConfigFromArray($array);
}
}

39
src/Models/HasJsonConfig.php Normal file
View File

@@ -0,0 +1,39 @@
<?php
namespace Asantibanez\LivewireCharts\Models;
trait HasJsonConfig
{
private $jsonConfig;
public function setJsonConfig($jsonConfig)
{
$this->jsonConfig = $jsonConfig;
return $this;
}
protected function initJsonConfig()
{
$this->jsonConfig = [];
}
private function defaultJsonConfig()
{
return [];
}
protected function jsonConfigFromArray($array)
{
$this->jsonConfig = data_get($array, 'jsonConfig', $this->defaultJsonConfig());
}
protected function jsonConfigToArray()
{
return [
'jsonConfig' => $this->jsonConfig,
];
}
}