@gitlab/ui 86.13.0 → 86.13.1

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [86.13.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v86.13.0...v86.13.1) (2024-07-18)
+
+
+### Bug Fixes
+
+* **GlSparklineChart:** Render flat lines with gradient enabled ([a8ad20f](https://gitlab.com/gitlab-org/gitlab-ui/commit/a8ad20f3ffa3efeb7cc545a0e7183b54434a97d2))
+
 # [86.13.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v86.12.1...v86.13.0) (2024-07-17)
 
 

package/dist/components/charts/sparkline/sparkline.js

@@ -134,15 +134,18 @@ var script = {
       const mergedOptions = merge({}, defaultChartOptions, sparkLineChartOptions);
       return mergeSeriesToOptions(mergedOptions, this.series);
     },
+    willShowLastYValue() {
+      return this.showLastYValue && this.data.length;
+    },
     series() {
       const {
         data,
         smooth,
         itemStyle,
-        showLastYValue,
+        willShowLastYValue,
         connectNulls
       } = this;
-      const markPoint = showLastYValue ? {
+      const markPoint = willShowLastYValue ? {
         symbol: 'circle',
         cursor: 'auto',
         animation: false,
@@ -170,14 +173,34 @@ var script = {
       };
     },
     itemStyle() {
-      if (this.gradient.length) {
+      if (this.applyGradient) {
         return {
           color: generateGradient(this.gradient)
         };
       }
+      if (this.gradient.length) {
+        // If the gradient cannot be used, then apply
+        // the first colour to the entire line.
+        return {
+          color: this.gradient[0]
+        };
+      }
       return {};
     },
+    applyGradient() {
+      if (this.gradient.length && this.data.length) {
+        // Applying a gradient a constant line will cause it to not render,
+        // so skip the gradient if all values are equal.
+        const [, firstValue] = this.data[0];
+        return this.data.some(_ref => {
+          let [, value] = _ref;
+          return firstValue !== value;
+        });
+      }
+      return false;
+    },
     lastYValue() {
+      if (!this.willShowLastYValue) return undefined;
       const latestEntry = this.data.slice(-1)[0];
       return latestEntry[1];
     },
@@ -214,10 +237,10 @@ var script = {
     // This function is called any time the axis pointer is changed (the black bubble showing which
     // 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(_ref) {
+    generateTooltip(_ref2) {
       let {
         seriesData = []
-      } = _ref;
+      } = _ref2;
       this.tooltip.show = false;
 
       // seriesData is an array of nearby data point coordinates

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "86.13.0",
+  "version": "86.13.1",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -111,7 +111,7 @@
     "@babel/preset-env": "^7.24.8",
     "@babel/preset-react": "^7.24.7",
     "@cypress/grep": "^4.0.1",
-    "@gitlab/eslint-plugin": "19.5.0",
+    "@gitlab/eslint-plugin": "19.6.0",
     "@gitlab/fonts": "^1.3.0",
     "@gitlab/stylelint-config": "6.1.0",
     "@gitlab/svgs": "3.105.0",

package/src/components/charts/sparkline/sparkline.vue

@@ -139,9 +139,12 @@ export default {
       const mergedOptions = merge({}, defaultChartOptions, sparkLineChartOptions);
       return mergeSeriesToOptions(mergedOptions, this.series);
     },
+    willShowLastYValue() {
+      return this.showLastYValue && this.data.length;
+    },
     series() {
-      const { data, smooth, itemStyle, showLastYValue, connectNulls } = this;
-      const markPoint = showLastYValue
+      const { data, smooth, itemStyle, willShowLastYValue, connectNulls } = this;
+      const markPoint = willShowLastYValue
         ? {
             symbol: 'circle',
             cursor: 'auto',
@@ -171,12 +174,29 @@ export default {
       };
     },
     itemStyle() {
-      if (this.gradient.length) {
+      if (this.applyGradient) {
         return { color: generateGradient(this.gradient) };
       }
+      if (this.gradient.length) {
+        // If the gradient cannot be used, then apply
+        // the first colour to the entire line.
+        return { color: this.gradient[0] };
+      }
       return {};
     },
+    applyGradient() {
+      if (this.gradient.length && this.data.length) {
+        // Applying a gradient a constant line will cause it to not render,
+        // so skip the gradient if all values are equal.
+        const [, firstValue] = this.data[0];
+        return this.data.some(([, value]) => firstValue !== value);
+      }
+
+      return false;
+    },
     lastYValue() {
+      if (!this.willShowLastYValue) return undefined;
+
       const latestEntry = this.data.slice(-1)[0];
 
       return latestEntry[1];