@gitlab/ui 122.4.0 → 122.6.0

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

@@ -5,7 +5,6 @@ import { CHART_DEFAULT_SERIES_STACK, HEIGHT_AUTO_CLASSES } from '../../../utils/
 import { colorFromDefaultPalette } from '../../../utils/charts/theme';
 import { engineeringNotation } from '../../../utils/number_utils';
 import { hexToRgba } from '../../../utils/utils';
-import TooltipDefaultFormat from '../shared/tooltip/tooltip_default_format/tooltip_default_format';
 import Chart from '../chart/chart';
 import ChartTooltip from '../shared/tooltip/tooltip';
 import { stackedPresentationOptions } from '../../../utils/constants';
@@ -63,8 +62,7 @@ var script = {
   name: 'GlBarChart',
   components: {
     Chart,
-    ChartTooltip,
-    TooltipDefaultFormat
+    ChartTooltip
   },
   inheritAttrs: false,
   props: {
@@ -112,9 +110,7 @@ var script = {
   },
   data() {
     return {
-      chart: null,
-      tooltipTitle: '',
-      tooltipContent: {}
+      chart: null
     };
   },
   computed: {
@@ -154,13 +150,6 @@ var script = {
           type: 'category',
           axisTick: {
             show: true
-          },
-          axisPointer: {
-            show: true,
-            type: 'none',
-            label: {
-              formatter: this.onLabelChange
-            }
           }
         }
       }, this.option, dataZoomAdjustments(this.option.dataZoom));
@@ -176,50 +165,6 @@ var script = {
     onCreated(chart) {
       this.chart = chart;
       this.$emit('created', chart);
-    },
-    onLabelChange(params) {
-      const {
-        yLabels,
-        tooltipContent
-      } = this.getTooltipContent(params, this.xAxisTitle);
-      this.$set(this, 'tooltipContent', tooltipContent);
-      this.tooltipTitle = yLabels.join(', ');
-    },
-    /**
-     * For bar charts, the tooltip should be against x-axis values.
-     * This method will be removed after https://gitlab.com/gitlab-org/gitlab-ui/-/issues/674
-     *
-     * @param {Object} params series data
-     * @param {String} xAxisTitle x-axis title
-     * @returns {Object} tooltip title and content
-     */
-    getTooltipContent(params) {
-      let xAxisTitle = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
-      const seriesDataLength = params.seriesData.length;
-      const {
-        yLabels,
-        tooltipContent
-      } = params.seriesData.reduce((acc, chartItem) => {
-        const [value, title] = chartItem.value || [];
-        // The x axis title is used instead of y axis
-        const seriesName = seriesDataLength === 1 && xAxisTitle ? xAxisTitle : chartItem.seriesName;
-        const color = seriesDataLength === 1 ? '' : chartItem.color;
-        acc.tooltipContent[seriesName] = {
-          value,
-          color
-        };
-        if (!acc.yLabels.includes(title)) {
-          acc.yLabels.push(title);
-        }
-        return acc;
-      }, {
-        yLabels: [],
-        tooltipContent: {}
-      });
-      return {
-        yLabels,
-        tooltipContent
-      };
     }
   },
   HEIGHT_AUTO_CLASSES
@@ -231,7 +176,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:"gl-relative",class:( _obj = {}, _obj[_vm.$options.HEIGHT_AUTO_CLASSES] = _vm.autoHeight, _obj )},[_c('chart',_vm._g(_vm._b({class:{ 'gl-grow': _vm.autoHeight },attrs:{"height":_vm.height,"options":_vm.options},on:{"created":_vm.onCreated}},'chart',_vm.$attrs,false),_vm.$listeners)),_vm._v(" "),(_vm.chart)?_c('chart-tooltip',{attrs:{"chart":_vm.chart},scopedSlots:_vm._u([{key:"title",fn:function(){return [_c('div',[_vm._v(_vm._s(_vm.tooltipTitle)+" ("+_vm._s(_vm.yAxisTitle)+")")])]},proxy:true}],null,false,1644826356)},[_vm._v(" "),_c('tooltip-default-format',{attrs:{"tooltip-content":_vm.tooltipContent}})],1):_vm._e()],1)};
+var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"gl-relative",class:( _obj = {}, _obj[_vm.$options.HEIGHT_AUTO_CLASSES] = _vm.autoHeight, _obj )},[_c('chart',_vm._g(_vm._b({class:{ 'gl-grow': _vm.autoHeight },attrs:{"height":_vm.height,"options":_vm.options},on:{"created":_vm.onCreated}},'chart',_vm.$attrs,false),_vm.$listeners)),_vm._v(" "),(_vm.chart)?_c('chart-tooltip',{attrs:{"chart":_vm.chart,"use-default-tooltip-formatter":true,"dimension-axis":"yAxis"},scopedSlots:_vm._u([(_vm.$scopedSlots['tooltip-title'])?{key:"title",fn:function(scope){return [_vm._t("tooltip-title",null,null,scope)]}}:null,(_vm.$scopedSlots['tooltip-content'])?{key:"default",fn:function(scope){return [_vm._t("tooltip-content",null,null,scope)]}}:null,(_vm.$scopedSlots['tooltip-value'])?{key:"tooltip-value",fn:function(scope){return [_vm._t("tooltip-value",null,null,scope)]}}:null],null,true)}):_vm._e()],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

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

@@ -3,7 +3,7 @@ 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 { getTooltipTitle, getTooltipContent } from '../../../../utils/charts/config';
+import { getTooltipAxisConfig, getTooltipTitle, getTooltipContent } from '../../../../utils/charts/config';
 import TooltipDefaultFormat from './tooltip_default_format/tooltip_default_format';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
@@ -125,6 +125,20 @@ var script = {
       type: Boolean,
       required: false,
       default: false
+    },
+    /**
+     * Specifies which axis contains the dimensional data used in the tooltip.
+     * When `xAxis`, x-axis value becomes the tooltip's title and
+     * y-axis values become the tooltip's values.
+     * When `yAxis`, roles are reversed.
+     */
+    dimensionAxis: {
+      type: String,
+      required: false,
+      default: 'xAxis',
+      validator(value) {
+        return value === 'xAxis' || value === 'yAxis';
+      }
     }
   },
   data() {
@@ -209,17 +223,22 @@ var script = {
     }
     if (this.useDefaultTooltipFormatter) {
       this.chart.setOption({
-        xAxis: {
+        [this.dimensionAxis]: {
           axisPointer: {
             show: true,
             label: {
               formatter: params => {
-                var _options$xAxis, _options$xAxis$, _options$yAxis, _options$yAxis$;
+                var _options$this$dimensi, _options$this$dimensi2, _options$valueAxis, _options$valueAxis$;
                 const options = this.chart.getOption();
-                const titleAxisName = (_options$xAxis = options.xAxis) === null || _options$xAxis === void 0 ? void 0 : (_options$xAxis$ = _options$xAxis[0]) === null || _options$xAxis$ === void 0 ? void 0 : _options$xAxis$.name;
-                const valueAxisName = (_options$yAxis = options.yAxis) === null || _options$yAxis === void 0 ? void 0 : (_options$yAxis$ = _options$yAxis[0]) === null || _options$yAxis$ === void 0 ? void 0 : _options$yAxis$.name;
-                this.title = getTooltipTitle(params, titleAxisName);
-                this.content = getTooltipContent(params, valueAxisName);
+                const {
+                  dimensionIndex,
+                  metricIndex,
+                  valueAxis
+                } = getTooltipAxisConfig(this.dimensionAxis);
+                const titleAxisName = (_options$this$dimensi = options[this.dimensionAxis]) === null || _options$this$dimensi === void 0 ? void 0 : (_options$this$dimensi2 = _options$this$dimensi[0]) === null || _options$this$dimensi2 === void 0 ? void 0 : _options$this$dimensi2.name;
+                const valueAxisName = (_options$valueAxis = options[valueAxis]) === null || _options$valueAxis === void 0 ? void 0 : (_options$valueAxis$ = _options$valueAxis[0]) === null || _options$valueAxis$ === void 0 ? void 0 : _options$valueAxis$.name;
+                this.title = getTooltipTitle(params, titleAxisName, dimensionIndex);
+                this.content = getTooltipContent(params, valueAxisName, metricIndex);
                 this.params = params;
               }
             }

package/dist/components/dashboards/dashboard_panel/dashboard_panel.js

@@ -71,12 +71,15 @@ var script = {
     },
     /**
      * Configuration object for the title popover. Expected structure:
+     * **Deprecated:** Use slots `#info-popover-content` and `#info-popover-title` instead.
      *
      * - `description`: The popover text content with interpolation placeholders.
      *   Uses `%{linkStart}` and `%{linkEnd}` as markers for where a link should be inserted.
      *
      * - `descriptionLink`: The optional URL that will be used for the link portion
      *   of the description text between the linkStart and linkEnd markers.
+     *
+     * @deprecated Use slots `#info-popover-content` and `#info-popover-title` instead.
      */
     titlePopover: {
       type: Object,
@@ -151,9 +154,15 @@ var script = {
     hasTitle() {
       return Boolean(this.title);
     },
+    hasInfoPopoverContentSlot() {
+      return Boolean(this.$scopedSlots['info-popover-content']);
+    },
+    hasInfoPopoverTitleSlot() {
+      return Boolean(this.$scopedSlots['info-popover-title']);
+    },
     hasTitlePopover() {
       var _this$titlePopover;
-      return Boolean((_this$titlePopover = this.titlePopover) === null || _this$titlePopover === void 0 ? void 0 : _this$titlePopover.description);
+      return Boolean((_this$titlePopover = this.titlePopover) === null || _this$titlePopover === void 0 ? void 0 : _this$titlePopover.description) || this.hasInfoPopoverContentSlot || this.hasInfoPopoverTitleSlot;
     },
     hasTitlePopoverLink() {
       var _this$titlePopover2;
@@ -173,9 +182,9 @@ 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',{staticClass:"gl-border gl-h-full !gl-overflow-visible gl-rounded-lg gl-bg-white gl-p-5",class:_vm.containerClasses,attrs:{"id":_vm.panelId}},[_c('div',{staticClass:"gl-flex gl-h-full gl-flex-col"},[_c('div',{staticClass:"gl-flex gl-items-start gl-justify-between",attrs:{"data-testid":"panel-title"}},[_c('div',{staticClass:"gl-flex gl-items-center gl-overflow-hidden gl-pb-3"},[(_vm.hasTitleIcon)?_c('gl-icon',{staticClass:"gl-mr-2",class:_vm.titleIconClass,attrs:{"name":_vm.titleIcon,"data-testid":"panel-title-icon"}}):_vm._e(),_vm._v(" "),(_vm.hasTitle)?_c('gl-truncate',{staticClass:"gl-font-bold gl-text-default",attrs:{"text":_vm.title,"with-tooltip":""}}):_vm._e(),_vm._v(" "),(_vm.hasTitlePopover)?[_c('gl-icon',{staticClass:"gl-ml-2",attrs:{"id":_vm.titlePopoverId,"data-testid":"panel-title-popover-icon","name":"information-o","variant":"info"}}),_vm._v(" "),_c('gl-popover',{attrs:{"data-testid":"panel-title-popover","boundary":"viewport","target":_vm.titlePopoverId}},[(_vm.hasTitlePopoverLink)?_c('gl-sprintf',{attrs:{"message":_vm.titlePopover.description},scopedSlots:_vm._u([{key:"link",fn:function(ref){
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"gl-border gl-h-full !gl-overflow-visible gl-rounded-lg gl-bg-white gl-p-5",class:_vm.containerClasses,attrs:{"id":_vm.panelId}},[_c('div',{staticClass:"gl-flex gl-h-full gl-flex-col"},[_c('div',{staticClass:"gl-flex gl-items-start gl-justify-between",attrs:{"data-testid":"panel-title"}},[_c('div',{staticClass:"gl-flex gl-items-center gl-overflow-hidden gl-pb-3"},[(_vm.hasTitleIcon)?_c('gl-icon',{staticClass:"gl-mr-2",class:_vm.titleIconClass,attrs:{"name":_vm.titleIcon,"data-testid":"panel-title-icon"}}):_vm._e(),_vm._v(" "),(_vm.hasTitle)?_c('gl-truncate',{staticClass:"gl-font-bold gl-text-default",attrs:{"text":_vm.title,"with-tooltip":""}}):_vm._e(),_vm._v(" "),(_vm.hasTitlePopover)?[_c('gl-icon',{staticClass:"gl-ml-2",attrs:{"id":_vm.titlePopoverId,"data-testid":"panel-title-popover-icon","name":"information-o","variant":"info"}}),_vm._v(" "),_c('gl-popover',{attrs:{"data-testid":"panel-title-popover","boundary":"viewport","target":_vm.titlePopoverId},scopedSlots:_vm._u([(_vm.hasInfoPopoverTitleSlot)?{key:"title",fn:function(){return [_vm._t("info-popover-title")]},proxy:true}:null],null,true)},[_vm._v(" "),(_vm.hasInfoPopoverContentSlot)?[_vm._t("info-popover-content")]:_vm._e(),_vm._v(" "),(!_vm.hasInfoPopoverContentSlot)?[(_vm.hasTitlePopoverLink)?_c('gl-sprintf',{attrs:{"message":_vm.titlePopover.description},scopedSlots:_vm._u([{key:"link",fn:function(ref){
 var content = ref.content;
-return [_c('gl-link',{staticClass:"gl-text-sm",attrs:{"href":_vm.titlePopover.descriptionLink}},[_vm._v(_vm._s(content))])]}}],null,false,3051540671)}):[_vm._v("\n              "+_vm._s(_vm.titlePopover.description)+"\n            ")]],2)]:_vm._e()],2),_vm._v(" "),(_vm.shouldShowActions || _vm.$scopedSlots.filters)?_c('div',{staticClass:"gl-flex gl-flex-col gl-items-end gl-gap-2",attrs:{"data-testid":"panel-actions-filters-container"}},[(_vm.shouldShowActions)?_c('gl-disclosure-dropdown',{attrs:{"items":_vm.actions,"icon":"ellipsis_v","toggle-text":_vm.actionsToggleText,"text-sr-only":"","no-caret":"","placement":"bottom-end","fluid-width":"","toggle-class":"gl-ml-1","category":"tertiary","positioning-strategy":"fixed","size":"small"},on:{"shown":function($event){return _vm.$emit('dropdownOpen')},"hidden":function($event){return _vm.$emit('dropdownClosed')}},scopedSlots:_vm._u([{key:"list-item",fn:function(ref){
+return [_c('gl-link',{staticClass:"gl-text-sm",attrs:{"href":_vm.titlePopover.descriptionLink}},[_vm._v(_vm._s(content))])]}}],null,false,3051540671)}):[_vm._v(" "+_vm._s(_vm.titlePopover.description)+" ")]]:_vm._e()],2)]:_vm._e()],2),_vm._v(" "),(_vm.shouldShowActions || _vm.$scopedSlots.filters)?_c('div',{staticClass:"gl-flex gl-flex-col gl-items-end gl-gap-2",attrs:{"data-testid":"panel-actions-filters-container"}},[(_vm.shouldShowActions)?_c('gl-disclosure-dropdown',{attrs:{"items":_vm.actions,"icon":"ellipsis_v","toggle-text":_vm.actionsToggleText,"text-sr-only":"","no-caret":"","placement":"bottom-end","fluid-width":"","toggle-class":"gl-ml-1","category":"tertiary","positioning-strategy":"fixed","size":"small"},on:{"shown":function($event){return _vm.$emit('dropdownOpen')},"hidden":function($event){return _vm.$emit('dropdownClosed')}},scopedSlots:_vm._u([{key:"list-item",fn:function(ref){
 var item = ref.item;
 return [_c('span',[_vm._v(_vm._s(item.text))])]}}],null,false,3418607560)}):_vm._e(),_vm._v(" "),(_vm.$scopedSlots.filters)?_c('div',{staticClass:"gl-flex gl-items-center gl-justify-end gl-pb-2",attrs:{"data-testid":"panel-filters-container"}},[_vm._t("filters")],2):_vm._e()],1):_vm._e()]),_vm._v(" "),_c('div',{class:_vm.bodyClasses},[(_vm.loading)?[_c('gl-loading-icon',{staticClass:"gl-min-h-8 gl-w-full",attrs:{"size":"lg"}}),_vm._v(" "),(_vm.isLoadingDelayed)?_c('div',{staticClass:"gl-w-full gl-text-subtle",attrs:{"data-testId":"panel-loading-delayed-indicator"}},[_vm._v("\n          "+_vm._s(_vm.loadingDelayedText)+"\n        ")]):_vm._e()]:_vm._t("body")],2),_vm._v(" "),_vm._t("alert-message",null,{"panelId":_vm.panelId})],2)])};
 var __vue_staticRenderFns__ = [];