axidio-styleguide-library1-v2 0.7.44 → 0.7.45

package/fesm2022/axidio-styleguide-library1-v2.mjs

@@ -7109,14 +7109,7 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
             .style('align-items', 'center')
             .style('background-color', 'var(--card-bg)')
             .style('z-index', '10');
-        const tooltip = chartWrapper
-            .append('div')
-            .attr('class', 'chart-tooltip')
-            .style('position', 'absolute')
-            .style('pointer-events', 'none')
-            .style('z-index', '9999')
-            .style('display', 'none');
-        return { svg, svgYAxisLeft, svgYAxisRight, innerContainer, bottomLabelContainer, tooltip };
+        return { svg, svgYAxisLeft, svgYAxisRight, innerContainer, bottomLabelContainer };
     }
     createScales(data, layers, lineData, dimensions) {
         const { width, height, barWidth, barPadding } = dimensions;
@@ -7294,12 +7287,28 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
         }
         return metaData.hoverColor || metaData.colors[d.key];
     }
-    displayTooltip(d, tooltip, metaData, scales) {
+    displayTooltip(d, svg, metaData, scales) {
+        const { xScale, yScale } = scales;
         const value = d[1] - d[0];
         if (isNaN(value))
             return;
-        tooltip
-            .style('display', 'block')
+        const bandwidth = xScale.bandwidth();
+        // Fixed tooltip width for all resolutions
+        const width = /week/i.test(d.data.name) && /\d{4}-\d{2}-\d{2}/.test(d.data.name)
+            ? '250px'
+            : bandwidth + this.CONSTANTS.LEFT_RIGHT_SPACES * 2 > 180
+                ? '180px'
+                : bandwidth + this.CONSTANTS.LEFT_RIGHT_SPACES * 2;
+        svg
+            .append('foreignObject')
+            .attr('x', this.calculateTooltipX(d, xScale, width))
+            .attr('class', 'lib-verticalstack-title-ontop')
+            .attr('y', yScale(d[1]) - 51)
+            .attr('width', width)
+            .attr('height', 40)
+            .append('xhtml:div')
+            .attr('class', 'title')
+            .style('z-index', 99)
             .html(this.generateTooltipHtml(d, metaData, value));
     }
     calculateTooltipX(d, xScale, width) {