@gitlab/ui 71.4.0 → 71.5.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [71.5.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v71.4.0...v71.5.0) (2023-12-05)
+
+
+### Features
+
+* **GlChartTooltip:** Add slot API for chart tooltip ([572b33e](https://gitlab.com/gitlab-org/gitlab-ui/commit/572b33e5151f2d0508bca07d895f3cd444f4af54))
+
 # [71.4.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v71.3.0...v71.4.0) (2023-12-04)
 
 

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

@@ -216,6 +216,7 @@ var script = {
   },
   methods: {
     defaultFormatTooltipText(params) {
+      // eslint-disable-next-line import/no-deprecated
       const {
         xLabels,
         tooltipContent

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

@@ -190,6 +190,7 @@ var script = {
       this.$emit('created', chart);
     },
     onLabelChange(params) {
+      // eslint-disable-next-line import/no-deprecated
       const {
         xLabels,
         tooltipContent

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

@@ -223,6 +223,7 @@ var script = {
   },
   methods: {
     defaultFormatTooltipText(params) {
+      // eslint-disable-next-line import/no-deprecated
       const {
         xLabels,
         tooltipContent

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

@@ -212,6 +212,7 @@ var script = {
   },
   methods: {
     defaultFormatTooltipText(params) {
+      // eslint-disable-next-line import/no-deprecated
       const {
         xLabels,
         tooltipContent

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

@@ -3,13 +3,16 @@ 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 TooltipDefaultFormat from '../../shared_components/charts/tooltip_default_format';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 //
 var script = {
   name: 'GlChartTooltip',
   components: {
-    GlPopover
+    GlPopover,
+    TooltipDefaultFormat
   },
   inheritAttrs: false,
   props: {
@@ -103,13 +106,24 @@ var script = {
         // popover target must have a size of at least 1
         return value >= 1;
       }
+    },
+    /**
+     * Set to true to use the default tooltip formatter.
+     */
+    useDefaultTooltipFormatter: {
+      type: Boolean,
+      required: false,
+      default: false
     }
   },
   data() {
     return {
       pointerPosition: null,
       isPointerInChart: false,
-      debouncedMouseHandler: debounceByAnimationFrame(this.mouseHandler)
+      debouncedMouseHandler: debounceByAnimationFrame(this.mouseHandler),
+      title: null,
+      content: {},
+      params: null
     };
   },
   computed: {
@@ -154,6 +168,26 @@ var script = {
   created() {
     this.chart.getZr().on('mousemove', this.debouncedMouseHandler);
     this.chart.getZr().on('mouseout', this.debouncedMouseHandler);
+    if (this.useDefaultTooltipFormatter) {
+      this.chart.setOption({
+        xAxis: {
+          axisPointer: {
+            show: true,
+            label: {
+              formatter: params => {
+                var _options$xAxis, _options$xAxis$, _options$yAxis, _options$yAxis$;
+                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);
+                this.params = params;
+              }
+            }
+          }
+        }
+      });
+    }
   },
   beforeDestroy() {
     this.chart.getZr().off('mousemove', this.debouncedMouseHandler);
@@ -182,7 +216,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 (_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_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([{key:"title",fn:function(){return [_vm._t("title",function(){return [_vm._v(_vm._s(_vm.title))]},null,{ title: _vm.title, params: _vm.params })]},proxy:true}],null,true)},'gl-popover',_vm.$attrs,false),[_vm._v(" "),_vm._t("default",function(){return [_c('tooltip-default-format',{attrs:{"tooltip-content":_vm.content},scopedSlots:_vm._u([(_vm.$scopedSlots['tooltip-value'])?{key:"tooltip-value",fn:function(scope){return [_vm._t("tooltip-value",null,null,scope)]}}:null],null,true)})]},null,{ content: _vm.content, params: _vm.params })],2)],1):_vm._e()};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/experimental/duo/chat/duo_chat.js

@@ -119,7 +119,7 @@ var script = {
       default: () => i18n.CHAT_DEFAULT_PREDEFINED_PROMPTS
     },
     /**
-     * URL to the experiment/beta help page. This is passed down to the `GlExperimentBadge` component. Refer that component for more information.
+     * URL to the help page. This is passed down to the `GlExperimentBadge` component.
      */
     badgeHelpPageUrl: {
       type: String,

package/dist/tokens/css/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 04 Dec 2023 16:16:35 GMT
+ * Generated on Tue, 05 Dec 2023 00:03:14 GMT
  */
 
 :root {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 04 Dec 2023 16:16:35 GMT
+ * Generated on Tue, 05 Dec 2023 00:03:14 GMT
  */
 
 :root.gl-dark {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 04 Dec 2023 16:16:35 GMT
+ * Generated on Tue, 05 Dec 2023 00:03:14 GMT
  */
 
 export const DATA_VIZ_GREEN_50 = "#133a03";

package/dist/tokens/js/tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 04 Dec 2023 16:16:35 GMT
+ * Generated on Tue, 05 Dec 2023 00:03:14 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 Mon, 04 Dec 2023 16:16:35 GMT
+// Generated on Tue, 05 Dec 2023 00:03:14 GMT
 
 $red-950: #fff4f3;
 $red-900: #fcf1ef;

package/dist/tokens/scss/_tokens.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Mon, 04 Dec 2023 16:16:35 GMT
+// Generated on Tue, 05 Dec 2023 00:03:14 GMT
 
 $gl-line-height-52: 3.25rem;
 $gl-line-height-44: 2.75rem;

package/dist/utils/charts/config.js

@@ -462,6 +462,55 @@ const generateLineSeries = _ref5 => {
     }
   };
 };
+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;
+  if (!params) return '';
+  const title = params.seriesData.reduce((acc, _ref6) => {
+    let {
+      value
+    } = _ref6;
+    if (acc.includes(value[0])) {
+      return acc;
+    }
+    return [...acc, value[0]];
+  }, []).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;
+  if (!params) {
+    return {};
+  }
+  const {
+    seriesData
+  } = params;
+  if (seriesData.length === 1) {
+    const {
+      value: [, yValue],
+      seriesName
+    } = seriesData[0];
+    return {
+      [valueAxisName || seriesName]: {
+        value: yValue,
+        color: '' // ignore color when showing a single series
+      }
+    };
+  }
+  return seriesData.reduce((acc, _ref7) => {
+    let {
+      value: [, yValue],
+      seriesName,
+      color
+    } = _ref7;
+    acc[seriesName] = {
+      value: yValue,
+      color
+    };
+    return acc;
+  }, {});
+};
 
 /**
  * The method works well if tooltip content should be against y-axis values.
@@ -472,6 +521,7 @@ const generateLineSeries = _ref5 => {
  * @param {Object} params series data
  * @param {String} yAxisTitle y-axis title
  * @returns {Object} tooltip title and content
+ * @deprecated Use getTooltipContent and getTooltipContent to obtain the tooltip
  */
 const getDefaultTooltipContent = function (params) {
   let yAxisTitle = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
@@ -503,4 +553,4 @@ const getDefaultTooltipContent = function (params) {
   };
 };
 
-export { annotationsYAxisCoords, axes, dataZoomAdjustments, defaultAreaOpacity, defaultChartOptions, defaultFontSize, defaultHeight, defaultWidth, generateAnnotationSeries, generateBarSeries, generateLineSeries, getAnnotationsConfig, getDataZoomConfig, getDefaultTooltipContent, getThresholdConfig, 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, getTooltipContent, getTooltipTitle, grid, gridWithSecondaryYAxis, lineStyle, mergeAnnotationAxisToOptions, mergeSeriesToOptions, parseAnnotations, symbolSize, toolboxHeight, validRenderers, xAxis, yAxis };

package/package.json

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

package/src/components/charts/area/area.vue

@@ -27,6 +27,7 @@ import {
   mergeSeriesToOptions,
   mergeAnnotationAxisToOptions,
   lineStyle,
+  // eslint-disable-next-line import/no-deprecated
   getDefaultTooltipContent,
 } from '../../../utils/charts/config';
 import {
@@ -265,6 +266,7 @@ export default {
   },
   methods: {
     defaultFormatTooltipText(params) {
+      // eslint-disable-next-line import/no-deprecated
       const { xLabels, tooltipContent } = getDefaultTooltipContent(params, this.options.yAxis.name);
 
       this.$set(this, 'dataTooltipContent', tooltipContent);

package/src/components/charts/column/column.vue

@@ -8,6 +8,7 @@ import {
   yAxis,
   dataZoomAdjustments,
   mergeSeriesToOptions,
+  // eslint-disable-next-line import/no-deprecated
   getDefaultTooltipContent,
   generateBarSeries,
   generateLineSeries,
@@ -180,6 +181,7 @@ export default {
       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);

package/src/components/charts/heatmap/heatmap.vue

@@ -2,6 +2,7 @@
 <script>
 import merge from 'lodash/merge';
 import { WHITE, GRAY_100 } from '../../../../dist/tokens/js/tokens';
+// eslint-disable-next-line import/no-deprecated
 import { getDefaultTooltipContent } from '../../../utils/charts/config';
 import { HEIGHT_AUTO_CLASSES } from '../../../utils/charts/constants';
 import { heatmapHues } from '../../../utils/charts/theme';
@@ -222,6 +223,7 @@ export default {
   },
   methods: {
     defaultFormatTooltipText(params) {
+      // eslint-disable-next-line import/no-deprecated
       const { xLabels, tooltipContent } = getDefaultTooltipContent(
         params,
         this.computedOptions.yAxis.name

package/src/components/charts/line/line.vue

@@ -30,6 +30,7 @@ import {
   mergeSeriesToOptions,
   mergeAnnotationAxisToOptions,
   lineStyle,
+  // eslint-disable-next-line import/no-deprecated
   getDefaultTooltipContent,
 } from '../../../utils/charts/config';
 import {
@@ -260,6 +261,7 @@ export default {
   },
   methods: {
     defaultFormatTooltipText(params) {
+      // eslint-disable-next-line import/no-deprecated
       const { xLabels, tooltipContent } = getDefaultTooltipContent(params, this.options.yAxis.name);
 
       this.$set(this, 'dataTooltipContent', tooltipContent);

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

@@ -1,7 +1,6 @@
 import { shallowMount } from '@vue/test-utils';
 
-import TooltipDefaultFormat from '~/components/shared_components/charts/tooltip_default_format.vue';
-import { createMockChartInstance, ChartTooltipStub } from '~helpers/chart_stubs';
+import { createMockChartInstance } from '~helpers/chart_stubs';
 import { expectHeightAutoClasses } from '~helpers/chart_height';
 import { LEGEND_LAYOUT_INLINE, LEGEND_LAYOUT_TABLE } from '~/utils/charts/constants';
 import {
@@ -11,6 +10,7 @@ import {
 } from '../../../utils/charts/mock_data';
 import Chart from '../chart/chart.vue';
 import ChartLegend from '../legend/legend.vue';
+import ChartTooltip from '../tooltip/tooltip.vue';
 import * as themeUtils from '../../../utils/charts/theme';
 import StackedColumnChart from './stacked_column.vue';
 
@@ -34,17 +34,13 @@ describe('stacked column chart component', () => {
 
   const findChart = () => wrapper.findComponent(Chart);
   const findLegend = () => wrapper.findComponent(ChartLegend);
-  const findDataTooltip = () => wrapper.findComponent(ChartTooltipStub);
+  const findDataTooltip = () => wrapper.findComponent(ChartTooltip);
 
   const emitChartCreated = () => findChart().vm.$emit('created', mockChartInstance);
 
   const createShallowWrapper = ({ props = {}, slots = {} } = {}) => {
     wrapper = shallowMount(StackedColumnChart, {
       propsData: { ...defaultChartProps, ...props },
-      stubs: {
-        'tooltip-default-format': TooltipDefaultFormat,
-        ChartTooltip: ChartTooltipStub,
-      },
       slots,
     });
     emitChartCreated();

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

@@ -1,8 +1,10 @@
+import { nextTick } from 'vue';
 import { shallowMount } from '@vue/test-utils';
 import { createMockChartInstance } from '~helpers/chart_stubs';
 import GlPopover from '../../base/popover/popover.vue';
 import { popoverPlacements } from '../../../utils/constants';
 import { waitForAnimationFrame } from '../../../utils/test_utils';
+import TooltipDefaultFormat from '../../shared_components/charts/tooltip_default_format.vue';
 
 import ChartTooltip from './tooltip.vue';
 
@@ -17,6 +19,7 @@ describe('ChartTooltip', () => {
   let mockContainPixel;
 
   const findPopover = () => wrapper.findComponent(GlPopover);
+  const findTooltipDefaultFormat = () => wrapper.findComponent(TooltipDefaultFormat);
   const findPopoverTarget = () => wrapper.find(`#${findPopover().attributes('target')}`);
   const getPopoverTargetStyle = (name) => findPopoverTarget().element.style.getPropertyValue(name);
 
@@ -26,11 +29,12 @@ describe('ChartTooltip', () => {
     await waitForAnimationFrame();
   };
 
-  const createWrapper = (props = {}, ...options) => {
+  const createWrapper = (props = {}, options) => {
     mockChartInstance = {
       ...createMockChartInstance(),
       containPixel: mockContainPixel,
     };
+
     wrapper = shallowMount(ChartTooltip, {
       propsData: {
         chart: mockChartInstance,
@@ -186,4 +190,93 @@ describe('ChartTooltip', () => {
       });
     });
   });
+
+  describe('is customized via slots', () => {
+    const triggerFormatter = (params) => {
+      const { formatter } = mockChartInstance.setOption.mock.calls[0][0].xAxis.axisPointer.label;
+      formatter(params);
+    };
+
+    describe('formats tooltip', () => {
+      beforeEach(() => {
+        createWrapper(
+          {
+            useDefaultTooltipFormatter: true,
+          },
+          {
+            stubs: {
+              GlPopover: {
+                template: `<div>
+                  <slot name="title"></slot>
+                    <slot></slot>
+                  </div>`,
+              },
+            },
+          }
+        );
+      });
+
+      it('sets tooltip formatter function', () => {
+        expect(mockChartInstance.setOption).toHaveBeenCalledWith({
+          xAxis: {
+            axisPointer: {
+              label: {
+                formatter: expect.any(Function),
+              },
+              show: true,
+            },
+          },
+        });
+      });
+
+      it('formats tooltip', async () => {
+        expect(findTooltipDefaultFormat().props('tooltipContent')).toEqual({});
+
+        triggerFormatter({
+          seriesData: [
+            {
+              seriesName: 'Series 1',
+              value: ['Value', 1],
+              color: '#aaa',
+            },
+            {
+              seriesName: 'Series 2',
+              value: ['Value', 2],
+              color: '#bbb',
+            },
+          ],
+        });
+        await nextTick();
+
+        expect(findPopover().text()).toBe('Value');
+        expect(findTooltipDefaultFormat().props('tooltipContent')).toEqual({
+          'Series 1': { color: '#aaa', value: 1 },
+          'Series 2': { color: '#bbb', value: 2 },
+        });
+      });
+
+      it('formats tooltip with axis names', async () => {
+        mockChartInstance.getOption.mockReturnValueOnce({
+          xAxis: [{ name: 'Time' }],
+          yAxis: [{ name: 'Amount' }],
+        });
+
+        triggerFormatter({
+          seriesData: [
+            {
+              seriesName: 'Series 1',
+              value: ['Value', 1],
+              color: '#aaa',
+            },
+          ],
+        });
+        await nextTick();
+
+        expect(findPopover().text()).toBe('Value (Time)');
+        expect(findTooltipDefaultFormat().props('tooltipContent')).toEqual({
+          Amount: { color: '', value: 1 },
+        });
+      });
+    });
+  });
 });

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

@@ -75,29 +75,6 @@ export const WithLongSeriesLabelWithNoSpaces = (args, { argTypes }) => ({
       `),
 });
 
-export const TitleProp = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  ...baseStoryOptions,
-  template: `
-        <div class="position-relative">
-          <gl-chart
-            :options="options"
-            :height="100"
-            @created="onCreated"
-          />
-          <gl-chart-tooltip
-            v-if="chart"
-            :chart="chart"
-            :show="showTooltip"
-            :top="top"
-            :left="left"
-            title="Title from prop"
-          >
-            Example content
-          </gl-chart-tooltip>
-        </div>`,
-});
-
 export default {
   title: 'charts/chart-tooltip',
   component: GlChartTooltip,

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

@@ -5,11 +5,14 @@ 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 TooltipDefaultFormat from '../../shared_components/charts/tooltip_default_format.vue';
 
 export default {
   name: 'GlChartTooltip',
   components: {
     GlPopover,
+    TooltipDefaultFormat,
   },
   inheritAttrs: false,
   props: {
@@ -104,6 +107,15 @@ export default {
         return value >= 1;
       },
     },
+
+    /**
+     * Set to true to use the default tooltip formatter.
+     */
+    useDefaultTooltipFormatter: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   data() {
     return {
@@ -111,6 +123,10 @@ export default {
       isPointerInChart: false,
 
       debouncedMouseHandler: debounceByAnimationFrame(this.mouseHandler),
+
+      title: null,
+      content: {},
+      params: null,
     };
   },
   computed: {
@@ -146,7 +162,29 @@ export default {
   created() {
     this.chart.getZr().on('mousemove', this.debouncedMouseHandler);
     this.chart.getZr().on('mouseout', this.debouncedMouseHandler);
+
+    if (this.useDefaultTooltipFormatter) {
+      this.chart.setOption({
+        xAxis: {
+          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);
+                this.params = params;
+              },
+            },
+          },
+        },
+      });
+    }
   },
+
   beforeDestroy() {
     this.chart.getZr().off('mousemove', this.debouncedMouseHandler);
     this.chart.getZr().off('mouseout', this.debouncedMouseHandler);
@@ -189,10 +227,27 @@ export default {
       :placement="placement"
       triggers=""
     >
-      <template v-if="$scopedSlots.title" #title>
-        <slot name="title"></slot>
+      <template #title>
+        <!--
+          @slot Tooltip title
+          @binding {string} title - Default title
+          @binding {object} params
+        -->
+        <slot name="title" v-bind="{ title, params }">{{ title }}</slot>
       </template>
-      <slot></slot>
+      <!--
+        @slot Tooltip content
+        @binding {object} content - Key-value pairs of series information
+        @binding {object} params - Full list of params from `onLabelChange`. Can be null before tooltip is shown
+       -->
+      <slot v-bind="{ content, params }">
+        <tooltip-default-format :tooltip-content="content">
+          <template v-if="$scopedSlots['tooltip-value']" #tooltip-value="scope">
+            <!-- @slot Tooltip value formatter -->
+            <slot name="tooltip-value" v-bind="scope"></slot>
+          </template>
+        </tooltip-default-format>
+      </slot>
     </gl-popover>
   </div>
 </template>

package/src/components/experimental/duo/chat/duo_chat.md

@@ -16,7 +16,7 @@ consumer component.
   :is-loading="isLoading"
   :is-chat-available="isChatAvailable"
   :predefined-prompts="predefinedPrompts"
-  :experiment-help-page-url="experimentHelpPageUrl"
+  :badge-help-page-url="badgeHelpPageUrl"
   :tool-name="toolName"
   @chat-hidden="onChatHidden"
   @send-chat-prompt="onSendChatPrompt"
@@ -69,7 +69,7 @@ be necessarily reactive in the consumer component. The properties that might be
   questions. Usually, this decision stays the same during the component's lifecycle.
 - `predefinedPrompts`. The `Array` of strings that represents the possible questions to ask when
   there are no messages in the chat.
-- `experimentHelpPageUrl`. The link to an external page explaining the meaning of an "experiment".
+- `badgeHelpPageUrl`. The link to an external page explaining the meaning of an "experiment".
   The prop is passed down to the [`GlExperimentBadge` component](?path=/docs/experimental-experiment-badge--docs).
 
 ### Set up communication with consumer
@@ -100,7 +100,7 @@ export default {
     this.title = 'Foo Bar';
     this.isChatAvailable = true; // this is just an example. `true` is the default value
     this.predefinedPrompts = ['How to …?', 'Where do I …?'];
-    this.experimentHelpPageUrl = 'https://dev.null';
+    this.badgeHelpPageUrl = 'https://dev.null';
   }
   methods: {
     onChatHidden() {

package/src/components/experimental/duo/chat/duo_chat.vue

@@ -134,7 +134,7 @@ export default {
       default: () => i18n.CHAT_DEFAULT_PREDEFINED_PROMPTS,
     },
     /**
-     * URL to the experiment/beta help page. This is passed down to the `GlExperimentBadge` component. Refer that component for more information.
+     * URL to the help page. This is passed down to the `GlExperimentBadge` component.
      */
     badgeHelpPageUrl: {
       type: String,
@@ -366,7 +366,7 @@ export default {
         >{{ $options.i18n.CHAT_LEGAL_GENERATED_BY_AI }}</gl-alert
       >
 
-      <!-- 
+      <!--
         @slot Subheader to be rendered right after the title. It is sticky and stays on top of the chat no matter the number of messages.
       -->
       <slot name="subheader"></slot>

package/src/components/experimental/experiment_badge/experiment_badge.md

@@ -5,5 +5,5 @@ what experiment means.
 ## Usage
 
 ```html
-<gl-experiment-badge experiment-help-page-url="https://gitlab.com" popover-placement="bottom" />
+<gl-experiment-badge help-page-url="https://gitlab.com" popover-placement="bottom" />
 ```

package/src/components/experimental/experiment_badge/experiment_badge.stories.js

@@ -32,8 +32,7 @@ Default.args = generateProps();
 export const WithHelpPageUrl = Template.bind({});
 WithHelpPageUrl.args = {
   ...generateProps({
-    experimentHelpPageUrl:
-      'https://docs.gitlab.com/ee/policy/experiment-beta-support.html#experiment',
+    helpPageUrl: 'https://docs.gitlab.com/ee/policy/experiment-beta-support.html#experiment',
   }),
 };
 

package/src/utils/charts/config.js

@@ -433,6 +433,48 @@ export const generateLineSeries = ({ name, color, data = [], yAxisIndex = 0 }) =
   itemStyle: { color },
 });
 
+export const getTooltipTitle = (params = null, titleAxisName = null) => {
+  if (!params) return '';
+
+  const title = params.seriesData
+    .reduce((acc, { value }) => {
+      if (acc.includes(value[0])) {
+        return acc;
+      }
+      return [...acc, value[0]];
+    }, [])
+    .join(', ');
+
+  return titleAxisName ? `${title} (${titleAxisName})` : title;
+};
+
+export const getTooltipContent = (params = null, valueAxisName = null) => {
+  if (!params) {
+    return {};
+  }
+
+  const { seriesData } = params;
+
+  if (seriesData.length === 1) {
+    const {
+      value: [, yValue],
+      seriesName,
+    } = seriesData[0];
+
+    return {
+      [valueAxisName || seriesName]: {
+        value: yValue,
+        color: '', // ignore color when showing a single series
+      },
+    };
+  }
+
+  return seriesData.reduce((acc, { value: [, yValue], seriesName, color }) => {
+    acc[seriesName] = { value: yValue, color };
+    return acc;
+  }, {});
+};
+
 /**
  * The method works well if tooltip content should be against y-axis values.
  * However, for bar charts, the tooltip should be against x-axis values.
@@ -442,6 +484,7 @@ export const generateLineSeries = ({ name, color, data = [], yAxisIndex = 0 }) =
  * @param {Object} params series data
  * @param {String} yAxisTitle y-axis title
  * @returns {Object} tooltip title and content
+ * @deprecated Use getTooltipContent and getTooltipContent to obtain the tooltip
  */
 export const getDefaultTooltipContent = (params, yAxisTitle = null) => {
   const seriesDataLength = params.seriesData.length;

package/src/utils/charts/config.spec.js

@@ -9,6 +9,8 @@ import {
   parseAnnotations,
   generateBarSeries,
   generateLineSeries,
+  getTooltipTitle,
+  getTooltipContent,
 } from './config';
 import {
   mockDefaultDataZoomConfig,
@@ -382,4 +384,95 @@ describe('chart config helpers', () => {
       ).toMatchObject(result);
     });
   });
+
+  describe('getTooltipTitle', () => {
+    it('returns an empty value', () => {
+      expect(getTooltipTitle()).toBe('');
+    });
+
+    it('returns title for single series', () => {
+      expect(
+        getTooltipTitle({
+          seriesData: [{ value: ['Value 1', 99] }],
+        })
+      ).toBe('Value 1');
+    });
+
+    it('returns title for multiple series', () => {
+      expect(
+        getTooltipTitle({
+          seriesData: [{ value: ['Value 1', 99] }, { value: ['Value 2', 100] }],
+        })
+      ).toBe('Value 1, Value 2');
+    });
+
+    it('returns title for multiple repeated series', () => {
+      expect(
+        getTooltipTitle({
+          seriesData: [{ value: ['Value 1', 99] }, { value: ['Value 1', 99] }],
+        })
+      ).toBe('Value 1');
+    });
+
+    it('returns title for multiple series with an axis name', () => {
+      expect(
+        getTooltipTitle(
+          {
+            seriesData: [{ value: ['Value 1', 99] }, { value: ['Value 2', 100] }],
+          },
+          'Time'
+        )
+      ).toBe('Value 1, Value 2 (Time)');
+    });
+  });
+
+  describe('getTooltipContent', () => {
+    it('returns an empty value', () => {
+      expect(getTooltipContent()).toEqual({});
+    });
+
+    it('returns content for single series', () => {
+      expect(
+        getTooltipContent({
+          seriesData: [{ value: ['Value 1', 99], seriesName: 'Series 1', color: '#aaa' }],
+        })
+      ).toEqual({ 'Series 1': { color: '', value: 99 } });
+    });
+
+    it('returns content for single series with an axis name', () => {
+      expect(
+        getTooltipContent(
+          {
+            seriesData: [{ value: ['Value 1', 99], seriesName: 'Series 1', color: '#aaa' }],
+          },
+          'Amount'
+        )
+      ).toEqual({ Amount: { color: '', value: 99 } });
+    });
+
+    it('returns content for multiple series', () => {
+      expect(
+        getTooltipContent({
+          seriesData: [
+            { value: ['Value 1', 99], seriesName: 'Series 1', color: '#aaa' },
+            { value: ['Value 2', 99], seriesName: 'Series 2', color: '#bbb' },
+          ],
+        })
+      ).toEqual({
+        'Series 1': { color: '#aaa', value: 99 },
+        'Series 2': { color: '#bbb', value: 99 },
+      });
+    });
+
+    it('returns content for multiple repeated series', () => {
+      expect(
+        getTooltipContent({
+          seriesData: [
+            { value: ['Value 1', 99], seriesName: 'Series 1', color: '#aaa' },
+            { value: ['Value 1', 99], seriesName: 'Series 1', color: '#aaa' },
+          ],
+        })
+      ).toEqual({ 'Series 1': { color: '#aaa', value: 99 } });
+    });
+  });
 });