Wrap long chart tooltip series label names
Resolves an issue where long series label names overflow the popover chart tooltip container
This commit is contained in:
parent
3ba9e4e44b
commit
8cf0af88e6
|
@ -1,5 +1,5 @@
|
|||
<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 slot="tooltipTitle">
|
||||
<div v-if="tooltip.isDeployment">
|
||||
<template v-if="tooltip.isDeployment">
|
||||
<template slot="tooltipTitle">
|
||||
{{ __('Deployed') }}
|
||||
</div>
|
||||
{{ tooltip.title }}
|
||||
</template>
|
||||
<template slot="tooltipContent">
|
||||
<div v-if="tooltip.isDeployment" class="d-flex align-items-center">
|
||||
</template>
|
||||
<div slot="tooltipContent" class="d-flex align-items-center">
|
||||
<icon name="commit" class="mr-2" />
|
||||
{{ tooltip.sha }}
|
||||
</div>
|
||||
<template v-else>
|
||||
</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
|
||||
*/
|
||||
|
|
|
@ -0,0 +1,5 @@
|
|||
.chart-tooltip > .popover {
|
||||
min-width: 0;
|
||||
width: max-content;
|
||||
max-width: $chart-tooltip-max-width;
|
||||
}
|
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
title: Fix long label overflow on metrics dashboard
|
||||
merge_request: 26775
|
||||
author:
|
||||
type: fixed
|
|
@ -34,7 +34,7 @@
|
|||
"@babel/preset-env": "^7.3.1",
|
||||
"@gitlab/csslab": "^1.9.0",
|
||||
"@gitlab/svgs": "^1.58.0",
|
||||
"@gitlab/ui": "^3.0.1",
|
||||
"@gitlab/ui": "^3.1.0",
|
||||
"apollo-cache-inmemory": "^1.5.1",
|
||||
"apollo-client": "^2.5.1",
|
||||
"apollo-upload-client": "^10.0.0",
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
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"
|
||||
|
|
Loading…
Reference in New Issue