Skip to content

Commit 35324ea

Browse files
asantibanezasantibanez
committed
Added Radial chart
1 parent c30c408 commit 35324ea

12 files changed

+273
-3
lines changed

‎CHANGELOG.md

+10
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,15 @@
11
# Changelog
22

3+
## 4.1.0 - 2024-08-22
4+
- Added Radial chart
5+
6+
## 4.0.0 - 2024-08-22
7+
- Added Laravel 11 support
8+
9+
## 3.1.0 - 2023-11-07
10+
- Added missing jsonConfig (thanks to @stijnvanouplines)
11+
- Changed 'emit' functions in Area,Line, and Radar chart to 'dispatch' (thanks to @redsquirrelstudio)
12+
313
## 3.0.0 - 2023-07-25
414
- Added Livewire v3 support
515
- Added ability to set chart theme (thanks to @syntaxlexx)

‎README.md

+11
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,7 @@ Livewire Charts supports out of the box the following types of charts
4747
- Area Chart (`LivewireAreaChart` component)
4848
- Radar Chart (`LivewireRadarChart` component)
4949
- Tree Map Chart (`LivewireTreeMapChart` component)
50+
- Radial Chart (`LivewireRadialChart` component)
5051

5152
Each one comes with its own "model" class that allows you to define the chart's data and render behavior.
5253
- `LivewireLineChart` uses `LineChartModel` to set up data points, markers, events and other ui customizations.
@@ -55,6 +56,7 @@ Each one comes with its own "model" class that allows you to define the chart's
5556
- `LivewireAreaChart` uses `AreaChartModel` to set up data points, events and other ui customizations.
5657
- `LivewireRadarChart` uses `RadarChartModel` to set up data points, events and other ui customizations.
5758
- `LivewireTreeMapChart` uses `TreeMapChartModel` to set up data blocks, events and other ui customizations.
59+
- `LivewireRadialChart` uses `RadialChartModel` to set up data bars, events and other ui customizations.
5860

5961
For example, to render a column chart, we can create an instance of `ColumnChartModel` and add some data to it
6062
```php
@@ -106,6 +108,7 @@ LivewireCharts::pieChartModel();
106108
LivewireCharts::areaChartModel();
107109
LivewireCharts::radarChartModel();
108110
LivewireCharts::treeMapChartModel();
111+
LivewireCharts::radialChartModel();
109112
```
110113

111114
## Enabling Interactions
@@ -247,6 +250,14 @@ for each type of chart.
247250
| withOnBlockClickEvent(string $eventName) | Event Name that will be fired when a block of the chart is clicked |
248251
| setDistributed(bool $distributed) | Set whether the chart uses distribution or not |
249252

253+
### LivewireRadialChart
254+
255+
| Method | Description |
256+
|--------------------------------------------------------------------------------|------------------------------------------------------------------|
257+
| addBar(string $title, double $value, string $color = null, array $extras = []) | Adds a bar to the default series |
258+
| withOnBarClickEvent(string $eventName) | Event Name that will be fired when a bar of the chart is clicked |
259+
| showTotal() | Show the total percetage to the graph |
260+
| hideTotal() | Hides the total percetage to the graph |
250261

251262
## Advanced Usage - Integrating Scripts
252263

‎public/app.js

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎resources/js/app.js

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
import ApexCharts from 'apexcharts'
22
import areaChart from "./areaChart"
33
import columnChart from "./columnChart"
4-
import multiColumnChart from "./multiColumnChart";
4+
import multiColumnChart from "./multiColumnChart"
55
import lineChart from "./lineChart"
66
import multiLineChart from "./multiLineChart"
77
import pieChart from "./pieChart"
88
import radarChart from "./radarChart"
99
import treeMapChart from "./treeMapChart"
10+
import radialChart from "./radialChart"
1011

1112
window.ApexCharts = ApexCharts
1213
window.livewireChartsAreaChart = areaChart
@@ -17,3 +18,4 @@ window.livewireChartsPieChart = pieChart
1718
window.livewireChartsMultiColumnChart = multiColumnChart
1819
window.livewireChartsRadarChart = radarChart
1920
window.livewireChartsTreeMapChart = treeMapChart
21+
window.livewireChartsRadialChart = radialChart

‎resources/js/radialChart.js

+74
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
import { mergedOptionsWithJsonConfig } from "./helpers";
2+
3+
const radialChart = () => {
4+
return {
5+
chart: null,
6+
7+
init() {
8+
setTimeout(() => {
9+
this.drawChart(this.$wire);
10+
}, 0);
11+
},
12+
13+
drawChart(component) {
14+
if (this.chart) {
15+
this.chart.destroy();
16+
}
17+
18+
const data = component.get("radialChartModel.data");
19+
const showTotal = component.get("radialChartModel.showTotal");
20+
const onBarClickEventName = component.get(
21+
"radialChartModel.onBarClickEventName"
22+
);
23+
const jsonConfig = component.get("radialChartModel.jsonConfig");
24+
25+
const colors = component.get("radialChartModel.colors");
26+
27+
const options = {
28+
series: data.map((item) => item.value),
29+
labels: data.map((item) => item.title),
30+
colors: Object.values(colors).filter(Boolean),
31+
chart: {
32+
height: "100%",
33+
type: "radialBar",
34+
events: {
35+
dataPointSelection: function (
36+
event,
37+
chartContext,
38+
payload
39+
) {
40+
console.log(payload);
41+
42+
if (!onBarClickEventName) {
43+
return;
44+
}
45+
46+
const bar = data[payload.dataPointIndex];
47+
console.log(bar);
48+
49+
component.call("onBarClick", bar);
50+
},
51+
},
52+
},
53+
plotOptions: {
54+
radialBar: {
55+
dataLabels: {
56+
total: {
57+
show: showTotal,
58+
},
59+
},
60+
},
61+
},
62+
};
63+
64+
this.chart = new ApexCharts(
65+
this.$refs.container,
66+
mergedOptionsWithJsonConfig(options, jsonConfig)
67+
);
68+
69+
this.chart.render();
70+
},
71+
};
72+
};
73+
74+
export default radialChart;

‎resources/views/livewire-radial-chart.blade.php

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<div
2+
style="width: 100%; height: 100%;"
3+
x-data="{ ...livewireChartsRadialChart() }"
4+
x-init="init()"
5+
>
6+
<div wire:ignore x-ref="container"></div>
7+
</div>

‎src/Charts/LivewireRadialChart.php

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<?php
2+
3+
namespace Asantibanez\LivewireCharts\Charts;
4+
5+
use Asantibanez\LivewireCharts\Models\RadialChartModel;
6+
use Livewire\Component;
7+
8+
/**
9+
* Class LivewireRadialChart
10+
* @package Asantibanez\LivewireCharts\Charts
11+
*/
12+
class LivewireRadialChart extends Component
13+
{
14+
public $radialChartModel;
15+
16+
public function mount(RadialChartModel $radialChartModel)
17+
{
18+
$this->radialChartModel = $radialChartModel->toArray();
19+
}
20+
21+
public function onBarClick($bar): void
22+
{
23+
$onBarClickEventName = data_get($this->radialChartModel, 'onBarClickEventName');
24+
25+
if ($onBarClickEventName === null) {
26+
return;
27+
}
28+
29+
$this->dispatch($onBarClickEventName, $bar);
30+
}
31+
32+
public function render()
33+
{
34+
return view('livewire-charts::livewire-radial-chart');
35+
}
36+
}

‎src/Facades/LivewireCharts.php

+2
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
use Asantibanez\LivewireCharts\Models\LineChartModel;
88
use Asantibanez\LivewireCharts\Models\PieChartModel;
99
use Asantibanez\LivewireCharts\Models\RadarChartModel;
10+
use Asantibanez\LivewireCharts\Models\RadialChartModel;
1011
use Asantibanez\LivewireCharts\Models\TreeMapChartModel;
1112
use Illuminate\Support\Facades\Facade;
1213

@@ -21,6 +22,7 @@
2122
* @method static PieChartModel pieChartModel()
2223
* @method static RadarChartModel radarChartModel()
2324
* @method static TreeMapChartModel treeMapChartModel()
25+
* @method static RadialChartModel radialChartModel()
2426
*/
2527
class LivewireCharts extends Facade
2628
{

‎src/LivewireCharts.php

+7-1
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
use Asantibanez\LivewireCharts\Models\LineChartModel;
1010
use Asantibanez\LivewireCharts\Models\PieChartModel;
1111
use Asantibanez\LivewireCharts\Models\RadarChartModel;
12+
use Asantibanez\LivewireCharts\Models\RadialChartModel;
1213
use Asantibanez\LivewireCharts\Models\TreeMapChartModel;
1314

1415
class LivewireCharts
@@ -52,8 +53,13 @@ public function radarChartModel()
5253
return new RadarChartModel();
5354
}
5455

55-
public function treeMapChartModel()
56+
public function treeMapChartModel(): TreeMapChartModel
5657
{
5758
return new TreeMapChartModel();
5859
}
60+
61+
public function radialChartModel(): RadialChartModel
62+
{
63+
return new RadialChartModel();
64+
}
5965
}

‎src/LivewireChartsServiceProvider.php

+2
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
use Asantibanez\LivewireCharts\Charts\LivewireLineChart;
88
use Asantibanez\LivewireCharts\Charts\LivewirePieChart;
99
use Asantibanez\LivewireCharts\Charts\LivewireRadarChart;
10+
use Asantibanez\LivewireCharts\Charts\LivewireRadialChart;
1011
use Asantibanez\LivewireCharts\Charts\LivewireTreeMapChart;
1112
use Asantibanez\LivewireCharts\Console\InstallCommand;
1213
use Illuminate\Support\Facades\Blade;
@@ -73,6 +74,7 @@ private function registerComponents()
7374
Livewire::component('livewire-area-chart', LivewireAreaChart::class);
7475
Livewire::component('livewire-radar-chart', LivewireRadarChart::class);
7576
Livewire::component('livewire-tree-map-chart', LivewireTreeMapChart::class);
77+
Livewire::component('livewire-radial-chart', LivewireRadialChart::class);
7678
}
7779

7880
private function registerDirectives()

‎src/Models/RadialChartModel.php

+76
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
<?php
2+
3+
4+
namespace Asantibanez\LivewireCharts\Models;
5+
6+
/**
7+
* Class RadialChartModel
8+
* @package Asantibanez\LivewireCharts\Models
9+
*/
10+
class RadialChartModel extends BaseChartModel
11+
{
12+
public $data;
13+
public $showTotal;
14+
public $onBarClickEventName;
15+
16+
public function __construct()
17+
{
18+
parent::__construct();
19+
20+
$this->data = collect();
21+
22+
$this->showTotal = true;
23+
}
24+
25+
public function showTotal(): self
26+
{
27+
$this->showTotal = true;
28+
return $this;
29+
}
30+
31+
public function hideTotal(): self
32+
{
33+
$this->showTotal = false;
34+
return $this;
35+
}
36+
37+
public function addBar($title, $value, $color = null, $extras = []): self
38+
{
39+
$this->data->push([
40+
'title' => $title,
41+
'value' => $value,
42+
'extras' => $extras,
43+
]);
44+
45+
$this->addColor($color);
46+
47+
return $this;
48+
}
49+
50+
public function withOnBarClickEvent($onBarClickEvent): self
51+
{
52+
$this->onBarClickEventName = $onBarClickEvent;
53+
54+
return $this;
55+
}
56+
57+
public function toArray()
58+
{
59+
return array_merge(parent::toArray(), [
60+
'data' => $this->data->toArray(),
61+
'showTotal' => $this->showTotal,
62+
'onBarClickEventName' => $this->onBarClickEventName,
63+
]);
64+
}
65+
66+
public function fromArray($array)
67+
{
68+
parent::fromArray($array);
69+
70+
$this->data = collect(data_get($array, 'data', []));
71+
72+
$this->showTotal = data_get($array, 'showTotal', true);
73+
74+
$this->onBarClickEventName = data_get($array, 'onBarClickEventName', null);
75+
}
76+
}

‎tests/LivewireRadialChartTest.php

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<?php
2+
3+
4+
use Asantibanez\LivewireCharts\Charts\LivewireRadialChart;
5+
use Asantibanez\LivewireCharts\Tests\TestCase;
6+
use Livewire\Features\SupportTesting\Testable;
7+
use Livewire\Livewire;
8+
9+
class LivewireRadialChartTest extends TestCase
10+
{
11+
private function buildComponent() : Testable
12+
{
13+
return Livewire::test(LivewireRadialChart::class);
14+
}
15+
16+
/** @test */
17+
public function can_build_component()
18+
{
19+
//Act
20+
$component = $this->buildComponent();
21+
22+
//Assert
23+
$this->assertNotNull($component);
24+
}
25+
26+
/** @test */
27+
public function should_emit_event_if_present()
28+
{
29+
//Arrange
30+
$component = $this->buildComponent();
31+
32+
$radialChartModel = $component->radialChartModel;
33+
34+
data_set($radialChartModel, 'onBarClickEventName', 'custom-event');
35+
36+
$component->set('radialChartModel', $radialChartModel);
37+
38+
//Act
39+
$component->runAction('onBarClick', []);
40+
41+
//Assert
42+
$component->assertDispatched('custom-event');
43+
}
44+
}

0 commit comments

Comments
 (0)