apex for Nova 4 with filter

.gitignore

@@ -0,0 +1,10 @@
+/.idea
+/vendor
+/node_modules
+package-lock.json
+composer.phar
+composer.lock
+phpunit.xml
+.phpunit.result.cache
+.DS_Store
+Thumbs.db

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.

README.md

@@ -0,0 +1,81 @@
+# Nova Apex Chart
+
+[![Latest Version on Packagist](https://img.shields.io/packagist/v/lonnyx/nova-apex-chart)](https://packagist.org/packages/lonnyx/nova-apex-chart)
+[![Total Downloads](https://img.shields.io/packagist/dt/lonnyx/nova-apex-chart)](https://packagist.org/packages/lonnyx/nova-apex-chart)
+[![License](https://img.shields.io/packagist/l/lonnyx/nova-apex-chart)](https://github.com/lonnyx/nova-apex-chart/blob/master/LICENSE)
+
+A Laravel Nova ApexCharts Component
+
+This package is a fork of `dcasia/nova-apex-chart`, compatible with Nova 4 and with date filter
+
+[ApexCharts Documentation](https://apexcharts.com/docs/series/#)
+
+![SliderFilter in Action](https://raw.githubusercontent.com/lonnyx/nova-apex-chart/master/screenshot.png)
+
+# Installation
+
+You can install the package via composer:
+
+```
+composer require lonnyx/nova-apex-chart
+```
+
+## Basic Usage
+
+```php
+class ExampleNovaResource extends Resource
+{
+
+    public function cards(Request $request)
+        {
+
+            return [
+                (new NovaApexChart())
+                    ->type('bar')
+                    ->series(
+                        [
+                            new DataOnlySeries([ 400, 430, 448, 470, 540, 580, 690, 1100, 1200, 1380 ])
+                        ])
+                    ->options([
+                        'xaxis' => [
+                            'categories' => [ 'Jan', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct' ]
+                        ],
+                        'tooltip' => [
+                            'y' => [
+                                'formatter' => new BasicFormatter('$', 'USD')
+                            ]
+                        ]
+                    ])
+            ];
+        }
+
+}
+```
+
+Create basic series by calling
+```php
+use LonnyX\NovaApexChart\BasicSeries;
+new BasicSeries('title', [ 400, 430, 448, 470, 540, 580, 690, 1100, 1200, 1380 ]);
+```
+
+Create data only series by calling
+```php
+use LonnyX\NovaApexChart\DataOnlySeries;
+new DataOnlySeries([ 400, 430, 448, 470, 540, 580, 690, 1100, 1200, 1380 ]);
+```
+
+Create custom formatter
+```php
+use LonnyX\NovaApexChart\formatter\BasicFormatter;
+new BasicFormatter('$', 'USD');
+```
+
+Show comma separated numbers
+```php
+use LonnyX\NovaApexChart\formatter\BasicFormatter;
+new BasicFormatter('', '', true);
+```
+
+## License
+
+The MIT License (MIT). Please see [License File](https://raw.githubusercontent.com/lonnyx/nova-slider-filter/master/LICENSE) for more information.

composer.json

@@ -0,0 +1,31 @@
+{
+    "name": "lonnyx/nova-apex-chart",
+    "description": "A Laravel Nova Apex Chart Component.",
+    "keywords": [
+        "laravel",
+        "nova",
+        "apex chart",
+        "chart"
+    ],
+    "license": "MIT",
+    "require": {
+        "php": ">=8.0"
+    },
+    "autoload": {
+        "psr-4": {
+            "LonnyX\\NovaApexChart\\": "src/"
+        }
+    },
+    "extra": {
+        "laravel": {
+            "providers": [
+                "LonnyX\\NovaApexChart\\CardServiceProvider"
+            ]
+        }
+    },
+    "config": {
+        "sort-packages": true
+    },
+    "minimum-stability": "dev",
+    "prefer-stable": true
+}

dist/js/nova-apex-chart.js.LICENSE.txt

@@ -0,0 +1,21 @@
+/*!
+ * ApexCharts v3.35.3
+ * (c) 2018-2022 ApexCharts
+ * Released under the MIT License.
+ */
+
+/*!
+ * vuex v4.0.2
+ * (c) 2021 Evan You
+ * @license MIT
+ */
+
+/*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */
+
+/*! svg.draggable.js - v2.2.2 - 2019-01-08
+* https://github.com/svgdotjs/svg.draggable.js
+* Copyright (c) 2019 Wout Fierens; Licensed MIT */
+
+/*! svg.filter.js - v2.0.2 - 2016-02-24
+* https://github.com/wout/svg.filter.js
+* Copyright (c) 2016 Wout Fierens; Licensed MIT */

dist/mix-manifest.json

@@ -0,0 +1,4 @@
+{
+    "/js/nova-apex-chart.js": "/js/nova-apex-chart.js",
+    "/index.css": "/index.css"
+}

nova.mix.js

@@ -0,0 +1,33 @@
+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": path.join(
+                __dirname,
+                "../../vendor/laravel/nova/resources/js/mixins/packages.js"
+            )
+        };
+
+        webpackConfig.output = {
+            uniqueName: this.name
+        };
+    }
+}
+
+mix.extend("nova", new NovaExtension());

package.json

@@ -0,0 +1,25 @@
+{
+    "private": true,
+    "scripts": {
+        "dev": "npm run development",
+        "development": "mix",
+        "watch": "mix watch",
+        "watch-poll": "mix watch -- --watch-options-poll=1000",
+        "hot": "mix watch --hot",
+        "prod": "npm run production",
+        "production": "mix --production",
+        "nova:install": "npm --prefix='../../vendor/laravel/nova' ci"
+    },
+    "devDependencies": {
+        "@vue/compiler-sfc": "^3.2.22",
+        "laravel-mix": "^6.0.41",
+        "postcss": "^8.3.11",
+        "vue-loader": "^16.8.3"
+    },
+    "dependencies": {
+        "apexcharts": "^3.10.1",
+        "comma-number": "^2.0.1",
+        "litepie-datepicker": "^1.0.14",
+        "vue3-apexcharts": "^1.4.1"
+    }
+}

postcss.config.js

@@ -0,0 +1 @@
+module.exports = {};

resources/css/index.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

resources/js/components/BaseNovaApexChart.vue

@@ -0,0 +1,109 @@
+<template>
+    <LoadingCard :loading="loading" class="px-6 py-4">
+        <div class="h-6 flex items-center mb-4">
+            <h3 v-if="title" class="mr-3 leading-tight text-sm font-bold">{{ title }}</h3>
+
+            <HelpTextTooltip v-if="helpText" :text="helpText" :width="helpWidth" />
+
+            <div class="ml-auto w-[16rem] flex-shrink-0">
+                <litepie-datepicker :placeholder="datePlaceHolder || '-'" :formatter="dateFormatter" separator=" - " v-model="dateValue">
+                </litepie-datepicker>
+            </div>
+        </div>
+
+        <div class="mb-4" v-if="series">
+            <apexchart :width="chartWidth" :height="chartHeight" :type="chartType" :options="options" :series="series">
+            </apexchart>
+        </div>
+    </LoadingCard>
+</template>
+
+<style>
+  @import '/index.css';
+</style>
+
+<script>
+import VueApexCharts from "vue3-apexcharts";
+import commaNumber from 'comma-number'
+import LitepieDatepicker from 'litepie-datepicker';
+
+export default {
+    name: 'BaseNovaApexChart',
+
+    components: {
+        'apexchart': VueApexCharts,
+        'litepie-datepicker': LitepieDatepicker
+    },
+
+    emits: ['selected'],
+
+    data() {
+        return {
+            dateValue: {
+                startDate: '',
+                endDate: '',
+            },
+            dateFormatter: {
+                date: 'YYYY-MM-DD',
+                month: 'MM'
+            }
+        }
+    },
+    watch: {
+        dateValue: function (val, oldVal) {
+            this.handleChange(val);
+        }
+    },
+    props: {
+        chartWidth : '',
+        chartHeight : '',
+        chartType : '',
+        datePlaceHolder : '',
+        series : '',
+        options : '',
+        loading: { default: true },
+        title: {},
+        helpText: {},
+        helpWidth: {},
+        maxWidth: {},
+    },
+
+    methods: {
+        handleChange(event) {
+            let value = event?.target?.value || event
+
+            this.$emit('selected', value)
+        },
+        handleFormatter(options) {
+            Object.keys(options).forEach(key => {
+
+                if (key === 'formatter') {
+                    const prefix = options[key].prefix || ''
+                    const suffix = options[key].suffix || ''
+                    const showComma = options[key].showComma || false
+                    options[key] = function (val) {
+                        const finalValue = showComma ? commaNumber(val) : val
+                        return `${prefix} ${finalValue} ${suffix}`
+                    }
+                }
+
+                if (typeof options[key] === 'object') {
+                    this.handleFormatter(options[key])
+                }
+            })
+
+        }
+    },
+
+    computed: {
+        options() {
+            if (!this.options) {
+                return;
+            }
+            const options = this.options
+            this.handleFormatter(options)
+            return options
+        }
+    },
+}
+</script>