@gitlab/ui 49.0.1 → 49.0.3

package/dist/utils/charts/config.js

@@ -38,7 +38,8 @@ const grid = {
   left: 64,
   right: 32
 };
-const gridWithSecondaryYAxis = { ...grid,
+const gridWithSecondaryYAxis = {
+  ...grid,
   right: 64
 };
 const lineStyle = {
@@ -46,13 +47,13 @@ const lineStyle = {
   type: 'line',
   width: 2
 };
+
 /**
  * Annotations series consists of annotations lines
  * along with markers. Annotations co-exist with data
  * series but have their own virtual coords so that they stay put
  * irrespective of data series extents.
  */
-
 const annotationsYAxisCoords = {
   min: 0,
   pos: 3,
@@ -61,22 +62,23 @@ const annotationsYAxisCoords = {
   show: false
 };
 const symbolSize = 6;
+
 /**
  * These comparison operators are currently in monitoring
  * charts that have alerting related data.
  *
  * {Array} Possible values for greater than
  */
-
 const GREATER_THAN = ['>', '>'];
+
 /**
  * These comparison operators are currently in monitoring
  * charts that have alerting related data.
  *
  * {Array} Possible values for less than
  */
-
 const LESS_THAN = ['<', '&lt;'];
+
 /**
  * All default dataZoom configs will have slider & inside
  * (for reference, see https://gitlab.com/gitlab-org/gitlab-ui/issues/240)
@@ -84,7 +86,6 @@ const LESS_THAN = ['<', '&lt;'];
  * and is specifically to enable touch zoom for mobile devices
  * @param {Object} options
  */
-
 const getDataZoomConfig = function () {
   let {
     filterMode = 'none'
@@ -111,20 +112,23 @@ const getDataZoomConfig = function () {
       disabled
     }]
   };
-}; // All chart options can be merged but series
+};
+
+// All chart options can be merged but series
 // needs to be concatenated.
 // Series can be an object for single series or
 // an array of objects.
-
 const mergeSeriesToOptions = function (options) {
   let series = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
   const {
     series: optSeries = []
   } = options;
-  return { ...options,
+  return {
+    ...options,
     series: [...castArray(series), ...castArray(optSeries)]
   };
 };
+
 /**
  * If an annotation series exists, the chart options should have an
  * array of yAxis settings so that the series can exist in its own
@@ -134,10 +138,10 @@ const mergeSeriesToOptions = function (options) {
  * @param {Boolean} hasAnnotations if annotation series yAxis should be merged
  * @returns {Object} options
  */
-
 const mergeAnnotationAxisToOptions = function (options) {
   let hasAnnotations = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-  return { ...options,
+  return {
+    ...options,
     ...(hasAnnotations && {
       yAxis: [options.yAxis, annotationsYAxisCoords]
     })
@@ -162,19 +166,16 @@ const getToolboxConfig = function () {
       feature: {}
     }
   };
-
   if (restoreIconPath.length) {
     toolboxConfig.toolbox.feature.restore = {
       icon: restoreIconPath
     };
   }
-
   if (saveImageIconPath.length) {
     toolboxConfig.toolbox.feature.saveAsImage = {
       icon: restoreIconPath
     };
   }
-
   if (zoomIconPath.length && backIconPath.length) {
     toolboxConfig.toolbox.feature.dataZoom = {
       icon: {
@@ -183,9 +184,9 @@ const getToolboxConfig = function () {
       }
     };
   }
-
   return toolboxConfig;
 };
+
 /**
  * Generate eCharts markArea arrays for thresholds and annotations.
  *
@@ -204,7 +205,6 @@ const getToolboxConfig = function () {
  * @param {String} axis markArea is generated against this axis
  * @returns {Array}
  */
-
 const generateMarkArea = function (_ref) {
   let {
     min,
@@ -217,6 +217,7 @@ const generateMarkArea = function (_ref) {
     [axis]: max
   }];
 };
+
 /**
  * Generate eCharts markLine objects for thresholds and annotations.
  *
@@ -239,25 +240,22 @@ const generateMarkArea = function (_ref) {
  * @param {String} axis markLine is generated against this axis
  * @returns {Object}
  */
-
-
 const generateMarkLines = function (_ref2) {
   let {
     min,
     max
   } = _ref2;
   let axis = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'yAxis';
-
   if (min) {
     return {
       [axis]: min
     };
   }
-
   return {
     [axis]: max
   };
 };
+
 /**
  * Generates markPoints that are placed under the markLines.
  *
@@ -268,8 +266,6 @@ const generateMarkLines = function (_ref2) {
  * @param {Object} annotation object
  * @return {Object}
  */
-
-
 const generateMarkPoints = _ref3 => {
   let {
     min,
@@ -282,6 +278,7 @@ const generateMarkPoints = _ref3 => {
     tooltipData
   };
 };
+
 /**
  * Generate set of markAreas and markLines to draw on charts
  * as alert thresholds.
@@ -291,19 +288,15 @@ const generateMarkPoints = _ref3 => {
  * @param {Array} thresholds Array of alert thresholds
  * @returns {Object} markAreas and markLines
  */
-
-
 function getThresholdConfig(thresholds) {
   if (!thresholds.length) {
     return {};
   }
-
   const data = thresholds.reduce((acc, alert) => {
     const {
       threshold,
       operator
     } = alert;
-
     if (GREATER_THAN.includes(operator)) {
       acc.areas.push(generateMarkArea({
         min: threshold,
@@ -315,7 +308,6 @@ function getThresholdConfig(thresholds) {
         max: threshold
       }));
     }
-
     acc.lines.push(generateMarkLines({
       max: threshold
     }));
@@ -334,6 +326,7 @@ function getThresholdConfig(thresholds) {
     }
   };
 }
+
 /**
  * This method is only for testing both markLines and markAreas
  * that are used for annotations.
@@ -344,7 +337,6 @@ function getThresholdConfig(thresholds) {
  * @param {Array} annotations Array of annotation objects
  * @returns {Object} { areas, lines, points }
  */
-
 const parseAnnotations = annotations => annotations.reduce((acc, annotation) => {
   // because only markLines are supported all cases will
   // satisfy this condition. This is more of a sanity check
@@ -355,7 +347,6 @@ const parseAnnotations = annotations => annotations.reduce((acc, annotation) =>
     acc.points.push(generateMarkPoints(annotation));
     return acc;
   }
-
   acc.areas.push(generateMarkArea(annotation, 'xAxis'));
   return acc;
 }, {
@@ -363,6 +354,7 @@ const parseAnnotations = annotations => annotations.reduce((acc, annotation) =>
   lines: [],
   points: []
 });
+
 /**
  * Generate set of markAreas and markLines to draw on charts
  * as annotations.
@@ -374,14 +366,13 @@ const parseAnnotations = annotations => annotations.reduce((acc, annotation) =>
  * @param {Array} annotations Array of annotations
  * @returns {Object} { markLines }
  */
-
 const getAnnotationsConfig = annotations => {
   if (!annotations.length) {
     return {};
-  } // annotations parsing is moved out so that it can be tested
-  // for markLines and markAreas.
-
+  }
 
+  // annotations parsing is moved out so that it can be tested
+  // for markLines and markAreas.
   const {
     lines,
     points
@@ -405,6 +396,7 @@ const getAnnotationsConfig = annotations => {
     }
   };
 };
+
 /**
  * Given thresholds and annotations options, this method generates
  * an annotation series that co-exists along with the data series.
@@ -416,14 +408,11 @@ const getAnnotationsConfig = annotations => {
  * @param {Object} params Thresholds, annotations and yAxis options
  * @returns {Object} Annotation series
  */
-
 const generateAnnotationSeries = function (annotations) {
   let yAxisIndex = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
-
   if (!annotations.length) {
     return null;
   }
-
   return merge({
     name: ANNOTATIONS_SERIES_NAME,
     yAxisIndex,
@@ -431,6 +420,7 @@ const generateAnnotationSeries = function (annotations) {
     data: []
   }, getAnnotationsConfig(annotations));
 };
+
 /**
  * This method generates the data series and relevant defaults for a bar chart
  *
@@ -442,7 +432,6 @@ const generateAnnotationSeries = function (annotations) {
  * @param {number} [options.yAxisIndex] - specifies the yAxis to use (if there are multiple)
  * @returns {Object} Bar chart series
  */
-
 const generateBarSeries = _ref4 => {
   let {
     name,
@@ -470,6 +459,7 @@ const generateBarSeries = _ref4 => {
     }
   };
 };
+
 /**
  * This method generates the data series and relevant defaults for a line chart
  *
@@ -480,7 +470,6 @@ const generateBarSeries = _ref4 => {
  * @param {number} [options.yAxisIndex] - specifies the yAxis to use (if there are multiple)
  * @returns {Object} Line chart series
  */
-
 const generateLineSeries = _ref5 => {
   let {
     name,
@@ -501,6 +490,7 @@ const generateLineSeries = _ref5 => {
     }
   };
 };
+
 /**
  * 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.
@@ -511,7 +501,6 @@ const generateLineSeries = _ref5 => {
  * @param {String} yAxisTitle y-axis title
  * @returns {Object} tooltip title and content
  */
-
 const getDefaultTooltipContent = function (params) {
   let yAxisTitle = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
   const seriesDataLength = params.seriesData.length;
@@ -519,20 +508,18 @@ const getDefaultTooltipContent = function (params) {
     xLabels,
     tooltipContent
   } = params.seriesData.reduce((acc, chartItem) => {
-    const [title, value] = chartItem.value || []; // Let's use the y axis title as series name when only one series exists
+    const [title, value] = chartItem.value || [];
+    // Let's use the y axis title as series name when only one series exists
     // This way, TooltipDefaultFormat will display the y axis title as label
-
     const seriesName = seriesDataLength === 1 && yAxisTitle ? yAxisTitle : chartItem.seriesName;
     const color = seriesDataLength === 1 ? '' : chartItem.color;
     acc.tooltipContent[seriesName] = {
       value,
       color
     };
-
     if (!acc.xLabels.includes(title)) {
       acc.xLabels.push(title);
     }
-
     return acc;
   }, {
     xLabels: [],

package/dist/utils/charts/constants.js

@@ -15,52 +15,52 @@ const ANNOTATIONS_SERIES_NAME = 'annotations';
  *
  * All markPoints have this component type
  */
-
 const ANNOTATIONS_COMPONENT_TYPE = 'markPoint';
+
 /**
  * This is so that the mouse doesn't go over the
  * tooltip and call mouseout which will hide the
  * tooltip.
  */
-
 const ANNOTATION_TOOLTIP_TOP_OFFSET = 10;
+
 /**
  * This is a slight offset that gets applied to the left
  * of the chart tooltips to ensure a correct position.
  */
-
 const TOOLTIP_LEFT_OFFSET = 2;
+
 /**
  * This is an offset that gets applied between the mouse
  * cursor and the left of the chart data tooltips to provide
  * some spacing.
  */
-
 const DATA_TOOLTIP_LEFT_OFFSET = 10;
+
 /**
  * These are the accepted values for the layout prop
  * of the chart legend component
  */
-
 const LEGEND_LAYOUT_INLINE = 'inline';
 const LEGEND_LAYOUT_TABLE = 'table';
+
 /**
  * Default values for the chart legend field labels
  */
-
 const LEGEND_AVERAGE_TEXT = 'Avg';
 const LEGEND_CURRENT_TEXT = 'Current';
 const LEGEND_MIN_TEXT = 'Min';
 const LEGEND_MAX_TEXT = 'Max';
+
 /**
  * These arrow symbols are used as markPoints under the annotations lines
  * within area and line charts. This icon doesn't exist in the svg
  * library yet. The below issue is to track the progress of the svg icon
  * https://gitlab.com/gitlab-org/gitlab-svgs/-/issues/118
  */
+const arrowSymbol = 'path://m5 229 5 8h-10z';
 
-const arrowSymbol = 'path://m5 229 5 8h-10z'; // Constants for the type property of charts
-
+// Constants for the type property of charts
 const CHART_TYPE_BAR = 'bar';
 const CHART_TYPE_LINE = 'line';
 

package/dist/utils/charts/mock_data.js

@@ -59,10 +59,10 @@ const mockDefaultChartOptions = {
     show: false
   }
 };
+
 /**
  * This is currently used in area.stories.js and line.stories.js
  */
-
 const mockAnnotationsSeries = {
   series: [{
     type: 'scatter',
@@ -112,10 +112,10 @@ const mockAnnotationsSeries = {
     }
   }]
 };
+
 /**
  * This is currently used in area.stories.js and line.stories.js
  */
-
 const mockAnnotationsConfigs = {
   annotations: [{
     min: '2018-01-25T01:00:00.000Z',

package/dist/utils/charts/story_config.js

@@ -19,6 +19,7 @@ const toolbox = {
     }
   }
 };
+
 /**
  * Generates series data for usage in chart examples
  *
@@ -26,7 +27,6 @@ const toolbox = {
  * @param {String} nameType type of names - how long they should be
  * @returns {Array} generated series data
  */
-
 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;

package/dist/utils/charts/theme.js

@@ -49,13 +49,13 @@ const heatmapHues = [gray100, dataVizBlue200, dataVizBlue400, dataVizBlue600, da
 const gaugeNeutralHues = [gray900, gray500];
 const gaugeSafeHues = [dataVizBlue500, dataVizBlue900];
 const gaugeWarningHue = dataVizOrange500;
+
 /**
  * The default palette is based on the Categorical data palette
  * Categorical data (also known as qualitative or thematic) uses hue to
  * differentiate qualitative data, and lightness to differentiate quantitive data.
  * More info: https://gitlab.com/gitlab-org/gitlab-design/-/issues/719#categorical
  */
-
 const colorPaletteDefault = [dataVizBlue500, dataVizOrange600, dataVizAqua500, dataVizGreen700, dataVizMagenta800, dataVizBlue700, dataVizOrange800, dataVizAqua700, dataVizGreen900, dataVizMagenta950, dataVizBlue900, dataVizOrange950, dataVizAqua900, dataVizGreen600, dataVizMagenta700, dataVizBlue600, dataVizOrange700, dataVizAqua600, dataVizGreen800, dataVizMagenta900, dataVizBlue800, dataVizOrange900, dataVizAqua800, dataVizGreen950, dataVizMagenta500, dataVizBlue950, dataVizOrange500, dataVizAqua950, dataVizGreen500, dataVizMagenta600];
 const colorFromDefaultPalette = index => colorPaletteDefault[index % colorPaletteDefault.length];
 const axes = {
@@ -100,9 +100,7 @@ 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 = function () {
   let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return {

package/dist/utils/charts/utils.js

@@ -8,15 +8,14 @@ import { ANNOTATIONS_SERIES_NAME, ANNOTATIONS_COMPONENT_TYPE } from './constants
  * @param {Array} series Array of series
  * @returns {Boolean}
  */
-
 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;
 };
+
 /**
  * Check if a data point is from an annotation series.
  *
@@ -26,11 +25,11 @@ const seriesHasAnnotations = function () {
  * @param {Object} params data point object
  * @returns {boolean}
  */
-
 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.
@@ -41,14 +40,11 @@ const isDataPointAnnotation = function () {
  * @param {String} d date string
  * @returns {String}
  */
-
 const timeSeriesDateFormatter = function () {
   let d = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
-
   if (!d) {
     return '';
   }
-
   const date = new Date(d);
   const month = (date.getMonth() + 1).toString().padStart(2, '0');
   const day = date.getDate().toString().padStart(2, '0');

package/dist/utils/constants.js

@@ -3,11 +3,11 @@ import { POSITION } from '../components/utilities/truncate/constants';
 const glIconSizes = '8 12 14 16 24 32 48 72';
 
 function appendDefaultOption(options) {
-  return { ...options,
+  return {
+    ...options,
     default: ''
   };
 }
-
 const COMMA = ',';
 const LEFT_MOUSE_BUTTON = 0;
 const glThemes = ['indigo', 'blue', 'light-blue', 'green', 'red', 'light-red'];
@@ -52,7 +52,8 @@ const viewModeOptions = {
   dark: 'dark',
   light: 'light'
 };
-const labelColorOptions = { ...viewModeOptions
+const labelColorOptions = {
+  ...viewModeOptions
 };
 const avatarSizeOptions = [96, 64, 48, 32, 24, 16];
 const avatarsInlineSizeOptions = [32, 24];
@@ -78,7 +79,6 @@ const buttonVariantOptions = {
   danger: 'danger',
   dashed: 'dashed',
   link: 'link',
-
   /**
    * The "reset" variant can be used when customization of GlButton styles is required
    * (e.g. for the "close" button in GlLabel).
@@ -107,8 +107,9 @@ const buttonSizeOptions = {
 const buttonSizeOptionsMap = {
   small: 'sm',
   medium: 'md'
-}; // size options all have corresponding styles (e.g. .s12 defined in icon.scss)
+};
 
+// size options all have corresponding styles (e.g. .s12 defined in icon.scss)
 const iconSizeOptions = glIconSizes.split(' ').map(Number);
 const triggerVariantOptions = {
   click: 'click',
@@ -120,8 +121,9 @@ const tooltipPlacements = {
   left: 'left',
   right: 'right',
   bottom: 'bottom'
-}; // in milliseconds
+};
 
+// in milliseconds
 const tooltipDelay = {
   show: 500,
   hide: 0
@@ -196,8 +198,9 @@ const tabsButtonDefaults = {
 };
 const tokenVariants = ['default', 'search-type', 'search-value'];
 const resizeDebounceTime = 200;
-const variantOptionsWithNoDefault = appendDefaultOption(variantOptions); // Datetime constants
+const variantOptionsWithNoDefault = appendDefaultOption(variantOptions);
 
+// Datetime constants
 const defaultDateFormat = 'YYYY-MM-DD';
 const bannerVariants = ['promotion', 'introduction'];
 const maxZIndex = 10;

package/dist/utils/data_utils.js

@@ -4,17 +4,18 @@ const getRepeatingValue = index => {
   const values = [100, 500, 400, 200, 100, 800, 400, 500, 600, 300, 800, 900, 110, 700, 400, 300, 500, 300, 400, 600, 700];
   return index < values.length ? values[index] : values[index % values.length];
 };
+const generateTimeSeries = () => new Array(100).fill(0).map((el, i) => [new Date(2018, 0, i), getRepeatingValue(i)]);
 
-const generateTimeSeries = () => new Array(100).fill(0).map((el, i) => [new Date(2018, 0, i), getRepeatingValue(i)]); // takes an element and a list and `intersperses' that element between the elements of the list.
+// takes an element and a list and `intersperses' that element between the elements of the list.
 // (',' ['a', 'b', 'c']) -> ['a', ',', 'b', ',', 'c']
-
 const intersperse = curry((separator, items) => {
   const [head, ...rest] = items;
   const separatorFactory = typeof separator === 'function' ? separator : () => separator;
   return [head, ...rest.flatMap(item => [separatorFactory(), item], rest)];
-}); // inserts a value at a given index into an array
-// (1, 2, [1, 3, 4]) -> [1, 2, 3, 4]
+});
 
+// inserts a value at a given index into an array
+// (1, 2, [1, 3, 4]) -> [1, 2, 3, 4]
 const insert = curry((index, newItem, items) => [...items.slice(0, index), newItem, ...items.slice(index)]);
 
 export { generateTimeSeries, insert, intersperse };

package/dist/utils/datetime_utility.js

@@ -7,6 +7,7 @@
  * @param {Date} date
  */
 const newDate = date => date instanceof Date ? new Date(date.getTime()) : new Date();
+
 /**
  * Computes the difference between 2 date objects.
  *
@@ -17,13 +18,13 @@ const newDate = date => date instanceof Date ? new Date(date.getTime()) : new Da
  * getDayDifference(new Date('2020-08-10'), new Date('2020-08-15'));
  * @returns {Number} Number of days between the 2 dates
  */
-
 const getDayDifference = (a, b) => {
   const millisecondsPerDay = 1000 * 60 * 60 * 24;
   const date1 = Date.UTC(a.getFullYear(), a.getMonth(), a.getDate());
   const date2 = Date.UTC(b.getFullYear(), b.getMonth(), b.getDate());
   return Math.floor((date2 - date1) / millisecondsPerDay);
 };
+
 /**
  * Subtracts a given number of days from a given date and returns the new date.
  *
@@ -34,8 +35,8 @@ const getDayDifference = (a, b) => {
  * getDateInPast(new Date('2020-08-15'), 5);
  * @returns {Date} Date in past as Date object
  */
-
 const getDateInPast = (date, daysInPast) => new Date(newDate(date).setDate(date.getDate() - daysInPast));
+
 /**
  * Adds a given number of days to a given date and returns the new date.
  *
@@ -46,8 +47,8 @@ const getDateInPast = (date, daysInPast) => new Date(newDate(date).setDate(date.
  * getDateInFuture(new Date('2020-08-10'), 5);
  * @returns {Date} Date in future as Date object
  */
-
 const getDateInFuture = (date, daysInFuture) => new Date(newDate(date).setDate(date.getDate() + daysInFuture));
+
 /**
  * Are the given two dates equal
  *
@@ -55,7 +56,6 @@ const getDateInFuture = (date, daysInFuture) => new Date(newDate(date).setDate(d
  * @param {Date} date2
  * @returns {Boolean}
  */
-
 const areDatesEqual = (date1, date2) => Boolean(date1 && date2 && new Date(date1).getTime() === new Date(date2).getTime());
 
 export { areDatesEqual, getDateInFuture, getDateInPast, getDayDifference, newDate };