Wrap long chart tooltip series label names

Resolves an issue where long series label names overflow
the popover chart tooltip container

app/assets/javascripts/monitoring/components/charts/area.vue

 <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>

app/assets/stylesheets/framework/variables.scss

@@ -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
 */

app/assets/stylesheets/pages/monitor.scss

+.chart-tooltip > .popover {
+  min-width: 0;
+  width: max-content;
+  max-width: $chart-tooltip-max-width;
+}

changelogs/unreleased/52258-labels-with-long-names-overflow-on-metrics-dashboard.yml

+---
+title: Fix long label overflow on metrics dashboard
+merge_request: 26775
+author:
+type: fixed

package.json

@@ -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",

spec/javascripts/monitoring/charts/area_spec.js

 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);
         });
       });

yarn.lock

@@ -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"