import React from "react"; import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, } from "recharts"; import { useHistory } from "react-router-dom"; import { useTheme } from "@material-ui/core/styles"; import { queueDetailsPath } from "../paths"; interface Props { data: TaskBreakdown[]; } interface TaskBreakdown { queue: string; // name of the queue. active: number; // number of active tasks in the queue. pending: number; // number of pending tasks in the queue. scheduled: number; // number of scheduled tasks in the queue. retry: number; // number of retry tasks in the queue. archived: number; // number of archived tasks in the queue. completed: number; // number of completed tasks in the queue. } function QueueSizeChart(props: Props) { const theme = useTheme(); const handleClick = (params: { activeLabel?: string } | null) => { const allQueues = props.data.map((b) => b.queue); if ( params && params.activeLabel && allQueues.includes(params.activeLabel) ) { history.push(queueDetailsPath(params.activeLabel)); } }; const history = useHistory(); return ( ); } export default QueueSizeChart;