Added Radial chart

CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog
 
+## 4.1.0 - 2024-08-22
+- Added Radial chart
+
+## 4.0.0 - 2024-08-22
+- Added Laravel 11 support
+
+## 3.1.0 - 2023-11-07
+- Added missing jsonConfig (thanks to @stijnvanouplines)
+- Changed 'emit' functions in Area,Line, and Radar chart to 'dispatch' (thanks to @redsquirrelstudio)
+
 ## 3.0.0 - 2023-07-25
 - Added Livewire v3 support
 - Added ability to set chart theme (thanks to @syntaxlexx)

README.md

@@ -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. 
@@ -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
@@ -106,6 +108,7 @@ LivewireCharts::pieChartModel();
 LivewireCharts::areaChartModel();
 LivewireCharts::radarChartModel();
 LivewireCharts::treeMapChartModel();
+LivewireCharts::radialChartModel();
 ```
 
 ## Enabling Interactions
@@ -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
 

resources/js/app.js

@@ -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
@@ -17,3 +18,4 @@ window.livewireChartsPieChart = pieChart
 window.livewireChartsMultiColumnChart = multiColumnChart
 window.livewireChartsRadarChart = radarChart
 window.livewireChartsTreeMapChart = treeMapChart
+window.livewireChartsRadialChart = radialChart

resources/js/radialChart.js

@@ -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;

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

@@ -0,0 +1,7 @@
+<div
+    style="width: 100%; height: 100%;"
+    x-data="{ ...livewireChartsRadialChart() }"
+    x-init="init()"
+>
+    <div wire:ignore x-ref="container"></div>
+</div>

src/Charts/LivewireRadialChart.php

@@ -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');
+    }
+}

src/Facades/LivewireCharts.php

@@ -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;
 
@@ -21,6 +22,7 @@
  * @method static PieChartModel pieChartModel()
  * @method static RadarChartModel radarChartModel()
  * @method static TreeMapChartModel treeMapChartModel()
+ * @method static RadialChartModel radialChartModel()
  */
 class LivewireCharts extends Facade
 {

src/LivewireCharts.php

@@ -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
@@ -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();
+    }
 }

src/LivewireChartsServiceProvider.php

@@ -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;
@@ -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()

src/Models/RadialChartModel.php

@@ -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);
+    }
+}

tests/LivewireRadialChartTest.php

@@ -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');
+    }
+}