@gitlab/ui 68.8.0 → 69.1.0

package/CHANGELOG.md

@@ -1,3 +1,43 @@
+# [69.1.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v69.0.0...v69.1.0) (2023-11-20)
+
+
+### Features
+
+* **css:** Add gl-{size}-mr-0 utility classes ([4ce256c](https://gitlab.com/gitlab-org/gitlab-ui/commit/4ce256c8eba06c8ecdbddb67c92b2a097e415518))
+
+# [69.0.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v68.8.0...v69.0.0) (2023-11-16)
+
+
+### Bug Fixes
+
+* **css:** remove desktop-first CSS utils ([797f198](https://gitlab.com/gitlab-org/gitlab-ui/commit/797f19868bf6cd4d10e1c7775744391e82aa81e1))
+
+
+### Features
+
+* **css:** add responsive CSS utils ([ca0d144](https://gitlab.com/gitlab-org/gitlab-ui/commit/ca0d1440f861fa0b83f0446d34c66661f329450d))
+
+
+### BREAKING CHANGES
+
+* **css:** This removes the remaining desktop-first CSS utilities
+form the library. Any usages of those should be replaced with
+mobile-first alternatives. See below for replacement suggestions. Note
+that the proposed replacements should work in the most simple cases.
+Some use cases might require using different utils combinations.
+
+* `gl-sm-flex-direction-column`
+Replace with `gl-flex-direction-column gl-md-flex-direction-row`.
+
+* `gl-xs-flex-direction-column`
+Replace with `gl-flex-direction-column gl-sm-flex-direction-row`.
+
+* `gl-xs-w-full`
+Replace with `gl-w-full gl-sm-w-auto`.
+
+* `gl-xs-mb-3`
+Replace with `gl-mb-3 gl-sm-mb-0`.
+
 # [68.8.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v68.7.0...v68.8.0) (2023-11-15)
 
 

package/dist/components/charts/area/area.js

@@ -1,9 +1,8 @@
 import merge from 'lodash/merge';
 import { defaultAreaOpacity, lineStyle, getThresholdConfig, generateAnnotationSeries, defaultChartOptions, dataZoomAdjustments, mergeSeriesToOptions, mergeAnnotationAxisToOptions, grid, getDefaultTooltipContent } from '../../../utils/charts/config';
-import { LEGEND_AVERAGE_TEXT, LEGEND_MAX_TEXT, LEGEND_MIN_TEXT, LEGEND_CURRENT_TEXT, LEGEND_LAYOUT_INLINE, LEGEND_LAYOUT_TABLE, DATA_TOOLTIP_LEFT_OFFSET, ANNOTATION_TOOLTIP_TOP_OFFSET, HEIGHT_AUTO_CLASSES } from '../../../utils/charts/constants';
+import { LEGEND_AVERAGE_TEXT, LEGEND_MAX_TEXT, LEGEND_MIN_TEXT, LEGEND_CURRENT_TEXT, LEGEND_LAYOUT_INLINE, LEGEND_LAYOUT_TABLE, HEIGHT_AUTO_CLASSES } from '../../../utils/charts/constants';
 import { colorFromDefaultPalette } from '../../../utils/charts/theme';
 import { seriesHasAnnotations, isDataPointAnnotation } from '../../../utils/charts/utils';
-import { debounceByAnimationFrame } from '../../../utils/utils';
 import TooltipDefaultFormat from '../../shared_components/charts/tooltip_default_format';
 import Chart from '../chart/chart';
 import ChartLegend from '../legend/legend';
@@ -104,13 +103,8 @@ var script = {
     // https://gitlab.com/gitlab-org/gitlab-ui/-/issues/618
     return {
       chart: null,
-      showDataTooltip: false,
       dataTooltipTitle: '',
       dataTooltipContent: {},
-      dataTooltipPosition: {
-        left: '0',
-        top: '0'
-      },
       showAnnotationsTooltip: false,
       annotationsTooltipTitle: '',
       annotationsTooltipContent: '',
@@ -118,7 +112,6 @@ var script = {
         left: '0',
         top: '0'
       },
-      debouncedShowHideTooltip: debounceByAnimationFrame(this.showHideTooltip),
       selectedFormatTooltipText: this.formatTooltipText || this.defaultFormatTooltipText
     };
   },
@@ -218,8 +211,6 @@ var script = {
     }
   },
   beforeDestroy() {
-    this.chart.getZr().off('mousemove', this.debouncedShowHideTooltip);
-    this.chart.getZr().off('mouseout', this.debouncedShowHideTooltip);
     this.chart.off('mouseout', this.hideAnnotationsTooltip);
     this.chart.off('mouseover', this.onChartMouseOver);
   },
@@ -240,13 +231,6 @@ var script = {
       };
     },
     onCreated(chart) {
-      // These listeners are used to show/hide data tooltips
-      // when the mouse is hovered over the parent container
-      // of echarts' svg element. This works only for data points
-      // and not markPoints.
-      chart.getZr().on('mousemove', this.debouncedShowHideTooltip);
-      chart.getZr().on('mouseout', this.debouncedShowHideTooltip);
-
       // eCharts inbuild mouse events
       // https://echarts.apache.org/en/api.html#events.Mouse%20events
       // is used to attach listeners to markPoints. These listeners
@@ -256,7 +240,6 @@ var script = {
       // sections of the charts with their own mouseovers and mouseouts,
       // there shouldn't be an overlapping situation where both tooltips
       // are visible.
-
       if (this.hasAnnotations) {
         chart.on('mouseout', this.onChartDataPointMouseOut);
         chart.on('mouseover', this.onChartDataPointMouseOver);
@@ -264,16 +247,6 @@ var script = {
       this.chart = chart;
       this.$emit('created', chart);
     },
-    showHideTooltip(_ref) {
-      let {
-        event: mouseEvent
-      } = _ref;
-      this.showDataTooltip = this.chart.containPixel('grid', [mouseEvent.zrX, mouseEvent.zrY]);
-      this.dataTooltipPosition = {
-        left: `${mouseEvent.zrX + DATA_TOOLTIP_LEFT_OFFSET}px`,
-        top: `${mouseEvent.zrY}px`
-      };
-    },
     onChartDataPointMouseOut() {
       this.showAnnotationsTooltip = false;
     },
@@ -296,7 +269,7 @@ var script = {
         this.annotationsTooltipContent = content;
         this.annotationsTooltipPosition = {
           left: `${event.event.zrX}px`,
-          top: `${event.event.zrY + ANNOTATION_TOOLTIP_TOP_OFFSET}px`
+          top: `${event.event.zrY}px`
         };
       }
     },
@@ -313,7 +286,7 @@ const __vue_script__ = script;
 /* template */
 var __vue_render__ = function () {
 var _obj;
-var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"position-relative",class:( _obj = {}, _obj[_vm.$options.HEIGHT_AUTO_CLASSES] = _vm.autoHeight, _obj )},[_c('chart',_vm._g(_vm._b({class:{ 'gl-flex-grow-1': _vm.autoHeight },attrs:{"height":_vm.height,"options":_vm.options},on:{"created":_vm.onCreated}},'chart',_vm.$attrs,false),_vm.$listeners)),_vm._v(" "),(_vm.shouldShowAnnotationsTooltip)?_c('chart-tooltip',{ref:"annotationsTooltip",attrs:{"id":"annotationsTooltip","show":_vm.showAnnotationsTooltip,"chart":_vm.chart,"top":_vm.annotationsTooltipPosition.top,"left":_vm.annotationsTooltipPosition.left,"placement":"bottom"},scopedSlots:_vm._u([{key:"title",fn:function(){return [_c('div',[_vm._v(_vm._s(_vm.annotationsTooltipTitle))])]},proxy:true}],null,false,1889294429)},[_vm._v(" "),_c('div',[_vm._v(_vm._s(_vm.annotationsTooltipContent))])]):_vm._e(),_vm._v(" "),(_vm.chart)?_c('chart-tooltip',{ref:"dataTooltip",staticClass:"gl-pointer-events-none",attrs:{"id":"dataTooltip","show":_vm.showDataTooltip,"chart":_vm.chart,"top":_vm.dataTooltipPosition.top,"left":_vm.dataTooltipPosition.left},scopedSlots:_vm._u([{key:"title",fn:function(){return [(_vm.formatTooltipText)?_vm._t("tooltip-title"):[_vm._v("\n        "+_vm._s(_vm.dataTooltipTitle)+"\n        "),(_vm.options.xAxis.name)?[_vm._v("("+_vm._s(_vm.options.xAxis.name)+")")]:_vm._e()]]},proxy:true}],null,true)},[_vm._v(" "),(_vm.formatTooltipText)?_vm._t("tooltip-content"):_c('tooltip-default-format',{attrs:{"tooltip-content":_vm.dataTooltipContent}})],2):_vm._e(),_vm._v(" "),(_vm.compiledOptions)?_c('chart-legend',{style:(_vm.legendStyle),attrs:{"chart":_vm.chart,"series-info":_vm.seriesInfo,"text-style":_vm.compiledOptions.textStyle,"min-text":_vm.legendMinText,"max-text":_vm.legendMaxText,"average-text":_vm.legendAverageText,"current-text":_vm.legendCurrentText,"layout":_vm.legendLayout}}):_vm._e()],1)};
+var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"position-relative",class:( _obj = {}, _obj[_vm.$options.HEIGHT_AUTO_CLASSES] = _vm.autoHeight, _obj )},[_c('chart',_vm._g(_vm._b({class:{ 'gl-flex-grow-1': _vm.autoHeight },attrs:{"height":_vm.height,"options":_vm.options},on:{"created":_vm.onCreated}},'chart',_vm.$attrs,false),_vm.$listeners)),_vm._v(" "),(_vm.shouldShowAnnotationsTooltip)?_c('chart-tooltip',{ref:"annotationsTooltip",attrs:{"id":"annotationsTooltip","show":_vm.showAnnotationsTooltip,"top":_vm.annotationsTooltipPosition.top,"left":_vm.annotationsTooltipPosition.left,"chart":_vm.chart,"placement":"bottom"},scopedSlots:_vm._u([{key:"title",fn:function(){return [_c('div',[_vm._v(_vm._s(_vm.annotationsTooltipTitle))])]},proxy:true}],null,false,1889294429)},[_vm._v(" "),_c('div',[_vm._v(_vm._s(_vm.annotationsTooltipContent))])]):_vm._e(),_vm._v(" "),(_vm.chart)?_c('chart-tooltip',{ref:"dataTooltip",attrs:{"chart":_vm.chart},scopedSlots:_vm._u([{key:"title",fn:function(){return [(_vm.formatTooltipText)?_vm._t("tooltip-title"):[_vm._v("\n        "+_vm._s(_vm.dataTooltipTitle)+"\n        "),(_vm.options.xAxis.name)?[_vm._v("("+_vm._s(_vm.options.xAxis.name)+")")]:_vm._e()]]},proxy:true}],null,true)},[_vm._v(" "),(_vm.formatTooltipText)?_vm._t("tooltip-content"):_c('tooltip-default-format',{attrs:{"tooltip-content":_vm.dataTooltipContent}})],2):_vm._e(),_vm._v(" "),(_vm.compiledOptions)?_c('chart-legend',{style:(_vm.legendStyle),attrs:{"chart":_vm.chart,"series-info":_vm.seriesInfo,"text-style":_vm.compiledOptions.textStyle,"min-text":_vm.legendMinText,"max-text":_vm.legendMaxText,"average-text":_vm.legendAverageText,"current-text":_vm.legendCurrentText,"layout":_vm.legendLayout}}):_vm._e()],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/charts/bar/bar.js

@@ -1,7 +1,7 @@
 import merge from 'lodash/merge';
 import truncate from 'lodash/truncate';
 import { dataZoomAdjustments, mergeSeriesToOptions, grid } from '../../../utils/charts/config';
-import { TOOLTIP_LEFT_OFFSET, HEIGHT_AUTO_CLASSES } from '../../../utils/charts/constants';
+import { HEIGHT_AUTO_CLASSES } from '../../../utils/charts/constants';
 import { colorFromDefaultPalette } from '../../../utils/charts/theme';
 import { engineeringNotation } from '../../../utils/number_utils';
 import { debounceByAnimationFrame, hexToRgba } from '../../../utils/utils';
@@ -177,7 +177,7 @@ var script = {
         event: mouseEvent
       } = _ref;
       this.tooltipPosition = {
-        left: `${mouseEvent.zrX + TOOLTIP_LEFT_OFFSET}px`,
+        left: `${mouseEvent.zrX}px`,
         top: `${mouseEvent.zrY}px`
       };
       this.showTooltip = this.chart.containPixel('grid', [mouseEvent.zrX, mouseEvent.zrY]);

package/dist/components/charts/column/column.js

@@ -1,6 +1,6 @@
 import merge from 'lodash/merge';
 import { yAxis, generateBarSeries, generateLineSeries, defaultChartOptions, gridWithSecondaryYAxis, grid, dataZoomAdjustments, mergeSeriesToOptions, getDefaultTooltipContent } from '../../../utils/charts/config';
-import { CHART_TYPE_LINE, TOOLTIP_LEFT_OFFSET, HEIGHT_AUTO_CLASSES } from '../../../utils/charts/constants';
+import { 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';
@@ -198,7 +198,7 @@ var script = {
   methods: {
     moveShowTooltip(mouseEvent) {
       this.tooltipPosition = {
-        left: `${mouseEvent.zrX + TOOLTIP_LEFT_OFFSET}px`,
+        left: `${mouseEvent.zrX}px`,
         top: `${mouseEvent.zrY}px`
       };
       this.showTooltip = this.chart.containPixel('grid', [mouseEvent.zrX, mouseEvent.zrY]);

package/dist/components/charts/discrete_scatter/discrete_scatter.js

@@ -153,6 +153,7 @@ var script = {
       const data = this.getChartData(params);
       if (data.length) {
         const [left, top] = this.chart.convertToPixel('grid', data);
+        this.showTooltip = true;
         this.tooltipPosition = {
           left: `${left}px`,
           top: `${top}px`

package/dist/components/charts/heatmap/heatmap.js

@@ -1,7 +1,7 @@
 import merge from 'lodash/merge';
 import { GRAY_100, WHITE } from '../../../../dist/tokens/js/tokens';
 import { getDefaultTooltipContent } from '../../../utils/charts/config';
-import { TOOLTIP_LEFT_OFFSET, HEIGHT_AUTO_CLASSES } from '../../../utils/charts/constants';
+import { HEIGHT_AUTO_CLASSES } from '../../../utils/charts/constants';
 import { heatmapHues } from '../../../utils/charts/theme';
 import { engineeringNotation } from '../../../utils/number_utils';
 import { debounceByAnimationFrame } from '../../../utils/utils';
@@ -261,7 +261,7 @@ var script = {
         }, value);
         this.tooltip = {
           ...this.tooltip,
-          left: `${left + TOOLTIP_LEFT_OFFSET}px`,
+          left: `${left}px`,
           top: `${top}px`
         };
       }

package/dist/components/charts/line/line.js

@@ -1,7 +1,7 @@
 import merge from 'lodash/merge';
 import { GRAY_200 } from '../../../../dist/tokens/js/tokens';
 import { symbolSize, lineStyle, getThresholdConfig, generateAnnotationSeries, defaultChartOptions, dataZoomAdjustments, mergeSeriesToOptions, mergeAnnotationAxisToOptions, grid, getDefaultTooltipContent } from '../../../utils/charts/config';
-import { LEGEND_AVERAGE_TEXT, LEGEND_MAX_TEXT, LEGEND_MIN_TEXT, LEGEND_CURRENT_TEXT, LEGEND_LAYOUT_INLINE, LEGEND_LAYOUT_TABLE, DATA_TOOLTIP_LEFT_OFFSET, ANNOTATION_TOOLTIP_TOP_OFFSET, HEIGHT_AUTO_CLASSES } from '../../../utils/charts/constants';
+import { LEGEND_AVERAGE_TEXT, LEGEND_MAX_TEXT, LEGEND_MIN_TEXT, LEGEND_CURRENT_TEXT, LEGEND_LAYOUT_INLINE, LEGEND_LAYOUT_TABLE, HEIGHT_AUTO_CLASSES } from '../../../utils/charts/constants';
 import { colorFromDefaultPalette } from '../../../utils/charts/theme';
 import { seriesHasAnnotations, isDataPointAnnotation } from '../../../utils/charts/utils';
 import { debounceByAnimationFrame } from '../../../utils/utils';
@@ -263,7 +263,7 @@ var script = {
     showHideTooltip(mouseEvent) {
       this.showDataTooltip = this.chart.containPixel('grid', [mouseEvent.zrX, mouseEvent.zrY]);
       this.dataTooltipPosition = {
-        left: `${mouseEvent.zrX + DATA_TOOLTIP_LEFT_OFFSET}px`,
+        left: `${mouseEvent.zrX}px`,
         top: `${mouseEvent.zrY}px`
       };
     },
@@ -289,7 +289,7 @@ var script = {
         this.annotationsTooltipContent = content;
         this.annotationsTooltipPosition = {
           left: `${event.event.zrX}px`,
-          top: `${event.event.zrY + ANNOTATION_TOOLTIP_TOP_OFFSET}px`
+          top: `${event.event.zrY}px`
         };
       }
     },

package/dist/components/charts/stacked_column/stacked_column.js

@@ -1,6 +1,6 @@
 import merge from 'lodash/merge';
 import { yAxis, generateBarSeries, generateLineSeries, defaultChartOptions, gridWithSecondaryYAxis, grid, dataZoomAdjustments, mergeSeriesToOptions } from '../../../utils/charts/config';
-import { LEGEND_AVERAGE_TEXT, LEGEND_MAX_TEXT, LEGEND_MIN_TEXT, LEGEND_CURRENT_TEXT, LEGEND_LAYOUT_INLINE, LEGEND_LAYOUT_TABLE, CHART_TYPE_LINE, ANNOTATION_TOOLTIP_TOP_OFFSET, HEIGHT_AUTO_CLASSES } from '../../../utils/charts/constants';
+import { LEGEND_AVERAGE_TEXT, LEGEND_MAX_TEXT, LEGEND_MIN_TEXT, LEGEND_CURRENT_TEXT, LEGEND_LAYOUT_INLINE, LEGEND_LAYOUT_TABLE, 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';
@@ -280,7 +280,7 @@ var script = {
       } = _ref4;
       this.tooltipPosition = {
         left: `${mouseEvent.zrX}px`,
-        top: `${mouseEvent.zrY + ANNOTATION_TOOLTIP_TOP_OFFSET}px`
+        top: `${mouseEvent.zrY}px`
       };
       this.showTooltip = this.chart.containPixel('grid', [mouseEvent.zrX, mouseEvent.zrY]);
     },

package/dist/components/charts/tooltip/tooltip.js

@@ -1,7 +1,8 @@
 import * as echarts from 'echarts';
-import { uid } from '../../../utils/utils';
+import { uid, debounceByAnimationFrame } from '../../../utils/utils';
 import GlPopover from '../../base/popover/popover';
 import { popoverPlacements } from '../../../utils/constants';
+import { TOOLTIP_LEFT_OFFSET, TOOLTIP_TOP_OFFSET } from '../../../utils/charts/constants';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 //
@@ -24,47 +25,155 @@ var script = {
       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'];
-      return props.reduce((accumulator, prop) => {
-        const position = this[prop];
-        if (position) {
-          accumulator[prop] = position;
-        }
-        return accumulator;
-      }, {});
+    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;
+      if (Number.isFinite(x) && Number.isFinite(y)) {
+        x = Math.round(x);
+        y = Math.round(y);
+        this.pointerPosition = {
+          left: `${x}px`,
+          top: `${y}px`
+        };
+        this.isPointerInChart = this.chart.containPixel('grid', [x, y]);
+      }
     }
   }
 };
@@ -73,7 +182,7 @@ var script = {
 const __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('div',{staticClass:"gl-chart-tooltip",staticStyle:{"width":"1px","height":"1px"},style:(_vm.containerPosition),attrs:{"id":_vm.containerId}}),_vm._v(" "),_c('gl-popover',_vm._b({attrs:{"target":_vm.containerId,"container":_vm.containerId,"placement":_vm.placement,"triggers":""},scopedSlots:_vm._u([(_vm.$scopedSlots.title)?{key:"title",fn:function(){return [_vm._t("title")]},proxy:true}:null],null,true)},'gl-popover',_vm.$attrs,false),[_vm._v(" "),_vm._t("default")],2)],1)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (_vm.chart)?_c('div',{staticClass:"gl-pointer-events-none"},[_c('div',{staticClass:"gl-chart-tooltip",style:(Object.assign({}, (_vm.fixedPosition || _vm.pointerPosition), _vm.targetStyle)),attrs:{"id":_vm.targetId}}),_vm._v(" "),_c('gl-popover',_vm._b({attrs:{"show":_vm.shouldShowPopover,"target":_vm.targetId,"container":_vm.targetId,"placement":_vm.placement,"triggers":""},scopedSlots:_vm._u([(_vm.$scopedSlots.title)?{key:"title",fn:function(){return [_vm._t("title")]},proxy:true}:null],null,true)},'gl-popover',_vm.$attrs,false),[_vm._v(" "),_vm._t("default")],2)],1):_vm._e()};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/tokens/css/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 15 Nov 2023 15:14:35 GMT
+ * Generated on Mon, 20 Nov 2023 13:24:46 GMT
  */
 
 :root {

package/dist/tokens/css/tokens.dark.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 15 Nov 2023 15:14:35 GMT
+ * Generated on Mon, 20 Nov 2023 13:24:46 GMT
  */
 
 :root.gl-dark {

package/dist/tokens/js/tokens.dark.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 15 Nov 2023 15:14:35 GMT
+ * Generated on Mon, 20 Nov 2023 13:24:46 GMT
  */
 
 export const BLACK = "#fff";

package/dist/tokens/js/tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 15 Nov 2023 15:14:35 GMT
+ * Generated on Mon, 20 Nov 2023 13:24:46 GMT
  */
 
 export const DATA_VIZ_GREEN_50 = "#ddfab7";

package/dist/tokens/scss/_tokens.dark.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Wed, 15 Nov 2023 15:14:35 GMT
+// Generated on Mon, 20 Nov 2023 13:24:46 GMT
 
 $red-950: #fff4f3;
 $red-900: #fcf1ef;

package/dist/tokens/scss/_tokens.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Wed, 15 Nov 2023 15:14:35 GMT
+// Generated on Mon, 20 Nov 2023 13:24:46 GMT
 
 $gl-line-height-52: 3.25rem;
 $gl-line-height-44: 2.75rem;