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 ; active : number ; pending : number ; scheduled : number ; retry : number ; archived : number ; completed : number ; } function QueueSizeChart ( props ) { const theme = useTheme ( ) ; const handleClick = ( params ) => { 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 ( < ResponsiveContainer > < BarChart data = { props . data } maxBarSize = { 120 } onClick = { handleClick } style = { { cursor : "pointer" } } > < CartesianGrid strokeDasharray = "3 3" / > < XAxis dataKey = "queue" stroke = { theme . palette . text . secondary } / > < YAxis stroke = { theme . palette . text . secondary } /> < Tooltip / > < Legend /> < Bar dataKey = "active" stackId = "a" fill = "#1967d2" / > < Bar dataKey = "pending" stackId = "a" fill = "#669df6" / > < Bar dataKey = "scheduled" stackId = "a" fill = "#fdd663" / > < Bar dataKey = "retry" stackId = "a" fill = "#f666a9" / > < Bar dataKey = "archived" stackId = "a" fill = "#ac4776" / > < Bar dataKey = "completed" stackId = "a" fill = "#4bb543" / > < /BarChart> < /ResponsiveContainer>); } export default QueueSizeChart ;