Update nodejs + some deps and pipelines

Author: pbrudnick

.github/workflows/build.yml

@@ -13,21 +13,21 @@ jobs:
         os: ['ubuntu-24.04']
         otp: ['26.2.5']
         elixir: ['1.14.5']
-        node: ['18.20.8']
+        node: ['22.22.1']
 
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v5
 
       - name: Set RELEASE_TAG env
         run: echo "RELEASE_TAG=${GITHUB_REF:10}" >> $GITHUB_ENV
       - name: Update VERSION file with '${GITHUB_REF:10}'
         run: echo -n "${GITHUB_REF:11}" > VERSION
 
-      - uses: erlef/setup-beam@v1
+      - uses: erlef/setup-beam@v2
         with:
           otp-version: ${{ matrix.otp }}
           elixir-version: ${{ matrix.elixir }}
-      - uses: actions/setup-node@v4
+      - uses: actions/setup-node@v5
         with:
           node-version: ${{ matrix.node }}
 

.tool-versions

@@ -1,3 +1,3 @@
 elixir 1.14.5
 erlang 26.2.5
-nodejs 18.20.8
+nodejs 22.22.1

assets/js/components/FakeChart.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import {Line} from 'react-chartjs-2';
+import {Chart as ChartJS, CategoryScale, LinearScale, PointElement, LineElement, Tooltip, Legend} from 'chart.js';
 
+ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Tooltip, Legend);
 
 const FakeChart: React.FC = () => {
 
@@ -10,7 +12,7 @@ const FakeChart: React.FC = () => {
           {
             label: 'Commits',
             fill: false,
-            lineTension: 0.1,
+            tension: 0.1,
             backgroundColor: 'rgba(75,192,192,0.4)',
             borderColor: 'rgba(75,192,192,1)',
             borderCapStyle: 'butt',
@@ -30,7 +32,7 @@ const FakeChart: React.FC = () => {
           }
         ]
       };
-    
+
     return (<div>
         <Line data={data} />
       </div>);

assets/js/components/LanguagesChart.tsx

@@ -1,9 +1,11 @@
 import React from 'react';
 import {ApiResponse, TotalLanguage} from "../types";
 import {Doughnut} from 'react-chartjs-2';
-import 'chartjs-plugin-colorschemes';
+import {Chart as ChartJS, ArcElement, Tooltip, Legend} from 'chart.js';
 import getLangColor from '../languageColors';
 
+ChartJS.register(ArcElement, Tooltip, Legend);
+
 type LanguagesChartProp = {languages:ApiResponse<[TotalLanguage]>};
 
 const LanguagesChart: React.FC<LanguagesChartProp> = ({languages}) => {
@@ -34,10 +36,21 @@ const LanguagesChart: React.FC<LanguagesChartProp> = ({languages}) => {
 
     const options = {
         maintainAspectRatio: false,
-        legend: {
-            position: 'bottom',
-            labels: {
-                padding: 15
+        plugins: {
+            legend: {
+                position: 'bottom' as const,
+                labels: {
+                    padding: 15
+                }
+            },
+            tooltip: {
+                callbacks: {
+                    label: function(context) {
+                        const label = context.label || '';
+                        const value = context.parsed;
+                        return `${label}: ${value}%`;
+                    }
+                }
             }
         },
         layout: {
@@ -51,19 +64,9 @@ const LanguagesChart: React.FC<LanguagesChartProp> = ({languages}) => {
         responsive: true,
         rotation: 1 * Math.PI,
         circumference: 1 * Math.PI,
-        tooltips: {
-            callbacks: {
-                label: function(tooltipItem, data) {
-                    const dataset = data.datasets[tooltipItem.datasetIndex];
-                    const currentValue = dataset.data[tooltipItem.index];     
-                    const label = data.labels[tooltipItem.index]  
-                    return `${label}: ${currentValue}%`;
-                }
-            }
-        }
     };
 
     return <Doughnut data={data} options={options} height={250} />;
 };
 
-export default LanguagesChart;
+export default LanguagesChart;

docker-compose.yml

@@ -13,7 +13,7 @@ services:
     command: bash -c "sh .docker/coophub/entrypoint.sh"
 
   nodejs:
-    image: node:${VERSION_NODE:-18}
+    image: node:${VERSION_NODE:-22}
     working_dir: "/coophub"
     volumes:
       - ./:/coophub

package-lock.json

@@ -11,16 +11,15 @@
         "@types/react-icons": "^3.0.0",
         "@types/reactstrap": "^8.7.0",
         "bootstrap": "^4.6.0",
-        "chart.js": "^2.9.4",
-        "chartjs-plugin-colorschemes": "^0.4.0",
+        "chart.js": "^4.4.0",
         "fetch-suspense": "^1.2.0",
         "jquery": "^3.6.4",
         "lodash": "^4.17.0",
         "npm": "^9.6.0",
         "phoenix": "file:deps/phoenix",
         "phoenix_html": "file:deps/phoenix_html",
         "react": "^18.2.0",
-        "react-chartjs-2": "^2.11.0",
+        "react-chartjs-2": "^5.2.0",
         "react-countup": "^6.4.0",
         "react-dom": "^18.2.0",
         "react-emoji-render": "^2.0.0",