Commit 7d92f487 authored by Adriel Santiago's avatar Adriel Santiago

Add chart tooltips

Use tooltips for metrics graph data
parent 91b1e9dc
......@@ -3,12 +3,14 @@ import { GlAreaChart } from '@gitlab/ui/dist/charts';
import dateFormat from 'dateformat';
import { debounceByAnimationFrame } from '~/lib/utils/common_utils';
import { getSvgIconPathContent } from '~/lib/utils/icon_utils';
import Icon from '~/vue_shared/components/icon.vue';
let debouncedResize;
export default {
components: {
GlAreaChart,
Icon,
},
inheritAttrs: false,
props: {
......@@ -47,6 +49,12 @@ export default {
},
data() {
return {
tooltip: {
title: '',
content: '',
isDeployment: false,
sha: '',
},
width: 0,
height: 0,
scatterSymbol: undefined,
......@@ -148,8 +156,17 @@ export default {
},
methods: {
formatTooltipText(params) {
const [date, value] = params;
return [dateFormat(date, 'dd mmm yyyy, h:MMtt'), value.toFixed(3)];
const [seriesData] = params.seriesData;
this.tooltip.isDeployment = seriesData.componentSubType === 'scatter';
this.tooltip.title = dateFormat(params.value, 'dd mmm yyyy, h:MMTT');
if (this.tooltip.isDeployment) {
const [deploy] = this.recentDeployments.filter(
deployment => deployment.createdAt === seriesData.value[0],
);
this.tooltip.sha = deploy.sha.substring(0, 8);
} else {
this.tooltip.content = `${this.yAxisLabel} ${seriesData.value[1].toFixed(3)}`;
}
},
getScatterSymbol() {
getSvgIconPathContent('rocket')
......@@ -184,6 +201,22 @@ export default {
:thresholds="alertData"
:width="width"
:height="height"
/>
>
<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">
<icon name="commit" class="mr-2" />
{{ tooltip.sha }}
</div>
<template v-else>
{{ tooltip.content }}
</template>
</template>
</gl-area-chart>
</div>
</template>
......@@ -2623,6 +2623,9 @@ msgstr ""
msgid "DeployTokens|Your new project deploy token has been created."
msgstr ""
msgid "Deployed"
msgstr ""
msgid "Deployed to"
msgstr ""
......
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