Files
superset2/superset-frontend/plugins/plugin-chart-echarts/src/defaults.ts
Michael S. Molina 3bc0865d90 fix: Drill to detail blocked by tooltip (#22082)
Co-authored-by: Ville Brofeldt <ville.brofeldt@apple.com>
2022-11-23 21:50:06 +02:00

93 lines
3.5 KiB
TypeScript

import { CallbackDataParams } from 'echarts/types/src/util/types';
import { LegendOrientation } from './types';
import { TOOLTIP_POINTER_MARGIN, TOOLTIP_OVERFLOW_MARGIN } from './constants';
/**
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements. See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership. The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
export const defaultGrid = {
containLabel: true,
};
export const defaultTooltip = {
position: (
canvasMousePos: [number, number],
params: CallbackDataParams,
tooltipDom: HTMLElement,
rect: any,
sizes: { contentSize: [number, number]; viewSize: [number, number] },
) => {
// algorithm copy-pasted from here:
// https://github.com/apache/echarts/issues/5004#issuecomment-559668309
// The chart canvas position
const canvasRect = tooltipDom.parentElement
?.getElementsByTagName('canvas')[0]
.getBoundingClientRect();
// The mouse coordinates relative to the whole window
// The first parameter to the position function is the mouse position relative to the canvas
const mouseX = canvasMousePos[0] + (canvasRect?.x || 0);
const mouseY = canvasMousePos[1] + (canvasRect?.y || 0);
// The width and height of the tooltip dom element
const tooltipWidth = sizes.contentSize[0];
const tooltipHeight = sizes.contentSize[1];
// Start by placing the tooltip top and right relative to the mouse position
let xPos = mouseX + TOOLTIP_POINTER_MARGIN;
let yPos = mouseY - TOOLTIP_POINTER_MARGIN - tooltipHeight;
// The tooltip is overflowing past the right edge of the window
if (xPos + tooltipWidth >= document.documentElement.clientWidth) {
// Attempt to place the tooltip to the left of the mouse position
xPos = mouseX - TOOLTIP_POINTER_MARGIN - tooltipWidth;
// The tooltip is overflowing past the left edge of the window
if (xPos <= 0)
// Place the tooltip a fixed distance from the left edge of the window
xPos = TOOLTIP_OVERFLOW_MARGIN;
}
// The tooltip is overflowing past the top edge of the window
if (yPos <= 0) {
// Attempt to place the tooltip to the bottom of the mouse position
yPos = mouseY + TOOLTIP_POINTER_MARGIN;
// The tooltip is overflowing past the bottom edge of the window
if (yPos + tooltipHeight >= document.documentElement.clientHeight)
// Place the tooltip a fixed distance from the top edge of the window
yPos = TOOLTIP_OVERFLOW_MARGIN;
}
// Return the position (converted back to a relative position on the canvas)
return [xPos - (canvasRect?.x || 0), yPos - (canvasRect?.y || 0)];
},
};
export const defaultYAxis = {
scale: true,
};
export const defaultLegendPadding = {
[LegendOrientation.Top]: 20,
[LegendOrientation.Bottom]: 20,
[LegendOrientation.Left]: 170,
[LegendOrientation.Right]: 170,
};