@gitlab/ui 115.8.0 → 115.9.1

package/dist/components/base/avatar_link/avatar_link.js

@@ -2,7 +2,7 @@ import GlLink from '../link/link';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 var script = {
-  name: 'AvatarLink',
+  name: 'GlAvatarLink',
   components: {
     GlLink
   }

package/dist/components/base/avatars_inline/avatars_inline.js

@@ -6,7 +6,7 @@ import GlTooltip from '../tooltip/tooltip';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 var script = {
-  name: 'AvatarsInline',
+  name: 'GlAvatarsInline',
   components: {
     GlAvatar,
     GlTooltip

package/dist/components/charts/line/line.js

@@ -94,6 +94,14 @@ var script = {
       type: [Number, String],
       required: false,
       default: null
+    },
+    /**
+     * Controls whether the tooltip should be pinned when clicked.
+     */
+    clickToPinTooltip: {
+      type: Boolean,
+      required: false,
+      default: false
     }
   },
   data() {
@@ -281,7 +289,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',{staticClass:"gl-relative",class:( _obj = {}, _obj[_vm.$options.HEIGHT_AUTO_CLASSES] = _vm.autoHeight, _obj )},[_c('chart',_vm._g(_vm._b({class:{ 'gl-grow': _vm.autoHeight },attrs:{"height":_vm.height,"options":_vm.options},on:{"created":_vm.onCreated,"updated":_vm.onUpdated}},'chart',_vm.$attrs,false),_vm.$listeners)),_vm._v(" "),(_vm.shouldShowAnnotationsTooltip)?_c('chart-tooltip',{ref:"annotationsTooltip",attrs:{"id":"annotationsTooltip","show":_vm.showAnnotationsTooltip,"chart":_vm.chart,"top":_vm.annotationsTooltipPosition.top,"left":_vm.annotationsTooltipPosition.left,"placement":"bottom"},scopedSlots:_vm._u([{key:"title",fn:function(){return [_c('div',[_vm._v(_vm._s(_vm.annotationsTooltipTitle))])]},proxy:true}],null,false,1889294429)},[_vm._v(" "),_c('div',[_vm._v(_vm._s(_vm.annotationsTooltipContent))])]):_vm._e(),_vm._v(" "),(_vm.chart)?_c('chart-tooltip',{ref:"dataTooltip",attrs:{"chart":_vm.chart,"use-default-tooltip-formatter":!_vm.formatTooltipText},scopedSlots:_vm._u([(_vm.$scopedSlots['tooltip-title'])?{key:"title",fn:function(scope){return [_vm._t("tooltip-title",null,null,scope)]}}:null,(_vm.$scopedSlots['tooltip-content'])?{key:"default",fn:function(scope){return [_vm._t("tooltip-content",null,null,scope)]}}:null,(_vm.$scopedSlots['tooltip-value'])?{key:"tooltip-value",fn:function(scope){return [_vm._t("tooltip-value",null,null,scope)]}}:null],null,true)}):_vm._e(),_vm._v(" "),(_vm.hasLegend)?_c('chart-legend',{style:(_vm.legendStyle),attrs:{"chart":_vm.chart,"series-info":_vm.seriesInfo,"text-style":_vm.compiledOptions.textStyle,"min-text":_vm.legendMinText,"max-text":_vm.legendMaxText,"average-text":_vm.legendAverageText,"current-text":_vm.legendCurrentText,"layout":_vm.legendLayout}}):_vm._e()],1)};
+var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"gl-relative",class:( _obj = {}, _obj[_vm.$options.HEIGHT_AUTO_CLASSES] = _vm.autoHeight, _obj )},[_c('chart',_vm._g(_vm._b({class:{ 'gl-grow': _vm.autoHeight },attrs:{"height":_vm.height,"options":_vm.options},on:{"created":_vm.onCreated,"updated":_vm.onUpdated}},'chart',_vm.$attrs,false),_vm.$listeners)),_vm._v(" "),(_vm.shouldShowAnnotationsTooltip)?_c('chart-tooltip',{ref:"annotationsTooltip",attrs:{"id":"annotationsTooltip","show":_vm.showAnnotationsTooltip,"chart":_vm.chart,"top":_vm.annotationsTooltipPosition.top,"left":_vm.annotationsTooltipPosition.left,"placement":"bottom"},scopedSlots:_vm._u([{key:"title",fn:function(){return [_c('div',[_vm._v(_vm._s(_vm.annotationsTooltipTitle))])]},proxy:true}],null,false,1889294429)},[_vm._v(" "),_c('div',[_vm._v(_vm._s(_vm.annotationsTooltipContent))])]):_vm._e(),_vm._v(" "),(_vm.chart)?_c('chart-tooltip',{ref:"dataTooltip",attrs:{"chart":_vm.chart,"use-default-tooltip-formatter":!_vm.formatTooltipText,"click-to-pin":_vm.clickToPinTooltip},scopedSlots:_vm._u([(_vm.$scopedSlots['tooltip-title'])?{key:"title",fn:function(scope){return [_vm._t("tooltip-title",null,null,scope)]}}:null,(_vm.$scopedSlots['tooltip-content'])?{key:"default",fn:function(scope){return [_vm._t("tooltip-content",null,null,scope)]}}:null,(_vm.$scopedSlots['tooltip-value'])?{key:"tooltip-value",fn:function(scope){return [_vm._t("tooltip-value",null,null,scope)]}}:null],null,true)}):_vm._e(),_vm._v(" "),(_vm.hasLegend)?_c('chart-legend',{style:(_vm.legendStyle),attrs:{"chart":_vm.chart,"series-info":_vm.seriesInfo,"text-style":_vm.compiledOptions.textStyle,"min-text":_vm.legendMinText,"max-text":_vm.legendMaxText,"average-text":_vm.legendAverageText,"current-text":_vm.legendCurrentText,"layout":_vm.legendLayout}}):_vm._e()],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/charts/shared/tooltip/tooltip.js

@@ -115,12 +115,23 @@ var script = {
       type: Boolean,
       required: false,
       default: false
+    },
+    /**
+     * Set to true to enable click-to-pin functionality.
+     * When enabled, clicking on a chart point will keep the tooltip open, so the user can interact with the tooltip's content.
+     * The tooltip will unpin when clicking again on the chart and not on the tooltip.
+     */
+    clickToPin: {
+      type: Boolean,
+      required: false,
+      default: false
     }
   },
   data() {
     return {
-      pointerPosition: null,
+      pointerCoords: null,
       isPointerInChart: false,
+      pinnedPosition: null,
       debouncedMouseHandler: debounceByAnimationFrame(this.mouseHandler),
       title: null,
       content: {},
@@ -139,7 +150,9 @@ var script = {
         marginTop: `${-this.yOffset}px`,
         height: `${this.yOffset * 2}px`,
         marginLeft: `${-this.xOffset}px`,
-        width: `${this.xOffset * 2}px`
+        width: `${this.xOffset * 2}px`,
+        pointerEvents: this.isPinned ? 'auto' : 'none',
+        ...this.tooltipPosition
       };
     },
     fixedPosition() {
@@ -159,16 +172,41 @@ var script = {
       }
       return null;
     },
+    tooltipPosition() {
+      if (this.fixedPosition) {
+        return this.fixedPosition;
+      }
+      if (this.pinnedPosition) {
+        return this.pinnedPosition;
+      }
+      return this.pointerPosition;
+    },
     shouldShowPopover() {
       if (this.show !== null) {
         return this.show;
       }
-      return this.isPointerInChart;
+      return this.isPinned || this.isPointerInChart;
+    },
+    isPinned() {
+      return this.pinnedPosition !== null;
+    },
+    pointerPosition() {
+      if (!this.pointerCoords) {
+        return null;
+      }
+      return {
+        left: `${this.pointerCoords.x}px`,
+        top: `${this.pointerCoords.y}px`
+      };
     }
   },
   created() {
     this.chart.getZr().on('mousemove', this.debouncedMouseHandler);
     this.chart.getZr().on('mouseout', this.debouncedMouseHandler);
+    if (this.clickToPin) {
+      document.addEventListener('keydown', this.keyDownHandler);
+      this.chart.getZr().on('click', this.clickHandler);
+    }
     if (this.useDefaultTooltipFormatter) {
       this.chart.setOption({
         xAxis: {
@@ -193,21 +231,83 @@ var script = {
   beforeDestroy() {
     this.chart.getZr().off('mousemove', this.debouncedMouseHandler);
     this.chart.getZr().off('mouseout', this.debouncedMouseHandler);
+    if (this.clickToPin) {
+      this.chart.getZr().off('click', this.clickHandler);
+      document.removeEventListener('keydown', this.keyDownHandler);
+    }
   },
   methods: {
-    mouseHandler(event) {
+    getEventCoordsWithinChart(_ref) {
       let {
-        zrX: x,
-        zrY: y
-      } = event.event;
-      if (Number.isFinite(x) && Number.isFinite(y)) {
-        x = Math.round(x);
-        y = Math.round(y);
-        this.pointerPosition = {
-          left: `${x}px`,
-          top: `${y}px`
-        };
-        this.isPointerInChart = this.chart.containPixel('grid', [x, y]);
+        event
+      } = _ref;
+      const {
+        zrX,
+        zrY
+      } = event;
+      const x = Math.round(zrX);
+      const y = Math.round(zrY);
+      if (!Number.isFinite(x) || !Number.isFinite(y)) {
+        return null;
+      }
+      if (!this.chart.containPixel('grid', [x, y])) {
+        return null;
+      }
+      return {
+        x,
+        y
+      };
+    },
+    mouseHandler(event) {
+      const coords = this.getEventCoordsWithinChart(event);
+      if (!coords) {
+        this.isPointerInChart = false;
+        return;
+      }
+      this.pointerCoords = coords;
+      this.isPointerInChart = true;
+    },
+    clickHandler(event) {
+      if (!this.getEventCoordsWithinChart(event)) {
+        return;
+      }
+      if (!this.isPinned) {
+        this.pinTooltip();
+      } else {
+        this.unpinTooltip(event.event);
+      }
+    },
+    pinTooltip() {
+      this.pinnedPosition = this.pointerPosition;
+
+      // prevents any axis pointers from being moved to a new position, they should also be pinned
+      this.chart.setOption({
+        tooltip: {
+          triggerOn: 'none'
+        }
+      });
+    },
+    unpinTooltip() {
+      this.pinnedPosition = null;
+
+      // restores the axis pointers to be unpinned and be triggered by mousemove
+      this.chart.setOption({
+        tooltip: {
+          triggerOn: 'mousemove',
+          show: false
+        }
+      });
+
+      // shows the tooltip and axis pointer at the position of the click
+      this.chart.dispatchAction({
+        type: 'showTip',
+        x: this.pointerCoords.x,
+        y: this.pointerCoords.y
+      });
+    },
+    keyDownHandler(event) {
+      if (event.key === 'Escape' && this.isPinned) {
+        this.unpinTooltip();
       }
     }
   }
@@ -217,7 +317,7 @@ var script = {
 const __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (_vm.chart)?_c('div',{staticClass:"gl-pointer-events-none"},[_c('div',{staticClass:"gl-chart-tooltip",style:(Object.assign({}, (_vm.fixedPosition || _vm.pointerPosition), _vm.targetStyle)),attrs:{"id":_vm.targetId}}),_vm._v(" "),_c('gl-popover',_vm._b({attrs:{"show":_vm.shouldShowPopover,"target":_vm.targetId,"container":_vm.targetId,"placement":_vm.placement,"triggers":""},scopedSlots:_vm._u([{key:"title",fn:function(){return [_vm._t("title",function(){return [_vm._v(_vm._s(_vm.title))]},null,{ title: _vm.title, params: _vm.params })]},proxy:true}],null,true)},'gl-popover',_vm.$attrs,false),[_vm._v(" "),_vm._t("default",function(){return [_c('tooltip-default-format',{attrs:{"tooltip-content":_vm.content},scopedSlots:_vm._u([(_vm.$scopedSlots['tooltip-value'])?{key:"tooltip-value",fn:function(scope){return [_vm._t("tooltip-value",null,null,scope)]}}:null],null,true)})]},null,{ content: _vm.content, params: _vm.params })],2)],1):_vm._e()};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (_vm.chart)?_c('div',[_c('div',{staticClass:"gl-chart-tooltip",style:(_vm.targetStyle),attrs:{"id":_vm.targetId}}),_vm._v(" "),_c('gl-popover',_vm._b({attrs:{"show":_vm.shouldShowPopover,"target":_vm.targetId,"container":_vm.targetId,"placement":_vm.placement,"triggers":""},scopedSlots:_vm._u([{key:"title",fn:function(){return [_vm._t("title",function(){return [_vm._v(_vm._s(_vm.title))]},null,{ title: _vm.title, params: _vm.params })]},proxy:true}],null,true)},'gl-popover',_vm.$attrs,false),[_vm._v(" "),_vm._t("default",function(){return [_c('tooltip-default-format',{attrs:{"tooltip-content":_vm.content},scopedSlots:_vm._u([(_vm.$scopedSlots['tooltip-value'])?{key:"tooltip-value",fn:function(scope){return [_vm._t("tooltip-value",null,null,scope)]}}:null],null,true)})]},null,{ content: _vm.content, params: _vm.params })],2)],1):_vm._e()};
 var __vue_staticRenderFns__ = [];
 
   /* style */