Skip to content

Commit 0b626ee

Browse files
adrianmihailaadrianmihaila
committed
Support Nova5
1 parent 172f430 commit 0b626ee

18 files changed

Lines changed: 400 additions & 433 deletions

‎CHANGELOG.md‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,22 @@
22

33
```
44
# create tag & push
5-
git tag -a v0.4.2 -m "Release version 0.4.2 to support laravel nova to 4.31"
6-
git push origin v0.4.2
5+
git tag -a v0.5.0 -m "Release version 0.5.0 to support laravel nova 5"
6+
git push origin v0.5.0
77
```
88

99
All notable changes to `chart-js-integration` will be documented in this file
1010

11+
## v0.5.0 - 2024-01-XX
12+
13+
- :sparkles: add new support for Laravel Nova v5.x
14+
- :arrow_up: upgrade to Chart.js v4.x
15+
- :arrow_up: upgrade to vue-chartjs v5.x
16+
- :arrow_up: upgrade dependencies for Nova 5 compatibility
17+
- :wrench: update Vue component registration for Nova 5
18+
- :wrench: update Chart.js scale configuration for v4 compatibility
19+
- :wrench: update minimum PHP version to 8.1
20+
1121
## v0.4.2 - 2023-11-21
1222

1323
- :sparkles: add new support for nova v4.31.x

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# Nova ChartJS - Laravel Nova Package
22

3-
A Laravel Nova Dashboard with Chart JS | See [:blue_book:Documentation Page](https://coroo.github.io/nova-chartjs/)
3+
A Laravel Nova Dashboard with Chart JS for **Laravel Nova 5** | See [:blue_book:Documentation Page](https://coroo.github.io/nova-chartjs/)
44

55
> [!NOTE]
66
> 👋 Welcome to Nova-ChartJS! We believe that great software is built through collaboration, and we invite you to be a part of it. Whether you're a developer, designer, tester, or just someone passionate about the project, there are many ways to contribute.

‎composer.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,8 @@
1717
}
1818
],
1919
"require": {
20-
"php": ">=7.1.0",
21-
"laravel/nova": "^4.0"
20+
"php": ">=8.1.0",
21+
"laravel/nova": "^5.0"
2222
},
2323
"autoload": {
2424
"psr-4": {

‎dist/js/chart-js-integration.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/js/chart-js-integration.js.LICENSE.txt‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,13 @@
11
/*!
2-
* Chart.js v3.7.1
2+
* @kurkle/color v0.3.4
3+
* https://github.com/kurkle/color#readme
4+
* (c) 2024 Jukka Kurkela
5+
* Released under the MIT License
6+
*/
7+
8+
/*!
9+
* Chart.js v4.5.0
310
* https://www.chartjs.org
4-
* (c) 2022 Chart.js Contributors
11+
* (c) 2025 Chart.js Contributors
512
* Released under the MIT License
613
*/

‎package-lock.json‎

Lines changed: 305 additions & 382 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -9,15 +9,15 @@
99
},
1010
"devDependencies": {
1111
"laravel-mix": "^6.0.43",
12-
"vue-loader": "^16.8.3",
13-
"vue-template-compiler": "^2.6.14"
12+
"vue-loader": "^17.0.0",
13+
"@vue/compiler-sfc": "^3.4.0"
1414
},
1515
"dependencies": {
16-
"chart.js": "^3.7.0",
17-
"chartjs-plugin-datalabels": "^2.0.0",
18-
"serialize-javascript": "^4.0.0",
19-
"sweetalert2": "^9.17.1",
20-
"vue": "^3.2.31",
21-
"vue-chartjs": "^4.0.0"
16+
"chart.js": "^4.4.0",
17+
"chartjs-plugin-datalabels": "^2.2.0",
18+
"serialize-javascript": "^6.0.0",
19+
"sweetalert2": "^11.10.0",
20+
"vue": "^3.4.0",
21+
"vue-chartjs": "^5.3.0"
2222
}
2323
}

‎resources/js/bar-chart.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<Bar
3-
:chart-data="chartData"
4-
:chart-options="options"
3+
:data="chartData"
4+
:options="options"
55
:height="height"
66
:plugins="plugins"
77
/>

‎resources/js/chart-js-integration.js‎

Lines changed: 41 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,18 @@
11
import ChartDataLabels from 'chartjs-plugin-datalabels';
2-
import { Chart, registerables } from 'chart.js';
2+
import {
3+
Chart as ChartJS,
4+
CategoryScale,
5+
LinearScale,
6+
PointElement,
7+
LineElement,
8+
BarElement,
9+
ArcElement,
10+
RadialLinearScale,
11+
Title,
12+
Tooltip,
13+
Legend,
14+
Filler
15+
} from 'chart.js';
316

417
import StackedChart from './components/StackedChart'
518
import BarChart from './components/BarChart'
@@ -9,20 +22,36 @@ import PieChart from './components/PieChart'
922
import PolarAreaChart from './components/PolarAreaChart'
1023
import ScatterChart from './components/ScatterChart'
1124

12-
Nova.booting((Vue) => {
25+
Nova.booting((app) => {
26+
// Register Chart.js components
27+
ChartJS.register(
28+
CategoryScale,
29+
LinearScale,
30+
PointElement,
31+
LineElement,
32+
BarElement,
33+
ArcElement,
34+
RadialLinearScale,
35+
Title,
36+
Tooltip,
37+
Legend,
38+
Filler
39+
);
40+
1341
const textColor = getComputedStyle(document.documentElement)
1442
.getPropertyValue('--colors-gray-400');
1543

16-
Chart.unregister(ChartDataLabels);
17-
Chart.register(...registerables);
18-
Chart.defaults.color = `rgba(${textColor}, 1)`;
44+
ChartJS.defaults.color = `rgba(${textColor}, 1)`;
45+
46+
// Make Chart available globally for Nova 5
47+
window.Chart = ChartJS;
1948

20-
Vue.component('stacked-chart', StackedChart);
21-
Vue.component('bar-chart', BarChart);
22-
Vue.component('stripe-chart', LineChart);
23-
Vue.component('doughnut-chart', DoughnutChart);
24-
Vue.component('pie-chart', PieChart);
25-
Vue.component('polar-area-chart', PolarAreaChart);
26-
Vue.component('scatter-chart', ScatterChart);
49+
app.component('stacked-chart', StackedChart);
50+
app.component('bar-chart', BarChart);
51+
app.component('stripe-chart', LineChart);
52+
app.component('doughnut-chart', DoughnutChart);
53+
app.component('pie-chart', PieChart);
54+
app.component('polar-area-chart', PolarAreaChart);
55+
app.component('scatter-chart', ScatterChart);
2756
})
2857

‎resources/js/components/BarChart.vue‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -114,14 +114,14 @@
114114
...this.card.options,
115115
layout: this.chartLayout,
116116
scales: {
117-
yAxes: {
118-
...this.card.options.scales?.yAxes || {},
117+
y: {
118+
...this.card.options.scales?.y || this.card.options.scales?.yAxes || {},
119119
ticks: {
120120
maxTicksLimit: 5,
121-
...this.card.options.scales?.yAxes?.ticks || {},
121+
...this.card.options.scales?.y?.ticks || this.card.options.scales?.yAxes?.ticks || {},
122122
font: {
123123
size: 10,
124-
...this.card.options.scales?.yAxes?.ticks?.font || {},
124+
...this.card.options.scales?.y?.ticks?.font || this.card.options.scales?.yAxes?.ticks?.font || {},
125125
},
126126
callback: function(num, index, values) {
127127
if (num >= 1000000000) {
@@ -137,14 +137,14 @@
137137
}
138138
}
139139
},
140-
xAxes: {
141-
...this.card.options.scales?.xAxes || {},
140+
x: {
141+
...this.card.options.scales?.x || this.card.options.scales?.xAxes || {},
142142
ticks: {
143-
...this.card.options.scales?.xAxes?.ticks || {},
143+
...this.card.options.scales?.x?.ticks || this.card.options.scales?.xAxes?.ticks || {},
144144
font: {
145145
lineHeight: 0.8,
146146
size: 10,
147-
...this.card.options.scales?.xAxes?.ticks?.font || {},
147+
...this.card.options.scales?.x?.ticks?.font || this.card.options.scales?.xAxes?.ticks?.font || {},
148148
}
149149
}
150150
}

0 commit comments

Comments
 (0)