@gitlab/ui 67.2.0 → 67.3.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [67.3.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v67.2.0...v67.3.0) (2023-10-31)
+
+
+### Features
+
+* **GlLineChart:** Defines a #tooltip-value slot ([4624919](https://gitlab.com/gitlab-org/gitlab-ui/commit/462491952e19832c9abd257b54130ed93244fd88))
+
 # [67.2.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v67.1.0...v67.2.0) (2023-10-30)
 
 

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

@@ -306,7 +306,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",staticClass:"gl-pointer-events-none",attrs:{"id":"dataTooltip","show":_vm.showDataTooltip,"chart":_vm.chart,"top":_vm.dataTooltipPosition.top,"left":_vm.dataTooltipPosition.left},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}})],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",staticClass:"gl-pointer-events-none",attrs:{"id":"dataTooltip","show":_vm.showDataTooltip,"chart":_vm.chart,"top":_vm.dataTooltipPosition.top,"left":_vm.dataTooltipPosition.left},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 __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/shared_components/charts/tooltip_default_format.js

@@ -18,7 +18,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 _c('div',_vm._l((_vm.tooltipContent),function(value,label){return _c('div',{key:("" + label + (value.value)),staticClass:"gl-charts-tooltip-default-format-series"},[_c('series-label',{staticClass:"gl-charts-tooltip-default-format-series-label",attrs:{"color":value.color}},[_vm._v("\n      "+_vm._s(label)+"\n    ")]),_vm._v(" "),_c('div',{staticClass:"gl-charts-tooltip-default-format-series-value"},[_vm._v("\n      "+_vm._s(value.value)+"\n    ")])],1)}),0)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',_vm._l((_vm.tooltipContent),function(value,label){return _c('div',{key:("" + label + (value.value)),staticClass:"gl-charts-tooltip-default-format-series"},[_c('series-label',{staticClass:"gl-charts-tooltip-default-format-series-label",attrs:{"color":value.color}},[_vm._v("\n      "+_vm._s(label)+"\n    ")]),_vm._v(" "),_c('div',{staticClass:"gl-charts-tooltip-default-format-series-value"},[_vm._t("tooltip-value",function(){return [_vm._v(_vm._s(value.value))]},{"value":value.value})],2)],1)}),0)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/tokens/css/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 30 Oct 2023 10:30:21 GMT
+ * Generated on Tue, 31 Oct 2023 09:40:12 GMT
  */
 
 :root {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 30 Oct 2023 10:30:21 GMT
+ * Generated on Tue, 31 Oct 2023 09:40:12 GMT
  */
 
 :root.gl-dark {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 30 Oct 2023 10:30:21 GMT
+ * Generated on Tue, 31 Oct 2023 09:40:12 GMT
  */
 
 export const BLACK = "#fff";

package/dist/tokens/js/tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 30 Oct 2023 10:30:21 GMT
+ * Generated on Tue, 31 Oct 2023 09:40:12 GMT
  */
 
 export const BLACK = "#000";

package/dist/tokens/scss/_tokens.dark.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Mon, 30 Oct 2023 10:30:21 GMT
+// Generated on Tue, 31 Oct 2023 09:40:12 GMT
 
 $red-950: #fff4f3;
 $red-900: #fcf1ef;

package/dist/tokens/scss/_tokens.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Mon, 30 Oct 2023 10:30:21 GMT
+// Generated on Tue, 31 Oct 2023 09:40:12 GMT
 
 $gl-line-height-52: 3.25rem;
 $gl-line-height-44: 2.75rem;

package/package.json

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

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

@@ -1,10 +1,14 @@
+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 { expectHeightAutoClasses } from '~helpers/chart_height';
+
 import Chart from '../chart/chart.vue';
 import ChartLegend from '../legend/legend.vue';
+import TooltipDefaultFormat from '../../shared_components/charts/tooltip_default_format.vue';
+
 import LineChart from './line.vue';
 
 let mockChartInstance;
@@ -39,7 +43,7 @@ describe('line component', () => {
   it('emits `created`, with the chart instance', async () => {
     createShallowWrapper();
 
-    await wrapper.vm.$nextTick();
+    await nextTick();
 
     expect(wrapper.emitted('created').length).toBe(1);
     expect(wrapper.emitted('created')[0][0]).toBe(mockChartInstance);
@@ -49,7 +53,7 @@ describe('line component', () => {
     it('are hidden by default', async () => {
       createShallowWrapper();
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(findAnnotationsTooltip().exists()).toBe(false);
     });
@@ -64,7 +68,7 @@ describe('line component', () => {
         ],
       });
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(findAnnotationsTooltip().exists()).toBe(true);
     });
@@ -88,7 +92,7 @@ describe('line component', () => {
         },
       });
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(findAnnotationsTooltip().exists()).toBe(true);
     });
@@ -127,13 +131,65 @@ describe('line component', () => {
 
       wrapper.vm.onChartDataPointMouseOver(params);
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(findAnnotationsTooltip().html()).toContain(params.data.xAxis);
       expect(findAnnotationsTooltip().html()).toContain(params.data.tooltipData.content);
     });
   });
 
+  describe('tooltip', () => {
+    const tooltipParams = {
+      seriesData: [
+        {
+          seriesName: 'Series 1',
+          value: ['x', 1000],
+          color: '#fff',
+        },
+        {
+          seriesName: 'Series 2',
+          value: ['x', 1001],
+          color: '#fff',
+        },
+      ],
+    };
+
+    it('renders tooltip', async () => {
+      createShallowWrapper(
+        {},
+        {
+          stubs: { TooltipDefaultFormat },
+        }
+      );
+
+      wrapper.vm.defaultFormatTooltipText(tooltipParams); // force render of a tooltip
+      await nextTick();
+
+      const tooltipText = findDataTooltip().text();
+      expect(tooltipText).toContain('1000');
+      expect(tooltipText).toContain('1001');
+    });
+
+    it('renders formatted tooltip values', async () => {
+      createShallowWrapper(
+        {},
+        {
+          stubs: { TooltipDefaultFormat },
+          scopedSlots: {
+            'tooltip-value': ({ value }) => `$ ${value.toLocaleString()}`,
+          },
+        }
+      );
+
+      wrapper.vm.defaultFormatTooltipText(tooltipParams); // force render of a tooltip
+      await nextTick();
+
+      const tooltipText = findDataTooltip().text();
+      expect(tooltipText).toContain('$ 1,000');
+      expect(tooltipText).toContain('$ 1,001');
+    });
+  });
+
   describe('tooltip position', () => {
     const dataTooltipTitle = 'FooBar';
 
@@ -160,7 +216,7 @@ describe('line component', () => {
 
       wrapper.setData({ dataTooltipPosition: { left, top }, dataTooltipTitle });
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(findDataTooltip().props('left')).toBe(`${left}`);
       expect(findDataTooltip().props('top')).toBe(`${top}`);
@@ -172,7 +228,7 @@ describe('line component', () => {
     it('is inline by default', async () => {
       createShallowWrapper();
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(findLegend().props('layout')).toBe(LEGEND_LAYOUT_INLINE);
     });
@@ -182,7 +238,7 @@ describe('line component', () => {
         legendLayout: LEGEND_LAYOUT_INLINE,
       });
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(findLegend().props('layout')).toBe(LEGEND_LAYOUT_INLINE);
     });
@@ -192,7 +248,7 @@ describe('line component', () => {
         legendLayout: LEGEND_LAYOUT_TABLE,
       });
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(findLegend().props('layout')).toBe(LEGEND_LAYOUT_TABLE);
     });
@@ -201,7 +257,7 @@ describe('line component', () => {
         showLegend: false,
       });
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(findLegend().exists()).toBe(false);
     });

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

@@ -390,7 +390,12 @@ export default {
         </div>
       </template>
       <slot v-if="formatTooltipText" name="tooltip-content"></slot>
-      <tooltip-default-format v-else :tooltip-content="dataTooltipContent" />
+      <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"

package/src/components/shared_components/charts/tooltip_default_format.spec.js

@@ -0,0 +1,69 @@
+import { shallowMount } from '@vue/test-utils';
+
+import SeriesLabel from '../../charts/series_label/series_label.vue';
+import TooltipDefaultFormat from './tooltip_default_format.vue';
+
+const mockTooltipContent = {
+  'Series A': {
+    color: '#000000',
+    value: 1000,
+  },
+  'Series B': {
+    color: '#ffffff',
+    value: 5555.5,
+  },
+};
+
+describe('tooltip default format', () => {
+  let wrapper;
+
+  const createComponent = ({ props, ...options } = {}) => {
+    wrapper = shallowMount(TooltipDefaultFormat, {
+      propsData: {
+        tooltipContent: mockTooltipContent,
+        ...props,
+      },
+      ...options,
+    });
+  };
+
+  const findSeriesLabelAt = (i) => wrapper.findAllComponents(SeriesLabel).at(i);
+
+  it('renders default tooltip', () => {
+    createComponent();
+
+    const text = wrapper.text();
+
+    expect(text).toContain('Series A');
+    expect(text).toContain('1000');
+
+    expect(text).toContain('Series B');
+    expect(text).toContain('5555.5');
+  });
+
+  it('renders label colors', () => {
+    createComponent();
+
+    expect(findSeriesLabelAt(0).props('color')).toBe('#000000');
+    expect(findSeriesLabelAt(1).props('color')).toBe('#ffffff');
+  });
+
+  it('renders formatted values', () => {
+    createComponent({
+      scopedSlots: {
+        'tooltip-value': ({ value }) =>
+          value.toLocaleString(undefined, {
+            minimumFractionDigits: 2,
+          }),
+      },
+    });
+
+    const text = wrapper.text();
+
+    expect(text).toContain('Series A');
+    expect(text).toContain('1,000.00');
+
+    expect(text).toContain('Series B');
+    expect(text).toContain('5,555.50');
+  });
+});

package/src/components/shared_components/charts/tooltip_default_format.vue

@@ -25,7 +25,7 @@ export default {
         {{ label }}
       </series-label>
       <div class="gl-charts-tooltip-default-format-series-value">
-        {{ value.value }}
+        <slot name="tooltip-value" :value="value.value">{{ value.value }}</slot>
       </div>
     </div>
   </div>