Compare commits
1 Commits
v3.0.1
...
nicko170/m
| Author | SHA1 | Date | |
|---|---|---|---|
|
e6f04ca4c3 |
2
.github/workflows/phpunit.yml
vendored
2
.github/workflows/phpunit.yml
vendored
@@ -15,7 +15,7 @@ jobs:
|
||||
- name: Setup PHP
|
||||
uses: shivammathur/setup-php@v2
|
||||
with:
|
||||
php-version: '8.1'
|
||||
php-version: '8.0'
|
||||
extensions: dom, curl, libxml, mbstring, zip, pcntl, pdo, sqlite, pdo_sqlite, gd, exif, imagick, bcmath
|
||||
coverage: none
|
||||
|
||||
|
||||
19
CHANGELOG.md
19
CHANGELOG.md
@@ -1,24 +1,5 @@
|
||||
# Changelog
|
||||
|
||||
## 3.0.0 - 2023-07-25
|
||||
- Added Livewire v3 support
|
||||
- Added ability to set chart theme (thanks to @syntaxlexx)
|
||||
- Added ability to configure chart via JSON properties
|
||||
|
||||
## 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
|
||||
|
||||
## 2.4.0 - 2022-02-14
|
||||
- Added Radar Chart (thanks to @AlexHupe)
|
||||
- Added Tree Map Chart
|
||||
- Added "donut" type to Pie Chart (thanks to @nicko170)
|
||||
|
||||
## 2.3.0 - 2021-02-12
|
||||
- Added `init()` method for better boot and $wire hoisting
|
||||
- Added color customization for columns, multiline and pie chart
|
||||
|
||||
147
README.md
147
README.md
@@ -5,7 +5,6 @@
|
||||
## Preview
|
||||
|
||||
|
||||
|
||||
|
||||
## Demo
|
||||
|
||||
@@ -19,19 +18,19 @@ You can install the package via composer:
|
||||
composer require asantibanez/livewire-charts
|
||||
```
|
||||
|
||||
Next, you must export the package public scripts. To do this run
|
||||
Next, you must export the package public scripts. To do this run `php artisan vendor:publish`
|
||||
and export `livewire-charts:public`. This command will export a `vendor/livewire-charts` folder under the
|
||||
`public` directory of your app.
|
||||
|
||||
```bash
|
||||
php artisan livewire-charts:install
|
||||
```
|
||||
|
||||
This command will export a `vendor/livewire-charts` folder under the `public` directory of your app which is used
|
||||
by the `@livewireChartsScripts` directive. More on this topic later.
|
||||
php artisan vendor:publish --tag=livewire-charts:public
|
||||
```
|
||||
|
||||
## Requirements
|
||||
|
||||
This package requires the following packages/libraries to work:
|
||||
- `Laravel Livewire v3` (https://livewire.laravel.com/)
|
||||
- `Laravel Livewire v2` (https://laravel-livewire.com/)
|
||||
- `Alpine Js` (https://github.com/alpinejs/alpine)
|
||||
- `Apex Charts` (https://apexcharts.com/)
|
||||
|
||||
Please follow each package/library instructions on how to set them properly in your project.
|
||||
@@ -45,16 +44,12 @@ Livewire Charts supports out of the box the following types of charts
|
||||
- Pie Chart (`LivewirePieChart` component)
|
||||
- Column/Multi Line Chart (`LivewireColumnChart` component)
|
||||
- Area Chart (`LivewireAreaChart` component)
|
||||
- Radar Chart (`LivewireRadarChart` component)
|
||||
- Tree Map Chart (`LivewireTreeMapChart` component)
|
||||
|
||||
Each one comes with its own "model" class that allows you to define the chart's data and render behavior.
|
||||
- `LivewireLineChart` uses `LineChartModel` to set up data points, markers, events and other ui customizations.
|
||||
- `LivewirePieChart` uses `PieChartModel` to set up data slices, events and other ui customizations.
|
||||
- `LivewireColumnChart` uses `ColumnChartModel` to set up data columns, events and other ui customizations.
|
||||
- `LivewireAreaChart` uses `AreaChartModel` to set up data points, events and other ui customizations.
|
||||
- `LivewireRadarChart` uses `RadarChartModel` to set up data points, events and other ui customizations.
|
||||
- `LivewireTreeMapChart` uses `TreeMapChartModel` to set up data blocks, events and other ui customizations.
|
||||
|
||||
For example, to render a column chart, we can create an instance of `ColumnChartModel` and add some data to it
|
||||
```php
|
||||
@@ -73,11 +68,9 @@ With `$columnChartModel` at hand, we pass it to our `LivewireColumnChart` compon
|
||||
|
||||
```blade
|
||||
<livewire:livewire-column-chart
|
||||
{{-- key="{{ $columnChartModel->reactiveKey() }}" --}}
|
||||
:column-chart-model="$columnChartModel"
|
||||
/>
|
||||
```
|
||||
>Note: Optionally add "key" to enable props reactivity if needed 💪
|
||||
|
||||
Next, include the `@livewireChartsScripts` directive next to your other app scripts
|
||||
|
||||
@@ -104,8 +97,6 @@ LivewireCharts::columnChartModel();
|
||||
LivewireCharts::multiColumnChartModel();
|
||||
LivewireCharts::pieChartModel();
|
||||
LivewireCharts::areaChartModel();
|
||||
LivewireCharts::radarChartModel();
|
||||
LivewireCharts::treeMapChartModel();
|
||||
```
|
||||
|
||||
## Enabling Interactions
|
||||
@@ -126,12 +117,10 @@ $columnChartModel =
|
||||
We can listen to the `onClickEvent` registering a listener in any other Livewire component.
|
||||
|
||||
```php
|
||||
#[On('onColumnClick')]
|
||||
public function handleOnColumnClick($event)
|
||||
{
|
||||
// Handle event
|
||||
}
|
||||
```
|
||||
protected $listeners = [
|
||||
'onColumnClick' => 'handleOnColumnClick',
|
||||
];
|
||||
```
|
||||
|
||||
## "Reactive" Charts
|
||||
|
||||
@@ -168,25 +157,24 @@ The parent component renders the charts as follows
|
||||
For each chart, a specific model class needs to be used. Here, it is detailed the api available
|
||||
for each type of chart.
|
||||
|
||||
### All
|
||||
#### All
|
||||
|
||||
| Method | Description |
|
||||
|-----------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------|
|
||||
| setTitle(string $title) | Sets chart title |
|
||||
| setAnimated(boolean $animated) | Enables/disables animation |
|
||||
| setDataLabelsEnabled(boolean $enabled) | Enables/disables data labels |
|
||||
| withDataLabels() | Enables data labels |
|
||||
| withoutDataLabels() | Disables data labels |
|
||||
| withLegend() | Shows legends |
|
||||
| withoutLegend() | Hides legends |
|
||||
| setColors(array $colors) | Set colors for chart |
|
||||
| addColors(string $color) | Append $color to $colors set |
|
||||
| setXAxisCategories(array $categories) | Enables custom categories for chart X Axis |
|
||||
| sparklined() | Enables Apex Charts sparkline feature |
|
||||
| setSparklineEnabled(boolean $isEnabled) | Enables/Disables Apex Charts sparkline feature |
|
||||
| setJsonConfig(array $config) | Adds extra customization to charts by passing Apex charts properties keys and values. Nested keys must be added using dot (.) notation |
|
||||
| Method | Description |
|
||||
|--------|-------------|
|
||||
| setTitle(string $title) | Sets chart title |
|
||||
| setAnimated(boolean $animated) | Enables/disables animation |
|
||||
| setDataLabelsEnabled(boolean $enabled) | Enables/disables data labels |
|
||||
| withDataLabels() | Enables data labels |
|
||||
| withoutDataLabels() | Disables data labels |
|
||||
| withLegend() | Shows legends |
|
||||
| withoutLegend() | Hides legends |
|
||||
| setColors(array $colors) | Set colors for chart |
|
||||
| addColors(string $color) | Append $color to $colors set |
|
||||
| setXAxisCategories(array $categories) | Enables custom categories for chart X Axis |
|
||||
| sparklined() | Enables Apex Charts sparkline feature |
|
||||
| setSparklineEnabled(boolean $isEnabled) | Enables/Disables Apex Charts sparkline feature |
|
||||
|
||||
### LivewireLineChart
|
||||
#### LivewireLineChart
|
||||
|
||||
| Method | Description |
|
||||
|--------|-------------|
|
||||
@@ -197,32 +185,29 @@ for each type of chart.
|
||||
| addMarker(string $title, double $value) | Adds a marker point to the line chart. Markers are used to emphasize particular points in the chart (singleLine only) |
|
||||
| withOnPointClickEvent(string $eventName) | Event Name that will be fired when a point/marker of the chart is clicked |
|
||||
|
||||
### LivewireColumnChart
|
||||
#### LivewireColumnChart
|
||||
|
||||
| Method | Description |
|
||||
|---------------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------|
|
||||
| setOpacity(int $opacity) | Sets columns' opacity |
|
||||
| setColumnWidth(int $columnWidth) | Sets columns' width |
|
||||
| setHorizontal() | Displays columns horizontally |
|
||||
| setVertical() | Displays columns vertically |
|
||||
| multiColumn() | Sets chart to display multiple column series |
|
||||
| singleColumn() | Sets chart to display a single column series |
|
||||
| stacked() | Sets chart to display column series stacked |
|
||||
| addColumn(string $title, double $value, string $color, array $extras = []) | Adds a column to the chart with the specified color. `$extras` is forwarded on click event |
|
||||
| addSeriesColumn(string $seriesName, string $title, double $value, array $extras = []) | Adds a column to a multicolumn chart. `$extras` is forwarded on click event |
|
||||
| withOnColumnClickEventName(string $eventName) | Event Name that will be fired when a column of the chart is clicked |
|
||||
| Method | Description |
|
||||
|--------|-------------|
|
||||
| setOpacity(int $opacity) | Sets columns' opacity |
|
||||
| setColumnWidth(int $columnWidth) | Sets columns' width |
|
||||
| setHorizontal(boolean $value) | Sets columns or bars |
|
||||
| multiColumn() | Sets chart to display multiple column series |
|
||||
| singleColumn() | Sets chart to display a single column series |
|
||||
| stacked() | Sets chart to display column series stacked |
|
||||
| addColumn(string $title, double $value, string $color, array $extras = []) | Adds a column to the chart with the specified color. `$extras` is forwarded on click event |
|
||||
| addSeriesColumn(string $seriesName, string $title, double $value, array $extras = []) | Adds a column to a multicolumn chart. `$extras` is forwarded on click event |
|
||||
| onColumnClickEventName(string $eventName) | Event Name that will be fired when a column of the chart is clicked |
|
||||
|
||||
### LivewirePieChart
|
||||
#### LivewirePieChart
|
||||
|
||||
| Method | Description |
|
||||
|---------------------------------------------------------------------------|-------------------------------------------------------------------------------------------|
|
||||
| setOpacity(int $opacity) | Sets slices' opacity |
|
||||
| asPie() | Displays chart as pie |
|
||||
| asDonut() | Displays chart as donut |
|
||||
| Method | Description |
|
||||
|--------|-------------|
|
||||
| setOpacity(int $opacity) | Sets slices' opacity |
|
||||
| addSlice(string $title, double $value, string $color, array $extras = []) | Adds a slice to the chart with the specified color. `$extras` is forwarded on click event |
|
||||
| withOnSliceClickEvent(string $eventName) | Event Name that will be fired when a column of the chart is clicked |
|
||||
| withOnSliceClickEvent(string $eventName) | Event Name that will be fired when a column of the chart is clicked |
|
||||
|
||||
### LivewireAreaChart
|
||||
#### LivewireAreaChart
|
||||
|
||||
| Method | Description |
|
||||
|--------|-------------|
|
||||
@@ -231,23 +216,6 @@ for each type of chart.
|
||||
| setXAxisVisible(boolean $visible) | Shows/hides xAxis labels |
|
||||
| setYAxisVisible(boolean $visible) | Shows/hides yAxis labels |
|
||||
|
||||
### LivewireRadarChart
|
||||
|
||||
| Method | Description |
|
||||
|--------|-------------|
|
||||
| addSeries(string $seriesName, string $title, double $value, array $extras = []) | |
|
||||
| withOnPointClickEvent(string $eventName) | Event Name that will be fired when a point of the chart is clicked |
|
||||
|
||||
### LivewireTreeMapChart
|
||||
|
||||
| Method | Description |
|
||||
|--------|-------------|
|
||||
| addBlock(string $title, double $value, array $extras = []) | Adds a block to the default series|
|
||||
| addSeriesBlock(string $seriesName, string $title, double $value, array $extras = []) | Adds a block to the specified series|
|
||||
| withOnBlockClickEvent(string $eventName) | Event Name that will be fired when a block of the chart is clicked |
|
||||
| setDistributed(bool $distributed) | Set whether the chart uses distribution or not |
|
||||
|
||||
|
||||
## Advanced Usage - Integrating Scripts
|
||||
|
||||
The directive `@livewireChartsScripts` adds a `script` tag that includes `public/vendor/livewire-charts/app.js`.
|
||||
@@ -257,31 +225,6 @@ inside your resources folder. You can then adjust imports as you see fit in your
|
||||
|
||||
>Note: You must remove @livewireChartsScripts directive so it doesn't clash with the scripts in your build system.
|
||||
|
||||
|
||||
## Advanced Usage - Custom Json Configs
|
||||
|
||||
The `setJsonConfig()` method on every chart allows adding custom Apex properties not provided first hand by the package.
|
||||
This means that any chart property supported by Apex chart can be passed down using this method.
|
||||
|
||||
```php
|
||||
$chart->setJsonConfig([
|
||||
'plotOptions.pie.startAngle' => -90,
|
||||
'plotOptions.pie.endAngle' => 90,
|
||||
'plotOptions.pie.offsetY' => 10,
|
||||
'grid.padding.bottom' => -180,
|
||||
]);
|
||||
```
|
||||
|
||||
>Note: If you want to add nested properties, you can use dot (.) notation for this matter.
|
||||
|
||||
You can even pass down simple JS functions. For example, for formatting you can pass down your own closure
|
||||
|
||||
```php
|
||||
$chart->setJsonConfig([
|
||||
'tooltip.y.formatter' => '(val) => `$${val} million dollars baby!`'
|
||||
])
|
||||
```
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
Chart components must be placed inside a container with fixed height. This is because the chart will use all the given
|
||||
|
||||
@@ -17,12 +17,12 @@
|
||||
],
|
||||
"require": {
|
||||
"php": "^7.2|^7.3|^7.4|^8.0",
|
||||
"illuminate/support": "^7.0|^8.0|^9.0|^10.0",
|
||||
"livewire/livewire": "^3.0"
|
||||
"illuminate/support": "^7.0|^8.0|^9.0",
|
||||
"livewire/livewire": "^2.3"
|
||||
},
|
||||
"require-dev": {
|
||||
"orchestra/testbench": "^5.0|^6.0|^7.0|^8.0",
|
||||
"phpunit/phpunit": "^8.0|^9.5.10"
|
||||
"orchestra/testbench": "^5.0|^6.0|^7.0",
|
||||
"phpunit/phpunit": "^8.0"
|
||||
},
|
||||
"autoload": {
|
||||
"psr-4": {
|
||||
@@ -37,6 +37,7 @@
|
||||
"scripts": {
|
||||
"test": "vendor/bin/phpunit",
|
||||
"test-coverage": "vendor/bin/phpunit --coverage-html coverage"
|
||||
|
||||
},
|
||||
"config": {
|
||||
"sort-packages": true
|
||||
@@ -50,7 +51,5 @@
|
||||
"LivewireCharts": "Asantibanez\\LivewireCharts\\LivewireChartsFacade"
|
||||
}
|
||||
}
|
||||
},
|
||||
"minimum-stability": "dev",
|
||||
"prefer-stable": true
|
||||
}
|
||||
}
|
||||
|
||||
18182
package-lock.json
generated
18182
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -12,8 +12,5 @@
|
||||
"cross-env": "^7.0.2",
|
||||
"laravel-mix": "^5.0.9",
|
||||
"vue-template-compiler": "^2.6.12"
|
||||
},
|
||||
"dependencies": {
|
||||
"deepmerge": "^2.2.1"
|
||||
}
|
||||
}
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 1.8 MiB |
File diff suppressed because one or more lines are too long
@@ -1,6 +1,6 @@
|
||||
/*!
|
||||
* ApexCharts v3.41.0
|
||||
* (c) 2018-2023 ApexCharts
|
||||
* ApexCharts v3.22.2
|
||||
* (c) 2018-2020 Juned Chhipa
|
||||
* Released under the MIT License.
|
||||
*/
|
||||
|
||||
|
||||
@@ -5,8 +5,6 @@ import multiColumnChart from "./multiColumnChart";
|
||||
import lineChart from "./lineChart"
|
||||
import multiLineChart from "./multiLineChart"
|
||||
import pieChart from "./pieChart"
|
||||
import radarChart from "./radarChart"
|
||||
import treeMapChart from "./treeMapChart"
|
||||
|
||||
window.ApexCharts = ApexCharts
|
||||
window.livewireChartsAreaChart = areaChart
|
||||
@@ -15,5 +13,3 @@ window.livewireChartsLineChart = lineChart
|
||||
window.livewireChartsMultiLineChart = multiLineChart
|
||||
window.livewireChartsPieChart = pieChart
|
||||
window.livewireChartsMultiColumnChart = multiColumnChart
|
||||
window.livewireChartsRadarChart = radarChart
|
||||
window.livewireChartsTreeMapChart = treeMapChart
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import { mergedOptionsWithJsonConfig } from './helpers'
|
||||
|
||||
const areaChart = () => {
|
||||
return {
|
||||
@@ -21,7 +20,6 @@ const areaChart = () => {
|
||||
const onPointClickEventName = component.get('areaChartModel.onPointClickEventName')
|
||||
const data = component.get('areaChartModel.data');
|
||||
const sparkline = component.get('areaChartModel.sparkline');
|
||||
const jsonConfig = component.get('areaChartModel.jsonConfig');
|
||||
|
||||
const categories = component.get('areaChartModel.xAxis.categories').length > 0
|
||||
? component.get('areaChartModel.xAxis.categories')
|
||||
@@ -85,12 +83,9 @@ const areaChart = () => {
|
||||
bottom: 0,
|
||||
}
|
||||
},
|
||||
|
||||
theme: component.get('areaChartModel.theme') || {},
|
||||
|
||||
};
|
||||
|
||||
this.chart = new ApexCharts(this.$refs.container, mergedOptionsWithJsonConfig(options, jsonConfig));
|
||||
this.chart = new ApexCharts(this.$refs.container, options);
|
||||
this.chart.render();
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import { mergedOptionsWithJsonConfig } from './helpers'
|
||||
|
||||
const columnChart = () => {
|
||||
return {
|
||||
@@ -15,7 +14,6 @@ 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') || {};
|
||||
@@ -24,13 +22,9 @@ 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 = [{
|
||||
name: title,
|
||||
data: data.map(item => item.value)
|
||||
}]
|
||||
const series = [{ data: data.map(item => item.value)}]
|
||||
|
||||
const options = {
|
||||
series: series,
|
||||
@@ -86,24 +80,13 @@ const columnChart = () => {
|
||||
|
||||
yaxis: {
|
||||
title: {
|
||||
text: title,
|
||||
text: component.get('columnChartModel.title'),
|
||||
}
|
||||
},
|
||||
|
||||
fill: {
|
||||
opacity: component.get('columnChartModel.opacity') || 0.5
|
||||
},
|
||||
|
||||
theme: component.get('columnChartModel.theme') || {},
|
||||
|
||||
tooltip: {
|
||||
y: {
|
||||
formatter: function(value, series) {
|
||||
return data[series.dataPointIndex].extras.tooltip || value;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
};
|
||||
|
||||
const colors = component.get('columnChartModel.colors');
|
||||
@@ -112,7 +95,7 @@ const columnChart = () => {
|
||||
options['colors'] = colors
|
||||
}
|
||||
|
||||
this.chart = new ApexCharts(this.$refs.container, mergedOptionsWithJsonConfig(options, jsonConfig));
|
||||
this.chart = new ApexCharts(this.$refs.container, options);
|
||||
this.chart.render();
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,27 +0,0 @@
|
||||
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)
|
||||
}
|
||||
@@ -1,4 +1,3 @@
|
||||
import { mergedOptionsWithJsonConfig } from './helpers'
|
||||
|
||||
const lineChart = () => {
|
||||
return {
|
||||
@@ -21,7 +20,6 @@ const lineChart = () => {
|
||||
const data = component.get('lineChartModel.data');
|
||||
const onPointClickEventName = component.get('lineChartModel.onPointClickEventName');
|
||||
const sparkline = component.get('lineChartModel.sparkline');
|
||||
const jsonConfig = component.get('lineChartModel.jsonConfig');
|
||||
|
||||
const series = [{
|
||||
name: title,
|
||||
@@ -63,8 +61,6 @@ const lineChart = () => {
|
||||
|
||||
stroke: component.get('lineChartModel.stroke') || {},
|
||||
|
||||
theme: component.get('lineChartModel.theme') || {},
|
||||
|
||||
title: {
|
||||
text: title,
|
||||
align: 'center'
|
||||
@@ -100,17 +96,9 @@ const lineChart = () => {
|
||||
}
|
||||
)
|
||||
},
|
||||
|
||||
tooltip: {
|
||||
y: {
|
||||
formatter: function(value, series) {
|
||||
return data[series.dataPointIndex].extras.tooltip || value;
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
this.chart = new ApexCharts(this.$refs.container, mergedOptionsWithJsonConfig(options, jsonConfig));
|
||||
this.chart = new ApexCharts(this.$refs.container, options);
|
||||
this.chart.render();
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import { mergedOptionsWithJsonConfig } from './helpers'
|
||||
|
||||
const multiColumnChart = () => {
|
||||
return {
|
||||
@@ -15,7 +14,6 @@ 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')
|
||||
@@ -25,7 +23,6 @@ const multiColumnChart = () => {
|
||||
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 = Object.keys(data)
|
||||
@@ -36,7 +33,7 @@ const multiColumnChart = () => {
|
||||
|
||||
const categories = component.get('columnChartModel.xAxis.categories').length > 0
|
||||
? component.get('columnChartModel.xAxis.categories')
|
||||
: data[series[0].name].map(item => item.title)
|
||||
: []
|
||||
;
|
||||
|
||||
const options = {
|
||||
@@ -84,16 +81,13 @@ const multiColumnChart = () => {
|
||||
|
||||
yaxis: {
|
||||
title: {
|
||||
text: title,
|
||||
text: component.get('columnChartModel.title'),
|
||||
}
|
||||
},
|
||||
|
||||
fill: {
|
||||
opacity: component.get('columnChartModel.opacity'),
|
||||
},
|
||||
|
||||
theme: component.get('columnChartModel.theme') || {},
|
||||
|
||||
};
|
||||
|
||||
const colors = component.get('columnChartModel.colors');
|
||||
@@ -102,7 +96,7 @@ const multiColumnChart = () => {
|
||||
options['colors'] = colors
|
||||
}
|
||||
|
||||
this.chart = new ApexCharts(this.$refs.container, mergedOptionsWithJsonConfig(options, jsonConfig));
|
||||
this.chart = new ApexCharts(this.$refs.container, options);
|
||||
this.chart.render();
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import { mergedOptionsWithJsonConfig } from './helpers'
|
||||
|
||||
const multiLineChart = () => {
|
||||
return {
|
||||
@@ -21,7 +20,6 @@ const multiLineChart = () => {
|
||||
const data = component.get('lineChartModel.data');
|
||||
const onPointClickEventName = component.get('lineChartModel.onPointClickEventName');
|
||||
const sparkline = component.get('lineChartModel.sparkline');
|
||||
const jsonConfig = component.get('lineChartModel.jsonConfig');
|
||||
|
||||
const series = Object.keys(data).map(key => {
|
||||
return {
|
||||
@@ -76,8 +74,6 @@ const multiLineChart = () => {
|
||||
},
|
||||
|
||||
yaxis: component.get('lineChartModel.yAxis') || {},
|
||||
|
||||
theme: component.get('lineChartModel.theme') || {},
|
||||
};
|
||||
|
||||
const colors = component.get('lineChartModel.colors');
|
||||
@@ -86,7 +82,7 @@ const multiLineChart = () => {
|
||||
options['colors'] = colors
|
||||
}
|
||||
|
||||
this.chart = new ApexCharts(this.$refs.container, mergedOptionsWithJsonConfig(options, jsonConfig));
|
||||
this.chart = new ApexCharts(this.$refs.container, options);
|
||||
this.chart.render();
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import {mergedOptionsWithJsonConfig} from './helpers'
|
||||
|
||||
const pieChart = () => {
|
||||
return {
|
||||
@@ -22,7 +21,6 @@ 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),
|
||||
@@ -75,16 +73,6 @@ const pieChart = () => {
|
||||
],
|
||||
|
||||
legend: component.get('pieChartModel.legend') || {},
|
||||
|
||||
theme: component.get('pieChartModel.theme') || {},
|
||||
|
||||
tooltip: {
|
||||
y: {
|
||||
formatter: function(value, series) {
|
||||
return data[series.dataPointIndex].extras.tooltip || value;
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
const colors = component.get('pieChartModel.colors');
|
||||
@@ -93,7 +81,7 @@ const pieChart = () => {
|
||||
options['colors'] = colors
|
||||
}
|
||||
|
||||
this.chart = new ApexCharts(this.$refs.container, mergedOptionsWithJsonConfig(options, jsonConfig));
|
||||
this.chart = new ApexCharts(this.$refs.container, options);
|
||||
this.chart.render();
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,99 +0,0 @@
|
||||
import { mergedOptionsWithJsonConfig } from './helpers'
|
||||
|
||||
const radarChart = () => {
|
||||
return {
|
||||
chart: null,
|
||||
|
||||
init() {
|
||||
setTimeout(() => {
|
||||
this.drawChart(this.$wire)
|
||||
}, 0)
|
||||
},
|
||||
|
||||
drawChart(component) {
|
||||
if (this.chart) {
|
||||
this.chart.destroy()
|
||||
}
|
||||
|
||||
const title = component.get('radarChartModel.title');
|
||||
const animated = component.get('radarChartModel.animated');
|
||||
const onPointClickEventName = component.get('areaChartModel.onPointClickEventName');
|
||||
const dataLabels = component.get('radarChartModel.dataLabels');
|
||||
const data = component.get('radarChartModel.data');
|
||||
const sparkline = component.get('radarChartModel.sparkline');
|
||||
const colors = component.get('radarChartModel.colors');
|
||||
const jsonConfig = component.get('radarChartModel.jsonConfig');
|
||||
|
||||
const series = Object.keys(data)
|
||||
.map(seriesName => ({
|
||||
name: seriesName,
|
||||
data: data[seriesName].map(item => item.value)
|
||||
}))
|
||||
|
||||
const categories = component.get('radarChartModel.xAxis.categories').length > 0
|
||||
? component.get('radarChartModel.xAxis.categories')
|
||||
: data[series[0].name].map(item => item.title)
|
||||
;
|
||||
|
||||
const options = {
|
||||
series: series,
|
||||
|
||||
chart: {
|
||||
type: 'radar',
|
||||
height: '100%',
|
||||
|
||||
...sparkline,
|
||||
|
||||
toolbar: {show: false},
|
||||
|
||||
animations: {enabled: animated},
|
||||
|
||||
events: {
|
||||
markerClick: function(event, chartContext, {seriesIndex, dataPointIndex}) {
|
||||
if (!onPointClickEventName) {
|
||||
return
|
||||
}
|
||||
|
||||
const point = data[series[seriesIndex].name][dataPointIndex]
|
||||
|
||||
component.call('onPointClick', point)
|
||||
},
|
||||
}
|
||||
},
|
||||
|
||||
legend: component.get('radarChartModel.legend'),
|
||||
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: false,
|
||||
columnWidth: '50%',
|
||||
},
|
||||
},
|
||||
|
||||
dataLabels: dataLabels,
|
||||
|
||||
xaxis: {
|
||||
categories: categories,
|
||||
},
|
||||
|
||||
title: { text: title },
|
||||
|
||||
fill: {
|
||||
opacity: component.get('radarChartModel.opacity'),
|
||||
},
|
||||
|
||||
colors: colors,
|
||||
|
||||
markers: {
|
||||
size: 4
|
||||
},
|
||||
|
||||
};
|
||||
|
||||
this.chart = new ApexCharts(this.$refs.container, mergedOptionsWithJsonConfig(options, jsonConfig));
|
||||
this.chart.render();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default radarChart
|
||||
@@ -1,80 +0,0 @@
|
||||
import { mergedOptionsWithJsonConfig } from './helpers'
|
||||
|
||||
const treeMapChart = () => {
|
||||
return {
|
||||
chart: null,
|
||||
|
||||
init() {
|
||||
setTimeout(() => {
|
||||
this.drawChart(this.$wire)
|
||||
}, 0)
|
||||
},
|
||||
|
||||
drawChart(component) {
|
||||
if (this.chart) {
|
||||
this.chart.destroy()
|
||||
}
|
||||
|
||||
const title = component.get('treeMapChartModel.title');
|
||||
const animated = component.get('treeMapChartModel.animated');
|
||||
const distributed = component.get('treeMapChartModel.distributed');
|
||||
const onBlockClickEventName = component.get('treeMapChartModel.onBlockClickEventName');
|
||||
const data = component.get('treeMapChartModel.data');
|
||||
const colors = component.get('treeMapChartModel.colors');
|
||||
const enableShades = component.get('treeMapChartModel.enableShades');
|
||||
const jsonConfig = component.get('treeMapChartModel.jsonConfig');
|
||||
|
||||
const series = Object.keys(data)
|
||||
.map(seriesName => ({
|
||||
name: seriesName,
|
||||
data: data[seriesName].map(item => ({
|
||||
x: item.title,
|
||||
y: item.value,
|
||||
}))
|
||||
}))
|
||||
|
||||
const options = {
|
||||
series: series,
|
||||
|
||||
legend: { show: false },
|
||||
|
||||
title: { text: title },
|
||||
|
||||
chart: {
|
||||
height: '100%',
|
||||
type: 'treemap',
|
||||
|
||||
toolbar: {show: false},
|
||||
|
||||
animations: {enabled: animated},
|
||||
|
||||
events: {
|
||||
click: function(event, chartContext, {seriesIndex, dataPointIndex}) {
|
||||
if (!onBlockClickEventName) {
|
||||
return
|
||||
}
|
||||
|
||||
const block = data[series[seriesIndex].name][dataPointIndex]
|
||||
|
||||
component.call('onBlockClick', block)
|
||||
},
|
||||
}
|
||||
},
|
||||
|
||||
plotOptions: {
|
||||
treemap: {
|
||||
distributed: distributed,
|
||||
enableShades: enableShades,
|
||||
}
|
||||
},
|
||||
|
||||
colors: colors,
|
||||
};
|
||||
|
||||
this.chart = new ApexCharts(this.$refs.container, mergedOptionsWithJsonConfig(options, jsonConfig));
|
||||
this.chart.render();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default treeMapChart
|
||||
@@ -1,7 +0,0 @@
|
||||
<div
|
||||
style="width: 100%; height: 100%;"
|
||||
x-data="{ ...livewireChartsRadarChart() }"
|
||||
x-init="init()"
|
||||
>
|
||||
<div wire:ignore x-ref="container"></div>
|
||||
</div>
|
||||
@@ -1,7 +0,0 @@
|
||||
<div
|
||||
style="width: 100%; height: 100%;"
|
||||
x-data="{ ...livewireChartsTreeMapChart() }"
|
||||
x-init="init()"
|
||||
>
|
||||
<div wire:ignore x-ref="container"></div>
|
||||
</div>
|
||||
@@ -26,7 +26,7 @@ class LivewireAreaChart extends Component
|
||||
return;
|
||||
}
|
||||
|
||||
$this->dispatch($onPointClickEventName, $point);
|
||||
$this->emit($onPointClickEventName, $point);
|
||||
}
|
||||
|
||||
public function render()
|
||||
|
||||
@@ -26,7 +26,7 @@ class LivewireColumnChart extends Component
|
||||
return;
|
||||
}
|
||||
|
||||
$this->dispatch($onColumnClickEventName, $column);
|
||||
$this->emit($onColumnClickEventName, $column);
|
||||
}
|
||||
|
||||
public function render()
|
||||
|
||||
@@ -26,7 +26,7 @@ class LivewireLineChart extends Component
|
||||
return;
|
||||
}
|
||||
|
||||
$this->dispatch($onPointClickEventName, $point);
|
||||
$this->emit($onPointClickEventName, $point);
|
||||
}
|
||||
|
||||
public function render()
|
||||
|
||||
@@ -26,7 +26,7 @@ class LivewirePieChart extends Component
|
||||
return;
|
||||
}
|
||||
|
||||
$this->dispatch($onSliceClickEventName, $slice);
|
||||
$this->emit($onSliceClickEventName, $slice);
|
||||
}
|
||||
|
||||
public function render()
|
||||
|
||||
@@ -1,36 +0,0 @@
|
||||
<?php
|
||||
|
||||
namespace Asantibanez\LivewireCharts\Charts;
|
||||
|
||||
use Asantibanez\LivewireCharts\Models\RadarChartModel;
|
||||
use Livewire\Component;
|
||||
|
||||
/**
|
||||
* Class LivewireRadarChart
|
||||
* @package Asantibanez\LivewireCharts\Charts
|
||||
*/
|
||||
class LivewireRadarChart extends Component
|
||||
{
|
||||
public $radarChartModel;
|
||||
|
||||
public function mount(RadarChartModel $radarChartModel)
|
||||
{
|
||||
$this->radarChartModel = $radarChartModel->toArray();
|
||||
}
|
||||
|
||||
public function onPointClick($point)
|
||||
{
|
||||
$onPointClickEventName = data_get($this->radarChartModel, 'onPointClickEventName', null);
|
||||
|
||||
if ($onPointClickEventName === null) {
|
||||
return;
|
||||
}
|
||||
|
||||
$this->dispatch($onPointClickEventName, $point);
|
||||
}
|
||||
|
||||
public function render()
|
||||
{
|
||||
return view('livewire-charts::livewire-radar-chart');
|
||||
}
|
||||
}
|
||||
@@ -1,36 +0,0 @@
|
||||
<?php
|
||||
|
||||
namespace Asantibanez\LivewireCharts\Charts;
|
||||
|
||||
use Asantibanez\LivewireCharts\Models\TreeMapChartModel;
|
||||
use Livewire\Component;
|
||||
|
||||
/**
|
||||
* Class LivewireTreeMapChart
|
||||
* @package Asantibanez\LivewireCharts\Charts
|
||||
*/
|
||||
class LivewireTreeMapChart extends Component
|
||||
{
|
||||
public $treeMapChartModel;
|
||||
|
||||
public function mount(TreeMapChartModel $treeMapChartModel)
|
||||
{
|
||||
$this->treeMapChartModel = $treeMapChartModel->toArray();
|
||||
}
|
||||
|
||||
public function onBlockClick($block)
|
||||
{
|
||||
$onBlockClickEventName = data_get($this->treeMapChartModel, 'onBlockClickEventName');
|
||||
|
||||
if ($onBlockClickEventName === null) {
|
||||
return;
|
||||
}
|
||||
|
||||
$this->dispatch($onBlockClickEventName, $block);
|
||||
}
|
||||
|
||||
public function render()
|
||||
{
|
||||
return view('livewire-charts::livewire-tree-map-chart');
|
||||
}
|
||||
}
|
||||
@@ -1,17 +0,0 @@
|
||||
<?php
|
||||
|
||||
namespace Asantibanez\LivewireCharts\Console;
|
||||
|
||||
use Illuminate\Console\Command;
|
||||
|
||||
class InstallCommand extends Command
|
||||
{
|
||||
protected $signature = 'livewire-charts:install';
|
||||
|
||||
protected $description = 'Installs Livewire Charts';
|
||||
|
||||
public function handle()
|
||||
{
|
||||
$this->call('vendor:publish', ['--tag' => 'livewire-charts:public']);
|
||||
}
|
||||
}
|
||||
@@ -6,8 +6,6 @@ use Asantibanez\LivewireCharts\Models\AreaChartModel;
|
||||
use Asantibanez\LivewireCharts\Models\ColumnChartModel;
|
||||
use Asantibanez\LivewireCharts\Models\LineChartModel;
|
||||
use Asantibanez\LivewireCharts\Models\PieChartModel;
|
||||
use Asantibanez\LivewireCharts\Models\RadarChartModel;
|
||||
use Asantibanez\LivewireCharts\Models\TreeMapChartModel;
|
||||
use Illuminate\Support\Facades\Facade;
|
||||
|
||||
/**
|
||||
@@ -19,8 +17,6 @@ use Illuminate\Support\Facades\Facade;
|
||||
* @method static ColumnChartModel multiColumnChartModel()
|
||||
* @method static AreaChartModel areaChartModel()
|
||||
* @method static PieChartModel pieChartModel()
|
||||
* @method static RadarChartModel radarChartModel()
|
||||
* @method static TreeMapChartModel treeMapChartModel()
|
||||
*/
|
||||
class LivewireCharts extends Facade
|
||||
{
|
||||
|
||||
@@ -8,8 +8,6 @@ use Asantibanez\LivewireCharts\Models\AreaChartModel;
|
||||
use Asantibanez\LivewireCharts\Models\ColumnChartModel;
|
||||
use Asantibanez\LivewireCharts\Models\LineChartModel;
|
||||
use Asantibanez\LivewireCharts\Models\PieChartModel;
|
||||
use Asantibanez\LivewireCharts\Models\RadarChartModel;
|
||||
use Asantibanez\LivewireCharts\Models\TreeMapChartModel;
|
||||
|
||||
class LivewireCharts
|
||||
{
|
||||
@@ -46,14 +44,4 @@ class LivewireCharts
|
||||
{
|
||||
return new PieChartModel;
|
||||
}
|
||||
|
||||
public function radarChartModel()
|
||||
{
|
||||
return new RadarChartModel();
|
||||
}
|
||||
|
||||
public function treeMapChartModel()
|
||||
{
|
||||
return new TreeMapChartModel();
|
||||
}
|
||||
}
|
||||
|
||||
@@ -6,9 +6,6 @@ use Asantibanez\LivewireCharts\Charts\LivewireAreaChart;
|
||||
use Asantibanez\LivewireCharts\Charts\LivewireColumnChart;
|
||||
use Asantibanez\LivewireCharts\Charts\LivewireLineChart;
|
||||
use Asantibanez\LivewireCharts\Charts\LivewirePieChart;
|
||||
use Asantibanez\LivewireCharts\Charts\LivewireRadarChart;
|
||||
use Asantibanez\LivewireCharts\Charts\LivewireTreeMapChart;
|
||||
use Asantibanez\LivewireCharts\Console\InstallCommand;
|
||||
use Illuminate\Support\Facades\Blade;
|
||||
use Illuminate\Support\ServiceProvider;
|
||||
use Livewire\Livewire;
|
||||
@@ -17,9 +14,7 @@ class LivewireChartsServiceProvider extends ServiceProvider
|
||||
{
|
||||
public function boot()
|
||||
{
|
||||
$this->registerCommands();
|
||||
|
||||
$this->registerViews();
|
||||
$this->registerViews();
|
||||
|
||||
$this->registerPublishables();
|
||||
|
||||
@@ -33,16 +28,6 @@ class LivewireChartsServiceProvider extends ServiceProvider
|
||||
$this->app->bind('livewirecharts', LivewireCharts::class);
|
||||
}
|
||||
|
||||
private function registerCommands()
|
||||
{
|
||||
if ($this->app->runningInConsole()) {
|
||||
$this->commands([
|
||||
InstallCommand::class,
|
||||
]);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
private function registerViews()
|
||||
{
|
||||
$this->loadViewsFrom(__DIR__.'/../resources/views', 'livewire-charts');
|
||||
@@ -71,8 +56,6 @@ class LivewireChartsServiceProvider extends ServiceProvider
|
||||
Livewire::component('livewire-column-chart', LivewireColumnChart::class);
|
||||
Livewire::component('livewire-pie-chart', LivewirePieChart::class);
|
||||
Livewire::component('livewire-area-chart', LivewireAreaChart::class);
|
||||
Livewire::component('livewire-radar-chart', LivewireRadarChart::class);
|
||||
Livewire::component('livewire-tree-map-chart', LivewireTreeMapChart::class);
|
||||
}
|
||||
|
||||
private function registerDirectives()
|
||||
|
||||
@@ -18,8 +18,6 @@ class BaseChartModel
|
||||
use HasSparkline;
|
||||
use HasGrid;
|
||||
use HasColors;
|
||||
use HasTheme;
|
||||
use HasJsonConfig;
|
||||
|
||||
public function __construct()
|
||||
{
|
||||
@@ -32,8 +30,6 @@ class BaseChartModel
|
||||
$this->initSparkline();
|
||||
$this->initGrid();
|
||||
$this->initColors();
|
||||
$this->initTheme();
|
||||
$this->initJsonConfig();
|
||||
}
|
||||
|
||||
public function reactiveKey()
|
||||
@@ -52,9 +48,7 @@ class BaseChartModel
|
||||
$this->dataLabelsToArray(),
|
||||
$this->sparklineToArray(),
|
||||
$this->gridToArray(),
|
||||
$this->colorsToArray(),
|
||||
$this->themeToArray(),
|
||||
$this->jsonConfigToArray(),
|
||||
$this->colorsToArray()
|
||||
);
|
||||
}
|
||||
|
||||
@@ -69,7 +63,5 @@ class BaseChartModel
|
||||
$this->sparklineFromArray($array);
|
||||
$this->gridFromArray($array);
|
||||
$this->colorsFromArray($array);
|
||||
$this->themeFromArray($array);
|
||||
$this->jsonConfigFromArray($array);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -11,19 +11,19 @@ namespace Asantibanez\LivewireCharts\Models;
|
||||
*/
|
||||
class ColumnChartModel extends BaseChartModel
|
||||
{
|
||||
private $opacity;
|
||||
public $opacity;
|
||||
|
||||
private $columnWidth;
|
||||
public $columnWidth;
|
||||
|
||||
private $horizontal;
|
||||
public $horizontal;
|
||||
|
||||
private $isMultiColumn;
|
||||
public $isMultiColumn;
|
||||
|
||||
private $isStacked;
|
||||
public $isStacked;
|
||||
|
||||
private $onColumnClickEventName;
|
||||
public $onColumnClickEventName;
|
||||
|
||||
private $data;
|
||||
public $data;
|
||||
|
||||
public function __construct()
|
||||
{
|
||||
@@ -65,16 +65,9 @@ class ColumnChartModel extends BaseChartModel
|
||||
return $this;
|
||||
}
|
||||
|
||||
public function setHorizontal()
|
||||
public function setHorizontal($value)
|
||||
{
|
||||
$this->horizontal = true;
|
||||
|
||||
return $this;
|
||||
}
|
||||
|
||||
public function setVertical()
|
||||
{
|
||||
$this->horizontal = false;
|
||||
$this->horizontal = $value;
|
||||
|
||||
return $this;
|
||||
}
|
||||
|
||||
@@ -8,8 +8,6 @@ trait HasColors
|
||||
{
|
||||
private $colors;
|
||||
|
||||
private $enableShades;
|
||||
|
||||
public function setColors($colors)
|
||||
{
|
||||
$this->colors = $colors;
|
||||
@@ -24,25 +22,9 @@ trait HasColors
|
||||
return $this;
|
||||
}
|
||||
|
||||
public function enableShades()
|
||||
{
|
||||
$this->enableShades = true;
|
||||
|
||||
return $this;
|
||||
}
|
||||
|
||||
public function disableShades()
|
||||
{
|
||||
$this->enableShades = false;
|
||||
|
||||
return $this;
|
||||
}
|
||||
|
||||
protected function initColors()
|
||||
{
|
||||
$this->colors = $this->defaultColors();
|
||||
|
||||
$this->enableShades = true;
|
||||
}
|
||||
|
||||
private function defaultColors()
|
||||
@@ -53,15 +35,12 @@ trait HasColors
|
||||
protected function colorsFromArray($array)
|
||||
{
|
||||
$this->colors = data_get($array, 'colors', $this->defaultColors());
|
||||
|
||||
$this->enableShades = data_get($array, 'enableShades', true);
|
||||
}
|
||||
|
||||
protected function colorsToArray()
|
||||
{
|
||||
return [
|
||||
'colors' => $this->colors,
|
||||
'enableShades' => $this->enableShades,
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,39 +0,0 @@
|
||||
<?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,
|
||||
];
|
||||
}
|
||||
}
|
||||
@@ -1,125 +0,0 @@
|
||||
<?php
|
||||
|
||||
|
||||
namespace Asantibanez\LivewireCharts\Models;
|
||||
|
||||
|
||||
trait HasTheme
|
||||
{
|
||||
private $theme;
|
||||
private $mode;
|
||||
private $palette;
|
||||
|
||||
/**
|
||||
* Initialize
|
||||
*/
|
||||
public function initTheme()
|
||||
{
|
||||
$this->theme = $this->defaultTheme();
|
||||
}
|
||||
|
||||
/**
|
||||
* set default theme
|
||||
*
|
||||
* @return array $theme
|
||||
*/
|
||||
private function defaultTheme()
|
||||
{
|
||||
return [
|
||||
'mode' => 'light',
|
||||
'palette' => 'palette1'
|
||||
];
|
||||
}
|
||||
|
||||
/**
|
||||
* set theme mode
|
||||
*
|
||||
* @param string $mode
|
||||
*
|
||||
* @return $this
|
||||
*/
|
||||
public function setThemeMode(string $mode)
|
||||
{
|
||||
data_set($this->theme, 'mode', $mode);
|
||||
|
||||
return $this;
|
||||
}
|
||||
|
||||
/**
|
||||
* set theme mode to dark theme
|
||||
*
|
||||
* @return $this
|
||||
*/
|
||||
public function darkMode()
|
||||
{
|
||||
data_set($this->theme, 'mode', 'dark');
|
||||
|
||||
return $this;
|
||||
}
|
||||
|
||||
/**
|
||||
* set theme mode to light theme
|
||||
*
|
||||
* @return $this
|
||||
*/
|
||||
public function lightMode()
|
||||
{
|
||||
data_set($this->theme, 'mode', 'light');
|
||||
|
||||
return $this;
|
||||
}
|
||||
|
||||
/**
|
||||
* set the dark mode option to on or off
|
||||
*
|
||||
* @param bool $status = true
|
||||
*
|
||||
* @return $this
|
||||
*/
|
||||
public function setDarkMode(bool $status = true)
|
||||
{
|
||||
data_set($this->theme, 'mode', $status ? 'dark' : 'light');
|
||||
|
||||
return $this;
|
||||
}
|
||||
|
||||
/**
|
||||
* set theme pallete
|
||||
*
|
||||
* @param string $pallete
|
||||
*
|
||||
* @return $this
|
||||
*/
|
||||
public function setThemePalette(string $palette)
|
||||
{
|
||||
data_set($this->theme, 'palette', $palette);
|
||||
|
||||
return $this;
|
||||
}
|
||||
|
||||
/**
|
||||
* convert the theme to array
|
||||
*
|
||||
* @param string $mode
|
||||
*
|
||||
* @return $this
|
||||
*/
|
||||
protected function themeToArray()
|
||||
{
|
||||
return [
|
||||
'theme' => $this->theme,
|
||||
];
|
||||
}
|
||||
|
||||
/**
|
||||
* set theme from array
|
||||
*
|
||||
* @param string $mode
|
||||
*
|
||||
* @return $this
|
||||
*/
|
||||
protected function themeFromArray($array)
|
||||
{
|
||||
$this->theme = data_get($array, 'theme', $this->defaultTheme());
|
||||
}
|
||||
}
|
||||
@@ -9,13 +9,13 @@ namespace Asantibanez\LivewireCharts\Models;
|
||||
*/
|
||||
class PieChartModel extends BaseChartModel
|
||||
{
|
||||
private $onSliceClickEventName;
|
||||
public $onSliceClickEventName;
|
||||
|
||||
private $opacity;
|
||||
public $opacity;
|
||||
|
||||
private $type;
|
||||
public $type;
|
||||
|
||||
private $data;
|
||||
public $data;
|
||||
|
||||
public function __construct()
|
||||
{
|
||||
@@ -44,16 +44,6 @@ class PieChartModel extends BaseChartModel
|
||||
return $this;
|
||||
}
|
||||
|
||||
public function asPie()
|
||||
{
|
||||
return $this->setType('pie');
|
||||
}
|
||||
|
||||
public function asDonut()
|
||||
{
|
||||
return $this->setType('donut');
|
||||
}
|
||||
|
||||
public function withOnSliceClickEvent($onSliceClickEventName)
|
||||
{
|
||||
$this->onSliceClickEventName = $onSliceClickEventName;
|
||||
|
||||
@@ -1,95 +0,0 @@
|
||||
<?php
|
||||
|
||||
|
||||
namespace Asantibanez\LivewireCharts\Models;
|
||||
|
||||
/**
|
||||
* Class ColumnChartModel
|
||||
* @package Asantibanez\LivewireCharts\Models
|
||||
* @property boolean $isMultiColumn
|
||||
* @property boolean $isStacked
|
||||
*/
|
||||
class RadarChartModel extends BaseChartModel
|
||||
{
|
||||
public $opacity;
|
||||
|
||||
public $colors;
|
||||
|
||||
public $onPointClickEventName;
|
||||
|
||||
public $data;
|
||||
|
||||
public function __construct()
|
||||
{
|
||||
parent::__construct();
|
||||
|
||||
$this->onPointClickEventName = null;
|
||||
|
||||
$this->opacity = 0.5;
|
||||
|
||||
$this->colors = ['#2E93fA', '#66DA26', '#546E7A', '#E91E63', '#FF9800'];
|
||||
|
||||
$this->data = collect();
|
||||
}
|
||||
|
||||
public function setColors($colors)
|
||||
{
|
||||
$this->colors = $colors;
|
||||
|
||||
return $this;
|
||||
}
|
||||
|
||||
public function setOpacity($opacity)
|
||||
{
|
||||
$this->opacity = $opacity;
|
||||
|
||||
return $this;
|
||||
}
|
||||
|
||||
public function withOnPointClickEvent($onPointClickEventName)
|
||||
{
|
||||
$this->onPointClickEventName = $onPointClickEventName;
|
||||
|
||||
return $this;
|
||||
}
|
||||
|
||||
|
||||
public function addSeries($seriesName, $title, $value, $extras = [])
|
||||
{
|
||||
$series = $this->data->get($seriesName, collect());
|
||||
|
||||
$series->push([
|
||||
'seriesName' => $seriesName,
|
||||
'title' => $title,
|
||||
'value' => $value,
|
||||
'extras' => $extras,
|
||||
]);
|
||||
|
||||
$this->data->put($seriesName, $series);
|
||||
|
||||
return $this;
|
||||
}
|
||||
|
||||
public function toArray()
|
||||
{
|
||||
return array_merge(parent::toArray(), [
|
||||
'onPointClickEventName' => $this->onPointClickEventName,
|
||||
'opacity' => $this->opacity,
|
||||
'colors' => $this->colors,
|
||||
'data' => $this->data->toArray(),
|
||||
]);
|
||||
}
|
||||
|
||||
public function fromArray($array)
|
||||
{
|
||||
parent::fromArray($array);
|
||||
|
||||
$this->onPointClickEventName = data_get($array, 'onPointClickEventName', null);
|
||||
|
||||
$this->opacity = data_get($array, 'opacity', 0.5);
|
||||
|
||||
$this->colors = data_get($array, 'color', '#90cdf4');
|
||||
|
||||
$this->data = collect(data_get($array, 'data', []));
|
||||
}
|
||||
}
|
||||
@@ -1,84 +0,0 @@
|
||||
<?php
|
||||
|
||||
|
||||
namespace Asantibanez\LivewireCharts\Models;
|
||||
|
||||
/**
|
||||
* Class TreeMapChartModel
|
||||
* @package Asantibanez\LivewireCharts\Models
|
||||
*/
|
||||
class TreeMapChartModel extends BaseChartModel
|
||||
{
|
||||
use HasTitle;
|
||||
use HasColors;
|
||||
|
||||
public $data;
|
||||
public $distributed;
|
||||
public $onBlockClickEventName;
|
||||
|
||||
public function __construct()
|
||||
{
|
||||
parent::__construct();
|
||||
|
||||
$this->data = collect();
|
||||
|
||||
$this->distributed = false;
|
||||
|
||||
$this->setColors(['#2E93fA']);
|
||||
}
|
||||
|
||||
public function setDistributed($distributed)
|
||||
{
|
||||
$this->distributed = $distributed;
|
||||
|
||||
return $this;
|
||||
}
|
||||
|
||||
public function addBlock($title, $value, $extras = [])
|
||||
{
|
||||
return $this->addSeriesBlock($this->title, $title, $value, $extras);
|
||||
}
|
||||
|
||||
public function addSeriesBlock($seriesName, $title, $value, $extras = [])
|
||||
{
|
||||
$series = $this->data->get($seriesName, collect());
|
||||
|
||||
$series->push([
|
||||
'seriesName' => $seriesName,
|
||||
'title' => $title,
|
||||
'value' => $value,
|
||||
'extras' => $extras,
|
||||
]);
|
||||
|
||||
$this->data->put($seriesName, $series);
|
||||
|
||||
return $this;
|
||||
}
|
||||
|
||||
public function withOnBlockClickEvent($onBlockClickEventName)
|
||||
{
|
||||
$this->onBlockClickEventName = $onBlockClickEventName;
|
||||
|
||||
return $this;
|
||||
}
|
||||
|
||||
public function toArray()
|
||||
{
|
||||
return array_merge(parent::toArray(), [
|
||||
'data' => $this->data->toArray(),
|
||||
'distributed' => $this->distributed,
|
||||
'onBlockClickEventName' => $this->onBlockClickEventName,
|
||||
]);
|
||||
}
|
||||
|
||||
public function fromArray($array)
|
||||
{
|
||||
parent::fromArray($array);
|
||||
|
||||
$this->data = collect(data_get($array, 'data', []));
|
||||
|
||||
$this->distributed = data_get($array, 'distributed', false);
|
||||
|
||||
$this->onBlockClickEventName = data_get($array, 'onBlockClickEventName', null);
|
||||
}
|
||||
}
|
||||
@@ -3,12 +3,12 @@
|
||||
namespace Asantibanez\LivewireCharts\Tests;
|
||||
|
||||
use Asantibanez\LivewireCharts\Charts\LivewireAreaChart;
|
||||
use Livewire\Features\SupportTesting\Testable;
|
||||
use Livewire\Livewire;
|
||||
use Livewire\Testing\TestableLivewire;
|
||||
|
||||
class LivewireAreaChartTest extends TestCase
|
||||
{
|
||||
private function buildComponent() : Testable
|
||||
private function buildComponent() : TestableLivewire
|
||||
{
|
||||
return Livewire::test(LivewireAreaChart::class);
|
||||
}
|
||||
|
||||
@@ -3,12 +3,12 @@
|
||||
namespace Asantibanez\LivewireCharts\Tests;
|
||||
|
||||
use Asantibanez\LivewireCharts\Charts\LivewireColumnChart;
|
||||
use Livewire\Features\SupportTesting\Testable;
|
||||
use Livewire\Livewire;
|
||||
use Livewire\Testing\TestableLivewire;
|
||||
|
||||
class LivewireColumnChartTest extends TestCase
|
||||
{
|
||||
private function buildComponent() : Testable
|
||||
private function buildComponent() : TestableLivewire
|
||||
{
|
||||
return Livewire::test(LivewireColumnChart::class);
|
||||
}
|
||||
@@ -22,23 +22,4 @@ class LivewireColumnChartTest extends TestCase
|
||||
//Assert
|
||||
$this->assertNotNull($component);
|
||||
}
|
||||
|
||||
/** @test */
|
||||
public function should_emit_event_if_present()
|
||||
{
|
||||
//Arrange
|
||||
$component = $this->buildComponent();
|
||||
|
||||
$columnChartModel = $component->columnChartModel;
|
||||
|
||||
data_set($columnChartModel, 'onColumnClickEventName', 'custom-event');
|
||||
|
||||
$component->set('columnChartModel', $columnChartModel);
|
||||
|
||||
//Act
|
||||
$component->runAction('onColumnClick', []);
|
||||
|
||||
//Assert
|
||||
$component->assertDispatched('custom-event');
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3,12 +3,12 @@
|
||||
namespace Asantibanez\LivewireCharts\Tests;
|
||||
|
||||
use Asantibanez\LivewireCharts\Charts\LivewireLineChart;
|
||||
use Livewire\Features\SupportTesting\Testable;
|
||||
use Livewire\Livewire;
|
||||
use Livewire\Testing\TestableLivewire;
|
||||
|
||||
class LivewireLineChartTest extends TestCase
|
||||
{
|
||||
private function buildComponent() : Testable
|
||||
private function buildComponent() : TestableLivewire
|
||||
{
|
||||
return Livewire::test(LivewireLineChart::class);
|
||||
}
|
||||
|
||||
@@ -3,12 +3,12 @@
|
||||
namespace Asantibanez\LivewireCharts\Tests;
|
||||
|
||||
use Asantibanez\LivewireCharts\Charts\LivewirePieChart;
|
||||
use Livewire\Features\SupportTesting\Testable;
|
||||
use Livewire\Livewire;
|
||||
use Livewire\Testing\TestableLivewire;
|
||||
|
||||
class LivewirePieChartTest extends TestCase
|
||||
{
|
||||
private function buildComponent() : Testable
|
||||
private function buildComponent() : TestableLivewire
|
||||
{
|
||||
return Livewire::test(LivewirePieChart::class);
|
||||
}
|
||||
@@ -22,23 +22,4 @@ class LivewirePieChartTest extends TestCase
|
||||
//Assert
|
||||
$this->assertNotNull($component);
|
||||
}
|
||||
|
||||
/** @test */
|
||||
public function should_emit_event_if_present()
|
||||
{
|
||||
//Arrange
|
||||
$component = $this->buildComponent();
|
||||
|
||||
$pieChartModel = $component->pieChartModel;
|
||||
|
||||
data_set($pieChartModel, 'onSliceClickEventName', 'custom-event');
|
||||
|
||||
$component->set('pieChartModel', $pieChartModel);
|
||||
|
||||
//Act
|
||||
$component->runAction('onSliceClick', []);
|
||||
|
||||
//Assert
|
||||
$component->assertDispatched('custom-event');
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,25 +0,0 @@
|
||||
<?php
|
||||
|
||||
namespace Asantibanez\LivewireCharts\Tests;
|
||||
|
||||
use Asantibanez\LivewireCharts\Charts\LivewireRadarChart;
|
||||
use Livewire\Features\SupportTesting\Testable;
|
||||
use Livewire\Livewire;
|
||||
|
||||
class LivewireRadarChartTest extends TestCase
|
||||
{
|
||||
private function buildComponent() : Testable
|
||||
{
|
||||
return Livewire::test(LivewireRadarChart::class);
|
||||
}
|
||||
|
||||
/** @test */
|
||||
public function can_build_component()
|
||||
{
|
||||
//Act
|
||||
$component = $this->buildComponent();
|
||||
|
||||
//Assert
|
||||
$this->assertNotNull($component);
|
||||
}
|
||||
}
|
||||
@@ -1,44 +0,0 @@
|
||||
<?php
|
||||
|
||||
namespace Asantibanez\LivewireCharts\Tests;
|
||||
|
||||
use Asantibanez\LivewireCharts\Charts\LivewireTreeMapChart;
|
||||
use Livewire\Features\SupportTesting\Testable;
|
||||
use Livewire\Livewire;
|
||||
|
||||
class LivewireTreeMapChartTest extends TestCase
|
||||
{
|
||||
private function buildComponent() : Testable
|
||||
{
|
||||
return Livewire::test(LivewireTreeMapChart::class);
|
||||
}
|
||||
|
||||
/** @test */
|
||||
public function can_build_component()
|
||||
{
|
||||
//Act
|
||||
$component = $this->buildComponent();
|
||||
|
||||
//Assert
|
||||
$this->assertNotNull($component);
|
||||
}
|
||||
|
||||
/** @test */
|
||||
public function should_emit_event_if_present()
|
||||
{
|
||||
//Arrange
|
||||
$component = $this->buildComponent();
|
||||
|
||||
$treeMapChartModel = $component->treeMapChartModel;
|
||||
|
||||
data_set($treeMapChartModel, 'onBlockClickEventName', 'custom-event');
|
||||
|
||||
$component->set('treeMapChartModel', $treeMapChartModel);
|
||||
|
||||
//Act
|
||||
$component->runAction('onBlockClick', []);
|
||||
|
||||
//Assert
|
||||
$component->assertDispatched('custom-event');
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user