Upgrade ChartJS from v2 to v4 (#603)

package.json

@@ -40,7 +40,7 @@
     "@vuelidate/validators": "^2.0.4",
     "@vueuse/core": "^14.0.0",
     "axios": "1.14.0",
-    "chart.js": "^2.9.4",
+    "chart.js": "^4.5.1",
     "guid": "^0.0.12",
     "laravel-vite-plugin": "^3.0.0",
     "lodash": "^4.17.21",

resources/scripts/admin/components/charts/LineChart.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script setup>
-import Chart from 'chart.js'
+import { Chart } from 'chart.js/auto'
 import { ref, reactive, computed, onMounted, watchEffect, inject } from 'vue'
 import { useCompanyStore } from '@/scripts/admin/stores/company'
 
@@ -65,12 +65,13 @@ onMounted(() => {
   let options = reactive({
     responsive: true,
     maintainAspectRatio: false,
-    tooltips: {
+    plugins: {
+      tooltip: {
         enabled: true,
         callbacks: {
-        label: function (tooltipItem, data) {
+          label: function (context) {
             return utils.formatMoney(
-            Math.round(tooltipItem.value * 100),
+              Math.round(context.parsed.y * 100),
               defaultCurrency.value
             )
           },
@@ -79,6 +80,7 @@ onMounted(() => {
       legend: {
         display: false,
       },
+    },
   })
 
   let data = reactive({
@@ -87,7 +89,7 @@ onMounted(() => {
       {
         label: 'Sales',
         fill: false,
-        lineTension: 0.3,
+        tension: 0.3,
         backgroundColor: 'rgba(230, 254, 249)',
         borderColor: '#040405',
         borderCapStyle: 'butt',
@@ -108,7 +110,7 @@ onMounted(() => {
       {
         label: 'Receipts',
         fill: false,
-        lineTension: 0.3,
+        tension: 0.3,
         backgroundColor: 'rgba(230, 254, 249)',
         borderColor: 'rgb(2, 201, 156)',
         borderCapStyle: 'butt',
@@ -129,7 +131,7 @@ onMounted(() => {
       {
         label: 'Expenses',
         fill: false,
-        lineTension: 0.3,
+        tension: 0.3,
         backgroundColor: 'rgba(245, 235, 242)',
         borderColor: 'rgb(255,0,0)',
         borderCapStyle: 'butt',
@@ -150,7 +152,7 @@ onMounted(() => {
       {
         label: 'Net Income',
         fill: false,
-        lineTension: 0.3,
+        tension: 0.3,
         backgroundColor: 'rgba(236, 235, 249)',
         borderColor: 'rgba(88, 81, 216, 1)',
         borderCapStyle: 'butt',
@@ -190,8 +192,6 @@ function update() {
     (expense) => expense / 100
   )
   myLineChart.data.datasets[3].data = props.income.map((_i) => _i / 100)
-  myLineChart.update({
+  myLineChart.update('none')
-    lazy: true,
-  })
 }
 </script>

yarn.lock

@@ -205,6 +205,11 @@
     "@jridgewell/resolve-uri" "^3.1.0"
     "@jridgewell/sourcemap-codec" "^1.4.14"
 
+"@kurkle/color@^0.3.0":
+  version "0.3.4"
+  resolved "https://registry.npmjs.org/@kurkle/color/-/color-0.3.4.tgz"
+  integrity sha512-M5UknZPHRu3DEDWoipU6sE8PdkZ6Z/S+v4dD+Ke8IaNlpdSQah50lz1KtcFBa2vsdOnwbbnxJwVM4wty6udA5w==
+
 "@oxc-project/types@=0.122.0":
   version "0.122.0"
   resolved "https://registry.npmjs.org/@oxc-project/types/-/types-0.122.0.tgz"
@@ -842,28 +847,12 @@ call-bind-apply-helpers@^1.0.1, call-bind-apply-helpers@^1.0.2:
     es-errors "^1.3.0"
     function-bind "^1.1.2"
 
-chart.js@^2.9.4:
+chart.js@^4.5.1:
-  version "2.9.4"
+  version "4.5.1"
-  resolved "https://registry.npmjs.org/chart.js/-/chart.js-2.9.4.tgz"
+  resolved "https://registry.npmjs.org/chart.js/-/chart.js-4.5.1.tgz"
-  integrity sha512-B07aAzxcrikjAPyV+01j7BmOpxtQETxTSlQ26BEYJ+3iUkbNKaOJ/nDbT6JjyqYxseM0ON12COHYdU2cTIjC7A==
+  integrity sha512-GIjfiT9dbmHRiYi6Nl2yFCq7kkwdkp1W/lp2J99rX0yo9tgJGn3lKQATztIjb5tVtevcBtIdICNWqlq5+E8/Pw==
   dependencies:
-    chartjs-color "^2.1.0"
+    "@kurkle/color" "^0.3.0"
-    moment "^2.10.2"
-
-chartjs-color-string@^0.6.0:
-  version "0.6.0"
-  resolved "https://registry.npmjs.org/chartjs-color-string/-/chartjs-color-string-0.6.0.tgz"
-  integrity sha512-TIB5OKn1hPJvO7JcteW4WY/63v6KwEdt6udfnDE9iCAZgy+V4SrbSxoIbTw/xkUIapjEI4ExGtD0+6D3KyFd7A==
-  dependencies:
-    color-name "^1.0.0"
-
-chartjs-color@^2.1.0:
-  version "2.4.1"
-  resolved "https://registry.npmjs.org/chartjs-color/-/chartjs-color-2.4.1.tgz"
-  integrity sha512-haqOg1+Yebys/Ts/9bLo/BqUcONQOdr/hoEr2LLTRl6C5LXctUdHxsCYfvQVg5JIxITrfCNUDr4ntqmQk9+/0w==
-  dependencies:
-    chartjs-color-string "^0.6.0"
-    color-convert "^1.9.3"
 
 chokidar@^5.0.0:
   version "5.0.0"
@@ -877,23 +866,6 @@ clsx@^2.0.0:
   resolved "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz"
   integrity sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==
 
-color-convert@^1.9.3:
-  version "1.9.3"
-  resolved "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz"
-  integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==
-  dependencies:
-    color-name "1.1.3"
-
-color-name@^1.0.0:
-  version "1.1.4"
-  resolved "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz"
-  integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
-
-color-name@1.1.3:
-  version "1.1.3"
-  resolved "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz"
-  integrity sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==
-
 combined-stream@^1.0.8:
   version "1.0.8"
   resolved "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz"
@@ -1516,7 +1488,7 @@ mlly@^1.7.4, mlly@^1.8.0:
     pkg-types "^1.3.1"
     ufo "^1.6.3"
 
-moment@^2.10.2, moment@^2.30.1:
+moment@^2.30.1:
   version "2.30.1"
   resolved "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz"
   integrity sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==