Avoid partially hiding of chart tooltip near chart ends

radzenhq · May 18, 2024 · 2ae940a · 2ae940a
1 parent 676e612
commit 2ae940a
Show file tree

Hide file tree

Showing 3 changed files with 198 additions and 7 deletions.
diff --git a/Radzen.Blazor/Rendering/ChartTooltip.razor b/Radzen.Blazor/Rendering/ChartTooltip.razor
@@ -1,4 +1,8 @@
-<div class="rz-chart-tooltip @Class" style="left: @(X.ToInvariantString())px; top: @(Y.ToInvariantString())px">
+@using Microsoft.JSInterop
+
+@inject IJSRuntime JSRuntime
+
+<div @ref="@chartTooltipElement" class="rz-chart-tooltip rz-chart-tooltip-top-center @Class" style="left: @(X.ToInvariantString())px; top: @(Y.ToInvariantString())px">
     <div class="rz-chart-tooltip-content" style="@Style">
     @if (ChildContent != null)
     {
@@ -38,4 +42,20 @@
 
     [Parameter]
     public string Class { get; set; }
+
+    [CascadingParameter]
+    public RadzenChart Chart { get; set; }
+
+    ElementReference? chartTooltipElement;
+
+    /// <inheritdoc />
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        await base.OnAfterRenderAsync(firstRender);
+
+        if (chartTooltipElement != null)
+        {
+            await JSRuntime.InvokeAsync<string>("Radzen.setChartTooltipCssClass", chartTooltipElement, Chart.Element, X, Y);
+        }
+    }
 }
diff --git a/Radzen.Blazor/themes/components/blazor/_chart.scss b/Radzen.Blazor/themes/components/blazor/_chart.scss
@@ -238,12 +238,35 @@ $chart-color-schemes: (
 
 .rz-chart-tooltip {
   position: absolute;
-  transform: translate(-50%, -100%);
   transition: top 0.2s, left 0.2s;
   top: 0;
   left: 0;
 }
 
+.rz-chart-tooltip-top-right {
+  transform: translate(-11px, -100%);
+}
+
+.rz-chart-tooltip-top-center {
+  transform: translate(-50%, -100%);
+}
+
+.rz-chart-tooltip-top-left {
+  transform: translate(-100%, -100%) translate(11px, 0);
+}
+
+.rz-chart-tooltip-bottom-right {
+  transform: translate(-11px, 0);
+}
+
+.rz-chart-tooltip-bottom-center {
+  transform: translate(-50%, 0);
+}
+
+.rz-chart-tooltip-bottom-left {
+  transform: translate(-100%, 0) translate(11px, 0);
+}
+
 .rz-chart-tooltip-content {
   background: var(--rz-chart-tooltip-background);
   color: var(--rz-chart-tooltip-color);
@@ -253,24 +276,124 @@ $chart-color-schemes: (
   white-space: nowrap;
 }
 
-
 .rz-chart-tooltip {
   &:not(.rz-pie-tooltip) {
     .rz-chart-tooltip-content {
-      margin-bottom: 15px;
       &:after {
         content: ' ';
         position: absolute;
         width: 8px;
         height: 8px;
-        left: 50%;
-        bottom: 0;
         background-color: inherit;
         transform-origin: center;
-        transform: translate(-50%, -11px) rotate(45deg);
         border-bottom: inherit;
         border-right: inherit;
       }
     }
   }
 }
+
+.rz-chart-tooltip-top-center {
+  &:not(.rz-pie-tooltip) {
+    .rz-chart-tooltip-content {
+      margin-bottom: 15px;
+      &:after {
+        transform: translate(-50%, -11px) rotate(45deg);
+        bottom: 0;
+      }
+    }
+  }
+}
+
+.rz-chart-tooltip-top-right {
+  &:not(.rz-pie-tooltip) {
+    .rz-chart-tooltip-content {
+      margin-bottom: 15px;
+      &:after {
+        transform: translateX(11px) translate(-50%, -11px) rotate(45deg);
+        bottom: 0;
+      }
+    }
+  }
+}
+
+.rz-chart-tooltip-top-left {
+  &:not(.rz-pie-tooltip) {
+    .rz-chart-tooltip-content {
+      margin-bottom: 15px;
+      &:after {
+        transform: translateX(-11px) translate(-50%, -11px) rotate(45deg);
+        bottom: 0;
+      }
+    }
+  }
+}
+
+.rz-chart-tooltip-bottom-center {
+  &:not(.rz-pie-tooltip) {
+    .rz-chart-tooltip-content {
+      margin-top: 15px;
+      &:after {
+        transform: translate(-50%, 11px) rotate(-135deg);
+        top: 0;
+      }
+    }
+  }
+}
+
+.rz-chart-tooltip-bottom-left {
+  &:not(.rz-pie-tooltip) {
+    .rz-chart-tooltip-content {
+      margin-top: 15px;
+      &:after {
+        transform: translateX(-11px) translate(-50%, 11px) rotate(-135deg);
+        top: 0;
+      }
+    }
+  }
+}
+
+.rz-chart-tooltip-bottom-right {
+  &:not(.rz-pie-tooltip) {
+    .rz-chart-tooltip-content {
+      margin-top: 15px;
+      &:after {
+        transform: translateX(11px) translate(-50%, 11px) rotate(-135deg);
+        top: 0;
+      }
+    }
+  }
+}
+
+.rz-chart-tooltip-top-center,
+.rz-chart-tooltip-bottom-center {
+  &:not(.rz-pie-tooltip) {
+    .rz-chart-tooltip-content {
+      &:after {
+        left: 50%;
+      }
+    }
+  }
+}
+
+.rz-chart-tooltip-top-right,
+.rz-chart-tooltip-bottom-right {
+  &:not(.rz-pie-tooltip) {
+    .rz-chart-tooltip-content {
+      &:after {
+        left: 0;
+      }
+    }
+  }
+}
+
+.rz-chart-tooltip-top-left,
+.rz-chart-tooltip-bottom-left {
+  &:not(.rz-pie-tooltip) {
+    .rz-chart-tooltip-content {
+      &:after {
+        left: 100%;
+      }
+    }
+  }
+}
diff --git a/Radzen.Blazor/wwwroot/Radzen.Blazor.js b/Radzen.Blazor/wwwroot/Radzen.Blazor.js
@@ -2275,5 +2275,53 @@ window.Radzen = {
         } else {
             start();
         }
+    },
+    setChartTooltipCssClass: function (chartTooltip, chart, x, y) {
+        var chartRect = Radzen.clientRect(chart);
+        var left = chartRect.left + x;
+        var top = chartRect.top + y;
+        if (!Radzen.isPointOfElementInForeground(chart, left, top)) {
+            chartTooltip.style.display = 'none';
+            return;
+        }
+
+        var chartTooltipRect = Radzen.clientRect(chartTooltip);
+        var marginY = 0;
+        var verticalPosition = "top";
+        if (!Radzen.isPointOfElementInForeground(chart, left, top - chartTooltipRect.height - 1)) {
+            verticalPosition = "bottom";
+            marginY = chartTooltipRect.height;
+        }
+        var horizontalPosition = "center";
+        if (!Radzen.isPointOfElementInForeground(chart, left + chartTooltipRect.width / 2 + 1, top + marginY)) {
+            horizontalPosition = "left";
+        } else if (!Radzen.isPointOfElementInForeground(chart, left - chartTooltipRect.width / 2 - 1, top + marginY)) {
+            horizontalPosition = "right";
+        }
+
+        var currentCssClass;
+        chartTooltip.classList.forEach(function(value) {
+            if (value.startsWith("rz-chart-tooltip-")) {
+                currentCssClass = value;
+            }
+        });
+        var cssClass = `rz-chart-tooltip-${verticalPosition}-${horizontalPosition}`;
+        if (!currentCssClass || currentCssClass != cssClass) {
+            chartTooltip.classList.add(cssClass);
+        }
+        if (currentCssClass && currentCssClass != cssClass) {
+            chartTooltip.classList.remove(currentCssClass);
+        }
+    },
+    isPointOfElementInForeground: function(element, x, y) {
+        var p = document.elementFromPoint(x, y);
+        while (p && p != document.body) {
+            if (p == element) {
+                return true;
+                break;
+            }
+            p = p.parentElement;
+        }
+        return false;
     }
 };