@gitlab/ui 132.0.0 → 132.0.2

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

@@ -0,0 +1,369 @@
+import * as echarts from 'echarts';
+import { uid, debounceByAnimationFrame } from '../../../../utils/utils';
+import GlPopover from '../../../base/popover/popover';
+import { popoverPlacements } from '../../../../utils/constants';
+import { TOOLTIP_LEFT_OFFSET, TOOLTIP_TOP_OFFSET } from '../../../../utils/charts/constants';
+import { getTooltipAxisConfig, getTooltipTitle, getTooltipContent, getTooltipParams } from '../../../../utils/charts/config';
+import TooltipDefaultFormat from './tooltip_default_format/tooltip_default_format';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  name: 'GlChartTooltip',
+  components: {
+    GlPopover,
+    TooltipDefaultFormat
+  },
+  inheritAttrs: false,
+  props: {
+    chart: {
+      type: Object,
+      required: true,
+      validator(chart) {
+        return Object.is(chart, echarts.getInstanceByDom(chart.getDom()));
+      }
+    },
+    id: {
+      type: String,
+      required: false,
+      default: () => uid()
+    },
+    /**
+     * Position of the popover respective to the chart.
+     * Sets the `top` style property.
+     */
+    top: {
+      type: String,
+      required: false,
+      default: null
+    },
+    /**
+     * Position of the popover respective to the chart.
+     * Sets the `bottom` style property.
+     */
+    bottom: {
+      type: String,
+      required: false,
+      default: null
+    },
+    /**
+     * Position of the popover respective to the chart.
+     * Sets the `left` style property.
+     */
+    left: {
+      type: String,
+      required: false,
+      default: null
+    },
+    /**
+     * Position of the popover respective to the chart.
+     * Sets the `right` style property.
+     */
+    right: {
+      type: String,
+      required: false,
+      default: null
+    },
+    /**
+     * Set to `true` to show, set to `false` to not show.
+     * Set to `null` to show only when the mouse is in the chart.
+     */
+    show: {
+      type: Boolean,
+      required: false,
+      default: null
+    },
+    /**
+     * Popover placement
+     */
+    placement: {
+      type: String,
+      required: false,
+      default: popoverPlacements.right
+    },
+    /**
+     * Distance between the popover and the pointer when
+     * no position is defined
+     */
+    xOffset: {
+      type: Number,
+      required: false,
+      default: TOOLTIP_LEFT_OFFSET,
+      validator(value) {
+        // popover target must have a size of at least 1
+        return value >= 1;
+      }
+    },
+    /**
+     * Distance between the popover and the pointer when
+     * no position is defined
+     */
+    yOffset: {
+      type: Number,
+      required: false,
+      default: TOOLTIP_TOP_OFFSET,
+      validator(value) {
+        // popover target must have a size of at least 1
+        return value >= 1;
+      }
+    },
+    /**
+     * Set to true to use the default tooltip formatter.
+     */
+    useDefaultTooltipFormatter: {
+      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
+    },
+    /**
+     * Specifies which axis contains the dimensional data used in the tooltip.
+     * When `xAxis`, x-axis value becomes the tooltip's title and
+     * y-axis values become the tooltip's values.
+     * When `yAxis`, roles are reversed.
+     */
+    dimensionAxis: {
+      type: String,
+      required: false,
+      default: 'xAxis',
+      validator(value) {
+        return value === 'xAxis' || value === 'yAxis';
+      }
+    }
+  },
+  data() {
+    return {
+      pointerCoords: null,
+      isPointerInChart: false,
+      pinnedPosition: null,
+      debouncedMouseHandler: debounceByAnimationFrame(this.mouseHandler),
+      title: null,
+      content: {},
+      params: null
+    };
+  },
+  computed: {
+    targetId() {
+      // if multiple tooltips are used in a chart component,
+      // `this.id` can be used to uniquely identify them
+      return `${this.chart.getDom().getAttribute('_echarts_instance_')}-tooltip-${this.id}`;
+    },
+    targetStyle() {
+      // the target is a rectangular space between cursor and popover
+      return {
+        marginTop: `${-this.yOffset}px`,
+        height: `${this.yOffset * 2}px`,
+        marginLeft: `${-this.xOffset}px`,
+        width: `${this.xOffset * 2}px`,
+        pointerEvents: this.isPinned ? 'auto' : 'none',
+        ...this.tooltipPosition
+      };
+    },
+    fixedPosition() {
+      const {
+        top,
+        left,
+        bottom,
+        right
+      } = this;
+      if (top || left || bottom || right) {
+        return {
+          top,
+          left,
+          bottom,
+          right
+        };
+      }
+      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.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({
+        [this.dimensionAxis]: {
+          axisPointer: {
+            show: true,
+            label: {
+              formatter: params => {
+                var _options$this$dimensi, _options$this$dimensi2, _options$valueAxis, _options$valueAxis$;
+                const options = this.chart.getOption();
+                const {
+                  dimensionIndex,
+                  metricIndex,
+                  valueAxis
+                } = getTooltipAxisConfig(this.dimensionAxis);
+                const titleAxisName = (_options$this$dimensi = options[this.dimensionAxis]) === null || _options$this$dimensi === void 0 ? void 0 : (_options$this$dimensi2 = _options$this$dimensi[0]) === null || _options$this$dimensi2 === void 0 ? void 0 : _options$this$dimensi2.name;
+                const valueAxisName = (_options$valueAxis = options[valueAxis]) === null || _options$valueAxis === void 0 ? void 0 : (_options$valueAxis$ = _options$valueAxis[0]) === null || _options$valueAxis$ === void 0 ? void 0 : _options$valueAxis$.name;
+                this.title = getTooltipTitle(params, titleAxisName, dimensionIndex);
+                this.content = getTooltipContent(params, valueAxisName, metricIndex);
+                this.params = getTooltipParams(params, options);
+              }
+            }
+          }
+        }
+      });
+    }
+  },
+  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: {
+    getEventCoordsWithinChart(_ref) {
+      let {
+        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();
+      }
+    }
+  }
+};
+
+/* 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',[_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 */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+  
+  /* style inject SSR */
+  
+  /* style inject shadow dom */
+  
+
+  
+  const __vue_component__ = /*#__PURE__*/__vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export { __vue_component__ as default };

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

@@ -0,0 +1,53 @@
+import SeriesLabel from '../../../series_label/series_label';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  name: 'TooltipDefaultFormat',
+  components: {
+    SeriesLabel
+  },
+  props: {
+    tooltipContent: {
+      type: Object,
+      required: true
+    }
+  }
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',_vm._l((_vm.tooltipContent),function(value,label){return _c('div',{key:("" + label + (value.value)),staticClass:"gl-charts-tooltip-default-format-series"},[_c('series-label',{staticClass:"gl-charts-tooltip-default-format-series-label",attrs:{"color":value.color}},[_vm._v("\n      "+_vm._s(label)+"\n    ")]),_vm._v(" "),_c('div',{staticClass:"gl-charts-tooltip-default-format-series-value"},[_vm._t("tooltip-value",function(){return [_vm._v(_vm._s(value.value))]},{"value":value.value})],2)],1)}),0)};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+  
+  /* style inject SSR */
+  
+  /* style inject shadow dom */
+  
+
+  
+  const __vue_component__ = /*#__PURE__*/__vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export { __vue_component__ as default };

package/dist/components/charts/single_stat/single_stat.js

@@ -0,0 +1,164 @@
+import { badgeVariantOptions, badgeVariantToIconVariantMap } from '../../../utils/constants';
+import GlBadge from '../../base/badge/badge';
+import GlIcon from '../../base/icon/icon';
+import GlAnimatedNumber from '../../utilities/animated_number/animated_number';
+import { formatNumberToLocale } from '../../../utils/number_utils';
+import { GlTooltipDirective } from '../../../directives/tooltip/tooltip';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  name: 'GlSingleStat',
+  components: {
+    GlIcon,
+    GlBadge,
+    GlAnimatedNumber
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective
+  },
+  props: {
+    title: {
+      type: String,
+      required: true
+    },
+    value: {
+      type: [String, Number],
+      required: true
+    },
+    unit: {
+      type: String,
+      required: false,
+      default: null
+    },
+    /**
+     * Requires the `value` property to be a valid Number or convertible to one
+     */
+    useDelimiters: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    variant: {
+      type: String,
+      required: false,
+      default: badgeVariantOptions.neutral,
+      validator: variant => Object.values(badgeVariantOptions).includes(variant)
+    },
+    titleIcon: {
+      type: String,
+      required: false,
+      default: null
+    },
+    /**
+     * Additional CSS class(es) to be applied to the title icon.
+     */
+    titleIconClass: {
+      type: [Array, Object, String],
+      required: false,
+      default: ''
+    },
+    metaIcon: {
+      type: String,
+      required: false,
+      default: null
+    },
+    metaText: {
+      type: String,
+      required: false,
+      default: null
+    },
+    /**
+     * Tooltip text for the meta badge. When provided, the badge is wrapped in a button to ensure keyboard accessibility.
+     */
+    metaTooltip: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    shouldAnimate: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    animationDecimalPlaces: {
+      type: Number,
+      required: false,
+      default: 0
+    }
+  },
+  data() {
+    return {
+      hideUnits: false
+    };
+  },
+  computed: {
+    showMetaIcon() {
+      return Boolean(this.metaIcon && !this.metaText);
+    },
+    showBadge() {
+      return Boolean(this.metaText);
+    },
+    showTitleIcon() {
+      return Boolean(this.titleIcon);
+    },
+    iconVariant() {
+      return badgeVariantToIconVariantMap[this.variant];
+    },
+    canAnimate() {
+      return this.shouldAnimate && !Number.isNaN(Number(this.value));
+    },
+    statValue() {
+      if (this.useDelimiters) {
+        var _this$value$toString$;
+        const minimumFractionDigits = ((_this$value$toString$ = this.value.toString().split('.')[1]) === null || _this$value$toString$ === void 0 ? void 0 : _this$value$toString$.length) || 0;
+        return formatNumberToLocale(this.value, {
+          minimumFractionDigits
+        });
+      }
+      return this.value;
+    }
+  },
+  methods: {
+    setHideUnits(flag) {
+      this.hideUnits = flag;
+    }
+  }
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',_vm._g(_vm._b({staticClass:"gl-single-stat gl-flex gl-flex-col gl-p-2"},'div',_vm.$attrs,false),_vm.$listeners),[_c('div',{staticClass:"gl-mb-2 gl-flex gl-items-center gl-text-heading"},[(_vm.showTitleIcon)?_c('gl-icon',{class:['gl-mr-2', _vm.titleIconClass],attrs:{"name":_vm.titleIcon,"data-testid":"title-icon"}}):_vm._e(),_vm._v(" "),_c('span',{staticClass:"gl-text-base gl-font-normal",attrs:{"data-testid":"title-text"}},[_vm._v(_vm._s(_vm.title))])],1),_vm._v(" "),_c('div',{staticClass:"gl-single-stat-content gl-flex gl-items-baseline gl-font-bold gl-text-strong"},[_c('span',{staticClass:"gl-single-stat-number gl-leading-1",class:{ 'gl-mr-2': !_vm.unit },attrs:{"data-testid":"displayValue"}},[(_vm.canAnimate)?_c('gl-animated-number',{attrs:{"number":Number(_vm.value),"decimal-places":_vm.animationDecimalPlaces,"use-delimiters":_vm.useDelimiters},on:{"animating":function($event){return _vm.setHideUnits(true)},"animated":function($event){return _vm.setHideUnits(false)}}}):_c('span',{attrs:{"data-testid":"non-animated-value"}},[_vm._v(_vm._s(_vm.statValue))])],1),_vm._v(" "),(_vm.unit)?_c('span',{staticClass:"gl-mx-2 gl-text-sm gl-opacity-10 gl-transition-all",class:{ '!gl-opacity-0': _vm.hideUnits },attrs:{"data-testid":"unit"}},[_vm._v(_vm._s(_vm.unit))]):_vm._e(),_vm._v(" "),(_vm.showMetaIcon)?_c('gl-icon',{attrs:{"variant":_vm.iconVariant,"name":_vm.metaIcon,"data-testid":"meta-icon"}}):_vm._e(),_vm._v(" "),(_vm.showBadge && _vm.metaTooltip)?_c('button',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip.viewport",modifiers:{"viewport":true}}],staticClass:"!gl-cursor-default gl-border-0 gl-bg-transparent gl-p-0 gl-leading-0",attrs:{"type":"button","title":_vm.metaTooltip,"data-testid":"meta-badge-button"}},[_c('gl-badge',{attrs:{"variant":_vm.variant,"icon":_vm.metaIcon,"data-testid":"meta-badge"}},[_vm._v(_vm._s(_vm.metaText))])],1):(_vm.showBadge)?_c('gl-badge',{attrs:{"variant":_vm.variant,"icon":_vm.metaIcon,"data-testid":"meta-badge"}},[_vm._v(_vm._s(_vm.metaText))]):_vm._e()],1)])};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+  
+  /* style inject SSR */
+  
+  /* style inject shadow dom */
+  
+
+  
+  const __vue_component__ = /*#__PURE__*/__vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export { __vue_component__ as default };