From: Jukka Kurkela Date: Thu, 16 Jul 2020 17:28:12 +0000 (+0300) Subject: Fix remaining issues in samples (#7625) X-Git-Tag: v3.0.0-beta.2~39 X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=af855d7646eed442b049c87dcd3c150099203a66;p=thirdparty%2FChart.js.git Fix remaining issues in samples (#7625) * Fix remaining issues in samples * Update migration guide * Use element instead * Update tooltip.md --- diff --git a/docs/docs/configuration/tooltip.md b/docs/docs/configuration/tooltip.md index 6978f8d4d..d6287e659 100644 --- a/docs/docs/configuration/tooltip.md +++ b/docs/docs/configuration/tooltip.md @@ -197,7 +197,10 @@ The tooltip items passed to the tooltip callbacks implement the following interf datasetIndex: number, // Index of this data item in the dataset - dataIndex: number + dataIndex: number, + + // The chart element (point, arc, bar, etc.) for this tooltip item + element: Element, } ``` @@ -271,8 +274,7 @@ var myPieChart = new Chart(ctx, { tableRoot.innerHTML = innerHtml; } - // `this` will be the overall tooltip - var position = this._chart.canvas.getBoundingClientRect(); + var position = context.chart.canvas.getBoundingClientRect(); // Display, position, and set styles for font tooltipEl.style.opacity = 1; diff --git a/docs/docs/getting-started/v3-migration.md b/docs/docs/getting-started/v3-migration.md index 838f33629..102808e68 100644 --- a/docs/docs/getting-started/v3-migration.md +++ b/docs/docs/getting-started/v3-migration.md @@ -342,7 +342,7 @@ The following properties and methods were removed: * Legend `onClick`, `onHover`, and `onLeave` options now receive the legend as the 3rd argument in addition to implicitly via `this` * Legend `onClick`, `onHover`, and `onLeave` options now receive a wrapped `event` as the first parameter. The previous first parameter value is accessible via `event.native`. * `Title.margins` is now private -* The tooltip item's `x` and `y` attributes were removed. Use `datasetIndex` and `dataIndex` to get the element and any corresponding data from it +* The tooltip item's `x` and `y` attributes were replaced by `element`. You can use `element.x` and `element.y` or `element.tooltipPosition()` instead. #### Removal of private APIs diff --git a/samples/animations/loop.html b/samples/animations/loop.html index 7ac5b0b1b..a8fd87cb3 100644 --- a/samples/animations/loop.html +++ b/samples/animations/loop.html @@ -62,17 +62,16 @@ }] }, options: { - animation: (context) => { - if (context.active) { - return { - radius: { - duration: 400, - loop: true - } - }; + animation: (context) => Object.assign({}, + Chart.defaults.animation, + { + radius: { + duration: 400, + easing: 'linear', + loop: context.active + } } - return Chart.defaults.animation; - }, + ), elements: { point: { hoverRadius: 6 diff --git a/samples/tooltips/custom-line.html b/samples/tooltips/custom-line.html index 70abf7e4f..fe5fd0042 100644 --- a/samples/tooltips/custom-line.html +++ b/samples/tooltips/custom-line.html @@ -160,6 +160,7 @@ tooltips: { enabled: false, mode: 'index', + intersect: false, position: 'nearest', custom: customTooltips } diff --git a/samples/tooltips/custom-points.html b/samples/tooltips/custom-points.html index ae5019cf9..3ab438811 100644 --- a/samples/tooltips/custom-points.html +++ b/samples/tooltips/custom-points.html @@ -59,14 +59,15 @@ if (tooltip.dataPoints.length > 0) { tooltip.dataPoints.forEach(function(dataPoint) { - var content = [dataPoint.label, dataPoint.value].join(': '); + var content = [dataPoint.label, dataPoint.formattedValue].join(': '); var $tooltip = $('#tooltip-' + dataPoint.datasetIndex); + var pos = dataPoint.element.tooltipPosition(); $tooltip.html(content); $tooltip.css({ opacity: 1, - top: positionY + dataPoint.y + 'px', - left: positionX + dataPoint.x + 'px', + top: positionY + pos.y + 'px', + left: positionX + pos.x + 'px', }); }); } diff --git a/src/core/core.animation.js b/src/core/core.animation.js index 6ee571478..09e7e03a6 100644 --- a/src/core/core.animation.js +++ b/src/core/core.animation.js @@ -50,6 +50,7 @@ export default class Animation { const remain = me._duration - elapsed; me._start = date; me._duration = Math.floor(Math.max(remain, cfg.duration)); + me._loop = !!cfg.loop; me._to = resolve([cfg.to, to, currentValue, cfg.from]); me._from = resolve([cfg.from, currentValue, to]); } diff --git a/src/plugins/plugin.tooltip.js b/src/plugins/plugin.tooltip.js index d1fe58d99..f0e03f9b1 100644 --- a/src/plugins/plugin.tooltip.js +++ b/src/plugins/plugin.tooltip.js @@ -112,13 +112,12 @@ function splitNewlines(str) { /** * Private helper to create a tooltip item model - * @param item - the chart element (point, arc, bar) to create the tooltip item for + * @param item - {element, index, datasetIndex} to create the tooltip item for * @return new tooltip item */ function createTooltipItem(chart, item) { - const {datasetIndex, index} = item; + const {element, datasetIndex, index} = item; const controller = chart.getDatasetMeta(datasetIndex).controller; - const dataset = controller.getDataset(); const {label, value} = controller.getLabelAndValue(index); return { @@ -126,9 +125,10 @@ function createTooltipItem(chart, item) { label, dataPoint: controller.getParsed(index), formattedValue: value, - dataset, + dataset: controller.getDataset(), dataIndex: index, - datasetIndex + datasetIndex, + element }; } @@ -403,7 +403,8 @@ export class Tooltip extends Element { } const chart = me._chart; - const opts = chart.options.animation && me.options.animation; + const options = me.options; + const opts = options.enabled && chart.options.animation && options.animation; const animations = new Animations(me._chart, opts); me._cachedAnimations = Object.freeze(animations);