github.com/wfusion/gofusion@v1.1.14/common/infra/asynq/asynqmon/ui/src/components/QueueSizeChart.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 { useHistory } from "react-router-dom";
    13  import { useTheme } from "@material-ui/core/styles";
    14  import { queueDetailsPath } from "../paths";
    15  
    16  interface Props {
    17    data: TaskBreakdown[];
    18  }
    19  
    20  interface TaskBreakdown {
    21    queue: string; // name of the queue.
    22    active: number; // number of active tasks in the queue.
    23    pending: number; // number of pending tasks in the queue.
    24    aggregating: number; // number of aggregating tasks in the queue.
    25    scheduled: number; // number of scheduled tasks in the queue.
    26    retry: number; // number of retry tasks in the queue.
    27    archived: number; // number of archived tasks in the queue.
    28    completed: number; // number of completed tasks in the queue.
    29  }
    30  
    31  function QueueSizeChart(props: Props) {
    32    const theme = useTheme();
    33    const handleClick = (params: { activeLabel?: string } | null) => {
    34      const allQueues = props.data.map((b) => b.queue);
    35      if (
    36        params &&
    37        params.activeLabel &&
    38        allQueues.includes(params.activeLabel)
    39      ) {
    40        history.push(queueDetailsPath(params.activeLabel));
    41      }
    42    };
    43    const history = useHistory();
    44    return (
    45      <ResponsiveContainer>
    46        <BarChart
    47          data={props.data}
    48          maxBarSize={120}
    49          onClick={handleClick}
    50          style={{ cursor: "pointer" }}
    51        >
    52          <CartesianGrid strokeDasharray="3 3" />
    53          <XAxis dataKey="queue" stroke={theme.palette.text.secondary} />
    54          <YAxis stroke={theme.palette.text.secondary} />
    55          <Tooltip />
    56          <Legend />
    57          <Bar dataKey="active" stackId="a" fill="#1967d2" />
    58          <Bar dataKey="pending" stackId="a" fill="#669df6" />
    59          <Bar dataKey="aggregating" stackId="a" fill="#e69138" />
    60          <Bar dataKey="scheduled" stackId="a" fill="#fdd663" />
    61          <Bar dataKey="retry" stackId="a" fill="#f666a9" />
    62          <Bar dataKey="archived" stackId="a" fill="#ac4776" />
    63          <Bar dataKey="completed" stackId="a" fill="#4bb543" />
    64        </BarChart>
    65      </ResponsiveContainer>
    66    );
    67  }
    68  
    69  export default QueueSizeChart;