Initial commit
This commit is contained in:
asantibanez
15
.editorconfig
Executable file
15
.editorconfig
Executable file
@@ -0,0 +1,15 @@
|
||||
; This file is for unifying the coding style for different editors and IDEs.
|
||||
; More information at http://editorconfig.org
|
||||
|
||||
root = true
|
||||
|
||||
[*]
|
||||
charset = utf-8
|
||||
indent_size = 4
|
||||
indent_style = space
|
||||
end_of_line = lf
|
||||
insert_final_newline = true
|
||||
trim_trailing_whitespace = true
|
||||
|
||||
[*.md]
|
||||
trim_trailing_whitespace = false
|
||||
11
.gitattributes
vendored
Executable file
11
.gitattributes
vendored
Executable file
@@ -0,0 +1,11 @@
|
||||
# Path-based git attributes
|
||||
# https://www.kernel.org/pub/software/scm/git/docs/gitattributes.html
|
||||
|
||||
# Ignore all test and documentation with "export-ignore".
|
||||
/.gitattributes export-ignore
|
||||
/.gitignore export-ignore
|
||||
/.travis.yml export-ignore
|
||||
/phpunit.xml.dist export-ignore
|
||||
/.scrutinizer.yml export-ignore
|
||||
/tests export-ignore
|
||||
/.editorconfig export-ignore
|
||||
6
.gitignore
vendored
Executable file
6
.gitignore
vendored
Executable file
@@ -0,0 +1,6 @@
|
||||
.idea
|
||||
build
|
||||
composer.lock
|
||||
docs
|
||||
vendor
|
||||
coverage
|
||||
19
.scrutinizer.yml
Executable file
19
.scrutinizer.yml
Executable file
@@ -0,0 +1,19 @@
|
||||
filter:
|
||||
excluded_paths: [tests/*]
|
||||
|
||||
checks:
|
||||
php:
|
||||
remove_extra_empty_lines: true
|
||||
remove_php_closing_tag: true
|
||||
remove_trailing_whitespace: true
|
||||
fix_use_statements:
|
||||
remove_unused: true
|
||||
preserve_multiple: false
|
||||
preserve_blanklines: true
|
||||
order_alphabetically: true
|
||||
fix_php_opening_tag: true
|
||||
fix_linefeed: true
|
||||
fix_line_ending: true
|
||||
fix_identation_4spaces: true
|
||||
fix_doc_comments: true
|
||||
|
||||
4
.styleci.yml
Executable file
4
.styleci.yml
Executable file
@@ -0,0 +1,4 @@
|
||||
preset: laravel
|
||||
|
||||
disabled:
|
||||
- single_class_element_per_statement
|
||||
21
.travis.yml
Executable file
21
.travis.yml
Executable file
@@ -0,0 +1,21 @@
|
||||
language: php
|
||||
|
||||
php:
|
||||
- 7.1
|
||||
- 7.2
|
||||
- 7.3
|
||||
|
||||
env:
|
||||
matrix:
|
||||
- COMPOSER_FLAGS="--prefer-lowest"
|
||||
- COMPOSER_FLAGS=""
|
||||
|
||||
before_script:
|
||||
- travis_retry composer self-update
|
||||
- travis_retry composer update ${COMPOSER_FLAGS} --no-interaction --prefer-source
|
||||
|
||||
script:
|
||||
- vendor/bin/phpunit --coverage-text --coverage-clover=coverage.clover
|
||||
|
||||
after_script:
|
||||
- php vendor/bin/ocular code-coverage:upload --format=php-clover coverage.clover
|
||||
7
CHANGELOG.md
Executable file
7
CHANGELOG.md
Executable file
@@ -0,0 +1,7 @@
|
||||
# Changelog
|
||||
|
||||
All notable changes to `livewire-charts` will be documented in this file
|
||||
|
||||
## 1.0.0 - 201X-XX-XX
|
||||
|
||||
- initial release
|
||||
55
CONTRIBUTING.md
Executable file
55
CONTRIBUTING.md
Executable file
@@ -0,0 +1,55 @@
|
||||
# Contributing
|
||||
|
||||
Contributions are **welcome** and will be fully **credited**.
|
||||
|
||||
Please read and understand the contribution guide before creating an issue or pull request.
|
||||
|
||||
## Etiquette
|
||||
|
||||
This project is open source, and as such, the maintainers give their free time to build and maintain the source code
|
||||
held within. They make the code freely available in the hope that it will be of use to other developers. It would be
|
||||
extremely unfair for them to suffer abuse or anger for their hard work.
|
||||
|
||||
Please be considerate towards maintainers when raising issues or presenting pull requests. Let's show the
|
||||
world that developers are civilized and selfless people.
|
||||
|
||||
It's the duty of the maintainer to ensure that all submissions to the project are of sufficient
|
||||
quality to benefit the project. Many developers have different skillsets, strengths, and weaknesses. Respect the maintainer's decision, and do not be upset or abusive if your submission is not used.
|
||||
|
||||
## Viability
|
||||
|
||||
When requesting or submitting new features, first consider whether it might be useful to others. Open
|
||||
source projects are used by many developers, who may have entirely different needs to your own. Think about
|
||||
whether or not your feature is likely to be used by other users of the project.
|
||||
|
||||
## Procedure
|
||||
|
||||
Before filing an issue:
|
||||
|
||||
- Attempt to replicate the problem, to ensure that it wasn't a coincidental incident.
|
||||
- Check to make sure your feature suggestion isn't already present within the project.
|
||||
- Check the pull requests tab to ensure that the bug doesn't have a fix in progress.
|
||||
- Check the pull requests tab to ensure that the feature isn't already in progress.
|
||||
|
||||
Before submitting a pull request:
|
||||
|
||||
- Check the codebase to ensure that your feature doesn't already exist.
|
||||
- Check the pull requests to ensure that another person hasn't already submitted the feature or fix.
|
||||
|
||||
## Requirements
|
||||
|
||||
If the project maintainer has any additional requirements, you will find them listed here.
|
||||
|
||||
- **[PSR-2 Coding Standard](https://github.com/php-fig/fig-standards/blob/master/accepted/PSR-2-coding-style-guide.md)** - The easiest way to apply the conventions is to install [PHP Code Sniffer](https://pear.php.net/package/PHP_CodeSniffer).
|
||||
|
||||
- **Add tests!** - Your patch won't be accepted if it doesn't have tests.
|
||||
|
||||
- **Document any change in behaviour** - Make sure the `README.md` and any other relevant documentation are kept up-to-date.
|
||||
|
||||
- **Consider our release cycle** - We try to follow [SemVer v2.0.0](https://semver.org/). Randomly breaking public APIs is not an option.
|
||||
|
||||
- **One pull request per feature** - If you want to do more than one thing, send multiple pull requests.
|
||||
|
||||
- **Send coherent history** - Make sure each individual commit in your pull request is meaningful. If you had to make multiple intermediate commits while developing, please [squash them](https://www.git-scm.com/book/en/v2/Git-Tools-Rewriting-History#Changing-Multiple-Commit-Messages) before submitting.
|
||||
|
||||
**Happy coding**!
|
||||
21
LICENSE.md
Executable file
21
LICENSE.md
Executable file
@@ -0,0 +1,21 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) Andrés Santibáñez
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
53
README.md
Executable file
53
README.md
Executable file
@@ -0,0 +1,53 @@
|
||||
# Very short description of the package
|
||||
|
||||
[](https://packagist.org/packages/asantibanez/livewire-charts)
|
||||
[](https://travis-ci.org/asantibanez/livewire-charts)
|
||||
[](https://scrutinizer-ci.com/g/asantibanez/livewire-charts)
|
||||
[](https://packagist.org/packages/asantibanez/livewire-charts)
|
||||
|
||||
This is where your description should go. Try and limit it to a paragraph or two, and maybe throw in a mention of what PSRs you support to avoid any confusion with users and contributors.
|
||||
|
||||
## Installation
|
||||
|
||||
You can install the package via composer:
|
||||
|
||||
```bash
|
||||
composer require asantibanez/livewire-charts
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
``` php
|
||||
// Usage description here
|
||||
```
|
||||
|
||||
### Testing
|
||||
|
||||
``` bash
|
||||
composer test
|
||||
```
|
||||
|
||||
### Changelog
|
||||
|
||||
Please see [CHANGELOG](CHANGELOG.md) for more information what has changed recently.
|
||||
|
||||
## Contributing
|
||||
|
||||
Please see [CONTRIBUTING](CONTRIBUTING.md) for details.
|
||||
|
||||
### Security
|
||||
|
||||
If you discover any security related issues, please email santibanez.andres@gmail.com instead of using the issue tracker.
|
||||
|
||||
## Credits
|
||||
|
||||
- [Andrés Santibáñez](https://github.com/asantibanez)
|
||||
- [All Contributors](../../contributors)
|
||||
|
||||
## License
|
||||
|
||||
The MIT License (MIT). Please see [License File](LICENSE.md) for more information.
|
||||
|
||||
## Laravel Package Boilerplate
|
||||
|
||||
This package was generated using the [Laravel Package Boilerplate](https://laravelpackageboilerplate.com).
|
||||
55
composer.json
Executable file
55
composer.json
Executable file
@@ -0,0 +1,55 @@
|
||||
{
|
||||
"name": "asantibanez/livewire-charts",
|
||||
"description": "Livewire Charts",
|
||||
"keywords": [
|
||||
"asantibanez",
|
||||
"livewire-charts"
|
||||
],
|
||||
"homepage": "https://github.com/asantibanez/livewire-charts",
|
||||
"license": "MIT",
|
||||
"type": "library",
|
||||
"authors": [
|
||||
{
|
||||
"name": "Andrés Santibáñez",
|
||||
"email": "santibanez.andres@gmail.com",
|
||||
"role": "Developer"
|
||||
}
|
||||
],
|
||||
"require": {
|
||||
"php": "^7.2|^7.3|^7.4",
|
||||
"illuminate/support": "^7.0|^8.0",
|
||||
"livewire/livewire": "^2.3"
|
||||
},
|
||||
"require-dev": {
|
||||
"orchestra/testbench": "^4.0|^5.0",
|
||||
"phpunit/phpunit": "^8.0"
|
||||
},
|
||||
"autoload": {
|
||||
"psr-4": {
|
||||
"Asantibanez\\LivewireCharts\\": "src"
|
||||
}
|
||||
},
|
||||
"autoload-dev": {
|
||||
"psr-4": {
|
||||
"Asantibanez\\LivewireCharts\\Tests\\": "tests"
|
||||
}
|
||||
},
|
||||
"scripts": {
|
||||
"test": "vendor/bin/phpunit",
|
||||
"test-coverage": "vendor/bin/phpunit --coverage-html coverage"
|
||||
|
||||
},
|
||||
"config": {
|
||||
"sort-packages": true
|
||||
},
|
||||
"extra": {
|
||||
"laravel": {
|
||||
"providers": [
|
||||
"Asantibanez\\LivewireCharts\\LivewireChartsServiceProvider"
|
||||
],
|
||||
"aliases": {
|
||||
"LivewireCharts": "Asantibanez\\LivewireCharts\\LivewireChartsFacade"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
8
config/config.php
Executable file
8
config/config.php
Executable file
@@ -0,0 +1,8 @@
|
||||
<?php
|
||||
|
||||
/*
|
||||
* You can place your custom package configuration in here.
|
||||
*/
|
||||
return [
|
||||
|
||||
];
|
||||
29
phpunit.xml.dist
Executable file
29
phpunit.xml.dist
Executable file
@@ -0,0 +1,29 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<phpunit bootstrap="vendor/autoload.php"
|
||||
backupGlobals="false"
|
||||
backupStaticAttributes="false"
|
||||
colors="true"
|
||||
verbose="true"
|
||||
convertErrorsToExceptions="true"
|
||||
convertNoticesToExceptions="true"
|
||||
convertWarningsToExceptions="true"
|
||||
processIsolation="false"
|
||||
stopOnFailure="false">
|
||||
<testsuites>
|
||||
<testsuite name="Test Suite">
|
||||
<directory>tests</directory>
|
||||
</testsuite>
|
||||
</testsuites>
|
||||
<filter>
|
||||
<whitelist>
|
||||
<directory suffix=".php">src/</directory>
|
||||
</whitelist>
|
||||
</filter>
|
||||
<logging>
|
||||
<log type="tap" target="build/report.tap"/>
|
||||
<log type="junit" target="build/report.junit.xml"/>
|
||||
<log type="coverage-html" target="build/coverage" charset="UTF-8" yui="true" highlight="true"/>
|
||||
<log type="coverage-text" target="build/coverage.txt"/>
|
||||
<log type="coverage-clover" target="build/logs/clover.xml"/>
|
||||
</logging>
|
||||
</phpunit>
|
||||
95
resources/views/livewire-column-chart.blade.php
Normal file
95
resources/views/livewire-column-chart.blade.php
Normal file
@@ -0,0 +1,95 @@
|
||||
<div
|
||||
class="w-full h-full relative"
|
||||
x-data="{ ...columnChart() }"
|
||||
x-init="drawChart(@this)"
|
||||
x-on:draw-column-chart.window="drawChart(@this)"
|
||||
>
|
||||
<div wire:ignore x-ref="container"></div>
|
||||
|
||||
<script>
|
||||
function columnChart() {
|
||||
return {
|
||||
chart: null,
|
||||
|
||||
drawChart(component) {
|
||||
this.renderApex(component)
|
||||
},
|
||||
|
||||
renderApex(component) {
|
||||
if (this.chart) {
|
||||
this.chart.destroy()
|
||||
}
|
||||
|
||||
const options = {
|
||||
series: [{ data: component.get('columnChartModel.data').map(item => item.value)}],
|
||||
|
||||
chart: {
|
||||
type: 'bar',
|
||||
height: '100%',
|
||||
|
||||
toolbar: {
|
||||
show: false
|
||||
},
|
||||
|
||||
animations: {
|
||||
enabled: component.get('columnChartModel.animated') || false,
|
||||
},
|
||||
|
||||
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]
|
||||
component.call('onColumnClick', column)
|
||||
},
|
||||
}
|
||||
},
|
||||
|
||||
colors: component.get('columnChartModel.data').map(item => item.color),
|
||||
|
||||
labels: {
|
||||
style: {
|
||||
colors: component.get('columnChartModel.data').map(item => item.color),
|
||||
},
|
||||
},
|
||||
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: false,
|
||||
columnWidth: '40%',
|
||||
distributed: true,
|
||||
},
|
||||
},
|
||||
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
},
|
||||
|
||||
xaxis: {
|
||||
categories: component.get('columnChartModel.data').map(item => item.title),
|
||||
},
|
||||
|
||||
yaxis: {
|
||||
title: {
|
||||
text: component.get('columnChartModel.title'),
|
||||
}
|
||||
},
|
||||
|
||||
fill: {
|
||||
opacity: component.get('columnChartModel.opacity') || 0.5
|
||||
},
|
||||
};
|
||||
|
||||
this.chart = new ApexCharts(this.$refs.container, options);
|
||||
this.chart.render();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</div>
|
||||
|
||||
97
resources/views/livewire-line-chart.blade.php
Normal file
97
resources/views/livewire-line-chart.blade.php
Normal file
@@ -0,0 +1,97 @@
|
||||
<div
|
||||
class="w-full h-full"
|
||||
x-data="{ ...lineChart() }"
|
||||
x-init="drawChart(@this)"
|
||||
x-on:draw-column-chart.window="drawChart(@this)"
|
||||
>
|
||||
<div wire:ignore x-ref="container"></div>
|
||||
|
||||
<script>
|
||||
function lineChart() {
|
||||
return {
|
||||
chart: null,
|
||||
|
||||
drawChart(component) {
|
||||
this.renderApex(component)
|
||||
},
|
||||
|
||||
renderApex(component) {
|
||||
if (this.chart) {
|
||||
this.chart.destroy()
|
||||
}
|
||||
|
||||
const options = {
|
||||
series: [{
|
||||
name: component.get('lineChartModel.title'),
|
||||
data: component.get('lineChartModel.data').map(item => item.value),
|
||||
}],
|
||||
chart: {
|
||||
type: 'line',
|
||||
height: '100%',
|
||||
zoom: {
|
||||
enabled: false
|
||||
},
|
||||
toolbar: {
|
||||
show: false
|
||||
},
|
||||
animations: {
|
||||
enabled: component.get('lineChartModel.animated') || false,
|
||||
},
|
||||
events: {
|
||||
markerClick: function(event, chartContext, { dataPointIndex }) {
|
||||
const onPointClickEventName = component.get('lineChartModel.onPointClickEventName')
|
||||
if (!onPointClickEventName) {
|
||||
return
|
||||
}
|
||||
|
||||
const point = component.get('lineChartModel.data')[dataPointIndex]
|
||||
component.call('onPointClick', point)
|
||||
}
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
stroke: {
|
||||
curve: 'straight'
|
||||
},
|
||||
title: {
|
||||
text: component.get('lineChartModel.title'),
|
||||
align: 'center'
|
||||
},
|
||||
xaxis: {
|
||||
categories: component.get('lineChartModel.data').map(item => item.title),
|
||||
},
|
||||
annotations: {
|
||||
points: component.get('lineChartModel.markers').map(item => {
|
||||
return {
|
||||
x: item.title,
|
||||
y: item.value,
|
||||
marker: {
|
||||
size: 6,
|
||||
fillColor: '#fff',
|
||||
strokeColor: item.strokeColor,
|
||||
radius: 2,
|
||||
},
|
||||
label: {
|
||||
offsetY: 0,
|
||||
style: {
|
||||
color: item.textColor,
|
||||
background: item.textBackgroundColor,
|
||||
},
|
||||
text: item.text || '',
|
||||
}
|
||||
}
|
||||
}
|
||||
)
|
||||
},
|
||||
};
|
||||
|
||||
this.chart = new ApexCharts(this.$refs.container, options);
|
||||
this.chart.render();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</div>
|
||||
|
||||
85
resources/views/livewire-pie-chart.blade.php
Normal file
85
resources/views/livewire-pie-chart.blade.php
Normal file
@@ -0,0 +1,85 @@
|
||||
<div
|
||||
class="w-full h-full"
|
||||
x-data="{ ...pieChart() }"
|
||||
x-init="drawChart(@this)"
|
||||
x-on:draw-column-chart.window="drawChart(@this)"
|
||||
>
|
||||
<div wire:ignore x-ref="container"></div>
|
||||
|
||||
<script>
|
||||
function pieChart() {
|
||||
return {
|
||||
chart: null,
|
||||
|
||||
drawChart(component) {
|
||||
this.renderApex(component)
|
||||
},
|
||||
|
||||
renderApex(component) {
|
||||
if (this.chart) {
|
||||
this.chart.destroy()
|
||||
}
|
||||
|
||||
const options = {
|
||||
series: component.get('pieChartModel.data').map(item => item.value),
|
||||
|
||||
chart: {
|
||||
height: '100%',
|
||||
type: 'pie',
|
||||
|
||||
animations: {
|
||||
enabled: component.get('pieChartModel.animated') || false,
|
||||
},
|
||||
|
||||
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]
|
||||
component.call('onSliceClick', slice)
|
||||
},
|
||||
}
|
||||
},
|
||||
|
||||
labels: component.get('pieChartModel.data').map(item => item.title),
|
||||
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
},
|
||||
|
||||
colors: component.get('pieChartModel.data').map(item => item.color),
|
||||
|
||||
fill: {
|
||||
opacity: component.get('pieChartModel.opacity'),
|
||||
},
|
||||
|
||||
title: {
|
||||
text: component.get('pieChartModel.title'),
|
||||
align: 'center',
|
||||
},
|
||||
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 600,
|
||||
options: {
|
||||
legend: {
|
||||
position: 'bottom'
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
};
|
||||
|
||||
this.chart = new ApexCharts(this.$refs.container, options);
|
||||
this.chart.render();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</div>
|
||||
|
||||
36
src/Charts/LivewireColumnChart.php
Normal file
36
src/Charts/LivewireColumnChart.php
Normal file
@@ -0,0 +1,36 @@
|
||||
<?php
|
||||
|
||||
namespace Asantibanez\LivewireCharts\Charts;
|
||||
|
||||
use Asantibanez\LivewireCharts\Models\ColumnChartModel;
|
||||
use Livewire\Component;
|
||||
|
||||
/**
|
||||
* Class LivewireColumnChart
|
||||
* @package Asantibanez\LivewireCharts\Charts
|
||||
*/
|
||||
class LivewireColumnChart extends Component
|
||||
{
|
||||
public $columnChartModel;
|
||||
|
||||
public function mount(ColumnChartModel $columnChartModel)
|
||||
{
|
||||
$this->columnChartModel = $columnChartModel->toArray();
|
||||
}
|
||||
|
||||
public function onColumnClick($column)
|
||||
{
|
||||
$onColumnClickEventName = data_get($this->columnChartModel, 'onColumnClickEventName', null);
|
||||
|
||||
if ($onColumnClickEventName === null) {
|
||||
return;
|
||||
}
|
||||
|
||||
$this->emit($onColumnClickEventName, $column);
|
||||
}
|
||||
|
||||
public function render()
|
||||
{
|
||||
return view('livewire-charts::livewire-column-chart');
|
||||
}
|
||||
}
|
||||
36
src/Charts/LivewireLineChart.php
Executable file
36
src/Charts/LivewireLineChart.php
Executable file
@@ -0,0 +1,36 @@
|
||||
<?php
|
||||
|
||||
namespace Asantibanez\LivewireCharts\Charts;
|
||||
|
||||
use Asantibanez\LivewireCharts\Models\LineChartModel;
|
||||
use Livewire\Component;
|
||||
|
||||
/**
|
||||
* Class LivewireLineChart
|
||||
* @package Asantibanez\LivewireCharts\Charts
|
||||
*/
|
||||
class LivewireLineChart extends Component
|
||||
{
|
||||
public $lineChartModel;
|
||||
|
||||
public function mount(LineChartModel $lineChartModel)
|
||||
{
|
||||
$this->lineChartModel = $lineChartModel->toArray();
|
||||
}
|
||||
|
||||
public function onPointClick($point)
|
||||
{
|
||||
$onPointClickEventName = data_get($this->lineChartModel, 'onPointClickEventName', null);
|
||||
|
||||
if ($onPointClickEventName === null) {
|
||||
return;
|
||||
}
|
||||
|
||||
$this->emit($onPointClickEventName, $point);
|
||||
}
|
||||
|
||||
public function render()
|
||||
{
|
||||
return view('livewire-charts::livewire-line-chart');
|
||||
}
|
||||
}
|
||||
36
src/Charts/LivewirePieChart.php
Normal file
36
src/Charts/LivewirePieChart.php
Normal file
@@ -0,0 +1,36 @@
|
||||
<?php
|
||||
|
||||
namespace Asantibanez\LivewireCharts\Charts;
|
||||
|
||||
use Asantibanez\LivewireCharts\Models\PieChartModel;
|
||||
use Livewire\Component;
|
||||
|
||||
/**
|
||||
* Class PieChart
|
||||
* @package Asantibanez\LivewireCharts\Charts
|
||||
*/
|
||||
class LivewirePieChart extends Component
|
||||
{
|
||||
public $pieChartModel;
|
||||
|
||||
public function mount(PieChartModel $pieChartModel)
|
||||
{
|
||||
$this->pieChartModel = $pieChartModel->toArray();
|
||||
}
|
||||
|
||||
public function onSliceClick($slice)
|
||||
{
|
||||
$onSliceClickEventName = data_get($this->pieChartModel, 'onSliceClickEventName', null);
|
||||
|
||||
if ($onSliceClickEventName === null) {
|
||||
return;
|
||||
}
|
||||
|
||||
$this->emit($onSliceClickEventName, $slice);
|
||||
}
|
||||
|
||||
public function render()
|
||||
{
|
||||
return view('livewire-charts::livewire-pie-chart');
|
||||
}
|
||||
}
|
||||
38
src/LivewireChartsServiceProvider.php
Executable file
38
src/LivewireChartsServiceProvider.php
Executable file
@@ -0,0 +1,38 @@
|
||||
<?php
|
||||
|
||||
namespace Asantibanez\LivewireCharts;
|
||||
|
||||
use Asantibanez\LivewireCharts\Charts\LivewireColumnChart;
|
||||
use Asantibanez\LivewireCharts\Charts\LivewireLineChart;
|
||||
use Asantibanez\LivewireCharts\Charts\LivewirePieChart;
|
||||
use Illuminate\Support\ServiceProvider;
|
||||
use Livewire\Livewire;
|
||||
|
||||
class LivewireChartsServiceProvider extends ServiceProvider
|
||||
{
|
||||
/**
|
||||
* Bootstrap the application services.
|
||||
*/
|
||||
public function boot()
|
||||
{
|
||||
$this->loadViewsFrom(__DIR__.'/../resources/views', 'livewire-charts');
|
||||
|
||||
if ($this->app->runningInConsole()) {
|
||||
$this->publishes([
|
||||
__DIR__.'/../resources/views' => resource_path('views/vendor/livewire-charts'),
|
||||
], 'livewire-charts-views');
|
||||
}
|
||||
|
||||
Livewire::component('livewire-line-chart', LivewireLineChart::class);
|
||||
Livewire::component('livewire-column-chart', LivewireColumnChart::class);
|
||||
Livewire::component('livewire-pie-chart', LivewirePieChart::class);
|
||||
}
|
||||
|
||||
/**
|
||||
* Register the application services.
|
||||
*/
|
||||
public function register()
|
||||
{
|
||||
//
|
||||
}
|
||||
}
|
||||
99
src/Models/ColumnChartModel.php
Normal file
99
src/Models/ColumnChartModel.php
Normal file
@@ -0,0 +1,99 @@
|
||||
<?php
|
||||
|
||||
|
||||
namespace Asantibanez\LivewireCharts\Models;
|
||||
|
||||
/**
|
||||
* Class ColumnChartModel
|
||||
* @package Asantibanez\LivewireCharts\Models
|
||||
*/
|
||||
class ColumnChartModel
|
||||
{
|
||||
public $title;
|
||||
|
||||
public $animated;
|
||||
|
||||
public $opacity;
|
||||
|
||||
public $onColumnClickEventName;
|
||||
|
||||
public $data;
|
||||
|
||||
public function __construct()
|
||||
{
|
||||
$this->title = '';
|
||||
|
||||
$this->animated = false;
|
||||
|
||||
$this->onColumnClickEventName = null;
|
||||
|
||||
$this->opacity = 0.5;
|
||||
|
||||
$this->data = collect();
|
||||
}
|
||||
|
||||
public function setTitle($title)
|
||||
{
|
||||
$this->title = $title;
|
||||
|
||||
return $this;
|
||||
}
|
||||
|
||||
public function setAnimated($animated)
|
||||
{
|
||||
$this->animated = $animated;
|
||||
|
||||
return $this;
|
||||
}
|
||||
|
||||
public function setOpacity($opacity)
|
||||
{
|
||||
$this->opacity = $opacity;
|
||||
|
||||
return $this;
|
||||
}
|
||||
|
||||
public function withOnColumnClickEventName($onColumnClickEventName)
|
||||
{
|
||||
$this->onColumnClickEventName = $onColumnClickEventName;
|
||||
|
||||
return $this;
|
||||
}
|
||||
|
||||
public function addColumn($title, $value, $color, $extras = [])
|
||||
{
|
||||
$this->data->push([
|
||||
'title' => $title,
|
||||
'value' => $value,
|
||||
'color' => $color,
|
||||
'extras' => $extras,
|
||||
]);
|
||||
|
||||
return $this;
|
||||
}
|
||||
|
||||
public function toArray()
|
||||
{
|
||||
return [
|
||||
'title' => $this->title,
|
||||
'animated' => $this->animated,
|
||||
'onColumnClickEventName' => $this->onColumnClickEventName,
|
||||
'opacity' => $this->opacity,
|
||||
'data' => $this->data->toArray(),
|
||||
];
|
||||
}
|
||||
|
||||
public function fromArray($array)
|
||||
{
|
||||
$this->title = data_get($array, 'title', '');
|
||||
|
||||
$this->animated = data_get($array, 'animated', false);
|
||||
|
||||
$this->onColumnClickEventName = data_get($array, 'onColumnClickEventName', null);
|
||||
|
||||
$this->opacity = data_get($array, 'opacity', 0.5);
|
||||
|
||||
$this->data = collect(data_get($array, 'data', []));
|
||||
}
|
||||
|
||||
}
|
||||
110
src/Models/LineChartModel.php
Normal file
110
src/Models/LineChartModel.php
Normal file
@@ -0,0 +1,110 @@
|
||||
<?php
|
||||
|
||||
|
||||
namespace Asantibanez\LivewireCharts\Models;
|
||||
|
||||
/**
|
||||
* Class LineChartModel
|
||||
* @package Asantibanez\LivewireCharts\Models
|
||||
*/
|
||||
class LineChartModel
|
||||
{
|
||||
public $title;
|
||||
|
||||
public $animated;
|
||||
|
||||
public $data;
|
||||
|
||||
public $markers;
|
||||
|
||||
public $onPointClickEventName;
|
||||
|
||||
public function __construct()
|
||||
{
|
||||
$this->title = '';
|
||||
|
||||
$this->animated = false;
|
||||
|
||||
$this->onPointClickEventName = null;
|
||||
|
||||
$this->data = collect();
|
||||
|
||||
$this->markers = collect();
|
||||
}
|
||||
|
||||
public function setTitle($title)
|
||||
{
|
||||
$this->title = $title;
|
||||
|
||||
return $this;
|
||||
}
|
||||
|
||||
public function setAnimated($animated)
|
||||
{
|
||||
$this->animated = $animated;
|
||||
|
||||
return $this;
|
||||
}
|
||||
|
||||
public function addPoint($title, $value, $extras = [])
|
||||
{
|
||||
$this->data->push([
|
||||
'title' => $title,
|
||||
'value' => $value,
|
||||
'extras' => $extras,
|
||||
]);
|
||||
|
||||
return $this;
|
||||
}
|
||||
|
||||
public function addMarker($title,
|
||||
$value,
|
||||
$strokeColor = 'green',
|
||||
$text = '',
|
||||
$textColor = '#ffffff',
|
||||
$textBackgroundColor = '#cccccc')
|
||||
{
|
||||
$this->markers->push([
|
||||
'title' => $title,
|
||||
'value' => $value,
|
||||
'strokeColor' => $strokeColor,
|
||||
'text' => $text,
|
||||
'textColor' => $textColor,
|
||||
'textBackgroundColor' => $textBackgroundColor,
|
||||
]);
|
||||
|
||||
return $this;
|
||||
}
|
||||
|
||||
public function withOnPointClickEvent($onPointClickEventName)
|
||||
{
|
||||
$this->onPointClickEventName = $onPointClickEventName;
|
||||
|
||||
return $this;
|
||||
}
|
||||
|
||||
public function toArray()
|
||||
{
|
||||
return [
|
||||
'title' => $this->title,
|
||||
'animated' => $this->animated,
|
||||
'onPointClickEventName' => $this->onPointClickEventName,
|
||||
'data' => $this->data->toArray(),
|
||||
'markers' => $this->markers->toArray(),
|
||||
];
|
||||
}
|
||||
|
||||
public function fromArray($array)
|
||||
{
|
||||
$this->title = data_get($array, 'title', '');
|
||||
|
||||
$this->animated = data_get($array, 'animated', false);
|
||||
|
||||
$this->onPointClickEventName = data_get($array, 'onPointClickEventName', null);
|
||||
|
||||
$this->data = collect(data_get($array, 'data', []));
|
||||
|
||||
$this->markers = collect(data_get($array, 'markers', []));
|
||||
}
|
||||
|
||||
}
|
||||
99
src/Models/PieChartModel.php
Normal file
99
src/Models/PieChartModel.php
Normal file
@@ -0,0 +1,99 @@
|
||||
<?php
|
||||
|
||||
|
||||
namespace Asantibanez\LivewireCharts\Models;
|
||||
|
||||
/**
|
||||
* Class PieChartModel
|
||||
* @package Asantibanez\LivewireCharts\Models
|
||||
*/
|
||||
class PieChartModel
|
||||
{
|
||||
public $title;
|
||||
|
||||
public $animated;
|
||||
|
||||
public $onSliceClickEventName;
|
||||
|
||||
public $opacity;
|
||||
|
||||
public $data;
|
||||
|
||||
public function __construct()
|
||||
{
|
||||
$this->title = '';
|
||||
|
||||
$this->animated = false;
|
||||
|
||||
$this->onSliceClickEventName = null;
|
||||
|
||||
$this->opacity = 0.75;
|
||||
|
||||
$this->data = collect();
|
||||
}
|
||||
|
||||
public function setTitle($title)
|
||||
{
|
||||
$this->title = $title;
|
||||
|
||||
return $this;
|
||||
}
|
||||
|
||||
public function setAnimated($animated)
|
||||
{
|
||||
$this->animated = $animated;
|
||||
|
||||
return $this;
|
||||
}
|
||||
|
||||
public function setOpacity($opacity)
|
||||
{
|
||||
$this->opacity = $opacity;
|
||||
|
||||
return $this;
|
||||
}
|
||||
|
||||
public function withOnSliceClickEvent($onSliceClickEventName)
|
||||
{
|
||||
$this->onSliceClickEventName = $onSliceClickEventName;
|
||||
|
||||
return $this;
|
||||
}
|
||||
|
||||
public function addSlice($title, $value, $color, $extras = [])
|
||||
{
|
||||
$this->data->push([
|
||||
'title' => $title,
|
||||
'value' => $value,
|
||||
'color' => $color,
|
||||
'extras' => $extras,
|
||||
]);
|
||||
|
||||
return $this;
|
||||
}
|
||||
|
||||
public function toArray()
|
||||
{
|
||||
return [
|
||||
'title' => $this->title,
|
||||
'animated' => $this->animated,
|
||||
'onSliceClickEventName' => $this->onSliceClickEventName,
|
||||
'opacity' => $this->opacity,
|
||||
'data' => $this->data->toArray(),
|
||||
];
|
||||
}
|
||||
|
||||
public function fromArray($array)
|
||||
{
|
||||
$this->title = data_get($array, 'title', '');
|
||||
|
||||
$this->animated = data_get($array, 'animated', false);
|
||||
|
||||
$this->onSliceClickEventName = data_get($array, 'onSliceClickEventName', null);
|
||||
|
||||
$this->opacity = data_get($array, 'opacity', 0.75);
|
||||
|
||||
$this->data = collect(data_get($array, 'data', []));
|
||||
}
|
||||
|
||||
}
|
||||
21
tests/ExampleTest.php
Executable file
21
tests/ExampleTest.php
Executable file
@@ -0,0 +1,21 @@
|
||||
<?php
|
||||
|
||||
namespace Asantibanez\LivewireCharts\Tests;
|
||||
|
||||
use Orchestra\Testbench\TestCase;
|
||||
use Asantibanez\LivewireCharts\LivewireChartsServiceProvider;
|
||||
|
||||
class ExampleTest extends TestCase
|
||||
{
|
||||
|
||||
protected function getPackageProviders($app)
|
||||
{
|
||||
return [LivewireChartsServiceProvider::class];
|
||||
}
|
||||
|
||||
/** @test */
|
||||
public function true_is_true()
|
||||
{
|
||||
$this->assertTrue(true);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user