diff --git a/package.json b/package.json index c7cb8a155341d64561f42d5cb2937f28dde27453..863705424310194292fa2eb08dc46fb10c69f576 100644 --- a/package.json +++ b/package.json @@ -21,6 +21,7 @@ "@popperjs/core": "^2.11.8", "beautiful-react-diagrams": "^0.5.1", "bootstrap": "^5.3.3", + "chart.js": "^4.4.4", "dangerously-set-html-content": "^1.1.0", "dompurify": "^3.1.5", "framer-motion": "^11.2.13", @@ -31,6 +32,7 @@ "markmap-toolbar": "^0.17.0", "react": "^18.2.0", "react-bootstrap": "^2.10.2", + "react-chartjs-2": "^5.2.0", "react-collapsed": "^4.1.2", "react-dom": "^18.2.0", "react-js-diagrams": "^3.1.3", diff --git a/src/components/Graph.tsx b/src/components/Graph.tsx index 3c0982397ed38b087180b40f62f6a64a555e55cd..c9500dfacdef722dfb6c2945664725ecea864878 100644 --- a/src/components/Graph.tsx +++ b/src/components/Graph.tsx @@ -1,4 +1,4 @@ -/* import React from 'react'; +import React from 'react'; import { Pie } from 'react-chartjs-2'; import { Chart as ChartJS, ArcElement, Tooltip, Legend } from 'chart.js'; import "../contents/Graph.tsx" @@ -51,4 +51,3 @@ const PieChart: React.FC = () => { }; export default PieChart; - */ \ No newline at end of file diff --git a/src/contents/description.tsx b/src/contents/description.tsx index 21413ba394359c5d32b374b2bee2da6d95d329ef..cfd739005aff7f5062d73e7e9300c269dce90740 100644 --- a/src/contents/description.tsx +++ b/src/contents/description.tsx @@ -9,7 +9,7 @@ import { Circle } from "../components/Shapes"; import { Complex } from "../components/svgs"; import { ButtonRowTabs } from "../components/Tabs"; import { useEffect } from "react"; -/* import PieChart from './Graph.tsx'; */ +import PieChart from "../components/Graph"; export function Description() { @@ -207,8 +207,8 @@ export function Description() { <H2 text="Our vision" id="Our-vision"></H2> <p>We are envisioning a potential integration into a broader therapeutic framework involving customized gene editing tools for various genetic disorders, that present similar problems/difficulties to the F508del mutation, as well as other genetic diseases of different causes. This could include collaborations with pharmaceutical companies to develop new treatment modalities for genetic diseases beyond cystic fibrosis, utilizing advanced delivery systems and personalized medicine approaches. </p> - {/* <H2 text="Editing Statistics"/> */} - {/* <PieChart /> */} {/* Render the PieChart component */} + <H2 text="Editing Statistics"/> + <PieChart /> {/* Render the PieChart component */} </section> </div> diff --git a/yarn.lock b/yarn.lock index c2de35569bb5ee91a563d358164db1d8b636fb66..a5033642665405b49ebab189229144e5403af8fd 100644 --- a/yarn.lock +++ b/yarn.lock @@ -542,6 +542,11 @@ "@jridgewell/resolve-uri" "^3.1.0" "@jridgewell/sourcemap-codec" "^1.4.14" +"@kurkle/color@^0.3.0": + version "0.3.2" + resolved "https://registry.yarnpkg.com/@kurkle/color/-/color-0.3.2.tgz#5acd38242e8bde4f9986e7913c8fdf49d3aa199f" + integrity sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw== + "@mui/base@5.0.0-beta.40": version "5.0.0-beta.40" resolved "https://registry.yarnpkg.com/@mui/base/-/base-5.0.0-beta.40.tgz#1f8a782f1fbf3f84a961e954c8176b187de3dae2" @@ -1486,6 +1491,13 @@ chalk@^4.0.0: ansi-styles "^4.1.0" supports-color "^7.1.0" +chart.js@^4.4.4: + version "4.4.4" + resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-4.4.4.tgz#b682d2e7249f7a0cbb1b1d31c840266ae9db64b7" + integrity sha512-emICKGBABnxhMjUjlYRR12PmOXhJ2eJjEHL2/dZlWjxRAZT1D8xplLFq5M0tMQK8ja+wBS/tuVEJB5C6r7VxJA== + dependencies: + "@kurkle/color" "^0.3.0" + cheerio-select@^2.1.0: version "2.1.0" resolved "https://registry.yarnpkg.com/cheerio-select/-/cheerio-select-2.1.0.tgz#4d8673286b8126ca2a8e42740d5e3c4884ae21b4" @@ -3012,6 +3024,11 @@ react-bootstrap@^2.10.2: uncontrollable "^7.2.1" warning "^4.0.3" +react-chartjs-2@^5.2.0: + version "5.2.0" + resolved "https://registry.yarnpkg.com/react-chartjs-2/-/react-chartjs-2-5.2.0.tgz#43c1e3549071c00a1a083ecbd26c1ad34d385f5d" + integrity sha512-98iN5aguJyVSxp5U3CblRLH67J8gkfyGNbiK3c+l1QI/G4irHMPQw44aEPmjVag+YKTyQ260NcF82GTQ3bdscA== + react-collapsed@^4.1.2: version "4.1.2" resolved "https://registry.yarnpkg.com/react-collapsed/-/react-collapsed-4.1.2.tgz#a82e5032eeecc085a05d6ed0be63bbc851f2a517"