Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

SKIL-440 #714

Merged
merged 5 commits into from
Oct 3, 2024
Merged

SKIL-440 #714

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
ae20d8e
fitting containers on page
hmnur3636 Oct 1, 2024
6659c97
Fixed symmetry
hmnur3636 Oct 1, 2024
4241c1d
Fixed bugs in Ratings and Improvements
hmnur3636 Oct 1, 2024
2b64199
fix color
hmnur3636 Oct 1, 2024
dcaba01
Merge branch 'master' into SKIL-440
hmnur3636 Oct 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
77 changes: 46 additions & 31 deletions ...eact/src/View/Admin/View/Reporting/ViewAssessmentStatus/CharacteristicsAndImprovements.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,45 +1,60 @@
import { alignProperty } from '@mui/material/styles/cssUtils';
import React from 'react';
import { BarChart, CartesianGrid, XAxis, YAxis, Bar, LabelList } from 'recharts';
import "bootstrap/dist/css/bootstrap.css";

export default function CharacteristicsAndImprovements({
dataType,
characteristicsData,
improvementsData,
showSuggestions
export default function CharacteristicsAndImprovements({
dataType,
characteristicsData,
improvementsData,
showSuggestions
}) {
const data = dataType === 'characteristics'
? characteristicsData.characteristics
const data = dataType === 'characteristics'
? characteristicsData.characteristics
: improvementsData.improvements;

const dataKey = dataType === 'characteristics' ? 'characteristic' : 'improvement';
const chartHeight = 210;
const chartWidth = 650;

const shouldShowGraph = dataType === 'characteristics' || showSuggestions;

return (
<div style={{ display: "flex", flexDirection: "column", gap: "2rem"}}>
<h6 style= {{textAlign:"center"}}>
<div className="flex flex-col gap-8">
<h6 className="text-center text-sm">
<u>{dataType === 'characteristics' ? 'Characteristics' : 'Improvements'}</u>
</h6>
<div>
<BarChart
layout='vertical'
data={data}
width={675}
height={375}
aria-label={`barChart${dataType.charAt(0).toUpperCase() + dataType.slice(1)}Data`}
>
<XAxis type='number' domain={[0, 'auto']}/>
<YAxis
width={350}
style={{fontSize: '.9rem'}}
type='category'
dataKey={dataKey}
/>
<CartesianGrid horizontal={false} />
<Bar dataKey="number" fill="#2e8bef">
<LabelList dataKey="percentage" fill="#ffffff" position="inside"/>
</Bar>
</BarChart>
{shouldShowGraph ? (
<BarChart
layout='vertical'
data={data}
width={chartWidth}
height={chartHeight}
aria-label={`barChart${dataType.charAt(0).toUpperCase() + dataType.slice(1)}Data`}
>
<XAxis
type='number'
domain={[0, 'auto']}
style={{ fontSize: '0.75rem' }}
/>
<YAxis
width={350}
style={{ fontSize: '0.675rem' }}
type='category'
dataKey={dataKey}
/>
<CartesianGrid horizontal={false} />
<Bar dataKey="number" fill="#2e8bef">
<LabelList dataKey="percentage" fill="#ffffff" position="inside" />
</Bar>
</BarChart>
) : (
<div className="flex justify-center items-center">
<svg xmlns="http://www.w3.org/2000/svg" width="190" height="190" fill="grey" class="bi bi-bar-chart" viewBox="0 0 16 16">
<path d="M4 11H2v3h2zm5-4H7v7h2zm5-5v12h-2V2zm-2-1a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zM6 7a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1zm-5 4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1z"/>
</svg>
</div>
)}
</div>
</div>
)
);
}
145 changes: 80 additions & 65 deletions FrontEndReact/src/View/Admin/View/Reporting/ViewAssessmentStatus/ViewAssessmentStatus.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,11 +63,8 @@ export default function ViewAssessmentStatus(props) {
};

var allRatings = [];

var avg = 0;

var stdev = 0;

var progress = 43;

if (props.completedAssessments !== null && props.completedAssessments.length > 0) {
Expand Down Expand Up @@ -124,17 +121,12 @@ export default function ViewAssessmentStatus(props) {
{/*remove border color top and fix it*/}
const innerGridStyle = {
borderRadius: '1px',
height: '100%',
border: "#7F7F7F",
margin: "2px 2px 2px 0px",
padding: 0,
margin: 0,
boxShadow: "0.3em 0.3em 1em #d6d6d6"
};
const thinBox = {
display: 'flex',
flexDirection: 'row',
justifyContent: 'space-between',
gap: '1px',
padding: '0'
};
const outerQuadrantSX = {
display:"flex",
justifyContent:"center"
Expand All @@ -144,39 +136,60 @@ export default function ViewAssessmentStatus(props) {

return (
<Container>
<Box sx={{ maxHeight:"150vh", display:"flex", alignItems:"center" }} className='d-flex flex-column' aria-label="viewAssessmentStatusBox" >
<Grid container rowSpacing={0} columnSpacing={4} style={{ width: "95vw" }}>
<Box sx={{ maxHeight:"135vh", display:"flex", alignItems:"center" }} className='d-flex flex-column' aria-label="viewAssessmentStatusBox" >
<Grid container rowSpacing={0} columnSpacing={4} style={{ width: "95vw", }}>
<Grid sx={{ display: "flex", marginBottom: '20px', height: "268px" }} item xs={12}>

<Grid sx={{ ...outerQuadrantSX, padding: '0', height: '100%' }} item xs={6}>
<div className={innerDivClassName} style={{
...innerGridStyle,
margin: '0',
padding: '0',
height: '100%',
display: 'flex',
flexDirection: 'column'
}}>

<h6 style={{ margin: '0', padding: '1px', lineHeight: '1' }}><u>Distribution of Ratings</u></h6>
<div style={{ flexGrow: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center' }}>
{props.showRatings ? (
<BarChart
layout="horizontal"
width={650}
height={210}
data={ratingsData.ratings}
barCategoryGap={0.5}
margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
>
<XAxis
dataKey="rating"
type="category"
style={{ fontSize: '0.75rem' }}
/>
<YAxis
type="number"
domain={[0, 'auto']}
style={{ fontSize: '0.75rem' }}
/>
<CartesianGrid vertical={false}/>
<Bar dataKey="number" fill="#2e8bef">
<LabelList dataKey="number" fill="#ffffff" position="inside"/>
</Bar>
</BarChart>
) : (
<svg xmlns="http://www.w3.org/2000/svg" width="190" height="190" fill="grey" className="bi bi-bar-chart" viewBox="0 0 16 16">
<path d="M4 11H2v3h2zm5-4H7v7h2zm5-5v12h-2V2zm-2-1a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zM6 7a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1zm-5 4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1z"/>
</svg>
)}
</div>
{props.showRatings && (
<h6 style={{ fontSize: '0.8rem', margin: '0', padding: '0', lineHeight: '1' }}>
Avg: {avg}; StdDev: {stdev}
</h6>
)}
</div>
</Grid>

<Grid sx={{ display:"flex", marginBottom:'20px'}} item xs={12}>
{ props.showRatings &&
<Grid sx={outerQuadrantSX} item xs={6}>
<div className={innerDivClassName} style={innerGridStyle}>
<h6><u>Distribution of Ratings</u></h6>
<BarChart
layout='vertical'
width={500}
height={300}
data={ratingsData["ratings"].slice().reverse()}
barCategoryGap={0.5}
>
{/* auto needs to be replaced with total amount of students or teams */}
<XAxis type='number' width={40} domain={[0, 'auto' ]}/>
<YAxis
dataKey="rating"
type="category"
reverseAxisMapping={true}
domain={[0, 5]}
/>
<CartesianGrid horizontal={false}/>
<Bar dataKey="number" fill="#2e8bef">
<LabelList dataKey="number" fill="#ffffff" position="inside"/>
</Bar>
</BarChart>
<h6>Avg: {avg}; StdDev: {stdev}</h6>
</div>
</Grid>
}

<div style={{marginLeft:'20px'}}>
<Grid item xs={12} sx={{ mb: 2 }}>
<div style={{
Expand Down Expand Up @@ -213,10 +226,10 @@ export default function ViewAssessmentStatus(props) {
padding: "20px",
height: '100%'
}}>
<h3>
<h3 style={{fontWeight: 'normal !important'}}>
<u>Assessment Tasks Completed:</u>
</h3>
<div class="progress" style={{height: "35px", width:"100%", borderRadius:'50px',margin:'30px'}}>
<div class="progress" style={{height: "30px", width:"100%", borderRadius:'50px',margin:'15px'}}>
<div className={"progress-bar"} role={"progressbar"} style={{width: `${progress}%`, backgroundColor:'#2e8bef'}}
aria-valuenow={{progress}} aria-valuemin={0} aria-valuemax={100}>
<h5>
Expand All @@ -231,26 +244,28 @@ export default function ViewAssessmentStatus(props) {
</Grid>

</div>
</Grid>
<Grid sx={{ display:"flex", justifyContent:"center", margin:"0px 0px 0px 0px" }} item xs={6}>
<div className={innerDivClassName} style={innerGridStyle} >
<CharacteristicsAndImprovements
dataType="characteristics"
characteristicsData={characteristicsData}
improvementsData={improvementsData}
showSuggestions={props.showSuggestions}
/>
</div>
</Grid>
<Grid sx={{ display:"flex", justifyContent:"center", margin:"0px 0px 0px 0px" }} item xs={6}>
<div className={innerDivClassName} style={innerGridStyle} >
<CharacteristicsAndImprovements
dataType="improvements"
characteristicsData={characteristicsData}
improvementsData={improvementsData}
showSuggestions={props.showSuggestions}
/>
</div>
</Grid>
<Grid sx={{ display: "flex", height: "268px" }} item xs={12}>
<Grid sx={{ display:"flex", justifyContent:"center", paddingRight:'13px',marginRight:'9px'}} item xs={6}>
<div className={innerDivClassName} style={innerGridStyle} >
<CharacteristicsAndImprovements
dataType="characteristics"
characteristicsData={characteristicsData}
improvementsData={improvementsData}
showSuggestions={props.showSuggestions}
/>
</div>
</Grid>
<Grid sx={{ display:"flex", justifyContent:"center"}} item xs={6}>
<div className={innerDivClassName} style={innerGridStyle} >
<CharacteristicsAndImprovements
dataType="improvements"
characteristicsData={characteristicsData}
improvementsData={improvementsData}
showSuggestions={props.showSuggestions}
/>
</div>
</Grid>
</Grid>
</Grid>
</Box>
Expand Down