import { useTheme } from "@material-ui/core/styles" ; import React from "react" ; import { LineChart , Line , XAxis , YAxis , CartesianGrid , Tooltip , Legend , ResponsiveContainer , } from "recharts" ; import { Metrics } from "../api" ; interface Props { data : Metrics [ ] ; startTime : number ; endTime : number ; yAxisTickFormatter ? : ( val : number ) => string ; } interface ChartData { timestamp : number ; [ qname ] : number ; } function toChartData ( metrics ) { if ( metrics . length === 0 ) { return [ ] ; } let byTimestamp = { } ; for ( let x of metrics ) { for ( let [ ts , val ] of x . values ) { if ( ! byTimestamp [ ts ] ) { byTimestamp [ ts ] = { timestamp : ts } ; } const qname = x . metric . queue ; if ( qname ) { byTimestamp [ ts ] [ qname ] = parseFloat ( val ) ; } } } return Object . values ( byTimestamp ) ; } const lineColors = [ "#2085ec" , "#72b4eb" , "#0a417a" , "#8464a0" , "#cea9bc" , "#323232" , ] ; function QueueMetricsChart ( props ) { const theme = useTheme ( ) ; const data = toChartData ( props . data ) ; const keys = props . data . map ( ( x ) => x . metric . queue ) ; return ( < ResponsiveContainer height = { 260 } > < LineChart data = { data } > < CartesianGrid strokeDasharray = "3 3" / > < XAxis minTickGap = { 10 } dataKey = "timestamp" domain = { [ props . startTime , props . endTime ] } tickFormatter = { ( timestamp ) => new Date ( timestamp * 1000 ) . toLocaleTimeString ( ) } type = "number" scale = "time" stroke = { theme . palette . text . secondary } / > < YAxis tickFormatter = { props . yAxisTickFormatter } stroke = { theme . palette . text . secondary } / > < Tooltip labelFormatter = { ( timestamp ) => { return new Date ( timestamp * 1000 ) . toLocaleTimeString ( ) ; } } /> < Legend / > { keys . map ( ( key , idx ) => ( < Line key = { key } type = "monotone" dataKey = { key } stroke = { lineColors [ idx % lineColors . length ] } dot = { false } / > ) ) } < /LineChart> < /ResponsiveContainer>); } QueueMetricsChart . defaultProps = { yAxisTickFormatter : ( val ) => val . toString ( ) , } ; export default QueueMetricsChart ;