@gitlab/ui 108.6.0 → 108.7.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [108.7.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v108.6.0...v108.7.0) (2025-02-26)
+
+
+### Features
+
+* **GlStackedColumnChart:** Simplify chart tooltip API ([837c638](https://gitlab.com/gitlab-org/gitlab-ui/commit/837c638616a4cf1856482859b04a8315f2c99b65))
+
 # [108.6.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v108.5.0...v108.6.0) (2025-02-26)
 
 

package/dist/components/charts/stacked_column/stacked_column.js

@@ -3,10 +3,10 @@ import { yAxis, generateBarSeries, generateLineSeries, defaultChartOptions, grid
 import { LEGEND_AVERAGE_TEXT, LEGEND_MAX_TEXT, LEGEND_MIN_TEXT, LEGEND_CURRENT_TEXT, LEGEND_LAYOUT_INLINE, LEGEND_LAYOUT_TABLE, 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 ChartLegend from '../legend/legend';
 import ChartTooltip from '../tooltip/tooltip';
+import TooltipDefaultFormat from '../../shared_components/charts/tooltip_default_format';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 const yAxisDefaults = {
@@ -112,6 +112,12 @@ var script = {
         return [LEGEND_LAYOUT_INLINE, LEGEND_LAYOUT_TABLE].indexOf(layout) !== -1;
       }
     },
+    /**
+     * 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,
@@ -133,9 +139,7 @@ var script = {
   },
   data() {
     return {
-      chart: null,
-      tooltipTitle: '',
-      tooltipContent: {}
+      chart: null
     };
   },
   computed: {
@@ -216,7 +220,7 @@ var script = {
             show: true,
             type: 'none',
             label: {
-              formatter: this.onLabelChange
+              formatter: this.formatTooltipText
             }
           },
           data: this.groupBy,
@@ -272,28 +276,34 @@ var script = {
       this.chart = chart;
       this.$emit('created', chart);
     },
-    defaultFormatTooltipText(params) {
-      const {
-        tooltipContent
-      } = params.seriesData.reverse().reduce((acc, bar) => {
-        acc.tooltipContent[bar.seriesName] = {
-          value: bar.value,
-          index: bar.seriesIndex,
-          color: this.getColor(bar.seriesIndex)
-        };
-        return acc;
-      }, {
-        tooltipContent: {}
-      });
-      this.tooltipTitle = params.value;
-      this.$set(this, 'tooltipContent', tooltipContent);
+    getTooltipTitle(_ref4) {
+      var _options$xAxis, _options$xAxis$;
+      let {
+        params
+      } = _ref4;
+      if (!params) return '';
+      const options = this.chart.getOption();
+      const titleAxisName = options === null || options === void 0 ? void 0 : (_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;
+      return titleAxisName ? `${params.value} (${titleAxisName})` : params.value;
     },
-    onLabelChange(params) {
-      if (this.formatTooltipText) {
-        this.formatTooltipText(params);
-      } else {
-        this.defaultFormatTooltipText(params);
-      }
+    getTooltipContent(_ref5) {
+      let {
+        params
+      } = _ref5;
+      if (!params) return {};
+      const tooltipContentEntries = params.seriesData.toSorted((a, b) => b.seriesIndex - a.seriesIndex) // Invert stacking order so it matches chart (see https://github.com/apache/echarts/issues/14700)
+      .map(_ref6 => {
+        let {
+          seriesName = '',
+          value,
+          borderColor
+        } = _ref6;
+        return [seriesName, {
+          value,
+          color: borderColor
+        }];
+      });
+      return Object.fromEntries(tooltipContentEntries);
     }
   },
   HEIGHT_AUTO_CLASSES
@@ -305,7 +315,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-relative",class:( _obj = {}, _obj[_vm.$options.HEIGHT_AUTO_CLASSES] = _vm.autoHeight, _obj )},[_c('chart',_vm._g(_vm._b({class:{ 'gl-grow': _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 [_vm._t("tooltip-title",function(){return [_vm._v(_vm._s(_vm.tooltipTitle)+" ("+_vm._s(_vm.xAxisTitle)+")")]})]},proxy:true}],null,true)},[_vm._v(" "),_vm._t("tooltip-content",function(){return [_c('tooltip-default-format',{attrs:{"tooltip-content":_vm.tooltipContent}})]})],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:"gl-relative",class:( _obj = {}, _obj[_vm.$options.HEIGHT_AUTO_CLASSES] = _vm.autoHeight, _obj )},[_c('chart',_vm._g(_vm._b({class:{ 'gl-grow': _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":!_vm.formatTooltipText},scopedSlots:_vm._u([{key:"title",fn:function(scope){return [_vm._t("tooltip-title",function(){return [_vm._v(_vm._s(_vm.getTooltipTitle(scope)))]},null,scope)]}},{key:"default",fn:function(scope){return [_vm._t("tooltip-content",function(){return [_c('tooltip-default-format',{attrs:{"tooltip-content":_vm.getTooltipContent(scope)},scopedSlots:_vm._u([(_vm.$scopedSlots['tooltip-value'])?{key:"tooltip-value",fn:function(valueScope){return [_vm._t("tooltip-value",null,null,valueScope)]}}:null],null,true)})]},null,scope)]}}],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/utils/charts/config.js

@@ -500,10 +500,11 @@ const getTooltipContent = function () {
   }
   return seriesData.reduce((acc, _ref7) => {
     let {
-      value: [, yValue],
+      value,
       seriesName,
       color
     } = _ref7;
+    const yValue = value[1];
     acc[seriesName] = {
       value: yValue,
       color

package/package.json

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

package/src/components/charts/stacked_column/stacked_column.vue

@@ -22,10 +22,10 @@ import {
 } 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 ChartLegend from '../legend/legend.vue';
 import ChartTooltip from '../tooltip/tooltip.vue';
+import TooltipDefaultFormat from '../../shared_components/charts/tooltip_default_format.vue';
 
 const yAxisDefaults = {
   ...yAxis,
@@ -131,6 +131,12 @@ export default {
         return [LEGEND_LAYOUT_INLINE, LEGEND_LAYOUT_TABLE].indexOf(layout) !== -1;
       },
     },
+    /**
+     * 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,
@@ -153,8 +159,6 @@ export default {
   data() {
     return {
       chart: null,
-      tooltipTitle: '',
-      tooltipContent: {},
     };
   },
   computed: {
@@ -206,7 +210,7 @@ export default {
               show: true,
               type: 'none',
               label: {
-                formatter: this.onLabelChange,
+                formatter: this.formatTooltipText,
               },
             },
             data: this.groupBy,
@@ -265,31 +269,24 @@ export default {
       this.chart = chart;
       this.$emit('created', chart);
     },
-    defaultFormatTooltipText(params) {
-      const { tooltipContent } = params.seriesData.reverse().reduce(
-        (acc, bar) => {
-          acc.tooltipContent[bar.seriesName] = {
-            value: bar.value,
-            index: bar.seriesIndex,
-            color: this.getColor(bar.seriesIndex),
-          };
-
-          return acc;
-        },
-        {
-          tooltipContent: {},
-        }
-      );
+    getTooltipTitle({ params }) {
+      if (!params) return '';
 
-      this.tooltipTitle = params.value;
-      this.$set(this, 'tooltipContent', tooltipContent);
+      const options = this.chart.getOption();
+      const titleAxisName = options?.xAxis?.[0]?.name;
+      return titleAxisName ? `${params.value} (${titleAxisName})` : params.value;
     },
-    onLabelChange(params) {
-      if (this.formatTooltipText) {
-        this.formatTooltipText(params);
-      } else {
-        this.defaultFormatTooltipText(params);
-      }
+    getTooltipContent({ params }) {
+      if (!params) return {};
+
+      const tooltipContentEntries = params.seriesData
+        .toSorted((a, b) => b.seriesIndex - a.seriesIndex) // Invert stacking order so it matches chart (see https://github.com/apache/echarts/issues/14700)
+        .map(({ seriesName = '', value, borderColor }) => [
+          seriesName,
+          { value, color: borderColor },
+        ]);
+
+      return Object.fromEntries(tooltipContentEntries);
     },
   },
   HEIGHT_AUTO_CLASSES,
@@ -305,14 +302,19 @@ export default {
       v-on="$listeners"
       @created="onCreated"
     />
-    <chart-tooltip v-if="chart" :chart="chart">
-      <template #title>
-        <slot name="tooltip-title">{{ tooltipTitle }} ({{ xAxisTitle }})</slot>
+    <chart-tooltip v-if="chart" :chart="chart" :use-default-tooltip-formatter="!formatTooltipText">
+      <template #title="scope">
+        <slot name="tooltip-title" v-bind="scope">{{ getTooltipTitle(scope) }}</slot>
+      </template>
+      <template #default="scope">
+        <slot name="tooltip-content" v-bind="scope">
+          <tooltip-default-format :tooltip-content="getTooltipContent(scope)">
+            <template v-if="$scopedSlots['tooltip-value']" #tooltip-value="valueScope">
+              <slot name="tooltip-value" v-bind="valueScope"></slot>
+            </template>
+          </tooltip-default-format>
+        </slot>
       </template>
-
-      <slot name="tooltip-content">
-        <tooltip-default-format :tooltip-content="tooltipContent" />
-      </slot>
     </chart-tooltip>
     <chart-legend
       v-if="compiledOptions"

package/src/utils/charts/config.js

@@ -469,7 +469,8 @@ export const getTooltipContent = (params = null, valueAxisName = null) => {
     };
   }
 
-  return seriesData.reduce((acc, { value: [, yValue], seriesName, color }) => {
+  return seriesData.reduce((acc, { value, seriesName, color }) => {
+    const yValue = value[1];
     acc[seriesName] = { value: yValue, color };
     return acc;
   }, {});