@gitlab/ui 80.13.1 → 80.13.2

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

@@ -1,72 +0,0 @@
-import { GlBarChart } from '../../../charts';
-import { makeContainer } from '../../../utils/story_decorators/container';
-import readme from './bar.md';
-
-const Template = (args, { argTypes }) => ({
-  components: { GlBarChart },
-  props: Object.keys(argTypes),
-  template: `
-    <gl-bar-chart
-      :data="data"
-      :option="option"
-      :y-axis-title="yAxisTitle"
-      :x-axis-title="xAxisTitle"
-      :x-axis-type="xAxisType"
-      :height="height"
-    />
-  `,
-});
-
-const mockData = {
-  Office: [
-    [100, 'Jim'],
-    [210, 'Dwight'],
-    [300, 'Pam'],
-    [340, 'Ryan'],
-    [130, 'Kelly'],
-    [50, 'David'],
-    [90, 'Mike'],
-    [10, 'Andy'],
-    [50, 'Stanley'],
-    [30, 'Erin'],
-  ],
-};
-
-const generateProps = ({
-  data = mockData,
-  option = {},
-  xAxisTitle = 'Pushes per day',
-  yAxisTitle = 'User',
-  xAxisType = 'value',
-  height = null,
-} = {}) => ({
-  data,
-  option,
-  xAxisTitle,
-  yAxisTitle,
-  xAxisType,
-  height,
-});
-
-export const Default = Template.bind({});
-Default.args = generateProps();
-
-export const AutoHeight = Template.bind({});
-Object.assign(AutoHeight, {
-  args: generateProps({
-    height: 'auto',
-  }),
-  decorators: [makeContainer({ height: '600px' })],
-});
-
-export default {
-  title: 'charts/bar-chart',
-  component: GlBarChart,
-  parameters: {
-    docs: {
-      description: {
-        component: readme,
-      },
-    },
-  },
-};

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

@@ -1,167 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-import * as echarts from 'echarts';
-import { toolboxHeight } from '~/utils/charts/config';
-import { createTheme } from '~/utils/charts/theme';
-import { waitForAnimationFrame } from '~/utils/test_utils';
-import { useMockResizeObserver } from '~helpers/mock_dom_observer';
-import Chart from './chart.vue';
-
-const defaultHeight = 400;
-
-jest.mock('echarts', () => ({
-  init: jest.fn(() => ({
-    setOption: jest.fn(),
-    resize: jest.fn(),
-    on: jest.fn(),
-    off: jest.fn(),
-  })),
-  registerTheme: jest.fn(),
-}));
-
-describe('chart component', () => {
-  const options = {};
-  const mountArgs = [Chart, { propsData: { options: {} } }];
-  const themeName = 'gitlab';
-  let wrapper;
-
-  const { trigger: triggerResize } = useMockResizeObserver();
-
-  it('initializes chart using $refs.chart', async () => {
-    wrapper = shallowMount(...mountArgs);
-    await wrapper.vm.$nextTick();
-
-    expect(echarts.init).toHaveBeenCalledWith(
-      wrapper.findComponent({ ref: 'chart' }).element,
-      themeName,
-      {
-        renderer: wrapper.props().renderer,
-        width: 300,
-        height: 400,
-      }
-    );
-  });
-
-  it('does not resize the chart when responsive = false', async () => {
-    wrapper = shallowMount(Chart, { propsData: { options: {}, responsive: false } });
-    await wrapper.vm.$nextTick();
-    // initial call when chart gets created
-    expect(wrapper.vm.chart.resize).toHaveBeenCalledTimes(1);
-
-    triggerResize(wrapper.element);
-    await waitForAnimationFrame();
-
-    expect(wrapper.vm.chart.resize).toHaveBeenCalledTimes(1);
-  });
-
-  it('resizes the chart only once per animation frame when responsive = true', async () => {
-    wrapper = shallowMount(...mountArgs);
-    await wrapper.vm.$nextTick();
-    expect(wrapper.vm.chart.resize).toHaveBeenCalledTimes(1);
-
-    triggerResize(wrapper.element);
-    triggerResize(wrapper.element);
-    await waitForAnimationFrame();
-
-    expect(wrapper.vm.chart.resize).toHaveBeenCalledTimes(2);
-  });
-
-  it('emits "created" after initializing chart', async () => {
-    wrapper = shallowMount(...mountArgs);
-    await wrapper.vm.$nextTick();
-    expect(wrapper.emitted('created')).toEqual([[wrapper.vm.chart]]);
-  });
-
-  it('uses GitLab theme', () => {
-    wrapper = shallowMount(...mountArgs);
-    const [firstRegisterThemeCall] = echarts.registerTheme.mock.calls;
-    expect(firstRegisterThemeCall[0]).toBe(themeName);
-    expect(JSON.stringify(firstRegisterThemeCall[1])).toEqual(JSON.stringify(createTheme()));
-  });
-
-  it('waits a tick before creating the chart', async () => {
-    wrapper = shallowMount(...mountArgs);
-
-    expect(wrapper.vm.chart).toBe(null);
-
-    await wrapper.vm.$nextTick();
-
-    expect(wrapper.vm.chart).toBeDefined();
-  });
-
-  describe('custom sizing', () => {
-    const width = 1234;
-    const height = 123;
-
-    it('sets chart to custom width and height if specified', async () => {
-      wrapper = shallowMount(Chart, { propsData: { options: {}, width, height } });
-
-      await wrapper.vm.$nextTick();
-
-      expect(wrapper.vm.chart.resize).toHaveBeenCalledWith({ width, height });
-    });
-
-    it('sets chart to custom width if specified', async () => {
-      wrapper = shallowMount(Chart, { propsData: { options: {}, width } });
-
-      await wrapper.vm.$nextTick();
-
-      expect(wrapper.vm.chart.resize).toHaveBeenCalledWith({ width, height: defaultHeight });
-    });
-
-    it('sets chart to custom height if specified', async () => {
-      wrapper = shallowMount(Chart, { propsData: { options: {}, height } });
-
-      await wrapper.vm.$nextTick();
-
-      expect(wrapper.vm.chart.resize).toHaveBeenCalledWith({ width: 'auto', height });
-    });
-  });
-
-  describe('methods', () => {
-    beforeEach(() => {
-      wrapper = shallowMount(...mountArgs);
-    });
-
-    describe('draw method', () => {
-      it('sets chart options', () => {
-        expect(wrapper.vm.chart.setOption).toHaveBeenCalledTimes(1);
-
-        wrapper.vm.draw();
-
-        expect(wrapper.vm.chart.setOption).toHaveBeenCalledTimes(2);
-        expect(wrapper.vm.chart.setOption).toHaveBeenCalledWith(options);
-      });
-
-      it('emits chart updated after drawing', () => {
-        wrapper.vm.draw();
-        const { chart } = wrapper.vm;
-
-        expect(wrapper.emitted('updated')).toEqual([[chart], [chart]]);
-      });
-    });
-
-    describe('setChartSize method', () => {
-      it('sets chart size', () => {
-        wrapper.vm.setChartSize();
-
-        expect(wrapper.vm.chart.resize).toHaveBeenCalledWith({
-          height: defaultHeight,
-          width: 'auto',
-        });
-      });
-    });
-  });
-
-  describe('with toolbox in options', () => {
-    it('increases grid top by `toolboxHeight`', async () => {
-      const optionsWithToolbox = { toolbox: {} };
-      wrapper = shallowMount(Chart, { propsData: { options: optionsWithToolbox } });
-      await wrapper.vm.$nextTick();
-
-      expect(wrapper.vm.chart.setOption).toHaveBeenCalledWith({
-        ...optionsWithToolbox,
-        grid: { top: toolboxHeight },
-      });
-    });
-  });
-});

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

@@ -1,111 +0,0 @@
-import GlTabs from '../../base/tabs/tabs/tabs.vue';
-import GlTab from '../../base/tabs/tab/tab.vue';
-import GlChart from './chart.vue';
-import readme from './chart.md';
-
-const Template = (args, { argTypes = {} }) => ({
-  components: {
-    GlChart,
-    GlTabs,
-    GlTab,
-  },
-  props: Object.keys(argTypes),
-  data() {
-    return {
-      options: {
-        xAxis: {
-          type: 'category',
-          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
-        },
-        yAxis: {
-          type: 'value',
-        },
-        series: [
-          {
-            data: [820, 932, 901, 934, 1290, 1330, 1320],
-            type: 'bar',
-          },
-        ],
-      },
-    };
-  },
-  ...args,
-});
-
-export const Default = Template.bind(
-  {},
-  {
-    template: `
-      <gl-chart
-        :options="options"
-      />
-      `,
-  }
-);
-
-export const Tab = Template.bind(
-  {},
-  {
-    template: `
-      <gl-tabs>
-        <gl-tab title="Chart">
-          <gl-chart :options="options" />
-        </gl-tab>
-      </gl-tabs>
-      `,
-  }
-);
-
-export const Connected = Template.bind(
-  {},
-  {
-    methods: {
-      optionsFromData(data) {
-        return {
-          xAxis: {
-            type: 'category',
-            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
-          },
-          yAxis: {
-            type: 'value',
-          },
-          axisPointer: {
-            show: true,
-          },
-          series: [
-            {
-              data,
-              type: 'bar',
-            },
-          ],
-        };
-      },
-    },
-    template: `
-      <div>
-        <gl-chart
-          group-id="connected-chart-unique-id"
-          :options="optionsFromData([820, 932, 901, 934, 1290, 1330, 1320])"
-        />
-        <gl-chart
-          group-id="connected-chart-unique-id"
-          :options="optionsFromData([540, 759, 140, 757, 675, 1500, 457])"
-        />
-      </div>
-      `,
-  }
-);
-Connected.tags = ['skip-visual-test'];
-
-export default {
-  title: 'charts/chart',
-  component: GlChart,
-  parameters: {
-    docs: {
-      description: {
-        component: readme,
-      },
-    },
-    controls: { disable: true },
-  },
-};

package/src/components/charts/column/__snapshots__/column_chart.spec.js.snap

@@ -1,323 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`column chart component mounted should correctly render the chart 1`] = `
-Object {
-  "grid": Object {
-    "bottom": 44,
-    "left": 64,
-    "right": 32,
-    "top": 16,
-  },
-  "legend": Object {
-    "show": false,
-  },
-  "series": Array [
-    Object {
-      "barMaxWidth": "50%",
-      "data": Array [
-        Array [
-          "Joe",
-          1220,
-        ],
-        Array [
-          "Sarah",
-          932,
-        ],
-        Array [
-          "Tom",
-          901,
-        ],
-        Array [
-          "Mary",
-          934,
-        ],
-        Array [
-          "Mike",
-          1290,
-        ],
-        Array [
-          "Ben",
-          1330,
-        ],
-        Array [
-          "Jane",
-          1320,
-        ],
-      ],
-      "emphasis": Object {
-        "itemStyle": Object {
-          "color": "rgba(97, 122, 226, 0.4)",
-        },
-      },
-      "itemStyle": Object {
-        "borderColor": "#617ae2",
-        "borderWidth": 1,
-        "color": "rgba(97, 122, 226, 0.2)",
-      },
-      "name": "Full",
-      "stack": "stacked",
-      "type": "bar",
-      "yAxisIndex": 0,
-    },
-  ],
-  "xAxis": Object {
-    "axisLabel": Object {
-      "margin": 20,
-      "verticalAlign": "bottom",
-    },
-    "axisLine": Object {
-      "show": false,
-    },
-    "axisPointer": Object {
-      "type": "none",
-    },
-    "boundaryGap": true,
-    "name": "x axis",
-    "nameLocation": "center",
-    "splitLine": Object {
-      "show": false,
-    },
-    "type": "category",
-  },
-  "yAxis": Object {
-    "axisLabel": Object {
-      "formatter": [Function],
-    },
-    "axisTick": Object {
-      "show": false,
-    },
-    "name": "y axis",
-    "nameGap": 50,
-    "nameLocation": "center",
-    "type": "value",
-  },
-}
-`;
-
-exports[`column chart component with line data provided should correctly render the chart 1`] = `
-Object {
-  "grid": Object {
-    "bottom": 44,
-    "left": 64,
-    "right": 32,
-    "top": 16,
-  },
-  "legend": Object {
-    "show": false,
-  },
-  "series": Array [
-    Object {
-      "data": Array [
-        Array [
-          "Joe",
-          1120,
-        ],
-        Array [
-          "Sarah",
-          732,
-        ],
-        Array [
-          "Tom",
-          501,
-        ],
-        Array [
-          "Mary",
-          634,
-        ],
-        Array [
-          "Mike",
-          290,
-        ],
-        Array [
-          "Ben",
-          130,
-        ],
-        Array [
-          "Jane",
-          120,
-        ],
-      ],
-      "itemStyle": Object {
-        "color": "#617ae2",
-      },
-      "lineStyle": Object {
-        "color": "#617ae2",
-      },
-      "name": "Median line",
-      "type": "line",
-      "yAxisIndex": 0,
-    },
-  ],
-  "xAxis": Object {
-    "axisLabel": Object {
-      "margin": 20,
-      "verticalAlign": "bottom",
-    },
-    "axisLine": Object {
-      "show": false,
-    },
-    "axisPointer": Object {
-      "type": "none",
-    },
-    "boundaryGap": true,
-    "name": "x axis",
-    "nameLocation": "center",
-    "splitLine": Object {
-      "show": false,
-    },
-    "type": "category",
-  },
-  "yAxis": Object {
-    "axisLabel": Object {
-      "formatter": [Function],
-    },
-    "axisTick": Object {
-      "show": false,
-    },
-    "name": "y axis",
-    "nameGap": 50,
-    "nameLocation": "center",
-    "type": "value",
-  },
-}
-`;
-
-exports[`column chart component with secondary axis data provided should correctly render the chart 1`] = `
-Object {
-  "grid": Object {
-    "bottom": 44,
-    "left": 64,
-    "right": 64,
-    "top": 16,
-  },
-  "legend": Object {
-    "show": false,
-  },
-  "series": Array [
-    Object {
-      "barMaxWidth": "50%",
-      "data": Array [
-        Array [
-          "Joe",
-          1220,
-        ],
-        Array [
-          "Sarah",
-          932,
-        ],
-        Array [
-          "Tom",
-          901,
-        ],
-        Array [
-          "Mary",
-          934,
-        ],
-        Array [
-          "Mike",
-          1290,
-        ],
-        Array [
-          "Ben",
-          1330,
-        ],
-        Array [
-          "Jane",
-          1320,
-        ],
-      ],
-      "emphasis": Object {
-        "itemStyle": Object {
-          "color": "rgba(97, 122, 226, 0.4)",
-        },
-      },
-      "itemStyle": Object {
-        "borderColor": "#617ae2",
-        "borderWidth": 1,
-        "color": "rgba(97, 122, 226, 0.2)",
-      },
-      "name": "Full",
-      "stack": "stacked",
-      "type": "bar",
-      "yAxisIndex": 0,
-    },
-    Object {
-      "barMaxWidth": "50%",
-      "data": Array [
-        13,
-        25,
-        38,
-        23,
-        27,
-        28,
-        29,
-        27,
-        1,
-        15,
-        65,
-        31,
-      ],
-      "emphasis": Object {
-        "itemStyle": Object {
-          "color": "rgba(177, 79, 24, 0.4)",
-        },
-      },
-      "itemStyle": Object {
-        "borderColor": "#b14f18",
-        "borderWidth": 1,
-        "color": "rgba(177, 79, 24, 0.2)",
-      },
-      "name": "Secondary 1",
-      "stack": "tiled",
-      "type": "bar",
-      "yAxisIndex": 1,
-    },
-  ],
-  "xAxis": Object {
-    "axisLabel": Object {
-      "margin": 20,
-      "verticalAlign": "bottom",
-    },
-    "axisLine": Object {
-      "show": false,
-    },
-    "axisPointer": Object {
-      "type": "none",
-    },
-    "boundaryGap": true,
-    "name": "x axis",
-    "nameLocation": "center",
-    "splitLine": Object {
-      "show": false,
-    },
-    "type": "category",
-  },
-  "yAxis": Array [
-    Object {
-      "axisLabel": Object {
-        "formatter": [Function],
-      },
-      "axisTick": Object {
-        "show": false,
-      },
-      "name": "y axis",
-      "nameGap": 50,
-      "nameLocation": "center",
-      "type": "value",
-    },
-    Object {
-      "axisLabel": Object {
-        "formatter": [Function],
-      },
-      "axisTick": Object {
-        "show": false,
-      },
-      "name": "Column test secondary",
-      "nameGap": 50,
-      "nameLocation": "center",
-      "show": true,
-      "type": "value",
-    },
-  ],
-}
-`;