fix: same-looking tooltips on charts (#10548)

* fix: same-looking tooltips on multiseries charts

* fix: same-looknig tooltips on all chart types

* chore: restore tooltip plugin

* docs: additions to migration guide

* docs: remove labels from scatter and bubble examples

* docs: review fix
This commit is contained in:
Dan Onoshko
2022-08-18 15:34:35 +04:00
committed by GitHub
parent d09e424a0a
commit e7372ade24
16 changed files with 561 additions and 382 deletions

View File

@@ -31,16 +31,6 @@ export default class BubbleController extends DatasetController {
y: {
type: 'linear'
}
},
plugins: {
tooltip: {
callbacks: {
title() {
// Title doesn't make sense for scatter since we format the data as a point
return '';
}
}
}
}
};
@@ -105,6 +95,7 @@ export default class BubbleController extends DatasetController {
*/
getLabelAndValue(index) {
const meta = this._cachedMeta;
const labels = this.chart.data.labels || [];
const {xScale, yScale} = meta;
const parsed = this.getParsed(index);
const x = xScale.getLabelForValue(parsed.x);
@@ -112,7 +103,7 @@ export default class BubbleController extends DatasetController {
const r = parsed._custom;
return {
label: meta.label,
label: labels[index] || '',
value: '(' + x + ', ' + y + (r ? ', ' + r : '') + ')'
};
}

View File

@@ -1,5 +1,5 @@
import DatasetController from '../core/core.datasetController';
import {isArray, isObject, resolveObjectKey, toPercentage, toDimension, valueOrDefault} from '../helpers/helpers.core';
import {isObject, resolveObjectKey, toPercentage, toDimension, valueOrDefault} from '../helpers/helpers.core';
import {formatNumber} from '../helpers/helpers.intl';
import {toRadians, PI, TAU, HALF_PI, _angleBetween} from '../helpers/helpers.math';
@@ -119,28 +119,6 @@ export default class DoughnutController extends DatasetController {
legend.chart.toggleDataVisibility(legendItem.index);
legend.chart.update();
}
},
tooltip: {
callbacks: {
title() {
return '';
},
label(tooltipItem) {
let dataLabel = tooltipItem.label;
const value = ': ' + tooltipItem.formattedValue;
if (isArray(dataLabel)) {
// show value on first line of multiline label
// need to clone because we are changing the value
dataLabel = dataLabel.slice();
dataLabel[0] += value;
} else {
dataLabel += value;
}
return dataLabel;
}
}
}
}
};

View File

@@ -63,18 +63,6 @@ export default class PolarAreaController extends DatasetController {
legend.chart.toggleDataVisibility(legendItem.index);
legend.chart.update();
}
},
// Need to override these to give a nice default
tooltip: {
callbacks: {
title() {
return '';
},
label(context) {
return context.chart.data.labels[context.dataIndex] + ': ' + context.formattedValue;
}
}
}
},

View File

@@ -26,19 +26,6 @@ export default class ScatterController extends DatasetController {
mode: 'point'
},
plugins: {
tooltip: {
callbacks: {
title() {
return ''; // doesn't make sense for scatter since data are formatted as a point
},
label(item) {
return '(' + item.label + ', ' + item.formattedValue + ')';
}
}
}
},
scales: {
x: {
type: 'linear'
@@ -49,6 +36,23 @@ export default class ScatterController extends DatasetController {
}
};
/**
* @protected
*/
getLabelAndValue(index) {
const meta = this._cachedMeta;
const labels = this.chart.data.labels || [];
const {xScale, yScale} = meta;
const parsed = this.getParsed(index);
const x = xScale.getLabelForValue(parsed.x);
const y = yScale.getLabelForValue(parsed.y);
return {
label: labels[index] || '',
value: '(' + x + ', ' + y + ')'
};
}
update(mode) {
const meta = this._cachedMeta;
const {data: points = []} = meta;