Merge branch 'release/2.0.2'

leandrocfe · Jul 30, 2023 · a8167ca · a8167ca
2 parents f34bb0c + ee03079
commit a8167ca
Show file tree

Hide file tree

Showing 21 changed files with 480 additions and 385 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,14 +5,45 @@ 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/).
 
+## 2.0.2
+
+### Changed
+
+-   Code refactored.
+
+## 2.0.1
+
+### Fixed
+
+-   Filter form position.
+
+## 2.0.0
+
+### Added
+
+-   Ability to hide header.
+-   Subheading.
+
+### Changed
+
+-   Code refactored.
+-   Dark mode improvements.
+
 ## 1.0.3
 
 ### Fixed
 
+<<<<<<< HEAD
+
 -   Add x-cloak to dropdown filter by [howdu](https://github.com/howdu).
 -   Fix duplicate database queries by [howdu](https://github.com/howdu).
 -   ability to hide header content by [Valpuia](https://github.com/Valpuia).
--   Fix dark mode if theme is not set by [billmn](https://github.com/billmn).
+-   # Fix dark mode if theme is not set by [billmn](https://github.com/billmn).
+-   Fix Add x-cloak to dropdown filter by @howdu.
+-   Fix duplicate database queries by @howdu.
+-   Fix ability to hide header content by @Valpuia.
+-   Fix dark mode if theme is not set by @billmn.
+    > > > > > > > feature/widget-refactor
 
 ## 1.0.2
 

diff --git a/README.md b/README.md
@@ -13,7 +13,7 @@
 You can install the package via composer:
 
 ```bash
-composer require leandrocfe/filament-apex-charts
+composer require leandrocfe/filament-apex-charts:"^2.0"
 ```
 
 Optionally, you can publish the views using:
@@ -151,10 +151,20 @@ Optionally, you can use the `getHeading()` method.
 
 You can hide header content by **NOT** providing these
 
-- $heading
-- getHeading()
-- getFormSchema()
-- getOptions()
+-   $heading
+-   getHeading()
+-   getFormSchema()
+-   getOptions()
+
+## Setting a widget subtitle
+
+You may set a widget subtitle:
+
+```php
+protected static ?string $subheading = 'Lorem Ipsum is simply dummy text';
+```
+
+Optionally, you can use the `getSubheading()` method.
 
 ## Setting a chart id
 

diff --git a/resources/views/widgets/apex-chart-widget.blade.php b/resources/views/widgets/apex-chart-widget.blade.php
@@ -1,39 +1,40 @@
 @php
-    $chartId = $this->getChartId();
     $heading = $this->getHeading();
-    $pollingInterval = $this->getPollingInterval();
-    $contentHeight = $this->getContentHeight();
+    $subheading = $this->getSubheading();
     $filters = $this->getFilters();
-    $indicatorsCount = $this->indicatorsCount();
-    $filterForm = $this->form;
-    $readyToLoad = $this->readyToLoad;
-    $getCachedOptions = $this->getCachedOptions();
+    $indicatorsCount = $this->getIndicatorsCount();
+    $darkMode = $this->getDarkMode();
+    $width = 'xs';
+    $pollingInterval = $this->getPollingInterval();
+    $chartId = $this->getChartId();
+    $chartOptions = $this->getOptions();
     $filterFormAccessible = $this->getFilterFormAccessible();
     $loadingIndicator = $this->getLoadingIndicator();
-    $footer = $this->getFooter();
+    $contentHeight = $this->getContentHeight();
     $deferLoading = $this->getDeferLoading();
-    $darkModeEnabled = $this->getDarkMode();
+    $footer = $this->getFooter();
+    $readyToLoad = $this->readyToLoad;
 @endphp
+<x-filament::widget class="filament-widgets-chart-widget filament-apex-charts-widget">
+    <x-filament::card class="filament-apex-charts-card" x-data="{ dropdownOpen: false }"
+        @apexhcharts-dropdown.window="dropdownOpen = event.detail.open">
 
-<x-filament::widget class="filament-widgets-chart-widget">
-    <x-filament::card>
+        <x-filament-apex-charts::header :$heading :$subheading :$filters :$indicatorsCount :$width
+            :$filterFormAccessible>
+            <x-slot:filterForm>
+                {{ $this->form }}
+            </x-slot:filterForm>
+        </x-filament-apex-charts::header>
 
-        <x-filament-apex-charts::widget-content :chartId="$chartId" :pollingInterval="$pollingInterval" :deferLoading="$deferLoading">
+        <x-filament-apex-charts::chart :$chartId :$chartOptions :$contentHeight :$pollingInterval :$loadingIndicator
+            :$darkMode :$deferLoading :$readyToLoad />
 
-            @if ($heading || $filters || ($filterForm && $filterFormAccessible))
-                <x-filament-apex-charts::header :heading="$heading" :filters="$filters"
-                    filterForm="{{ $filterFormAccessible ? $filterForm : null }}" :indicatorsCount="$indicatorsCount" />
-            @endif
-
-            <x-filament-apex-charts::chart :chartId="$chartId" :contentHeight="$contentHeight" :pollingInterval="$pollingInterval" :readyToLoad="$readyToLoad"
-                :getCachedOptions="$getCachedOptions" :loadingIndicator="$loadingIndicator" :darkModeEnabled="$darkModeEnabled" />
-
-            @if ($footer)
-                <div class="relative">
-                    {!! $footer !!}
-                </div>
-            @endif
-        </x-filament-apex-charts::widget-content>
+        @if ($footer)
+            <div class="relative">
+                {!! $footer !!}
+            </div>
+        @endif
 
     </x-filament::card>
+
 </x-filament::widget>
diff --git a/resources/views/widgets/components/chart.blade.php b/resources/views/widgets/components/chart.blade.php
@@ -1,45 +1,37 @@
-<div class="flex items-center justify-center" style="{{ $contentHeight ? 'height: ' . $contentHeight . 'px;' : '' }}">
+@props(['chartId', 'chartOptions', 'contentHeight', 'pollingInterval', 'loadingIndicator', 'deferLoading', 'readyToLoad', 'darkMode'])
+
+<div {!! $deferLoading ? ' wire:init="loadWidget" ' : '' !!} class="flex items-center justify-center filament-apex-charts-chart"
+    style="{{ $contentHeight ? 'height: ' . $contentHeight . 'px;' : '' }}">
     @if ($readyToLoad)
-        <div {!! $pollingInterval ? 'wire:poll.' . $pollingInterval . '="updateChartOptions"' : '' !!} class="w-full" id="{{ $chartId }}" x-data="{
-            chart: null,
-            darkModeEnabled: {{ $darkModeEnabled ? 'true' : 'false' }},
-            mode: localStorage.getItem('theme') || document.documentElement.classList.contains('dark') ? 'dark' : 'light',
-            init: function() {
-                let chart = this.initChart()
-        
-                $wire.on('updateChartOptions', async ({ options }) => {
-        
-                    if (this.darkModeEnabled) {
-                        options.theme.mode = this.mode
-                    }
-        
-                    this.chart.updateOptions(options)
-        
-                })
-                $wire.on('filterChartData', async ({ options }) => {
-                    this.chart.updateOptions(options)
-                })
-            },
-            initChart: function(options = null) {
-        
-                options = options ?? @js($getCachedOptions)
-        
-                if (this.darkModeEnabled) {
-                    options.theme.mode = this.mode
+        <div wire:ignore class="w-full filament-apex-charts-chart-container">
+
+            <div class="filament-apex-charts-chart-object" x-ref="{{ $chartId }}" id="{{ $chartId }}">
+            </div>
+
+            <div {!! $pollingInterval ? 'wire:poll.' . $pollingInterval . '="updateOptions"' : '' !!} x-data="{
+                chart: null,
+                options: @js($chartOptions),
+                theme: {{ $darkMode ? "document.querySelector('html').matches('.dark') ? 'dark' : 'light'" : "'light'" }},
+                init() {
+            
+                    $wire.on('updateOptions', async ({ options }) => {
+                        this.chart.updateOptions(options, false, true, true);
+                    });
+            
+                    this.options.theme = { mode: this.theme };
+                    this.options.chart.background = 'inherit';
+            
+                    this.chart = new ApexCharts($refs.{{ $chartId }}, this.options);
+                    this.chart.render();
                 }
-        
-                this.chart = new ApexCharts(document.querySelector('#{{ $chartId }}'), options)
-        
-                return this.chart.render()
-            },
-        }"
-            x-on:dark-mode-toggled.window="mode = $event.detail" x-init="$watch('mode', () => {
-                @this.updateChartOptions();
-            })" wire:ignore>
+            }"
+                @dark-mode-toggled.window="chart.updateOptions( { theme: { mode: {{ $darkMode ? '$event.detail' : "'light'" }} } } )"
+                x-init="$watch('dropdownOpen', value => $wire.dropdownOpen = value)">
+            </div>
 
         </div>
     @else
-        <div class="m-auto">
+        <div class="filament-apex-charts-chart-loading-indicator m-auto">
             @if ($loadingIndicator)
                 {!! $loadingIndicator !!}
             @else

diff --git a/resources/views/widgets/components/filter-form.blade.php b/resources/views/widgets/components/filter-form.blade.php
@@ -1,11 +1,13 @@
-<div>
+@props(['indicatorsCount', 'width'])
+<div class="filament-apex-charts-filter-form">
     <x-tables::filters.trigger @click="dropdownOpen = !dropdownOpen" :indicators-count="$indicatorsCount" />
 
     <div x-show="dropdownOpen" x-cloak @click="dropdownOpen = false" class="fixed inset-0 h-full w-full z-10"></div>
 
     <div x-show="dropdownOpen" x-cloak @class([
         'absolute right-0 mt-2 divide-y divide-gray-100 rounded-lg bg-white shadow-lg ring-1 ring-black/5 transition z-10',
-        'dark:divide-gray-700 dark:bg-gray-800 dark:ring-white/10' => $darkMode,
+        'dark:divide-gray-700 dark:bg-gray-800 dark:ring-white/10' => config(
+            'filament.dark_mode'),
     ])
         style="{{ match ($width) {
             'xs' => 'width: 20rem;',
@@ -29,7 +31,8 @@
                 <x-tables::button wire:click="submitFiltersForm" color="primary" tag="button" size="sm">
                     {{ __('filament-support::actions/modal.actions.submit.label') }}
                 </x-tables::button>
-                <x-tables::link wire:click="resetFiltersForm" color="danger" tag="button" size="sm">
+                <x-tables::link @click="$wire.resetFiltersForm;dropdownOpen = false" color="danger" tag="button"
+                    size="sm">
                     {{ __('tables::table.filters.buttons.reset.label') }}
                 </x-tables::link>
             </div>

diff --git a/resources/views/widgets/components/header.blade.php b/resources/views/widgets/components/header.blade.php
@@ -1,39 +1,48 @@
-<div>
-    @if ($heading)
-        <div class="flex items-center justify-between gap-8 py-2">
+@props(['heading', 'subheading', 'filters', 'indicatorsCount', 'width', 'filterFormAccessible'])
+<div class="filament-apex-charts-header">
+    @if ($heading || $subheading || $filters || $filterFormAccessible)
+        <div class="sm:flex justify-between gap-4 py-2 relative">
 
-            <x-filament::card.heading>
-                {!! $heading !!}
-            </x-filament::card.heading>
+            <div>
+                @if ($heading)
+                    <x-filament::card.heading class="filament-apex-charts-heading">
+                        {!! $heading !!}
+                    </x-filament::card.heading>
+                @endif
 
-            <div class="relative h-10">
+                @if ($subheading)
+                    <div class="filament-apex-charts-subheading text-sm text-gray-600 dark:text-gray-300">
+                        {!! $subheading !!}
+                    </div>
+                @endif
+            </div>
+
+            <div>
+                @if ($filters)
+                    <select wire:model="filter" @class([
+                        'apex-charts-single-filter w-full text-gray-900 border-gray-300 block h-10 transition duration-75 rounded-lg shadow-sm focus:border-primary-500 focus:ring-1 focus:ring-inset focus:ring-primary-500',
+                        'dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200 dark:focus:border-primary-500' => config(
+                            'filament.dark_mode'),
+                    ]) wire:loading.class="animate-pulse">
+                        @foreach ($filters as $value => $label)
+                            <option value="{{ $value }}">
+                                {{ $label }}
+                            </option>
+                        @endforeach
+                    </select>
+                @endif
+            </div>
 
-                <div class="flex items-center justify-between gap-4">
-                    @if ($filters)
-                        <select wire:model="filter" @class([
-                            'text-gray-900 border-gray-300 block h-10 transition duration-75 rounded-lg shadow-sm focus:border-primary-500 focus:ring-1 focus:ring-inset focus:ring-primary-500',
-                            'dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200 dark:focus:border-primary-500' => config(
-                                'filament.dark_mode'),
-                        ]) wire:loading.class="animate-pulse">
-                            @foreach ($filters as $value => $label)
-                                <option value="{{ $value }}">
-                                    {{ $label }}
-                                </option>
-                            @endforeach
-                        </select>
-                    @endif
+            @if ($filterFormAccessible)
+                <div>
+
+                    <x-filament-apex-charts::filter-form :$indicatorsCount :$width>
+                        {{ $filterForm }}
+                    </x-filament-apex-charts::filter-form>
 
-                    @if ($filterForm)
-                        <x-filament-apex-charts::filter-form width="xs" darkMode="{{ config('filament.dark_mode') }}"
-                            :indicatorsCount="$indicatorsCount">
-                            {!! $filterForm !!}
-                        </x-filament-apex-charts::filter-form>
-                    @endif
                 </div>
-            </div>
+            @endif
 
         </div>
-
-        <x-filament::hr class="py-2" />
     @endif
 </div>
diff --git a/resources/views/widgets/components/widget-content.blade.php b/resources/views/widgets/components/widget-content.blade.php
diff --git a/src/Commands/FilamentApexChartsCommand.php b/src/Commands/FilamentApexChartsCommand.php
@@ -154,20 +154,20 @@ public function getStubContents($stub, $stubVariables = [])
         return $contents;
     }
 
-   /**
-    * Get the full path of generate class
-    *
-    * @return string
-    */
-   public function getSourceFilePath()
-   {
-       $widgetPath = match (PHP_OS_FAMILY) {
-           default => 'app/Filament/Widgets/',
-           'Windows' => 'app\\Filament\\Widgets\\'
-       };
-
-       return base_path($widgetPath).$this->widget.'.php';
-   }
+    /**
+     * Get the full path of generate class
+     *
+     * @return string
+     */
+    public function getSourceFilePath()
+    {
+        $widgetPath = match (PHP_OS_FAMILY) {
+            default => 'app/Filament/Widgets/',
+            'Windows' => 'app\\Filament\\Widgets\\'
+        };
+
+        return base_path($widgetPath).$this->widget.'.php';
+    }
 
     /**
      * Build the directory for the class if necessary.