@@ -38,20 +38,20 @@ export const SpeedMultiMeter = ({
3838 { value : formatValue ( perDay ) , label : i18n ( 'perDay' ) } ,
3939 ] ;
4040
41- const [ valueToDisplay , setValueToDisplay ] = React . useState ( perMinute ) ;
41+ const [ valueToDisplayIndex , setValueToDisplayIndex ] = React . useState ( 0 ) ;
4242 const [ highlightedValueIndex , setHighlightedValueIndex ] = React . useState (
4343 withValue ? 0 : undefined ,
4444 ) ;
4545 const [ highlightedContainerIndex , setHighlightedContainerIndex ] = React . useState < number > ( ) ;
4646
47- const onEnterDiagram = ( values : number [ ] , index : number ) => {
48- setValueToDisplay ( values [ index ] ) ;
47+ const onEnterDiagram = ( index : number ) => {
48+ setValueToDisplayIndex ( index ) ;
4949 setHighlightedValueIndex ( index ) ;
5050 setHighlightedContainerIndex ( index ) ;
5151 } ;
5252
5353 const onLeaveDiagram = ( ) => {
54- setValueToDisplay ( perMinute ) ;
54+ setValueToDisplayIndex ( 0 ) ;
5555 setHighlightedValueIndex ( withValue ? 0 : undefined ) ;
5656 setHighlightedContainerIndex ( undefined ) ;
5757 } ;
@@ -70,7 +70,7 @@ export const SpeedMultiMeter = ({
7070 className = { b ( 'bar-container' , {
7171 highlighted : isContainerHighlighted ( index ) ,
7272 } ) }
73- onMouseEnter = { onEnterDiagram . bind ( null , rawValues , index ) }
73+ onMouseEnter = { ( ) => onEnterDiagram ( index ) }
7474 >
7575 < div
7676 className = { b ( 'bar' , {
@@ -102,7 +102,9 @@ export const SpeedMultiMeter = ({
102102 < div className = { b ( ) } >
103103 < div className = { b ( 'content' ) } >
104104 { withValue && (
105- < div className = { b ( 'displayed-value' ) } > { formatValue ( valueToDisplay ) } </ div >
105+ < div className = { b ( 'displayed-value' ) } >
106+ { formatValue ( rawValues [ valueToDisplayIndex ] ) }
107+ </ div >
106108 ) }
107109 < Popover
108110 content = { renderPopoverContent ( ) }
0 commit comments