@gitlab/ui 49.0.0 → 49.0.2

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;
     }
-
   }
 };
 

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

@@ -7,6 +7,7 @@ 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;
 var script = {
   components: {
@@ -24,7 +25,6 @@ var script = {
       type: Array,
       required: true
     },
-
     /**
      * Controls the label that is shown within the chart's tooltip. Use it to describe your data.
      */
@@ -33,7 +33,6 @@ var script = {
       required: false,
       default: ''
     },
-
     /**
      * Sets the chart's height in pixel.
      */
@@ -42,7 +41,6 @@ var script = {
       required: false,
       default: 50
     },
-
     /**
      * If enabled will show the value of the latest "y" data-point on the side right of the chart.
      */
@@ -52,7 +50,6 @@ var script = {
       default: true
     }
   },
-
   data() {
     return {
       chartInstance: null,
@@ -67,7 +64,6 @@ var script = {
       }
     };
   },
-
   computed: {
     options() {
       const sparkLineChartOptions = {
@@ -100,7 +96,6 @@ var script = {
       const mergedOptions = merge({}, defaultChartOptions, sparkLineChartOptions);
       return mergeSeriesToOptions(mergedOptions, this.series);
     },
-
     series() {
       const {
         data
@@ -125,12 +120,10 @@ var script = {
         data
       };
     },
-
     lastYValue() {
       const latestEntry = this.data.slice(-1)[0];
       return latestEntry[1];
     }
-
   },
   methods: {
     onChartCreated(chartInstance) {
@@ -141,24 +134,19 @@ var script = {
        * @event chartCreated
        * @type {object}
        */
-
       this.$emit('chartCreated', chartInstance);
     },
-
     handleResize() {
       this.chartInstance.resize();
     },
-
     hideTooltip() {
       this.tooltip.show = false;
     },
-
     formatTooltipText(_ref) {
       let [xValue, yValue] = _ref;
       this.tooltip.title = xValue;
       this.tooltip.content = yValue;
     },
-
     setTooltipPosition(data) {
       const [left, top] = this.chartInstance.convertToPixel('grid', data);
       this.tooltip.position = {
@@ -166,7 +154,6 @@ var script = {
         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.
@@ -181,14 +168,12 @@ var script = {
       const {
         data
       } = firstEntry;
-
       if (data) {
         this.tooltip.show = true;
         this.formatTooltipText(data);
         this.setTooltipPosition(data);
       }
     }
-
   }
 };
 

package/dist/components/charts/stacked_column/stacked_column.js

@@ -11,7 +11,8 @@ import ChartLegend from '../legend/legend';
 import ChartTooltip from '../tooltip/tooltip';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
-const yAxisDefaults = { ...yAxis,
+const yAxisDefaults = {
+  ...yAxis,
   nameLocation: 'center',
   axisTick: {
     show: false
@@ -104,11 +105,9 @@ var script = {
       type: String,
       required: false,
       default: LEGEND_LAYOUT_INLINE,
-
       validator(layout) {
         return [LEGEND_LAYOUT_INLINE, LEGEND_LAYOUT_TABLE].indexOf(layout) !== -1;
       }
-
     },
     formatTooltipText: {
       type: Function,
@@ -121,7 +120,6 @@ var script = {
       default: null
     }
   },
-
   data() {
     return {
       chart: null,
@@ -135,12 +133,10 @@ var script = {
       debouncedMoveShowTooltip: debounceByAnimationFrame(this.moveShowTooltip)
     };
   },
-
   computed: {
     hasSecondaryAxis() {
       return Boolean(this.secondaryData.length);
     },
-
     barSeries() {
       return this.bars.map((_ref, index) => {
         let {
@@ -157,7 +153,6 @@ var script = {
         });
       });
     },
-
     lineSeries() {
       const offset = this.bars.length;
       return this.lines.map((_ref2, index) => {
@@ -173,7 +168,6 @@ var script = {
         });
       });
     },
-
     secondarySeries() {
       const offset = this.bars.length + this.lines.length;
       return this.secondaryData.map((_ref3, index) => {
@@ -198,11 +192,9 @@ var script = {
         });
       });
     },
-
     series() {
       return [...this.barSeries, ...this.lineSeries, ...this.secondarySeries];
     },
-
     options() {
       const mergedOptions = merge({}, defaultChartOptions, {
         grid: this.hasSecondaryAxis ? gridWithSecondaryYAxis : grid,
@@ -226,31 +218,30 @@ var script = {
           name: this.xAxisTitle,
           type: this.xAxisType
         },
-        yAxis: [{ ...yAxisDefaults,
+        yAxis: [{
+          ...yAxisDefaults,
           name: this.yAxisTitle
-        }, { ...yAxisDefaults,
+        }, {
+          ...yAxisDefaults,
           name: this.secondaryDataTitle,
           show: this.hasSecondaryAxis
         }],
         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);
     },
-
     legendStyle() {
       return {
         paddingLeft: `${grid.left}px`
       };
     },
-
     compiledOptions() {
       return this.chart ? this.chart.getOption() : null;
     },
-
     seriesInfo() {
       return this.compiledOptions.series.reduce((acc, series, index) => {
         acc.push({
@@ -263,21 +254,16 @@ var script = {
         return acc;
       }, []);
     }
-
   },
-
   beforeDestroy() {
     this.chart.getDom().removeEventListener('mousemove', this.debouncedMoveShowTooltip);
     this.chart.getDom().removeEventListener('mouseout', this.debouncedMoveShowTooltip);
   },
-
   methods: {
     getColor(index) {
       var _this$customPalette;
-
       return this.customPalette ? (_this$customPalette = this.customPalette) === null || _this$customPalette === void 0 ? void 0 : _this$customPalette[index] : colorFromDefaultPalette(index);
     },
-
     moveShowTooltip(mouseEvent) {
       this.tooltipPosition = {
         left: `${mouseEvent.zrX}px`,
@@ -285,14 +271,12 @@ var script = {
       };
       this.showTooltip = this.chart.containPixel('grid', [mouseEvent.zrX, mouseEvent.zrY]);
     },
-
     onCreated(chart) {
       chart.getDom().addEventListener('mousemove', this.debouncedMoveShowTooltip);
       chart.getDom().addEventListener('mouseout', this.debouncedMoveShowTooltip);
       this.chart = chart;
       this.$emit('created', chart);
     },
-
     defaultFormatTooltipText(params) {
       const {
         tooltipContent
@@ -309,7 +293,6 @@ var script = {
       this.tooltipTitle = params.value;
       this.$set(this, 'tooltipContent', tooltipContent);
     },
-
     onLabelChange(params) {
       if (this.formatTooltipText) {
         this.formatTooltipText(params);
@@ -317,7 +300,6 @@ var script = {
         this.defaultFormatTooltipText(params);
       }
     }
-
   }
 };