github.com/voedger/voedger@v0.0.0-20240520144910-273e84102129/pkg/apps/sys.monitor/site.main.src/src/elements/SysPerformanceIops.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 { PaletteSpringPastels } from '../layout/Palette';
     9  
    10  
    11  const rpsData = [
    12    { name: 'Get', value: 1234 },
    13    { name: 'GetBatch', value: 5432 },
    14    { name: 'Put', value: 200 },
    15    { name: 'PutBatch', value: 905 },
    16    { name: 'Read', value: 863 },
    17  ];
    18  
    19  
    20  const renderCustomizedRpsLabel = ({ cx, cy, midAngle, innerRadius, outerRadius, percent, index }) => {
    21    return `${rpsData[index].name}: ${(percent * 100).toFixed(0)}%`
    22  };
    23  
    24  const SysPerformanceIops = () => {
    25      const translate = useTranslate();
    26      
    27      return (
    28        <Box>
    29            <Typography sx={{whiteSpace: 'nowrap'}} variant="h5" align='center'>
    30              {translate('charts.iops')}
    31              <span style={{opacity: .5}}> &nbsp;({translate('common.avg')+': 17K'})</span>
    32            </Typography>                
    33  
    34            <Box width="100%">
    35              <ResponsiveContainer width="100%" aspect={2.5}>
    36                <PieChart width={200} height={200}>
    37                  <Pie
    38                    dataKey="value"
    39                    isAnimationActive={false}
    40                    data={rpsData}
    41                    cx="50%"
    42                    cy="50%"
    43                    outerRadius={60}
    44                    innerRadius={30}
    45                    fill="#8884d8"
    46                    labelLine={true}
    47                    label={renderCustomizedRpsLabel}
    48                  >
    49                  {rpsData.map((entry, index) => (
    50                  <Cell key={`cell-${index}`} fill={PaletteSpringPastels[index % PaletteSpringPastels.length]} />
    51                  ))}                   
    52                  </Pie>
    53                </PieChart>
    54              </ResponsiveContainer>
    55            </Box>
    56          </Box>            
    57  
    58      )
    59  };
    60  
    61  
    62  export default SysPerformanceIops