@gitlab/ui 49.0.1 → 49.0.3

package/dist/components/charts/discrete_scatter/discrete_scatter.js

@@ -47,7 +47,6 @@ var script = {
       default: null
     }
   },
-
   data() {
     return {
       chart: null,
@@ -62,14 +61,11 @@ var script = {
       selectedFormatTooltipText: this.formatTooltipText || this.defaultFormatTooltipText
     };
   },
-
   computed: {
     series() {
       return this.data.map((series, index) => {
         const defaultColor = colorFromDefaultPalette(index);
-
         const getColor = type => series[type] && series[type].color ? series[type].color : defaultColor;
-
         return merge({
           symbolSize: this.symbolSize,
           lineStyle: {
@@ -81,7 +77,6 @@ var script = {
         }, series);
       });
     },
-
     options() {
       const mergedOptions = merge({}, defaultChartOptions, {
         tooltip: {
@@ -109,12 +104,11 @@ var script = {
         legend: {
           show: false
         }
-      }, this.option, dataZoomAdjustments(this.option.dataZoom), this.toolboxAdjustments); // All chart options can be merged but series
+      }, this.option, dataZoomAdjustments(this.option.dataZoom), this.toolboxAdjustments);
+      // All chart options can be merged but series
       // needs to be handled specially
-
       return mergeSeriesToOptions(mergedOptions, this.series);
     }
-
   },
   methods: {
     defaultFormatTooltipText(params) {
@@ -132,24 +126,20 @@ var script = {
       };
       this.$set(this, 'tooltipContent', tooltipContent);
     },
-
     showHideTooltip(mouseEvent) {
       this.showTooltip = this.chart.containPixel('grid', [mouseEvent.zrX, mouseEvent.zrY]);
     },
-
     onCreated(chart) {
       chart.getDom().addEventListener('mousemove', this.debouncedShowHideTooltip);
       chart.getDom().addEventListener('mouseout', this.debouncedShowHideTooltip);
       this.chart = chart;
       this.$emit('created', chart);
     },
-
     onLabelChange(params) {
       this.selectedFormatTooltipText(params);
       const {
         data = []
       } = params;
-
       if (data.length) {
         const [left, top] = this.chart.convertToPixel('grid', data);
         this.tooltipPosition = {
@@ -158,7 +148,6 @@ var script = {
         };
       }
     }
-
   }
 };
 

package/dist/components/charts/gauge/gauge.js

@@ -14,7 +14,6 @@ const DETAIL_FONT_FAMILY = 'sans-serif';
 const DETAIL_FONT_WEIGHT = 'bold';
 const POINTER_LENGTH = '65%';
 const POINTER_WIDTH_PX = 5;
-
 const gaugeChartSeries = _ref => {
   let {
     value,
@@ -61,7 +60,6 @@ const gaugeChartSeries = _ref => {
     splitNumber
   }];
 };
-
 var script = {
   components: {
     Chart
@@ -118,10 +116,8 @@ var script = {
           axisColor: this.axisColor
         })
       }, this.option, this.toolboxAdjustments);
-
       return mergedOptions;
     },
-
     validThresholds() {
       const {
         thresholds,
@@ -129,23 +125,17 @@ var script = {
         max
       } = this;
       if (!(thresholds !== null && thresholds !== void 0 && thresholds.length)) return [];
-
       const uniqueThresholds = _uniq(thresholds);
-
       const filteredThresholds = uniqueThresholds.filter(threshold => {
         return _isFinite(threshold) && threshold > min && threshold < max;
       });
       /**
        * Only the first two thresholds will be used
        */
-
       const reducedThresholdsList = filteredThresholds.length > 2 ? [filteredThresholds[0], filteredThresholds[1]] : [...filteredThresholds];
-
       const sortedThresholds = _sortBy(reducedThresholdsList);
-
       return sortedThresholds;
     },
-
     valueIsInLastThreshold() {
       const {
         validThresholds,
@@ -153,14 +143,12 @@ var script = {
       } = this;
       return validThresholds.length > 0 && value >= validThresholds[validThresholds.length - 1];
     },
-
     axisColor() {
       const {
         validThresholds,
         max
       } = this;
       let color;
-
       if (validThresholds.length === 0) {
         color = [[1, gaugeSafeHues[0]]];
       } else if (validThresholds.length === 1) {
@@ -172,16 +160,13 @@ var script = {
          */
         color = [[validThresholds[0] / max, gaugeSafeHues[0]], [validThresholds[1] / max, gaugeSafeHues[1]], [1, gaugeWarningHue]];
       }
-
       return color;
     }
-
   },
   methods: {
     onCreated(chart) {
       this.$emit('created', chart);
     }
-
   }
 };
 

package/dist/components/charts/heatmap/heatmap.js

@@ -26,12 +26,12 @@ const defaultOptions = {
     type: 'heatmap'
   }
 };
+
 /*
  * The series is an array of arrays containing [x, y, value]
  * x and y are position, value determines the color
  * We want the min and max from value field to make the range of colors
  */
-
 function getRange(series) {
   return series.reduce((acc, curr) => {
     const value = curr[2] || 0;
@@ -43,7 +43,6 @@ function getRange(series) {
     max: 0
   });
 }
-
 var script = {
   components: {
     Chart,
@@ -103,7 +102,6 @@ var script = {
       default: true
     }
   },
-
   data() {
     return {
       chart: null,
@@ -118,7 +116,6 @@ var script = {
       selectedFormatTooltipText: this.formatTooltipText || this.defaultFormatTooltipText
     };
   },
-
   computed: {
     computedOptions() {
       const {
@@ -193,18 +190,15 @@ var script = {
         }
       }, this.toolboxAdjustments, this.options);
     },
-
     legendStyle() {
       return {
         paddingLeft: this.computedOptions.grid.left,
         marginTop: '-32px'
       };
     },
-
     compiledOptions() {
       return this.chart ? this.chart.getOption() : null;
     },
-
     seriesInfo() {
       const {
         min,
@@ -221,14 +215,11 @@ var script = {
         };
       });
     }
-
   },
-
   beforeDestroy() {
     this.chart.getDom().removeEventListener('mousemove', this.debouncedShowHideTooltip);
     this.chart.getDom().removeEventListener('mouseout', this.debouncedShowHideTooltip);
   },
-
   methods: {
     defaultFormatTooltipText(params) {
       const {
@@ -238,24 +229,20 @@ var script = {
       this.$set(this.tooltip, 'content', tooltipContent);
       this.tooltip.title = xLabels.join(', ');
     },
-
     onCreated(chart) {
       chart.getDom().addEventListener('mousemove', this.debouncedShowHideTooltip);
       chart.getDom().addEventListener('mouseout', this.debouncedShowHideTooltip);
       this.chart = chart;
       this.$emit('created', chart);
     },
-
     showHideTooltip(mouseEvent) {
       this.tooltip.show = this.chart.containPixel('grid', [mouseEvent.zrX, mouseEvent.zrY]);
     },
-
     onLabelChange(params) {
       this.selectedFormatTooltipText(params);
       const {
         seriesData = []
       } = params;
-
       if (seriesData.length && seriesData[0].value) {
         const {
           seriesId,
@@ -264,13 +251,13 @@ var script = {
         const [left, top] = this.chart.convertToPixel({
           seriesId
         }, value);
-        this.tooltip = { ...this.tooltip,
+        this.tooltip = {
+          ...this.tooltip,
           left: `${left + TOOLTIP_LEFT_OFFSET}px`,
           top: `${top}px`
         };
       }
     }
-
   }
 };
 

package/dist/components/charts/legend/legend.js

@@ -18,27 +18,22 @@ var script = {
     chart: {
       type: Object,
       required: true,
-
       validator(chart) {
         return Object.is(chart, echarts.getInstanceByDom(chart.getDom()));
       }
-
     },
     seriesInfo: {
       type: Array,
       required: true,
-
       validator(seriesInfo) {
         return seriesInfo.every(series => series.type && series.name && series.color);
       }
-
     },
     textStyle: {
       type: Object,
       required: false,
       default: () => ({})
     },
-
     /**
      * Text for data average (overridden by prop if needed for internationalization)
      */
@@ -57,7 +52,6 @@ var script = {
       required: false,
       default: LEGEND_MIN_TEXT
     },
-
     /**
      * Text for max amount (overridden by prop if needed for internationalization)
      */
@@ -66,7 +60,6 @@ var script = {
       required: false,
       default: LEGEND_MAX_TEXT
     },
-
     /**
      * Sets the display layout
      */
@@ -74,20 +67,16 @@ var script = {
       type: String,
       required: false,
       default: LEGEND_LAYOUT_INLINE,
-
       validator(layout) {
         return [LEGEND_LAYOUT_INLINE, LEGEND_LAYOUT_TABLE].indexOf(layout) !== -1;
       }
-
     }
   },
-
   data() {
     return {
       disabledSeries: {}
     };
   },
-
   computed: {
     fontStyle() {
       return {
@@ -95,67 +84,56 @@ var script = {
         fontSize: `${this.textStyle.fontSize || defaultFontSize}px`
       };
     }
-
   },
   methods: {
     sanitizeSeriesData(seriesData) {
       var _seriesData$filter;
-
       return (_seriesData$filter = seriesData === null || seriesData === void 0 ? void 0 : seriesData.filter(d => !Number.isNaN(d))) !== null && _seriesData$filter !== void 0 ? _seriesData$filter : [];
     },
-
     seriesAverage(seriesData) {
       const sanitized = this.sanitizeSeriesData(seriesData);
       return engineeringNotation(average(...sanitized));
     },
-
     seriesMax(seriesData) {
       const sanitized = this.sanitizeSeriesData(seriesData);
       return engineeringNotation(Math.max(...sanitized));
     },
-
     seriesMin(seriesData) {
       const sanitized = this.sanitizeSeriesData(seriesData);
       return engineeringNotation(Math.min(...sanitized));
     },
-
     seriesLast(seriesData) {
       const sanitized = this.sanitizeSeriesData(seriesData);
       return engineeringNotation(sanitized[sanitized.length - 1]);
     },
-
     seriesNameIsLong(seriesName) {
       return seriesName.length > 120;
     },
-
     handleClick(name, key) {
       this.chart.dispatchAction({
         type: 'legendToggleSelect',
         name
       });
-      this.disabledSeries = { ...this.disabledSeries,
+      this.disabledSeries = {
+        ...this.disabledSeries,
         [key]: !this.disabledSeries[key]
       };
     },
-
     handleMouseEnter(name) {
       this.chart.dispatchAction({
         type: 'highlight',
         seriesName: name
       });
     },
-
     handleMouseLeave(name) {
       this.chart.dispatchAction({
         type: 'downplay',
         seriesName: name
       });
     },
-
     getColor(color, key) {
       return this.disabledSeries[key] ? gray200 : color;
     }
-
   },
   legendLayoutTypes: {
     LEGEND_LAYOUT_INLINE,

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

@@ -77,11 +77,9 @@ var script = {
       type: String,
       required: false,
       default: LEGEND_LAYOUT_INLINE,
-
       validator(layout) {
         return [LEGEND_LAYOUT_INLINE, LEGEND_LAYOUT_TABLE].indexOf(layout) !== -1;
       }
-
     },
     showLegend: {
       type: Boolean,
@@ -89,7 +87,6 @@ var script = {
       default: true
     }
   },
-
   data() {
     // Part of the tooltip related data can be
     // moved into the tooltip component.
@@ -115,18 +112,14 @@ var script = {
       selectedFormatTooltipText: this.formatTooltipText || this.defaultFormatTooltipText
     };
   },
-
   computed: {
     series() {
       const dataSeries = this.data.map((series, index) => {
         const defaultColor = colorFromDefaultPalette(index);
-
         const getColor = type => {
           var _series$type$color, _series$type;
-
           return (_series$type$color = (_series$type = series[type]) === null || _series$type === void 0 ? void 0 : _series$type.color) !== null && _series$type$color !== void 0 ? _series$type$color : defaultColor;
         };
-
         return merge({
           showSymbol: true,
           lineStyle: {
@@ -136,20 +129,17 @@ var script = {
             color: getColor('itemStyle')
           }
         }, symbolSize, lineStyle, series, getThresholdConfig(this.thresholds));
-      }); // if annotation series exists, append it
+      });
+      // if annotation series exists, append it
       // along with data series
-
       if (this.annotationSeries) {
         return [...dataSeries, this.annotationSeries];
       }
-
       return dataSeries;
     },
-
     annotationSeries() {
       return generateAnnotationSeries(this.annotations);
     },
-
     options() {
       const defaultLineChartOptions = {
         xAxis: {
@@ -171,12 +161,11 @@ var script = {
           show: false
         }
       };
-      const mergedOptions = merge({}, defaultChartOptions, defaultLineChartOptions, this.option, dataZoomAdjustments(this.option.dataZoom), this.toolboxAdjustments); // All chart options can be merged but series
+      const mergedOptions = merge({}, defaultChartOptions, defaultLineChartOptions, this.option, dataZoomAdjustments(this.option.dataZoom), this.toolboxAdjustments);
+      // All chart options can be merged but series
       // needs to be handled specially
-
       return mergeSeriesToOptions(mergeAnnotationAxisToOptions(mergedOptions, this.hasAnnotations), this.series);
     },
-
     /**
      * Annotations currently are passed as series options in monitoring dashboard.
      * Once https://gitlab.com/gitlab-org/gitlab/-/issues/213390 is closed,
@@ -187,25 +176,20 @@ var script = {
     hasAnnotations() {
       return this.annotations.length !== 0 || seriesHasAnnotations(this.option.series);
     },
-
     shouldShowAnnotationsTooltip() {
       return this.chart && this.hasAnnotations;
     },
-
     compiledOptions() {
       return this.chart ? this.chart.getOption() : null;
     },
-
     legendStyle() {
       return {
         paddingLeft: `${grid.left}px`
       };
     },
-
     hasLegend() {
       return this.compiledOptions && this.showLegend;
     },
-
     seriesInfo() {
       return this.compiledOptions.series.reduce((acc, series, index) => {
         if (series.type === 'line') {
@@ -216,20 +200,16 @@ var script = {
             data: this.includeLegendAvgMax ? series.data.map(data => data[1]) : undefined
           });
         }
-
         return acc;
       }, []);
     }
-
   },
-
   beforeDestroy() {
     this.chart.getDom().removeEventListener('mousemove', this.debouncedShowHideTooltip);
     this.chart.getDom().removeEventListener('mouseout', this.debouncedShowHideTooltip);
     this.chart.off('mouseout', this.onChartDataPointMouseOut);
     this.chart.off('mouseover', this.onChartDataPointMouseOver);
   },
-
   methods: {
     defaultFormatTooltipText(params) {
       const {
@@ -239,26 +219,26 @@ var script = {
       this.$set(this, 'dataTooltipContent', tooltipContent);
       this.dataTooltipTitle = xLabels.join(', ');
     },
-
     defaultAnnotationTooltipText(params) {
       var _params$data$tooltipD;
-
       return {
         title: params.data.xAxis,
         content: (_params$data$tooltipD = params.data.tooltipData) === null || _params$data$tooltipD === void 0 ? void 0 : _params$data$tooltipD.content
       };
     },
-
     onCreated(chart) {
       // These listeners are used to show/hide data tooltips
       // when the mouse is hovered over the parent container
       // of echarts' svg element. This works only for data points
       // and not markPoints.
       chart.getDom().addEventListener('mousemove', this.debouncedShowHideTooltip);
-      chart.getDom().addEventListener('mouseout', this.debouncedShowHideTooltip); // eCharts inbuild mouse events
+      chart.getDom().addEventListener('mouseout', this.debouncedShowHideTooltip);
+
+      // eCharts inbuild mouse events
       // https://echarts.apache.org/en/api.html#events.Mouse%20events
       // is used to attach listeners to markPoints. These listeners
       // are currently used for annotation arrows at the bottom of the chart.
+
       // Because data points and annotations arrows are in different
       // sections of the charts with their own mouseovers and mouseouts,
       // there shouldn't be an overlapping situation where both tooltips
@@ -268,11 +248,9 @@ var script = {
         chart.on('mouseout', this.onChartDataPointMouseOut);
         chart.on('mouseover', this.onChartDataPointMouseOver);
       }
-
       this.chart = chart;
       this.$emit('created', chart);
     },
-
     showHideTooltip(mouseEvent) {
       this.showDataTooltip = this.chart.containPixel('grid', [mouseEvent.zrX, mouseEvent.zrY]);
       this.dataTooltipPosition = {
@@ -280,11 +258,9 @@ var script = {
         top: `${mouseEvent.zrY}px`
       };
     },
-
     onChartDataPointMouseOut() {
       this.showAnnotationsTooltip = false;
     },
-
     /**
      * Check if the hovered data point is an annotation
      * point to show the annotation tooltip.
@@ -308,11 +284,9 @@ var script = {
         };
       }
     },
-
     onLabelChange(params) {
       this.selectedFormatTooltipText(params);
     }
-
   }
 };
 

package/dist/components/charts/series_label/series_label.js

@@ -1,7 +1,6 @@
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 const makePathRect = (startX, startY, width, height) => `M${startX},${startY}H${startX + width}V${startY + height}H${startX}Z`;
-
 var script = {
   props: {
     color: {
@@ -14,28 +13,23 @@ var script = {
       default: 'solid'
     }
   },
-
   data() {
     return {
       labelLineHeight: 0
     };
   },
-
   computed: {
     pathContent() {
       const width = this.$options.svgWidth;
       const height = this.$options.svgHeight;
-
       if (this.type === 'dashed') {
         const dashWidth = Math.ceil(width / 3);
         const firstDash = makePathRect(0, 0, dashWidth, height);
         const secondDash = makePathRect(width - dashWidth, 0, dashWidth, height);
         return `${firstDash}${secondDash}`;
       }
-
       return makePathRect(0, 0, width, height);
     },
-
     svgStyles() {
       return {
         fill: this.color,
@@ -43,30 +37,24 @@ var script = {
         width: 'auto'
       };
     },
-
     svgYTranslationValue() {
       const value = this.labelLineHeight / 2 - this.$options.svgHeight / 2;
       return Math.round(value) || 0;
     }
-
   },
-
   mounted() {
     if (getComputedStyle && this.$refs.label) {
       const computedStyle = getComputedStyle(this.$refs.label);
       const lineHeight = computedStyle['line-height'].match(/(\d+)px/);
-
       if (lineHeight !== null) {
         this.labelLineHeight = parseFloat(lineHeight[1]);
       }
     }
   },
-
   methods: {
     formatPixelDimension(dimension) {
       return `${dimension}px`;
     }
-
   },
   svgWidth: 16,
   svgHeight: 4

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

@@ -56,40 +56,32 @@ var script = {
       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));
     }
-
   },
   methods: {
     setHideUnits(flag) {
       this.hideUnits = flag;
     }
-
   }
 };