@gitlab/ui 71.9.1 → 71.10.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [71.10.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v71.9.1...v71.10.0) (2023-12-13)
+
+
+### Features
+
+* **GlLineChart, GlAreaChart:** Simplify chart tooltip API ([3658fb6](https://gitlab.com/gitlab-org/gitlab-ui/commit/3658fb6b3efb4a396703e7697d415541ec3aa417))
+
 ## [71.9.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v71.9.0...v71.9.1) (2023-12-13)
 
 

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 { defaultAreaOpacity, lineStyle, getThresholdConfig, generateAnnotationSeries, defaultChartOptions, dataZoomAdjustments, mergeSeriesToOptions, mergeAnnotationAxisToOptions, grid } from '../../../utils/charts/config';
 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 TooltipDefaultFormat from '../../shared_components/charts/tooltip_default_format';
 import Chart from '../chart/chart';
 import ChartLegend from '../legend/legend';
 import ChartTooltip from '../tooltip/tooltip';
@@ -15,8 +14,7 @@ var script = {
   components: {
     Chart,
     ChartLegend,
-    ChartTooltip,
-    TooltipDefaultFormat
+    ChartTooltip
   },
   inheritAttrs: false,
   props: {
@@ -49,6 +47,12 @@ var script = {
       required: false,
       default: null
     },
+    /**
+     * Callback called when showing or refreshing a tooltip.
+     * **Deprecated:** Use slots `#tooltip-title`, `#tooltip-content` or `#tooltip-value`.
+     *
+     * @deprecated Use slots `#tooltip-title`, `#tooltip-content` or `#tooltip-value`.
+     */
     formatTooltipText: {
       type: Function,
       required: false,
@@ -103,16 +107,13 @@ var script = {
     // https://gitlab.com/gitlab-org/gitlab-ui/-/issues/618
     return {
       chart: null,
-      dataTooltipTitle: '',
-      dataTooltipContent: {},
       showAnnotationsTooltip: false,
       annotationsTooltipTitle: '',
       annotationsTooltipContent: '',
       annotationsTooltipPosition: {
         left: '0',
         top: '0'
-      },
-      selectedFormatTooltipText: this.formatTooltipText || this.defaultFormatTooltipText
+      }
     };
   },
   computed: {
@@ -153,7 +154,7 @@ var script = {
               type: 'solid'
             },
             label: {
-              formatter: this.onLabelChange
+              formatter: this.formatTooltipText
             }
           }
         },
@@ -215,15 +216,6 @@ var script = {
     this.chart.off('mouseover', this.onChartMouseOver);
   },
   methods: {
-    defaultFormatTooltipText(params) {
-      // eslint-disable-next-line import/no-deprecated
-      const {
-        xLabels,
-        tooltipContent
-      } = getDefaultTooltipContent(params, this.options.yAxis.name);
-      this.$set(this, 'dataTooltipContent', tooltipContent);
-      this.dataTooltipTitle = xLabels.join(', ');
-    },
     defaultAnnotationTooltipText(params) {
       var _params$data$tooltipD;
       return {
@@ -273,9 +265,6 @@ var script = {
           top: `${event.event.zrY}px`
         };
       }
-    },
-    onLabelChange(params) {
-      this.selectedFormatTooltipText(params);
     }
   },
   HEIGHT_AUTO_CLASSES
@@ -287,7 +276,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,"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 _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,"use-default-tooltip-formatter":!_vm.formatTooltipText},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(),_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

@@ -168,20 +168,19 @@ var script = {
       const {
         yLabels,
         tooltipContent
-      } = this.getDefaultTooltipContent(params, this.xAxisTitle);
+      } = this.getTooltipContent(params, this.xAxisTitle);
       this.$set(this, 'tooltipContent', tooltipContent);
       this.tooltipTitle = yLabels.join(', ');
     },
     /**
-     * The existing getDefaultTooltipContent in utils works against the y-axis value.
-     * However, for bar charts, the tooltip should be against x-axis values.
+     * 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
      */
-    getDefaultTooltipContent(params) {
+    getTooltipContent(params) {
       let xAxisTitle = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
       const seriesDataLength = params.seriesData.length;
       const {

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

@@ -1,9 +1,8 @@
 import merge from 'lodash/merge';
-import { yAxis, generateBarSeries, generateLineSeries, defaultChartOptions, gridWithSecondaryYAxis, grid, dataZoomAdjustments, mergeSeriesToOptions, getDefaultTooltipContent } from '../../../utils/charts/config';
+import { yAxis, generateBarSeries, generateLineSeries, defaultChartOptions, gridWithSecondaryYAxis, grid, dataZoomAdjustments, mergeSeriesToOptions } from '../../../utils/charts/config';
 import { CHART_TYPE_LINE, HEIGHT_AUTO_CLASSES } from '../../../utils/charts/constants';
 import { colorFromDefaultPalette } from '../../../utils/charts/theme';
 import { columnOptions } from '../../../utils/constants';
-import TooltipDefaultFormat from '../../shared_components/charts/tooltip_default_format';
 import Chart from '../chart/chart';
 import ChartTooltip from '../tooltip/tooltip';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
@@ -20,8 +19,7 @@ var script = {
   name: 'GlColumnChart',
   components: {
     Chart,
-    ChartTooltip,
-    TooltipDefaultFormat
+    ChartTooltip
   },
   inheritAttrs: false,
   props: {
@@ -74,9 +72,7 @@ var script = {
   },
   data() {
     return {
-      chart: null,
-      tooltipTitle: '',
-      tooltipContent: {}
+      chart: null
     };
   },
   computed: {
@@ -158,11 +154,7 @@ var script = {
             show: false
           },
           axisPointer: {
-            show: true,
-            type: 'none',
-            label: {
-              formatter: this.onLabelChange
-            }
+            type: 'none'
           },
           name: this.xAxisTitle,
           type: this.xAxisType
@@ -188,15 +180,6 @@ var script = {
     onCreated(chart) {
       this.chart = chart;
       this.$emit('created', chart);
-    },
-    onLabelChange(params) {
-      // eslint-disable-next-line import/no-deprecated
-      const {
-        xLabels,
-        tooltipContent
-      } = getDefaultTooltipContent(params, this.yAxisTitle);
-      this.$set(this, 'tooltipContent', tooltipContent);
-      this.tooltipTitle = xLabels.join(', ');
     }
   },
   HEIGHT_AUTO_CLASSES
@@ -208,7 +191,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.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.xAxisTitle)+")")])]},proxy:true}],null,false,643259221)},[_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:"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.chart)?_c('chart-tooltip',{attrs:{"chart":_vm.chart,"use-default-tooltip-formatter":true}}):_vm._e()],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

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

@@ -1,6 +1,6 @@
 import merge from 'lodash/merge';
 import { GRAY_100, WHITE } from '../../../../dist/tokens/js/tokens';
-import { getDefaultTooltipContent } from '../../../utils/charts/config';
+import { getTooltipTitle, getTooltipContent } from '../../../utils/charts/config';
 import { HEIGHT_AUTO_CLASSES } from '../../../utils/charts/constants';
 import { heatmapHues } from '../../../utils/charts/theme';
 import { engineeringNotation } from '../../../utils/number_utils';
@@ -223,13 +223,8 @@ var script = {
   },
   methods: {
     defaultFormatTooltipText(params) {
-      // eslint-disable-next-line import/no-deprecated
-      const {
-        xLabels,
-        tooltipContent
-      } = getDefaultTooltipContent(params, this.computedOptions.yAxis.name);
-      this.$set(this.tooltip, 'content', tooltipContent);
-      this.tooltip.title = xLabels.join(', ');
+      this.tooltip.title = getTooltipTitle(params, this.computedOptions.xAxis.name);
+      this.tooltip.content = getTooltipContent(params, this.computedOptions.yAxis.name);
     },
     onCreated(chart) {
       this.chart = chart;
@@ -265,7 +260,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-heatmap",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.computedOptions},on:{"created":_vm.onCreated}},'chart',_vm.$attrs,false),_vm.$listeners)),_vm._v(" "),(_vm.chart)?_c('chart-tooltip',{attrs:{"chart":_vm.chart,"top":_vm.tooltip.top,"left":_vm.tooltip.left},scopedSlots:_vm._u([{key:"title",fn:function(){return [(_vm.formatTooltipText)?_vm._t("tooltip-title"):_c('div',[_vm._v("\n        "+_vm._s(_vm.tooltip.title)+"\n        "),(_vm.computedOptions.xAxis.name)?[_vm._v("("+_vm._s(_vm.computedOptions.xAxis.name)+")")]:_vm._e()],2)]},proxy:true}],null,true)},[_vm._v(" "),(_vm.formatTooltipText)?_vm._t("tooltip-content"):_c('tooltip-default-format',{attrs:{"tooltip-content":_vm.tooltip.content}})],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,"max-text":_vm.legendMaxText,"average-text":_vm.legendAverageText}}):_vm._e()],1)};
+var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"gl-heatmap",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.computedOptions},on:{"created":_vm.onCreated}},'chart',_vm.$attrs,false),_vm.$listeners)),_vm._v(" "),(_vm.chart)?_c('chart-tooltip',{attrs:{"chart":_vm.chart,"top":_vm.tooltip.top,"left":_vm.tooltip.left},scopedSlots:_vm._u([{key:"title",fn:function(){return [(_vm.formatTooltipText)?_vm._t("tooltip-title"):_c('div',[_vm._v(_vm._s(_vm.tooltip.title))])]},proxy:true}],null,true)},[_vm._v(" "),(_vm.formatTooltipText)?_vm._t("tooltip-content"):_c('tooltip-default-format',{attrs:{"tooltip-content":_vm.tooltip.content}})],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,"max-text":_vm.legendMaxText,"average-text":_vm.legendAverageText}}):_vm._e()],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

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

@@ -1,10 +1,9 @@
 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 { symbolSize, lineStyle, getThresholdConfig, generateAnnotationSeries, defaultChartOptions, dataZoomAdjustments, mergeSeriesToOptions, mergeAnnotationAxisToOptions, grid } from '../../../utils/charts/config';
 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 TooltipDefaultFormat from '../../shared_components/charts/tooltip_default_format';
 import Chart from '../chart/chart';
 import ChartLegend from '../legend/legend';
 import ChartTooltip from '../tooltip/tooltip';
@@ -16,8 +15,7 @@ var script = {
   components: {
     Chart,
     ChartLegend,
-    ChartTooltip,
-    TooltipDefaultFormat
+    ChartTooltip
   },
   inheritAttrs: false,
   props: {
@@ -45,6 +43,12 @@ var script = {
       required: false,
       default: true
     },
+    /**
+     * Callback called when showing or refreshing a tooltip.
+     * **Deprecated:** Use slots `#tooltip-title`, `#tooltip-content` or `#tooltip-value`.
+     *
+     * @deprecated Use slots `#tooltip-title`, `#tooltip-content` or `#tooltip-value`.
+     */
     formatTooltipText: {
       type: Function,
       required: false,
@@ -99,16 +103,13 @@ var script = {
     // https://gitlab.com/gitlab-org/gitlab-ui/-/issues/618
     return {
       chart: null,
-      dataTooltipTitle: '',
-      dataTooltipContent: {},
       showAnnotationsTooltip: false,
       annotationsTooltipTitle: '',
       annotationsTooltipContent: '',
       annotationsTooltipPosition: {
         left: '0',
         top: '0'
-      },
-      selectedFormatTooltipText: this.formatTooltipText || this.defaultFormatTooltipText
+      }
     };
   },
   computed: {
@@ -145,7 +146,7 @@ var script = {
           axisPointer: {
             show: true,
             label: {
-              formatter: this.onLabelChange
+              formatter: this.formatTooltipText
             }
           },
           axisTick: {
@@ -211,15 +212,6 @@ var script = {
     this.chart.off('mouseover', this.onChartDataPointMouseOver);
   },
   methods: {
-    defaultFormatTooltipText(params) {
-      // eslint-disable-next-line import/no-deprecated
-      const {
-        xLabels,
-        tooltipContent
-      } = getDefaultTooltipContent(params, this.options.yAxis.name);
-      this.$set(this, 'dataTooltipContent', tooltipContent);
-      this.dataTooltipTitle = xLabels.join(', ');
-    },
     defaultAnnotationTooltipText(params) {
       var _params$data$tooltipD;
       return {
@@ -270,9 +262,6 @@ var script = {
           top: `${event.event.zrY}px`
         };
       }
-    },
-    onLabelChange(params) {
-      this.selectedFormatTooltipText(params);
     }
   },
   HEIGHT_AUTO_CLASSES
@@ -284,7 +273,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",attrs:{"chart":_vm.chart},scopedSlots:_vm._u([{key:"title",fn:function(){return [(_vm.formatTooltipText)?_vm._t("tooltip-title"):_c('div',[_vm._v("\n        "+_vm._s(_vm.dataTooltipTitle)+"\n        "),(_vm.options.xAxis.name)?[_vm._v("("+_vm._s(_vm.options.xAxis.name)+")")]:_vm._e()],2)]},proxy:true}],null,true)},[_vm._v(" "),(_vm.formatTooltipText)?_vm._t("tooltip-content"):_c('tooltip-default-format',{attrs:{"tooltip-content":_vm.dataTooltipContent},scopedSlots:_vm._u([(_vm.$scopedSlots['tooltip-value'])?{key:"tooltip-value",fn:function(scope){return [_vm._t("tooltip-value",null,null,scope)]}}:null],null,true)})],2):_vm._e(),_vm._v(" "),(_vm.hasLegend)?_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,"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",attrs:{"chart":_vm.chart,"use-default-tooltip-formatter":!_vm.formatTooltipText},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(),_vm._v(" "),(_vm.hasLegend)?_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/tokens/css/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 13 Dec 2023 06:56:05 GMT
+ * Generated on Wed, 13 Dec 2023 16:29:09 GMT
  */
 
 :root {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 13 Dec 2023 06:56:05 GMT
+ * Generated on Wed, 13 Dec 2023 16:29:09 GMT
  */
 
 :root.gl-dark {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 13 Dec 2023 06:56:05 GMT
+ * Generated on Wed, 13 Dec 2023 16:29:09 GMT
  */
 
 export const DATA_VIZ_GREEN_50 = "#133a03";

package/dist/tokens/js/tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 13 Dec 2023 06:56:05 GMT
+ * Generated on Wed, 13 Dec 2023 16:29:09 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, 13 Dec 2023 06:56:05 GMT
+// Generated on Wed, 13 Dec 2023 16:29:09 GMT
 
 $red-950: #fff4f3;
 $red-900: #fcf1ef;

package/dist/tokens/scss/_tokens.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Wed, 13 Dec 2023 06:56:05 GMT
+// Generated on Wed, 13 Dec 2023 16:29:09 GMT
 
 $gl-line-height-52: 3.25rem;
 $gl-line-height-44: 2.75rem;

package/package.json

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

package/src/components/charts/area/area.spec.js

@@ -2,7 +2,11 @@ import { nextTick } from 'vue';
 import { shallowMount } from '@vue/test-utils';
 
 import { LEGEND_LAYOUT_INLINE, LEGEND_LAYOUT_TABLE } from '~/utils/charts/constants';
-import { createMockChartInstance, ChartTooltipStub } from '~helpers/chart_stubs';
+import {
+  createMockChartInstance,
+  ChartTooltipStub,
+  chartTooltipStubData,
+} from '~helpers/chart_stubs';
 import { expectHeightAutoClasses } from '~helpers/chart_height';
 import Chart from '../chart/chart.vue';
 import ChartLegend from '../legend/legend.vue';
@@ -24,13 +28,13 @@ describe('area component', () => {
 
   const emitChartCreated = () => findChart().vm.$emit('created', mockChartInstance);
 
-  const createShallowWrapper = ({ props = {}, slots = {} } = {}) => {
+  const createShallowWrapper = ({ props = {}, ...options } = {}) => {
     wrapper = shallowMount(AreaChart, {
       propsData: { option: { series: [] }, data: [], ...props },
       stubs: {
         'chart-tooltip': ChartTooltipStub,
       },
-      slots,
+      ...options,
     });
     emitChartCreated();
   };
@@ -136,13 +140,84 @@ describe('area component', () => {
     });
   });
 
-  describe('data tooltip is set', () => {
-    beforeEach(() => {
+  describe('data tooltip', () => {
+    it('is initialized', async () => {
       createShallowWrapper();
+
+      await nextTick();
+
+      expect(findDataTooltip().props()).toMatchObject({
+        useDefaultTooltipFormatter: true,
+        chart: mockChartInstance,
+      });
     });
 
-    it('is initialized', () => {
-      expect(findDataTooltip().props('chart')).toBe(mockChartInstance);
+    describe('is customized via slots', () => {
+      const { params, title, content } = chartTooltipStubData;
+      const value = params.seriesData[0].value[1];
+
+      it('customizes tooltip value', async () => {
+        const tooltipValueSlot = jest.fn().mockReturnValue('Value');
+
+        createShallowWrapper({
+          scopedSlots: {
+            'tooltip-value': tooltipValueSlot,
+          },
+        });
+        await nextTick();
+
+        expect(tooltipValueSlot).toHaveBeenCalledWith({ value });
+        expect(findDataTooltip().text()).toBe('Value');
+      });
+
+      it('customizes title', async () => {
+        const tooltipTitleSlot = jest.fn().mockReturnValue('Title');
+
+        createShallowWrapper({
+          scopedSlots: {
+            'tooltip-title': tooltipTitleSlot,
+          },
+        });
+        await nextTick();
+
+        expect(tooltipTitleSlot).toHaveBeenCalledWith({
+          params,
+          title,
+        });
+        expect(findDataTooltip().text()).toBe('Title');
+      });
+
+      it('customizes content', async () => {
+        const tooltipContentSlot = jest.fn().mockReturnValue('Title');
+
+        createShallowWrapper({
+          scopedSlots: {
+            'tooltip-content': tooltipContentSlot,
+          },
+        });
+        await nextTick();
+
+        expect(tooltipContentSlot).toHaveBeenCalledWith({
+          params,
+          content,
+        });
+        expect(findDataTooltip().text()).toBe('Title');
+      });
+    });
+
+    it('is customized via formatting function', async () => {
+      createShallowWrapper({
+        props: {
+          formatTooltipText: jest.fn(),
+        },
+      });
+
+      await nextTick();
+
+      expect(findDataTooltip().props()).toMatchObject({
+        useDefaultTooltipFormatter: false,
+        chart: mockChartInstance,
+      });
     });
   });
 

package/src/components/charts/area/area.stories.js

@@ -7,6 +7,9 @@ import { timeSeriesDateFormatter } from '../../../utils/charts/utils';
 import { generateTimeSeries } from '../../../utils/data_utils';
 import { disableControls } from '../../../utils/stories_utils';
 
+const components = {
+  GlAreaChart,
+};
 const defaultData = [
   {
     name: 'First Series',
@@ -29,7 +32,7 @@ const defaultOptions = {
   },
 };
 
-const template = `<gl-area-chart
+const template = (content) => `<gl-area-chart
   :data="data"
   :option="option"
   :thresholds="thresholds"
@@ -37,7 +40,9 @@ const template = `<gl-area-chart
   :includeLegendAvgMax="includeLegendAvgMax"
   :height="height"
   :legendSeriesInfo="legendSeriesInfo"
-/>`;
+  >
+    ${content}
+  </gl-area-chart>`;
 
 const generateProps = ({
   data = defaultData,
@@ -58,11 +63,9 @@ const generateProps = ({
 });
 
 const Template = (args, { argTypes }) => ({
-  components: {
-    GlAreaChart,
-  },
+  components,
   props: Object.keys(argTypes),
-  template,
+  template: template(),
 });
 
 export const Default = Template.bind({});
@@ -175,6 +178,21 @@ WithCustomLegendItems.args = generateProps({
   ],
 });
 
+export const WithCustomTooltip = (_args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components,
+  template: template(`
+    <template #tooltip-title="{ params }">{{params && params.value}}</template>
+    <template #tooltip-content="{ params }">
+      <div v-if="params">{{params.seriesData[0].seriesName}}: {{params.seriesData[0].value[1]}}</div>
+    </template>
+  `),
+});
+WithCustomTooltip.args = generateProps();
+WithCustomTooltip.parameters = {
+  storyshots: { disable: true },
+};
+
 export default {
   title: 'charts/area-chart',
   component: GlAreaChart,