@gitlab/ui 32.66.0 → 33.0.1

package/dist/utils/charts/config.js

@@ -85,9 +85,10 @@ const LESS_THAN = ['<', '&lt;'];
  * @param {Object} options
  */
 
-const getDataZoomConfig = ({
-  filterMode = 'none'
-} = {}) => {
+const getDataZoomConfig = function () {
+  let {
+    filterMode = 'none'
+  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const disabledBreakpoints = ['lg', 'xl'];
   const disabled = disabledBreakpoints.includes(Breakpoints.getBreakpointSize());
   const minSpan = filterMode === 'none' ? 0.01 : null;
@@ -115,7 +116,8 @@ const getDataZoomConfig = ({
 // Series can be an object for single series or
 // an array of objects.
 
-const mergeSeriesToOptions = (options, series = []) => {
+const mergeSeriesToOptions = function (options) {
+  let series = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
   const {
     series: optSeries = []
   } = options;
@@ -133,11 +135,14 @@ const mergeSeriesToOptions = (options, series = []) => {
  * @returns {Object} options
  */
 
-const mergeAnnotationAxisToOptions = (options, hasAnnotations = false) => ({ ...options,
-  ...(hasAnnotations && {
-    yAxis: [options.yAxis, annotationsYAxisCoords]
-  })
-});
+const mergeAnnotationAxisToOptions = function (options) {
+  let hasAnnotations = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  return { ...options,
+    ...(hasAnnotations && {
+      yAxis: [options.yAxis, annotationsYAxisCoords]
+    })
+  };
+};
 const dataZoomAdjustments = dataZoom => {
   // handle cases where dataZoom is array and object.
   const useSlider = dataZoom && isArray(dataZoom) ? dataZoom.length : Boolean(dataZoom);
@@ -145,12 +150,13 @@ const dataZoomAdjustments = dataZoom => {
     filterMode: 'weakFilter'
   }) : [];
 };
-const getToolboxConfig = ({
-  restoreIconPath = '',
-  saveImageIconPath = '',
-  zoomIconPath = '',
-  backIconPath = ''
-} = {}) => {
+const getToolboxConfig = function () {
+  let {
+    restoreIconPath = '',
+    saveImageIconPath = '',
+    zoomIconPath = '',
+    backIconPath = ''
+  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const toolboxConfig = {
     toolbox: {
       feature: {}
@@ -199,14 +205,18 @@ const getToolboxConfig = ({
  * @returns {Array}
  */
 
-const generateMarkArea = ({
-  min,
-  max
-}, axis = 'yAxis') => [{
-  [axis]: min
-}, {
-  [axis]: max
-}];
+const generateMarkArea = function (_ref) {
+  let {
+    min,
+    max
+  } = _ref;
+  let axis = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'yAxis';
+  return [{
+    [axis]: min
+  }, {
+    [axis]: max
+  }];
+};
 /**
  * Generate eCharts markLine objects for thresholds and annotations.
  *
@@ -231,10 +241,13 @@ const generateMarkArea = ({
  */
 
 
-const generateMarkLines = ({
-  min,
-  max
-}, axis = 'yAxis') => {
+const generateMarkLines = function (_ref2) {
+  let {
+    min,
+    max
+  } = _ref2;
+  let axis = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'yAxis';
+
   if (min) {
     return {
       [axis]: min
@@ -257,10 +270,11 @@ const generateMarkLines = ({
  */
 
 
-const generateMarkPoints = ({
-  min,
-  tooltipData
-}) => {
+const generateMarkPoints = _ref3 => {
+  let {
+    min,
+    tooltipData
+  } = _ref3;
   return {
     name: 'annotations',
     xAxis: min,
@@ -403,7 +417,9 @@ const getAnnotationsConfig = annotations => {
  * @returns {Object} Annotation series
  */
 
-const generateAnnotationSeries = (annotations, yAxisIndex = 1) => {
+const generateAnnotationSeries = function (annotations) {
+  let yAxisIndex = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
+
   if (!annotations.length) {
     return null;
   }
@@ -427,30 +443,33 @@ const generateAnnotationSeries = (annotations, yAxisIndex = 1) => {
  * @returns {Object} Bar chart series
  */
 
-const generateBarSeries = ({
-  name,
-  color,
-  data = [],
-  stack = columnOptions.stacked,
-  yAxisIndex = 0
-}) => ({
-  type: CHART_TYPE_BAR,
-  name,
-  data,
-  stack,
-  barMaxWidth: '50%',
-  yAxisIndex,
-  itemStyle: {
-    color: hexToRgba(color, 0.2),
-    borderColor: color,
-    borderWidth: 1
-  },
-  emphasis: {
+const generateBarSeries = _ref4 => {
+  let {
+    name,
+    color,
+    data = [],
+    stack = columnOptions.stacked,
+    yAxisIndex = 0
+  } = _ref4;
+  return {
+    type: CHART_TYPE_BAR,
+    name,
+    data,
+    stack,
+    barMaxWidth: '50%',
+    yAxisIndex,
     itemStyle: {
-      color: hexToRgba(color, 0.4)
+      color: hexToRgba(color, 0.2),
+      borderColor: color,
+      borderWidth: 1
+    },
+    emphasis: {
+      itemStyle: {
+        color: hexToRgba(color, 0.4)
+      }
     }
-  }
-});
+  };
+};
 /**
  * This method generates the data series and relevant defaults for a line chart
  *
@@ -462,23 +481,26 @@ const generateBarSeries = ({
  * @returns {Object} Line chart series
  */
 
-const generateLineSeries = ({
-  name,
-  color,
-  data = [],
-  yAxisIndex = 0
-}) => ({
-  name,
-  data,
-  type: CHART_TYPE_LINE,
-  yAxisIndex,
-  lineStyle: {
-    color
-  },
-  itemStyle: {
-    color
-  }
-});
+const generateLineSeries = _ref5 => {
+  let {
+    name,
+    color,
+    data = [],
+    yAxisIndex = 0
+  } = _ref5;
+  return {
+    name,
+    data,
+    type: CHART_TYPE_LINE,
+    yAxisIndex,
+    lineStyle: {
+      color
+    },
+    itemStyle: {
+      color
+    }
+  };
+};
 /**
  * The method works well if tooltip content should be against y-axis values.
  * However, for bar charts, the tooltip should be against x-axis values.
@@ -490,7 +512,8 @@ const generateLineSeries = ({
  * @returns {Object} tooltip title and content
  */
 
-const getDefaultTooltipContent = (params, yAxisTitle = null) => {
+const getDefaultTooltipContent = function (params) {
+  let yAxisTitle = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
   const seriesDataLength = params.seriesData.length;
   const {
     xLabels,

package/dist/utils/charts/story_config.js

@@ -1,5 +1,5 @@
 import times from 'lodash/times';
-import { SERIES_NAME_SHORT, SERIES_NAME } from '../stories_utils';
+import { SERIES_NAME, SERIES_NAME_SHORT } from '../stories_utils';
 import { marqueeSelectionSvgPath, redoSvgPath, clearAllSvgPath, downloadSvgPath } from '../svgs/svg_paths';
 import { colorFromDefaultPalette } from './theme';
 
@@ -27,7 +27,9 @@ const toolbox = {
  * @returns {Array} generated series data
  */
 
-const generateSeriesData = (amount = 10, nameType = SERIES_NAME_SHORT) => {
+const generateSeriesData = function () {
+  let amount = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 10;
+  let nameType = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : SERIES_NAME_SHORT;
   const defaultData = [820, 932, 960, 1150, 1290, 1330, 1390];
   const name = SERIES_NAME[nameType];
   return times(amount, index => ({

package/dist/utils/charts/theme.js

@@ -103,126 +103,129 @@ const axes = {
 
 const isLineChartWithoutArea = options => Array.isArray(options === null || options === void 0 ? void 0 : options.series) && options.series.some(series => series.type === 'line' && !series.areaStyle);
 
-const createTheme = (options = {}) => ({
-  color: colorPaletteDefault,
-  backgroundColor: 'transparent',
-  textStyle: {
-    color: gray900
-  },
-  markLine: {
-    silent: true,
-    symbol: 'none',
-    label: {
-      show: false
+const createTheme = function () {
+  let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return {
+    color: colorPaletteDefault,
+    backgroundColor: 'transparent',
+    textStyle: {
+      color: gray900
     },
-    lineStyle: {
-      color: red500,
-      width: 1,
-      type: 'dashed'
-    }
-  },
-  markArea: {
-    silent: true,
-    itemStyle: {
-      color: hexToRgba(red500, 0.1)
-    }
-  },
-  dataZoom: {
-    borderColor: 'transparent',
-    filterMode: 'none',
-    brushSelect: false,
-    dataBackground: {
-      lineStyle: {
-        width: 2,
-        color: gray200,
-        opacity: 1
+    markLine: {
+      silent: true,
+      symbol: 'none',
+      label: {
+        show: false
       },
-      // render unfilled zoom-graph if the series is a line chart without area styles
-      // more details: https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/2364#note_666637306
-      areaStyle: isLineChartWithoutArea(options) ? {} // Use empty object instead of null, see https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/2185#note_707711029 for more context
-      : {
-        color: gray50,
-        opacity: 1
+      lineStyle: {
+        color: red500,
+        width: 1,
+        type: 'dashed'
       }
     },
-    fillerColor: hexToRgba(gray200, 0.23),
-    handleIcon: scrollHandleSvgPath,
-    handleStyle: {
-      borderColor: 'transparent',
-      color: gray500
-    },
-    handleSize: '50%',
-    labelFormatter: () => null,
-    textStyle: {
-      color: gray600
-    }
-  },
-  toolbox: {
-    top: '-5',
-    left: 'center',
-    itemSize: 14,
-    emphasis: {
-      iconStyle: {
-        borderWidth: 0,
-        color: gray700
+    markArea: {
+      silent: true,
+      itemStyle: {
+        color: hexToRgba(red500, 0.1)
       }
     },
-    iconStyle: {
-      color: gray200,
-      borderWidth: 0
-    },
-    itemGap: 8,
-    feature: {
-      dataZoom: {
-        title: {
-          zoom: 'Click to zoom in on a portion of the graph',
-          back: 'Remove selection'
+    dataZoom: {
+      borderColor: 'transparent',
+      filterMode: 'none',
+      brushSelect: false,
+      dataBackground: {
+        lineStyle: {
+          width: 2,
+          color: gray200,
+          opacity: 1
+        },
+        // render unfilled zoom-graph if the series is a line chart without area styles
+        // more details: https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/2364#note_666637306
+        areaStyle: isLineChartWithoutArea(options) ? {} // Use empty object instead of null, see https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/2185#note_707711029 for more context
+        : {
+          color: gray50,
+          opacity: 1
         }
       },
-      restore: {
-        title: 'Remove all selections and return chart to default state'
+      fillerColor: hexToRgba(gray200, 0.23),
+      handleIcon: scrollHandleSvgPath,
+      handleStyle: {
+        borderColor: 'transparent',
+        color: gray500
       },
-      saveAsImage: {
-        title: 'Save chart as an image',
-        name: 'graph'
+      handleSize: '50%',
+      labelFormatter: () => null,
+      textStyle: {
+        color: gray600
       }
-    }
-  },
-  markPoint: {
-    label: {
-      normal: {
-        textStyle: {
-          color: whiteNormal
+    },
+    toolbox: {
+      top: '-5',
+      left: 'center',
+      itemSize: 14,
+      emphasis: {
+        iconStyle: {
+          borderWidth: 0,
+          color: gray700
         }
       },
-      emphasis: {
-        textStyle: {
-          color: whiteNormal
+      iconStyle: {
+        color: gray200,
+        borderWidth: 0
+      },
+      itemGap: 8,
+      feature: {
+        dataZoom: {
+          title: {
+            zoom: 'Click to zoom in on a portion of the graph',
+            back: 'Remove selection'
+          }
+        },
+        restore: {
+          title: 'Remove all selections and return chart to default state'
+        },
+        saveAsImage: {
+          title: 'Save chart as an image',
+          name: 'graph'
         }
       }
-    }
-  },
-  line: {
-    itemStyle: {
-      normal: {
-        borderWidth: 1
-      }
     },
-    lineStyle: {
-      normal: {
-        width: 2
+    markPoint: {
+      label: {
+        normal: {
+          textStyle: {
+            color: whiteNormal
+          }
+        },
+        emphasis: {
+          textStyle: {
+            color: whiteNormal
+          }
+        }
       }
     },
-    symbolSize: '6',
-    symbol: 'circle',
-    showSymbol: false,
-    smooth: false
-  },
-  categoryAxis: axes,
-  valueAxis: axes,
-  logAxis: axes,
-  timeAxis: axes
-});
+    line: {
+      itemStyle: {
+        normal: {
+          borderWidth: 1
+        }
+      },
+      lineStyle: {
+        normal: {
+          width: 2
+        }
+      },
+      symbolSize: '6',
+      symbol: 'circle',
+      showSymbol: false,
+      smooth: false
+    },
+    categoryAxis: axes,
+    valueAxis: axes,
+    logAxis: axes,
+    timeAxis: axes
+  };
+};
 
 export default createTheme;
 export { colorFromDefaultPalette, colorPaletteDefault, gaugeNeutralHues, gaugeSafeHues, gaugeWarningHue, heatmapHues, themeName };

package/dist/utils/charts/utils.js

@@ -9,11 +9,14 @@ import { ANNOTATIONS_SERIES_NAME, ANNOTATIONS_COMPONENT_TYPE } from './constants
  * @returns {Boolean}
  */
 
-const seriesHasAnnotations = (series = []) => (series || []).filter(seriesData => {
-  var _seriesData$ANNOTATIO, _seriesData$ANNOTATIO2;
+const seriesHasAnnotations = function () {
+  let series = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  return (series || []).filter(seriesData => {
+    var _seriesData$ANNOTATIO, _seriesData$ANNOTATIO2;
 
-  return seriesData.name === ANNOTATIONS_SERIES_NAME && ((_seriesData$ANNOTATIO = seriesData[ANNOTATIONS_COMPONENT_TYPE]) === null || _seriesData$ANNOTATIO === void 0 ? void 0 : (_seriesData$ANNOTATIO2 = _seriesData$ANNOTATIO.data) === null || _seriesData$ANNOTATIO2 === void 0 ? void 0 : _seriesData$ANNOTATIO2.length);
-}).length !== 0;
+    return seriesData.name === ANNOTATIONS_SERIES_NAME && ((_seriesData$ANNOTATIO = seriesData[ANNOTATIONS_COMPONENT_TYPE]) === null || _seriesData$ANNOTATIO === void 0 ? void 0 : (_seriesData$ANNOTATIO2 = _seriesData$ANNOTATIO.data) === null || _seriesData$ANNOTATIO2 === void 0 ? void 0 : _seriesData$ANNOTATIO2.length);
+  }).length !== 0;
+};
 /**
  * Check if a data point is from an annotation series.
  *
@@ -24,7 +27,10 @@ const seriesHasAnnotations = (series = []) => (series || []).filter(seriesData =
  * @returns {boolean}
  */
 
-const isDataPointAnnotation = (params = {}) => params.name === ANNOTATIONS_SERIES_NAME && params.componentType === ANNOTATIONS_COMPONENT_TYPE;
+const isDataPointAnnotation = function () {
+  let params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return params.name === ANNOTATIONS_SERIES_NAME && params.componentType === ANNOTATIONS_COMPONENT_TYPE;
+};
 /**
  * Date formatter to make date strings more
  * readable.
@@ -36,7 +42,9 @@ const isDataPointAnnotation = (params = {}) => params.name === ANNOTATIONS_SERIE
  * @returns {String}
  */
 
-const timeSeriesDateFormatter = (d = '') => {
+const timeSeriesDateFormatter = function () {
+  let d = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+
   if (!d) {
     return '';
   }

package/dist/utils/number_utils.js

@@ -9,13 +9,21 @@ const addition = (a, b) => a + b;
  * @param  {...Number} numbers
  */
 
-const sum = (...numbers) => numbers.reduce(addition);
+const sum = function () {
+  for (var _len = arguments.length, numbers = new Array(_len), _key = 0; _key < _len; _key++) {
+    numbers[_key] = arguments[_key];
+  }
+
+  return numbers.reduce(addition);
+};
 /**
  * Returns the average of all arguments
  * @param  {...Number} numbers
  */
 
-const average = (...numbers) => sum(...numbers) / numbers.length;
+const average = function () {
+  return sum(...arguments) / arguments.length;
+};
 /**
  * Convert number to engineering format, using SI suffix
  * @param {Number|String} value - Number or Number-convertible String
@@ -23,7 +31,8 @@ const average = (...numbers) => sum(...numbers) / numbers.length;
  * @return {String} number, possibly with a suffix
  */
 
-const engineeringNotation = (value, precision = 2) => {
+const engineeringNotation = function (value) {
+  let precision = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 2;
   const invalidValues = [NaN, Infinity, -Infinity];
   const num = Number(value);
 
@@ -58,8 +67,8 @@ const engineeringNotation = (value, precision = 2) => {
   }
 
   const scaledPower = 3 * Math.floor(power / 3);
-  const scaledMantissa = (exponentialNotation / 10 ** scaledPower). // strip trailing decimals from floating point rounding errors
-  toFixed(precision) // strip trailing 0s after a decimal point
+  const scaledMantissa = (exponentialNotation / 10 ** scaledPower // strip trailing decimals from floating point rounding errors
+  ).toFixed(precision) // strip trailing 0s after a decimal point
   .replace(/\.([1-9]*)0+$/, (_, fractionalDigits) => {
     if (fractionalDigits) {
       return `.${fractionalDigits}`;

package/dist/utils/use_mock_intersection_observer.js

@@ -16,7 +16,8 @@ class MockObserver {
     this.$_observers = [];
   }
 
-  observe(node, options = {}) {
+  observe(node) {
+    let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
     this.$_observers.push([node, options]);
   }
 
@@ -27,10 +28,11 @@ class MockObserver {
   takeRecords() {} // eslint-disable-next-line babel/camelcase
 
 
-  $_triggerObserve(nodeParam, {
-    entry = {},
-    options = {}
-  } = {}) {
+  $_triggerObserve(nodeParam) {
+    let {
+      entry = {},
+      options = {}
+    } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
     const nodes = this.$_getNodesFromParam(nodeParam);
     nodes.forEach(node => {
       if (this.$_hasObserver(node, options)) {
@@ -43,13 +45,20 @@ class MockObserver {
   } // eslint-disable-next-line babel/camelcase
 
 
-  $_hasObserver(node, options = {}) {
-    return this.$_observers.some(([obvNode, obvOptions]) => node === obvNode && _isMatch(options, obvOptions));
+  $_hasObserver(node) {
+    let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    return this.$_observers.some(_ref => {
+      let [obvNode, obvOptions] = _ref;
+      return node === obvNode && _isMatch(options, obvOptions);
+    });
   }
 
   $_getNodesFromParam(nodeParam) {
     if (!nodeParam) {
-      return this.$_observers.map(([node]) => node);
+      return this.$_observers.map(_ref2 => {
+        let [node] = _ref2;
+        return node;
+      });
     }
 
     if (!_isArray(nodeParam)) {
@@ -63,7 +72,10 @@ class MockObserver {
 
 class MockIntersectionObserver extends MockObserver {
   unobserve(node) {
-    this.$_observers = this.$_observers.filter(([obvNode]) => node !== obvNode);
+    this.$_observers = this.$_observers.filter(_ref3 => {
+      let [obvNode] = _ref3;
+      return node !== obvNode;
+    });
   }
 
 }
@@ -74,7 +86,11 @@ const useMockIntersectionObserver = () => {
   beforeEach(() => {
     instances = [];
     origObserver = global.IntersectionObserver;
-    global.IntersectionObserver = jest.fn().mockImplementation((...args) => {
+    global.IntersectionObserver = jest.fn().mockImplementation(function () {
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+
       const mockObserver = new MockIntersectionObserver(...args);
       instances.push(mockObserver);
       return mockObserver;
@@ -85,7 +101,11 @@ const useMockIntersectionObserver = () => {
     global.IntersectionObserver = origObserver;
   });
 
-  const trigger = (observer, ...args) => {
+  const trigger = function (observer) {
+    for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
+      args[_key2 - 1] = arguments[_key2];
+    }
+
     observer.$_triggerObserve(...args);
   };