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

     1  /*
     2   * Copyright (c) 2022-present unTill Pro, Ltd.
     3   */
     4  
     5  import { useTranslate } from 'react-admin';
     6  import { useNavigate } from "react-router-dom";
     7  import { Bar, BarChart, CartesianGrid, Cell, ReferenceLine, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
     8  import MonCard from './MonCard';
     9  
    10  
    11  export default (props) => {
    12      const translate = useTranslate();
    13      const data = [
    14        {name: 'P1', p: 0},
    15        {name: 'P2', p: 213},
    16        {name: 'P3', p: -20},
    17        {name: 'P4', p: -5},
    18        {name: 'P5', p: 0},
    19        {name: 'P6', p: -327},
    20        {name: 'P7', p: 0},
    21        {name: 'P8', p: -180},
    22        {name: 'P9', p: 0},
    23        {name: 'P10', p:0},
    24      ]
    25  
    26      const navigate = useNavigate();
    27  
    28      const handleClick = (data, index) => {
    29        navigate(`/app-partition-projectors?app=${props.app}&partition=${index+1}`);
    30      };
    31      
    32      return (
    33          <MonCard caption={translate('appPerformance.projectorsProgress')}>
    34              <ResponsiveContainer width="100%" height={props.height}>
    35                <BarChart
    36                  width={500}
    37                  height={300}
    38                  data={data}
    39                  margin={{
    40                    top: 5,
    41                    right: 30,
    42                    left: 20,
    43                    bottom: 5,
    44                  }}
    45                >
    46                  <CartesianGrid strokeDasharray="3 3" />
    47                  <XAxis dataKey="name" />
    48                  <YAxis />
    49                  <Tooltip />
    50                  <ReferenceLine y={0} stroke="#000" />
    51                  <Bar name='Overrun' dataKey="p" fill="#333" onClick={handleClick} >
    52                    {data.map((entry, index) => (
    53                      <Cell cursor="pointer" fill={data[index].p > 0 ? "#bdcf32" : "#ea5545"} key={`cell-${index}`} />
    54                    ))}
    55                  </Bar>
    56                </BarChart>
    57              </ResponsiveContainer>
    58          </MonCard>
    59  
    60      )
    61  };