@gitlab/ui 122.4.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;
               }
             }

package/dist/utils/charts/config.js

@@ -468,24 +468,44 @@ const generateLineSeries = _ref5 => {
     }
   };
 };
+const getTooltipAxisConfig = dimensionAxis => {
+  if (!['xAxis', 'yAxis'].includes(dimensionAxis)) {
+    throw new Error(`\`dimensionAxis\` must be "xAxis" or "yAxis", received ${dimensionAxis}`);
+  }
+  if (dimensionAxis === 'xAxis') {
+    return {
+      dimensionIndex: 0,
+      metricIndex: 1,
+      valueAxis: 'yAxis'
+    };
+  }
+  return {
+    dimensionIndex: 1,
+    metricIndex: 0,
+    valueAxis: 'xAxis'
+  };
+};
 const getTooltipTitle = function () {
   let params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
   let titleAxisName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+  let dimensionIndex = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
   if (!params) return '';
   const title = params.seriesData.reduce((acc, _ref6) => {
     let {
       value
     } = _ref6;
-    if (acc.includes(value[0])) {
+    const dimension = value[dimensionIndex];
+    if (acc.includes(dimension)) {
       return acc;
     }
-    return [...acc, value[0]];
+    return [...acc, dimension];
   }, []).join(', ');
   return titleAxisName ? `${title} (${titleAxisName})` : title;
 };
 const getTooltipContent = function () {
   let params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
   let valueAxisName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+  let metricIndex = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
   if (!params) {
     return {};
   }
@@ -494,12 +514,12 @@ const getTooltipContent = function () {
   } = params;
   if (seriesData.length === 1) {
     const {
-      value: [, yValue],
+      value,
       seriesName
     } = seriesData[0];
     return {
       [valueAxisName || seriesName]: {
-        value: yValue,
+        value: value[metricIndex],
         color: '' // ignore color when showing a single series
       }
     };
@@ -510,9 +530,8 @@ const getTooltipContent = function () {
       seriesName,
       color
     } = _ref7;
-    const yValue = value[1];
     acc[seriesName] = {
-      value: yValue,
+      value: value[metricIndex],
       color
     };
     return acc;
@@ -560,4 +579,4 @@ const getDefaultTooltipContent = function (params) {
   };
 };
 
-export { annotationsYAxisCoords, axes, dataZoomAdjustments, defaultAreaOpacity, defaultChartOptions, defaultFontSize, defaultHeight, defaultWidth, generateAnnotationSeries, generateBarSeries, generateLineSeries, getAnnotationsConfig, getDataZoomConfig, getDefaultTooltipContent, getThresholdConfig, getTooltipContent, getTooltipTitle, grid, gridWithSecondaryYAxis, lineStyle, mergeAnnotationAxisToOptions, mergeSeriesToOptions, parseAnnotations, symbolSize, toolboxHeight, validRenderers, xAxis, yAxis };
+export { annotationsYAxisCoords, axes, dataZoomAdjustments, defaultAreaOpacity, defaultChartOptions, defaultFontSize, defaultHeight, defaultWidth, generateAnnotationSeries, generateBarSeries, generateLineSeries, getAnnotationsConfig, getDataZoomConfig, getDefaultTooltipContent, getThresholdConfig, getTooltipAxisConfig, getTooltipContent, getTooltipTitle, grid, gridWithSecondaryYAxis, lineStyle, mergeAnnotationAxisToOptions, mergeSeriesToOptions, parseAnnotations, symbolSize, toolboxHeight, validRenderers, xAxis, yAxis };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "122.4.0",
+  "version": "122.5.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

package/src/components/charts/bar/bar.vue

@@ -7,7 +7,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.vue';
 import Chart from '../chart/chart.vue';
 import ChartTooltip from '../shared/tooltip/tooltip.vue';
 import { stackedPresentationOptions } from '../../../utils/constants';
@@ -64,7 +63,6 @@ export default {
   components: {
     Chart,
     ChartTooltip,
-    TooltipDefaultFormat,
   },
   inheritAttrs: false,
   props: {
@@ -113,8 +111,6 @@ export default {
   data() {
     return {
       chart: null,
-      tooltipTitle: '',
-      tooltipContent: {},
     };
   },
   computed: {
@@ -162,13 +158,6 @@ export default {
             axisTick: {
               show: true,
             },
-            axisPointer: {
-              show: true,
-              type: 'none',
-              label: {
-                formatter: this.onLabelChange,
-              },
-            },
           },
         },
         this.option,
@@ -187,46 +176,6 @@ export default {
       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, xAxisTitle = 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,
 };
@@ -242,11 +191,21 @@ export default {
       v-on="$listeners"
       @created="onCreated"
     />
-    <chart-tooltip v-if="chart" :chart="chart">
-      <template #title>
-        <div>{{ tooltipTitle }} ({{ yAxisTitle }})</div>
+    <chart-tooltip
+      v-if="chart"
+      :chart="chart"
+      :use-default-tooltip-formatter="true"
+      dimension-axis="yAxis"
+    >
+      <template v-if="$scopedSlots['tooltip-title']" #title="scope">
+        <slot name="tooltip-title" v-bind="scope"></slot>
+      </template>
+      <template v-if="$scopedSlots['tooltip-content']" #default="scope">
+        <slot name="tooltip-content" v-bind="scope"></slot>
+      </template>
+      <template v-if="$scopedSlots['tooltip-value']" #tooltip-value="scope">
+        <slot name="tooltip-value" v-bind="scope"></slot>
       </template>
-      <tooltip-default-format :tooltip-content="tooltipContent" />
     </chart-tooltip>
   </div>
 </template>

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

@@ -5,7 +5,11 @@ 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';
-import { getTooltipTitle, getTooltipContent } from '../../../../utils/charts/config';
+import {
+  getTooltipTitle,
+  getTooltipContent,
+  getTooltipAxisConfig,
+} from '../../../../utils/charts/config';
 
 import TooltipDefaultFormat from './tooltip_default_format/tooltip_default_format.vue';
 
@@ -127,6 +131,20 @@ export default {
       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() {
     return {
@@ -208,17 +226,22 @@ export default {
 
     if (this.useDefaultTooltipFormatter) {
       this.chart.setOption({
-        xAxis: {
+        [this.dimensionAxis]: {
           axisPointer: {
             show: true,
             label: {
               formatter: (params) => {
                 const options = this.chart.getOption();
-                const titleAxisName = options.xAxis?.[0]?.name;
-                const valueAxisName = options.yAxis?.[0]?.name;
 
-                this.title = getTooltipTitle(params, titleAxisName);
-                this.content = getTooltipContent(params, valueAxisName);
+                const { dimensionIndex, metricIndex, valueAxis } = getTooltipAxisConfig(
+                  this.dimensionAxis,
+                );
+
+                const titleAxisName = options[this.dimensionAxis]?.[0]?.name;
+                const valueAxisName = options[valueAxis]?.[0]?.name;
+
+                this.title = getTooltipTitle(params, titleAxisName, dimensionIndex);
+                this.content = getTooltipContent(params, valueAxisName, metricIndex);
                 this.params = params;
               },
             },

package/src/utils/charts/config.js

@@ -432,22 +432,36 @@ export const generateLineSeries = ({ name, color, data = [], yAxisIndex = 0 }) =
   itemStyle: { color },
 });
 
-export const getTooltipTitle = (params = null, titleAxisName = null) => {
+export const getTooltipAxisConfig = (dimensionAxis) => {
+  if (!['xAxis', 'yAxis'].includes(dimensionAxis)) {
+    throw new Error(`\`dimensionAxis\` must be "xAxis" or "yAxis", received ${dimensionAxis}`);
+  }
+
+  if (dimensionAxis === 'xAxis') {
+    return { dimensionIndex: 0, metricIndex: 1, valueAxis: 'yAxis' };
+  }
+
+  return { dimensionIndex: 1, metricIndex: 0, valueAxis: 'xAxis' };
+};
+
+export const getTooltipTitle = (params = null, titleAxisName = null, dimensionIndex = 0) => {
   if (!params) return '';
 
   const title = params.seriesData
     .reduce((acc, { value }) => {
-      if (acc.includes(value[0])) {
+      const dimension = value[dimensionIndex];
+
+      if (acc.includes(dimension)) {
         return acc;
       }
-      return [...acc, value[0]];
+      return [...acc, dimension];
     }, [])
     .join(', ');
 
   return titleAxisName ? `${title} (${titleAxisName})` : title;
 };
 
-export const getTooltipContent = (params = null, valueAxisName = null) => {
+export const getTooltipContent = (params = null, valueAxisName = null, metricIndex = 1) => {
   if (!params) {
     return {};
   }
@@ -455,22 +469,19 @@ export const getTooltipContent = (params = null, valueAxisName = null) => {
   const { seriesData } = params;
 
   if (seriesData.length === 1) {
-    const {
-      value: [, yValue],
-      seriesName,
-    } = seriesData[0];
+    const { value, seriesName } = seriesData[0];
 
     return {
       [valueAxisName || seriesName]: {
-        value: yValue,
+        value: value[metricIndex],
         color: '', // ignore color when showing a single series
       },
     };
   }
 
   return seriesData.reduce((acc, { value, seriesName, color }) => {
-    const yValue = value[1];
-    acc[seriesName] = { value: yValue, color };
+    acc[seriesName] = { value: value[metricIndex], color };
+
     return acc;
   }, {});
 };