Update bootstrap and chart.js

package-lock.json

@@ -15,10 +15,10 @@
         "@fortawesome/react-fontawesome": "^0.2.0",
         "@json2csv/plainjs": "^6.1.2",
         "@reduxjs/toolkit": "^1.9.5",
-        "bootstrap": "^5.2.3",
+        "bootstrap": "^5.3.1",
         "bottlejs": "^2.0.1",
         "bowser": "^2.11.0",
-        "chart.js": "^4.1.1",
+        "chart.js": "^4.3.3",
         "classnames": "^2.3.2",
         "compare-versions": "^5.0.3",
         "csvtojson": "^2.0.10",
@@ -29,7 +29,7 @@
         "qs": "^6.11.0",
         "ramda": "^0.27.2",
         "react": "^18.2.0",
-        "react-chartjs-2": "^5.1.0",
+        "react-chartjs-2": "^5.2.0",
         "react-colorful": "^5.6.1",
         "react-copy-to-clipboard": "^5.1.0",
         "react-datepicker": "^4.8.0",
@@ -2824,8 +2824,9 @@
       }
     },
     "node_modules/@popperjs/core": {
-      "version": "2.11.6",
+      "version": "2.11.8",
-      "license": "MIT",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/popperjs"
@@ -4457,7 +4458,9 @@
       "license": "MIT"
     },
     "node_modules/bootstrap": {
-      "version": "5.2.3",
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.1.tgz",
+      "integrity": "sha512-jzwza3Yagduci2x0rr9MeFSORjcHpt0lRZukZPZQJT1Dth5qzV7XcgGqYzi39KGAVYR8QEDVoO0ubFKOxzMG+g==",
       "funding": [
         {
           "type": "github",
@@ -4468,9 +4471,8 @@
           "url": "https://opencollective.com/bootstrap"
         }
       ],
-      "license": "MIT",
       "peerDependencies": {
-        "@popperjs/core": "^2.11.6"
+        "@popperjs/core": "^2.11.8"
       }
     },
     "node_modules/bottlejs": {
@@ -4671,13 +4673,14 @@
       }
     },
     "node_modules/chart.js": {
-      "version": "4.1.1",
+      "version": "4.3.3",
-      "license": "MIT",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.3.3.tgz",
+      "integrity": "sha512-aTk7pBw+x6sQYhon/NR3ikfUJuym/LdgpTlgZRe2PaEhjUMKBKyNaFCMVRAyTEWYFNO7qRu7iQVqOw/OqzxZxQ==",
       "dependencies": {
         "@kurkle/color": "^0.3.0"
       },
       "engines": {
-        "pnpm": "^7.0.0"
+        "pnpm": ">=7"
       }
     },
     "node_modules/check-error": {
@@ -8701,8 +8704,9 @@
       }
     },
     "node_modules/react-chartjs-2": {
-      "version": "5.1.0",
+      "version": "5.2.0",
-      "license": "MIT",
+      "resolved": "https://registry.npmjs.org/react-chartjs-2/-/react-chartjs-2-5.2.0.tgz",
+      "integrity": "sha512-98iN5aguJyVSxp5U3CblRLH67J8gkfyGNbiK3c+l1QI/G4irHMPQw44aEPmjVag+YKTyQ260NcF82GTQ3bdscA==",
       "peerDependencies": {
         "chart.js": "^4.1.1",
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
@@ -13153,7 +13157,9 @@
       }
     },
     "@popperjs/core": {
-      "version": "2.11.6"
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A=="
     },
     "@react-leaflet/core": {
       "version": "2.1.0",
@@ -14265,7 +14271,9 @@
       "version": "3.7.2"
     },
     "bootstrap": {
-      "version": "5.2.3",
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.1.tgz",
+      "integrity": "sha512-jzwza3Yagduci2x0rr9MeFSORjcHpt0lRZukZPZQJT1Dth5qzV7XcgGqYzi39KGAVYR8QEDVoO0ubFKOxzMG+g==",
       "requires": {}
     },
     "bottlejs": {
@@ -14382,7 +14390,9 @@
       "dev": true
     },
     "chart.js": {
-      "version": "4.1.1",
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.3.3.tgz",
+      "integrity": "sha512-aTk7pBw+x6sQYhon/NR3ikfUJuym/LdgpTlgZRe2PaEhjUMKBKyNaFCMVRAyTEWYFNO7qRu7iQVqOw/OqzxZxQ==",
       "requires": {
         "@kurkle/color": "^0.3.0"
       }
@@ -17072,7 +17082,9 @@
       }
     },
     "react-chartjs-2": {
-      "version": "5.1.0",
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/react-chartjs-2/-/react-chartjs-2-5.2.0.tgz",
+      "integrity": "sha512-98iN5aguJyVSxp5U3CblRLH67J8gkfyGNbiK3c+l1QI/G4irHMPQw44aEPmjVag+YKTyQ260NcF82GTQ3bdscA==",
       "requires": {}
     },
     "react-colorful": {

package.json

@@ -31,10 +31,10 @@
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@json2csv/plainjs": "^6.1.2",
     "@reduxjs/toolkit": "^1.9.5",
-    "bootstrap": "^5.2.3",
+    "bootstrap": "^5.3.1",
     "bottlejs": "^2.0.1",
     "bowser": "^2.11.0",
-    "chart.js": "^4.1.1",
+    "chart.js": "^4.3.3",
     "classnames": "^2.3.2",
     "compare-versions": "^5.0.3",
     "csvtojson": "^2.0.10",
@@ -45,7 +45,7 @@
     "qs": "^6.11.0",
     "ramda": "^0.27.2",
     "react": "^18.2.0",
-    "react-chartjs-2": "^5.1.0",
+    "react-chartjs-2": "^5.2.0",
     "react-colorful": "^5.6.1",
     "react-copy-to-clipboard": "^5.1.0",
     "react-datepicker": "^4.8.0",

shlink-web-component/src/visits/charts/DoughnutChart.tsx

@@ -38,7 +38,8 @@ const generateChartData = (labels: string[], data: number[]): ChartData => ({
 });
 
 export const DoughnutChart: FC<DoughnutChartProps> = memo(({ stats }) => {
-  const [chartRef, setChartRef] = useState<Chart | undefined>(); // Cannot use useRef here
+  // Cannot use useRef here, as we need to re-render as soon as the ref is set
+  const [chartRef, setChartRef] = useState<Chart>();
   const labels = keys(stats);
   const data = values(stats);
 
@@ -61,7 +62,9 @@ export const DoughnutChart: FC<DoughnutChartProps> = memo(({ stats }) => {
           data={chartData as any}
           options={options as any}
           ref={(element) => {
-            setChartRef(element ?? undefined);
+            if (element) {
+              setChartRef(element as Chart);
+            }
           }}
         />
       </div>