@gitlab/ui 49.0.0 → 49.0.2

package/dist/components/charts/bar/bar.js

@@ -12,25 +12,25 @@ import ChartTooltip from '../tooltip/tooltip';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 //
+
 /**
  * `nameGap` in charts/config is set to 50 but it is not
  * used for bar charts as the axes are flipped. That is why
  * we're explicitly setting it here
  */
-
 const DEFAULT_NAME_GAP = 50;
+
 /**
  * This is the magic number at which the y-axis name
  * and y-axis labels don't overlap
  * @Number
  */
-
 const AXIS_LABEL_LENGTH = 7;
+
 /**
  * Because the axes are reversed in bar charts defaultChartOptions
  * xAxis and yAxis needs to be handled specifically.
  */
-
 const defaultOptions = {
   grid,
   xAxis: {
@@ -87,7 +87,6 @@ var script = {
       default: 'value'
     }
   },
-
   data() {
     return {
       chart: null,
@@ -101,7 +100,6 @@ var script = {
       debouncedMoveShowTooltip: debounceByAnimationFrame(this.moveShowTooltip)
     };
   },
-
   computed: {
     series() {
       return Object.keys(this.data).map((key, index) => {
@@ -125,7 +123,6 @@ var script = {
         };
       });
     },
-
     options() {
       const mergedOptions = merge({}, defaultOptions, {
         xAxis: {
@@ -152,21 +149,18 @@ 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);
     }
-
   },
-
   beforeDestroy() {
     if (this.chart) {
       this.chart.getDom().removeEventListener('mousemove', this.debouncedMoveShowTooltip);
       this.chart.getDom().removeEventListener('mouseout', this.debouncedMoveShowTooltip);
     }
   },
-
   methods: {
     moveShowTooltip(mouseEvent) {
       this.tooltipPosition = {
@@ -175,14 +169,12 @@ var script = {
       };
       this.showTooltip = this.chart.containPixel('grid', [mouseEvent.zrX, mouseEvent.zrY]);
     },
-
     onCreated(chart) {
       this.chart = chart;
       this.$emit('created', chart);
       chart.getDom().addEventListener('mousemove', this.debouncedMoveShowTooltip);
       chart.getDom().addEventListener('mouseout', this.debouncedMoveShowTooltip);
     },
-
     onLabelChange(params) {
       const {
         yLabels,
@@ -191,7 +183,6 @@ var script = {
       this.$set(this, 'tooltipContent', tooltipContent);
       this.tooltipTitle = yLabels.join(', ');
     },
-
     /**
      * The existing getDefaultTooltipContent in utils works against the y-axis value.
      * However, for bar charts, the tooltip should be against x-axis values.
@@ -208,19 +199,17 @@ var script = {
         yLabels,
         tooltipContent
       } = params.seriesData.reduce((acc, chartItem) => {
-        const [value, title] = chartItem.value || []; // The x axis title is used instead of y axis
-
+        const [value, title] = chartItem.value || [];
+        // The x axis title is used instead of y axis
         const seriesName = seriesDataLength === 1 && xAxisTitle ? xAxisTitle : chartItem.seriesName;
         const color = seriesDataLength === 1 ? '' : chartItem.color;
         acc.tooltipContent[seriesName] = {
           value,
           color
         };
-
         if (!acc.yLabels.includes(title)) {
           acc.yLabels.push(title);
         }
-
         return acc;
       }, {
         yLabels: [],
@@ -231,7 +220,6 @@ var script = {
         tooltipContent
       };
     }
-
   }
 };
 

package/dist/components/charts/chart/chart.js

@@ -5,13 +5,12 @@ import { GlResizeObserverDirective } from '../../../directives/resize_observer/r
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 //
+
 /**
  * Allowed values by eCharts
  * https://echarts.apache.org/en/api.html#echartsInstance.resize
  */
-
 const sizeValidator = size => Number.isFinite(size) || size === 'auto' || size == null;
-
 var script = {
   directives: {
     resizeObserver: GlResizeObserverDirective
@@ -21,7 +20,6 @@ var script = {
       type: Object,
       required: true
     },
-
     /**
      * Warning: this prop is deprecated and will soon be removed
      * Please do not utilize `disableTheme` for formatting
@@ -53,11 +51,9 @@ var script = {
       type: String,
       required: false,
       default: 'svg',
-
       validator(renderer) {
         return validRenderers.includes(renderer);
       }
-
     },
     responsive: {
       type: Boolean,
@@ -65,36 +61,29 @@ var script = {
       default: false
     }
   },
-
   data() {
     return {
       chart: null
     };
   },
-
   watch: {
     options() {
       if (this.chart) {
         this.draw();
       }
     },
-
     width() {
       this.setChartSize();
     },
-
     height() {
       this.setChartSize();
     }
-
   },
-
   created() {
     if (!this.disableTheme) {
       echarts.registerTheme(themeName, createTheme(this.options));
     }
   },
-
   async mounted() {
     await this.$nextTick();
     this.chart = echarts.init(this.$refs.chart, this.disableTheme ? null : themeName, {
@@ -102,43 +91,35 @@ var script = {
       width: defaultWidth,
       height: defaultHeight
     });
-
     if (this.groupId.length) {
       this.chart.group = this.groupId;
       echarts.connect(this.groupId);
     }
-
     this.chart.on('click', this.handleClick);
     /**
      * Emitted after calling `echarts.init`
      */
-
     this.$emit('created', this.chart);
     this.draw();
     this.setChartSize();
   },
-
   beforeDestroy() {
     this.chart.off('click', this.handleClick);
   },
-
   methods: {
     draw() {
       this.chart.setOption(this.options);
       /**
        * Emitted after calling `echarts.setOption`
        */
-
       this.$emit('updated', this.chart);
     },
-
     setChartSize() {
       this.chart.resize({
         width: this.width || 'auto',
         height: this.height || defaultHeight
       });
     },
-
     handleClick(params) {
       /**
        * Emitted when clicked on a data item in the chart (e.g., a bar/column).
@@ -151,11 +132,9 @@ var script = {
         params
       });
     },
-
     handleResize() {
       if (this.responsive) this.chart.resize();
     }
-
   }
 };
 

package/dist/components/charts/column/column.js

@@ -11,7 +11,8 @@ 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
@@ -65,7 +66,6 @@ var script = {
       validator: value => ['value', 'category', 'time', 'log'].indexOf(value) !== -1
     }
   },
-
   data() {
     return {
       chart: null,
@@ -79,12 +79,10 @@ var script = {
       debouncedMoveShowTooltip: debounceByAnimationFrame(this.moveShowTooltip)
     };
   },
-
   computed: {
     hasSecondaryAxis() {
       return Boolean(this.secondaryData.length);
     },
-
     barSeries() {
       return this.bars.map((_ref, index) => {
         let {
@@ -99,7 +97,6 @@ var script = {
         });
       });
     },
-
     lineSeries() {
       const offset = this.bars.length;
       return this.lines.map((_ref2, index) => {
@@ -115,7 +112,6 @@ var script = {
         });
       });
     },
-
     secondarySeries() {
       const offset = this.bars.length + this.lines.length;
       return this.secondaryData.map((_ref3, index) => {
@@ -140,13 +136,12 @@ var script = {
         });
       });
     },
-
     series() {
       return [...this.barSeries, ...this.lineSeries, ...this.secondarySeries];
     },
-
     options() {
-      const yAxisPrimary = { ...yAxisDefaults,
+      const yAxisPrimary = {
+        ...yAxisDefaults,
         name: this.yAxisTitle
       };
       const mergedOptions = merge({}, defaultChartOptions, {
@@ -170,26 +165,24 @@ var script = {
           name: this.xAxisTitle,
           type: this.xAxisType
         },
-        yAxis: this.hasSecondaryAxis ? [yAxisPrimary, { ...yAxisDefaults,
+        yAxis: this.hasSecondaryAxis ? [yAxisPrimary, {
+          ...yAxisDefaults,
           name: this.secondaryDataTitle,
           show: this.hasSecondaryAxis
         }] : yAxisPrimary,
         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);
     }
-
   },
-
   beforeDestroy() {
     this.chart.getDom().removeEventListener('mousemove', this.debouncedMoveShowTooltip);
     this.chart.getDom().removeEventListener('mouseout', this.debouncedMoveShowTooltip);
   },
-
   methods: {
     moveShowTooltip(mouseEvent) {
       this.tooltipPosition = {
@@ -198,14 +191,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);
     },
-
     onLabelChange(params) {
       const {
         xLabels,
@@ -214,7 +205,6 @@ var script = {
       this.$set(this, 'tooltipContent', tooltipContent);
       this.tooltipTitle = xLabels.join(', ');
     }
-
   }
 };
 

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