github.com/voedger/voedger@v0.0.0-20240520144910-273e84102129/pkg/apps/sys.monitor/site.main.src/src/elements/SysPerformanceRps.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  import { DURATION, FormatValue } from '../utils/Units';
    10  
    11  
    12  const rpsData = [
    13    { name: 'Commands', value: 4890 },
    14    { name: 'Queries', value: 8432 },
    15  ];
    16  
    17  const latencyData = [
    18    { name: 'Commands', value: 4890123 },
    19    { name: 'Queries', value: 84322311 },
    20  ];
    21  
    22  
    23  const renderCustomizedRpsLabel = ({ cx, cy, midAngle, innerRadius, outerRadius, percent, index }) => {
    24    const RADIAN = Math.PI / 180;
    25    const radius = innerRadius + (outerRadius - innerRadius) * 2;
    26    const x = cx + radius * Math.cos(-midAngle * RADIAN);
    27    const y = cy + radius * Math.sin(-midAngle * RADIAN);
    28    const color = PaletteSpringPastels[index % PaletteSpringPastels.length]
    29  
    30    return (
    31      <g>
    32        <text fill={color} x={x} y={y} textAnchor={x > cx ? 'start' : 'end'}  radius={radius}>{`${rpsData[index].name}: ${(percent * 100).toFixed(0)}%`}</text>
    33        <text fill={color} x={x} y={y+20} textAnchor={x > cx ? 'start' : 'end'}  radius={radius}>{`Avg latency: ${FormatValue(DURATION, latencyData[index].value)}`}</text>
    34      </g>
    35      )
    36  };
    37  const SysPerformanceRps = () => {
    38      const translate = useTranslate();
    39      
    40      return (
    41        <Box>
    42            <Typography sx={{whiteSpace: 'nowrap'}} variant="h5" align='center'>
    43              {translate('charts.rps')}
    44              <span style={{opacity: .5}}> &nbsp;({translate('common.avg')+': 12K'})</span>
    45            </Typography>                
    46  
    47            <Box width="100%">
    48              <ResponsiveContainer width="100%" aspect={2.5}>
    49                <PieChart width={200} height={200}>
    50                  <Pie
    51                    dataKey="value"
    52                    isAnimationActive={false}
    53                    data={rpsData}
    54                    cx="50%"
    55                    cy="50%"
    56                    outerRadius={60}
    57                    innerRadius={30}
    58                    fill="#8884d8"
    59                    labelLine={false}
    60                    label={renderCustomizedRpsLabel}                  
    61                  >
    62                  {rpsData.map((entry, index) => (
    63                  <Cell key={`cell-${index}`} fill={PaletteSpringPastels[index % PaletteSpringPastels.length]} />
    64                  ))}                   
    65                  </Pie>
    66                </PieChart>
    67              </ResponsiveContainer>
    68            </Box>
    69          </Box>            
    70  
    71      )
    72  };
    73  export default SysPerformanceRps