Z #985
Description
import React, { useState } from 'react';
import { Box, Typography, TableContainer, Table, TableHead, TableRow, TableCell, TableBody, Paper, Card, CardContent, Button, Select, MenuItem } from '@mui/material';
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Cell, LabelList } from 'recharts';
import { mainTableData, mainBarChartData, csbbtAdditionalTableData, cltAdditionalTableData } from './resiliencydata';
// Convert Q3 percentage strings to numbers for the bar chart
const convertQ3ToNumber = (q3: string): number => {
return q3.includes('%') ? parseFloat(q3.replace('%', '')) : 0;
};
const ResiliencyEngineering: React.FC = () => {
const [selectedGroup, setSelectedGroup] = useState<string | null>(null); // Track which group is clicked (CSBBT or CLT)
const [filters, setFilters] = useState({ application: '', cio: '', cio2: '', ccp: '', q3: '' });
// Handle filter changes
const handleFilterChange = (field: keyof typeof filters, value: string) => {
setFilters((prevFilters) => ({
...prevFilters,
[field]: value,
}));
};
// Reset all filters
const clearAllFilters = () => {
setFilters({ application: '', cio: '', cio2: '', ccp: '', q3: '' });
};
// Filter the data based on selected group and applied filters
const filteredData = selectedGroup === 'CSBBT'
? csbbtAdditionalTableData.filter((row) =>
Object.keys(filters).every((key) =>
filters[key as keyof typeof filters] === '' || row[key as keyof typeof filters] === filters[key as keyof typeof filters]
)
)
: cltAdditionalTableData.filter((row) =>
Object.keys(filters).every((key) =>
filters[key as keyof typeof filters] === '' || row[key as keyof typeof filters] === filters[key as keyof typeof filters]
)
);
const colors = ['#8884d8', '#82ca9d', '#ffc658', '#ff8042', '#8dd1e1', '#d0ed57', '#a4de6c'];
return (
<Card style={{ flex: 1, margin: '0', width: '100%', padding: '0px' }}>
{/* Back to Main Page Button */}
<Box sx={{ marginBottom: '20px', display: 'flex', justifyContent: 'flex-start' }}>
<Button variant="contained" onClick={() => setSelectedGroup(null)}>Back to Main Page
<Box sx={{ width: '100%', padding: '60px', minHeight: '20vh', display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
{/* Main Table: Always present */}
<Box sx={{ width: '50%', margin: 'auto', marginBottom: '20px' }}>
<TableContainer component={Paper}>
<Table aria-label="Resiliency Engineering Table" size="small">
<TableHead>
<TableRow>
<TableCell>Group</TableCell>
<TableCell>CIO</TableCell>
<TableCell>CCP Coverage</TableCell>
</TableRow>
</TableHead>
<TableBody>
{mainTableData.map((row, index) => (
<TableRow key={index}>
<TableCell onClick={() => setSelectedGroup(row.group)} style={{ cursor: 'pointer', color: 'blue' }}>
{row.group}
</TableCell>
<TableCell>{row.cio}</TableCell>
<TableCell>{row.ccpCoverage}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
</Box>
{/* Main Bar Chart: Only show when no group is selected */}
{!selectedGroup && (
<Box sx={{ width: '70%', margin: '40px auto' }}>
<Typography variant="h6" textAlign="center" gutterBottom>
CCP Coverage by CIO
</Typography>
<ResponsiveContainer width="100%" height={300}>
<BarChart data={mainBarChartData} margin={{ top: 10, right: 10, left: 10, bottom: 10 }}>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="cio" />
<YAxis domain={[0, 110]} />
<Tooltip />
<Bar dataKey="ccpCoverage">
{mainBarChartData.map((entry, index) => (
<Cell key={`cell-${index}`} fill={colors[index % colors.length]} />
))}
<LabelList dataKey="ccpCoverage" position="top" />
</Bar>
</BarChart>
</ResponsiveContainer>
</Box>
)}
{/* Group-specific Tables and Charts: Only show when a group is selected */}
{selectedGroup && (
<Box sx={{ width: '100%', display: 'flex', justifyContent: 'space-between', marginTop: '20px' }}>
{/* Group Table with Filters */}
<Box sx={{ width: '50%', margin: 'auto', marginTop: '0px', marginBottom: '20px' }}>
<TableContainer component={Paper}>
<Table aria-label="Group Table" size="small">
<TableHead>
<TableRow>
<TableCell>Application List</TableCell>
<TableCell>CIO</TableCell>
<TableCell>CIO2</TableCell>
<TableCell>
<Select
value={filters.ccp}
onChange={(e) => handleFilterChange('ccp', e.target.value)}
displayEmpty
>
<MenuItem value="">All CCP</MenuItem>
<MenuItem value="Yes">Yes</MenuItem>
<MenuItem value="No">No</MenuItem>
</Select>
</TableCell>
<TableCell>Q3</TableCell>
<TableCell>
<Button onClick={clearAllFilters}>Clear All</Button>
</TableCell>
</TableRow>
</TableHead>
<TableBody>
{filteredData.map((row, index) => (
<TableRow key={index}>
<TableCell>{row.application}</TableCell>
<TableCell>{row.cio}</TableCell>
<TableCell>{row.cio2}</TableCell>
<TableCell>{row.ccp}</TableCell>
<TableCell>{row.q3}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
</Box>
{/* Group Bar Chart */}
<Box sx={{ width: '50%' }}>
<ResponsiveContainer width="100%" height={300}>
<BarChart
data={filteredData.map((item) => ({
application: item.application,
q3: convertQ3ToNumber(item.q3), // Convert q3 to a number
}))}
margin={{ top: 10, right: 10, left: 10, bottom: 10 }}
>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="application" />
<YAxis domain={[0, 110]} />
<Tooltip />
<Bar dataKey="q3" barSize={15}>
{filteredData.map((entry, index) => (
<Cell key={`cell-${index}`} fill={colors[index % colors.length]} />
))}
<LabelList dataKey="q3" position="top" />
</Bar>
</BarChart>
</ResponsiveContainer>
</Box>
</Box>
)}
</Box>
</CardContent>
</Card>
);
};
export default ResiliencyEngineering;