@gitlab/ui 71.9.1 → 71.11.0

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,

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

@@ -27,8 +27,6 @@ import {
   mergeSeriesToOptions,
   mergeAnnotationAxisToOptions,
   lineStyle,
-  // eslint-disable-next-line import/no-deprecated
-  getDefaultTooltipContent,
 } from '../../../utils/charts/config';
 import {
   LEGEND_LAYOUT_INLINE,
@@ -41,7 +39,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';
@@ -52,7 +49,6 @@ export default {
     Chart,
     ChartLegend,
     ChartTooltip,
-    TooltipDefaultFormat,
   },
   inheritAttrs: false,
   props: {
@@ -85,6 +81,12 @@ export default {
       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,
@@ -139,8 +141,6 @@ export default {
     // https://gitlab.com/gitlab-org/gitlab-ui/-/issues/618
     return {
       chart: null,
-      dataTooltipTitle: '',
-      dataTooltipContent: {},
       showAnnotationsTooltip: false,
       annotationsTooltipTitle: '',
       annotationsTooltipContent: '',
@@ -148,7 +148,6 @@ export default {
         left: '0',
         top: '0',
       },
-      selectedFormatTooltipText: this.formatTooltipText || this.defaultFormatTooltipText,
     };
   },
   computed: {
@@ -195,7 +194,7 @@ export default {
               type: 'solid',
             },
             label: {
-              formatter: this.onLabelChange,
+              formatter: this.formatTooltipText,
             },
           },
         },
@@ -265,13 +264,6 @@ export default {
     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) {
       return {
         title: params.data.xAxis,
@@ -318,9 +310,6 @@ export default {
         };
       }
     },
-    onLabelChange(params) {
-      this.selectedFormatTooltipText(params);
-    },
   },
   HEIGHT_AUTO_CLASSES,
 };
@@ -351,16 +340,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>
-        <template v-else>
-          {{ dataTooltipTitle }}
-          <template v-if="options.xAxis.name">({{ options.xAxis.name }})</template>
-        </template>
+    <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" />
     </chart-tooltip>
     <chart-legend
       v-if="compiledOptions"

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

@@ -1,8 +1,8 @@
 import { shallowMount } from '@vue/test-utils';
-import TooltipDefaultFormat from '~/components/shared_components/charts/tooltip_default_format.vue';
 import { createMockChartInstance } from '~helpers/chart_stubs';
 import { expectHeightAutoClasses } from '~helpers/chart_height';
 import Chart from '../chart/chart.vue';
+import ChartTooltip from '../tooltip/tooltip.vue';
 import BarChart from './bar.vue';
 
 let mockChartInstance;
@@ -27,15 +27,14 @@ describe('Bar chart component', () => {
   let wrapper;
 
   const findChart = () => wrapper.findComponent(Chart);
+  const findChartTooltip = () => wrapper.findComponent(ChartTooltip);
+
   const getOptions = () => findChart().props('options');
   const emitChartCreated = () => findChart().vm.$emit('created', mockChartInstance);
 
   const createComponent = (props = {}) => {
     wrapper = shallowMount(BarChart, {
       propsData: { ...defaultChartProps, ...props },
-      stubs: {
-        'tooltip-default-format': TooltipDefaultFormat,
-      },
     });
   };
 
@@ -75,45 +74,10 @@ describe('Bar chart component', () => {
       defaultChartProps.data.Office.map(([, name]) => expect(formatter(name)).toMatchSnapshot());
     });
 
-    describe('Tooltip', () => {
-      const labelParams = {
-        value: 'Jim',
-        seriesName: 'Office',
-        seriesData: [
-          {
-            seriesId: 'Office',
-            data: [100, 'Jim'],
-            value: [100, 'Jim'],
-          },
-        ],
-      };
-
-      it('calls custom method and returns title with y labels', () => {
-        const getDefaultTooltipContentReturnVal = { yLabels: [], tooltipContent: {} };
-
-        // stub the method
-        wrapper.vm.getDefaultTooltipContent = jest
-          .fn()
-          .mockReturnValue(getDefaultTooltipContentReturnVal);
-
-        // label formatter is triggered here which should eventually call
-        // getDefaultTooltipContent
-        getOptions().yAxis.axisPointer.label.formatter(labelParams);
-
-        return wrapper.vm.$nextTick(() => {
-          expect(wrapper.vm.getDefaultTooltipContent).toHaveBeenCalled();
-        });
-      });
-
-      it('sets accurate tooltip title and content state', () => {
-        getOptions().yAxis.axisPointer.label.formatter(labelParams);
-
-        return wrapper.vm.$nextTick(() => {
-          expect(wrapper.vm.tooltipTitle).toBe(labelParams.value);
-          expect(wrapper.vm.tooltipContent[defaultChartProps.xAxisTitle].value).toBe(
-            labelParams.seriesData[0].data[0]
-          );
-        });
+    it('configures chart tooltip', () => {
+      expect(findChartTooltip().props()).toMatchObject({
+        chart: mockChartInstance,
+        useDefaultTooltipFormatter: false,
       });
     });
   });

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

@@ -173,21 +173,20 @@ export default {
       this.$emit('created', chart);
     },
     onLabelChange(params) {
-      const { yLabels, tooltipContent } = this.getDefaultTooltipContent(params, this.xAxisTitle);
+      const { yLabels, tooltipContent } = 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, xAxisTitle = null) {
+    getTooltipContent(params, xAxisTitle = null) {
       const seriesDataLength = params.seriesData.length;
       const { yLabels, tooltipContent } = params.seriesData.reduce(
         (acc, chartItem) => {

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

@@ -69,10 +69,6 @@ Object {
       "show": false,
     },
     "axisPointer": Object {
-      "label": Object {
-        "formatter": [Function],
-      },
-      "show": true,
       "type": "none",
     },
     "boundaryGap": true,
@@ -161,10 +157,6 @@ Object {
       "show": false,
     },
     "axisPointer": Object {
-      "label": Object {
-        "formatter": [Function],
-      },
-      "show": true,
       "type": "none",
     },
     "boundaryGap": true,
@@ -290,10 +282,6 @@ Object {
       "show": false,
     },
     "axisPointer": Object {
-      "label": Object {
-        "formatter": [Function],
-      },
-      "show": true,
       "type": "none",
     },
     "boundaryGap": true,

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

@@ -8,15 +8,12 @@ import {
   yAxis,
   dataZoomAdjustments,
   mergeSeriesToOptions,
-  // eslint-disable-next-line import/no-deprecated
-  getDefaultTooltipContent,
   generateBarSeries,
   generateLineSeries,
 } 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.vue';
 import Chart from '../chart/chart.vue';
 import ChartTooltip from '../tooltip/tooltip.vue';
 
@@ -33,7 +30,6 @@ export default {
   components: {
     Chart,
     ChartTooltip,
-    TooltipDefaultFormat,
   },
   inheritAttrs: false,
   props: {
@@ -87,8 +83,6 @@ export default {
   data() {
     return {
       chart: null,
-      tooltipTitle: '',
-      tooltipContent: {},
     };
   },
   computed: {
@@ -141,11 +135,7 @@ export default {
               show: false,
             },
             axisPointer: {
-              show: true,
               type: 'none',
-              label: {
-                formatter: this.onLabelChange,
-              },
             },
             name: this.xAxisTitle,
             type: this.xAxisType,
@@ -180,13 +170,6 @@ export default {
       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,
 };
@@ -201,11 +184,6 @@ export default {
       v-on="$listeners"
       @created="onCreated"
     />
-    <chart-tooltip v-if="chart" :chart="chart">
-      <template #title>
-        <div>{{ tooltipTitle }} ({{ xAxisTitle }})</div>
-      </template>
-      <tooltip-default-format :tooltip-content="tooltipContent" />
-    </chart-tooltip>
+    <chart-tooltip v-if="chart" :chart="chart" :use-default-tooltip-formatter="true" />
   </div>
 </template>

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" />