update html components to MUI

client/src/components/admin/donutChartContainer.js

@@ -1,7 +1,8 @@
-import React, { useEffect, useRef } from "react";
-import * as d3 from "d3";
+import React, { useEffect, useRef } from 'react';
+import * as d3 from 'd3';
+import { Box, Typography } from '@mui/material';
 
-import "../../sass/Dashboard.scss";
+import '../../sass/Dashboard.scss';
 
 const DonutChartContainer = (props) => {
   const ref = useRef(null);
@@ -25,75 +26,75 @@ const DonutChartContainer = (props) => {
     total += newValue;
     pieData.push({ value: newValue, color: color });
     pieNames.push(
-      <div className="key-info-container" key={count}>
-        <div
+      <Box className="key-info-container" key={count}>
+        <Box
           className="key-color"
           style={{ backgroundColor: `${color}` }}
-        >
-        </div>
-        <div className="key-location">
-          <p>
+        ></Box>
+        <Box className="key-location">
+          <Typography>
             {key}: {newValue}
-          </p>
-        </div>
-      </div>
+          </Typography>
+        </Box>
+      </Box>
     );
   }
   total = Math.round(100 * total) / 100;
 
-
   useEffect(() => {
     const createPie = d3
       .pie(pieData)
       .value((d) => d.value)
       .sort(null);
-  
+
     const createArc = d3.arc().innerRadius(40).outerRadius(80);
-    
+
     const data = createPie(pieData);
 
     const group = d3.select(ref.current);
-    const groupWithData = group.selectAll("g.arc").data(data);
+    const groupWithData = group.selectAll('g.arc').data(data);
 
     groupWithData.exit().remove();
 
     const groupWithUpdate = groupWithData
       .enter()
-      .append("g")
-      .attr("class", "arc");
+      .append('g')
+      .attr('class', 'arc');
 
     const path = groupWithUpdate
-      .append("path")
-      .merge(groupWithData.select("path.arc"));
+      .append('path')
+      .merge(groupWithData.select('path.arc'));
 
     path
-      .attr("class", "arc")
-      .attr("d", createArc)
-      .attr("fill", (d, i) => {
+      .attr('class', 'arc')
+      .attr('d', createArc)
+      .attr('fill', (d, i) => {
         const { data } = d;
         return data.color;
       });
   }, [props, pieData]);
 
   return (
-    <div className="dashboard-stats">
-      <div className="dashboard-stat-container">
-        <div className="stat-header">
-          <p className="stat-header-text">{props.chartName}:</p>
-        </div>
-        <div className="stat-number">{total}</div>
-      </div>
-      <div className="dashboard-chart-container">
-        <div className="donut-container">
+    <Box className="dashboard-stats">
+      <Box className="dashboard-stat-container">
+        <Box className="stat-header">
+          <Typography className="stat-header-text">
+            {props.chartName}:
+          </Typography>
+        </Box>
+        <Box className="stat-number">{total}</Box>
+      </Box>
+      <Box className="dashboard-chart-container">
+        <Box className="donut-container">
           <svg className="donut" width={160} height={160}>
             <g ref={ref} transform={`translate(${80} ${80})`} />
           </svg>
-        </div>
-        <div className="key-wrapper">
-          <div className="key-container">{pieNames}</div>
-        </div>
-      </div>
-    </div>
+        </Box>
+        <Box className="key-wrapper">
+          <Box className="key-container">{pieNames}</Box>
+        </Box>
+      </Box>
+    </Box>
   );
 };