@gitlab/ui 132.0.1 → 132.0.3

package/dist/utils/charts/mock_data.js

@@ -0,0 +1,191 @@
+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

@@ -0,0 +1,24 @@
+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

@@ -0,0 +1,200 @@
+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

@@ -0,0 +1,54 @@
+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 };