lastboy · lastboy · Dec 10, 2024 · Dec 10, 2024
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,12 @@
 # Changelog
 
+## [1.1.2] - 2024-12-10
+
+## Added 
+- Tooltip support for top label sections, now configurable as a general setting. This feature can be enabled or disabled using the tooltipLabel property.
+* Formatting Support: The tooltip for top labels supports the standard format configuration for customizing display values.
+* Callback for Custom Behavior: A new tooltipLabel callback is available to override the default behavior, providing full control over tooltip content and interactions.
+
 ## [1.1.1] - 2024-12-08
 
 ## Fixed

diff --git a/README.md b/README.md
@@ -158,6 +158,11 @@ graph.draw();
 
   - **tooltip**  
     Callback function for tooltip events, overriding the default implementation.  
+    `(event, { label, value, x, y }) => {}`
+
+  - **tooltipLabel**  
+    Callback function for tooltip events, overriding the default implementation.  
+    `(event, { label, value, x, y, sectionDetails }) => {}`
 
     - **Signature**:  
       `(event, { label, value }) => {}`
@@ -190,7 +195,10 @@ graph.draw();
   Whether details should be displayed (`true | false`).
 
 - **tooltip**  
-  Whether the tooltip should be displayed (`true | false`).  
+  Whether the tooltip should be displayed (`(default) true | false`).  
+
+- **tooltipLabel**  
+  Whether the tooltip label should be displayed (`true | false (default)`).  
 
   **Note:** Tooltip display depends on the details display for range calculations according to the dividers.
 

diff --git a/dist/js/funnel-graph.js b/dist/js/funnel-graph.js
diff --git a/dist/js/funnel-graph.min.js b/dist/js/funnel-graph.min.js
diff --git a/examples/example.html b/examples/example.html
@@ -120,22 +120,17 @@
                 label: (event, opts) => {
                     // label handler logic
                     console.log("label clicked", opts);
-                }
+                },
+                // tooltipLabel: (event, opts) => {
+                //     console.log(opts)
+                // }
             },
             // example for overriding the lanels
             // format: {
             //     value: (opt) => {
-            //         if (opt.index === 1) {
-            //             return 1;
-            //         }
-
             //         return formatLargeNumber(opt.value);
             //     },
             //     tooltip: (opt) => {
-            //         if (opt.index === 1) {
-            //             return 1;
-            //         }
-
             //         return formatLargeNumber(opt.value);
             //     }
             // }
@@ -164,6 +159,8 @@
             { id: 'gradientToggleDirection', text: 'Gradient Toggle Direction', action: () => graph.gradientToggleDirection() },
             { id: 'hideTooltip', text: 'Hide Tooltip', action: () => graph.updateData({ tooltip: false }) },
             { id: 'showTooltip', text: 'Show Tooltip', action: () => graph.updateData({ tooltip: true }) },
+            { id: 'hideTooltipLabel', text: 'Hide Tooltip Lbl', action: () => graph.updateData({ tooltipLabel: false }) },
+            { id: 'showTooltipLabel', text: 'Show Tooltip Lbl', action: () => graph.updateData({ tooltipLabel: true }) },
             { id: 'hideDetails', text: 'Hide Details', action: () => graph.updateData({ width: 600, height: 400, details: false, margin: { top: 0, right: 0, bottom: 0, left: 0, text: 0 } }) },
             { id: 'showDetails', text: 'Show Details', action: () => graph.updateData({ width: 600, height: 400, details: true, margin: { top: 100, right: 80, bottom: 80, left: 80, text: 20 } }) },
             { id: 'setResize', text: 'Toggle Resize', action: () => { resize = !resize; graph.updateData({ resize }); } },

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "d3-funnel-graph",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "SVG Funnel Graph Javascript Library",
   "main": "dist/js/funnel-graph.min.js",
   "style": "dist/funnel-graph.min.css",
@@ -19,10 +19,10 @@
     "url": "https://github.com/lastboy/funnel-graph-js.git"
   },
   "bugs": {
-    "url": "https://github.com/lastboy/funnel-graph-js.git/issues"
+    "url": "https://github.com/lastboy/funnel-graph-js/issues"
   },
-  "homepage": "https://github.com/lastboy/funnel-graph-js.git#readme",
-  "changelog": "https://github.com/lastboy/funnel-graph-js.git/releases",
+  "homepage": "https://github.com/lastboy/funnel-graph-js/#readme",
+  "changelog": "https://github.com/lastboy/funnel-graph-js/blob/master/CHANGELOG.md",
   "keywords": [
     "d3",
     "funnel",

diff --git a/src/js/d3-handlers.js b/src/js/d3-handlers.js
@@ -35,8 +35,14 @@ export const addMouseEventIfNotExists = ({ context, updateLinePositions }) => (p
                 tooltipTimeout = timeout(() => {
 
                     const path = select(this);
+                    const isMouseOnTooltip = handlerMetadata?.mouseOnTooltip;
+                    const isMouseOnTooltipLabel = handlerMetadata?.mouseOnTooltipLabel;
 
-                    if (context.showTooltip() && path && tooltipElement) {
+                    const showTooltip = (isMouseOnTooltip && context.showTooltip()) || (isMouseOnTooltipLabel && context.showTooltipLabel())
+
+                    if (showTooltip && path && tooltipElement) {
+
+                        const { index = -1 } = metadata;
 
                         // get the mouse point
                         const [x, y] = pointer(e, path);
@@ -47,8 +53,9 @@ export const addMouseEventIfNotExists = ({ context, updateLinePositions }) => (p
                         label = is2d ? handlerMetadata.subLabel || label : label;
                         const value = handlerMetadata.value;
 
+                        const sectionDetails = handlerMetadata?.sectionsDetails?.[index];
                         if (tooltipHandler) {
-                            tooltipHandler(e, { label, value, x, y })
+                            tooltipHandler(e, { label, value, x, y, sectionDetails });
                         } else {
 
                             const format = context.getFormat();
@@ -57,15 +64,26 @@ export const addMouseEventIfNotExists = ({ context, updateLinePositions }) => (p
                                 labelFormatCallback = format.tooltip;
                             }
 
-                            const tooltipText = `${label}: ${labelFormatCallback(handlerMetadata)}`;
+                            let tooltipText = `<div>${label}: ${labelFormatCallback(handlerMetadata)}</div>`;
+                            if (sectionDetails) {
+                                tooltipText = sectionDetails
+                                    .map((item) => `<div><strong>${item?.name}</strong>: ${labelFormatCallback({ ...handlerMetadata, value: item?.value })}</div>`)
+                                    .join("");
+                            }
+
                             tooltipElement
                                 // TODO: when exceeding the document area - move the tooltip up/down or left/right
                                 // according to the position (e.g. top /right window eƒxceeded or right) 
                                 .style("left", (clickPoint.x + 10) + "px")
                                 .style("top", (clickPoint.y + 10) + "px")
-                                .text(tooltipText)
+                                .style("display", "flex")
+                                .style("align-items", sectionDetails ? "start" : "center")
+                                .style("flex-direction", "column") 
+                                .style("height", "auto") 
+                                .style("gap", "10px") 
+                                .style("padding", "4px")
+                                .html(tooltipText)
                                 .style("opacity", "1")
-                                .style("display", "flex");
                         }
                     }
                 }, 500);
@@ -143,13 +161,20 @@ export const mouseInfoHandler = ({ context, clickHandler, metadata, tooltip, upd
     const dataInfoValues = dataInfoItem?.values || [];
     const dataInfoLabels = dataInfoItem?.labels || [];
     const dataInfoSubLabels = dataInfoItem?.subLabels || [];
+    const sectionsDetails = dataInfoItem?.sectionsDetails;
+    const mouseOnTooltipLabel = dataInfoItem?.mouseOnTooltipLabel;
+    const mouseOnTooltip = dataInfoItem?.mouseOnTooltip;
+
     const index = metadata.hasOwnProperty("index") ? metadata.index : -1;
 
     dataInfoItemForArea = {
         value: dataInfoValues?.[areaIndex],
         label: dataInfoLabels?.[areaIndex],
         subLabel: dataInfoSubLabels?.[index],
-        sectionIndex: areaIndex
+        sectionIndex: areaIndex,
+        sectionsDetails,
+        mouseOnTooltipLabel,
+        mouseOnTooltip
     }
 
     metadata = {

diff --git a/src/js/d3.js b/src/js/d3.js
@@ -203,17 +203,31 @@ const onEachPathHandler = ({ context }) => function (d, i, nodes) {
 const onEachPathCallbacksHandler = ({ context }) => function (d, i, nodes) {
 
     const callbacks = context.getCallBacks();
-    const d3Path = select(nodes[i]);
+    const d3Element = select(nodes[i]);
 
     const addMouseHandler = addMouseEventIfNotExists({ context, updateLinePositions });
     addMouseHandler(
-        d3Path,
+        d3Element,
         (typeof callbacks?.click === 'function') ? callbacks.click : undefined,
         (typeof callbacks?.tooltip === 'function') ? callbacks.tooltip : undefined,
         { index: i }
     );
 };
 
+const onEachGroupLabelsCallbacksHandler = ({ context }) => function (d, i, nodes) {
+
+    const callbacks = context.getCallBacks();
+    const d3Element = select(nodes[i]);
+
+    const addMouseHandler = addMouseEventIfNotExists({ context, updateLinePositions });
+    addMouseHandler(
+        d3Element,
+        null,
+        (typeof callbacks?.tooltipLabel === 'function') ? callbacks.tooltipLabel : undefined,
+        { index: i }
+    );
+};
+
 /**
  * Get the data nfo for each path
  */
@@ -229,7 +243,29 @@ const getDataInfo = ({ context }) => (d, i) => {
     const infoItemLabels = data.labels || [];
     const infoItemSubLabels = data?.subLabels || [];
 
-    return `{ "values": ${JSON.stringify(infoItemValues)}, "labels": ${JSON.stringify(infoItemLabels)}, "subLabels": ${JSON.stringify(infoItemSubLabels)} }`;
+    return `{ "mouseOnTooltip": true, "values": ${JSON.stringify(infoItemValues)}, "labels": ${JSON.stringify(infoItemLabels)}, "subLabels": ${JSON.stringify(infoItemSubLabels)} }`;
+}
+
+/**
+ * Get the data nfo for each path
+ */
+const getGroupLabelDataInfo = ({ context }) => (d, i) => {
+
+    const is2d = context.is2d();
+    const data = {
+        values: context.getValues(),
+        labels: context.getLabels(),
+        subLabels: context.getSubLabels()
+    };
+
+    const infoItemValues = data.values.map(item => is2d ? item.reduce((acc, current) => acc + current, 0) : item ) || [];
+    const infoItemLabels = data.labels || [];
+
+    const sectionDetailsAvailable = (data.subLabels?.length && is2d);
+    const sectionsDetailsObject = sectionDetailsAvailable ? data.values.map(arr => arr.map( (nestedArr, index) => ( { value: nestedArr, name: data.subLabels?.[index] || "NA" } ))) : undefined;
+    const sectionsDetails = sectionDetailsAvailable ? `, "sectionsDetails": ${JSON.stringify(sectionsDetailsObject)}` : ""; 
+
+    return `{ "mouseOnTooltipLabel": true ,"values": ${JSON.stringify(infoItemValues)}, "labels": ${JSON.stringify(infoItemLabels)} ${sectionsDetails} }`;
 }
 
 /**
@@ -390,13 +426,17 @@ const drawInfo = ({
             labelFormatCallback = format.value;
         }
 
+        const groupLabelsCallbackHandler = onEachGroupLabelsCallbacksHandler({ context });
+        const getDataInfoHandler = getGroupLabelDataInfo({ context });
+
         getInfoSvgGroup(id, margin).selectAll('g.label__group')
             .data(info)
             .join(
                 enter => {
 
                     return enter.append("g")
                         .attr("class", "label__group")
+                        .attr('data-info', getDataInfoHandler)
                         .each(function (d, i) {
                             const x = !vertical ? calcTextPos(i) : margin.text.left;
                             const y = !vertical ? margin.text.top : calcTextPos(i);
@@ -430,10 +470,20 @@ const drawInfo = ({
 
                             removeClickEvent(g);
                             addGroupLabelHandler(g, i);
+
                         })
+                        .transition() 
+                        .duration(400) 
+                        .on("end", function (d, i, nodes) {
+                            const pathElement = select(this);
+                            pathElement.style("pointer-events", "all");
+                            groupLabelsCallbackHandler(d, i, nodes);
+                        });
                 },
 
-                update => update.each(function (d, i) {
+                update => update
+                .attr('data-info', getDataInfoHandler)
+                .each(function (d, i) {
 
                     const x = !vertical ? calcTextPos(i) : margin.text.left;
                     const y = !vertical ? margin.text.top : calcTextPos(i);
@@ -470,9 +520,15 @@ const drawInfo = ({
 
                     removeClickEvent(g);
                     addGroupLabelHandler(g, i);
-
-                }),
-                exit => exit
+                })
+                .transition() 
+                .duration(400) 
+                .on("end", function (d, i, nodes) {
+                    const pathElement = select(this);
+                    pathElement.style("pointer-events", "all");
+                    groupLabelsCallbackHandler(d, i, nodes);
+                })
+                ,exit => exit
                     .each(function () {
                        const g = select(this);
                        removeClickEvent(g);

diff --git a/src/js/logger.js b/src/js/logger.js
@@ -10,7 +10,7 @@
  */
 export const getLogger = ({ module }) => {
 
-    const projectName = "[Funnel Graph JS]";
+    const projectName = "[D3 Funnel Graph]";
     const _style = "background: #007acc; color: white; padding: 2px 4px; border-radius: 3px";
     const getColorStyle = (method) => {
         switch (method) {

diff --git a/src/js/main.js b/src/js/main.js
@@ -38,6 +38,7 @@ const logger = getLogger({ module: "Main" });
  *          'tooltip': (event, { label, value }) => {},
  *          -- top label handler
  *          label: (event, { index, value, label, subLabel, sectionIndex }) => {}
+ *          tooltipLabel: (event, { value, label, sectionIndex }) => {}
  *      },
  * 
  *      format: {
@@ -50,6 +51,9 @@ const logger = getLogger({ module: "Main" });
  *      -- display the OOTB tooltip - on / off
  *      tooltip: true,
  * 
+ *      -- display the OOTB tooltip label - on / off
+ *      tooltipLabel: false,
+ * 
  *      -- remove the text - only graph will be display
  *      details: false,
  * 
@@ -81,6 +85,7 @@ class FunnelGraph {
 
         this.setDetails(options.hasOwnProperty('details') ? options.details : true);
         this.setTooltip(options.hasOwnProperty('tooltip') ? options.tooltip : true);
+        this.setTooltipLabel(options.hasOwnProperty('tooltipLabel') ? options.tooltip : false);
         this.getDirection(options?.direction);
         this.setValues(options?.data?.values || []);
         this.setLabels(options?.data?.labels || []);
@@ -140,6 +145,10 @@ class FunnelGraph {
         return this.tooltip;
     }
 
+    showTooltipLabel() {
+        return this.tooltipLabel;
+    }
+
     showDetails() {
         return this.details;
     }
@@ -345,6 +354,10 @@ class FunnelGraph {
         this.tooltip = bool;
     }
 
+    setTooltipLabel(bool) {
+        this.tooltipLabel = bool;
+    }
+
     setDetails(bool) {
         this.details = bool;
     }
@@ -625,6 +638,7 @@ class FunnelGraph {
                 { key: "margin", fn: (arg) => this.setMargin(arg) },
                 { key: "details", fn: (arg) => this.setDetails(arg) },
                 { key: "tooltip", fn: (arg) => this.setTooltip(arg) },
+                { key: "tooltipLabel", fn: (arg) => this.setTooltipLabel(arg) },
                 { key: "values", fn: (arg) => this.setValues(arg) },
                 { key: "labels", fn: (arg) => this.setLabels(arg) },
                 { key: "subLabels", fn: (arg) => this.setSubLabels(arg) },