@gitlab/ui 122.3.0 → 122.5.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;
               }
             }