@gitlab/ui 72.11.1 → 72.12.0

package/dist/utils/charts/mock_data.js

@@ -1,211 +0,0 @@
-import { BLUE_500 } from '../../../dist/tokens/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
-  }
-};
-const mockDefaultChartOptions = {
-  grid: {
-    top: 16,
-    bottom: 44,
-    left: 64,
-    right: 32
-  },
-  xAxis: {
-    name: 'Value',
-    type: 'value',
-    nameLocation: 'center',
-    boundaryGap: false,
-    splitLine: {
-      show: false
-    },
-    axisPointer: {
-      show: true,
-      label: {},
-      lineStyle: {
-        type: 'solid'
-      }
-    }
-  },
-  yAxis: {
-    name: 'Value',
-    type: 'value',
-    nameLocation: 'center',
-    nameGap: 50,
-    axisLabel: {},
-    axisTick: {
-      show: false
-    }
-  },
-  legend: {
-    show: false
-  }
-};
-
-/**
- * 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 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, mockDefaultChartOptions, mockDefaultDataZoomConfig, mockDefaultLineChartConfig, mockDefaultLineData, mockDefaultStackedBarData, mockDefaultStackedLineData, mockRawBarData, mockSecondaryBarData, mockSecondaryData, mockSecondaryTrendlineData };

package/dist/utils/charts/story_config.js

@@ -1,42 +0,0 @@
-import times from 'lodash/times';
-import { SERIES_NAME, SERIES_NAME_SHORT } from '../stories_constants';
-import { marqueeSelectionSvgPath, redoSvgPath, clearAllSvgPath, downloadSvgPath } from '../svgs/svg_paths';
-import { colorFromDefaultPalette } from './theme';
-
-const toolbox = {
-  feature: {
-    dataZoom: {
-      icon: {
-        zoom: marqueeSelectionSvgPath,
-        back: redoSvgPath
-      }
-    },
-    restore: {
-      icon: clearAllSvgPath
-    },
-    saveAsImage: {
-      icon: downloadSvgPath
-    }
-  }
-};
-
-/**
- * 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, toolbox };

package/dist/utils/charts/theme.js

@@ -1,192 +0,0 @@
-import { GRAY_600, GRAY_200, GRAY_50, GRAY_300, GRAY_100, DATA_VIZ_BLUE_200, DATA_VIZ_BLUE_400, DATA_VIZ_BLUE_600, DATA_VIZ_BLUE_800, GRAY_900, GRAY_500, DATA_VIZ_BLUE_500, DATA_VIZ_BLUE_900, DATA_VIZ_ORANGE_500, DATA_VIZ_ORANGE_600, DATA_VIZ_AQUA_500, DATA_VIZ_GREEN_600, DATA_VIZ_MAGENTA_500, DATA_VIZ_BLUE_700, DATA_VIZ_ORANGE_800, DATA_VIZ_AQUA_700, DATA_VIZ_GREEN_800, DATA_VIZ_MAGENTA_700, DATA_VIZ_ORANGE_950, DATA_VIZ_AQUA_900, DATA_VIZ_GREEN_950, DATA_VIZ_MAGENTA_900, DATA_VIZ_ORANGE_700, DATA_VIZ_AQUA_600, DATA_VIZ_GREEN_700, DATA_VIZ_MAGENTA_600, DATA_VIZ_ORANGE_900, DATA_VIZ_AQUA_800, DATA_VIZ_GREEN_900, DATA_VIZ_MAGENTA_800, DATA_VIZ_BLUE_950, DATA_VIZ_AQUA_950, DATA_VIZ_GREEN_500, DATA_VIZ_MAGENTA_950, DATA_VIZ_ORANGE_400, DATA_VIZ_GREEN_400, DATA_VIZ_BLUE_300, DATA_VIZ_ORANGE_200, DATA_VIZ_AQUA_300, DATA_VIZ_GREEN_200, DATA_VIZ_MAGENTA_300, DATA_VIZ_BLUE_100, DATA_VIZ_ORANGE_50, DATA_VIZ_AQUA_100, DATA_VIZ_GREEN_50, DATA_VIZ_MAGENTA_100, DATA_VIZ_ORANGE_300, DATA_VIZ_AQUA_400, DATA_VIZ_GREEN_300, DATA_VIZ_MAGENTA_400, DATA_VIZ_ORANGE_100, DATA_VIZ_AQUA_200, DATA_VIZ_GREEN_100, DATA_VIZ_MAGENTA_200, DATA_VIZ_BLUE_50, DATA_VIZ_AQUA_50, DATA_VIZ_MAGENTA_50, RED_500, WHITE } from '../../../dist/tokens/js/tokens';
-import { scrollHandleSvgPath } from '../svgs/svg_paths';
-import { hexToRgba } from '../utils';
-
-const GL_BORDER_RADIUS_BASE = '0.25rem';
-const themeName = 'gitlab';
-const heatmapHues = [GRAY_100, DATA_VIZ_BLUE_200, DATA_VIZ_BLUE_400, DATA_VIZ_BLUE_600, DATA_VIZ_BLUE_800];
-const gaugeNeutralHues = [GRAY_900, GRAY_500];
-const gaugeSafeHues = [DATA_VIZ_BLUE_500, DATA_VIZ_BLUE_900];
-const gaugeWarningHue = DATA_VIZ_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 = [DATA_VIZ_BLUE_500, DATA_VIZ_ORANGE_600, DATA_VIZ_AQUA_500, DATA_VIZ_GREEN_600, DATA_VIZ_MAGENTA_500, DATA_VIZ_BLUE_700, DATA_VIZ_ORANGE_800, DATA_VIZ_AQUA_700, DATA_VIZ_GREEN_800, DATA_VIZ_MAGENTA_700, DATA_VIZ_BLUE_900, DATA_VIZ_ORANGE_950, DATA_VIZ_AQUA_900, DATA_VIZ_GREEN_950, DATA_VIZ_MAGENTA_900, DATA_VIZ_BLUE_600, DATA_VIZ_ORANGE_700, DATA_VIZ_AQUA_600, DATA_VIZ_GREEN_700, DATA_VIZ_MAGENTA_600, DATA_VIZ_BLUE_800, DATA_VIZ_ORANGE_900, DATA_VIZ_AQUA_800, DATA_VIZ_GREEN_900, DATA_VIZ_MAGENTA_800, DATA_VIZ_BLUE_950, DATA_VIZ_ORANGE_500, DATA_VIZ_AQUA_950, DATA_VIZ_GREEN_500, DATA_VIZ_MAGENTA_950];
-const colorFromDefaultPalette = index => colorPaletteDefault[index % colorPaletteDefault.length];
-const colorPaletteDark = [DATA_VIZ_BLUE_500, DATA_VIZ_ORANGE_400, DATA_VIZ_AQUA_500, DATA_VIZ_GREEN_400, DATA_VIZ_MAGENTA_500, DATA_VIZ_BLUE_300, DATA_VIZ_ORANGE_200, DATA_VIZ_AQUA_300, DATA_VIZ_GREEN_200, DATA_VIZ_MAGENTA_300, DATA_VIZ_BLUE_100, DATA_VIZ_ORANGE_50, DATA_VIZ_AQUA_100, DATA_VIZ_GREEN_50, DATA_VIZ_MAGENTA_100, DATA_VIZ_BLUE_400, DATA_VIZ_ORANGE_300, DATA_VIZ_AQUA_400, DATA_VIZ_GREEN_300, DATA_VIZ_MAGENTA_400, DATA_VIZ_BLUE_200, DATA_VIZ_ORANGE_100, DATA_VIZ_AQUA_200, DATA_VIZ_GREEN_100, DATA_VIZ_MAGENTA_200, DATA_VIZ_BLUE_50, DATA_VIZ_ORANGE_500, DATA_VIZ_AQUA_50, DATA_VIZ_GREEN_500, DATA_VIZ_MAGENTA_50];
-const colorFromDarkPalette = index => colorPaletteDark[index % colorPaletteDark.length];
-const axes = {
-  axisLabel: {
-    margin: 8,
-    show: true,
-    color: `var(--gray-600, ${GRAY_600})`,
-    hideOverlap: true
-  },
-  axisLine: {
-    show: false
-  },
-  axisPointer: {
-    lineStyle: {
-      type: 'solid',
-      color: GRAY_600
-    },
-    label: {
-      show: false
-    }
-  },
-  axisTick: {
-    show: true,
-    alignWithLabel: true,
-    lineStyle: {
-      color: GRAY_200
-    }
-  },
-  nameGap: 30,
-  nameTextStyle: {
-    fontWeight: 'bold'
-  },
-  splitLine: {
-    lineStyle: {
-      color: [GRAY_200]
-    }
-  },
-  splitArea: {
-    show: false,
-    areaStyle: {
-      color: [hexToRgba(GRAY_50, 0.3), hexToRgba(GRAY_300, 0.3)]
-    }
-  }
-};
-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, ${GRAY_900})`
-    },
-    markLine: {
-      silent: true,
-      symbol: 'none',
-      label: {
-        show: false
-      },
-      lineStyle: {
-        color: RED_500,
-        width: 1,
-        type: 'dashed'
-      }
-    },
-    markArea: {
-      silent: true,
-      itemStyle: {
-        color: hexToRgba(RED_500, 0.1)
-      }
-    },
-    dataZoom: {
-      borderColor: 'transparent',
-      filterMode: 'none',
-      brushSelect: false,
-      dataBackground: {
-        lineStyle: {
-          width: 2,
-          color: GRAY_200,
-          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: GRAY_50,
-          opacity: 1
-        }
-      },
-      fillerColor: hexToRgba(GRAY_200, 0.23),
-      handleIcon: scrollHandleSvgPath,
-      handleStyle: {
-        borderColor: 'transparent',
-        color: GRAY_500
-      },
-      handleSize: '50%',
-      labelFormatter: () => null,
-      textStyle: {
-        color: GRAY_600
-      }
-    },
-    toolbox: {
-      top: '-5',
-      left: 'center',
-      itemSize: 14,
-      emphasis: {
-        iconStyle: {
-          borderWidth: 0,
-          color: GRAY_900,
-          textBackgroundColor: WHITE,
-          textBorderRadius: GL_BORDER_RADIUS_BASE,
-          textPadding: [8, 12]
-        }
-      },
-      iconStyle: {
-        color: GRAY_500,
-        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'
-        }
-      }
-    },
-    markPoint: {
-      label: {
-        normal: {
-          textStyle: {
-            color: GRAY_50
-          }
-        },
-        emphasis: {
-          textStyle: {
-            color: GRAY_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 };