@gitlab/ui 56.3.0 → 56.4.1

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"

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

@@ -1,6 +1,8 @@
 import { shallowMount } from '@vue/test-utils';
 import { waitForAnimationFrame } from '~/utils/test_utils';
+import { HEIGHT_AUTO_HORIZONTAL_LAYOUT_CLASSES } from '~/utils/charts/constants';
 import { createMockChartInstance, ChartTooltipStub } from '~helpers/chart_stubs';
+import { expectHeightAutoClasses } from '~helpers/chart_height';
 import Chart from '../chart/chart.vue';
 import SparklineChart from './sparkline.vue';
 
@@ -25,11 +27,12 @@ jest.mock('~/directives/resize_observer/resize_observer', () => ({
 describe('sparkline chart component', () => {
   let wrapper;
   let componentOptions;
-  const factory = () => {
+  const factory = (props = {}) => {
     componentOptions = {
       propsData: {
         data: [[]],
         variant: null,
+        ...props,
       },
       scopedSlots: { latestSeriesEntry: jest.fn() },
       stubs: {
@@ -43,6 +46,7 @@ describe('sparkline chart component', () => {
   // helpers
   const getByTestId = (id) => wrapper.find(`[data-testid="${id}"]`);
   const getChart = () => wrapper.findComponent(Chart);
+  const getChartContainer = () => getByTestId('chart-container');
 
   const getTooltip = () => wrapper.findComponent(ChartTooltipStub);
   const getTooltipTitle = () => getByTestId('tooltip-title');
@@ -212,4 +216,27 @@ describe('sparkline chart component', () => {
       expect(getChartOptions().series[0].smooth).toBe(smooth);
     });
   });
+
+  describe('height', () => {
+    expectHeightAutoClasses({
+      createComponent: factory,
+      findContainer: getChartContainer,
+      findChart: getChart,
+      classes: HEIGHT_AUTO_HORIZONTAL_LAYOUT_CLASSES,
+    });
+
+    describe('sparkline root element style', () => {
+      it('does not set the root element style to height full', () => {
+        factory();
+
+        expect(wrapper.element.classList.value).not.toContain('gl-h-full');
+      });
+
+      it('set the root element style to height full when height is "auto"', () => {
+        factory({ height: 'auto' });
+
+        expect(wrapper.element.classList.value).toContain('gl-h-full');
+      });
+    });
+  });
 });

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

@@ -1,5 +1,6 @@
 import { GlSparklineChart } from '../../../charts';
 import { colorFromDefaultPalette } from '../../../utils/charts/theme';
+import { makeContainer } from '../../../utils/story_decorators/container';
 import readme from './sparkline.md';
 
 const chartData = [
@@ -38,16 +39,15 @@ const Template = (args) => ({
   components: { GlSparklineChart },
   props: Object.keys(args),
   template: `
-    <div>
-      <gl-sparkline-chart
-        :data="data"
-        :height="height"
-        :tooltip-label="tooltipLabel"
-        :show-last-y-value="showLastYValue"
-        :gradient="gradient"
-        :smooth="smooth"
-      />
-    </div>`,
+    <gl-sparkline-chart
+      :data="data"
+      :height="height"
+      :tooltip-label="tooltipLabel"
+      :show-last-y-value="showLastYValue"
+      :gradient="gradient"
+      :smooth="smooth"
+    />
+  `,
 });
 
 export const Default = Template.bind({});
@@ -62,6 +62,14 @@ WithChartColorGradient.args = generateProps({ gradient: customGradient });
 export const WithSmoothing = Template.bind({});
 WithSmoothing.args = generateProps({ smooth: 0.5 });
 
+export const AutoHeight = Template.bind({});
+Object.assign(AutoHeight, {
+  args: generateProps({
+    height: 'auto',
+  }),
+  decorators: [makeContainer({ height: '300px' })],
+});
+
 export default {
   title: 'charts/sparkline-chart',
   component: GlSparklineChart,

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

@@ -8,6 +8,7 @@ import {
   mergeSeriesToOptions,
   symbolSize,
 } from '../../../utils/charts/config';
+import { HEIGHT_AUTO_HORIZONTAL_LAYOUT_CLASSES } from '../../../utils/charts/constants';
 import Chart from '../chart/chart.vue';
 import ChartTooltip from '../tooltip/tooltip.vue';
 
@@ -49,10 +50,10 @@ export default {
       default: '',
     },
     /**
-     * Sets the chart's height in pixel.
+     * Sets the chart's height in pixels. Set to `"auto"` to use the height of the container.
      */
     height: {
-      type: Number,
+      type: [Number, String],
       required: false,
       default: 50,
     },
@@ -169,6 +170,9 @@ export default {
 
       return latestEntry[1];
     },
+    autoHeight() {
+      return this.height === 'auto';
+    },
   },
   methods: {
     onChartCreated(chartInstance) {
@@ -215,6 +219,7 @@ export default {
       }
     },
   },
+  HEIGHT_AUTO_HORIZONTAL_LAYOUT_CLASSES,
 };
 </script>
 
@@ -222,12 +227,18 @@ export default {
   <div
     v-resize-observer="handleResize"
     class="gl-display-flex gl-align-items-center"
+    :class="{ 'gl-h-full': autoHeight }"
     @mouseleave="hideTooltip"
   >
     <slot name="default"></slot>
-    <div class="gl-flex-grow-1 gl-relative">
+    <div
+      data-testid="chart-container"
+      class="gl-flex-grow-1 gl-relative"
+      :class="{ [$options.HEIGHT_AUTO_HORIZONTAL_LAYOUT_CLASSES]: autoHeight }"
+    >
       <chart
         v-bind="$attrs"
+        :class="{ 'gl-flex-grow-1': autoHeight }"
         :height="height"
         :options="options"
         @created="onChartCreated"

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

@@ -2,6 +2,7 @@ import { shallowMount } from '@vue/test-utils';
 
 import TooltipDefaultFormat from '~/components/shared_components/charts/tooltip_default_format.vue';
 import { createMockChartInstance, ChartTooltipStub } from '~helpers/chart_stubs';
+import { expectHeightAutoClasses } from '~helpers/chart_height';
 import { LEGEND_LAYOUT_INLINE, LEGEND_LAYOUT_TABLE } from '~/utils/charts/constants';
 import {
   mockDefaultStackedLineData,
@@ -279,4 +280,12 @@ describe('stacked column chart component', () => {
       });
     });
   });
+
+  describe('height', () => {
+    expectHeightAutoClasses({
+      createComponent: (props) => createShallowWrapper({ props }),
+      findContainer: () => wrapper,
+      findChart,
+    });
+  });
 });

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

@@ -20,6 +20,7 @@ const template = `
     :y-axis-title="yAxisTitle"
     :secondary-data="secondaryData"
     :secondary-data-title="secondaryDataTitle"
+    :height="height"
   />
 `;
 
@@ -36,6 +37,7 @@ const generateProps = ({
   presentation = columnOptions.stacked,
   secondaryData = [],
   secondaryDataTitle = '',
+  height = null,
 } = {}) => ({
   bars,
   lines,
@@ -47,6 +49,7 @@ const generateProps = ({
   yAxisTitle,
   secondaryDataTitle,
   secondaryData,
+  height,
 });
 
 const Template = (args, { argTypes }) => ({

package/src/components/charts/stacked_column/stacked_column.vue

@@ -19,6 +19,7 @@ import {
   LEGEND_MAX_TEXT,
   CHART_TYPE_LINE,
   ANNOTATION_TOOLTIP_TOP_OFFSET,
+  HEIGHT_AUTO_CLASSES,
 } from '../../../utils/charts/constants';
 import { colorFromDefaultPalette } from '../../../utils/charts/theme';
 import { columnOptions } from '../../../utils/constants';
@@ -136,6 +137,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 {
@@ -246,6 +255,9 @@ export default {
         return acc;
       }, []);
     },
+    autoHeight() {
+      return this.height === 'auto';
+    },
   },
   beforeDestroy() {
     this.chart.getDom().removeEventListener('mousemove', this.debouncedMoveShowTooltip);
@@ -295,11 +307,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/utils/charts/constants.js

@@ -63,3 +63,7 @@ export const arrowSymbol = 'path://m5 229 5 8h-10z';
 // Constants for the type property of charts
 export const CHART_TYPE_BAR = 'bar';
 export const CHART_TYPE_LINE = 'line';
+
+// Constants for height "auto"
+export const HEIGHT_AUTO_CLASSES = 'gl-display-flex gl-flex-direction-column gl-h-full';
+export const HEIGHT_AUTO_HORIZONTAL_LAYOUT_CLASSES = 'gl-display-flex gl-h-full';