mirror of
https://github.com/apache/superset.git
synced 2024-09-19 20:19:37 -04:00
fix: only remove tooltips relating to a single vis (#167)
This commit is contained in:
parent
4760af293e
commit
f4d01bd914
@ -41,7 +41,7 @@
|
||||
"devDependencies": {
|
||||
"@superset-ui/build-config": "^0.1.0",
|
||||
"@superset-ui/commit-config": "^0.0.9",
|
||||
"@superset-ui/chart": "^0.11.13",
|
||||
"@superset-ui/chart": "^0.11.14",
|
||||
"@superset-ui/chart-composition": "^0.11.9",
|
||||
"@superset-ui/color": "^0.11.9",
|
||||
"@superset-ui/connection": "^0.11.10",
|
||||
|
@ -43,12 +43,14 @@ import {
|
||||
generateMultiLineTooltipContent,
|
||||
generateRichLineTooltipContent,
|
||||
generateTimePivotTooltip,
|
||||
generateTooltipClassName,
|
||||
generateAreaChartTooltipContent,
|
||||
getMaxLabelSize,
|
||||
getTimeOrNumberFormatter,
|
||||
hideTooltips,
|
||||
tipFactory,
|
||||
tryNumify,
|
||||
removeTooltip,
|
||||
setAxisShowMaxMin,
|
||||
stringifyTimeRange,
|
||||
wrapTooltip,
|
||||
@ -254,6 +256,10 @@ function nvd3Vis(element, props) {
|
||||
const container = element;
|
||||
container.innerHTML = '';
|
||||
const activeAnnotationLayers = annotationLayers.filter(layer => layer.show);
|
||||
const chartId =
|
||||
container.parentElement && container.parentElement.id !== ''
|
||||
? container.parentElement.id
|
||||
: null;
|
||||
|
||||
let chart;
|
||||
let width = maxWidth;
|
||||
@ -803,6 +809,18 @@ function nvd3Vis(element, props) {
|
||||
data.push(...timeSeriesAnnotations);
|
||||
}
|
||||
|
||||
// Uniquely identify tooltips based on chartId so this chart instance only
|
||||
// controls its own tooltips
|
||||
if (chartId) {
|
||||
if (chart && chart.interactiveLayer && chart.interactiveLayer.tooltip) {
|
||||
chart.interactiveLayer.tooltip.classes([generateTooltipClassName(chartId)]);
|
||||
}
|
||||
|
||||
if (chart && chart.tooltip) {
|
||||
chart.tooltip.classes([generateTooltipClassName(chartId)]);
|
||||
}
|
||||
}
|
||||
|
||||
// render chart
|
||||
svg
|
||||
.datum(data)
|
||||
@ -1080,7 +1098,11 @@ function nvd3Vis(element, props) {
|
||||
// Remove tooltips before rendering chart, if the chart is being re-rendered sometimes
|
||||
// there are left over tooltips in the dom,
|
||||
// this will clear them before rendering the chart again.
|
||||
if (chartId) {
|
||||
removeTooltip(chartId);
|
||||
} else {
|
||||
hideTooltips(true);
|
||||
}
|
||||
|
||||
nv.addGraph(drawGraph);
|
||||
}
|
||||
|
@ -18,10 +18,15 @@
|
||||
*/
|
||||
import { reactify } from '@superset-ui/chart';
|
||||
import Component from './NVD3Vis';
|
||||
import { hideTooltips } from './utils';
|
||||
import { hideTooltips, removeTooltip } from './utils';
|
||||
|
||||
function componentWillUnmount() {
|
||||
const { id } = this.props; // eslint-disable-line babel/no-invalid-this
|
||||
if (id !== null && id !== undefined) {
|
||||
removeTooltip(id);
|
||||
} else {
|
||||
hideTooltips(true);
|
||||
}
|
||||
}
|
||||
|
||||
export default reactify(Component, { componentWillUnmount });
|
||||
|
@ -267,6 +267,18 @@ export function hideTooltips(shouldRemove) {
|
||||
}
|
||||
}
|
||||
|
||||
export function generateTooltipClassName(uuid) {
|
||||
return `tooltip-${uuid}`;
|
||||
}
|
||||
|
||||
export function removeTooltip(uuid) {
|
||||
const classSelector = `.${generateTooltipClassName(uuid)}`;
|
||||
const target = document.querySelector(classSelector);
|
||||
if (target) {
|
||||
target.remove();
|
||||
}
|
||||
}
|
||||
|
||||
export function wrapTooltip(chart, maxWidth) {
|
||||
const tooltipLayer =
|
||||
chart.useInteractiveGuideline && chart.useInteractiveGuideline()
|
||||
|
@ -8,6 +8,7 @@ export default [
|
||||
{
|
||||
renderStory: () => (
|
||||
<SuperChart
|
||||
id="stacked-area-chart"
|
||||
chartType="area"
|
||||
datasource={dummyDatasource}
|
||||
width={400}
|
||||
|
Loading…
Reference in New Issue
Block a user