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

     1  /*
     2   * Copyright (c) 2022-present unTill Pro, Ltd.
     3   */
     4  
     5  import { useTranslate } from 'react-admin';
     6  import { Box } from '@mui/material';
     7  import { DataGrid } from '@mui/x-data-grid';
     8  import MonCard from './MonCard';
     9  import { Bar, BarChart, CartesianGrid, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
    10  
    11  
    12  
    13  
    14  export default (props) => {
    15      const translate = useTranslate();
    16      const data = [
    17        {name: 'P1', q: 1200, c: 300},
    18        {name: 'P2', q: 1110, c: 240},
    19        {name: 'P3', q: 843, c: 176},
    20        {name: 'P4', q: 921, c: 342},
    21        {name: 'P5', q: 1301, c: 321},
    22        {name: 'P6', q: 1190, c: 201},
    23        {name: 'P7', q: 541, c: 21},
    24        {name: 'P8', q: 5430, c: 105},
    25        {name: 'P9', q: 20, c: 5},
    26        {name: 'P10', q: 650, c: 190},
    27      ]
    28      return (
    29          <MonCard caption={translate('appPerformance.partitionsBalance')}>
    30              <ResponsiveContainer width="100%" height={props.height}>
    31                <BarChart
    32                  width={500}
    33                  height={300}
    34                  data={data}
    35                  margin={{
    36                    top: 5,
    37                    right: 30,
    38                    left: 20,
    39                    bottom: 5,
    40                  }}
    41                >
    42                  <CartesianGrid strokeDasharray="3 3" />
    43                  <XAxis dataKey="name" />
    44                  <YAxis />
    45                  <Tooltip />
    46                  <Bar name='Commands' dataKey="c" stackId="a" fill="#fd7f6f" />
    47                  <Bar name='Queries' dataKey="q" stackId="a" fill="#7eb0d5" />
    48                </BarChart>
    49              </ResponsiveContainer>
    50          </MonCard>
    51  
    52      )
    53  };