starred/radzen-blazor
1
0
Fork 0
mirror of https://github.com/radzenhq/radzen-blazor.git synced 2026-02-08 05:37:40 +00:00
Code Issues 1.3k Packages Projects Releases 22 Wiki Activity

Improve Chart tooltip positioning. Reduce the number of roundrips required to display a tooltip.

Browse Source
This commit is contained in:
Atanas Korchev
2022-06-21 14:57:26 +03:00
parent 71b50171de
commit f5fa061392
2 changed files with 47 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
Radzen.Blazor/CartesianSeries.cs
View File

@@ -586,18 +586,16 @@ namespace Radzen.Blazor
/// <inheritdoc />
public virtual object DataAt(double x, double y)
{
var first = Items.FirstOrDefault();
var last = Items.LastOrDefault();
if (Items.Any())
{
return Items.Select(item =>
{
var distance = Math.Abs(TooltipX(item) - x);
return new { Item = item, Distance = distance };
}).Aggregate((a, b) => a.Distance < b.Distance ? a : b).Item;
}
var category = Category(Chart.CategoryScale);
var startX = Chart.CategoryScale.Scale(category(first), true);
var endX = Chart.CategoryScale.Scale(category(last), true);
var count = Math.Max(Items.Count() - 1, 1);
var index = Convert.ToInt32((x - startX) / ((endX - startX) / count));
return Items.ElementAtOrDefault(index);
return null;
}
/// <summary>

52
Radzen.Blazor/wwwroot/Radzen.Blazor.js
View File

@@ -20,6 +20,19 @@ var resolveCallbacks = [];
var rejectCallbacks = [];
window.Radzen = {
throttle: function (callback, delay) {
var timeout = null;
return function () {
var args = arguments;
var ctx = this;
if (!timeout) {
timeout = setTimeout(function () {
callback.apply(ctx, args);
timeout = null;
}, delay);
}
};
},
mask: function (id, mask, pattern, characterPattern) {
var el = document.getElementById(id);
if (el) {
@@ -1042,15 +1055,14 @@ window.Radzen = {
document.addEventListener('click', target.clickHandler);
},
destroyChart: function (ref) {
if (ref.mouseMoveHandler) {
ref.removeEventListener('mousemove', ref.mouseMoveHandler);
delete ref.mouseMoveHandler;
}
if (ref.clickHandler) {
ref.removeEventListener('click', ref.clickHandler);
delete ref.clickHandler;
}
ref.removeEventListener('mouseleave', ref.mouseLeaveHandler);
delete ref.mouseLeaveHandler;
ref.removeEventListener('mouseenter', ref.mouseEnterHandler);
delete ref.mouseEnterHandler;
ref.removeEventListener('mousemove', ref.mouseMoveHandler);
delete ref.mouseMoveHandler;
ref.removeEventListener('click', ref.clickHandler);
delete ref.clickHandler;
this.destroyResizable(ref);
},
destroyGauge: function (ref) {
@@ -1085,11 +1097,21 @@ window.Radzen = {
return {width: rect.width, height: rect.height};
},
createChart: function (ref, instance) {
ref.mouseMoveHandler = function (e) {
var rect = ref.getBoundingClientRect();
var x = e.clientX - rect.left;
var y = e.clientY - rect.top;
instance.invokeMethodAsync('MouseMove', x, y);
var inside = false;
ref.mouseMoveHandler = this.throttle(function (e) {
if (inside) {
var rect = ref.getBoundingClientRect();
var x = e.clientX - rect.left;
var y = e.clientY - rect.top;
instance.invokeMethodAsync('MouseMove', x, y);
}
}, 100);
ref.mouseEnterHandler = function () {
inside = true;
};
ref.mouseLeaveHandler = function () {
inside = false;
instance.invokeMethodAsync('MouseMove', -1, -1);
};
ref.clickHandler = function (e) {
var rect = ref.getBoundingClientRect();
@@ -1098,6 +1120,8 @@ window.Radzen = {
instance.invokeMethodAsync('Click', x, y);
};
ref.addEventListener('mouseenter', ref.mouseEnterHandler);
ref.addEventListener('mouseleave', ref.mouseLeaveHandler);
ref.addEventListener('mousemove', ref.mouseMoveHandler);
ref.addEventListener('click', ref.clickHandler);