Commit cef60443 authored by Phil Hughes's avatar Phil Hughes

Merge branch 'adriel-add-metrics-chart-tooltips' into 'master'

Add metrics chart tooltips

See merge request gitlab-org/gitlab-ce!24651
parents 1c932a61 7d92f487
...@@ -3,12 +3,14 @@ import { GlAreaChart } from '@gitlab/ui/dist/charts'; ...@@ -3,12 +3,14 @@ import { GlAreaChart } from '@gitlab/ui/dist/charts';
import dateFormat from 'dateformat'; import dateFormat from 'dateformat';
import { debounceByAnimationFrame } from '~/lib/utils/common_utils'; import { debounceByAnimationFrame } from '~/lib/utils/common_utils';
import { getSvgIconPathContent } from '~/lib/utils/icon_utils'; import { getSvgIconPathContent } from '~/lib/utils/icon_utils';
import Icon from '~/vue_shared/components/icon.vue';
let debouncedResize; let debouncedResize;
export default { export default {
components: { components: {
GlAreaChart, GlAreaChart,
Icon,
}, },
inheritAttrs: false, inheritAttrs: false,
props: { props: {
...@@ -47,6 +49,12 @@ export default { ...@@ -47,6 +49,12 @@ export default {
}, },
data() { data() {
return { return {
tooltip: {
title: '',
content: '',
isDeployment: false,
sha: '',
},
width: 0, width: 0,
height: 0, height: 0,
scatterSymbol: undefined, scatterSymbol: undefined,
...@@ -148,8 +156,17 @@ export default { ...@@ -148,8 +156,17 @@ export default {
}, },
methods: { methods: {
formatTooltipText(params) { formatTooltipText(params) {
const [date, value] = params; const [seriesData] = params.seriesData;
return [dateFormat(date, 'dd mmm yyyy, h:MMtt'), value.toFixed(3)]; 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() { getScatterSymbol() {
getSvgIconPathContent('rocket') getSvgIconPathContent('rocket')
...@@ -184,6 +201,22 @@ export default { ...@@ -184,6 +201,22 @@ export default {
:thresholds="alertData" :thresholds="alertData"
:width="width" :width="width"
:height="height" :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> </div>
</template> </template>
...@@ -2623,6 +2623,9 @@ msgstr "" ...@@ -2623,6 +2623,9 @@ msgstr ""
msgid "DeployTokens|Your new project deploy token has been created." msgid "DeployTokens|Your new project deploy token has been created."
msgstr "" msgstr ""
msgid "Deployed"
msgstr ""
msgid "Deployed to" msgid "Deployed to"
msgstr "" 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