@gitlab/ui 72.11.1 → 72.12.0

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

@@ -1,152 +0,0 @@
-import { badgeVariantOptions, variantCssColorMap } 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 __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-var script = {
-  name: 'GlSingleStat',
-  components: {
-    GlIcon,
-    GlBadge,
-    GlAnimatedNumber
-  },
-  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.muted,
-      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
-    },
-    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);
-    },
-    textColor() {
-      return variantCssColorMap[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-display-flex gl-flex-direction-column gl-p-2"},'div',_vm.$attrs,false),_vm.$listeners),[_c('div',{staticClass:"gl-display-flex gl-align-items-center gl-text-gray-700 gl-mb-2"},[(_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-font-base gl-font-weight-normal",attrs:{"data-testid":"title-text"}},[_vm._v(_vm._s(_vm.title))])],1),_vm._v(" "),_c('div',{staticClass:"gl-single-stat-content gl-display-flex gl-align-items-baseline gl-font-weight-bold gl-text-gray-900"},[_c('span',{staticClass:"gl-single-stat-number gl-line-height-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-font-sm gl-mx-2 gl-transition-medium gl-opacity-10",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',{class:_vm.textColor,attrs:{"name":_vm.metaIcon,"data-testid":"meta-icon"}}):_vm._e(),_vm._v(" "),(_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__ = __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 default __vue_component__;

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

@@ -1,261 +0,0 @@
-import merge from 'lodash/merge';
-import isNil from 'lodash/isNil';
-import { graphic } from 'echarts';
-import { GlResizeObserverDirective } from '../../../directives/resize_observer/resize_observer';
-import { defaultChartOptions, mergeSeriesToOptions, symbolSize } from '../../../utils/charts/config';
-import { HEIGHT_AUTO_HORIZONTAL_LAYOUT_CLASSES } from '../../../utils/charts/constants';
-import Chart from '../chart/chart';
-import ChartTooltip from '../tooltip/tooltip';
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-//
-
-// the padding is needed so the mark points don't overflow when visible
-const gridPadding = symbolSize / 2;
-const generateGradient = colors => {
-  return new graphic.LinearGradient(0, 0, 0, 1, colors.map((color, index) => {
-    const offset = index / (colors.length - 1);
-    return {
-      offset,
-      color
-    };
-  }));
-};
-var script = {
-  name: 'GlSparklineChart',
-  components: {
-    Chart,
-    ChartTooltip
-  },
-  directives: {
-    resizeObserver: GlResizeObserverDirective
-  },
-  props: {
-    /**
-     * The data that is used to plot the chart.
-     */
-    data: {
-      type: Array,
-      required: true
-    },
-    /**
-     * Controls the label that is shown within the chart's tooltip. Use it to describe your data.
-     */
-    tooltipLabel: {
-      type: String,
-      required: false,
-      default: ''
-    },
-    /**
-     * Sets the chart's height in pixels. Set to `"auto"` to use the height of the container.
-     */
-    height: {
-      type: [Number, String],
-      required: false,
-      default: 50
-    },
-    /**
-     * If enabled will show the value of the latest "y" data-point on the side right of the chart.
-     */
-    showLastYValue: {
-      type: Boolean,
-      required: false,
-      default: true
-    },
-    /**
-     * Sets a colour gradient for the sparkline
-     */
-    gradient: {
-      type: Array,
-      required: false,
-      default: () => []
-    },
-    /**
-     * The smoothness of the line, valued from 0 to 1. A smaller value makes it less smooth.
-     */
-    smooth: {
-      type: Number,
-      required: false,
-      default: 0,
-      validator: x => x >= 0 && x <= 1
-    }
-  },
-  data() {
-    return {
-      chartInstance: null,
-      tooltip: {
-        title: '',
-        content: '',
-        position: {
-          left: '0',
-          top: '0'
-        }
-      }
-    };
-  },
-  computed: {
-    options() {
-      const sparkLineChartOptions = {
-        grid: {
-          top: gridPadding,
-          bottom: gridPadding,
-          left: gridPadding,
-          right: gridPadding
-        },
-        xAxis: {
-          type: 'category',
-          show: false,
-          axisLabel: {
-            show: true
-          },
-          axisPointer: {
-            show: true,
-            type: 'none',
-            label: {
-              formatter: this.generateTooltip
-            }
-          }
-        },
-        yAxis: {
-          type: 'value',
-          show: false,
-          min: 'datamin'
-        }
-      };
-      const mergedOptions = merge({}, defaultChartOptions, sparkLineChartOptions);
-      return mergeSeriesToOptions(mergedOptions, this.series);
-    },
-    series() {
-      const {
-        data,
-        smooth,
-        itemStyle,
-        showLastYValue
-      } = this;
-      const markPoint = showLastYValue ? {
-        symbol: 'circle',
-        cursor: 'auto',
-        animation: false,
-        symbolSize,
-        data: [{
-          xAxis: data.length - 1,
-          yAxis: data[data.length - 1][1]
-        }]
-      } : undefined;
-      return {
-        type: 'line',
-        symbol: 'circle',
-        hoverAnimation: false,
-        animation: true,
-        cursor: 'auto',
-        symbolSize,
-        markPoint,
-        data,
-        smooth,
-        itemStyle,
-        lineStyle: {
-          cap: 'round'
-        }
-      };
-    },
-    itemStyle() {
-      if (this.gradient.length) {
-        return {
-          color: generateGradient(this.gradient)
-        };
-      }
-      return {};
-    },
-    lastYValue() {
-      const latestEntry = this.data.slice(-1)[0];
-      return latestEntry[1];
-    },
-    autoHeight() {
-      return this.height === 'auto';
-    }
-  },
-  methods: {
-    onChartCreated(chartInstance) {
-      this.chartInstance = chartInstance;
-      /**
-       * Emitted when the chart is created.
-       * The payload contains the echarts instance.
-       * @event chartCreated
-       * @type {object}
-       */
-      this.$emit('chartCreated', chartInstance);
-    },
-    handleResize() {
-      this.chartInstance.resize();
-    },
-    setTooltipPosition(data) {
-      const [left, top] = this.chartInstance.convertToPixel('grid', data);
-      this.tooltip.position = {
-        left: `${left}px`,
-        top: `${top}px`
-      };
-    },
-    // 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) {
-      let {
-        seriesData = []
-      } = _ref;
-      // 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
-      const [firstEntry = {}] = seriesData;
-      const {
-        data
-      } = firstEntry;
-      if (!data) return;
-      const [title, content] = data;
-      if (isNil(title) || isNil(content)) return;
-      this.tooltip.title = title;
-      this.tooltip.content = content;
-      this.setTooltipPosition(data);
-    }
-  },
-  HEIGHT_AUTO_HORIZONTAL_LAYOUT_CLASSES
-};
-
-/* script */
-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 __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__ = __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 default __vue_component__;