Skip to content

Commit

Permalink
Merge pull request #1664 from awlFCCamp/update-HTMLtoMUI-donutchart
Browse files Browse the repository at this point in the history
update html components to MUI
  • Loading branch information
trillium authored Jun 11, 2024
2 parents e77dbdd + 26b85b5 commit 3c33ea8
Showing 1 changed file with 39 additions and 38 deletions.
77 changes: 39 additions & 38 deletions client/src/components/admin/donutChartContainer.js
Original file line number Diff line number Diff line change
@@ -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);
Expand All @@ -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>
);
};

Expand Down

0 comments on commit 3c33ea8

Please sign in to comment.