JakeHillion/storj
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

web/satellite: remove VChart tooltip elements on unmounted

Browse Source 
We use a custom plugin for the chart tooltips. If a user navigates away
from the page while a tooltip is rendered, the element doesn't get
removed. To fix it, when the chart is unmounted check for the tooltip
elements and remove them if they exist.

issue: https://github.com/storj/storj/issues/6344

Change-Id: I42122ef5fad3a1ee7d16ed554881f8c3f79f2b26
This commit is contained in:
Cameron 2023-11-29 17:22:27 -05:00 committed by Storj Robot
parent 7b3770ed17
commit 5c79f59b79
4 changed files with 26 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
web/satellite/src/components/common/VChart.vue
View File

@ -23,6 +23,8 @@ import {
Plugin,
} from 'chart.js';
import { TooltipId } from '@/types/chart';
ChartJS.register(LineElement, PointElement, VTooltip, Filler, LineController, CategoryScale, LinearScale);
const props = defineProps<{
@ -157,6 +159,18 @@ onMounted(() => {
onUnmounted(() => {
chart.value?.destroy();
// custom tooltip element doesn't get cleaned up if the user navigates to a new page using the keyboard.
// There is probably a better way to do this
const storageTooltip = document.getElementById(TooltipId.Storage);
if (storageTooltip) {
document.body.removeChild(storageTooltip);
}
const egressTooltip = document.getElementById(TooltipId.Bandwidth);
if (egressTooltip) {
document.body.removeChild(egressTooltip);
}
});
watch(() => props.chartData, () => {

4
web/satellite/src/components/project/dashboard/BandwidthChart.vue
View File

@ -16,7 +16,7 @@
import { computed, ref, watch } from 'vue';
import { ChartType, TooltipModel, ChartData } from 'chart.js';
import { Tooltip, TooltipParams, ChartTooltipData } from '@/types/chart';
import { Tooltip, TooltipParams, TooltipId, ChartTooltipData } from '@/types/chart';
import { DataStamp } from '@/types/projects';
import { ChartUtils } from '@/utils/chart';
@ -69,7 +69,7 @@ const chartData = computed((): ChartData => {
* Used as constructor of custom tooltip.
*/
function tooltip(tooltipModel: TooltipModel<ChartType>): void {
const tooltipParams = new TooltipParams(tooltipModel, 'bandwidth-chart', 'allocated-bandwidth-tooltip',
const tooltipParams = new TooltipParams(tooltipModel, 'bandwidth-chart', TooltipId.Bandwidth,
allocatedTooltipMarkUp(tooltipModel), 76, 81);
Tooltip.custom(tooltipParams);

4
web/satellite/src/components/project/dashboard/StorageChart.vue
View File

@ -16,7 +16,7 @@
import { computed, ref, watch } from 'vue';
import { ChartType, TooltipModel, ChartData } from 'chart.js';
import { Tooltip, TooltipParams, ChartTooltipData } from '@/types/chart';
import { Tooltip, TooltipParams, TooltipId, ChartTooltipData } from '@/types/chart';
import { DataStamp } from '@/types/projects';
import { ChartUtils } from '@/utils/chart';
@ -68,7 +68,7 @@ const chartData = computed((): ChartData => {
* Used as constructor of custom tooltip.
*/
function tooltip(tooltipModel: TooltipModel<ChartType>): void {
const tooltipParams = new TooltipParams(tooltipModel, 'storage-chart', 'storage-tooltip',
const tooltipParams = new TooltipParams(tooltipModel, 'storage-chart', TooltipId.Storage,
tooltipMarkUp(tooltipModel), 76, 81);
Tooltip.custom(tooltipParams);

8
web/satellite/src/types/chart.ts
View File

@ -41,6 +41,14 @@ class Styling {
) {}
}
/**
* TooltipId defines tooltip IDs.
*/
export enum TooltipId {
Storage = 'storage-tooltip',
Bandwidth = 'allocated-bandwidth-tooltip',
}
/**
* Tooltip provides custom tooltip rendering
*/