@internetstiftelsen/charts 0.5.0 → 0.5.1

package/donut-chart.js

@@ -224,7 +224,7 @@ export class DonutChart extends BaseChart {
             .append('g')
             .attr('class', 'donut-segments')
             .attr('transform', `translate(${cx}, ${cy})`);
-        const tooltipDiv = this.tooltip
+        const resolveTooltipDiv = () => this.tooltip
             ? select(`#${this.tooltip.id}`)
             : null;
         segmentGroup
@@ -245,6 +245,7 @@ export class DonutChart extends BaseChart {
                 .selectAll('.donut-segment')
                 .filter((_, i, nodes) => nodes[i] !== event.currentTarget)
                 .style('opacity', 0.5);
+            const tooltipDiv = resolveTooltipDiv();
             if (tooltipDiv && !tooltipDiv.empty()) {
                 tooltipDiv
                     .style('visibility', 'visible')
@@ -253,6 +254,7 @@ export class DonutChart extends BaseChart {
             }
         })
             .on('mousemove', (event) => {
+            const tooltipDiv = resolveTooltipDiv();
             if (tooltipDiv && !tooltipDiv.empty()) {
                 this.positionTooltip(event, tooltipDiv);
             }
@@ -263,6 +265,7 @@ export class DonutChart extends BaseChart {
                 .duration(ANIMATION_DURATION_MS)
                 .attr('d', arcGenerator(d));
             segmentGroup.selectAll('.donut-segment').style('opacity', 1);
+            const tooltipDiv = resolveTooltipDiv();
             if (tooltipDiv && !tooltipDiv.empty()) {
                 tooltipDiv.style('visibility', 'hidden');
             }

package/package.json

@@ -1,5 +1,5 @@
 {
-    "version": "0.5.0",
+    "version": "0.5.1",
     "name": "@internetstiftelsen/charts",
     "type": "module",
     "sideEffects": false,

package/tooltip.js

@@ -65,11 +65,14 @@ export class Tooltip {
         });
     }
     initialize(theme) {
-        this.cleanup();
-        this.tooltipDiv = select('body')
-            .append('div')
-            .attr('class', 'chart-tooltip')
-            .attr('id', this.id)
+        const existingTooltip = select(`#${this.id}`);
+        const tooltip = existingTooltip.empty()
+            ? select('body')
+                .append('div')
+                .attr('class', 'chart-tooltip')
+                .attr('id', this.id)
+            : existingTooltip;
+        tooltip
             .style('position', 'absolute')
             .style('visibility', 'hidden')
             .style('background-color', 'white')
@@ -81,6 +84,7 @@ export class Tooltip {
             .style('font-size', '12px')
             .style('pointer-events', 'none')
             .style('z-index', '1000');
+        this.tooltipDiv = tooltip;
     }
     attachToArea(svg, data, series, xKey, x, y, theme, plotArea, parseValue, isHorizontal = false) {
         if (!this.tooltipDiv)
@@ -300,11 +304,12 @@ export class Tooltip {
         });
     }
     cleanup() {
-        const tooltip = select(`#${this.id}`);
+        const tooltip = this.tooltipDiv ?? select(`#${this.id}`);
         if (tooltip.empty()) {
+            this.tooltipDiv = null;
             return;
         }
-        tooltip.remove();
+        tooltip.style('visibility', 'hidden');
         this.tooltipDiv = null;
     }
 }