Skip to content

Commit

Permalink
Added Radial chart
Browse files Browse the repository at this point in the history
  • Loading branch information
asantibanez committed Aug 22, 2024
1 parent c30c408 commit 8bf47f2
Show file tree
Hide file tree
Showing 11 changed files with 263 additions and 3 deletions.
11 changes: 11 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@ Livewire Charts supports out of the box the following types of charts
- Area Chart (`LivewireAreaChart` component)
- Radar Chart (`LivewireRadarChart` component)
- Tree Map Chart (`LivewireTreeMapChart` component)
- Radial Chart (`LivewireRadialChart` 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.
Expand All @@ -55,6 +56,7 @@ Each one comes with its own "model" class that allows you to define the chart's
- `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.
- `LivewireRadialChart` uses `RadialChartModel` to set up data bars, 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
Expand Down Expand Up @@ -106,6 +108,7 @@ LivewireCharts::pieChartModel();
LivewireCharts::areaChartModel();
LivewireCharts::radarChartModel();
LivewireCharts::treeMapChartModel();
LivewireCharts::radialChartModel();
```

## Enabling Interactions
Expand Down Expand Up @@ -247,6 +250,14 @@ for each type of chart.
| 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 |

### LivewireRadialChart

| Method | Description |
|--------------------------------------------------------------------------------|------------------------------------------------------------------|
| addBar(string $title, double $value, string $color = null, array $extras = []) | Adds a bar to the default series |
| withOnBarClickEvent(string $eventName) | Event Name that will be fired when a bar of the chart is clicked |
| showTotal() | Show the total percetage to the graph |
| hideTotal() | Hides the total percetage to the graph |

## Advanced Usage - Integrating Scripts

Expand Down
2 changes: 1 addition & 1 deletion public/app.js

Large diffs are not rendered by default.

4 changes: 3 additions & 1 deletion resources/js/app.js
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
import ApexCharts from 'apexcharts'
import areaChart from "./areaChart"
import columnChart from "./columnChart"
import multiColumnChart from "./multiColumnChart";
import multiColumnChart from "./multiColumnChart"
import lineChart from "./lineChart"
import multiLineChart from "./multiLineChart"
import pieChart from "./pieChart"
import radarChart from "./radarChart"
import treeMapChart from "./treeMapChart"
import radialChart from "./radialChart"

window.ApexCharts = ApexCharts
window.livewireChartsAreaChart = areaChart
Expand All @@ -17,3 +18,4 @@ window.livewireChartsPieChart = pieChart
window.livewireChartsMultiColumnChart = multiColumnChart
window.livewireChartsRadarChart = radarChart
window.livewireChartsTreeMapChart = treeMapChart
window.livewireChartsRadialChart = radialChart
74 changes: 74 additions & 0 deletions resources/js/radialChart.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
import { mergedOptionsWithJsonConfig } from "./helpers";

const radialChart = () => {
return {
chart: null,

init() {
setTimeout(() => {
this.drawChart(this.$wire);
}, 0);
},

drawChart(component) {
if (this.chart) {
this.chart.destroy();
}

const data = component.get("radialChartModel.data");
const showTotal = component.get("radialChartModel.showTotal");
const onBarClickEventName = component.get(
"radialChartModel.onBarClickEventName"
);
const jsonConfig = component.get("radialChartModel.jsonConfig");

const colors = component.get("radialChartModel.colors");

const options = {
series: data.map((item) => item.value),
labels: data.map((item) => item.title),
colors: Object.values(colors).filter(Boolean),
chart: {
height: "100%",
type: "radialBar",
events: {
dataPointSelection: function (
event,
chartContext,
payload
) {
console.log(payload);

if (!onBarClickEventName) {
return;
}

const bar = data[payload.dataPointIndex];
console.log(bar);

component.call("onBarClick", bar);
},
},
},
plotOptions: {
radialBar: {
dataLabels: {
total: {
show: showTotal,
},
},
},
},
};

this.chart = new ApexCharts(
this.$refs.container,
mergedOptionsWithJsonConfig(options, jsonConfig)
);

this.chart.render();
},
};
};

export default radialChart;
7 changes: 7 additions & 0 deletions resources/views/livewire-radial-chart.blade.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
<div
style="width: 100%; height: 100%;"
x-data="{ ...livewireChartsRadialChart() }"
x-init="init()"
>
<div wire:ignore x-ref="container"></div>
</div>
36 changes: 36 additions & 0 deletions src/Charts/LivewireRadialChart.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
<?php

namespace Asantibanez\LivewireCharts\Charts;

use Asantibanez\LivewireCharts\Models\RadialChartModel;
use Livewire\Component;

/**
* Class LivewireRadialChart
* @package Asantibanez\LivewireCharts\Charts
*/
class LivewireRadialChart extends Component
{
public $radialChartModel;

public function mount(RadialChartModel $radialChartModel)
{
$this->radialChartModel = $radialChartModel->toArray();
}

public function onBarClick($bar): void
{
$onBarClickEventName = data_get($this->radialChartModel, 'onBarClickEventName');

if ($onBarClickEventName === null) {
return;
}

$this->dispatch($onBarClickEventName, $bar);
}

public function render()
{
return view('livewire-charts::livewire-radial-chart');
}
}
2 changes: 2 additions & 0 deletions src/Facades/LivewireCharts.php
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
use Asantibanez\LivewireCharts\Models\LineChartModel;
use Asantibanez\LivewireCharts\Models\PieChartModel;
use Asantibanez\LivewireCharts\Models\RadarChartModel;
use Asantibanez\LivewireCharts\Models\RadialChartModel;
use Asantibanez\LivewireCharts\Models\TreeMapChartModel;
use Illuminate\Support\Facades\Facade;

Expand All @@ -21,6 +22,7 @@
* @method static PieChartModel pieChartModel()
* @method static RadarChartModel radarChartModel()
* @method static TreeMapChartModel treeMapChartModel()
* @method static RadialChartModel radialChartModel()
*/
class LivewireCharts extends Facade
{
Expand Down
8 changes: 7 additions & 1 deletion src/LivewireCharts.php
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
use Asantibanez\LivewireCharts\Models\LineChartModel;
use Asantibanez\LivewireCharts\Models\PieChartModel;
use Asantibanez\LivewireCharts\Models\RadarChartModel;
use Asantibanez\LivewireCharts\Models\RadialChartModel;
use Asantibanez\LivewireCharts\Models\TreeMapChartModel;

class LivewireCharts
Expand Down Expand Up @@ -52,8 +53,13 @@ public function radarChartModel()
return new RadarChartModel();
}

public function treeMapChartModel()
public function treeMapChartModel(): TreeMapChartModel
{
return new TreeMapChartModel();
}

public function radialChartModel(): RadialChartModel
{
return new RadialChartModel();
}
}
2 changes: 2 additions & 0 deletions src/LivewireChartsServiceProvider.php
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
use Asantibanez\LivewireCharts\Charts\LivewireLineChart;
use Asantibanez\LivewireCharts\Charts\LivewirePieChart;
use Asantibanez\LivewireCharts\Charts\LivewireRadarChart;
use Asantibanez\LivewireCharts\Charts\LivewireRadialChart;
use Asantibanez\LivewireCharts\Charts\LivewireTreeMapChart;
use Asantibanez\LivewireCharts\Console\InstallCommand;
use Illuminate\Support\Facades\Blade;
Expand Down Expand Up @@ -73,6 +74,7 @@ private function registerComponents()
Livewire::component('livewire-area-chart', LivewireAreaChart::class);
Livewire::component('livewire-radar-chart', LivewireRadarChart::class);
Livewire::component('livewire-tree-map-chart', LivewireTreeMapChart::class);
Livewire::component('livewire-radial-chart', LivewireRadialChart::class);
}

private function registerDirectives()
Expand Down
76 changes: 76 additions & 0 deletions src/Models/RadialChartModel.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
<?php


namespace Asantibanez\LivewireCharts\Models;

/**
* Class RadialChartModel
* @package Asantibanez\LivewireCharts\Models
*/
class RadialChartModel extends BaseChartModel
{
public $data;
public $showTotal;
public $onBarClickEventName;

public function __construct()
{
parent::__construct();

$this->data = collect();

$this->showTotal = true;
}

public function showTotal(): self
{
$this->showTotal = true;
return $this;
}

public function hideTotal(): self
{
$this->showTotal = false;
return $this;
}

public function addBar($title, $value, $color = null, $extras = []): self
{
$this->data->push([
'title' => $title,
'value' => $value,
'extras' => $extras,
]);

$this->addColor($color);

return $this;
}

public function withOnBarClickEvent($onBarClickEvent): self
{
$this->onBarClickEventName = $onBarClickEvent;

return $this;
}

public function toArray()
{
return array_merge(parent::toArray(), [
'data' => $this->data->toArray(),
'showTotal' => $this->showTotal,
'onBarClickEventName' => $this->onBarClickEventName,
]);
}

public function fromArray($array)
{
parent::fromArray($array);

$this->data = collect(data_get($array, 'data', []));

$this->showTotal = data_get($array, 'showTotal', true);

$this->onBarClickEventName = data_get($array, 'onBarClickEventName', null);
}
}
44 changes: 44 additions & 0 deletions tests/LivewireRadialChartTest.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
<?php


use Asantibanez\LivewireCharts\Charts\LivewireRadialChart;
use Asantibanez\LivewireCharts\Tests\TestCase;
use Livewire\Features\SupportTesting\Testable;
use Livewire\Livewire;

class LivewireRadialChartTest extends TestCase
{
private function buildComponent() : Testable
{
return Livewire::test(LivewireRadialChart::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();

$radialChartModel = $component->radialChartModel;

data_set($radialChartModel, 'onBarClickEventName', 'custom-event');

$component->set('radialChartModel', $radialChartModel);

//Act
$component->runAction('onBarClick', []);

//Assert
$component->assertDispatched('custom-event');
}
}

0 comments on commit 8bf47f2

Please sign in to comment.