diff --git a/client/package-lock.json b/client/package-lock.json index 1267baa..f0d25db 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -10,6 +10,7 @@ "dependencies": { "@canvasjs/react-charts": "^1.0.2", "axios": "^1.6.8", + "html2canvas": "^1.4.1", "font-awesome": "^4.7.0", "react": "^18.2.0", "react-dom": "^18.2.0", @@ -1813,6 +1814,14 @@ "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==", "dev": true }, + "node_modules/base64-arraybuffer": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz", + "integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==", + "engines": { + "node": ">= 0.6.0" + } + }, "node_modules/big.js": { "version": "5.2.2", "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz", @@ -2088,6 +2097,14 @@ "node": ">= 8" } }, + "node_modules/css-line-break": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.1.0.tgz", + "integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==", + "dependencies": { + "utrie": "^1.0.2" + } + }, "node_modules/css-loader": { "version": "7.1.1", "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-7.1.1.tgz", @@ -3313,6 +3330,18 @@ "node": ">= 0.4" } }, + "node_modules/html2canvas": { + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.4.1.tgz", + "integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==", + "dependencies": { + "css-line-break": "^2.1.0", + "text-segmentation": "^1.0.3" + }, + "engines": { + "node": ">=8.0.0" + } + }, "node_modules/icss-utils": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz", @@ -5627,6 +5656,14 @@ "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz", "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==" }, + "node_modules/text-segmentation": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.3.tgz", + "integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==", + "dependencies": { + "utrie": "^1.0.2" + } + }, "node_modules/text-table": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz", @@ -5839,6 +5876,14 @@ "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==" }, + "node_modules/utrie": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/utrie/-/utrie-1.0.2.tgz", + "integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==", + "dependencies": { + "base64-arraybuffer": "^1.0.2" + } + }, "node_modules/vite": { "version": "5.2.10", "resolved": "https://registry.npmjs.org/vite/-/vite-5.2.10.tgz", diff --git a/client/package.json b/client/package.json index 92b1c2b..8717b85 100644 --- a/client/package.json +++ b/client/package.json @@ -14,6 +14,7 @@ "@canvasjs/react-charts": "^1.0.2", "aos": "^2.3.4", "axios": "^1.6.8", + "html2canvas": "^1.4.1", "font-awesome": "^4.7.0", "react": "^18.2.0", "react-dom": "^18.2.0", diff --git a/client/src/components/HouseholdResult.jsx b/client/src/components/HouseholdResult.jsx index 2076002..4de5b9f 100644 --- a/client/src/components/HouseholdResult.jsx +++ b/client/src/components/HouseholdResult.jsx @@ -1,7 +1,39 @@ import React from 'react'; import DoughnutChart from './DoughnutChart'; +import html2canvas from 'html2canvas'; + const HouseholdResult = ({ totalCarbonFootprint, contributions, Recommendation }) => { + const ToCaptureRef = React.useRef(); + + function captureScreenshot() { + var canvasPromise = html2canvas(ToCaptureRef.current, { + useCORS: true, + width: document.documentElement.scrollWidth, // Full page width + height: document.documentElement.scrollHeight // Full page height + }); + canvasPromise.then((canvas)=> { + var dataURL = canvas.toDataURL("image/png"); + // Create an image element from the data URL + var img = new Image(); + img.src = dataURL; + img.download = dataURL; + // Create a link element + var a = document.createElement("a"); + a.innerHTML = "DOWNLOAD"; + a.target = "_blank"; + // Set the href of the link to the data URL of the image + a.href = img.src; + // Set the download attribute of the link + a.download = img.download; + // Append the link to the page + document.body.appendChild(a); + // Click the link to trigger the download + a.click(); + }); + + } + function formatRecommendations(data) { return data .replace(/## (.*?):/g, '