@@ -88,11 +88,12 @@ const MetricGraph = ({ name } : { name: MetricName }) => {
88
88
const points = buckets . length > width ? buckets . slice ( buckets . length - width ) : buckets ;
89
89
let minPoint : PlotPoint = { x : 0 , y : 0 , value : 0 } ;
90
90
let maxPoint : PlotPoint = { x : 0 , y : 99999999 , value : 0 } ;
91
+ let lastPoint : PlotPoint = { x : 0 , y : 0 , value : 0 } ;
91
92
92
93
ctx . lineWidth = 1.5 ;
93
94
ctx . strokeStyle = Theme . palette . secondary ;
94
95
ctx . beginPath ( ) ;
95
- points . forEach ( ( p : DataPoint , i : number ) => {
96
+ points . forEach ( ( p : DataPoint , i : number , arr ) => {
96
97
const { value } = p ;
97
98
const pHeight = ( ( value - minValue ) * height ) / range ;
98
99
const x = i ;
@@ -106,6 +107,11 @@ const MetricGraph = ({ name } : { name: MetricName }) => {
106
107
}
107
108
108
109
ctx . lineTo ( x , y ) ;
110
+
111
+ // Record last value
112
+ if ( i === arr . length - 1 ) {
113
+ lastPoint = { x, y, value } ;
114
+ }
109
115
} ) ;
110
116
ctx . stroke ( ) ;
111
117
@@ -114,6 +120,13 @@ const MetricGraph = ({ name } : { name: MetricName }) => {
114
120
ctx . fillStyle = 'white' ;
115
121
ctx . fillText ( minPoint . value . toFixed ( 1 ) , minPoint . x + LABEL_OFFSET , minPoint . y - LABEL_OFFSET ) ;
116
122
ctx . fillText ( maxPoint . value . toFixed ( 1 ) , maxPoint . x + LABEL_OFFSET , maxPoint . y - LABEL_OFFSET ) ;
123
+
124
+ // Most recent value
125
+ ctx . fillText (
126
+ lastPoint . value . toFixed ( 1 ) ,
127
+ lastPoint . x + LABEL_OFFSET ,
128
+ lastPoint . y - LABEL_OFFSET ,
129
+ ) ;
117
130
} ;
118
131
119
132
return fabricate ( 'div' )
0 commit comments