@gitlab/ui 68.8.0 → 69.1.0

package/src/components/charts/tooltip/tooltip.vue

@@ -1,9 +1,10 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <script>
 import * as echarts from 'echarts';
-import { uid } from '../../../utils/utils';
+import { uid, debounceByAnimationFrame } from '../../../utils/utils';
 import GlPopover from '../../base/popover/popover.vue';
 import { popoverPlacements } from '../../../utils/constants';
+import { TOOLTIP_LEFT_OFFSET, TOOLTIP_TOP_OFFSET } from '../../../utils/charts/constants';
 
 export default {
   name: 'GlChartTooltip',
@@ -24,74 +25,167 @@ export default {
       required: false,
       default: () => uid(),
     },
+    /**
+     * Position of the popover respective to the chart.
+     * Sets the `top` style property.
+     */
     top: {
       type: String,
       required: false,
       default: null,
     },
+    /**
+     * Position of the popover respective to the chart.
+     * Sets the `bottom` style property.
+     */
     bottom: {
       type: String,
       required: false,
       default: null,
     },
+    /**
+     * Position of the popover respective to the chart.
+     * Sets the `left` style property.
+     */
     left: {
       type: String,
       required: false,
       default: null,
     },
+    /**
+     * Position of the popover respective to the chart.
+     * Sets the `right` style property.
+     */
     right: {
       type: String,
       required: false,
       default: null,
     },
+    /**
+     * Set to `true` to show, set to `false` to not show.
+     * Set to `null` to show only when the mouse is in the chart.
+     */
+    show: {
+      type: Boolean,
+      required: false,
+      default: null,
+    },
+    /**
+     * Popover placement
+     */
     placement: {
       type: String,
       required: false,
       default: popoverPlacements.right,
     },
+    /**
+     * Distance between the popover and the pointer when
+     * no position is defined
+     */
+    xOffset: {
+      type: Number,
+      required: false,
+      default: TOOLTIP_LEFT_OFFSET,
+      validator(value) {
+        // popover target must have a size of at least 1
+        return value >= 1;
+      },
+    },
+    /**
+     * Distance between the popover and the pointer when
+     * no position is defined
+     */
+    yOffset: {
+      type: Number,
+      required: false,
+      default: TOOLTIP_TOP_OFFSET,
+      validator(value) {
+        // popover target must have a size of at least 1
+        return value >= 1;
+      },
+    },
+  },
+  data() {
+    return {
+      pointerPosition: null,
+      isPointerInChart: false,
+
+      debouncedMouseHandler: debounceByAnimationFrame(this.mouseHandler),
+    };
   },
   computed: {
-    containerId() {
+    targetId() {
       // if multiple tooltips are used in a chart component,
       // `this.id` can be used to uniquely identify them
       return `${this.chart.getDom().getAttribute('_echarts_instance_')}-tooltip-${this.id}`;
     },
-    containerPosition() {
-      const props = ['top', 'bottom', 'left', 'right'];
+    targetStyle() {
+      // the target is a rectangular space between cursor and popover
+      return {
+        marginTop: `${-this.yOffset}px`,
+        height: `${this.yOffset * 2}px`,
+
+        marginLeft: `${-this.xOffset}px`,
+        width: `${this.xOffset * 2}px`,
+      };
+    },
+    fixedPosition() {
+      const { top, left, bottom, right } = this;
+      if (top || left || bottom || right) {
+        return { top, left, bottom, right };
+      }
+      return null;
+    },
+    shouldShowPopover() {
+      if (this.show !== null) {
+        return this.show;
+      }
+      return this.isPointerInChart;
+    },
+  },
+  created() {
+    this.chart.getZr().on('mousemove', this.debouncedMouseHandler);
+    this.chart.getZr().on('mouseout', this.debouncedMouseHandler);
+  },
+  beforeDestroy() {
+    this.chart.getZr().off('mousemove', this.debouncedMouseHandler);
+    this.chart.getZr().off('mouseout', this.debouncedMouseHandler);
+  },
+  methods: {
+    mouseHandler(event) {
+      let { zrX: x, zrY: y } = event.event;
 
-      return props.reduce((accumulator, prop) => {
-        const position = this[prop];
-        if (position) {
-          accumulator[prop] = position;
-        }
+      if (Number.isFinite(x) && Number.isFinite(y)) {
+        x = Math.round(x);
+        y = Math.round(y);
 
-        return accumulator;
-      }, {});
+        this.pointerPosition = {
+          left: `${x}px`,
+          top: `${y}px`,
+        };
+        this.isPointerInChart = this.chart.containPixel('grid', [x, y]);
+      }
     },
   },
 };
 </script>
 
 <template>
-  <div>
-    <!--
-      Width and height need to be greater than 0px for the
-      popover component to render within the following container
-    -->
+  <div v-if="chart" class="gl-pointer-events-none">
     <div
-      :id="containerId"
-      :style="containerPosition"
-      style="width: 1px; height: 1px"
+      :id="targetId"
+      :style="{ ...(fixedPosition || pointerPosition), ...targetStyle }"
       class="gl-chart-tooltip"
     ></div>
     <!--
-      Needs to be triggered programatically using `show` property
-      This is why `triggers` is currently set to an empty string
+      Is shown using `show` property directly so
+      `triggers` are set to an empty string
     -->
     <gl-popover
       v-bind="$attrs"
-      :target="containerId"
-      :container="containerId"
+      :show="shouldShowPopover"
+      :target="targetId"
+      :container="targetId"
       :placement="placement"
       triggers=""
     >

package/src/scss/utilities.scss

@@ -3530,18 +3530,6 @@ $gl-animate-skeleton-loader-max-width: 64 * $grid-size;
   flex-direction: column !important;
 }
 
-.gl-sm-flex-direction-column {
-  @include gl-media-breakpoint-down(md) {
-  flex-direction: column;
-  }
-}
-
-.gl-sm-flex-direction-column\! {
-  @include gl-media-breakpoint-down(md) {
-  flex-direction: column !important;
-  }
-}
-
 .gl-md-flex-direction-column {
   @include gl-media-breakpoint-up(md) {
   flex-direction: column;
@@ -3566,18 +3554,6 @@ $gl-animate-skeleton-loader-max-width: 64 * $grid-size;
   }
 }
 
-.gl-xs-flex-direction-column {
-  @include gl-media-breakpoint-down(sm) {
-    flex-direction: column;
-  }
-}
-
-.gl-xs-flex-direction-column\! {
-  @include gl-media-breakpoint-down(sm) {
-    flex-direction: column !important;
-  }
-}
-
 .gl-flex-direction-column-reverse {
   flex-direction: column-reverse;
 }
@@ -3650,6 +3626,18 @@ $gl-animate-skeleton-loader-max-width: 64 * $grid-size;
   flex-direction: row-reverse !important;
 }
 
+.gl-sm-flex-direction-row-reverse {
+  @include gl-media-breakpoint-up(sm) {
+    flex-direction: row-reverse;
+  }
+}
+
+.gl-sm-flex-direction-row-reverse\! {
+  @include gl-media-breakpoint-up(sm) {
+    flex-direction: row-reverse !important;
+  }
+}
+
 .gl-flex-shrink-0 {
   flex-shrink: 0;
 }
@@ -4911,18 +4899,6 @@ $gl-animate-skeleton-loader-max-width: 64 * $grid-size;
   width: $grid-size * 40 !important;
 }
 
-.gl-xs-w-full {
-  @include gl-media-breakpoint-down(sm) {
-  width: 100%;
-  }
-}
-
-.gl-xs-w-full\! {
-  @include gl-media-breakpoint-down(sm) {
-  width: 100% !important;
-  }
-}
-
 .gl-sm-w-full {
   @include gl-media-breakpoint-up(sm) {
   width: 100%;
@@ -5127,6 +5103,54 @@ $gl-animate-skeleton-loader-max-width: 64 * $grid-size;
   }
 }
 
+.gl-sm-w-25p {
+  @include gl-media-breakpoint-up(sm) {
+    width: 25%;
+  }
+}
+
+.gl-sm-w-25p\! {
+  @include gl-media-breakpoint-up(sm) {
+    width: 25% !important;
+  }
+}
+
+.gl-sm-w-30p {
+  @include gl-media-breakpoint-up(sm) {
+    width: 30%;
+  }
+}
+
+.gl-sm-w-30p\! {
+  @include gl-media-breakpoint-up(sm) {
+    width: 30% !important;
+  }
+}
+
+.gl-sm-w-40p {
+  @include gl-media-breakpoint-up(sm) {
+    width: 40%;
+  }
+}
+
+.gl-sm-w-40p\! {
+  @include gl-media-breakpoint-up(sm) {
+    width: 40% !important;
+  }
+}
+
+.gl-sm-w-75p {
+  @include gl-media-breakpoint-up(sm) {
+    width: 75%;
+  }
+}
+
+.gl-sm-w-75p\! {
+  @include gl-media-breakpoint-up(sm) {
+    width: 75% !important;
+  }
+}
+
 .gl-md-w-15 {
   @include gl-media-breakpoint-up(md) {
   width: $gl-spacing-scale-15;
@@ -7102,16 +7126,6 @@ $gl-animate-skeleton-loader-max-width: 64 * $grid-size;
 .gl-row-gap-7\! {
   row-gap: $gl-spacing-scale-7 !important;
 }
-.gl-xs-mb-3 {
-  @include gl-media-breakpoint-down(sm) {
-  margin-bottom: $gl-spacing-scale-3;
-  }
-}
-.gl-xs-mb-3\! {
-  @include gl-media-breakpoint-down(sm) {
-  margin-bottom: $gl-spacing-scale-3 !important;
-  }
-}
 .gl-sm-ml-3 {
   @include gl-media-breakpoint-up(sm) {
   margin-left: $gl-spacing-scale-3;
@@ -7142,6 +7156,16 @@ $gl-animate-skeleton-loader-max-width: 64 * $grid-size;
   margin-left: $gl-spacing-scale-7 !important;
   }
 }
+.gl-sm-mr-0 {
+  @include gl-media-breakpoint-up(sm) {
+  margin-right: 0;
+  }
+}
+.gl-sm-mr-0\! {
+  @include gl-media-breakpoint-up(sm) {
+  margin-right: 0 !important;
+  }
+}
 .gl-sm-mt-0 {
   @include gl-media-breakpoint-up(sm) {
   margin-top: 0;
@@ -7172,6 +7196,16 @@ $gl-animate-skeleton-loader-max-width: 64 * $grid-size;
   margin-top: $gl-spacing-scale-6 !important;
   }
 }
+.gl-sm-mb-0 {
+  @include gl-media-breakpoint-up(sm) {
+    margin-bottom: 0;
+  }
+}
+.gl-sm-mb-0\! {
+  @include gl-media-breakpoint-up(sm) {
+    margin-bottom: 0 !important;
+  }
+}
 .gl-sm-mb-7 {
   @include gl-media-breakpoint-up(sm) {
   margin-bottom: $gl-spacing-scale-7;
@@ -7316,6 +7350,16 @@ $gl-animate-skeleton-loader-max-width: 64 * $grid-size;
   margin-left: $gl-spacing-scale-3 !important;
   }
 }
+.gl-md-mr-0 {
+  @include gl-media-breakpoint-up(md) {
+  margin-right: 0;
+  }
+}
+.gl-md-mr-0\! {
+  @include gl-media-breakpoint-up(md) {
+  margin-right: 0 !important;
+  }
+}
 .gl-md-mr-3 {
   @include gl-media-breakpoint-up(md) {
   margin-right: $gl-spacing-scale-3;

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

@@ -117,13 +117,6 @@
   flex-direction: column;
 }
 
-@mixin gl-sm-flex-direction-column {
-  // stylelint-disable-next-line @gitlab/no-gl-media-breakpoint-down
-  @include gl-media-breakpoint-down(md) {
-    @include gl-flex-direction-column;
-  }
-}
-
 @mixin gl-md-flex-direction-column {
   @include gl-media-breakpoint-up(md) {
     @include gl-flex-direction-column;
@@ -136,13 +129,6 @@
   }
 }
 
-@mixin gl-xs-flex-direction-column {
-  // stylelint-disable-next-line @gitlab/no-gl-media-breakpoint-down
-  @include gl-media-breakpoint-down(sm) {
-    flex-direction: column;
-  }
-}
-
 @mixin gl-flex-direction-column-reverse {
   flex-direction: column-reverse;
 }
@@ -179,6 +165,12 @@
   flex-direction: row-reverse;
 }
 
+@mixin gl-sm-flex-direction-row-reverse {
+  @include gl-media-breakpoint-up(sm) {
+    flex-direction: row-reverse;
+  }
+}
+
 @mixin gl-flex-shrink-0 {
   flex-shrink: 0;
 }

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

@@ -138,13 +138,6 @@
   width: $grid-size * 40;
 }
 
-@mixin gl-xs-w-full {
-  // stylelint-disable-next-line @gitlab/no-gl-media-breakpoint-down
-  @include gl-media-breakpoint-down(sm) {
-    @include gl-w-full;
-  }
-}
-
 @mixin gl-sm-w-full {
   @include gl-media-breakpoint-up(sm) {
     @include gl-w-full;
@@ -255,6 +248,30 @@
   }
 }
 
+@mixin gl-sm-w-25p {
+  @include gl-media-breakpoint-up(sm) {
+    width: 25%;
+  }
+}
+
+@mixin gl-sm-w-30p {
+  @include gl-media-breakpoint-up(sm) {
+    width: 30%;
+  }
+}
+
+@mixin gl-sm-w-40p {
+  @include gl-media-breakpoint-up(sm) {
+    width: 40%;
+  }
+}
+
+@mixin gl-sm-w-75p {
+  @include gl-media-breakpoint-up(sm) {
+    width: 75%;
+  }
+}
+
 @mixin gl-md-w-15 {
   @include gl-media-breakpoint-up(md) {
     @include gl-w-15;

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

@@ -981,14 +981,6 @@
 * notes:
 * - Utilities should strictly follow $gl-spacing-scale
 */
-
-@mixin gl-xs-mb-3 {
-  // stylelint-disable-next-line @gitlab/no-gl-media-breakpoint-down
-  @include gl-media-breakpoint-down(sm) {
-    @include gl-mb-3;
-  }
-}
-
 @mixin gl-sm-ml-3 {
   @include gl-media-breakpoint-up(sm) {
     @include gl-ml-3;
@@ -1007,6 +999,12 @@
   }
 }
 
+@mixin gl-sm-mr-0 {
+  @include gl-media-breakpoint-up(sm) {
+    @include gl-mr-0;
+  }
+}
+
 @mixin gl-sm-mt-0 {
   @include gl-media-breakpoint-up(sm) {
     @include gl-mt-0;
@@ -1025,6 +1023,12 @@
   }
 }
 
+@mixin gl-sm-mb-0 {
+  @include gl-media-breakpoint-up(sm) {
+    margin-bottom: 0;
+  }
+}
+
 @mixin gl-sm-mb-7 {
   @include gl-media-breakpoint-up(sm) {
     @include gl-mb-7;
@@ -1109,6 +1113,12 @@
   }
 }
 
+@mixin gl-md-mr-0 {
+  @include gl-media-breakpoint-up(md) {
+    @include gl-mr-0;
+  }
+}
+
 @mixin gl-md-mr-3 {
   @include gl-media-breakpoint-up(md) {
     @include gl-mr-3;

package/src/utils/charts/constants.js

@@ -17,13 +17,6 @@ export const ANNOTATIONS_SERIES_NAME = 'annotations';
  */
 export const ANNOTATIONS_COMPONENT_TYPE = 'markPoint';
 
-/**
- * This is so that the mouse doesn't go over the
- * tooltip and call mouseout which will hide the
- * tooltip.
- */
-export const ANNOTATION_TOOLTIP_TOP_OFFSET = 10;
-
 /**
  * This is a slight offset that gets applied to the left
  * of the chart tooltips to ensure a correct position.
@@ -31,11 +24,10 @@ export const ANNOTATION_TOOLTIP_TOP_OFFSET = 10;
 export const TOOLTIP_LEFT_OFFSET = 2;
 
 /**
- * This is an offset that gets applied between the mouse
- * cursor and the left of the chart data tooltips to provide
- * some spacing.
+ * This is a slight offset that gets applied to the left
+ * of the chart tooltips to ensure a correct position.
  */
-export const DATA_TOOLTIP_LEFT_OFFSET = 10;
+export const TOOLTIP_TOP_OFFSET = 10;
 
 /**
  * These are the accepted values for the layout prop