From 1322665482e94e00aaae918072f06f0219b01c24 Mon Sep 17 00:00:00 2001 From: manhofmann Date: Tue, 7 Nov 2023 20:46:09 +0100 Subject: [PATCH 1/4] docs: add info how to use time cartesian axis --- packages/widgets/docs/03-charts.md | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/packages/widgets/docs/03-charts.md b/packages/widgets/docs/03-charts.md index 97feb9d4e8..576d3fd976 100644 --- a/packages/widgets/docs/03-charts.md +++ b/packages/widgets/docs/03-charts.md @@ -252,3 +252,19 @@ To disable this behavior, you may override the `$isLazy` property on the widget ```php protected static bool $isLazy = true; ``` + +## Time Cartesian Axis + +To enable [Time Cartesian Axis](https://www.chartjs.org/docs/latest/axes/cartesian/time.html) you must add a date adapter to Chart.js. This means you must compile your own javascript chart.js file and replace it with the one provided by Filament. Currently there is no built in way to replace existing Filament javascript files with your own, you have to do this in your deploy script after the `php artisan filament:assets` command has been run. + +Your custom chart.js file might look like this: +```js +export { default as chart } from '../../vendor/filament/widgets/resources/js/components/chart.js'; +import 'chartjs-adapter-luxon'; // or any other date adapter +``` + +Compile this file and save it at this location in your app root directory: + +` +/public/js/filament/widgets/components/chart.js +` \ No newline at end of file From 7b58084daa5656ef594429c8fcf25cb0a73c0e69 Mon Sep 17 00:00:00 2001 From: manhofmann Date: Wed, 8 Nov 2023 20:22:09 +0100 Subject: [PATCH 2/4] docs: remove chapter --- packages/widgets/docs/03-charts.md | 18 +----------------- 1 file changed, 1 insertion(+), 17 deletions(-) diff --git a/packages/widgets/docs/03-charts.md b/packages/widgets/docs/03-charts.md index 576d3fd976..52dcf2d216 100644 --- a/packages/widgets/docs/03-charts.md +++ b/packages/widgets/docs/03-charts.md @@ -251,20 +251,4 @@ To disable this behavior, you may override the `$isLazy` property on the widget ```php protected static bool $isLazy = true; -``` - -## Time Cartesian Axis - -To enable [Time Cartesian Axis](https://www.chartjs.org/docs/latest/axes/cartesian/time.html) you must add a date adapter to Chart.js. This means you must compile your own javascript chart.js file and replace it with the one provided by Filament. Currently there is no built in way to replace existing Filament javascript files with your own, you have to do this in your deploy script after the `php artisan filament:assets` command has been run. - -Your custom chart.js file might look like this: -```js -export { default as chart } from '../../vendor/filament/widgets/resources/js/components/chart.js'; -import 'chartjs-adapter-luxon'; // or any other date adapter -``` - -Compile this file and save it at this location in your app root directory: - -` -/public/js/filament/widgets/components/chart.js -` \ No newline at end of file +``` \ No newline at end of file From 1acf7ce5201500c4173f08b357b7f39f224ab74d Mon Sep 17 00:00:00 2001 From: manhofmann Date: Wed, 8 Nov 2023 20:22:47 +0100 Subject: [PATCH 3/4] add luxon adapter fot Chart.js --- packages/widgets/resources/js/components/chart.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/widgets/resources/js/components/chart.js b/packages/widgets/resources/js/components/chart.js index 500c7d3da7..0c9982e3d9 100644 --- a/packages/widgets/resources/js/components/chart.js +++ b/packages/widgets/resources/js/components/chart.js @@ -1,4 +1,5 @@ import Chart from 'chart.js/auto' +import 'chartjs-adapter-luxon'; export default function chart({ cachedData, options, type }) { return { From 7e93825201a5c4f1c406735c251ccbd803a00f68 Mon Sep 17 00:00:00 2001 From: manhofmann Date: Wed, 8 Nov 2023 20:39:26 +0100 Subject: [PATCH 4/4] add node packages --- package-lock.json | 21 +++++++++++++++++++++ package.json | 2 ++ 2 files changed, 23 insertions(+) diff --git a/package-lock.json b/package-lock.json index ff2af62a04..a2f167c348 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17,6 +17,7 @@ "async-alpine": "^1.0.0", "autoprefixer": "^10.4.0", "chart.js": "^3.6.0", + "chartjs-adapter-luxon": "^1.3.1", "choices.js": "^10.1.0", "codemirror": "^5.65.8", "cropperjs": "^1.5.13", @@ -36,6 +37,7 @@ "filepond-plugin-media-preview": "^1.0.9", "laravel-echo": "^1.14.0", "laravel-mix": "^6.0.37", + "luxon": "^3.4.3", "npm-run-all": "^4.1.5", "postcss": "^8.4.4", "prettier": "^2.7.1", @@ -3857,6 +3859,16 @@ "integrity": "sha512-Ro2JbLmvg83gXF5F4sniaQ+lTbSv18E+TIf2cOeiH1Iqd2PGFOtem+DUufMZsCJwFE7ywPOpfXFBwRTGq7dh6w==", "dev": true }, + "node_modules/chartjs-adapter-luxon": { + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/chartjs-adapter-luxon/-/chartjs-adapter-luxon-1.3.1.tgz", + "integrity": "sha512-yxHov3X8y+reIibl1o+j18xzrcdddCLqsXhriV2+aQ4hCR66IYFchlRXUvrJVoxglJ380pgytU7YWtoqdIgqhg==", + "dev": true, + "peerDependencies": { + "chart.js": ">=3.0.0", + "luxon": ">=1.0.0" + } + }, "node_modules/choices.js": { "version": "10.2.0", "resolved": "https://registry.npmjs.org/choices.js/-/choices.js-10.2.0.tgz", @@ -7219,6 +7231,15 @@ "yallist": "^3.0.2" } }, + "node_modules/luxon": { + "version": "3.4.3", + "resolved": "https://registry.npmjs.org/luxon/-/luxon-3.4.3.tgz", + "integrity": "sha512-tFWBiv3h7z+T/tDaoxA8rqTxy1CHV6gHS//QdaH4pulbq/JuBSGgQspQQqcgnwdAx6pNI7cmvz5Sv/addzHmUg==", + "dev": true, + "engines": { + "node": ">=12" + } + }, "node_modules/make-dir": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz", diff --git a/package.json b/package.json index 1d140ac3ac..f90a75216f 100644 --- a/package.json +++ b/package.json @@ -24,6 +24,7 @@ "async-alpine": "^1.0.0", "autoprefixer": "^10.4.0", "chart.js": "^3.6.0", + "chartjs-adapter-luxon": "^1.3.1", "choices.js": "^10.1.0", "codemirror": "^5.65.8", "cropperjs": "^1.5.13", @@ -43,6 +44,7 @@ "filepond-plugin-media-preview": "^1.0.9", "laravel-echo": "^1.14.0", "laravel-mix": "^6.0.37", + "luxon": "^3.4.3", "npm-run-all": "^4.1.5", "postcss": "^8.4.4", "prettier": "^2.7.1",