@gitlab/ui 80.13.1 → 80.13.2

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

@@ -1,278 +0,0 @@
-import { nextTick } from 'vue';
-import { shallowMount } from '@vue/test-utils';
-
-import { LEGEND_LAYOUT_INLINE, LEGEND_LAYOUT_TABLE } from '~/utils/charts/constants';
-import {
-  createMockChartInstance,
-  ChartTooltipStub,
-  chartTooltipStubData,
-} from '~helpers/chart_stubs';
-import { expectHeightAutoClasses } from '~helpers/chart_height';
-
-import Chart from '../chart/chart.vue';
-import ChartLegend from '../legend/legend.vue';
-
-import LineChart from './line.vue';
-
-let mockChartInstance;
-
-jest.mock('echarts', () => ({
-  getInstanceByDom: () => mockChartInstance,
-}));
-
-describe('line component', () => {
-  let wrapper;
-  let option;
-
-  const findChart = () => wrapper.findComponent(Chart);
-  const findLegend = () => wrapper.findComponent(ChartLegend);
-  const findDataTooltip = () => wrapper.findComponent({ ref: 'dataTooltip' });
-  const findAnnotationsTooltip = () => wrapper.findComponent({ ref: 'annotationsTooltip' });
-
-  const emitChartCreated = () => findChart().vm.$emit('created', mockChartInstance);
-
-  const createShallowWrapper = ({ props = {}, ...options } = {}) => {
-    wrapper = shallowMount(LineChart, {
-      propsData: { option, data: [], ...props },
-      stubs: {
-        'chart-tooltip': ChartTooltipStub,
-      },
-      ...options,
-    });
-    emitChartCreated();
-  };
-
-  beforeEach(() => {
-    mockChartInstance = createMockChartInstance();
-  });
-
-  it('emits `created`, with the chart instance', async () => {
-    createShallowWrapper();
-
-    await nextTick();
-
-    expect(wrapper.emitted('created').length).toBe(1);
-    expect(wrapper.emitted('created')[0][0]).toBe(mockChartInstance);
-  });
-
-  describe('Annotations tooltips', () => {
-    it('are hidden by default', async () => {
-      createShallowWrapper();
-
-      await nextTick();
-
-      expect(findAnnotationsTooltip().exists()).toBe(false);
-    });
-
-    it('are displayed if passed via annotations props', async () => {
-      createShallowWrapper({
-        props: {
-          annotations: [
-            {
-              min: '',
-              max: '',
-            },
-          ],
-        },
-      });
-
-      await nextTick();
-
-      expect(findAnnotationsTooltip().exists()).toBe(true);
-    });
-
-    it('are displayed if passed via option props', async () => {
-      createShallowWrapper({
-        props: {
-          option: {
-            series: [
-              {
-                name: 'annotations',
-                markPoint: {
-                  data: [
-                    {
-                      xAxis: 10,
-                    },
-                  ],
-                },
-                data: [],
-              },
-            ],
-          },
-        },
-      });
-
-      await nextTick();
-
-      expect(findAnnotationsTooltip().exists()).toBe(true);
-    });
-
-    it('has a default title and content when hovered', async () => {
-      const params = {
-        name: 'annotations',
-        componentType: 'markPoint',
-        data: {
-          xAxis: '2018-01-25T01:00:00.000Z',
-          tooltipData: { content: 'Scranton strangler was caught.' },
-        },
-        event: {
-          event: {
-            zrX: 100,
-            zrY: 100,
-          },
-        },
-      };
-
-      createShallowWrapper({
-        props: {
-          annotations: [
-            {
-              min: '',
-              max: '',
-            },
-          ],
-        },
-      });
-
-      wrapper.vm.onChartDataPointMouseOver(params);
-
-      await nextTick();
-
-      expect(findAnnotationsTooltip().html()).toContain(params.data.xAxis);
-      expect(findAnnotationsTooltip().html()).toContain(params.data.tooltipData.content);
-    });
-  });
-
-  describe('data tooltip', () => {
-    it('is initialized', async () => {
-      createShallowWrapper();
-
-      await nextTick();
-
-      expect(findDataTooltip().props()).toMatchObject({
-        useDefaultTooltipFormatter: true,
-        chart: mockChartInstance,
-      });
-    });
-
-    describe('is customized via slots', () => {
-      const { params, title, content } = chartTooltipStubData;
-
-      it('customizes tooltip value', async () => {
-        const tooltipValueSlot = jest.fn().mockReturnValue('Value');
-
-        createShallowWrapper({
-          scopedSlots: {
-            'tooltip-value': tooltipValueSlot,
-          },
-        });
-        await nextTick();
-
-        expect(tooltipValueSlot).toHaveBeenCalledWith({ value: 9 });
-        expect(findDataTooltip().text()).toBe('Value');
-      });
-
-      it('customizes title', async () => {
-        const tooltipTitleSlot = jest.fn().mockReturnValue('Title');
-
-        createShallowWrapper({
-          scopedSlots: {
-            'tooltip-title': tooltipTitleSlot,
-          },
-        });
-        await nextTick();
-
-        expect(tooltipTitleSlot).toHaveBeenCalledWith({
-          params,
-          title,
-        });
-        expect(findDataTooltip().text()).toBe('Title');
-      });
-
-      it('customizes content', async () => {
-        const tooltipContentSlot = jest.fn().mockReturnValue('Title');
-
-        createShallowWrapper({
-          scopedSlots: {
-            'tooltip-content': tooltipContentSlot,
-          },
-        });
-        await nextTick();
-
-        expect(tooltipContentSlot).toHaveBeenCalledWith({
-          params,
-          content,
-        });
-        expect(findDataTooltip().text()).toBe('Title');
-      });
-    });
-
-    it('is customized via formatting function', async () => {
-      createShallowWrapper({
-        props: {
-          formatTooltipText: jest.fn(),
-        },
-      });
-
-      await nextTick();
-
-      expect(findDataTooltip().props()).toMatchObject({
-        useDefaultTooltipFormatter: false,
-        chart: mockChartInstance,
-      });
-    });
-  });
-
-  describe('legend', () => {
-    it('is inline by default', async () => {
-      createShallowWrapper();
-
-      await nextTick();
-
-      expect(findLegend().props('layout')).toBe(LEGEND_LAYOUT_INLINE);
-    });
-
-    it('is inline if correct prop value is set', async () => {
-      createShallowWrapper({
-        props: {
-          legendLayout: LEGEND_LAYOUT_INLINE,
-        },
-      });
-
-      await nextTick();
-
-      expect(findLegend().props('layout')).toBe(LEGEND_LAYOUT_INLINE);
-    });
-
-    it('is tabular if correct prop value is set', async () => {
-      createShallowWrapper({
-        props: {
-          legendLayout: LEGEND_LAYOUT_TABLE,
-        },
-      });
-
-      await nextTick();
-
-      expect(findLegend().props('layout')).toBe(LEGEND_LAYOUT_TABLE);
-    });
-    it('can be hidden', async () => {
-      createShallowWrapper({
-        props: {
-          showLegend: false,
-        },
-      });
-
-      await nextTick();
-
-      expect(findLegend().exists()).toBe(false);
-    });
-  });
-
-  describe('height', () => {
-    expectHeightAutoClasses({
-      createComponent: (props) => createShallowWrapper({ props }),
-      findContainer: () => wrapper,
-      findChart,
-    });
-  });
-});

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

@@ -1,238 +0,0 @@
-import { GlLineChart } from '../../../charts';
-import { mockAnnotationsSeries, mockAnnotationsConfigs } from '../../../utils/charts/mock_data';
-import { toolbox } from '../../../utils/charts/story_config';
-import { timeSeriesDateFormatter } from '../../../utils/charts/utils';
-import { generateTimeSeries } from '../../../utils/data_utils';
-import { disableControls } from '../../../utils/stories_utils';
-import readme from './line.md';
-
-const components = {
-  GlLineChart,
-};
-const defaultData = [
-  {
-    name: 'Requested',
-    data: [
-      ['Mon', 1184],
-      ['Tue', 1346],
-      ['Wed', 1035],
-      ['Thu', 1226],
-      ['Fri', 1421],
-      ['Sat', 1347],
-      ['Sun', 1035],
-    ],
-  },
-  {
-    name: 'Actual',
-    data: [
-      ['Mon', 1509],
-      ['Tue', 1275],
-      ['Wed', 1187],
-      ['Thu', 1287],
-      ['Fri', 1098],
-      ['Sat', 1457],
-      ['Sun', 1452],
-    ],
-  },
-  {
-    name: 'Predicted',
-    data: [
-      ['Mon', 1041],
-      ['Tue', 1468],
-      ['Wed', 1273],
-      ['Thu', 1503],
-      ['Fri', 1209],
-      ['Sat', 1416],
-      ['Sun', 1213],
-    ],
-  },
-];
-
-const defaultOptions = {
-  animation: false,
-  xAxis: {
-    name: 'Time',
-    type: 'category',
-  },
-};
-
-const template = (content = '') => `<gl-line-chart
-  :data="data"
-  :option="option"
-  :thresholds="thresholds"
-  :annotations="annotations"
-  :includeLegendAvgMax="includeLegendAvgMax"
-  :showLegend="showLegend"
-  :height="height"
-  >
-    ${content}
-  </gl-line-chart>`;
-
-const generateProps = ({
-  data = defaultData,
-  option = defaultOptions,
-  thresholds = [],
-  annotations = [],
-  includeLegendAvgMax = true,
-  showLegend = true,
-  height = null,
-} = {}) => ({
-  showLegend,
-  includeLegendAvgMax,
-  option,
-  thresholds,
-  annotations,
-  data,
-  height,
-});
-
-const Template = (_args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components,
-  template: template(),
-});
-
-export const Default = Template.bind({});
-Default.args = generateProps();
-
-export const WithThreshold = Template.bind({});
-WithThreshold.args = generateProps({
-  thresholds: [{ threshold: 1350, operator: '>' }],
-});
-
-export const WithAnnotationsAsProps = Template.bind({});
-WithAnnotationsAsProps.storyName = 'with annotations as props (recommended)';
-WithAnnotationsAsProps.args = generateProps({
-  ...mockAnnotationsConfigs,
-  data: [
-    {
-      name: 'Time Series',
-      data: generateTimeSeries(),
-    },
-  ],
-  option: {
-    animation: false,
-    xAxis: {
-      type: 'time',
-      name: 'Time',
-      axisLabel: {
-        formatter: timeSeriesDateFormatter,
-      },
-    },
-  },
-});
-
-export const WithAnnotationsAsOptionSeries = Template.bind({});
-WithAnnotationsAsOptionSeries.args = generateProps({
-  data: [
-    {
-      name: 'Time Series',
-      data: generateTimeSeries(),
-    },
-  ],
-  option: {
-    ...mockAnnotationsSeries,
-    animation: false,
-    xAxis: {
-      type: 'time',
-      name: 'Time',
-      axisLabel: {
-        formatter: timeSeriesDateFormatter,
-      },
-    },
-  },
-});
-
-export const WithZoomAndScroll = Template.bind({});
-WithZoomAndScroll.args = generateProps({
-  data: [
-    {
-      name: 'Time Series',
-      data: generateTimeSeries(),
-    },
-  ],
-  option: {
-    animation: false,
-    xAxis: {
-      type: 'time',
-      name: 'Time',
-      axisLabel: {
-        formatter: timeSeriesDateFormatter,
-      },
-    },
-    dataZoom: [
-      {
-        type: 'slider',
-        startValue: '2018-03-01T00:00:00.000',
-      },
-    ],
-  },
-});
-
-export const WithToolbox = Template.bind({});
-WithToolbox.args = generateProps({
-  option: {
-    animation: false,
-    xAxis: {
-      name: 'Time',
-      type: 'category',
-    },
-    toolbox,
-  },
-});
-
-export const NoLegend = Template.bind({});
-NoLegend.args = generateProps({
-  data: [
-    {
-      name: 'Time Series',
-      data: generateTimeSeries(),
-    },
-  ],
-  option: {
-    animation: false,
-    xAxis: {
-      type: 'time',
-      name: 'Time',
-      axisLabel: {
-        formatter: timeSeriesDateFormatter,
-      },
-    },
-  },
-  showLegend: false,
-});
-
-export const WithCustomTooltip = (_args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components,
-  template: template(`
-    <template #tooltip-title="{ params }">{{params && params.value}}</template>
-    <template #tooltip-content="{ params }">
-      <div v-for="p in params && params.seriesData">{{p.seriesName}}: {{p.value[1]}}</div>
-    </template>
-  `),
-});
-WithCustomTooltip.args = generateProps();
-WithCustomTooltip.tags = ['skip-visual-test'];
-
-export default {
-  title: 'charts/line-chart',
-  component: GlLineChart,
-  parameters: {
-    docs: {
-      description: {
-        component: readme,
-      },
-    },
-  },
-  argTypes: {
-    ...disableControls([
-      'formatTooltipText',
-      'legendAverageText',
-      'legendMaxText',
-      'legendMinText',
-      'legendCurrentText',
-      'legendLayout',
-    ]),
-  },
-};

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

@@ -1,78 +0,0 @@
-import { GlChartSeriesLabel } from '../../../charts';
-import { colorPaletteDefault } from '../../../utils/charts/theme';
-import {
-  SERIES_NAME,
-  SERIES_NAME_SHORT,
-  SERIES_NAME_LONG,
-  SERIES_NAME_LONG_WITHOUT_SPACES,
-} from '../../../utils/stories_constants';
-import readme from './series_label.md';
-
-const generateProps = ({
-  color = colorPaletteDefault[0],
-  type = 'solid',
-  text = SERIES_NAME[SERIES_NAME_SHORT],
-} = {}) => ({
-  color,
-  type,
-  text,
-});
-
-const template = `
-  <gl-chart-series-label
-    :color="color"
-    :type="type"
-  >
-    {{ text }}
-  </gl-chart-series-label>`;
-
-const Template = (_args, { argTypes }) => ({
-  components: {
-    GlChartSeriesLabel,
-  },
-  props: Object.keys(argTypes),
-  template,
-});
-
-export const Default = Template.bind({});
-Default.args = generateProps({ color: '' });
-
-export const WithLongName = Template.bind({});
-WithLongName.args = generateProps({ color: '', text: SERIES_NAME[SERIES_NAME_LONG] });
-
-export const WithLongNameWithNoSpaces = Template.bind({});
-WithLongNameWithNoSpaces.args = generateProps({
-  color: '',
-  text: SERIES_NAME[SERIES_NAME_LONG_WITHOUT_SPACES],
-});
-
-export const WithColorDashed = Template.bind({});
-WithColorDashed.args = generateProps({ type: 'dashed', text: SERIES_NAME[SERIES_NAME_SHORT] });
-
-export const WithColor = Template.bind({});
-WithColor.args = generateProps({ text: SERIES_NAME[SERIES_NAME_SHORT] });
-
-export const WithColorAndLongName = Template.bind({});
-WithColorAndLongName.args = generateProps({ text: SERIES_NAME[SERIES_NAME_LONG] });
-
-export const WithColorAndLongNameWithNoSpaces = Template.bind({});
-WithColorAndLongNameWithNoSpaces.args = generateProps({
-  text: SERIES_NAME[SERIES_NAME_LONG_WITHOUT_SPACES],
-});
-
-export default {
-  title: 'charts/chart-series-label',
-  component: GlChartSeriesLabel,
-  parameters: {
-    docs: {
-      description: {
-        component: readme,
-      },
-    },
-  },
-  argTypes: {
-    color: {
-      control: 'color',
-    },
-  },
-};