@gitlab/ui 69.0.0 → 70.0.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

@@ -7156,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;
@@ -7340,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/spacing.scss

@@ -999,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;
@@ -1107,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

package/src/utils/charts/theme.js

@@ -1,4 +1,3 @@
-import { glBorderRadiusBase } from '../../../scss_to_js/scss_variables';
 import {
   WHITE,
   GRAY_50,
@@ -68,6 +67,8 @@ import {
 import { scrollHandleSvgPath } from '../svgs/svg_paths';
 import { hexToRgba } from '../utils';
 
+const GL_BORDER_RADIUS_BASE = '0.25rem';
+
 export const themeName = 'gitlab';
 
 export const heatmapHues = [
@@ -269,7 +270,7 @@ export const createTheme = (options = {}) => ({
         borderWidth: 0,
         color: GRAY_900,
         textBackgroundColor: WHITE,
-        textBorderRadius: glBorderRadiusBase,
+        textBorderRadius: GL_BORDER_RADIUS_BASE,
         textPadding: [8, 12],
       },
     },

package/src/utils/constants.js

@@ -1,5 +1,3 @@
-import { glIconSizes as glIconSizesVariable } from '../../scss_to_js/scss_variables'; // eslint-disable-line import/no-unresolved
-
 import { POSITION } from '../components/utilities/truncate/constants';
 
 function appendDefaultOption(options) {
@@ -159,7 +157,7 @@ export const datepickerWidthOptionsMap = {
 };
 
 // size options all have corresponding styles (e.g. .s12 defined in icon.scss)
-export const iconSizeOptions = glIconSizesVariable.split(' ').map(Number);
+export const iconSizeOptions = [8, 12, 14, 16, 24, 32, 48, 72];
 
 export const triggerVariantOptions = {
   click: 'click',