@gitlab/ui 85.4.0 → 85.5.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [85.5.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v85.4.1...v85.5.0) (2024-06-27)
+
+
+### Features
+
+* **GlTooltip:** Use color design tokens ([d62b0fc](https://gitlab.com/gitlab-org/gitlab-ui/commit/d62b0fcc07ccefc438e289cf84f5f9cbf6963c62))
+
+## [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/dist/components/charts/sparkline/sparkline.js

@@ -84,6 +84,7 @@ var script = {
     return {
       chartInstance: null,
       tooltip: {
+        show: false,
         title: '',
         content: '',
         position: {
@@ -177,6 +178,8 @@ var script = {
   methods: {
     onChartCreated(chartInstance) {
       this.chartInstance = chartInstance;
+      this.tooltip.show = false;
+
       /**
        * Emitted when the chart is created.
        * The payload contains the echarts instance.
@@ -188,6 +191,9 @@ var script = {
     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 = {
@@ -202,6 +208,8 @@ var script = {
       let {
         seriesData = []
       } = _ref;
+      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
@@ -211,10 +219,11 @@ var script = {
       } = firstEntry;
       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
@@ -226,7 +235,7 @@ const __vue_script__ = script;
 /* template */
 var __vue_render__ = function () {
 var _obj;
-var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{directives:[{name:"resize-observer",rawName:"v-resize-observer",value:(_vm.handleResize),expression:"handleResize"}],staticClass:"gl-display-flex gl-align-items-center",class:{ 'gl-h-full': _vm.autoHeight }},[_vm._t("default"),_vm._v(" "),_c('div',{staticClass:"gl-flex-grow-1 gl-relative",class:( _obj = {}, _obj[_vm.$options.HEIGHT_AUTO_HORIZONTAL_LAYOUT_CLASSES] = _vm.autoHeight, _obj ),attrs:{"data-testid":"chart-container"}},[_c('chart',_vm._g(_vm._b({class:{ 'gl-flex-grow-1': _vm.autoHeight },attrs:{"height":_vm.height,"options":_vm.options},on:{"created":_vm.onChartCreated}},'chart',_vm.$attrs,false),_vm.$listeners)),_vm._v(" "),(_vm.chartInstance)?_c('chart-tooltip',{attrs:{"chart":_vm.chartInstance,"top":_vm.tooltip.position.top,"left":_vm.tooltip.position.left,"placement":"top"},scopedSlots:_vm._u([{key:"title",fn:function(){return [_c('div',{staticClass:"gl-white-space-nowrap",attrs:{"data-testid":"tooltip-title"}},[_vm._v("\n          "+_vm._s(_vm.tooltip.title)+"\n        ")])]},proxy:true},{key:"default",fn:function(){return [_c('div',{staticClass:"gl-display-flex",attrs:{"data-testid":"tooltip-content"}},[(_vm.tooltipLabel)?_c('span',{staticClass:"gl-pr-6 gl-mr-auto"},[_vm._v(_vm._s(_vm.tooltipLabel))]):_vm._e(),_vm._v(" "),_c('strong',[_vm._v(_vm._s(_vm.tooltip.content))])])]},proxy:true}],null,false,2830367259)}):_vm._e()],1),_vm._v(" "),(_vm.showLastYValue)?_c('span',{staticClass:"gl-display-inline-flex gl-justify-content-center gl-ml-5",attrs:{"data-testid":"last-y-value"}},[_vm._v("\n    "+_vm._s(_vm.lastYValue)+"\n  ")]):_vm._e()],2)};
+var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{directives:[{name:"resize-observer",rawName:"v-resize-observer",value:(_vm.handleResize),expression:"handleResize"}],staticClass:"gl-display-flex gl-align-items-center",class:{ 'gl-h-full': _vm.autoHeight }},[_vm._t("default"),_vm._v(" "),_c('div',{staticClass:"gl-flex-grow-1 gl-relative",class:( _obj = {}, _obj[_vm.$options.HEIGHT_AUTO_HORIZONTAL_LAYOUT_CLASSES] = _vm.autoHeight, _obj ),attrs:{"data-testid":"chart-container"}},[_c('chart',_vm._g(_vm._b({class:{ 'gl-flex-grow-1': _vm.autoHeight },attrs:{"height":_vm.height,"options":_vm.options},on:{"created":_vm.onChartCreated}},'chart',_vm.$attrs,false),_vm.$listeners)),_vm._v(" "),(_vm.chartInstance)?_c('chart-tooltip',{attrs:{"show":_vm.tooltip.show,"chart":_vm.chartInstance,"top":_vm.tooltip.position.top,"left":_vm.tooltip.position.left,"placement":"top"},scopedSlots:_vm._u([{key:"title",fn:function(){return [_c('div',{staticClass:"gl-white-space-nowrap",attrs:{"data-testid":"tooltip-title"}},[_vm._v("\n          "+_vm._s(_vm.tooltip.title)+"\n        ")])]},proxy:true},{key:"default",fn:function(){return [_c('div',{staticClass:"gl-display-flex",attrs:{"data-testid":"tooltip-content"}},[(_vm.tooltipLabel)?_c('span',{staticClass:"gl-pr-6 gl-mr-auto"},[_vm._v(_vm._s(_vm.tooltipLabel))]):_vm._e(),_vm._v(" "),_c('strong',[_vm._v(_vm._s(_vm.tooltip.content))])])]},proxy:true}],null,false,2830367259)}):_vm._e()],1),_vm._v(" "),(_vm.showLastYValue)?_c('span',{staticClass:"gl-display-inline-flex gl-justify-content-center gl-ml-5",attrs:{"data-testid":"last-y-value"}},[_vm._v("\n    "+_vm._s(_vm.lastYValue)+"\n  ")]):_vm._e()],2)};
 var __vue_staticRenderFns__ = [];
 
   /* style */