diff --git a/package-lock.json b/package-lock.json index 8179d74c..fa1137bd 100644 --- a/package-lock.json +++ b/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", - "license": "MIT", + "version": "2.11.8", + "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", - "license": "MIT", + "version": "4.3.3", + "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", - "license": "MIT", + "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==", "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": { diff --git a/package.json b/package.json index c7981073..9cd9bb66 100644 --- a/package.json +++ b/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", diff --git a/shlink-web-component/src/visits/charts/DoughnutChart.tsx b/shlink-web-component/src/visits/charts/DoughnutChart.tsx index e90cee87..57843a76 100644 --- a/shlink-web-component/src/visits/charts/DoughnutChart.tsx +++ b/shlink-web-component/src/visits/charts/DoughnutChart.tsx @@ -38,7 +38,8 @@ const generateChartData = (labels: string[], data: number[]): ChartData => ({ }); export const DoughnutChart: FC = memo(({ stats }) => { - const [chartRef, setChartRef] = useState(); // 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(); const labels = keys(stats); const data = values(stats); @@ -61,7 +62,9 @@ export const DoughnutChart: FC = memo(({ stats }) => { data={chartData as any} options={options as any} ref={(element) => { - setChartRef(element ?? undefined); + if (element) { + setChartRef(element as Chart); + } }} />