Support Nova 4 (#11)

dcasia · Oct 28, 2023 · 3ea564a · 3ea564a
1 parent 909016c
commit 3ea564a
Show file tree

Hide file tree

Showing 48 changed files with 6,142 additions and 11,146 deletions.
diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml
@@ -0,0 +1,13 @@
+# These are supported funding model platforms
+
+github: milewski
+patreon: # Replace with a single Patreon username
+open_collective: # Replace with a single Open Collective username
+ko_fi: # Replace with a single Ko-fi username
+tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
+community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
+liberapay: # Replace with a single Liberapay username
+issuehunt: # Replace with a single IssueHunt username
+otechie: # Replace with a single Otechie username
+lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry
+custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']
diff --git a/LICENSE b/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 Digital Creative
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/README.md b/README.md
@@ -2,130 +2,103 @@
 
 [![Latest Version on Packagist](https://img.shields.io/packagist/v/digital-creative/chartjs-widget)](https://packagist.org/packages/digital-creative/chartjs-widget)
 [![Total Downloads](https://img.shields.io/packagist/dt/digital-creative/chartjs-widget)](https://packagist.org/packages/digital-creative/chartjs-widget)
-[![License](https://img.shields.io/packagist/l/digital-creative/chartjs-widget)](https://github.com/dcasia/chartjs-widget/blob/master/LICENSE)
+[![License](https://img.shields.io/packagist/l/digital-creative/chartjs-widget)](https://github.com/dcasia/chartjs-widget/blob/main/LICENSE)
 
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/dcasia/chartjs-widget/main/screenshots/dark.png">
+  <img alt="Nova ChartJs Widget" src="https://raw.githubusercontent.com/dcasia/chartjs-widget/main/screenshots/light.png">
+</picture>
 
-# Documentation 
+A ChartJs widget for laravel [Nova Dashboard](https://github.com/dcasia/nova-dashboard).
 
-WIP
+# Installation
 
-Basic sample meanwhile docs is not ready:
+You can install the package via composer:
 
-```php
-<?php
+```
+composer require digital-creative/chartjs-widget
+```
 
-declare(strict_types = 1);
+## Basic Usage
 
-namespace App\Nova\Dashboards\Widgets;
+Most of the configuration options can be inferred directly from the official [Chart.js documentation](https://www.chartjs.org/docs/latest/configuration/#configuration).
 
-use DigitalCreative\ChartJsWidget\Color;
-use DigitalCreative\ChartJsWidget\DataSet;
-use DigitalCreative\ChartJsWidget\Gradient;
-use DigitalCreative\ChartJsWidget\LineChartWidget;
-use DigitalCreative\ChartJsWidget\Style;
-use DigitalCreative\ChartJsWidget\ValueResult;
+```php
+use DigitalCreative\ChartJsWidget\Charts\BarChartWidget;
 use DigitalCreative\NovaDashboard\Filters;
 use Illuminate\Support\Collection;
-use Laravel\Nova\Fields\Select;
+use Laravel\Nova\Http\Requests\NovaRequest;
 
-class SampleLineChart extends LineChartWidget
+class Example extends BarChartWidget
 {
-
-    public const SOURCE = 'source';
-    public const SOURCE_SAMPLE1 = 'sample1';
-    public const SOURCE_SAMPLE2 = 'sample2';
-
-    public function getRandomData($min = 1, $max = 100): array
+    public function configure(NovaRequest $request): void
     {
-        return [
-            random_int($min, $max),
-            random_int($min, $max),
-            random_int($min, $max),
-            random_int($min, $max),
-            random_int($min, $max),
-            random_int($min, $max),
-            random_int($min, $max),
-            random_int($min, $max),
-            random_int($min, $max),
-        ];
-    }
+        /**
+         * These set the title and the button on the top-right if there are multiple "tabs" on this view
+         */
+        $this->title('Example BarChart');
+        $this->buttonTitle('BarChart');
+        $this->backgroundColor(dark: '#1e293b', light: '#ffffff');
 
-    public function resolveValue(Collection $options, Filters $filters): ValueResult
-    {
+        $this->padding(top: 30, bottom: 5);
+
+        $this->tooltip([]); // https://www.chartjs.org/docs/latest/configuration/tooltip.html#tooltip
+        $this->scales([]);  // https://www.chartjs.org/docs/latest/axes/#axes
+        $this->legend([]);  // https://www.chartjs.org/docs/latest/configuration/legend.html#legend
+        $this->elements();  // https://www.chartjs.org/docs/latest/configuration/elements.html#elements
 
         /**
-         * Some basic stylish settings
+         * These will create another tab on the same view, it doesn't necessarily need to be
+         * another chart of the same type it can be any other chart.
          */
-        $baseConfiguration = Style::make()
-                                    ->fill('origin')
-                                    ->pointBorderWidth(2)
-                                    ->pointHitRadius(10)
-                                    ->pointRadius(4)
-                                    ->pointHoverRadius(4)
-                                    ->borderWidth(2)
-                                    ->pointHoverBorderWidth(4)
-                                    ->pointHoverRadius(8);
-
-        if ($options->get(self::SOURCE) === self::SOURCE_SAMPLE1) {
-
-            /**
-             * Customize some options based on the dataset
-             */
-            $set1Configuration = $baseConfiguration->clone()
-                                                   ->color('#00c6fb')
-                                                   ->pointBorderColor(new Color('white'))
-                                                   ->backgroundColor(
-                                                       new Gradient([ 'rgba(0, 198, 251, .8)', 'rgba(255,255,255,0)' ], Gradient::VERTICAL)
-                                                   );
-
-            $set2Configuration = $baseConfiguration->clone()
-                                                   ->color('#005bea')
-                                                   ->fill('origin')
-                                                   ->pointBorderColor('white')
-                                                   ->backgroundColor([ 'rgba(0, 91, 234,.8)', 'rgba(255,255,255,0)', Gradient::VERTICAL ]);
-
-            $dataset1 = DataSet::make('Sample 1', $this->getRandomData(), $set1Configuration);
-            $dataset2 = DataSet::make('Sample 2', $this->getRandomData(), $set2Configuration);
-
-            return ValueResult::make()
-                        ->labels($this->getRandomData())
-                        ->addDataset(
-                            $dataset1, $dataset2
-                        );
-
-        }
-
-        return ValueResult::make()
-                    ->labels($this->getRandomData())
-                    ->addDataset(
-                        DataSet::make('Hello', $this->getRandomData(), $baseConfiguration->color([ '#FAD961', '#F76B1C' ])
-                                                                            ->pointBorderColor('white')
-                    ));
-
+        $this->addTab(Chart2::class);
+        $this->addTab(Chart3::class);
     }
 
-    public function fields(): array
+    public function value(Filters $filters): array
     {
-        return array_merge([
-
-            Select::make('Data Source', self::SOURCE)
-                  ->options([
-                      self::SOURCE_SAMPLE1 => 'Data source 1',
-                      self::SOURCE_SAMPLE2 => 'Data source 2',
-                  ]),
-
-            /**
-             * You could let the user choose the color style by creating something like this:
-             */
-            Select::make('Color Preset', 'colorsPreset')
-                  ->options([
-                      'orange' => 'Orange',
-                      'red' => 'Red',
-                  ]),
-
-        ], parent::fields());
-
+        return [
+            'labels' => Collection::range(0, 5)->map(fn () => fake()->word()),
+            'datasets' => Collection::range(0, 5)->map(fn () => [
+                'data' => Collection::range(0, 5)->map(fn () => fake()->numberBetween(0, 100)),
+            ]),
+        ];
     }
 }
-
 ```
+
+All chart types are available:
+
+- [BarChartWidget](https://www.chartjs.org/docs/latest/charts/bar.html)
+- [BubbleChartWidget](https://www.chartjs.org/docs/latest/charts/bubble.html)
+- [DoughnutChartWidget](https://www.chartjs.org/docs/latest/charts/doughnut.html)
+- [LineChartWidget](https://www.chartjs.org/docs/latest/charts/line.html)
+- [PieChartWidget](https://www.chartjs.org/docs/latest/charts/doughnut.html#pie)
+- [PolarAreaChartWidget](https://www.chartjs.org/docs/latest/charts/polar.html)
+- [RadarChartWidget](https://www.chartjs.org/docs/latest/charts/radar.html)
+- [ScatterChartWidget](https://www.chartjs.org/docs/latest/charts/scatter.html)
+
+## ⭐️ Show Your Support
+
+Please give a ⭐️ if this project helped you!
+
+### Other Packages You Might Like
+
+- [Nova Welcome Card](https://github.com/dcasia/nova-welcome-card) - A configurable version of the `Help card` that comes with Nova.
+- [Icon Action Toolbar](https://github.com/dcasia/icon-action-toolbar) - Replaces the default boring action menu with an inline row of icon-based actions.
+- [Expandable Table Row](https://github.com/dcasia/expandable-table-row) - Provides an easy way to append extra data to each row of your resource tables.
+- [Collapsible Resource Manager](https://github.com/dcasia/collapsible-resource-manager) - Provides an easy way to order and group your resources on the sidebar.
+- [Resource Navigation Tab](https://github.com/dcasia/resource-navigation-tab) - Organize your resource fields into tabs.
+- [Resource Navigation Link](https://github.com/dcasia/resource-navigation-link) - Create links to internal or external resources.
+- [Nova Mega Filter](https://github.com/dcasia/nova-mega-filter) - Display all your filters in a card instead of a tiny dropdown!
+- [Nova Pill Filter](https://github.com/dcasia/nova-pill-filter) - A Laravel Nova filter that renders into clickable pills.
+- [Nova Slider Filter](https://github.com/dcasia/nova-slider-filter) - A Laravel Nova filter for picking range between a min/max value.
+- [Nova Range Input Filter](https://github.com/dcasia/nova-range-input-filter) - A Laravel Nova range input filter.
+- [Nova FilePond](https://github.com/dcasia/nova-filepond) - A Nova field for uploading File, Image and Video using Filepond.
+- [Custom Relationship Field](https://github.com/dcasia/custom-relationship-field) - Emulate HasMany relationship without having a real relationship set between resources.
+- [Column Toggler](https://github.com/dcasia/column-toggler) - A Laravel Nova package that allows you to hide/show columns in the index view.
+- [Batch Edit Toolbar](https://github.com/dcasia/batch-edit-toolbar) - Allows you to update a single column of a resource all at once directly from the index page.
+
+## License
+
+The MIT License (MIT). Please see [License File](https://raw.githubusercontent.com/dcasia/chartjs-widget/main/LICENSE) for more information.
diff --git a/composer.json b/composer.json
@@ -1,9 +1,17 @@
 {
     "name": "digital-creative/chartjs-widget",
-    "description": "A Laravel Nova asset.",
+    "description": "A chartjs widget for laravel nova-dashboard.",
     "keywords": [
         "laravel",
-        "nova"
+        "nova",
+        "chartjs",
+        "dashboard",
+        "nova-dashboard"
+    ],
+    "authors": [
+        {
+            "name": "Rafael Milewski"
+        }
     ],
     "license": "MIT",
     "require": {

diff --git a/dist/css/widget.css b/dist/css/widget.css
diff --git a/dist/js/widget.js b/dist/js/widget.js
diff --git a/dist/js/widget.js.LICENSE.txt b/dist/js/widget.js.LICENSE.txt
@@ -1,19 +1,20 @@
 /*!
- * Chart.js v2.9.3
+ * @kurkle/color v0.3.2
+ * https://github.com/kurkle/color#readme
+ * (c) 2023 Jukka Kurkela
+ * Released under the MIT License
+ */
+
+/*!
+ * Chart.js v4.4.0
  * https://www.chartjs.org
- * (c) 2019 Chart.js Contributors
+ * (c) 2023 Chart.js Contributors
  * Released under the MIT License
  */
 
 /*!
- * chartjs-plugin-colorschemes v0.4.0
- * https://nagix.github.io/chartjs-plugin-colorschemes
- * (c) 2019 Akihiko Kusanagi
+ * chartjs-plugin-datalabels v2.2.0
+ * https://chartjs-plugin-datalabels.netlify.app
+ * (c) 2017-2022 chartjs-plugin-datalabels contributors
  * Released under the MIT license
  */
-
-//! moment.js
-
-//! moment.js language configuration
-
-//! moment.js locale configuration
diff --git a/dist/mix-manifest.json b/dist/mix-manifest.json
@@ -1,3 +1,4 @@
 {
-    "/js/widget.js": "/js/widget.js"
+    "/js/widget.js": "/js/widget.js",
+    "/css/widget.css": "/css/widget.css"
 }
diff --git a/nova.mix.js b/nova.mix.js
@@ -0,0 +1,31 @@
+const mix = require('laravel-mix')
+const webpack = require('webpack')
+const path = require('path')
+
+class NovaExtension {
+    name() {
+        return 'nova-extension'
+    }
+
+    register(name) {
+        this.name = name
+    }
+
+    webpackConfig(webpackConfig) {
+        webpackConfig.externals = {
+            vue: 'Vue',
+        }
+
+        webpackConfig.resolve.alias = {
+            ...(webpackConfig.resolve.alias || {}),
+            'laravel-nova-ui': path.join(__dirname, '../../vendor/laravel/nova/node_modules/laravel-nova-ui'),
+            'laravel-nova': path.join(__dirname, '../../vendor/laravel/nova/resources/js/mixins/packages.js'),
+        }
+
+        webpackConfig.output = {
+            uniqueName: this.name,
+        }
+    }
+}
+
+mix.extend('nova', new NovaExtension())