v2.5.0 released

Laravel 10.x Compatibility

.github/CODEOWNERS

@@ -0,0 +1 @@
+* @asantibanez

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,26 @@
+---
+name: Bug report
+about: Create a report to help us improve
+
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**To Reproduce**
+Steps to reproduce the behavior:
+1. '...'
+2. '...'
+3. '...'
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**Additional context**
+Add any other context about the problem here.
+
+**Solution Ideas**
+Initial thoughts or details about how this could be fixed

.github/ISSUE_TEMPLATE/feature.md

@@ -0,0 +1,14 @@
+---
+name: Feature
+about: New feature idea
+
+---
+
+### Summary
+What's the new feature about? What should it do?
+
+### Proposal
+How should it work? API ideas?
+
+### Additional Notes
+Reference links or comments 

.github/PULL_REQUEST_TEMPLATE

@@ -0,0 +1,18 @@
+## Summary
+
+[Provide a summary of the change.]
+
+## Issue
+
+[If exists, provide a link to the corresponding issue(s).]
+
+## Type of Change
+
+- [ ] :rocket: New Feature
+- [ ] :bug: Bug Fix
+- [ ] :hammer: Refactor
+- [ ] :question: [Other]
+
+## Screenshot/Video
+
+[Provide a screenshot or video that describes the change if applicable]

.github/workflows/phpunit.yml

@@ -0,0 +1,29 @@
+name: PHPUnit
+
+on: [push]
+
+jobs:
+  phpunit:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Cancel Previous Run
+        uses: styfle/cancel-workflow-action@0.6.0
+        with:
+          access_token: ${{ github.token }}
+
+      - name: Setup PHP
+        uses: shivammathur/setup-php@v2
+        with:
+          php-version: '8.0'
+          extensions: dom, curl, libxml, mbstring, zip, pcntl, pdo, sqlite, pdo_sqlite, gd, exif, imagick, bcmath
+          coverage: none
+
+      - name: Checkout code
+        uses: actions/checkout@v2
+
+      - name: Install Composer dependencies
+        run: composer install --ignore-platform-reqs
+
+      - name: Run tests
+        run: ./vendor/bin/phpunit

.gitignore

@@ -6,3 +6,4 @@ vendor
 coverage
 .DS_STORE
 node_modules
+.phpunit.result.cache

CHANGELOG.md

@@ -1,5 +1,37 @@
 # Changelog
 
+## 2.5.0 - 2023-02-01
+- Added tooltip override via `extras.tooltip`
+
+## 2.4.2 - 2023-02-01
+- Fixed hover title on column chart
+
+## 2.4.1 - 2022-02-18
+- Fixed xAxis auto-categories for MultiColumnChart 
+
+## 2.4.0 - 2022-02-14
+- Added Radar Chart (thanks to @AlexHupe)
+- Added Tree Map Chart
+- Added "donut" type to Pie Chart (thanks to @nicko170)
+
+## 2.3.0 - 2021-02-12
+- Added `init()` method for better boot and $wire hoisting
+- Added color customization for columns, multiline and pie chart
+
+## 2.2.0 - 2020-12-16
+- Added support for PHP 8
+- Updated docs 
+- Added base tests for components and CI
+
+## 2.1.0 - 2020-11-30
+- Added stroke width customization
+- Added stroke support for Area Chart
+
+## 2.0.0 - 2020-11-30
+- Added build system for JS charts code
+- Added Blade directive to include assets
+- Updated installation and advanced usage instructions
+
 ## 1.5.2 - 2020-11-09
 
 - Fixed infinite growing charts

README.md

@@ -5,6 +5,7 @@
 ## Preview
 
 ![preview](https://github.com/asantibanez/livewire-charts/raw/master/preview.gif)
+![preview](./preview_radarchart.gif)
 
 ## Demo
 
@@ -20,7 +21,13 @@ composer require asantibanez/livewire-charts
 
 Next, you must export the package public scripts. To do this run `php artisan vendor:publish` 
 and export `livewire-charts:public`. This command will export a `vendor/livewire-charts` folder under the 
-`public` directory of your app.
+`public` directory of your app.  
+
+```bash
+php artisan vendor:publish --tag=livewire-charts:public
+```
+
+> Note: This last step can also be done using `livewire-charts:install` command in the artisan console.
 
 ## Requirements
 
@@ -40,12 +47,16 @@ 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)
+- Tree Map Chart (`LivewireTreeMapChart` 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.
+- `LivewireTreeMapChart` uses `TreeMapChartModel` to set up data blocks, 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
@@ -93,6 +104,8 @@ LivewireCharts::columnChartModel();
 LivewireCharts::multiColumnChartModel();
 LivewireCharts::pieChartModel();
 LivewireCharts::areaChartModel();
+LivewireCharts::radarChartModel();
+LivewireCharts::treeMapChartModel();
 ```
 
 ## Enabling Interactions
@@ -153,7 +166,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 |
 |--------|-------------|
@@ -164,11 +177,13 @@ for each type of chart.
 | withoutDataLabels() | Disables data labels |
 | withLegend() | Shows legends |
 | withoutLegend() | Hides legends |
+| setColors(array $colors) | Set colors for chart |
+| addColors(string $color) | Append $color to $colors set |
 | setXAxisCategories(array $categories) | Enables custom categories for chart X Axis |
 | sparklined() | Enables Apex Charts sparkline feature |
 | setSparklineEnabled(boolean $isEnabled) | Enables/Disables Apex Charts sparkline feature |
 
-#### LivewireLineChart
+### LivewireLineChart
 
 | Method | Description |
 |--------|-------------|
@@ -179,18 +194,21 @@ 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 |
 |--------|-------------|
 | setOpacity(int $opacity) | Sets columns' opacity |
+| setColumnWidth(int $columnWidth) | Sets columns' width |
+| setHorizontal(boolean $value) | Sets columns or bars |
 | multiColumn() | Sets chart to display multiple column series |
 | singleColumn() | Sets chart to display a single column series |
 | stacked() | Sets chart to display column series stacked |
 | addColumn(string $title, double $value, string $color, array $extras = []) | Adds a column to the chart with the specified color. `$extras` is forwarded on click event |
+| 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 |
 |--------|-------------|
@@ -198,7 +216,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 |
 |--------|-------------|
@@ -207,6 +225,23 @@ 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 |
+
+### LivewireTreeMapChart
+
+| Method | Description |
+|--------|-------------|
+| addBlock(string $title, double $value, array $extras = []) | Adds a block to the default series|
+| addSeriesBlock(string $seriesName, string $title, double $value, array $extras = []) | Adds a block to the specified series|
+| 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 |
+
+
 ## Advanced Usage - Integrating Scripts
 
 The directive `@livewireChartsScripts` adds a `script` tag that includes `public/vendor/livewire-charts/app.js`.

composer.json

@@ -16,13 +16,13 @@
         }
     ],
     "require": {
-        "php": "^7.2|^7.3|^7.4",
+        "php": "^7.2|^7.3|^7.4|^8.0",
-        "illuminate/support": "^7.0|^8.0",
+        "illuminate/support": "^7.0|^8.0|^9.0|^10.0",
         "livewire/livewire": "^2.3"
     },
     "require-dev": {
-        "orchestra/testbench": "^4.0|^5.0",
+        "orchestra/testbench": "^5.0|^6.0|^7.0|^8.0",
-        "phpunit/phpunit": "^8.0"
+        "phpunit/phpunit": "^8.0|^9.5.10"
     },
     "autoload": {
         "psr-4": {
@@ -37,7 +37,6 @@
     "scripts": {
         "test": "vendor/bin/phpunit",
         "test-coverage": "vendor/bin/phpunit --coverage-html coverage"
-
     },
     "config": {
         "sort-packages": true

phpunit.xml.dist

@@ -22,7 +22,7 @@
     <logging>
         <log type="tap" target="build/report.tap"/>
         <log type="junit" target="build/report.junit.xml"/>
-        <log type="coverage-html" target="build/coverage" charset="UTF-8" yui="true" highlight="true"/>
+        <log type="coverage-html" target="build/coverage"/>
         <log type="coverage-text" target="build/coverage.txt"/>
         <log type="coverage-clover" target="build/logs/clover.xml"/>
     </logging>

resources/js/app.js

@@ -5,6 +5,8 @@ import multiColumnChart from "./multiColumnChart";
 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
@@ -13,3 +15,5 @@ window.livewireChartsLineChart = lineChart
 window.livewireChartsMultiLineChart = multiLineChart
 window.livewireChartsPieChart = pieChart
 window.livewireChartsMultiColumnChart = multiColumnChart
+window.livewireChartsRadarChart = radarChart
+window.livewireChartsTreeMapChart = treeMapChart

resources/js/areaChart.js

@@ -3,6 +3,12 @@ const areaChart = () => {
     return {
         chart: null,
 
+        init() {
+            setTimeout(() => {
+                this.drawChart(this.$wire)
+            }, 0)
+        },
+
         drawChart(component) {
             if (this.chart) {
                 this.chart.destroy()

resources/js/columnChart.js

@@ -3,19 +3,35 @@ const columnChart = () => {
     return {
         chart: null,
 
+        init() {
+            setTimeout(() => {
+                this.drawChart(this.$wire)
+            }, 0)
+        },
+
         drawChart(component) {
             if (this.chart) {
                 this.chart.destroy()
             }
 
+            const title = component.get('columnChartModel.title')
             const animated = component.get('columnChartModel.animated') || false;
             const onColumnClickEventName = component.get('columnChartModel.onColumnClickEventName')
             const dataLabels = component.get('columnChartModel.dataLabels') || {};
-            const data = component.get('columnChartModel.data');
             const sparkline = component.get('columnChartModel.sparkline');
+            const legend = component.get('columnChartModel.legend')
+            const grid = component.get('columnChartModel.grid');
+            const columnWidth = component.get('columnChartModel.columnWidth');
+            const horizontal = component.get('columnChartModel.horizontal');
+
+            const data = component.get('columnChartModel.data');
+            const series = [{
+                name: title,
+                data: data.map(item => item.value)
+            }]
 
             const options = {
-                series: [{ data: data.map(item => item.value)}],
+                series: series,
 
                 chart: {
                     type: 'bar',
@@ -48,12 +64,14 @@ const columnChart = () => {
                     },
                 },
 
-                legend: component.get('columnChartModel.legend') || {},
+                legend: legend,
+
+                grid: grid,
 
                 plotOptions: {
                     bar: {
-                        horizontal: false,
+                        horizontal: horizontal,
-                        columnWidth: '40%',
+                        columnWidth: `${columnWidth}%`,
                         distributed: true,
                     },
                 },
@@ -66,15 +84,29 @@ const columnChart = () => {
 
                 yaxis: {
                     title: {
-                        text: component.get('columnChartModel.title'),
+                        text: title,
                     }
                 },
 
                 fill: {
                     opacity: component.get('columnChartModel.opacity') || 0.5
                 },
+
+                tooltip: {
+                    y: {
+                        formatter: function(value, series) {
+                            return data[series.dataPointIndex].extras.tooltip || value;
+                        }
+                    }
+                },
             };
 
+            const colors = component.get('columnChartModel.colors');
+
+            if (colors && colors.length > 0) {
+                options['colors'] = colors
+            }
+
             this.chart = new ApexCharts(this.$refs.container, options);
             this.chart.render();
         }

resources/js/lineChart.js

@@ -3,6 +3,12 @@ const lineChart = () => {
     return {
         chart: null,
 
+        init() {
+            setTimeout(() => {
+                this.drawChart(this.$wire)
+            }, 0)
+        },
+
         drawChart(component) {
             if (this.chart) {
                 this.chart.destroy()
@@ -90,6 +96,14 @@ const lineChart = () => {
                         }
                     )
                 },
+
+                tooltip: {
+                    y: {
+                        formatter: function(value, series) {
+                            return data[series.dataPointIndex].extras.tooltip || value;
+                        }
+                    }
+                },
             };
 
             this.chart = new ApexCharts(this.$refs.container, options);

resources/js/multiColumnChart.js

@@ -3,18 +3,29 @@ const multiColumnChart = () => {
     return {
         chart: null,
 
+        init() {
+            setTimeout(() => {
+                this.drawChart(this.$wire)
+            }, 0)
+        },
+
         drawChart(component) {
             if (this.chart) {
                 this.chart.destroy()
             }
 
+            const title = component.get('columnChartModel.title')
             const stacked = component.get('columnChartModel.isStacked');
             const animated = component.get('columnChartModel.animated');
             const onColumnClickEventName = component.get('columnChartModel.onColumnClickEventName')
             const dataLabels = component.get('columnChartModel.dataLabels');
-            const data = component.get('columnChartModel.data');
             const sparkline = component.get('columnChartModel.sparkline');
+            const legend = component.get('columnChartModel.legend')
+            const grid = component.get('columnChartModel.grid');
+            const columnWidth = component.get('columnChartModel.columnWidth');
+            const horizontal = component.get('columnChartModel.horizontal');
 
+            const data = component.get('columnChartModel.data');
             const series = Object.keys(data)
                 .map(seriesName => ({
                     name: seriesName,
@@ -52,12 +63,14 @@ const multiColumnChart = () => {
                     }
                 },
 
-                legend: component.get('columnChartModel.legend'),
+                legend: legend,
+
+                grid: grid,
 
                 plotOptions: {
                     bar: {
-                        horizontal: false,
+                        horizontal: horizontal,
-                        columnWidth: '50%',
+                        columnWidth: `${columnWidth}%`,
                     },
                 },
 
@@ -69,7 +82,7 @@ const multiColumnChart = () => {
 
                 yaxis: {
                     title: {
-                        text: component.get('columnChartModel.title'),
+                        text: title,
                     }
                 },
 
@@ -78,6 +91,12 @@ const multiColumnChart = () => {
                 },
             };
 
+            const colors = component.get('columnChartModel.colors');
+
+            if (colors && colors.length > 0) {
+                options['colors'] = colors
+            }
+
             this.chart = new ApexCharts(this.$refs.container, options);
             this.chart.render();
         }

resources/js/multiLineChart.js

@@ -3,6 +3,12 @@ const multiLineChart = () => {
     return {
         chart: null,
 
+        init() {
+            setTimeout(() => {
+                this.drawChart(this.$wire)
+            }, 0)
+        },
+
         drawChart(component) {
             if (this.chart) {
                 this.chart.destroy()
@@ -70,6 +76,12 @@ const multiLineChart = () => {
                 yaxis: component.get('lineChartModel.yAxis') || {},
             };
 
+            const colors = component.get('lineChartModel.colors');
+
+            if (colors && colors.length > 0) {
+                options['colors'] = colors
+            }
+
             this.chart = new ApexCharts(this.$refs.container, options);
             this.chart.render();
         }

resources/js/pieChart.js

@@ -3,6 +3,12 @@ const pieChart = () => {
     return {
         chart: null,
 
+        init() {
+            setTimeout(() => {
+                this.drawChart(this.$wire)
+            }, 0)
+        },
+
         drawChart(component) {
             if (this.chart) {
                 this.chart.destroy()
@@ -14,13 +20,14 @@ const pieChart = () => {
             const onSliceClickEventName = component.get('pieChartModel.onSliceClickEventName')
             const data = component.get('pieChartModel.data')
             const sparkline = component.get('pieChartModel.sparkline')
+            const type = component.get('pieChartModel.type')
 
             const options = {
                 series: data.map(item => item.value),
 
                 chart: {
                     height: '100%',
-                    type: 'pie',
+                    type: type,
 
                     ...sparkline,
 
@@ -66,8 +73,22 @@ const pieChart = () => {
                 ],
 
                 legend: component.get('pieChartModel.legend') || {},
+
+                tooltip: {
+                    y: {
+                        formatter: function(value, series) {
+                            return data[series.dataPointIndex].extras.tooltip || value;
+                        }
+                    }
+                },
             };
 
+            const colors = component.get('pieChartModel.colors');
+
+            if (colors && colors.length > 0) {
+                options['colors'] = colors
+            }
+
             this.chart = new ApexCharts(this.$refs.container, options);
             this.chart.render();
         }

resources/js/radarChart.js

@@ -0,0 +1,97 @@
+
+const radarChart = () => {
+    return {
+        chart: null,
+
+        init() {
+            setTimeout(() => {
+                this.drawChart(this.$wire)
+            }, 0)
+        },
+
+        drawChart(component) {
+            if (this.chart) {
+                this.chart.destroy()
+            }
+
+            const title = component.get('radarChartModel.title');
+            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: title },
+
+                fill: {
+                    opacity: component.get('radarChartModel.opacity'),
+                },
+
+                colors: colors,
+
+                markers: {
+                    size: 4
+                },
+
+            };
+
+            this.chart = new ApexCharts(this.$refs.container, options);
+            this.chart.render();
+        }
+    }
+}
+
+export default radarChart

resources/js/treeMapChart.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/views/livewire-area-chart.blade.php

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

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

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

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

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

resources/views/livewire-multi-column-chart.blade.php

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

resources/views/livewire-multi-line-chart.blade.php

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

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

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

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

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

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

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

src/Charts/LivewireRadarChart.php

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

src/Charts/LivewireTreeMapChart.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/Console/InstallCommand.php

@@ -0,0 +1,17 @@
+<?php
+
+namespace Asantibanez\LivewireCharts\Console;
+
+use Illuminate\Console\Command;
+
+class InstallCommand extends Command
+{
+    protected $signature = 'livewire-charts:install';
+
+    protected $description = 'Installs Livewire Charts';
+
+    public function handle()
+    {
+        $this->call('vendor:publish', ['--tag' => 'livewire-charts:public']);
+    }
+}

src/Facades/LivewireCharts.php

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

src/LivewireCharts.php

@@ -8,6 +8,8 @@ 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 Asantibanez\LivewireCharts\Models\TreeMapChartModel;
 
 class LivewireCharts
 {
@@ -44,4 +46,14 @@ class LivewireCharts
     {
         return new PieChartModel;
     }
+
+    public function radarChartModel()
+    {
+        return new RadarChartModel();
+    }
+
+    public function treeMapChartModel()
+    {
+        return new TreeMapChartModel();
+    }
 }

src/LivewireChartsServiceProvider.php

@@ -6,6 +6,9 @@ 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 Asantibanez\LivewireCharts\Charts\LivewireTreeMapChart;
+use Asantibanez\LivewireCharts\Console\InstallCommand;
 use Illuminate\Support\Facades\Blade;
 use Illuminate\Support\ServiceProvider;
 use Livewire\Livewire;
@@ -14,7 +17,9 @@ class LivewireChartsServiceProvider extends ServiceProvider
 {
     public function boot()
     {
-         $this->registerViews();
+        $this->registerCommands();
+
+        $this->registerViews();
 
         $this->registerPublishables();
 
@@ -28,6 +33,16 @@ class LivewireChartsServiceProvider extends ServiceProvider
         $this->app->bind('livewirecharts', LivewireCharts::class);
     }
 
+    private function registerCommands()
+    {
+        if ($this->app->runningInConsole()) {
+            $this->commands([
+                InstallCommand::class,
+            ]);
+        }
+    }
+
+
     private function registerViews()
     {
         $this->loadViewsFrom(__DIR__.'/../resources/views', 'livewire-charts');
@@ -56,6 +71,8 @@ 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);
+        Livewire::component('livewire-tree-map-chart', LivewireTreeMapChart::class);
     }
 
     private function registerDirectives()

src/Models/BaseChartModel.php

@@ -16,6 +16,8 @@ class BaseChartModel
     use HasLegend;
     use HasDataLabels;
     use HasSparkline;
+    use HasGrid;
+    use HasColors;
 
     public function __construct()
     {
@@ -26,6 +28,8 @@ class BaseChartModel
         $this->initLegend();
         $this->initDataLabels();
         $this->initSparkline();
+        $this->initGrid();
+        $this->initColors();
     }
 
     public function reactiveKey()
@@ -42,7 +46,9 @@ class BaseChartModel
             $this->strokeToArray(),
             $this->legendToArray(),
             $this->dataLabelsToArray(),
-            $this->sparklineToArray()
+            $this->sparklineToArray(),
+            $this->gridToArray(),
+            $this->colorsToArray()
         );
     }
 
@@ -55,5 +61,7 @@ class BaseChartModel
         $this->legendFromArray($array);
         $this->dataLabelsFromArray($array);
         $this->sparklineFromArray($array);
+        $this->gridFromArray($array);
+        $this->colorsFromArray($array);
     }
 }

src/Models/ColumnChartModel.php

@@ -13,6 +13,10 @@ class ColumnChartModel extends BaseChartModel
 {
     public $opacity;
 
+    public $columnWidth;
+
+    public $horizontal;
+
     public $isMultiColumn;
 
     public $isStacked;
@@ -27,7 +31,11 @@ class ColumnChartModel extends BaseChartModel
 
         $this->onColumnClickEventName = null;
 
-        $this->opacity = 0.5;
+        $this->opacity = 0.75;
+
+        $this->columnWidth = 70;
+
+        $this->horizontal = false;
 
         $this->isMultiColumn = false;
 
@@ -57,6 +65,20 @@ class ColumnChartModel extends BaseChartModel
         return $this;
     }
 
+    public function setHorizontal($value)
+    {
+        $this->horizontal = $value;
+
+        return $this;
+    }
+
+    public function setColumnWidth($value)
+    {
+        $this->columnWidth = $value;
+
+        return $this;
+    }
+
     public function setOpacity($opacity)
     {
         $this->opacity = $opacity;
@@ -104,6 +126,8 @@ class ColumnChartModel extends BaseChartModel
         return array_merge(parent::toArray(), [
             'onColumnClickEventName' => $this->onColumnClickEventName,
             'opacity' => $this->opacity,
+            'horizontal' => $this->horizontal,
+            'columnWidth' => $this->columnWidth,
             'isMultiColumn' => $this->isMultiColumn,
             'isStacked' => $this->isStacked,
             'data' => $this->data->toArray(),
@@ -118,6 +142,10 @@ class ColumnChartModel extends BaseChartModel
 
         $this->opacity = data_get($array, 'opacity', 0.5);
 
+        $this->columnWidth = data_get($array, 'columnWidth', 70);
+
+        $this->horizontal = data_get($array, 'horizontal', false);
+
         $this->isMultiColumn = data_get($array, 'isMultiColumn', false);
 
         $this->isStacked = data_get($array, 'isStacked', false);

src/Models/HasColors.php

@@ -0,0 +1,67 @@
+<?php
+
+
+namespace Asantibanez\LivewireCharts\Models;
+
+
+trait HasColors
+{
+    private $colors;
+
+    private $enableShades;
+
+    public function setColors($colors)
+    {
+        $this->colors = $colors;
+
+        return $this;
+    }
+
+    public function addColor($color)
+    {
+        $this->colors[] = $color;
+
+        return $this;
+    }
+
+    public function enableShades()
+    {
+        $this->enableShades = true;
+
+        return $this;
+    }
+
+    public function disableShades()
+    {
+        $this->enableShades = false;
+
+        return $this;
+    }
+
+    protected function initColors()
+    {
+        $this->colors = $this->defaultColors();
+
+        $this->enableShades = true;
+    }
+
+    private function defaultColors()
+    {
+        return [];
+    }
+
+    protected function colorsFromArray($array)
+    {
+        $this->colors = data_get($array, 'colors', $this->defaultColors());
+
+        $this->enableShades = data_get($array, 'enableShades', true);
+    }
+
+    protected function colorsToArray()
+    {
+        return [
+            'colors' => $this->colors,
+            'enableShades' => $this->enableShades,
+        ];
+    }
+}

src/Models/HasGrid.php

@@ -0,0 +1,66 @@
+<?php
+
+
+namespace Asantibanez\LivewireCharts\Models;
+
+
+trait HasGrid
+{
+    private $grid;
+
+    public function setGridVisible($visible)
+    {
+        data_set($this->grid, 'show', $visible);
+
+        return $this;
+    }
+
+    public function withGrid()
+    {
+        data_set($this->grid, 'show', true);
+
+        return $this;
+    }
+
+    public function withoutGrid()
+    {
+        data_set($this->grid, 'show', false);
+
+        return $this;
+    }
+
+    protected function initGrid()
+    {
+        $this->grid = $this->defaultGrid();
+    }
+
+    private function defaultGrid()
+    {
+        return [
+            'show' => false,
+            'position' => 'back',
+            'xaxis' => [
+                'lines' => [
+                    'show' => true,
+                ],
+            ],
+            'yaxis' => [
+                'lines' => [
+                    'show' => true,
+                ],
+            ],
+        ];
+    }
+
+    protected function gridFromArray($array)
+    {
+        $this->grid = data_get($array, 'grid', $this->defaultGrid());
+    }
+
+    protected function gridToArray()
+    {
+        return [
+            'grid' => $this->grid,
+        ];
+    }
+}

src/Models/PieChartModel.php

@@ -13,6 +13,8 @@ class PieChartModel extends BaseChartModel
 
     public $opacity;
 
+    public $type;
+
     public $data;
 
     public function __construct()
@@ -23,6 +25,8 @@ class PieChartModel extends BaseChartModel
 
         $this->opacity = 0.75;
 
+        $this->type = 'pie';
+
         $this->data = collect();
     }
 
@@ -33,6 +37,13 @@ class PieChartModel extends BaseChartModel
         return $this;
     }
 
+    public function setType($type)
+    {
+        $this->type = $type;
+
+        return $this;
+    }
+
     public function withOnSliceClickEvent($onSliceClickEventName)
     {
         $this->onSliceClickEventName = $onSliceClickEventName;
@@ -57,6 +68,7 @@ class PieChartModel extends BaseChartModel
         return array_merge(parent::toArray(), [
             'onSliceClickEventName' => $this->onSliceClickEventName,
             'opacity' => $this->opacity,
+            'type' => $this->type,
             'data' => $this->data->toArray(),
         ]);
     }
@@ -69,6 +81,8 @@ class PieChartModel extends BaseChartModel
 
         $this->opacity = data_get($array, 'opacity', 0.75);
 
+        $this->type = data_get($array, 'type', 'pie');
+
         $this->data = collect(data_get($array, 'data', []));
     }
 }

src/Models/RadarChartModel.php

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

src/Models/TreeMapChartModel.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);
+    }
+}

tests/ExampleTest.php

@@ -1,21 +0,0 @@
-<?php
-
-namespace Asantibanez\LivewireCharts\Tests;
-
-use Orchestra\Testbench\TestCase;
-use Asantibanez\LivewireCharts\LivewireChartsServiceProvider;
-
-class ExampleTest extends TestCase
-{
-
-    protected function getPackageProviders($app)
-    {
-        return [LivewireChartsServiceProvider::class];
-    }
-    
-    /** @test */
-    public function true_is_true()
-    {
-        $this->assertTrue(true);
-    }
-}

tests/LivewireAreaChartTest.php

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

tests/LivewireColumnChartTest.php

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

tests/LivewireLineChartTest.php

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

tests/LivewirePieChartTest.php

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

tests/LivewireRadarChartTest.php

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

tests/LivewireTreeMapChartTest.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);
+    }
+}

tests/TestCase.php

@@ -0,0 +1,25 @@
+<?php
+
+namespace Asantibanez\LivewireCharts\Tests;
+
+use Asantibanez\LivewireCharts\LivewireChartsServiceProvider;
+use Livewire\LivewireServiceProvider;
+use Orchestra\Testbench\TestCase as BaseTestCase;
+
+class TestCase extends BaseTestCase
+{
+
+    protected function getPackageProviders($app)
+    {
+        return [
+            LivewireServiceProvider::class,
+            LivewireChartsServiceProvider::class
+        ];
+    }
+
+    protected function getEnvironmentSetUp($app)
+    {
+        $app['config']->set('app.key', 'base64:Hupx3yAySikrM2/edkZQNQHslgDWYfiBfCuSThJ5SK8=');
+    }
+
+}