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

Add RadarChart

Browse Source
This commit is contained in:
Alex
2021-10-15 19:23:27 +02:00
parent 582ad340dd
commit 821ac7a454
7 changed files with 258 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
README.md
View File

@@ -44,12 +44,14 @@ 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)
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.
For example, to render a column chart, we can create an instance of `ColumnChartModel` and add some data to it
```php
@@ -97,6 +99,7 @@ LivewireCharts::columnChartModel();
LivewireCharts::multiColumnChartModel();
LivewireCharts::pieChartModel();
LivewireCharts::areaChartModel();
LivewireCharts::radarChartModel();
```
## Enabling Interactions
@@ -157,7 +160,7 @@ 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 |
|--------|-------------|
@@ -174,7 +177,7 @@ for each type of chart.
| sparklined() | Enables Apex Charts sparkline feature |
| setSparklineEnabled(boolean $isEnabled) | Enables/Disables Apex Charts sparkline feature |
#### LivewireLineChart
### LivewireLineChart
| Method | Description |
|--------|-------------|
@@ -185,7 +188,7 @@ 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 |
|--------|-------------|
@@ -199,7 +202,7 @@ for each type of chart.
| 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 |
|--------|-------------|
@@ -207,7 +210,7 @@ for each type of chart.
| 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 |
#### LivewireAreaChart
### LivewireAreaChart
| Method | Description |
|--------|-------------|
@@ -216,6 +219,13 @@ 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 |
## Advanced Usage - Integrating Scripts
The directive `@livewireChartsScripts` adds a `script` tag that includes `public/vendor/livewire-charts/app.js`.

102
resources/views/livewire-radar-chart.blade.php Normal file
View File

@@ -0,0 +1,102 @@
<div
style="width: 100%; height: 100%;"
x-data="{ ...radarChart() }"
x-init="drawChart(@this)"
>
<div wire:ignore x-ref="container"></div>
<script>
function radarChart() {
return {
chart: null,
drawChart(component) {
if (this.chart) {
this.chart.destroy()
}
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 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: component.get('radarChartModel.title'),
},
fill: {
opacity: component.get('radarChartModel.opacity'),
},
colors: colors,
markers: {
size: 4
},
};
this.chart = new ApexCharts(this.$refs.container, options);
this.chart.render();
}
}
}
</script>
</div>

36
src/Charts/LivewireRadarChart.php Normal file
View File

@@ -0,0 +1,36 @@
<?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->emit($onPointClickEventName, $point);
}
public function render()
{
return view('livewire-charts::livewire-radar-chart');
}
}

2
src/Facades/LivewireCharts.php
View File

@@ -6,6 +6,7 @@ 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 Illuminate\Support\Facades\Facade;
/**
@@ -17,6 +18,7 @@ use Illuminate\Support\Facades\Facade;
* @method static ColumnChartModel multiColumnChartModel()
* @method static AreaChartModel areaChartModel()
* @method static PieChartModel pieChartModel()
* @method static RadarChartModel radarChartModel()
*/
class LivewireCharts extends Facade
{

6
src/LivewireCharts.php
View File

@@ -8,6 +8,7 @@ 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;
class LivewireCharts
{
@@ -44,4 +45,9 @@ class LivewireCharts
{
return new PieChartModel;
}
public function radarChartModel()
{
return new RadarChartModel();
}
}

2
src/LivewireChartsServiceProvider.php
View File

@@ -6,6 +6,7 @@ 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 Illuminate\Support\Facades\Blade;
use Illuminate\Support\ServiceProvider;
use Livewire\Livewire;
@@ -56,6 +57,7 @@ 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);
}
private function registerDirectives()

95
src/Models/RadarChartModel.php Normal file
View File

@@ -0,0 +1,95 @@
<?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', []));
}
}