Added TreeMap chart

- Added tests

Author: asantibanez

public/app.js

@@ -6,6 +6,7 @@ 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,3 +16,4 @@ window.livewireChartsMultiLineChart = multiLineChart
 window.livewireChartsPieChart = pieChart
 window.livewireChartsMultiColumnChart = multiColumnChart
 window.livewireChartsRadarChart = radarChart
+window.livewireChartsTreeMapChart = treeMapChart

resources/js/app.js

@@ -0,0 +1,78 @@
+
+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 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.emit(onBlockClickEventName, block)
+                        },
+                    }
+                },
+
+                plotOptions: {
+                    treemap: {
+                        distributed: distributed,
+                        enableShades: enableShades,
+                    }
+                },
+
+                colors: colors,
+            };
+
+            this.chart = new ApexCharts(this.$refs.container, options);
+            this.chart.render();
+        }
+    }
+}
+
+export default treeMapChart

resources/js/treeMapChart.js

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

resources/views/livewire-tree-map-chart.blade.php

@@ -0,0 +1,25 @@
+<?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 render()
+    {
+        return view('livewire-charts::livewire-tree-map-chart');
+    }
+}

src/Charts/LivewireTreeMapChart.php

@@ -7,6 +7,7 @@
 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,6 +20,7 @@
  * @method static AreaChartModel areaChartModel()
  * @method static PieChartModel pieChartModel()
  * @method static RadarChartModel radarChartModel()
+ * @method static TreeMapChartModel treeMapChartModel()
  */
 class LivewireCharts extends Facade
 {

src/Facades/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\TreeMapChartModel;
 
 class LivewireCharts
 {
@@ -50,4 +51,9 @@ public function radarChartModel()
     {
         return new RadarChartModel();
     }
+
+    public function treeMapChartModel()
+    {
+        return new TreeMapChartModel();
+    }
 }

src/LivewireCharts.php

@@ -7,6 +7,7 @@
 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;
@@ -71,6 +72,7 @@ private function registerComponents()
         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()

src/LivewireChartsServiceProvider.php

@@ -0,0 +1,84 @@
+<?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);
+    }
+}

src/Models/TreeMapChartModel.php

@@ -0,0 +1,25 @@
+<?php
+
+namespace Asantibanez\LivewireCharts\Tests;
+
+use Asantibanez\LivewireCharts\Charts\LivewireTreeMapChart;
+use Livewire\Livewire;
+use Livewire\Testing\TestableLivewire;
+
+class LivewireTreeMapChartTest extends TestCase
+{
+    private function buildComponent() : TestableLivewire
+    {
+        return Livewire::test(LivewireTreeMapChart::class);
+    }
+
+    /** @test */
+    public function can_build_component()
+    {
+        //Act
+        $component = $this->buildComponent();
+
+        //Assert
+        $this->assertNotNull($component);
+    }
+}