Merge pull request #105 from redsquirrelstudio/livewire-3-event-fix

Changed 'emit' functions in Area,Line, and Radar chart to 'dispatch' …

README.md

@@ -170,20 +170,21 @@ for each type of chart.
 
 ### All
 
-| Method | Description |
-|--------|-------------|
-| setTitle(string $title) | Sets chart title |
-| setAnimated(boolean $animated) | Enables/disables animation |
-| setDataLabelsEnabled(boolean $enabled) | Enables/disables data labels |
-| withDataLabels() | Enables data labels |
-| 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 |
+| Method                                  | Description                                                                                                                            |
+|-----------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------|
+| setTitle(string $title)                 | Sets chart title                                                                                                                       |
+| setAnimated(boolean $animated)          | Enables/disables animation                                                                                                             |
+| setDataLabelsEnabled(boolean $enabled)  | Enables/disables data labels                                                                                                           |
+| withDataLabels()                        | Enables data labels                                                                                                                    |
+| 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                                                                                         |
+| setJsonConfig(array $config)            | Adds extra customization to charts by passing Apex charts properties keys and values. Nested keys must be added using dot (.) notation |
 
 ### LivewireLineChart
 
@@ -209,7 +210,7 @@ for each type of chart.
 | 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                        |
+| withOnColumnClickEventName(string $eventName)                                         | Event Name that will be fired when a column of the chart is clicked                        |
 
 ### LivewirePieChart
 
@@ -256,6 +257,31 @@ inside your resources folder. You can then adjust imports as you see fit in your
 
 >Note: You must remove @livewireChartsScripts directive so it doesn't clash with the scripts in your build system. 
 
+
+## Advanced Usage - Custom Json Configs
+
+The `setJsonConfig()` method on every chart allows adding custom Apex properties not provided first hand by the package. 
+This means that any chart property supported by Apex chart can be passed down using this method.
+
+```php
+$chart->setJsonConfig([
+    'plotOptions.pie.startAngle' => -90,
+    'plotOptions.pie.endAngle' => 90,
+    'plotOptions.pie.offsetY' => 10,
+    'grid.padding.bottom' => -180,
+]);
+```
+
+>Note: If you want to add nested properties, you can use dot (.) notation for this matter.
+ 
+You can even pass down simple JS functions. For example, for formatting you can pass down your own closure
+
+```php
+$chart->setJsonConfig([
+    'tooltip.y.formatter' => '(val) => `$${val} million dollars baby!`'
+])
+```
+
 ## Troubleshooting
 
 Chart components must be placed inside a container with fixed height. This is because the chart will use all the given

resources/js/areaChart.js

@@ -1,3 +1,4 @@
+import { mergedOptionsWithJsonConfig } from './helpers'
 
 const areaChart = () => {
     return {
@@ -20,6 +21,7 @@ const areaChart = () => {
             const onPointClickEventName = component.get('areaChartModel.onPointClickEventName')
             const data = component.get('areaChartModel.data');
             const sparkline = component.get('areaChartModel.sparkline');
+            const jsonConfig = component.get('areaChartModel.jsonConfig');
 
             const categories = component.get('areaChartModel.xAxis.categories').length > 0
                 ? component.get('areaChartModel.xAxis.categories')
@@ -88,7 +90,7 @@ const areaChart = () => {
 
             };
 
-            this.chart = new ApexCharts(this.$refs.container, options);
+            this.chart = new ApexCharts(this.$refs.container, mergedOptionsWithJsonConfig(options, jsonConfig));
             this.chart.render();
         }
     }

resources/js/lineChart.js

@@ -1,3 +1,4 @@
+import { mergedOptionsWithJsonConfig } from './helpers'
 
 const lineChart = () => {
     return {
@@ -20,6 +21,7 @@ const lineChart = () => {
             const data = component.get('lineChartModel.data');
             const onPointClickEventName = component.get('lineChartModel.onPointClickEventName');
             const sparkline = component.get('lineChartModel.sparkline');
+            const jsonConfig = component.get('lineChartModel.jsonConfig');
 
             const series = [{
                 name: title,
@@ -108,7 +110,7 @@ const lineChart = () => {
                 },
             };
 
-            this.chart = new ApexCharts(this.$refs.container, options);
+            this.chart = new ApexCharts(this.$refs.container, mergedOptionsWithJsonConfig(options, jsonConfig));
             this.chart.render();
         }
     }

resources/js/multiColumnChart.js

@@ -1,3 +1,4 @@
+import { mergedOptionsWithJsonConfig } from './helpers'
 
 const multiColumnChart = () => {
     return {
@@ -24,6 +25,7 @@ const multiColumnChart = () => {
             const grid = component.get('columnChartModel.grid');
             const columnWidth = component.get('columnChartModel.columnWidth');
             const horizontal = component.get('columnChartModel.horizontal');
+            const jsonConfig = component.get('columnChartModel.jsonConfig');
 
             const data = component.get('columnChartModel.data');
             const series = Object.keys(data)
@@ -100,7 +102,7 @@ const multiColumnChart = () => {
                 options['colors'] = colors
             }
 
-            this.chart = new ApexCharts(this.$refs.container, options);
+            this.chart = new ApexCharts(this.$refs.container, mergedOptionsWithJsonConfig(options, jsonConfig));
             this.chart.render();
         }
     }

resources/js/multiLineChart.js

@@ -1,3 +1,4 @@
+import { mergedOptionsWithJsonConfig } from './helpers'
 
 const multiLineChart = () => {
     return {
@@ -20,6 +21,7 @@ const multiLineChart = () => {
             const data = component.get('lineChartModel.data');
             const onPointClickEventName = component.get('lineChartModel.onPointClickEventName');
             const sparkline = component.get('lineChartModel.sparkline');
+            const jsonConfig = component.get('lineChartModel.jsonConfig');
 
             const series = Object.keys(data).map(key => {
                 return {
@@ -84,7 +86,7 @@ const multiLineChart = () => {
                 options['colors'] = colors
             }
 
-            this.chart = new ApexCharts(this.$refs.container, options);
+            this.chart = new ApexCharts(this.$refs.container, mergedOptionsWithJsonConfig(options, jsonConfig));
             this.chart.render();
         }
     }

resources/js/radarChart.js

@@ -1,3 +1,4 @@
+import { mergedOptionsWithJsonConfig } from './helpers'
 
 const radarChart = () => {
     return {
@@ -21,6 +22,7 @@ const radarChart = () => {
             const data = component.get('radarChartModel.data');
             const sparkline = component.get('radarChartModel.sparkline');
             const colors = component.get('radarChartModel.colors');
+            const jsonConfig = component.get('radarChartModel.jsonConfig');
 
             const series = Object.keys(data)
                 .map(seriesName => ({
@@ -88,7 +90,7 @@ const radarChart = () => {
 
             };
 
-            this.chart = new ApexCharts(this.$refs.container, options);
+            this.chart = new ApexCharts(this.$refs.container, mergedOptionsWithJsonConfig(options, jsonConfig));
             this.chart.render();
         }
     }

resources/js/treeMapChart.js

@@ -1,3 +1,4 @@
+import { mergedOptionsWithJsonConfig } from './helpers'
 
 const treeMapChart = () => {
     return {
@@ -21,6 +22,7 @@ const treeMapChart = () => {
             const data = component.get('treeMapChartModel.data');
             const colors = component.get('treeMapChartModel.colors');
             const enableShades = component.get('treeMapChartModel.enableShades');
+            const jsonConfig = component.get('treeMapChartModel.jsonConfig');
 
             const series = Object.keys(data)
                 .map(seriesName => ({
@@ -69,7 +71,7 @@ const treeMapChart = () => {
                 colors: colors,
             };
 
-            this.chart = new ApexCharts(this.$refs.container, options);
+            this.chart = new ApexCharts(this.$refs.container, mergedOptionsWithJsonConfig(options, jsonConfig));
             this.chart.render();
         }
     }

src/Charts/LivewireAreaChart.php

@@ -26,7 +26,7 @@ class LivewireAreaChart extends Component
             return;
         }
 
-        $this->emit($onPointClickEventName, $point);
+        $this->dispatch($onPointClickEventName, $point);
     }
 
     public function render()

src/Charts/LivewireLineChart.php

@@ -26,7 +26,7 @@ class LivewireLineChart extends Component
             return;
         }
 
-        $this->emit($onPointClickEventName, $point);
+        $this->dispatch($onPointClickEventName, $point);
     }
 
     public function render()

src/Charts/LivewireRadarChart.php

@@ -26,7 +26,7 @@ class LivewireRadarChart extends Component
             return;
         }
 
-        $this->emit($onPointClickEventName, $point);
+        $this->dispatch($onPointClickEventName, $point);
     }
 
     public function render()