Merge branch 'release/3.1.0'

CHANGELOG.md

@@ -5,6 +5,26 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/)
 and this project adheres to [Semantic Versioning](http://semver.org/).
 
+## 3.1.0
+
+### Added
+
+-   Extra options and Formatters.
+-   Funnel chart.
+
+### Changed
+
+-   Apexcharts update version.
+-   Commands.
+-   Plugin registration.
+
+## 3.0.2
+
+### Changed
+
+-   Apexcharts update version.
+-   Filament assets.
+
 ## 3.0.1
 
 ### Fixed

README.md

@@ -14,14 +14,21 @@ You can install the package via composer:
 composer require leandrocfe/filament-apex-charts:"^3.0"
 ```
 
-**Filament V2** - if you are using Filament v2.x, you can use [this section](https://github.com/leandrocfe/filament-apex-charts/tree/2.0.2)
-
-Optionally, you can publish the views using:
+Register the plugin for the Filament Panels you want to use:
 
-```bash
-php artisan vendor:publish --tag="filament-apex-charts-views"
+```php
+use Leandrocfe\FilamentApexCharts\FilamentApexChartsPlugin;
+public function panel(Panel $panel): Panel
+{
+    return $panel
+        ->plugins([
+            FilamentApexChartsPlugin::make()
+        ]);
+}
 ```
 
+**Filament V2** - if you are using Filament v2.x, you can use [this section](https://github.com/leandrocfe/filament-apex-charts/tree/2.0.2)
+
 ## Usage
 
 Start by creating a widget with the command:
@@ -101,20 +108,19 @@ class BlogPostsChart extends ApexChartWidget
                 'categories' => ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
                 'labels' => [
                     'style' => [
-                        'colors' => '#9ca3af',
+                        'fontFamily' => 'inherit',
                         'fontWeight' => 600,
                     ],
                 ],
             ],
             'yaxis' => [
                 'labels' => [
                     'style' => [
-                        'colors' => '#9ca3af',
-                        'fontWeight' => 600,
+                        'fontFamily' => 'inherit',
                     ],
                 ],
             ],
-            'colors' => ['#6366f1'],
+            'colors' => ['#f59e0b'],
         ];
     }
 }
@@ -267,7 +273,7 @@ protected function getFormSchema(): array
     return [
         TextInput::make('title')
             ->default('My Chart')
-            ->reactive()
+            ->live()
             ->afterStateUpdated(function () {
                 $this->updateChartOptions();
             }),
@@ -403,6 +409,58 @@ protected function getOptions(): array
 }
 ```
 
+## Extra options and Formatters
+
+You can use the `extraJsOptions` method to add additional options to the chart:
+
+```php
+protected function extraJsOptions(): ?RawJs
+{
+    return RawJs::make(<<<'JS'
+    {
+        xaxis: {
+            labels: {
+                formatter: function (val, timestamp, opts) {
+                    return val + '/24'
+                }
+            }
+        },
+        yaxis: {
+            labels: {
+                formatter: function (val, index) {
+                    return '$' + val
+                }
+            }
+        },
+        tooltip: {
+            x: {
+                formatter: function (val) {
+                    return val + '/24'
+                }
+            }
+        },
+        dataLabels: {
+            enabled: true,
+            formatter: function (val, opt) {
+                return opt.w.globals.labels[opt.dataPointIndex] + ': $' + val
+            },
+            dropShadow: {
+                enabled: true
+            },
+        }
+    }
+    JS);
+}
+```
+
+## Publishing views
+
+Optionally, you can publish the views using:
+
+```bash
+php artisan vendor:publish --tag="filament-apex-charts-views"
+```
+
 ## Testing
 
 ```bash

apexcharts.js

@@ -0,0 +1,58 @@
+import ApexCharts from 'apexcharts'
+var merge = require('lodash.merge');
+
+export default function apexcharts({
+    options,
+    chartId,
+    theme,
+    extraJsOptions
+}) {
+    return {
+        chart: null,
+        options,
+        chartId,
+        theme,
+        extraJsOptions,
+        init: function () {
+
+            this.$wire.$on('updateOptions', ({ options }) => {
+
+                options = merge(options, this.extraJsOptions)
+                this.updateChart(options)
+            })
+
+            Alpine.effect(() => {
+
+                const theme = Alpine.store('theme')
+
+                this.$nextTick(() => {
+
+                    if (this.chart === null) {
+                        this.initChart()
+                    } else {
+
+                        this.updateChart({
+                            theme: { mode: theme },
+                            chart: {
+                                background: 'inherit'
+                            }
+                        })
+                    }
+                })
+            })
+        },
+        initChart: function () {
+
+            this.options.theme = { mode: this.theme }
+            this.options.chart.background = 'inherit'
+
+            this.options = merge(this.options, this.extraJsOptions)
+
+            this.chart = new ApexCharts(document.querySelector(this.chartId), this.options)
+            this.chart.render()
+        },
+        updateChart: function (options) {
+            this.chart.updateOptions(options, false, true, true)
+        },
+    }
+}

bin/build.js

@@ -0,0 +1,50 @@
+import * as esbuild from 'esbuild'
+
+const isDev = process.argv.includes('--dev')
+
+async function compile(options) {
+    const context = await esbuild.context(options)
+
+    if (isDev) {
+        await context.watch()
+    } else {
+        await context.rebuild()
+        await context.dispose()
+    }
+}
+
+const defaultOptions = {
+    define: {
+        'process.env.NODE_ENV': isDev ? `'development'` : `'production'`,
+    },
+    bundle: true,
+    mainFields: ['module', 'main'],
+    platform: 'neutral',
+    sourcemap: isDev ? 'inline' : false,
+    sourcesContent: isDev,
+    treeShaking: true,
+    target: ['es2020'],
+    minify: !isDev,
+    plugins: [{
+        name: 'watchPlugin',
+        setup: function (build) {
+            build.onStart(() => {
+                console.log(`Build started at ${new Date(Date.now()).toLocaleTimeString()}: ${build.initialOptions.outfile}`)
+            })
+
+            build.onEnd((result) => {
+                if (result.errors.length > 0) {
+                    console.log(`Build failed at ${new Date(Date.now()).toLocaleTimeString()}: ${build.initialOptions.outfile}`, result.errors)
+                } else {
+                    console.log(`Build finished at ${new Date(Date.now()).toLocaleTimeString()}: ${build.initialOptions.outfile}`)
+                }
+            })
+        }
+    }],
+}
+
+compile({
+    ...defaultOptions,
+    entryPoints: ['./apexcharts.js'],
+    outfile: './dist/apexcharts.js',
+})

composer.json

@@ -24,10 +24,10 @@
         "spatie/laravel-package-tools": "^1.13.0"
     },
     "require-dev": {
+        "larastan/larastan": "^2.0.1",
         "laravel/pint": "^1.0",
         "nunomaduro/collision": "^6.0|^7.0",
-        "nunomaduro/larastan": "^2.0.1",
-        "orchestra/testbench": "^7.0|^8.0",
+        "orchestra/testbench": "8.14",
         "pestphp/pest": "^1.21",
         "pestphp/pest-plugin-laravel": "^1.1",
         "phpstan/extension-installer": "^1.1",
@@ -71,4 +71,4 @@
     },
     "minimum-stability": "dev",
     "prefer-stable": true
-}
+}

config/filament-apex-charts.php

@@ -24,5 +24,6 @@
         'Scatter',
         'TimelineRangeBars',
         'Treemap',
+        'Funnel',
     ],
 ];