@gitlab/ui 131.3.0 → 131.3.1

package/dist/utils/charts/mock_data.js

@@ -1,191 +0,0 @@
-import { BLUE_500 } from '../../tokens/build/js/tokens';
-import { hexToRgba } from '../utils';
-import { colorFromDefaultPalette } from './theme';
-
-const mockDefaultDataZoomConfig = {
-  dataZoom: [{
-    bottom: 22,
-    filterMode: 'none',
-    minSpan: 0.01,
-    type: 'slider'
-  }, {
-    type: 'inside',
-    filterMode: 'none',
-    minSpan: 0.01,
-    disabled: true
-  }],
-  grid: {
-    bottom: 81
-  },
-  xAxis: {
-    nameGap: 67
-  }
-};
-
-/**
- * This is currently used in area.stories.js and line.stories.js
- */
-const mockAnnotationsSeries = {
-  series: [{
-    type: 'scatter',
-    name: 'annotations',
-    data: [],
-    markLine: {
-      lineStyle: {
-        color: BLUE_500
-      },
-      data: [{
-        xAxis: '2018-01-25T01:00:00.000Z'
-      }, {
-        xAxis: '2018-01-25T10:00:00.000Z'
-      }, {
-        xAxis: '2018-02-06T08:00:00.000Z'
-      }]
-    },
-    markPoint: {
-      symbol: 'path://m5 229 5 8h-10z',
-      symbolSize: '8',
-      symbolOffset: [0, ' 60%'],
-      itemStyle: {
-        color: BLUE_500
-      },
-      data: [{
-        name: 'annotations',
-        xAxis: '2018-01-25T01:00:00.000Z',
-        yAxis: 0,
-        tooltipData: {
-          content: 'Scranton strangler was caught.'
-        }
-      }, {
-        name: 'annotations',
-        xAxis: '2018-01-25T10:00:00.000Z',
-        yAxis: 0,
-        tooltipData: {
-          content: 'Tobys green car is missing.'
-        }
-      }, {
-        name: 'annotations',
-        xAxis: '2018-02-06T08:00:00.000Z',
-        yAxis: 0,
-        tooltipData: {
-          content: 'It was actually Toby!'
-        }
-      }]
-    }
-  }]
-};
-
-/**
- * This is currently used in area.stories.js and line.stories.js
- */
-const mockAnnotationsConfigs = {
-  annotations: [{
-    min: '2018-01-25T01:00:00.000Z',
-    max: '2018-01-25T01:00:00.000Z',
-    tooltipData: {
-      content: 'Scranton strangler was caught.'
-    }
-  }, {
-    min: '2018-01-25T10:00:00.000Z',
-    max: '2018-01-25T10:00:00.000Z',
-    tooltipData: {
-      content: 'Tobys green car is missing.'
-    }
-  }, {
-    min: '2018-02-06T08:00:00.000Z',
-    max: '2018-02-06T08:00:00.000Z',
-    tooltipData: {
-      content: 'It was actually Toby!'
-    }
-  }]
-};
-const mockDefaultStackedBarData = [{
-  name: 'Fun 1',
-  data: [58, 49, 38, 23, 27, 68, 38, 35, 7, 64, 65, 31]
-}, {
-  name: 'Fun 2',
-  data: [8, 6, 34, 19, 9, 7, 17, 25, 14, 7, 10, 32]
-}, {
-  name: 'Fun 3',
-  data: [67, 60, 66, 32, 61, 54, 13, 50, 16, 11, 47, 28]
-}, {
-  name: 'Fun 4',
-  data: [8, 9, 5, 40, 13, 19, 58, 21, 47, 59, 23, 46]
-}];
-const mockMultiStackBarData = [{
-  name: 'Fun 1',
-  data: [58, 49, 38, 23, 27, 68, 38, 35, 7, 64, 65, 31],
-  stack: 'stack-1'
-}, {
-  name: 'Fun 2',
-  data: [8, 6, 34, 19, 9, 7, 17, 25, 14, 7, 10, 32],
-  stack: 'stack-1'
-}, {
-  name: 'Fun 3',
-  data: [67, 60, 66, 32, 61, 54, 13, 50, 16, 11, 47, 28],
-  stack: 'stack-2'
-}, {
-  name: 'Fun 4',
-  data: [8, 9, 5, 40, 13, 19, 58, 21, 47, 59, 23, 46],
-  stack: 'stack-2'
-}];
-const mockDefaultStackedLineData = [{
-  name: 'Stacked median line',
-  data: [67, 60, 66, 32, 61, 54, 13, 50, 16, 11, 47, 28]
-}];
-const mockDefaultLineData = [{
-  name: 'Median line',
-  data: [['Joe', 1120], ['Sarah', 732], ['Tom', 501], ['Mary', 634], ['Mike', 290], ['Ben', 130], ['Jane', 120]]
-}];
-const mockDefaultBarData = [{
-  name: 'Full',
-  data: [['Joe', 1220], ['Sarah', 932], ['Tom', 901], ['Mary', 934], ['Mike', 1290], ['Ben', 1330], ['Jane', 1320]]
-}];
-const mockRawBarData = [['Mon', 1220], ['Tue', 932], ['Wed', 901], ['Thu', 934], ['Fri', 1290], ['Sat', 1330], ['Sun', 1320]];
-const color = colorFromDefaultPalette(0);
-const mockDefaultLineChartConfig = {
-  name: 'Line chart',
-  data: [],
-  type: 'line',
-  yAxisIndex: 0,
-  lineStyle: {
-    color
-  },
-  itemStyle: {
-    color
-  }
-};
-const mockDefaultBarChartConfig = {
-  type: 'bar',
-  name: 'Bar chart',
-  data: [],
-  stack: null,
-  barMaxWidth: '50%',
-  yAxisIndex: 0,
-  itemStyle: {
-    color: hexToRgba(color, 0.2),
-    borderColor: color,
-    borderWidth: 1
-  },
-  emphasis: {
-    itemStyle: {
-      color: hexToRgba(color, 0.4)
-    }
-  }
-};
-const mockSecondaryData = [{
-  name: 'Secondary 1',
-  data: [13, 25, 38, 23, 27, 28, 29, 27, 1, 15, 65, 31]
-}];
-const mockSecondaryBarData = [{
-  name: 'Secondary',
-  type: 'bar',
-  data: [['Joe', 220], ['Sarah', 392], ['Tom', 291], ['Mary', 594], ['Mike', 320], ['Ben', 230], ['Jane', 120], ['Anne', 290]]
-}];
-const mockSecondaryTrendlineData = [{
-  type: 'line',
-  name: 'Median line',
-  data: [['Joe', 220], ['Sarah', 392], ['Tom', 291], ['Mary', 594], ['Mike', 320], ['Ben', 230], ['Jane', 120], ['Anne', 290]]
-}];
-
-export { mockAnnotationsConfigs, mockAnnotationsSeries, mockDefaultBarChartConfig, mockDefaultBarData, mockDefaultDataZoomConfig, mockDefaultLineChartConfig, mockDefaultLineData, mockDefaultStackedBarData, mockDefaultStackedLineData, mockMultiStackBarData, mockRawBarData, mockSecondaryBarData, mockSecondaryData, mockSecondaryTrendlineData };

package/dist/utils/charts/story_config.js

@@ -1,24 +0,0 @@
-import { times } from 'lodash-es';
-import { SERIES_NAME, SERIES_NAME_SHORT } from '../stories_constants';
-import { colorFromDefaultPalette } from './theme';
-
-/**
- * Generates series data for usage in chart examples
- *
- * @param {Number} amount number of generated series
- * @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;
-  const defaultData = [820, 932, 960, 1150, 1290, 1330, 1390];
-  const name = SERIES_NAME[nameType];
-  return times(amount, index => ({
-    color: colorFromDefaultPalette(index),
-    data: defaultData.map(value => value * index),
-    name: `${name}${index + 1}`
-  }));
-};
-
-export { generateSeriesData };

package/dist/utils/charts/theme.js

@@ -1,200 +0,0 @@
-import { GL_COLOR_NEUTRAL_100, GL_COLOR_DATA_BLUE_200, GL_COLOR_DATA_BLUE_400, GL_COLOR_DATA_BLUE_600, GL_COLOR_DATA_BLUE_800, GL_COLOR_NEUTRAL_900, GL_COLOR_NEUTRAL_500, GL_COLOR_DATA_BLUE_500, GL_COLOR_DATA_BLUE_900, GL_COLOR_DATA_ORANGE_500, GL_COLOR_DATA_ORANGE_600, GL_COLOR_DATA_AQUA_500, GL_COLOR_DATA_GREEN_600, GL_COLOR_DATA_MAGENTA_500, GL_COLOR_DATA_BLUE_700, GL_COLOR_DATA_ORANGE_800, GL_COLOR_DATA_AQUA_700, GL_COLOR_DATA_GREEN_800, GL_COLOR_DATA_MAGENTA_700, GL_COLOR_DATA_ORANGE_950, GL_COLOR_DATA_AQUA_900, GL_COLOR_DATA_GREEN_950, GL_COLOR_DATA_MAGENTA_900, GL_COLOR_DATA_ORANGE_700, GL_COLOR_DATA_AQUA_600, GL_COLOR_DATA_GREEN_700, GL_COLOR_DATA_MAGENTA_600, GL_COLOR_DATA_ORANGE_900, GL_COLOR_DATA_AQUA_800, GL_COLOR_DATA_GREEN_900, GL_COLOR_DATA_MAGENTA_800, GL_COLOR_DATA_BLUE_950, GL_COLOR_DATA_AQUA_950, GL_COLOR_DATA_GREEN_500, GL_COLOR_DATA_MAGENTA_950, GL_COLOR_DATA_ORANGE_400, GL_COLOR_DATA_GREEN_400, GL_COLOR_DATA_BLUE_300, GL_COLOR_DATA_ORANGE_200, GL_COLOR_DATA_AQUA_300, GL_COLOR_DATA_GREEN_200, GL_COLOR_DATA_MAGENTA_300, GL_COLOR_DATA_BLUE_100, GL_COLOR_DATA_ORANGE_50, GL_COLOR_DATA_AQUA_100, GL_COLOR_DATA_GREEN_50, GL_COLOR_DATA_MAGENTA_100, GL_COLOR_DATA_ORANGE_300, GL_COLOR_DATA_AQUA_400, GL_COLOR_DATA_GREEN_300, GL_COLOR_DATA_MAGENTA_400, GL_COLOR_DATA_ORANGE_100, GL_COLOR_DATA_AQUA_200, GL_COLOR_DATA_GREEN_100, GL_COLOR_DATA_MAGENTA_200, GL_COLOR_DATA_BLUE_50, GL_COLOR_DATA_AQUA_50, GL_COLOR_DATA_MAGENTA_50, GL_COLOR_NEUTRAL_50 } from '../../tokens/build/js/tokens';
-import { scrollHandleSvgPath, marqueeSelectionSvgPath, redoSvgPath, clearAllSvgPath, downloadSvgPath } from '../svgs/svg_paths';
-
-const GL_BORDER_RADIUS_BASE = '0.25rem';
-const themeName = 'gitlab';
-const heatmapHues = [GL_COLOR_NEUTRAL_100, GL_COLOR_DATA_BLUE_200, GL_COLOR_DATA_BLUE_400, GL_COLOR_DATA_BLUE_600, GL_COLOR_DATA_BLUE_800];
-const gaugeNeutralHues = [GL_COLOR_NEUTRAL_900, GL_COLOR_NEUTRAL_500];
-const gaugeSafeHues = [GL_COLOR_DATA_BLUE_500, GL_COLOR_DATA_BLUE_900];
-const gaugeWarningHue = GL_COLOR_DATA_ORANGE_500;
-
-/**
- * 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://design.gitlab.com/data-visualization/color#categorical-data
- */
-const colorPaletteDefault = [GL_COLOR_DATA_BLUE_500, GL_COLOR_DATA_ORANGE_600, GL_COLOR_DATA_AQUA_500, GL_COLOR_DATA_GREEN_600, GL_COLOR_DATA_MAGENTA_500, GL_COLOR_DATA_BLUE_700, GL_COLOR_DATA_ORANGE_800, GL_COLOR_DATA_AQUA_700, GL_COLOR_DATA_GREEN_800, GL_COLOR_DATA_MAGENTA_700, GL_COLOR_DATA_BLUE_900, GL_COLOR_DATA_ORANGE_950, GL_COLOR_DATA_AQUA_900, GL_COLOR_DATA_GREEN_950, GL_COLOR_DATA_MAGENTA_900, GL_COLOR_DATA_BLUE_600, GL_COLOR_DATA_ORANGE_700, GL_COLOR_DATA_AQUA_600, GL_COLOR_DATA_GREEN_700, GL_COLOR_DATA_MAGENTA_600, GL_COLOR_DATA_BLUE_800, GL_COLOR_DATA_ORANGE_900, GL_COLOR_DATA_AQUA_800, GL_COLOR_DATA_GREEN_900, GL_COLOR_DATA_MAGENTA_800, GL_COLOR_DATA_BLUE_950, GL_COLOR_DATA_ORANGE_500, GL_COLOR_DATA_AQUA_950, GL_COLOR_DATA_GREEN_500, GL_COLOR_DATA_MAGENTA_950];
-const colorFromDefaultPalette = index => colorPaletteDefault[index % colorPaletteDefault.length];
-const colorPaletteDark = [GL_COLOR_DATA_BLUE_500, GL_COLOR_DATA_ORANGE_400, GL_COLOR_DATA_AQUA_500, GL_COLOR_DATA_GREEN_400, GL_COLOR_DATA_MAGENTA_500, GL_COLOR_DATA_BLUE_300, GL_COLOR_DATA_ORANGE_200, GL_COLOR_DATA_AQUA_300, GL_COLOR_DATA_GREEN_200, GL_COLOR_DATA_MAGENTA_300, GL_COLOR_DATA_BLUE_100, GL_COLOR_DATA_ORANGE_50, GL_COLOR_DATA_AQUA_100, GL_COLOR_DATA_GREEN_50, GL_COLOR_DATA_MAGENTA_100, GL_COLOR_DATA_BLUE_400, GL_COLOR_DATA_ORANGE_300, GL_COLOR_DATA_AQUA_400, GL_COLOR_DATA_GREEN_300, GL_COLOR_DATA_MAGENTA_400, GL_COLOR_DATA_BLUE_200, GL_COLOR_DATA_ORANGE_100, GL_COLOR_DATA_AQUA_200, GL_COLOR_DATA_GREEN_100, GL_COLOR_DATA_MAGENTA_200, GL_COLOR_DATA_BLUE_50, GL_COLOR_DATA_ORANGE_500, GL_COLOR_DATA_AQUA_50, GL_COLOR_DATA_GREEN_500, GL_COLOR_DATA_MAGENTA_50];
-const colorFromDarkPalette = index => colorPaletteDark[index % colorPaletteDark.length];
-const axes = {
-  axisLabel: {
-    margin: 8,
-    show: true,
-    color: 'var(--gl-chart-axis-text-color)',
-    hideOverlap: true
-  },
-  axisLine: {
-    show: false
-  },
-  axisPointer: {
-    lineStyle: {
-      type: 'solid',
-      color: 'var(--gl-chart-axis-pointer-color)'
-    },
-    label: {
-      show: false
-    }
-  },
-  axisTick: {
-    show: true,
-    alignWithLabel: true,
-    lineStyle: {
-      color: 'var(--gl-chart-axis-line-color)'
-    }
-  },
-  nameGap: 30,
-  nameTextStyle: {
-    fontWeight: 'bold'
-  },
-  splitLine: {
-    lineStyle: {
-      color: ['var(--gl-chart-axis-line-color)']
-    }
-  },
-  splitArea: {
-    show: false
-  }
-};
-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 {
-    color: colorPaletteDefault,
-    backgroundColor: 'transparent',
-    textStyle: {
-      color: 'var(--gl-text-color-default)'
-    },
-    markLine: {
-      silent: true,
-      symbol: 'none',
-      label: {
-        show: false
-      },
-      lineStyle: {
-        color: 'var(--gl-chart-threshold-line-color)',
-        width: 1,
-        type: 'dashed'
-      }
-    },
-    markArea: {
-      silent: true,
-      itemStyle: {
-        color: 'var(--gl-chart-threshold-area-color)'
-      }
-    },
-    dataZoom: {
-      borderColor: 'transparent',
-      filterMode: 'none',
-      brushSelect: false,
-      dataBackground: {
-        lineStyle: {
-          width: 2,
-          color: 'var(--gl-chart-axis-line-color)',
-          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: 'var(--gl-background-color-strong)',
-          opacity: 1
-        }
-      },
-      fillerColor: 'var(--gl-chart-zoom-filler-color)',
-      handleIcon: scrollHandleSvgPath,
-      emphasis: {
-        handleStyle: {
-          color: 'var(--gl-chart-zoom-handle-color)'
-        }
-      },
-      handleStyle: {
-        borderColor: 'transparent',
-        color: 'var(--gl-chart-zoom-handle-color)'
-      },
-      handleSize: '50%',
-      labelFormatter: () => null,
-      textStyle: {
-        color: 'var(--gl-chart-axis-text-color)'
-      }
-    },
-    toolbox: {
-      top: '-5',
-      left: 'center',
-      itemSize: 14,
-      emphasis: {
-        iconStyle: {
-          borderWidth: 0,
-          color: 'var(--gl-icon-color-default)',
-          textFill: 'var(--gl-feedback-strong-text-color)',
-          textBackgroundColor: 'var(--gl-feedback-strong-background-color)',
-          textBorderRadius: GL_BORDER_RADIUS_BASE,
-          textPadding: [8, 12]
-        }
-      },
-      iconStyle: {
-        color: 'var(--gl-icon-color-default)',
-        borderWidth: 0
-      },
-      itemGap: 8,
-      feature: {
-        dataZoom: {
-          title: {
-            zoom: 'Click to zoom in on a portion of the graph',
-            back: 'Remove selection'
-          },
-          icon: {
-            zoom: marqueeSelectionSvgPath,
-            back: redoSvgPath
-          }
-        },
-        restore: {
-          title: 'Remove all selections and return chart to default state',
-          icon: clearAllSvgPath
-        },
-        saveAsImage: {
-          title: 'Save chart as an image',
-          name: 'graph',
-          icon: downloadSvgPath
-        }
-      }
-    },
-    markPoint: {
-      label: {
-        normal: {
-          textStyle: {
-            color: GL_COLOR_NEUTRAL_50
-          }
-        },
-        emphasis: {
-          textStyle: {
-            color: GL_COLOR_NEUTRAL_50
-          }
-        }
-      }
-    },
-    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 { colorFromDarkPalette, colorFromDefaultPalette, colorPaletteDark, colorPaletteDefault, createTheme, gaugeNeutralHues, gaugeSafeHues, gaugeWarningHue, heatmapHues, themeName };

package/dist/utils/charts/utils.js

@@ -1,54 +0,0 @@
-import { ANNOTATIONS_SERIES_NAME, ANNOTATIONS_COMPONENT_TYPE } from './constants';
-
-/**
- * Check if passed series has annotations related data.
- *
- * This is currently used in time series charts (area & line).
- *
- * @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.
- *
- * This is triggered when hovered over time series charts.
- *
- * This is currently used in
- * @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.
- *
- * This is currently used in area and line charts
- * stories.
- *
- * @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');
-  return `${date.getFullYear()}-${month}-${day}`;
-};
-
-export { isDataPointAnnotation, seriesHasAnnotations, timeSeriesDateFormatter };