@gitlab/ui 80.13.1 → 80.13.2

package/src/components/charts/stacked_column/stacked_column.spec.js

@@ -1,194 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-
-import { createMockChartInstance } from '~helpers/chart_stubs';
-import { expectHeightAutoClasses } from '~helpers/chart_height';
-import { LEGEND_LAYOUT_INLINE, LEGEND_LAYOUT_TABLE } from '~/utils/charts/constants';
-import {
-  mockDefaultStackedLineData,
-  mockDefaultStackedBarData,
-  mockSecondaryData,
-} from '../../../utils/charts/mock_data';
-import Chart from '../chart/chart.vue';
-import ChartLegend from '../legend/legend.vue';
-import ChartTooltip from '../tooltip/tooltip.vue';
-import * as themeUtils from '../../../utils/charts/theme';
-import StackedColumnChart from './stacked_column.vue';
-
-let mockChartInstance;
-
-jest.mock('echarts', () => ({
-  getInstanceByDom: () => mockChartInstance,
-}));
-
-const defaultChartProps = {
-  seriesNames: [],
-  bars: mockDefaultStackedBarData,
-  groupBy: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
-  xAxisType: 'category',
-  xAxisTitle: 'January - December 2018',
-  yAxisTitle: 'Commits',
-};
-
-describe('stacked column chart component', () => {
-  let wrapper;
-
-  const findChart = () => wrapper.findComponent(Chart);
-  const findLegend = () => wrapper.findComponent(ChartLegend);
-  const findDataTooltip = () => wrapper.findComponent(ChartTooltip);
-
-  const emitChartCreated = () => findChart().vm.$emit('created', mockChartInstance);
-
-  const createShallowWrapper = ({ props = {}, slots = {} } = {}) => {
-    wrapper = shallowMount(StackedColumnChart, {
-      propsData: { ...defaultChartProps, ...props },
-      slots,
-    });
-    emitChartCreated();
-  };
-
-  beforeEach(() => {
-    mockChartInstance = createMockChartInstance();
-  });
-
-  afterEach(() => {
-    jest.restoreAllMocks();
-  });
-
-  it('emits `created`, with the chart instance', () => {
-    createShallowWrapper();
-
-    return wrapper.vm.$nextTick(() => {
-      expect(wrapper.emitted('created').length).toBe(1);
-      expect(wrapper.emitted('created')[0][0]).toBe(mockChartInstance);
-    });
-  });
-
-  it('should correctly render the chart', () => {
-    createShallowWrapper();
-
-    const chart = findChart();
-
-    expect(chart.props('options')).toMatchSnapshot();
-  });
-
-  describe('with line data provided', () => {
-    beforeEach(() => {
-      createShallowWrapper({
-        props: {
-          bars: [],
-          lines: mockDefaultStackedLineData,
-        },
-      });
-    });
-    it('should correctly render the chart', () => {
-      expect(findChart().props('options')).toMatchSnapshot();
-    });
-  });
-
-  describe('legend', () => {
-    it('is inline by default', () => {
-      createShallowWrapper();
-
-      return wrapper.vm.$nextTick(() => {
-        expect(findLegend().props('layout')).toBe(LEGEND_LAYOUT_INLINE);
-      });
-    });
-
-    it('is inline if correct prop value is set', () => {
-      createShallowWrapper({ props: { legendLayout: LEGEND_LAYOUT_INLINE } });
-
-      return wrapper.vm.$nextTick(() => {
-        expect(findLegend().props('layout')).toBe(LEGEND_LAYOUT_INLINE);
-      });
-    });
-
-    it('is tabular if correct prop value is set', () => {
-      createShallowWrapper({ props: { legendLayout: LEGEND_LAYOUT_TABLE } });
-
-      return wrapper.vm.$nextTick(() => {
-        expect(findLegend().props('layout')).toBe(LEGEND_LAYOUT_TABLE);
-      });
-    });
-  });
-
-  describe('with secondary axis data provided', () => {
-    const secondaryDataTitle = 'test secondary';
-
-    beforeEach(() => {
-      createShallowWrapper({
-        props: {
-          ...defaultChartProps,
-          secondaryData: mockSecondaryData,
-          secondaryDataTitle,
-        },
-      });
-    });
-    it('should correctly render the chart', () => {
-      const chart = findChart();
-
-      expect(chart.props('options')).toMatchSnapshot();
-    });
-
-    it('should set the secondary Y axis name', () => {
-      const chart = findChart();
-
-      expect(chart.props('options').yAxis[1].name).toEqual(secondaryDataTitle);
-    });
-  });
-
-  describe('tooltip', () => {
-    beforeEach(() => {
-      createShallowWrapper();
-    });
-
-    it('is initialized', () => {
-      expect(findDataTooltip().props('chart')).toBe(mockChartInstance);
-    });
-  });
-
-  describe('color palette', () => {
-    let paletteSpy;
-
-    describe('default palette', () => {
-      beforeEach(() => {
-        paletteSpy = jest.spyOn(themeUtils, 'colorFromDefaultPalette');
-
-        createShallowWrapper();
-      });
-
-      it('calls colorFromDefaultPalette', () => {
-        expect(paletteSpy).toHaveBeenCalled();
-      });
-    });
-
-    describe('custom palette', () => {
-      beforeEach(() => {
-        paletteSpy = jest.spyOn(themeUtils, 'colorFromDefaultPalette');
-
-        createShallowWrapper({
-          props: {
-            customPalette: ['#FFFHHH', '#FFFJJJ', '#FFFIII', '#FFFKKK'],
-          },
-        });
-      });
-
-      it('does not call colorFromDefaultPalette', () => {
-        expect(paletteSpy).not.toHaveBeenCalled();
-      });
-
-      it('matches the snapshot', () => {
-        const chart = findChart();
-
-        expect(chart.props('options')).toMatchSnapshot();
-      });
-    });
-  });
-
-  describe('height', () => {
-    expectHeightAutoClasses({
-      createComponent: (props) => createShallowWrapper({ props }),
-      findContainer: () => wrapper,
-      findChart,
-    });
-  });
-});

package/src/components/charts/stacked_column/stacked_column.stories.js

@@ -1,130 +0,0 @@
-import { GlStackedColumnChart } from '../../../charts';
-import {
-  mockDefaultStackedLineData,
-  mockDefaultStackedBarData,
-  mockSecondaryData,
-} from '../../../utils/charts/mock_data';
-import { toolbox } from '../../../utils/charts/story_config';
-import { columnOptions } from '../../../utils/constants';
-import {
-  DATA_VIZ_ORANGE_600,
-  DATA_VIZ_AQUA_500,
-  DATA_VIZ_GREEN_600,
-  DATA_VIZ_MAGENTA_500,
-} from '../../../tokens/build/js/tokens';
-import readme from './stacked_column.md';
-
-const template = `
-  <gl-stacked-column-chart
-    :bars="bars"
-    :lines="lines"
-    :option="option"
-    :presentation="presentation"
-    :group-by="groupBy"
-    :x-axis-type="xAxisType"
-    :x-axis-title="xAxisTitle"
-    :y-axis-title="yAxisTitle"
-    :secondary-data="secondaryData"
-    :secondary-data-title="secondaryDataTitle"
-    :height="height"
-    :custom-palette="customPalette"
-  />
-`;
-
-const mockSecondaryDataTitle = 'Merges';
-
-const generateProps = ({
-  bars = mockDefaultStackedBarData,
-  lines = [],
-  option = {},
-  groupBy = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
-  xAxisType = 'category',
-  xAxisTitle = 'January - December 2018',
-  yAxisTitle = 'Commits',
-  presentation = columnOptions.stacked,
-  secondaryData = [],
-  secondaryDataTitle = '',
-  height = null,
-  customPalette,
-} = {}) => ({
-  bars,
-  lines,
-  option,
-  presentation,
-  groupBy,
-  xAxisType,
-  xAxisTitle,
-  yAxisTitle,
-  secondaryDataTitle,
-  secondaryData,
-  height,
-  customPalette,
-});
-
-const Template = (args, { argTypes }) => ({
-  components: { GlStackedColumnChart },
-  props: Object.keys(argTypes),
-  template,
-});
-
-export const Default = Template.bind({});
-Default.args = generateProps();
-
-export const Tiled = Template.bind({});
-Tiled.args = generateProps({ presentation: columnOptions.tiled });
-
-export const StackedWithLineData = Template.bind({});
-StackedWithLineData.args = generateProps({ lines: mockDefaultStackedLineData });
-
-export const TiledWithLineData = Template.bind({});
-TiledWithLineData.args = generateProps({
-  presentation: columnOptions.tiled,
-  lines: mockDefaultStackedLineData,
-});
-
-export const WithZoomAndScroll = Template.bind({});
-WithZoomAndScroll.args = generateProps({
-  option: {
-    dataZoom: [
-      {
-        startValue: 1,
-      },
-    ],
-  },
-});
-
-export const WithToolbox = Template.bind({});
-WithToolbox.args = generateProps({
-  option: {
-    toolbox,
-  },
-});
-
-export const SecondaryYAxis = Template.bind({});
-SecondaryYAxis.args = generateProps({
-  secondaryData: mockSecondaryData,
-  secondaryDataTitle: mockSecondaryDataTitle,
-});
-
-export const SecondaryYAxisLine = Template.bind({});
-SecondaryYAxisLine.args = generateProps({
-  secondaryData: [{ ...mockSecondaryData[0], type: 'line' }],
-  secondaryDataTitle: mockSecondaryDataTitle,
-});
-
-export const WithCustomColorPalette = Template.bind({});
-WithCustomColorPalette.args = generateProps({
-  customPalette: [DATA_VIZ_ORANGE_600, DATA_VIZ_AQUA_500, DATA_VIZ_GREEN_600, DATA_VIZ_MAGENTA_500],
-});
-
-export default {
-  title: 'charts/stacked-column-chart',
-  component: GlStackedColumnChart,
-  parameters: {
-    docs: {
-      description: {
-        component: readme,
-      },
-    },
-  },
-};

package/src/components/charts/tooltip/tooltip.spec.js

@@ -1,282 +0,0 @@
-import { nextTick } from 'vue';
-import { shallowMount } from '@vue/test-utils';
-import { createMockChartInstance } from '~helpers/chart_stubs';
-import GlPopover from '../../base/popover/popover.vue';
-import { popoverPlacements } from '../../../utils/constants';
-import { waitForAnimationFrame } from '../../../utils/test_utils';
-import TooltipDefaultFormat from '../../shared_components/charts/tooltip_default_format.vue';
-
-import ChartTooltip from './tooltip.vue';
-
-let mockChartInstance;
-
-jest.mock('echarts', () => ({
-  getInstanceByDom: () => mockChartInstance,
-}));
-
-describe('ChartTooltip', () => {
-  let wrapper;
-  let mockContainPixel;
-
-  const findPopover = () => wrapper.findComponent(GlPopover);
-  const findTooltipDefaultFormat = () => wrapper.findComponent(TooltipDefaultFormat);
-  const findPopoverTarget = () => wrapper.find(`#${findPopover().attributes('target')}`);
-  const getPopoverTargetStyle = (name) => findPopoverTarget().element.style.getPropertyValue(name);
-
-  const getMouseHandler = () => mockChartInstance.getZr().on.mock.calls[0][1];
-  const triggerMouseHandler = async (event) => {
-    getMouseHandler()({ event });
-    await waitForAnimationFrame();
-  };
-
-  const createWrapper = (props = {}, options) => {
-    mockChartInstance = {
-      ...createMockChartInstance(),
-      containPixel: mockContainPixel,
-    };
-
-    wrapper = shallowMount(ChartTooltip, {
-      propsData: {
-        chart: mockChartInstance,
-        ...props,
-      },
-      ...options,
-    });
-  };
-
-  beforeEach(() => {
-    mockContainPixel = jest.fn();
-  });
-
-  it('sets target as container instead of a trigger', () => {
-    createWrapper();
-
-    expect(findPopover().props('triggers')).toBe('');
-    expect(findPopover().props('container')).toEqual(findPopover().props('target'));
-
-    expect(findPopoverTarget().exists()).toBe(true);
-  });
-
-  it('is right-positioned by default', () => {
-    createWrapper();
-
-    expect(findPopover().props('placement')).toBe(popoverPlacements.right);
-  });
-
-  it('applies placement if any', () => {
-    createWrapper({ placement: popoverPlacements.bottom });
-
-    expect(findPopover().props('placement')).toBe(popoverPlacements.bottom);
-  });
-
-  it('applies initial position and updates it', async () => {
-    createWrapper({ show: true, left: '0', top: '50%' });
-
-    expect(findPopover().attributes('show')).toBe('true');
-    expect(getPopoverTargetStyle('left')).toBe('0px');
-    expect(getPopoverTargetStyle('top')).toBe('50%');
-
-    wrapper.setProps({ left: '100px', top: '200px' });
-
-    await waitForAnimationFrame();
-
-    expect(findPopover().attributes('show')).toBe('true');
-    expect(getPopoverTargetStyle('left')).toBe('100px');
-    expect(getPopoverTargetStyle('top')).toBe('200px');
-  });
-
-  it('reacts to `mousemove` and `mouseout` in chart dom', () => {
-    createWrapper();
-
-    const zr = mockChartInstance.getZr();
-    const handler = getMouseHandler();
-
-    expect(zr.on).toHaveBeenCalledWith('mousemove', handler);
-    expect(zr.on).toHaveBeenCalledWith('mouseout', handler);
-  });
-
-  it('tooltip target has default offset', () => {
-    createWrapper();
-
-    expect(getPopoverTargetStyle('margin-top')).toBe('-10px');
-    expect(getPopoverTargetStyle('height')).toBe('20px');
-
-    expect(getPopoverTargetStyle('margin-left')).toBe('-2px');
-    expect(getPopoverTargetStyle('width')).toBe('4px');
-  });
-
-  it('tooltip target defines offsets', () => {
-    const xOffset = 7;
-    const yOffset = 12;
-
-    createWrapper({
-      xOffset,
-      yOffset,
-    });
-
-    expect(getPopoverTargetStyle('margin-top')).toBe('-12px');
-    expect(getPopoverTargetStyle('height')).toBe('24px');
-
-    expect(getPopoverTargetStyle('margin-left')).toBe('-7px');
-    expect(getPopoverTargetStyle('width')).toBe('14px');
-  });
-
-  describe('when setting a `show` value', () => {
-    it('applies initial `show` value and updates it', async () => {
-      createWrapper({ show: true });
-
-      expect(findPopover().attributes('show')).toBe('true');
-
-      wrapper.setProps({ show: false });
-      await waitForAnimationFrame();
-
-      expect(findPopover().attributes('show')).toBe(undefined);
-    });
-  });
-
-  describe('when not setting a `show` value', () => {
-    describe('with no position defined', () => {
-      beforeEach(() => {
-        createWrapper();
-      });
-
-      it('when mouse moves outside of chart', async () => {
-        mockContainPixel.mockReturnValueOnce(false);
-
-        await triggerMouseHandler({ zrX: 1, zrY: 2.3 });
-
-        expect(mockContainPixel).toHaveBeenCalledWith('grid', [1, 2]);
-
-        expect(findPopover().attributes('show')).toBe(undefined);
-      });
-
-      it('when mouse moves inside chart', async () => {
-        mockContainPixel.mockReturnValueOnce(true);
-
-        await triggerMouseHandler({ zrX: 3, zrY: 4.3 });
-
-        expect(mockContainPixel).toHaveBeenCalledWith('grid', [3, 4]);
-
-        expect(findPopover().attributes('show')).toBe('true');
-        expect(getPopoverTargetStyle('left')).toBe('3px');
-        expect(getPopoverTargetStyle('top')).toBe('4px');
-      });
-    });
-
-    describe('with position defined', () => {
-      beforeEach(() => {
-        createWrapper({ right: '50px', bottom: '100px' });
-      });
-
-      it('when mouse moves outside of chart', async () => {
-        mockContainPixel.mockReturnValueOnce(false);
-        await triggerMouseHandler({ zrX: 1, zrY: 2.3 });
-
-        expect(mockContainPixel).toHaveBeenCalledWith('grid', [1, 2]);
-        expect(findPopover().attributes('show')).toBe(undefined);
-      });
-
-      it('when mouse moves inside chart', async () => {
-        mockContainPixel.mockReturnValueOnce(true);
-        await triggerMouseHandler({ zrX: 3, zrY: 4.3 });
-
-        expect(mockContainPixel).toHaveBeenCalledWith('grid', [3, 4]);
-        expect(findPopover().attributes('show')).toBe('true');
-
-        expect(getPopoverTargetStyle('left')).toBe('');
-        expect(getPopoverTargetStyle('top')).toBe('');
-        expect(getPopoverTargetStyle('right')).toBe('50px');
-        expect(getPopoverTargetStyle('bottom')).toBe('100px');
-      });
-    });
-  });
-
-  describe('is customized via slots', () => {
-    const triggerFormatter = (params) => {
-      const { formatter } = mockChartInstance.setOption.mock.calls[0][0].xAxis.axisPointer.label;
-      formatter(params);
-    };
-
-    describe('formats tooltip', () => {
-      beforeEach(() => {
-        createWrapper(
-          {
-            useDefaultTooltipFormatter: true,
-          },
-          {
-            stubs: {
-              GlPopover: {
-                template: `<div>
-                  <slot name="title"></slot>
-                    <slot></slot>
-                  </div>`,
-              },
-            },
-          }
-        );
-      });
-
-      it('sets tooltip formatter function', () => {
-        expect(mockChartInstance.setOption).toHaveBeenCalledWith({
-          xAxis: {
-            axisPointer: {
-              label: {
-                formatter: expect.any(Function),
-              },
-              show: true,
-            },
-          },
-        });
-      });
-
-      it('formats tooltip', async () => {
-        expect(findTooltipDefaultFormat().props('tooltipContent')).toEqual({});
-
-        triggerFormatter({
-          seriesData: [
-            {
-              seriesName: 'Series 1',
-              value: ['Value', 1],
-              color: '#aaa',
-            },
-            {
-              seriesName: 'Series 2',
-              value: ['Value', 2],
-              color: '#bbb',
-            },
-          ],
-        });
-        await nextTick();
-
-        expect(findPopover().text()).toBe('Value');
-        expect(findTooltipDefaultFormat().props('tooltipContent')).toEqual({
-          'Series 1': { color: '#aaa', value: 1 },
-          'Series 2': { color: '#bbb', value: 2 },
-        });
-      });
-
-      it('formats tooltip with axis names', async () => {
-        mockChartInstance.getOption.mockReturnValueOnce({
-          xAxis: [{ name: 'Time' }],
-          yAxis: [{ name: 'Amount' }],
-        });
-
-        triggerFormatter({
-          seriesData: [
-            {
-              seriesName: 'Series 1',
-              value: ['Value', 1],
-              color: '#aaa',
-            },
-          ],
-        });
-        await nextTick();
-
-        expect(findPopover().text()).toBe('Value (Time)');
-        expect(findTooltipDefaultFormat().props('tooltipContent')).toEqual({
-          Amount: { color: '', value: 1 },
-        });
-      });
-    });
-  });
-});

package/src/components/charts/tooltip/tooltip.stories.js

@@ -1,90 +0,0 @@
-import { GlChart, GlChartTooltip, GlChartSeriesLabel } from '../../../charts';
-import {
-  SERIES_NAME,
-  SERIES_NAME_LONG,
-  SERIES_NAME_LONG_WITHOUT_SPACES,
-} from '../../../utils/stories_constants';
-import readme from './tooltip.md';
-
-const components = {
-  GlChart,
-  GlChartTooltip,
-  GlChartSeriesLabel,
-};
-
-const baseStoryOptions = {
-  props: {},
-  components,
-  data() {
-    return {
-      chart: null,
-      options: {},
-      showTooltip: true,
-      top: '50%',
-      left: '0px',
-    };
-  },
-  methods: {
-    onCreated(chart) {
-      this.chart = chart;
-    },
-  },
-};
-
-const getStoryOptions = (tooltipContent) => ({
-  ...baseStoryOptions,
-  template: `<div class="position-relative">
-    <gl-chart
-      :options="options"
-      :height="100"
-      @created="onCreated"
-    />
-    <gl-chart-tooltip
-      v-if="chart"
-      :chart="chart"
-      :show="showTooltip"
-      :top="top"
-      :left="left"
-    >
-      <template #title>
-        <div>
-          Example Title
-        </div>
-      </template>
-      ${tooltipContent}
-    </gl-chart-tooltip>
-</div>`,
-});
-
-export const Default = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  ...getStoryOptions('Example Content'),
-});
-
-export const WithLongSeriesLabel = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  ...getStoryOptions(`
-        <gl-chart-series-label color="#1F78D1">${SERIES_NAME[SERIES_NAME_LONG]}</gl-chart-series-label>
-      `),
-});
-
-export const WithLongSeriesLabelWithNoSpaces = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  ...getStoryOptions(`
-        <gl-chart-series-label color="#1F78D1">${SERIES_NAME[SERIES_NAME_LONG_WITHOUT_SPACES]}</gl-chart-series-label>
-      `),
-});
-
-export default {
-  title: 'charts/chart-tooltip',
-  component: GlChartTooltip,
-  parameters: {
-    bootstrapComponent: 'b-popover',
-    controls: { disable: true },
-    docs: {
-      description: {
-        component: readme,
-      },
-    },
-  },
-};