@gitlab/ui 56.3.0 → 56.4.0

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

@@ -1,6 +1,7 @@
 import { shallowMount } from '@vue/test-utils';
 import TooltipDefaultFormat from '~/components/shared_components/charts/tooltip_default_format.vue';
 import { createMockChartInstance } from '~helpers/chart_stubs';
+import { expectHeightAutoClasses } from '~helpers/chart_height';
 import Chart from '../chart/chart.vue';
 import BarChart from './bar.vue';
 
@@ -29,9 +30,9 @@ describe('Bar chart component', () => {
   const getOptions = () => findChart().props('options');
   const emitChartCreated = () => findChart().vm.$emit('created', mockChartInstance);
 
-  const createComponent = () => {
+  const createComponent = (props = {}) => {
     wrapper = shallowMount(BarChart, {
-      propsData: defaultChartProps,
+      propsData: { ...defaultChartProps, ...props },
       stubs: {
         'tooltip-default-format': TooltipDefaultFormat,
       },
@@ -116,4 +117,12 @@ describe('Bar chart component', () => {
       });
     });
   });
+
+  describe('height', () => {
+    expectHeightAutoClasses({
+      createComponent,
+      findContainer: () => wrapper,
+      findChart,
+    });
+  });
 });

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

@@ -1,16 +1,20 @@
 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"
-/>`,
+  template: `
+    <gl-bar-chart
+      :data="data"
+      :option="option"
+      :y-axis-title="yAxisTitle"
+      :x-axis-title="xAxisTitle"
+      :x-axis-type="xAxisType"
+      :height="height"
+    />
+  `,
 });
 
 const mockData = {
@@ -34,17 +38,27 @@ const generateProps = ({
   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,

package/src/components/charts/bar/bar.vue

@@ -3,7 +3,7 @@
 import merge from 'lodash/merge';
 import truncate from 'lodash/truncate';
 import { grid, dataZoomAdjustments, mergeSeriesToOptions } from '../../../utils/charts/config';
-import { TOOLTIP_LEFT_OFFSET } from '../../../utils/charts/constants';
+import { TOOLTIP_LEFT_OFFSET, HEIGHT_AUTO_CLASSES } from '../../../utils/charts/constants';
 import { colorFromDefaultPalette } from '../../../utils/charts/theme';
 import { engineeringNotation } from '../../../utils/number_utils';
 import { hexToRgba, debounceByAnimationFrame } from '../../../utils/utils';
@@ -85,6 +85,14 @@ export default {
       required: false,
       default: 'value',
     },
+    /**
+     * Sets the chart's height in pixels. Set to `"auto"` to use the height of the container.
+     */
+    height: {
+      type: [Number, String],
+      required: false,
+      default: null,
+    },
   },
   data() {
     return {
@@ -160,6 +168,9 @@ export default {
       // needs to be handled specially
       return mergeSeriesToOptions(mergedOptions, this.series);
     },
+    autoHeight() {
+      return this.height === 'auto';
+    },
   },
   beforeDestroy() {
     if (this.chart) {
@@ -223,12 +234,20 @@ export default {
       return { yLabels, tooltipContent };
     },
   },
+  HEIGHT_AUTO_CLASSES,
 };
 </script>
 
 <template>
-  <div class="position-relative">
-    <chart v-bind="$attrs" :options="options" v-on="$listeners" @created="onCreated" />
+  <div class="position-relative" :class="{ [$options.HEIGHT_AUTO_CLASSES]: autoHeight }">
+    <chart
+      v-bind="$attrs"
+      :class="{ 'gl-flex-grow-1': autoHeight }"
+      :height="height"
+      :options="options"
+      v-on="$listeners"
+      @created="onCreated"
+    />
     <chart-tooltip
       v-if="chart"
       :show="showTooltip"

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

@@ -55,6 +55,9 @@ export default {
       default: null,
       validator: sizeValidator,
     },
+    /**
+     * Sets the chart's height in pixels. Set to `"auto"` to use the height of the container.
+     */
     height: {
       type: [Number, String],
       required: false,

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

@@ -17,6 +17,7 @@ const template = `
     :secondary-data-title="secondaryDataTitle"
     :x-axis-title="xAxisTitle"
     :x-axis-type="xAxisType"
+    :height="height"
   />
   `;
 
@@ -29,6 +30,7 @@ const generateProps = ({
   xAxisType = 'category',
   secondaryData = [],
   secondaryDataTitle = '',
+  height = null,
 } = {}) => ({
   bars,
   lines,
@@ -38,6 +40,7 @@ const generateProps = ({
   xAxisType,
   secondaryData,
   secondaryDataTitle,
+  height,
 });
 
 const Template = (args, { argTypes }) => ({

package/src/components/charts/column/column.vue

@@ -12,7 +12,11 @@ import {
   generateBarSeries,
   generateLineSeries,
 } from '../../../utils/charts/config';
-import { TOOLTIP_LEFT_OFFSET, CHART_TYPE_LINE } from '../../../utils/charts/constants';
+import {
+  TOOLTIP_LEFT_OFFSET,
+  CHART_TYPE_LINE,
+  HEIGHT_AUTO_CLASSES,
+} from '../../../utils/charts/constants';
 import { colorFromDefaultPalette } from '../../../utils/charts/theme';
 import { columnOptions } from '../../../utils/constants';
 import { debounceByAnimationFrame } from '../../../utils/utils';
@@ -74,6 +78,14 @@ export default {
       required: true,
       validator: (value) => ['value', 'category', 'time', 'log'].indexOf(value) !== -1,
     },
+    /**
+     * Sets the chart's height in pixels. Set to `"auto"` to use the height of the container.
+     */
+    height: {
+      type: [Number, String],
+      required: false,
+      default: null,
+    },
   },
   data() {
     return {
@@ -168,6 +180,9 @@ export default {
       // needs to be handled specially
       return mergeSeriesToOptions(mergedOptions, this.series);
     },
+    autoHeight() {
+      return this.height === 'auto';
+    },
   },
   beforeDestroy() {
     this.chart.getDom().removeEventListener('mousemove', this.debouncedMoveShowTooltip);
@@ -194,11 +209,19 @@ export default {
       this.tooltipTitle = xLabels.join(', ');
     },
   },
+  HEIGHT_AUTO_CLASSES,
 };
 </script>
 <template>
-  <div class="position-relative">
-    <chart v-bind="$attrs" :options="options" v-on="$listeners" @created="onCreated" />
+  <div class="position-relative" :class="{ [$options.HEIGHT_AUTO_CLASSES]: autoHeight }">
+    <chart
+      v-bind="$attrs"
+      :class="{ 'gl-flex-grow-1': autoHeight }"
+      :height="height"
+      :options="options"
+      v-on="$listeners"
+      @created="onCreated"
+    />
     <chart-tooltip
       v-if="chart"
       :show="showTooltip"

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

@@ -1,5 +1,6 @@
 import { shallowMount } from '@vue/test-utils';
 import { createMockChartInstance, ChartTooltipStub } from '~helpers/chart_stubs';
+import { expectHeightAutoClasses } from '~helpers/chart_height';
 import {
   mockDefaultLineData,
   mockDefaultBarData,
@@ -120,4 +121,12 @@ describe('column chart component', () => {
       expect(findTooltip().text()).toContain(expectedTooltipTitle);
     });
   });
+
+  describe('height', () => {
+    expectHeightAutoClasses({
+      createComponent: (props) => factory({ ...defaultChartProps, ...props }),
+      findContainer: () => wrapper,
+      findChart,
+    });
+  });
 });

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

@@ -0,0 +1,41 @@
+import { shallowMount } from '@vue/test-utils';
+import { createMockChartInstance } from '~helpers/chart_stubs';
+import { expectHeightAutoClasses } from '~helpers/chart_height';
+import Chart from '../chart/chart.vue';
+import DiscreteScatterChart from './discrete_scatter.vue';
+
+let mockChartInstance;
+
+jest.mock('echarts', () => ({
+  getInstanceByDom: () => mockChartInstance,
+}));
+
+describe('column chart component', () => {
+  const defaultChartProps = {
+    xAxisTitle: 'x axis',
+    yAxisTitle: 'y axis',
+    xAxisType: 'category',
+    data: [['19 May', 6.95]],
+  };
+  let wrapper;
+
+  const findChart = () => wrapper.findComponent(Chart);
+
+  const createComponent = (props = {}) => {
+    wrapper = shallowMount(DiscreteScatterChart, {
+      propsData: { ...defaultChartProps, ...props },
+    });
+  };
+
+  beforeEach(() => {
+    mockChartInstance = createMockChartInstance();
+  });
+
+  describe('height', () => {
+    expectHeightAutoClasses({
+      createComponent,
+      findContainer: () => wrapper,
+      findChart,
+    });
+  });
+});

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

@@ -10,6 +10,7 @@ const Template = (args, { argTypes }) => ({
     :y-axis-title="yAxisTitle"
     :x-axis-title="xAxisTitle"
     data-testid="discrete-scatter-chart"
+    :height="height"
   />
 `,
 });
@@ -32,11 +33,13 @@ const generateProps = ({
   option = {},
   yAxisTitle = 'Pushes per day',
   xAxisTitle = 'Date',
+  height = null,
 } = {}) => ({
   data,
   option,
   yAxisTitle,
   xAxisTitle,
+  height,
 });
 
 export const Default = Template.bind({});

package/src/components/charts/discrete_scatter/discrete_scatter.vue

@@ -8,6 +8,7 @@ import {
 } from '../../../utils/charts/config';
 import { colorFromDefaultPalette } from '../../../utils/charts/theme';
 import { debounceByAnimationFrame } from '../../../utils/utils';
+import { HEIGHT_AUTO_CLASSES } from '../../../utils/charts/constants';
 import TooltipDefaultFormat from '../../shared_components/charts/tooltip_default_format.vue';
 import Chart from '../chart/chart.vue';
 import ChartTooltip from '../tooltip/tooltip.vue';
@@ -47,6 +48,14 @@ export default {
       required: false,
       default: null,
     },
+    /**
+     * Sets the chart's height in pixels. Set to `"auto"` to use the height of the container.
+     */
+    height: {
+      type: [Number, String],
+      required: false,
+      default: null,
+    },
   },
   data() {
     return {
@@ -121,6 +130,9 @@ export default {
       // needs to be handled specially
       return mergeSeriesToOptions(mergedOptions, this.series);
     },
+    autoHeight() {
+      return this.height === 'auto';
+    },
   },
   methods: {
     defaultFormatTooltipText(params) {
@@ -160,11 +172,19 @@ export default {
       }
     },
   },
+  HEIGHT_AUTO_CLASSES,
 };
 </script>
 <template>
-  <div class="position-relative">
-    <chart v-bind="$attrs" :options="options" v-on="$listeners" @created="onCreated" />
+  <div class="position-relative" :class="{ [$options.HEIGHT_AUTO_CLASSES]: autoHeight }">
+    <chart
+      v-bind="$attrs"
+      :class="{ 'gl-flex-grow-1': autoHeight }"
+      :height="height"
+      :options="options"
+      v-on="$listeners"
+      @created="onCreated"
+    />
     <chart-tooltip
       v-if="chart"
       :show="showTooltip"

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

@@ -3,14 +3,15 @@ import readme from './gauge.md';
 import GlGauge from './gauge.vue';
 
 const template = `
-  <gl-gauge 
+  <gl-gauge
     :value="value"
     :min="min"
     :max="max"
     :thresholds="thresholds"
     :text="text"
     :splitNumber="splitNumber"
-    :option="option" 
+    :option="option"
+    :height="height"
   />
 `;
 
@@ -22,6 +23,7 @@ const generateProps = ({
   option = {},
   thresholds = [38, 82],
   splitNumber = 10,
+  height = null,
 } = {}) => ({
   option,
   value,
@@ -30,6 +32,7 @@ const generateProps = ({
   thresholds,
   text,
   splitNumber,
+  height,
 });
 
 const Template = (args, { argTypes }) => ({

package/src/components/charts/gauge/gauge.vue

@@ -173,7 +173,5 @@ export default {
 </script>
 
 <template>
-  <div>
-    <chart v-bind="$attrs" :options="options" v-on="$listeners" @created="onCreated" />
-  </div>
+  <chart v-bind="$attrs" :options="options" v-on="$listeners" @created="onCreated" />
 </template>

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

@@ -2,6 +2,7 @@ import { shallowMount } from '@vue/test-utils';
 
 import { TOOLTIP_LEFT_OFFSET } from '~/utils/charts/constants';
 import { createMockChartInstance } from '~helpers/chart_stubs';
+import { expectHeightAutoClasses } from '~helpers/chart_height';
 import Chart from '../chart/chart.vue';
 import ChartTooltip from '../tooltip/tooltip.vue';
 import HeatMapChart from './heatmap.vue';
@@ -21,23 +22,34 @@ describe('heatmap component', () => {
 
   const emitChartCreated = () => findChart().vm.$emit('created', mockChartInstance);
 
-  beforeEach(() => {
-    mockChartInstance = createMockChartInstance();
-
+  const createComponent = (props = {}) => {
     wrapper = shallowMount(HeatMapChart, {
-      propsData: { options: { series: [] }, dataSeries: [] },
+      propsData: {
+        options: { series: [] },
+        dataSeries: [],
+        ...props,
+      },
     });
+
     emitChartCreated();
+  };
 
-    return wrapper.vm.$nextTick();
+  beforeEach(async () => {
+    mockChartInstance = createMockChartInstance();
   });
 
   it('emits `created`, with the chart instance', () => {
+    createComponent();
+
     expect(wrapper.emitted('created').length).toBe(1);
     expect(wrapper.emitted('created')[0][0]).toBe(mockChartInstance);
   });
 
   describe('tooltip position', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
     it('is initialized', () => {
       expect(findChartTooltip().props('left')).toBe('0');
       expect(findChartTooltip().props('top')).toBe('0');
@@ -64,4 +76,12 @@ describe('heatmap component', () => {
       });
     });
   });
+
+  describe('height', () => {
+    expectHeightAutoClasses({
+      createComponent,
+      findContainer: () => wrapper,
+      findChart,
+    });
+  });
 });

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

@@ -24,6 +24,7 @@ const template = `
       :x-axis-name="xAxisName"
       :y-axis-name="yAxisName"
       :options="options"
+      :height="height"
     />
 `;
 
@@ -34,6 +35,7 @@ const generateProps = ({
   xAxisName = 'Hour',
   yAxisName = 'Day',
   options = {},
+  height = null,
 } = {}) => ({
   data,
   xAxisLabels,
@@ -41,6 +43,7 @@ const generateProps = ({
   xAxisName,
   yAxisName,
   options,
+  height,
 });
 
 const Template = (args, { argTypes }) => ({

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

@@ -3,7 +3,7 @@
 import merge from 'lodash/merge';
 import { white, gray100 } from '../../../../scss_to_js/scss_variables';
 import { getDefaultTooltipContent } from '../../../utils/charts/config';
-import { TOOLTIP_LEFT_OFFSET } from '../../../utils/charts/constants';
+import { TOOLTIP_LEFT_OFFSET, HEIGHT_AUTO_CLASSES } from '../../../utils/charts/constants';
 import { heatmapHues } from '../../../utils/charts/theme';
 import { engineeringNotation } from '../../../utils/number_utils';
 import { debounceByAnimationFrame } from '../../../utils/utils';
@@ -98,6 +98,14 @@ export default {
       required: false,
       default: true,
     },
+    /**
+     * Sets the chart's height in pixels. Set to `"auto"` to use the height of the container.
+     */
+    height: {
+      type: [Number, String],
+      required: false,
+      default: null,
+    },
   },
   data() {
     return {
@@ -210,6 +218,9 @@ export default {
         };
       });
     },
+    autoHeight() {
+      return this.height === 'auto';
+    },
   },
   beforeDestroy() {
     this.chart.getDom().removeEventListener('mousemove', this.debouncedShowHideTooltip);
@@ -249,12 +260,20 @@ export default {
       }
     },
   },
+  HEIGHT_AUTO_CLASSES,
 };
 </script>
 
 <template>
-  <div class="gl-heatmap">
-    <chart v-bind="$attrs" :options="computedOptions" @created="onCreated" v-on="$listeners" />
+  <div class="gl-heatmap" :class="{ [$options.HEIGHT_AUTO_CLASSES]: autoHeight }">
+    <chart
+      v-bind="$attrs"
+      :class="{ 'gl-flex-grow-1': autoHeight }"
+      :height="height"
+      :options="computedOptions"
+      @created="onCreated"
+      v-on="$listeners"
+    />
     <chart-tooltip
       v-if="chart"
       :show="tooltip.show"

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

@@ -2,6 +2,7 @@ import { shallowMount } from '@vue/test-utils';
 
 import { LEGEND_LAYOUT_INLINE, LEGEND_LAYOUT_TABLE } from '~/utils/charts/constants';
 import { createMockChartInstance, ChartTooltipStub } 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';
@@ -205,4 +206,12 @@ describe('line component', () => {
       expect(findLegend().exists()).toBe(false);
     });
   });
+
+  describe('height', () => {
+    expectHeightAutoClasses({
+      createComponent: createShallowWrapper,
+      findContainer: () => wrapper,
+      findChart,
+    });
+  });
 });

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

@@ -63,6 +63,7 @@ const template = `<gl-line-chart
   :annotations="annotations"
   :includeLegendAvgMax="includeLegendAvgMax"
   :showLegend="showLegend"
+  :height="height"
 />`;
 
 const generateProps = ({
@@ -72,6 +73,7 @@ const generateProps = ({
   annotations = [],
   includeLegendAvgMax = true,
   showLegend = true,
+  height = null,
 } = {}) => ({
   showLegend,
   includeLegendAvgMax,
@@ -79,6 +81,7 @@ const generateProps = ({
   thresholds,
   annotations,
   data,
+  height,
 });
 
 const Template = (_args, { argTypes }) => ({

package/src/components/charts/line/line.vue

@@ -41,6 +41,7 @@ import {
   LEGEND_CURRENT_TEXT,
   LEGEND_MIN_TEXT,
   LEGEND_MAX_TEXT,
+  HEIGHT_AUTO_CLASSES,
 } from '../../../utils/charts/constants';
 import { colorFromDefaultPalette } from '../../../utils/charts/theme';
 import { seriesHasAnnotations, isDataPointAnnotation } from '../../../utils/charts/utils';
@@ -121,6 +122,14 @@ export default {
       required: false,
       default: true,
     },
+    /**
+     * Sets the chart's height in pixels. Set to `"auto"` to use the height of the container.
+     */
+    height: {
+      type: [Number, String],
+      required: false,
+      default: null,
+    },
   },
   data() {
     // Part of the tooltip related data can be
@@ -249,6 +258,9 @@ export default {
         return acc;
       }, []);
     },
+    autoHeight() {
+      return this.height === 'auto';
+    },
   },
   beforeDestroy() {
     this.chart.getDom().removeEventListener('mousemove', this.debouncedShowHideTooltip);
@@ -330,12 +342,20 @@ export default {
       this.selectedFormatTooltipText(params);
     },
   },
+  HEIGHT_AUTO_CLASSES,
 };
 </script>
 
 <template>
-  <div class="position-relative">
-    <chart v-bind="$attrs" :options="options" v-on="$listeners" @created="onCreated" />
+  <div class="position-relative" :class="{ [$options.HEIGHT_AUTO_CLASSES]: autoHeight }">
+    <chart
+      v-bind="$attrs"
+      :class="{ 'gl-flex-grow-1': autoHeight }"
+      :height="height"
+      :options="options"
+      v-on="$listeners"
+      @created="onCreated"
+    />
     <chart-tooltip
       v-if="shouldShowAnnotationsTooltip"
       id="annotationsTooltip"