Commit 8cf0af88 authored by Adriel Santiago's avatar Adriel Santiago Committed by Mike Greiling

Wrap long chart tooltip series label names

Resolves an issue where long series label names overflow
the popover chart tooltip container
parent 3ba9e4e4
<script>
import { GlAreaChart } from '@gitlab/ui/dist/charts';
import { GlAreaChart, GlChartSeriesLabel } from '@gitlab/ui/dist/charts';
import dateFormat from 'dateformat';
import { debounceByAnimationFrame } from '~/lib/utils/common_utils';
import { getSvgIconPathContent } from '~/lib/utils/icon_utils';
......@@ -12,6 +12,7 @@ let debouncedResize;
export default {
components: {
GlAreaChart,
GlChartSeriesLabel,
Icon,
},
inheritAttrs: false,
......@@ -137,6 +138,9 @@ export default {
return timestamp < acc || acc === null ? timestamp : acc;
}, null);
},
isMultiSeries() {
return this.tooltip.content.length > 1;
},
recentDeployments() {
return this.deploymentData.reduce((acc, deployment) => {
if (deployment.created_at >= this.earliestDatapoint) {
......@@ -197,7 +201,7 @@ export default {
);
this.tooltip.sha = deploy.sha.substring(0, 8);
} else {
const { seriesName } = seriesData;
const { seriesName, color } = seriesData;
// seriesData.value contains the chart's [x, y] value pair
// seriesData.value[1] is threfore the chart y value
const value = seriesData.value[1].toFixed(3);
......@@ -205,6 +209,7 @@ export default {
this.tooltip.content.push({
name: seriesName,
value,
color,
});
}
});
......@@ -246,24 +251,33 @@ export default {
:height="height"
@updated="onChartUpdated"
>
<template v-if="tooltip.isDeployment">
<template slot="tooltipTitle">
<div v-if="tooltip.isDeployment">
{{ __('Deployed') }}
</div>
{{ tooltip.title }}
</template>
<template slot="tooltipContent">
<div v-if="tooltip.isDeployment" class="d-flex align-items-center">
<div slot="tooltipContent" class="d-flex align-items-center">
<icon name="commit" class="mr-2" />
{{ tooltip.sha }}
</div>
</template>
<template v-else>
<template slot="tooltipTitle">
<div class="text-nowrap">
{{ tooltip.title }}
</div>
</template>
<template slot="tooltipContent">
<div
v-for="(content, key) in tooltip.content"
:key="key"
class="d-flex justify-content-between"
>
{{ content.name }} {{ content.value }}
<gl-chart-series-label :color="isMultiSeries ? content.color : ''">
{{ content.name }}
</gl-chart-series-label>
<div class="prepend-left-32">
{{ content.value }}
</div>
</div>
</template>
</template>
......
......@@ -661,6 +661,11 @@ $feature-toggle-color: #fff;
$feature-toggle-text-color: #fff;
$feature-toggle-color-enabled: #4a8bee;
/*
* Monitor Charts
*/
$chart-tooltip-max-width: 512px;
/*
Stat Graph
*/
......
.chart-tooltip > .popover {
min-width: 0;
width: max-content;
max-width: $chart-tooltip-max-width;
}
---
title: Fix long label overflow on metrics dashboard
merge_request: 26775
author:
type: fixed
import { shallowMount } from '@vue/test-utils';
import { GlAreaChart } from '@gitlab/ui/dist/charts';
import { GlAreaChart, GlChartSeriesLabel } from '@gitlab/ui/dist/charts';
import { shallowWrapperContainsSlotText } from 'spec/helpers/vue_test_utils_helper';
import Area from '~/monitoring/components/charts/area.vue';
import MonitoringStore from '~/monitoring/stores/monitoring_store';
......@@ -121,13 +121,15 @@ describe('Area component', () => {
});
it('formats tooltip content', () => {
expect(areaChart.vm.tooltip.content).toEqual([{ name: 'Core Usage', value: '5.556' }]);
const name = 'Core Usage';
const value = '5.556';
const seriesLabel = areaChart.find(GlChartSeriesLabel);
expect(seriesLabel.vm.color).toBe('');
expect(shallowWrapperContainsSlotText(seriesLabel, 'default', name)).toBe(true);
expect(areaChart.vm.tooltip.content).toEqual([{ name, value, color: undefined }]);
expect(
shallowWrapperContainsSlotText(
areaChart.find(GlAreaChart),
'tooltipContent',
'Core Usage 5.556',
),
shallowWrapperContainsSlotText(areaChart.find(GlAreaChart), 'tooltipContent', value),
).toBe(true);
});
});
......
......@@ -663,10 +663,10 @@
resolved "https://registry.yarnpkg.com/@gitlab/svgs/-/svgs-1.58.0.tgz#bb05263ff2eb7ca09a25cd14d0b1a932d2ea9c2f"
integrity sha512-RlWSjjBT4lMIFuNC1ziCO1nws9zqZtxCjhrqK2DxDDTgp2W0At9M/BFkHp8RHyMCrO3g1fHTrLPUgzr5oR3Epg==
"@gitlab/ui@^3.0.1":
version "3.0.2"
resolved "https://registry.yarnpkg.com/@gitlab/ui/-/ui-3.0.2.tgz#29a17699751261657487b939c651c0f93264df2a"
integrity sha512-JZhcS5cDxtpxopTc55UWvUbZAwKvxygYHT9I01QmUtKgaKIJlnjBj8zkcg1xHazX7raSjjtjqfDEla39a+luuQ==
"@gitlab/ui@^3.1.0":
version "3.1.0"
resolved "https://registry.yarnpkg.com/@gitlab/ui/-/ui-3.1.0.tgz#718fce208c14dc539859715a03978922c5b003b5"
integrity sha512-xCz8uCeP/4pzuQSoqfrFLeB0lfVHpvQ08r8/CkhSoDTpv34AXvmaxbv1PR8lIadRi43KuPTN639zHHKC2Z0b1g==
dependencies:
"@babel/standalone" "^7.0.0"
bootstrap-vue "^2.0.0-rc.11"
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment