@gitlab/ui 80.13.0 → 80.13.2

package/src/utils/charts/config.spec.js

@@ -1,478 +0,0 @@
-import merge from 'lodash/merge';
-import { GlBreakpointInstance } from '../breakpoints';
-import { columnOptions } from '../constants';
-import { hexToRgba } from '../utils';
-import {
-  getDataZoomConfig,
-  getThresholdConfig,
-  mergeSeriesToOptions,
-  parseAnnotations,
-  generateBarSeries,
-  generateLineSeries,
-  getTooltipTitle,
-  getTooltipContent,
-} from './config';
-import {
-  mockDefaultDataZoomConfig,
-  mockDefaultChartOptions,
-  mockDefaultStackedBarData,
-  mockDefaultLineData,
-} from './mock_data';
-import { colorFromDefaultPalette } from './theme';
-
-describe('chart config helpers', () => {
-  describe('getThresholdConfig', () => {
-    const makeThreshold = (threshold, operator) => [
-      {
-        threshold,
-        operator,
-      },
-    ];
-
-    it('returns empty object for no thresholds', () => {
-      expect(getThresholdConfig([])).toEqual({});
-    });
-
-    it('draws area below line for < threshold', () => {
-      const threshold = 3;
-      const thresholds = makeThreshold(threshold, '<');
-      const expectedLineData = [{ yAxis: threshold }];
-      const expectedAreaData = [[{ yAxis: Number.NEGATIVE_INFINITY }, { yAxis: threshold }]];
-
-      const { markLine, markArea } = getThresholdConfig(thresholds);
-
-      expect(markLine.data).toEqual(expectedLineData);
-      expect(markArea.data).toEqual(expectedAreaData);
-    });
-
-    it('draws line only for = threshold', () => {
-      const threshold = 7;
-      const thresholds = makeThreshold(threshold, '=');
-      const expectedLineData = [{ yAxis: threshold }];
-      const expectedAreaData = [];
-
-      const { markLine, markArea } = getThresholdConfig(thresholds);
-
-      expect(markLine.data).toEqual(expectedLineData);
-      expect(markArea.data).toEqual(expectedAreaData);
-    });
-
-    it('draws area above line for > threshold', () => {
-      const threshold = 9000;
-      const thresholds = makeThreshold(threshold, '>');
-      const expectedLineData = [{ yAxis: threshold }];
-      const expectedAreaData = [[{ yAxis: threshold }, { yAxis: Infinity }]];
-
-      const { markLine, markArea } = getThresholdConfig(thresholds);
-
-      expect(markLine.data).toEqual(expectedLineData);
-      expect(markArea.data).toEqual(expectedAreaData);
-    });
-  });
-
-  describe('parseAnnotations', () => {
-    const makeAnnotation = ({ min, max }) => [
-      {
-        min,
-        max,
-      },
-    ];
-
-    it('returns empty object for no annotations', () => {
-      expect(parseAnnotations([])).toEqual({
-        areas: [],
-        lines: [],
-        points: [],
-      });
-    });
-
-    it('draws an annotation range between two fixed points', () => {
-      const annotation = makeAnnotation({
-        min: 10,
-        max: 40,
-      });
-      const expectedLineData = [];
-      const expectedAreaData = [[{ xAxis: 10 }, { xAxis: 40 }]];
-
-      const { lines, areas } = parseAnnotations(annotation);
-
-      expect(lines).toEqual(expectedLineData);
-      expect(areas).toEqual(expectedAreaData);
-    });
-
-    it('draws an annotation range with infinity upper bound', () => {
-      const annotation = makeAnnotation({
-        min: 10,
-        max: Infinity,
-      });
-      const expectedLineData = [];
-      const expectedAreaData = [[{ xAxis: 10 }, { xAxis: Infinity }]];
-
-      const { lines, areas } = parseAnnotations(annotation);
-
-      expect(lines).toEqual(expectedLineData);
-      expect(areas).toEqual(expectedAreaData);
-    });
-
-    it('draws an annotation range with infinity lower bound', () => {
-      const annotation = makeAnnotation({
-        min: Number.NEGATIVE_INFINITY,
-        max: 10,
-      });
-      const expectedLineData = [];
-      const expectedAreaData = [[{ xAxis: -Infinity }, { xAxis: 10 }]];
-
-      const { lines, areas } = parseAnnotations(annotation);
-
-      expect(lines).toEqual(expectedLineData);
-      expect(areas).toEqual(expectedAreaData);
-    });
-
-    it('draws an annotation range without upper bound', () => {
-      const annotation = makeAnnotation({
-        min: 10,
-      });
-      const expectedLineData = [];
-      const expectedAreaData = [[{ xAxis: 10 }, { xAxis: undefined }]];
-
-      const { lines, areas } = parseAnnotations(annotation);
-
-      expect(lines).toEqual(expectedLineData);
-      expect(areas).toEqual(expectedAreaData);
-    });
-
-    it('draws an annotation range without lower bound', () => {
-      const annotation = makeAnnotation({
-        max: 10,
-      });
-      const expectedLineData = [];
-      const expectedAreaData = [[{ xAxis: undefined }, { xAxis: 10 }]];
-
-      const { lines, areas } = parseAnnotations(annotation);
-
-      expect(lines).toEqual(expectedLineData);
-      expect(areas).toEqual(expectedAreaData);
-    });
-
-    it('draws an annotation line', () => {
-      const annotation = makeAnnotation({
-        min: 10,
-        max: 10,
-      });
-      const expectedLineData = [{ xAxis: 10 }];
-      const expectedAreaData = [];
-
-      const { lines, areas } = parseAnnotations(annotation);
-
-      expect(lines).toEqual(expectedLineData);
-      expect(areas).toEqual(expectedAreaData);
-    });
-
-    it('draws multiple annotation lines', () => {
-      const annotation1 = makeAnnotation({
-        min: 10,
-        max: 10,
-      });
-      const annotation2 = makeAnnotation({
-        min: 30,
-        max: 30,
-      });
-      const expectedLineData = [{ xAxis: 10 }, { xAxis: 30 }];
-      const expectedAreaData = [];
-
-      const { lines, areas } = parseAnnotations([...annotation1, ...annotation2]);
-
-      expect(lines).toEqual(expectedLineData);
-      expect(areas).toEqual(expectedAreaData);
-    });
-  });
-
-  describe('getDataZoomConfig', () => {
-    describe('on large viewports (lg, xl)', () => {
-      it('creates a basic dataZoomConfig with inside scrolling being disabled', () => {
-        const actual = getDataZoomConfig();
-        const expected = mockDefaultDataZoomConfig;
-
-        expect(actual).toEqual(expected);
-      });
-    });
-
-    describe('on small viewports', () => {
-      it('creates a basic dataZoomConfig with inside scrolling being enabled', () => {
-        jest.spyOn(GlBreakpointInstance, 'getBreakpointSize').mockImplementationOnce(() => 'sm');
-        const actual = getDataZoomConfig();
-        const dataZoomWithInsideEnabled = [
-          {
-            bottom: 22,
-            filterMode: 'none',
-            minSpan: 0.01,
-            type: 'slider',
-          },
-          {
-            type: 'inside',
-            filterMode: 'none',
-            minSpan: 0.01,
-            disabled: false,
-          },
-        ];
-        const expected = merge(mockDefaultDataZoomConfig, {
-          dataZoom: dataZoomWithInsideEnabled,
-        });
-
-        expect(actual).toEqual(expected);
-      });
-    });
-
-    it('allows the filterMode to be set', () => {
-      const actual = getDataZoomConfig({ filterMode: 'filter' });
-      // After https://gitlab.com/gitlab-org/gitlab-ui/issues/240
-      // all default dataZoom configs will have slider & inside.
-      // inside is specifically to enable touch zoom for mobile devices
-      const dataZoomWithFilter = [
-        {
-          type: 'slider',
-          filterMode: 'filter',
-          minSpan: null,
-        },
-        {
-          type: 'inside',
-          filterMode: 'filter',
-          minSpan: null,
-          disabled: true,
-        },
-      ];
-      const expected = merge(mockDefaultDataZoomConfig, {
-        dataZoom: dataZoomWithFilter,
-      });
-
-      expect(actual).toEqual(expected);
-    });
-  });
-
-  describe('mergeSeriesToOptions', () => {
-    const series = {
-      areaStyle: {
-        opacity: 0.2,
-        color: '#1f78d1',
-      },
-      showSymbol: false,
-      lineStyle: {
-        color: '#1f78d1',
-      },
-      itemStyle: {
-        color: '#1f78d1',
-      },
-      symbol: 'circle',
-      type: 'line',
-      width: 2,
-      name: 'Values',
-      data: [
-        [0, 5],
-        [4, 3],
-        [8, 10],
-      ],
-    };
-
-    it('create chart options with invalid series props', () => {
-      const chartOptionsOutput = {
-        ...mockDefaultChartOptions,
-        series: [],
-      };
-      expect(mergeSeriesToOptions(mockDefaultChartOptions)).toEqual(chartOptionsOutput);
-      expect(mergeSeriesToOptions(mockDefaultChartOptions, [])).toEqual(chartOptionsOutput);
-    });
-
-    it('creates chart options with single series object passed as data prop', () => {
-      // data for chart can also be passed as a data prop which is transformed to series
-      const chartOptions = mergeSeriesToOptions({
-        ...mockDefaultChartOptions,
-        series,
-      });
-
-      expect(chartOptions.series).toBeInstanceOf(Array);
-      expect(chartOptions.series.length).toBe(1);
-    });
-
-    it('creates chart options with single series array passed as data prop', () => {
-      const chartOptions = mergeSeriesToOptions({
-        ...mockDefaultChartOptions,
-        series: [series],
-      });
-
-      expect(chartOptions.series).toBeInstanceOf(Array);
-      expect(chartOptions.series.length).toBe(1);
-    });
-
-    it('creates chart options with multiple series array passed as data prop', () => {
-      const chartOptions = mergeSeriesToOptions({
-        ...mockDefaultChartOptions,
-        series: [series, series],
-      });
-
-      expect(chartOptions.series).toBeInstanceOf(Array);
-      expect(chartOptions.series.length).toBe(2);
-    });
-
-    it('creates chart options with single series object passed as series prop', () => {
-      const chartOptions = mergeSeriesToOptions(mockDefaultChartOptions, series);
-
-      expect(chartOptions.series).toBeInstanceOf(Array);
-      expect(chartOptions.series.length).toBe(1);
-    });
-
-    it('creates chart options with single series array passed as series prop', () => {
-      const chartOptions = mergeSeriesToOptions(mockDefaultChartOptions, [series]);
-
-      expect(chartOptions.series).toBeInstanceOf(Array);
-      expect(chartOptions.series.length).toBe(1);
-    });
-
-    it('creates chart options with multiple series array passed as series prop', () => {
-      const chartOptions = mergeSeriesToOptions(mockDefaultChartOptions, [series, series]);
-
-      expect(chartOptions.series).toBeInstanceOf(Array);
-      expect(chartOptions.series.length).toBe(2);
-    });
-  });
-
-  describe('generateBarSeries', () => {
-    const defaultBarColors = {
-      itemStyle: { color: hexToRgba(colorFromDefaultPalette(1), 0.2) },
-      emphasis: { itemStyle: { color: hexToRgba(colorFromDefaultPalette(1), 0.4) } },
-    };
-    const barDefaultParams = {
-      name: 'Bar chart',
-      color: colorFromDefaultPalette(0),
-      stack: columnOptions.stacked,
-    };
-
-    it.each`
-      param           | value                         | result
-      ${'name'}       | ${'Cool new bar chart'}       | ${{ name: 'Cool new bar chart' }}
-      ${'color'}      | ${colorFromDefaultPalette(1)} | ${defaultBarColors}
-      ${'data'}       | ${mockDefaultStackedBarData}  | ${{ data: mockDefaultStackedBarData }}
-      ${'stack'}      | ${columnOptions.tiled}        | ${{ stack: columnOptions.tiled }}
-      ${'yAxisIndex'} | ${3}                          | ${{ yAxisIndex: 3 }}
-    `('with $param set will contain $result', ({ param, value, result }) => {
-      expect(
-        generateBarSeries({
-          ...barDefaultParams,
-          [param]: value,
-        })
-      ).toMatchObject(result);
-    });
-  });
-  describe('generateLineSeries', () => {
-    const defaultLineColors = {
-      itemStyle: { color: colorFromDefaultPalette(1) },
-      lineStyle: { color: colorFromDefaultPalette(1) },
-    };
-    const lineDefaultParams = { name: 'Line chart', color: colorFromDefaultPalette(0) };
-
-    it.each`
-      param           | value                         | result
-      ${'name'}       | ${'Cool new line chart'}      | ${{ name: 'Cool new line chart' }}
-      ${'color'}      | ${colorFromDefaultPalette(1)} | ${defaultLineColors}
-      ${'data'}       | ${mockDefaultLineData}        | ${{ data: mockDefaultLineData }}
-      ${'yAxisIndex'} | ${2}                          | ${{ yAxisIndex: 2 }}
-    `('with $param set will contain $result', ({ param, value, result }) => {
-      expect(
-        generateLineSeries({
-          ...lineDefaultParams,
-          [param]: value,
-        })
-      ).toMatchObject(result);
-    });
-  });
-
-  describe('getTooltipTitle', () => {
-    it('returns an empty value', () => {
-      expect(getTooltipTitle()).toBe('');
-    });
-
-    it('returns title for single series', () => {
-      expect(
-        getTooltipTitle({
-          seriesData: [{ value: ['Value 1', 99] }],
-        })
-      ).toBe('Value 1');
-    });
-
-    it('returns title for multiple series', () => {
-      expect(
-        getTooltipTitle({
-          seriesData: [{ value: ['Value 1', 99] }, { value: ['Value 2', 100] }],
-        })
-      ).toBe('Value 1, Value 2');
-    });
-
-    it('returns title for multiple repeated series', () => {
-      expect(
-        getTooltipTitle({
-          seriesData: [{ value: ['Value 1', 99] }, { value: ['Value 1', 99] }],
-        })
-      ).toBe('Value 1');
-    });
-
-    it('returns title for multiple series with an axis name', () => {
-      expect(
-        getTooltipTitle(
-          {
-            seriesData: [{ value: ['Value 1', 99] }, { value: ['Value 2', 100] }],
-          },
-          'Time'
-        )
-      ).toBe('Value 1, Value 2 (Time)');
-    });
-  });
-
-  describe('getTooltipContent', () => {
-    it('returns an empty value', () => {
-      expect(getTooltipContent()).toEqual({});
-    });
-
-    it('returns content for single series', () => {
-      expect(
-        getTooltipContent({
-          seriesData: [{ value: ['Value 1', 99], seriesName: 'Series 1', color: '#aaa' }],
-        })
-      ).toEqual({ 'Series 1': { color: '', value: 99 } });
-    });
-
-    it('returns content for single series with an axis name', () => {
-      expect(
-        getTooltipContent(
-          {
-            seriesData: [{ value: ['Value 1', 99], seriesName: 'Series 1', color: '#aaa' }],
-          },
-          'Amount'
-        )
-      ).toEqual({ Amount: { color: '', value: 99 } });
-    });
-
-    it('returns content for multiple series', () => {
-      expect(
-        getTooltipContent({
-          seriesData: [
-            { value: ['Value 1', 99], seriesName: 'Series 1', color: '#aaa' },
-            { value: ['Value 2', 99], seriesName: 'Series 2', color: '#bbb' },
-          ],
-        })
-      ).toEqual({
-        'Series 1': { color: '#aaa', value: 99 },
-        'Series 2': { color: '#bbb', value: 99 },
-      });
-    });
-
-    it('returns content for multiple repeated series', () => {
-      expect(
-        getTooltipContent({
-          seriesData: [
-            { value: ['Value 1', 99], seriesName: 'Series 1', color: '#aaa' },
-            { value: ['Value 1', 99], seriesName: 'Series 1', color: '#aaa' },
-          ],
-        })
-      ).toEqual({ 'Series 1': { color: '#aaa', value: 99 } });
-    });
-  });
-});

package/src/utils/charts/utils.spec.js

@@ -1,106 +0,0 @@
-import { seriesHasAnnotations, isDataPointAnnotation, timeSeriesDateFormatter } from './utils';
-
-const mockMarkPoint = {
-  symbol: 'path://m5 229 5 8h-10z',
-  symbolSize: '8',
-  symbolOffset: [0, ' 60%'],
-  data: [],
-};
-
-const markPointData = [
-  {
-    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!' },
-  },
-];
-const defaultDataWithoutMarkPoint = [
-  {
-    type: 'scatter',
-    name: 'annotations',
-    data: [],
-  },
-];
-
-const defaultDataWithMarkPoint = [
-  {
-    ...defaultDataWithoutMarkPoint[0],
-    markPoint: mockMarkPoint,
-  },
-];
-
-const defaultDataWithMarkPointData = [
-  {
-    ...defaultDataWithoutMarkPoint[0],
-    markPoint: {
-      ...mockMarkPoint,
-      data: markPointData,
-    },
-  },
-];
-
-const defaultDataWithoutAnnotations = [
-  {
-    type: 'line',
-    name: 'Line data',
-    data: [['Mon', 20]],
-  },
-];
-
-const hoveredMarkPoint = (type) => ({
-  ...markPointData[0],
-  componentType: type,
-});
-
-describe('chart utils', () => {
-  describe('seriesHasAnnotations', () => {
-    it.each`
-      name                                                               | input                            | expected
-      ${'Returns false for no input'}                                    | ${undefined}                     | ${false}
-      ${'Returns false for null input'}                                  | ${null}                          | ${false}
-      ${'Returns false for empty series'}                                | ${[]}                            | ${false}
-      ${'Returns false for series with no markPoint'}                    | ${defaultDataWithoutMarkPoint}   | ${false}
-      ${'Returns false for series with markPoint but no markPoint.data'} | ${defaultDataWithMarkPoint}      | ${false}
-      ${'Returns false for non-annotations series'}                      | ${defaultDataWithoutAnnotations} | ${false}
-      ${'Returns true for series with markPoint and markPoint data'}     | ${defaultDataWithMarkPointData}  | ${true}
-    `(`$name`, ({ input, expected }) => {
-      expect(seriesHasAnnotations(input)).toBe(expected);
-    });
-  });
-
-  describe('isDataPointAnnotation', () => {
-    it.each`
-      name                                                               | input                            | expected
-      ${'Returns false for undefined input'}                             | ${undefined}                     | ${false}
-      ${'Returns false for empty input'}                                 | ${{}}                            | ${false}
-      ${'Returns false if hovered data point is a scatter series datum'} | ${hoveredMarkPoint('scatter')}   | ${false}
-      ${'Returns true if hovered data point is a markPoint'}             | ${hoveredMarkPoint('markPoint')} | ${true}
-    `(`$name`, ({ input, expected }) => {
-      expect(isDataPointAnnotation(input)).toBe(expected);
-    });
-  });
-
-  describe('timeSeriesDateFormatter', () => {
-    it.each`
-      name                                             | input            | expected
-      ${'Returns empty string for empty input'}        | ${''}            | ${''}
-      ${'Returns empty string for null input'}         | ${null}          | ${''}
-      ${'Returns formatted date for epoch time input'} | ${1514707200000} | ${'2017-12-31'}
-    `(`$name`, ({ input, expected }) => {
-      expect(timeSeriesDateFormatter(input)).toBe(expected);
-    });
-  });
-});

package/src/utils/datetime_utility.spec.js

@@ -1,98 +0,0 @@
-import * as datetimeUtility from './datetime_utility';
-
-describe('Date time utils', () => {
-  describe('newDate', () => {
-    it('returns new date instance from existing date instance', () => {
-      const initialDate = new Date(2019, 0, 1);
-      const copiedDate = datetimeUtility.newDate(initialDate);
-
-      expect(copiedDate.getTime()).toBe(initialDate.getTime());
-
-      initialDate.setMonth(initialDate.getMonth() + 1);
-
-      expect(copiedDate.getTime()).not.toBe(initialDate.getTime());
-    });
-
-    it('returns date instance when provided date param is not of type date or is undefined', () => {
-      const initialDate = datetimeUtility.newDate();
-
-      expect(initialDate instanceof Date).toBe(true);
-    });
-  });
-
-  describe('get day difference', () => {
-    it('should return 7', () => {
-      const firstDay = new Date('07/01/2016');
-      const secondDay = new Date('07/08/2016');
-      const difference = datetimeUtility.getDayDifference(firstDay, secondDay);
-
-      expect(difference).toBe(7);
-    });
-
-    it('should return 31', () => {
-      const firstDay = new Date('07/01/2016');
-      const secondDay = new Date('08/01/2016');
-      const difference = datetimeUtility.getDayDifference(firstDay, secondDay);
-
-      expect(difference).toBe(31);
-    });
-
-    it('should return 365', () => {
-      const firstDay = new Date('07/02/2015');
-      const secondDay = new Date('07/01/2016');
-      const difference = datetimeUtility.getDayDifference(firstDay, secondDay);
-
-      expect(difference).toBe(365);
-    });
-  });
-
-  describe('getDateInPast', () => {
-    const date = new Date('2019-07-16T00:00:00.000Z');
-    const daysInPast = 90;
-
-    it('returns the correct date in the past', () => {
-      const dateInPast = datetimeUtility.getDateInPast(date, daysInPast);
-      const expectedDateInPast = new Date('2019-04-17T00:00:00.000Z');
-
-      expect(dateInPast).toStrictEqual(expectedDateInPast);
-    });
-
-    it('does not modifiy the original date', () => {
-      datetimeUtility.getDateInPast(date, daysInPast);
-      expect(date).toStrictEqual(new Date('2019-07-16T00:00:00.000Z'));
-    });
-  });
-
-  describe('getDateInFuture', () => {
-    const date = new Date('2019-07-16T00:00:00.000Z');
-    const daysInFuture = 90;
-
-    it('returns the correct date in the future', () => {
-      const dateInFuture = datetimeUtility.getDateInFuture(date, daysInFuture);
-      const expectedDateInFuture = new Date('2019-10-14T00:00:00.000Z');
-
-      expect(dateInFuture).toStrictEqual(expectedDateInFuture);
-    });
-
-    it('does not modifiy the original date', () => {
-      datetimeUtility.getDateInFuture(date, daysInFuture);
-      expect(date).toStrictEqual(new Date('2019-07-16T00:00:00.000Z'));
-    });
-  });
-
-  describe('areDatesEqual', () => {
-    it.each`
-      name                                               | input                                                                                                                         | expected
-      ${'Returns false for no inputs'}                   | ${[]}                                                                                                                         | ${false}
-      ${'Returns false for null inputs'}                 | ${[null, null]}                                                                                                               | ${false}
-      ${'Returns false for empty inputs'}                | ${['', '']}                                                                                                                   | ${false}
-      ${'Returns true for date without timestamp'}       | ${['2020-01-10', '2020-01-10']}                                                                                               | ${true}
-      ${'Returns false for different dates in local tz'} | ${['Mon Apr 27 2020 15:21:22 GMT-0700 (Pacific Daylight Time)', 'Mon Apr 27 2020 15:22:22 GMT-0700 (Pacific Daylight Time)']} | ${false}
-      ${'Returns true for same dates in local tz'}       | ${['Mon Apr 27 2020 15:22:22 GMT-0700 (Pacific Daylight Time)', 'Mon Apr 27 2020 15:22:22 GMT-0700 (Pacific Daylight Time)']} | ${true}
-      ${'Returns false for different dates in UTC'}      | ${['2020-04-27 22:22:21 UTC', '2020-04-27 22:22:22 UTC']}                                                                     | ${false}
-      ${'Returns true for same dates in UTC'}            | ${['2020-04-27 22:22:22 UTC', '2020-04-27 22:22:22 UTC']}                                                                     | ${true}
-    `(`$name`, ({ input, expected }) => {
-      expect(datetimeUtility.areDatesEqual(...input)).toBe(expected);
-    });
-  });
-});