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

     1  /*
     2   * Copyright (c) 2022-present unTill Pro, Ltd.
     3   */
     4  
     5  import { Bar, BarChart, CartesianGrid, Cell, ReferenceLine, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
     6  import { useTranslate } from 'react-admin';
     7  import { useSearchParams } from "react-router-dom";
     8  import MonCard from './MonCard';
     9  
    10  
    11  
    12  const AppPartitionProjectors = (props) => {
    13  
    14      let [searchParams] = useSearchParams();    
    15      const app = searchParams.get("app")
    16      const partition = searchParams.get("partition")
    17      const translate = useTranslate();
    18  
    19      const data = [
    20        {name: 'sys.Collection', p: 0},
    21        {name: 'air.Dashboard', p: 21},
    22        {name: 'air.OrderDates', p: -20},
    23        {name: 'air.PBillDates', p: -5},
    24        {name: 'air.UpdateSubscrpition', p: 0},
    25        {name: 'air.TransactionHistory', p: -32},
    26        {name: 'air.TablesOverview', p: 0},
    27        {name: 'air.NewRestaurantVatProjector', p: -18},
    28        {name: 'sys.WLogDates', p: 0},
    29        {name: 'sys.SendEmailVerificationCodeProjector', p:0},
    30      ]
    31      
    32      return (
    33          <MonCard caption={translate('appPerformance.projectorsProgressAtPartition')+": "+partition}>
    34              <ResponsiveContainer width="100%" height={400}>
    35                <BarChart
    36                  width={500}
    37                  height={300}
    38                  data={data}
    39                  layout="vertical"
    40                  margin={{
    41                    top: 5,
    42                    right: 30,
    43                    left: 300,
    44                    bottom: 5,
    45                  }}
    46                >
    47                  <CartesianGrid strokeDasharray="3 3" />
    48                  <XAxis type="number" />
    49                  <YAxis dataKey="name" type="category" />
    50                  <Tooltip />
    51                  <ReferenceLine y={0} stroke="#000" />
    52                  <Bar name='Overrun' dataKey="p" fill="#333" >
    53                    {data.map((entry, index) => (
    54                      <Cell cursor="pointer" fill={data[index].p > 0 ? "#bdcf32" : "#ea5545"} key={`cell-${index}`} />
    55                    ))}
    56                  </Bar>
    57                </BarChart>
    58              </ResponsiveContainer>
    59          </MonCard>
    60  
    61      )
    62  
    63  };
    64  
    65  
    66  export default AppPartitionProjectors