Z

[salmanshezad]

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' }}> <CardContent> {/* Back to Main Page Button */} <Box sx={{ marginBottom: '20px', display: 'flex', justifyContent: 'flex-start' }}> <Button variant="contained" onClick={() => setSelectedGroup(null)}>Back to Main Page</Button> </Box>

    <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;