Skip to content

Commit

Permalink
Merge pull request #836 from Lunatic-Labs/SKIL-435
Browse files Browse the repository at this point in the history 
SKIL-435
  • Loading branch information
@aparriaran
aparriaran authored Mar 4, 2025
2 parents bf0be56 + 3dcaee6 commit 13a8e56
Show file tree
Hide file tree
Showing 2 changed files with 162 additions and 54 deletions.
190 changes: 144 additions & 46 deletions ...eact/src/View/Admin/View/Reporting/ViewAssessmentStatus/CharacteristicsAndImprovements.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React from 'react';
import React, { useState } from 'react';
import { BarChart, CartesianGrid, XAxis, YAxis, Bar, LabelList, ResponsiveContainer, Tooltip } from 'recharts';

const truncateText = (text, limit = 15) => {
Expand Down Expand Up @@ -30,6 +30,10 @@ export default function CharacteristicsAndImprovements({
improvementsData,
showSuggestions,
}) {
const [isModalOpen, setModalOpen] = useState(false);

const openModal = () => setModalOpen(true);
const closeModal = () => setModalOpen(false);

const data = dataType === 'characteristics'
? characteristicsData.characteristics
Expand All @@ -38,66 +42,88 @@ export default function CharacteristicsAndImprovements({
const processedData = data.map(item => ({
...item,
truncatedLabel: truncateText(item[dataType === 'characteristics' ? 'characteristic' : 'improvement']),
fullLabel: item[dataType === 'characteristics' ? 'characteristic' : 'improvement']
}));

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

return (
<div className="container-fluid p-0">
<div className="container-fluid p-0 position-relative">
<div className="row">
<div className="col-12">
<div className="card border-0 shadow-none" style={{height: '100%', backgroundColor: '#f8f8f8' }}>
<div
className="card border-0 shadow-none"
style={{height: '100%', backgroundColor: '#f8f8f8'}}
>
<div className="card-body">
<h6 className="text-center mb-4">
<h6 className="text-center">
<u>{dataType === 'characteristics' ? 'Characteristics' : 'Improvements'}</u>
</h6>

<div style={{ height: '250px' }}>
<div
style={{ height: '210px', position: 'relative' }}
className="chart-container"
onClick={openModal}
>
{shouldShowGraph ? (
<ResponsiveContainer width="100%" height="100%">
<BarChart
layout="vertical"
data={processedData}
margin={{
top: 5,
right: 20,
bottom: 5,
left: 20
<>
<div
className="hover-overlay d-flex justify-content-center align-items-center position-absolute w-100 h-100"
style={{
opacity: 0,
transition: 'opacity 0.3s ease',
backgroundColor: 'rgba(46, 139, 239,0.4)',
color: 'rgb(255, 255, 255)',
textShadow: '2px 2px 5px rgb(0, 37, 79)',
fontWeight: 'bold',
fontSize: '16px',
cursor: 'pointer',
zIndex: 10
}}
>
<XAxis
type="number"
domain={[0, 100]}
ticks={[0, 25, 50, 75, 100]}
tickFormatter={(tick) => `${tick}`}
style={{ fontSize: '12px' }}
/>
<YAxis
style={{ fontSize: '12px' }}
type="category"
dataKey="truncatedLabel"
width={100}
/>
<CartesianGrid horizontal={false} />
<Tooltip
content={<CustomTooltip />}
cursor={{ fill: 'rgba(46, 139, 239, 0.1)' }}
/>
<Bar
dataKey="percentage"
fill="#2e8bef"
className="cursor-pointer"
Click for expanded chart
</div>
<ResponsiveContainer width="100%" height="100%">
<BarChart
layout="vertical"
data={processedData}
margin={{ top: 5, right: 20, bottom: 5, left: 20 }}
>
<LabelList
dataKey="percentage"
fill="#ffffff"
position="inside"
formatter={value => `${value}%`}
<XAxis
type="number"
domain={[0, 100]}
ticks={[0, 25, 50, 75, 100]}
tickFormatter={(tick) => `${tick}`}
style={{ fontSize: '12px' }}
/>
<YAxis
style={{ fontSize: '12px' }}
type="category"
dataKey="truncatedLabel"
width={100}
/>
</Bar>
</BarChart>
</ResponsiveContainer>
<CartesianGrid horizontal={false} />
<Tooltip content={<CustomTooltip />} cursor={{ fill: 'rgba(46, 139, 239, 0.1)' }} />
<Bar dataKey="percentage" fill="#2e8bef" className="cursor-pointer">
<LabelList
dataKey="percentage"
fill="#ffffff"
position="inside"
formatter={value => `${value}%`}
/>
</Bar>
</BarChart>
</ResponsiveContainer>
</>
) : (
<div className="d-flex justify-content-center align-items-center h-100">
<svg xmlns="http://www.w3.org/2000/svg" width="190" height="190" fill="grey" className="bi bi-chart" viewBox="0 0 16 16">
<svg
xmlns="http://www.w3.org/2000/svg"
width="190"
height="190"
fill="grey"
className="bi bi-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>
Expand All @@ -107,6 +133,78 @@ export default function CharacteristicsAndImprovements({
</div>
</div>
</div>
<style jsx>{`
.chart-container:hover .hover-overlay {
opacity: 1 !important;
}
`}
</style>
{/* Expanded Modal */}
<div className={`modal fade ${isModalOpen ? 'show' : ''}`}
tabIndex="-1"
role="dialog"
style={{ display: isModalOpen ? 'block' : 'none', justifyContent: 'center', alignItems: 'center' }}>
<div className="modal-dialog modal-lg" style={{ maxWidth: '80%' }}>
<ResponsiveContainer width="100%" height= "100%">
<div className="modal-content">
<div className="modal-header position-relative">
<div className="w-100">
<h4 className="modal-title text-center m-0 fw-normal">
{dataType === 'characteristics' ? 'Characteristics' : 'Improvements'}
</h4>
</div>
<button type="button"
className="btn-close position-absolute"
style={{ right: '1rem', top: '50%', transform: 'translateY(-50%)' }}
onClick={closeModal}
aria-label="Close">
</button>
</div>
<div className="modal-body">
<ResponsiveContainer width="100%" height={500}>
<BarChart
layout="vertical"
data={processedData}
margin={{ top: 5, right: 20, bottom: 5, left: 20 }}
>
<XAxis
type="number"
domain={[0, 100]}
ticks={[0, 25, 50, 75, 100]}
tickFormatter={(tick) => `${tick}`}
style={{ fontSize: '15px' }}
scale="linear"
/>
<YAxis
style={{ fontSize: '15px' }}
type="category"
dataKey="fullLabel"
width={300}
/>
<CartesianGrid horizontal={false} />
<Bar
dataKey="percentage"
fill="#2e8bef"
>
<LabelList
dataKey="percentage"
fill="#ffffff"
position="inside"
formatter={value => `${value}%`}
/>
</Bar>
</BarChart>
</ResponsiveContainer>
</div>
</div>
</ResponsiveContainer>
</div>
</div>
{isModalOpen && (
<div className="modal-backdrop fade show"
onClick={closeModal}>
</div>
)}
</div>
);
}
26 changes: 18 additions & 8 deletions .../src/View/Admin/View/ViewCompleteAssessmentTasks/ViewCompleteIndividualAssessmentTasks.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React, { Component } from "react";
import "bootstrap/dist/css/bootstrap.css";
import "../../../../SBStyles.css";
import { Tooltip } from '@mui/material';
import CustomDataTable from "../../../Components/CustomDataTable";
import IconButton from '@mui/material/IconButton';
import VisibilityIcon from '@mui/icons-material/Visibility';
Expand Down Expand Up @@ -317,14 +318,23 @@ class ViewCompleteIndividualAssessmentTasks extends Component {
const task = completedAssessmentTasks.find((task) => task["assessment_task_id"] === catId);
const isLocked = this.state.lockStatus[catId] !== undefined ? this.state.lockStatus[catId] : (task ? task.locked : false);

return (
<IconButton
aria-label={isLocked ? "unlock" : "lock"}
onClick={() => this.handleLockToggle(catId, task)}
>
{isLocked ? <LockIcon /> : <LockOpenIcon />}
</IconButton>
);
return (
<Tooltip
title={
<>
<p>
If the assessment task is locked, students can no longer make changes to it. If the task is unlocked, students are allowed to make edits.
</p>
</>
}>
<IconButton
aria-label={isLocked ? "unlock" : "lock"}
onClick={() => this.handleLockToggle(catId, task)}
>
{isLocked ? <LockIcon /> : <LockOpenIcon />}
</IconButton>
</Tooltip>
);
},
}
},
Expand Down

0 comments on commit 13a8e56

Please sign in to comment.