github.com/voedger/voedger@v0.0.0-20240520144910-273e84102129/pkg/apps/sys.monitor/site.main.src/src/elements/SysPerformanceStatusCodes.js (about)

     1  /*
     2   * Copyright (c) 2022-present unTill Pro, Ltd.
     3   */
     4  
     5  import { useTranslate } from 'react-admin';
     6  import { Typography, Box } from '@mui/material';
     7  import { ResponsiveContainer, PieChart, Pie, Cell } from 'recharts';
     8  import { PaletteStatusCodes } from '../layout/Palette';
     9  
    10  
    11  const scData = [
    12    { name: '2xx', value: 12452 },
    13    { name: '4xx', value: 320 },
    14    { name: '5xx', value: 1234 },
    15  ];
    16  
    17  
    18  const renderCustomizedScLabel = ({ cx, cy, midAngle, innerRadius, outerRadius, percent, index }) => {
    19    return `${scData[index].name}: ${(percent * 100).toFixed(0)}%`
    20  };
    21  
    22  const SysPerformanceStatusCodes = () => {
    23      const translate = useTranslate();
    24      
    25      return (
    26        <Box>
    27            <Typography sx={{whiteSpace: 'nowrap'}} variant="h5" align='center'>
    28              {translate('charts.statusCodes')}            
    29            </Typography>                
    30            <ResponsiveContainer width="100%" aspect={2.5}>
    31              <PieChart width={200} height={200}>
    32                <Pie
    33                  dataKey="value"
    34                  isAnimationActive={false}
    35                  data={scData}
    36                  cx="50%"
    37                  cy="50%"
    38                  outerRadius={60}
    39                  innerRadius={30}
    40                  fill="#8884d8"
    41                  labelLine={true}
    42                  label={renderCustomizedScLabel}
    43                >
    44                {scData.map((entry, index) => (
    45                <Cell key={`cell-${index}`} fill={PaletteStatusCodes[index % PaletteStatusCodes.length]} />
    46                ))}                   
    47                </Pie>
    48              </PieChart>
    49            </ResponsiveContainer>
    50        </Box>               
    51  
    52      )
    53  };
    54  
    55  export default SysPerformanceStatusCodes