github.com/wfusion/gofusion@v1.1.14/common/infra/asynq/asynqmon/ui/src/components/ProcessedTasksChart.tsx (about)

     1  import React from "react";
     2  import {
     3    BarChart,
     4    Bar,
     5    XAxis,
     6    YAxis,
     7    CartesianGrid,
     8    Tooltip,
     9    Legend,
    10    ResponsiveContainer,
    11  } from "recharts";
    12  import { useTheme, Theme } from "@material-ui/core/styles";
    13  
    14  interface Props {
    15    data: ProcessedStats[];
    16  }
    17  
    18  interface ProcessedStats {
    19    queue: string; // name of the queue.
    20    succeeded: number; // number of tasks succeeded.
    21    failed: number; // number of tasks failed.
    22  }
    23  
    24  function ProcessedTasksChart(props: Props) {
    25    const theme = useTheme<Theme>();
    26    return (
    27      <ResponsiveContainer>
    28        <BarChart data={props.data} maxBarSize={120}>
    29          <CartesianGrid strokeDasharray="3 3" />
    30          <XAxis dataKey="queue" stroke={theme.palette.text.secondary} />
    31          <YAxis stroke={theme.palette.text.secondary} />
    32          <Tooltip />
    33          <Legend />
    34          <Bar
    35            dataKey="succeeded"
    36            stackId="a"
    37            fill={theme.palette.success.light}
    38          />
    39          <Bar dataKey="failed" stackId="a" fill={theme.palette.error.light} />
    40        </BarChart>
    41      </ResponsiveContainer>
    42    );
    43  }
    44  
    45  export default ProcessedTasksChart;