1- import React , { useState , useRef , useImperativeHandle , useEffect } from "react" ;
1+ import React , {
2+ useState ,
3+ useRef ,
4+ useImperativeHandle ,
5+ useEffect ,
6+ useCallback ,
7+ } from "react" ;
28
39import { Line } from "react-chartjs-2" ;
410
@@ -124,9 +130,21 @@ function _Chart(
124130 } ,
125131 } ) ;
126132
133+ const enableTooltips = useCallback (
134+ ( newState : boolean ) => {
135+ ( opts . plugins as any ) . tooltip . enabled = newState ;
136+ opts . datasets ! . line ! . pointHoverRadius = newState ? 3 : 0 ;
137+ setOpts ( opts ) ;
138+ chartRef . current ?. update ( ) ;
139+ } ,
140+ [ opts ]
141+ ) ;
142+ 127143 useEffect ( ( ) => {
128144 if ( ! config . connected ) {
129145 setConnected ( false ) ;
146+ // when disconnected, force tooltips to be enabled
147+ enableTooltips ( true ) ;
130148 return ;
131149 }
132150
@@ -135,8 +153,11 @@ function _Chart(
135153 // cleanup buffer state
136154 worker . postMessage ( { command : "cleanup" } ) ;
137155 setConnected ( true ) ;
156+ 157+ // restore the tooltips state (which match the pause state when connected)
158+ enableTooltips ( pause ) ;
138159 }
139- } , [ config . connected , connected ] ) ;
160+ } , [ config . connected , connected , pause , enableTooltips ] ) ;
140161
141162 const togglePause = ( newState : boolean ) => {
142163 if ( newState === pause ) {
@@ -148,9 +169,6 @@ function _Chart(
148169 setPause ( newState ) ;
149170 worker . postMessage ( { command : "cleanup" } ) ;
150171 enableTooltips ( newState ) ;
151- ( opts . plugins as any ) . tooltip . enabled = newState ;
152- opts . datasets ! . line ! . pointHoverRadius = newState ? 3 : 0 ;
153- setOpts ( opts ) ;
154172 } ;
155173
156174 const setInterpolate = ( interpolate : boolean ) => {
0 commit comments