@gitlab/ui 32.44.0 → 32.45.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "32.44.0",
+  "version": "32.45.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

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

@@ -2,6 +2,7 @@ import { shallowMount } from '@vue/test-utils';
 import * as echarts from 'echarts';
 import Chart from './chart.vue';
 import createTheme from '~/utils/charts/theme';
+import { useMockResizeObserver } from '~helpers/mock_dom_observer';
 
 const defaultHeight = 400;
 
@@ -21,11 +22,12 @@ describe('chart component', () => {
   const themeName = 'gitlab';
   let wrapper;
 
-  beforeEach(() => {
+  const { trigger: triggerResize } = useMockResizeObserver();
+
+  it('initializes chart using $refs.chart', async () => {
     wrapper = shallowMount(...mountArgs);
-  });
+    await wrapper.vm.$nextTick();
 
-  it('initializes chart using $refs.chart', () => {
     expect(echarts.init).toHaveBeenCalledWith(
       wrapper.findComponent({ ref: 'chart' }).element,
       themeName,
@@ -37,11 +39,34 @@ describe('chart component', () => {
     );
   });
 
-  it('emits "created" after initializing chart', () => {
+  it('does not resize the chart when responsive = false', async () => {
+    wrapper = shallowMount(...mountArgs);
+    await wrapper.vm.$nextTick();
+    // initial call when chart gets created
+    expect(wrapper.vm.chart.resize).toHaveBeenCalledTimes(1);
+
+    triggerResize(wrapper.element);
+    expect(wrapper.vm.chart.resize).toHaveBeenCalledTimes(1);
+  });
+
+  it('resizes the chart when responsive = true', async () => {
+    wrapper = shallowMount(Chart, { propsData: { options: {}, responsive: true } });
+    await wrapper.vm.$nextTick();
+    expect(wrapper.vm.chart.resize).toHaveBeenCalledTimes(1);
+
+    triggerResize(wrapper.element);
+
+    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()));
@@ -87,6 +112,10 @@ describe('chart component', () => {
   });
 
   describe('methods', () => {
+    beforeEach(() => {
+      wrapper = shallowMount(...mountArgs);
+    });
+
     describe('draw method', () => {
       it('sets chart options', () => {
         wrapper.vm.draw();

package/src/components/charts/chart/chart.vue

@@ -2,8 +2,12 @@
 import * as echarts from 'echarts';
 import { defaultHeight, defaultWidth, validRenderers } from '../../../utils/charts/config';
 import createTheme, { themeName } from '../../../utils/charts/theme';
+import { GlResizeObserverDirective } from '../../../directives/resize_observer/resize_observer';
 
 export default {
+  directives: {
+    resizeObserver: GlResizeObserverDirective,
+  },
   props: {
     options: {
       type: Object,
@@ -42,6 +46,11 @@ export default {
         return validRenderers.includes(renderer);
       },
     },
+    responsive: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   data() {
     return {
@@ -80,7 +89,7 @@ export default {
       echarts.connect(this.groupId);
     }
 
-    this.chart.on('click', this.clickHandler);
+    this.chart.on('click', this.handleClick);
     /**
      * Emitted after calling `echarts.init`
      */
@@ -89,7 +98,7 @@ export default {
     this.setChartSize();
   },
   beforeDestroy() {
-    this.chart.off('click', this.clickHandler);
+    this.chart.off('click', this.handleClick);
   },
   methods: {
     draw() {
@@ -105,7 +114,7 @@ export default {
         height: this.height || defaultHeight,
       });
     },
-    clickHandler(params) {
+    handleClick(params) {
       /**
        * Emitted when clicked on a data item in the chart (e.g., a bar/column).
        *
@@ -114,10 +123,13 @@ export default {
        */
       this.$emit('chartItemClicked', { chart: this.chart, params });
     },
+    handleResize() {
+      if (this.responsive) this.chart.resize();
+    },
   },
 };
 </script>
 
 <template>
-  <div ref="chart"></div>
+  <div ref="chart" v-resize-observer="handleResize"></div>
 </template>

package/src/components/charts/heatmap/heatmap.vue

@@ -1,7 +1,6 @@
 <script>
 import merge from 'lodash/merge';
 import { white, gray100 } from '../../../../scss_to_js/scss_variables';
-import { GlResizeObserverDirective } from '../../../directives/resize_observer/resize_observer';
 import { getDefaultTooltipContent } from '../../../utils/charts/config';
 import { TOOLTIP_LEFT_OFFSET } from '../../../utils/charts/constants';
 import { heatmapHues } from '../../../utils/charts/theme';
@@ -49,9 +48,6 @@ export default {
     ChartTooltip,
     TooltipDefaultFormat,
   },
-  directives: {
-    resizeObserver: GlResizeObserverDirective,
-  },
   mixins: [ToolboxMixin],
   props: {
     options: {
@@ -237,9 +233,6 @@ export default {
       this.chart = chart;
       this.$emit('created', chart);
     },
-    handleResize() {
-      return this.responsive && this.chart.resize();
-    },
     showHideTooltip(mouseEvent) {
       this.tooltip.show = this.chart.containPixel('grid', [mouseEvent.zrX, mouseEvent.zrY]);
     },
@@ -262,8 +255,8 @@ export default {
 </script>
 
 <template>
-  <div v-resize-observer="handleResize" class="gl-heatmap">
-    <chart :options="computedOptions" @created="onCreated" />
+  <div class="gl-heatmap">
+    <chart v-bind="$attrs" :options="computedOptions" @created="onCreated" v-on="$listeners" />
     <chart-tooltip
       v-if="chart"
       :show="tooltip.show"

package/src/components/charts/sparkline/sparkline.vue

@@ -181,7 +181,13 @@ export default {
   >
     <slot name="default"></slot>
     <div class="gl-flex-grow-1 gl-relative">
-      <chart :height="height" :options="options" @created="onChartCreated" />
+      <chart
+        v-bind="$attrs"
+        :height="height"
+        :options="options"
+        @created="onChartCreated"
+        v-on="$listeners"
+      />
       <chart-tooltip
         v-if="chartInstance"
         :show="tooltip.show"

package/src/scss/utilities.scss

@@ -6113,6 +6113,14 @@
   transform: translateX(100%) !important
 }
 
+.gl-translate-x-n50 {
+  transform: translateX(-50%)
+}
+
+.gl-translate-x-n50\! {
+  transform: translateX(-50%) !important
+}
+
 .gl-translate-y-0 {
   transform: translateY(0)
 }

package/src/scss/utility-mixins/transform.scss

@@ -13,6 +13,10 @@
   transform: translateX(100%);
 }
 
+@mixin gl-translate-x-n50 {
+  transform: translateX(-50%);
+}
+
 @mixin gl-translate-y-0 {
   transform: translateY(0);
 }