@gitlab/ui 71.9.0 → 71.10.0

package/src/components/charts/column/column_chart.spec.js

@@ -1,5 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
-import { createMockChartInstance, ChartTooltipStub } from '~helpers/chart_stubs';
+import { createMockChartInstance } from '~helpers/chart_stubs';
 import { expectHeightAutoClasses } from '~helpers/chart_height';
 import {
   mockDefaultLineData,
@@ -8,6 +8,7 @@ import {
   mockDefaultStackedBarData,
 } from '../../../utils/charts/mock_data';
 import Chart from '../chart/chart.vue';
+import ChartTooltip from '../tooltip/tooltip.vue';
 import ColumnChart from './column.vue';
 
 let mockChartInstance;
@@ -27,36 +28,28 @@ describe('column chart component', () => {
 
   const chartItemClickedSpy = jest.fn();
   const findChart = () => wrapper.findComponent(Chart);
-  const findTooltip = () => wrapper.findComponent(ChartTooltipStub);
-  const getChartOptions = () => findChart().props('options');
+  const findChartTooltip = () => wrapper.findComponent(ChartTooltip);
+
+  const emitChartCreated = () => findChart().vm.$emit('created', mockChartInstance);
 
   const factory = (props = defaultChartProps, slots = {}) => {
     wrapper = shallowMount(ColumnChart, {
       propsData: { ...props },
-      stubs: {
-        'chart-tooltip': ChartTooltipStub,
-      },
       listeners: {
         chartItemClicked: chartItemClickedSpy,
       },
-      data() {
-        return {
-          chart: mockChartInstance,
-        };
-      },
       slots,
     });
   };
 
   beforeEach(() => {
-    mockChartInstance = createMockChartInstance();
-
     factory();
+
+    mockChartInstance = createMockChartInstance();
+    emitChartCreated();
   });
 
   it('emits "created" when onCreated is called', () => {
-    wrapper.vm.onCreated(wrapper.vm.chart);
-
     expect(wrapper.emitted('created')).toHaveLength(1);
   });
 
@@ -126,18 +119,11 @@ describe('column chart component', () => {
   });
 
   describe('tooltip', () => {
-    it('displays the generic tooltip content', async () => {
-      const params = {
-        seriesData: [{ seriesIndex: '0', seriesName: 'Full', value: ['Mary', 934] }],
-      };
-
-      getChartOptions().xAxis.axisPointer.label.formatter(params);
-
-      await wrapper.vm.$nextTick();
-
-      const expectedTooltipTitle = `${params.seriesData[0].value[0]} (${defaultChartProps.xAxisTitle})`;
-
-      expect(findTooltip().text()).toContain(expectedTooltipTitle);
+    it('configures chart tooltip', async () => {
+      expect(findChartTooltip().props()).toMatchObject({
+        chart: mockChartInstance,
+        useDefaultTooltipFormatter: true,
+      });
     });
   });
 

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

@@ -2,8 +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 { 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,14 +222,8 @@ export default {
   },
   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;
@@ -268,10 +261,7 @@ export default {
     <chart-tooltip v-if="chart" :chart="chart" :top="tooltip.top" :left="tooltip.left">
       <template #title>
         <slot v-if="formatTooltipText" name="tooltip-title"></slot>
-        <div v-else>
-          {{ tooltip.title }}
-          <template v-if="computedOptions.xAxis.name">({{ computedOptions.xAxis.name }})</template>
-        </div>
+        <div v-else>{{ tooltip.title }}</div>
       </template>
       <slot v-if="formatTooltipText" name="tooltip-content"></slot>
       <tooltip-default-format v-else :tooltip-content="tooltip.content" />

package/src/components/charts/line/line.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';
@@ -27,10 +31,13 @@ describe('line component', () => {
 
   const emitChartCreated = () => findChart().vm.$emit('created', mockChartInstance);
 
-  const createShallowWrapper = (props = {}, mountOptions = {}) => {
+  const createShallowWrapper = ({ props = {}, ...options } = {}) => {
     wrapper = shallowMount(LineChart, {
       propsData: { option, data: [], ...props },
-      ...mountOptions,
+      stubs: {
+        'chart-tooltip': ChartTooltipStub,
+      },
+      ...options,
     });
     emitChartCreated();
   };
@@ -59,12 +66,14 @@ describe('line component', () => {
 
     it('are displayed if passed via annotations props', async () => {
       createShallowWrapper({
-        annotations: [
-          {
-            min: '',
-            max: '',
-          },
-        ],
+        props: {
+          annotations: [
+            {
+              min: '',
+              max: '',
+            },
+          ],
+        },
       });
 
       await nextTick();
@@ -74,20 +83,22 @@ describe('line component', () => {
 
     it('are displayed if passed via option props', async () => {
       createShallowWrapper({
-        option: {
-          series: [
-            {
-              name: 'annotations',
-              markPoint: {
-                data: [
-                  {
-                    xAxis: 10,
-                  },
-                ],
+        props: {
+          option: {
+            series: [
+              {
+                name: 'annotations',
+                markPoint: {
+                  data: [
+                    {
+                      xAxis: 10,
+                    },
+                  ],
+                },
+                data: [],
               },
-              data: [],
-            },
-          ],
+            ],
+          },
         },
       });
 
@@ -112,8 +123,8 @@ describe('line component', () => {
         },
       };
 
-      createShallowWrapper(
-        {
+      createShallowWrapper({
+        props: {
           annotations: [
             {
               min: '',
@@ -121,12 +132,7 @@ describe('line component', () => {
             },
           ],
         },
-        {
-          stubs: {
-            'chart-tooltip': ChartTooltipStub,
-          },
-        }
-      );
+      });
 
       wrapper.vm.onChartDataPointMouseOver(params);
 
@@ -137,13 +143,83 @@ describe('line 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,
+      });
+    });
+
+    describe('is customized via slots', () => {
+      const { params, title, content } = chartTooltipStubData;
+
+      it('customizes tooltip value', async () => {
+        const tooltipValueSlot = jest.fn().mockReturnValue('Value');
+
+        createShallowWrapper({
+          scopedSlots: {
+            'tooltip-value': tooltipValueSlot,
+          },
+        });
+        await nextTick();
+
+        expect(tooltipValueSlot).toHaveBeenCalledWith({ value: 9 });
+        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 initialized', () => {
-      expect(findDataTooltip().props('chart')).toBe(mockChartInstance);
+    it('is customized via formatting function', async () => {
+      createShallowWrapper({
+        props: {
+          formatTooltipText: jest.fn(),
+        },
+      });
+
+      await nextTick();
+
+      expect(findDataTooltip().props()).toMatchObject({
+        useDefaultTooltipFormatter: false,
+        chart: mockChartInstance,
+      });
     });
   });
 
@@ -158,7 +234,9 @@ describe('line component', () => {
 
     it('is inline if correct prop value is set', async () => {
       createShallowWrapper({
-        legendLayout: LEGEND_LAYOUT_INLINE,
+        props: {
+          legendLayout: LEGEND_LAYOUT_INLINE,
+        },
       });
 
       await nextTick();
@@ -168,7 +246,9 @@ describe('line component', () => {
 
     it('is tabular if correct prop value is set', async () => {
       createShallowWrapper({
-        legendLayout: LEGEND_LAYOUT_TABLE,
+        props: {
+          legendLayout: LEGEND_LAYOUT_TABLE,
+        },
       });
 
       await nextTick();
@@ -177,7 +257,9 @@ describe('line component', () => {
     });
     it('can be hidden', async () => {
       createShallowWrapper({
-        showLegend: false,
+        props: {
+          showLegend: false,
+        },
       });
 
       await nextTick();
@@ -188,7 +270,7 @@ describe('line component', () => {
 
   describe('height', () => {
     expectHeightAutoClasses({
-      createComponent: createShallowWrapper,
+      createComponent: (props) => createShallowWrapper({ props }),
       findContainer: () => wrapper,
       findChart,
     });

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

@@ -56,7 +56,7 @@ const defaultOptions = {
   },
 };
 
-const template = `<gl-line-chart
+const template = (content = '') => `<gl-line-chart
   :data="data"
   :option="option"
   :thresholds="thresholds"
@@ -64,7 +64,9 @@ const template = `<gl-line-chart
   :includeLegendAvgMax="includeLegendAvgMax"
   :showLegend="showLegend"
   :height="height"
-/>`;
+  >
+    ${content}
+  </gl-line-chart>`;
 
 const generateProps = ({
   data = defaultData,
@@ -87,7 +89,7 @@ const generateProps = ({
 const Template = (_args, { argTypes }) => ({
   props: Object.keys(argTypes),
   components,
-  template,
+  template: template(),
 });
 
 export const Default = Template.bind({});
@@ -99,7 +101,7 @@ WithThreshold.args = generateProps({
 });
 
 export const WithAnnotationsAsProps = Template.bind({});
-WithAnnotationsAsProps.storyNane = 'with annotations as props (recommended)';
+WithAnnotationsAsProps.storyName = 'with annotations as props (recommended)';
 WithAnnotationsAsProps.args = generateProps({
   ...mockAnnotationsConfigs,
   data: [
@@ -200,6 +202,21 @@ NoLegend.args = generateProps({
   showLegend: false,
 });
 
+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-for="p in params && params.seriesData">{{p.seriesName}}: {{p.value[1]}}</div>
+    </template>
+  `),
+});
+WithCustomTooltip.args = generateProps();
+WithCustomTooltip.parameters = {
+  storyshots: { disable: true },
+};
+
 export default {
   title: 'charts/line-chart',
   component: GlLineChart,

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

@@ -30,8 +30,6 @@ import {
   mergeSeriesToOptions,
   mergeAnnotationAxisToOptions,
   lineStyle,
-  // eslint-disable-next-line import/no-deprecated
-  getDefaultTooltipContent,
 } from '../../../utils/charts/config';
 import {
   LEGEND_LAYOUT_INLINE,
@@ -44,7 +42,6 @@ import {
 } 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.vue';
 import Chart from '../chart/chart.vue';
 import ChartLegend from '../legend/legend.vue';
 import ChartTooltip from '../tooltip/tooltip.vue';
@@ -55,7 +52,6 @@ export default {
     Chart,
     ChartLegend,
     ChartTooltip,
-    TooltipDefaultFormat,
   },
   inheritAttrs: false,
   props: {
@@ -83,6 +79,12 @@ export default {
       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,
@@ -137,8 +139,6 @@ export default {
     // https://gitlab.com/gitlab-org/gitlab-ui/-/issues/618
     return {
       chart: null,
-      dataTooltipTitle: '',
-      dataTooltipContent: {},
       showAnnotationsTooltip: false,
       annotationsTooltipTitle: '',
       annotationsTooltipContent: '',
@@ -146,7 +146,6 @@ export default {
         left: '0',
         top: '0',
       },
-      selectedFormatTooltipText: this.formatTooltipText || this.defaultFormatTooltipText,
     };
   },
   computed: {
@@ -187,7 +186,7 @@ export default {
           axisPointer: {
             show: true,
             label: {
-              formatter: this.onLabelChange,
+              formatter: this.formatTooltipText,
             },
           },
           axisTick: {
@@ -260,13 +259,6 @@ export default {
     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) {
       return {
         title: params.data.xAxis,
@@ -314,9 +306,6 @@ export default {
         };
       }
     },
-    onLabelChange(params) {
-      this.selectedFormatTooltipText(params);
-    },
   },
   HEIGHT_AUTO_CLASSES,
 };
@@ -347,21 +336,21 @@ export default {
       </template>
       <div>{{ annotationsTooltipContent }}</div>
     </chart-tooltip>
-    <chart-tooltip v-if="chart" ref="dataTooltip" :chart="chart">
-      <template #title>
-        <slot v-if="formatTooltipText" name="tooltip-title"></slot>
-        <div v-else>
-          {{ dataTooltipTitle }}
-          <template v-if="options.xAxis.name">({{ options.xAxis.name }})</template>
-        </div>
+    <chart-tooltip
+      v-if="chart"
+      ref="dataTooltip"
+      :chart="chart"
+      :use-default-tooltip-formatter="!formatTooltipText"
+    >
+      <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>
-      <slot v-if="formatTooltipText" name="tooltip-content"></slot>
-      <tooltip-default-format v-else :tooltip-content="dataTooltipContent">
-        <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>
     </chart-tooltip>
     <chart-legend
       v-if="hasLegend"