@@ -203,17 +203,31 @@ const onEachPathHandler = ({ context }) => function (d, i, nodes) {
203203const onEachPathCallbacksHandler = ( { context } ) => function ( d , i , nodes ) {
204204
205205 const callbacks = context . getCallBacks ( ) ;
206- const d3Path = select ( nodes [ i ] ) ;
206+ const d3Element = select ( nodes [ i ] ) ;
207207
208208 const addMouseHandler = addMouseEventIfNotExists ( { context, updateLinePositions } ) ;
209209 addMouseHandler (
210- d3Path ,
210+ d3Element ,
211211 ( typeof callbacks ?. click === 'function' ) ? callbacks . click : undefined ,
212212 ( typeof callbacks ?. tooltip === 'function' ) ? callbacks . tooltip : undefined ,
213213 { index : i }
214214 ) ;
215215} ;
216216
217+ const onEachGroupLabelsCallbacksHandler = ( { context } ) => function ( d , i , nodes ) {
218+
219+ const callbacks = context . getCallBacks ( ) ;
220+ const d3Element = select ( nodes [ i ] ) ;
221+
222+ const addMouseHandler = addMouseEventIfNotExists ( { context, updateLinePositions } ) ;
223+ addMouseHandler (
224+ d3Element ,
225+ null ,
226+ ( typeof callbacks ?. tooltipLabel === 'function' ) ? callbacks . tooltipLabel : undefined ,
227+ { index : i }
228+ ) ;
229+ } ;
230+
217231/**
218232 * Get the data nfo for each path
219233 */
@@ -229,7 +243,29 @@ const getDataInfo = ({ context }) => (d, i) => {
229243 const infoItemLabels = data . labels || [ ] ;
230244 const infoItemSubLabels = data ?. subLabels || [ ] ;
231245
232- return `{ "values": ${ JSON . stringify ( infoItemValues ) } ${ JSON . stringify ( infoItemLabels ) } ${ JSON . stringify ( infoItemSubLabels ) } ;
246+ return `{ "mouseOnTooltip": true, "values": ${ JSON . stringify ( infoItemValues ) } ${ JSON . stringify ( infoItemLabels ) } ${ JSON . stringify ( infoItemSubLabels ) } ;
247+ }
248+
249+ /**
250+ * Get the data nfo for each path
251+ */
252+ const getGroupLabelDataInfo = ( { context } ) => ( d , i ) => {
253+
254+ const is2d = context . is2d ( ) ;
255+ const data = {
256+ values : context . getValues ( ) ,
257+ labels : context . getLabels ( ) ,
258+ subLabels : context . getSubLabels ( )
259+ } ;
260+
261+ const infoItemValues = data . values . map ( item => is2d ? item . reduce ( ( acc , current ) => acc + current , 0 ) : item ) || [ ] ;
262+ const infoItemLabels = data . labels || [ ] ;
263+
264+ const sectionDetailsAvailable = ( data . subLabels ?. length && is2d ) ;
265+ const sectionsDetailsObject = sectionDetailsAvailable ? data . values . map ( arr => arr . map ( ( nestedArr , index ) => ( { value : nestedArr , name : data . subLabels ?. [ index ] || "NA" } ) ) ) : undefined ;
266+ const sectionsDetails = sectionDetailsAvailable ? `, "sectionsDetails": ${ JSON . stringify ( sectionsDetailsObject ) } : "" ;
267+
268+ return `{ "mouseOnTooltipLabel": true ,"values": ${ JSON . stringify ( infoItemValues ) } ${ JSON . stringify ( infoItemLabels ) } ${ sectionsDetails } ;
233269}
234270
235271/**
@@ -390,13 +426,17 @@ const drawInfo = ({
390426 labelFormatCallback = format . value ;
391427 }
392428
429+ const groupLabelsCallbackHandler = onEachGroupLabelsCallbacksHandler ( { context } ) ;
430+ const getDataInfoHandler = getGroupLabelDataInfo ( { context } ) ;
431+
393432 getInfoSvgGroup ( id , margin ) . selectAll ( 'g.label__group' )
394433 . data ( info )
395434 . join (
396435 enter => {
397436
398437 return enter . append ( "g" )
399438 . attr ( "class" , "label__group" )
439+ . attr ( 'data-info' , getDataInfoHandler )
400440 . each ( function ( d , i ) {
401441 const x = ! vertical ? calcTextPos ( i ) : margin . text . left ;
402442 const y = ! vertical ? margin . text . top : calcTextPos ( i ) ;
@@ -430,10 +470,20 @@ const drawInfo = ({
430470
431471 removeClickEvent ( g ) ;
432472 addGroupLabelHandler ( g , i ) ;
473+
433474 } )
475+ . transition ( )
476+ . duration ( 400 )
477+ . on ( "end" , function ( d , i , nodes ) {
478+ const pathElement = select ( this ) ;
479+ pathElement . style ( "pointer-events" , "all" ) ;
480+ groupLabelsCallbackHandler ( d , i , nodes ) ;
481+ } ) ;
434482 } ,
435483
436- update => update . each ( function ( d , i ) {
484+ update => update
485+ . attr ( 'data-info' , getDataInfoHandler )
486+ . each ( function ( d , i ) {
437487
438488 const x = ! vertical ? calcTextPos ( i ) : margin . text . left ;
439489 const y = ! vertical ? margin . text . top : calcTextPos ( i ) ;
@@ -470,9 +520,15 @@ const drawInfo = ({
470520
471521 removeClickEvent ( g ) ;
472522 addGroupLabelHandler ( g , i ) ;
473-
474- } ) ,
475- exit => exit
523+ } )
524+ . transition ( )
525+ . duration ( 400 )
526+ . on ( "end" , function ( d , i , nodes ) {
527+ const pathElement = select ( this ) ;
528+ pathElement . style ( "pointer-events" , "all" ) ;
529+ groupLabelsCallbackHandler ( d , i , nodes ) ;
530+ } )
531+ , exit => exit
476532 . each ( function ( ) {
477533 const g = select ( this ) ;
478534 removeClickEvent ( g ) ;
0 commit comments