CHANGELOG.md

+## [85.4.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v85.4.0...v85.4.1) (2024-06-26)
+
+
+### Bug Fixes
+
+* **GlSparklineChart:** Prevent rendering blank or invalid tooltips ([e462352](https://gitlab.com/gitlab-org/gitlab-ui/commit/e46235217c576aaaed63ca38b30f3fdee3c54a63))
+
 # [85.4.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v85.3.1...v85.4.0) (2024-06-26)
 
 

package.json

 {
   "name": "@gitlab/ui",
-  "version": "85.4.0",
+  "version": "85.4.1",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

src/components/charts/sparkline/sparkline.spec.js

@@ -127,19 +127,36 @@ describe('sparkline chart component', () => {
     expect(getTooltipContent().text()).toContain(tooltipLabel);
   });
 
-  it('adds the right content to the tooltip', async () => {
-    const xValue = 'foo';
-    const yValue = 'bar';
-    const mockData = { seriesData: [{ data: [xValue, yValue] }] };
+  describe.each`
+    title        | content      | show
+    ${'title'}   | ${'3'}       | ${null}
+    ${undefined} | ${'3'}       | ${false}
+    ${null}      | ${'3'}       | ${false}
+    ${''}        | ${'3'}       | ${false}
+    ${'   '}     | ${'3'}       | ${false}
+    ${'title'}   | ${undefined} | ${false}
+    ${'title'}   | ${null}      | ${false}
+    ${'title'}   | ${''}        | ${false}
+    ${'title'}   | ${'  '}      | ${false}
+  `('for a tooltip with title=`$title` and content=`$content`', ({ title, content, show }) => {
+    beforeEach(() => {
+      getXAxisLabelFormatter()({ seriesData: [{ data: [title, content] }] });
+      return waitForAnimationFrame();
+    });
 
-    getXAxisLabelFormatter()(mockData);
+    it('sets the correct value for tooltip.show', () => {
+      expect(getTooltip().props().show).toBe(show);
+    });
 
-    expect(getTooltipTitle().text()).toBe('');
-    expect(getTooltipContent().text()).toBe('');
+    if (show === null) {
+      it('displays the correct title', () => {
+        expect(getTooltipTitle().text()).toBe(title);
+      });
 
-    await waitForAnimationFrame();
-    expect(getTooltipTitle().text()).toBe(xValue);
-    expect(getTooltipContent().text()).toBe(yValue);
+      it('displays the correct content', () => {
+        expect(getTooltipContent().text()).toBe(content);
+      });
+    }
   });
 
   it(`shows the last entry's y-value per default`, async () => {

src/components/charts/sparkline/sparkline.vue

@@ -89,6 +89,7 @@ export default {
     return {
       chartInstance: null,
       tooltip: {
+        show: false,
         title: '',
         content: '',
         position: {
@@ -178,6 +179,8 @@ export default {
   methods: {
     onChartCreated(chartInstance) {
       this.chartInstance = chartInstance;
+      this.tooltip.show = false;
+
       /**
        * Emitted when the chart is created.
        * The payload contains the echarts instance.
@@ -189,6 +192,9 @@ export default {
     handleResize() {
       this.chartInstance.resize();
     },
+    isNilOrBlank(text) {
+      return isNil(text) || (typeof text === 'string' && text.trim() === '');
+    },
     setTooltipPosition(data) {
       const [left, top] = this.chartInstance.convertToPixel('grid', data);
       this.tooltip.position = {
@@ -200,6 +206,8 @@ export default {
     // point on the line is selected). Note that it will not trigger if the axis pointer is removed,
     // only when it changes from one point to another or is shown for the first time.
     generateTooltip({ seriesData = [] }) {
+      this.tooltip.show = false;
+
       // seriesData is an array of nearby data point coordinates
       // seriesData[0] is the nearest point at which the tooltip is displayed
       // https://echarts.apache.org/en/option.html#xAxis.axisPointer.label.formatter
@@ -208,11 +216,12 @@ export default {
       if (!data) return;
 
       const [title, content] = data;
-      if (isNil(title) || isNil(content)) return;
+      if (this.isNilOrBlank(title) || this.isNilOrBlank(content)) return;
 
       this.tooltip.title = title;
       this.tooltip.content = content;
       this.setTooltipPosition(data);
+      this.tooltip.show = null;
     },
   },
   HEIGHT_AUTO_HORIZONTAL_LAYOUT_CLASSES,
@@ -241,6 +250,7 @@ export default {
       />
       <chart-tooltip
         v-if="chartInstance"
+        :show="tooltip.show"
         :chart="chartInstance"
         :top="tooltip.position.top"
         :left="tooltip.position.left"