@gitlab/ui 126.3.3 → 126.3.4

package/dist/utils/charts/config.js

@@ -538,6 +538,41 @@ const getTooltipContent = function () {
   }, {});
 };
 
+/**
+ * Enriches tooltip parameters with stack information for proper series ordering.
+ *
+ * In stacked column charts, series are grouped by their `stack` property to determine
+ * visual stacking and tooltip display order. ECharts doesn't provide stack data
+ * in tooltip params by default, so this function manually adds it by mapping
+ * series names to their configured stack values.
+ *
+ * @param {Object} params - Tooltip parameters from ECharts
+ * @param {Object} options - Chart configuration with series definitions
+ * @returns {Object} Enhanced tooltip parameters with stack data
+ */
+const getTooltipParams = function () {
+  let params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+  let options = arguments.length > 1 ? arguments[1] : undefined;
+  if (!params) return null;
+  const {
+    series: optionsSeries = []
+  } = options !== null && options !== void 0 ? options : {};
+  const seriesStacks = Object.fromEntries(optionsSeries.map(_ref8 => {
+    let {
+      name,
+      stack
+    } = _ref8;
+    return [name, stack];
+  }));
+  return {
+    ...params,
+    seriesData: params.seriesData.map(series => ({
+      ...series,
+      stack: seriesStacks[series.seriesName]
+    }))
+  };
+};
+
 /**
  * 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.
@@ -579,4 +614,4 @@ const getDefaultTooltipContent = function (params) {
   };
 };
 
-export { annotationsYAxisCoords, axes, dataZoomAdjustments, defaultAreaOpacity, defaultChartOptions, defaultFontSize, defaultHeight, defaultWidth, generateAnnotationSeries, generateBarSeries, generateLineSeries, getAnnotationsConfig, getDataZoomConfig, getDefaultTooltipContent, getThresholdConfig, getTooltipAxisConfig, getTooltipContent, getTooltipTitle, 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, getTooltipAxisConfig, getTooltipContent, getTooltipParams, getTooltipTitle, grid, gridWithSecondaryYAxis, lineStyle, mergeAnnotationAxisToOptions, mergeSeriesToOptions, parseAnnotations, symbolSize, toolboxHeight, validRenderers, xAxis, yAxis };

package/dist/utils/charts/mock_data.js

@@ -112,6 +112,23 @@ const mockDefaultStackedBarData = [{
   name: 'Fun 4',
   data: [8, 9, 5, 40, 13, 19, 58, 21, 47, 59, 23, 46]
 }];
+const mockMultiStackBarData = [{
+  name: 'Fun 1',
+  data: [58, 49, 38, 23, 27, 68, 38, 35, 7, 64, 65, 31],
+  stack: 'stack-1'
+}, {
+  name: 'Fun 2',
+  data: [8, 6, 34, 19, 9, 7, 17, 25, 14, 7, 10, 32],
+  stack: 'stack-1'
+}, {
+  name: 'Fun 3',
+  data: [67, 60, 66, 32, 61, 54, 13, 50, 16, 11, 47, 28],
+  stack: 'stack-2'
+}, {
+  name: 'Fun 4',
+  data: [8, 9, 5, 40, 13, 19, 58, 21, 47, 59, 23, 46],
+  stack: 'stack-2'
+}];
 const mockDefaultStackedLineData = [{
   name: 'Stacked median line',
   data: [67, 60, 66, 32, 61, 54, 13, 50, 16, 11, 47, 28]
@@ -171,4 +188,4 @@ const mockSecondaryTrendlineData = [{
   data: [['Joe', 220], ['Sarah', 392], ['Tom', 291], ['Mary', 594], ['Mike', 320], ['Ben', 230], ['Jane', 120], ['Anne', 290]]
 }];
 
-export { mockAnnotationsConfigs, mockAnnotationsSeries, mockDefaultBarChartConfig, mockDefaultBarData, mockDefaultDataZoomConfig, mockDefaultLineChartConfig, mockDefaultLineData, mockDefaultStackedBarData, mockDefaultStackedLineData, mockRawBarData, mockSecondaryBarData, mockSecondaryData, mockSecondaryTrendlineData };
+export { mockAnnotationsConfigs, mockAnnotationsSeries, mockDefaultBarChartConfig, mockDefaultBarData, mockDefaultDataZoomConfig, mockDefaultLineChartConfig, mockDefaultLineData, mockDefaultStackedBarData, mockDefaultStackedLineData, mockMultiStackBarData, mockRawBarData, mockSecondaryBarData, mockSecondaryData, mockSecondaryTrendlineData };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "126.3.3",
+  "version": "126.3.4",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -159,7 +159,7 @@
     "rollup-plugin-string": "^3.0.0",
     "rollup-plugin-svg": "^2.0.0",
     "rollup-plugin-vue": "^5.1.9",
-    "sass": "^1.94.2",
+    "sass": "^1.95.0",
     "sass-loader": "^10.5.2",
     "sass-true": "^9",
     "start-server-and-test": "^2.1.3",

package/src/components/base/new_dropdowns/dropdown_item.scss

@@ -146,7 +146,7 @@
     }
 
     &:hover {
-      .gl-new-dropdown-item-content {
+      .gl-new-dropdown-item-content:not(:disabled):not(.disabled) {
         color: var(--gl-action-danger-foreground-color-hover);
         background-color: var(--gl-action-danger-background-color-hover);
       }

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

@@ -9,6 +9,7 @@ import {
   getTooltipTitle,
   getTooltipContent,
   getTooltipAxisConfig,
+  getTooltipParams,
 } from '../../../../utils/charts/config';
 
 import TooltipDefaultFormat from './tooltip_default_format/tooltip_default_format.vue';
@@ -242,7 +243,7 @@ export default {
 
                 this.title = getTooltipTitle(params, titleAxisName, dimensionIndex);
                 this.content = getTooltipContent(params, valueAxisName, metricIndex);
-                this.params = params;
+                this.params = getTooltipParams(params, options);
               },
             },
           },

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

@@ -1,5 +1,6 @@
 <script>
 import merge from 'lodash/merge';
+import groupBy from 'lodash/groupBy';
 import {
   defaultChartOptions,
   grid,
@@ -310,12 +311,22 @@ export default {
     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 }) => [
+      // Group by stack and invert order within so it matches `stacked` presentation (see https://github.com/apache/echarts/issues/14700).
+      const seriesDataGroupedByStack = groupBy(
+        params.seriesData,
+        ({ stack, seriesIndex }) => stack ?? seriesIndex,
+      );
+
+      const sortedSeriesData = Object.values(seriesDataGroupedByStack).flatMap((seriesDataStack) =>
+        seriesDataStack.toSorted((a, b) => b.seriesIndex - a.seriesIndex),
+      );
+
+      const tooltipContentEntries = sortedSeriesData.map(
+        ({ seriesName = '', value, borderColor, color }) => [
           seriesName,
-          { value, color: borderColor },
-        ]);
+          { value, color: borderColor ?? color },
+        ],
+      );
 
       return Object.fromEntries(tooltipContentEntries);
     },

package/src/utils/charts/config.js

@@ -486,6 +486,34 @@ export const getTooltipContent = (params = null, valueAxisName = null, metricInd
   }, {});
 };
 
+/**
+ * Enriches tooltip parameters with stack information for proper series ordering.
+ *
+ * In stacked column charts, series are grouped by their `stack` property to determine
+ * visual stacking and tooltip display order. ECharts doesn't provide stack data
+ * in tooltip params by default, so this function manually adds it by mapping
+ * series names to their configured stack values.
+ *
+ * @param {Object} params - Tooltip parameters from ECharts
+ * @param {Object} options - Chart configuration with series definitions
+ * @returns {Object} Enhanced tooltip parameters with stack data
+ */
+export const getTooltipParams = (params = null, options) => {
+  if (!params) return null;
+
+  const { series: optionsSeries = [] } = options ?? {};
+
+  const seriesStacks = Object.fromEntries(optionsSeries.map(({ name, stack }) => [name, stack]));
+
+  return {
+    ...params,
+    seriesData: params.seriesData.map((series) => ({
+      ...series,
+      stack: seriesStacks[series.seriesName],
+    })),
+  };
+};
+
 /**
  * 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.

package/src/utils/charts/mock_data.js

@@ -106,6 +106,13 @@ export const mockDefaultStackedBarData = [
   { name: 'Fun 4', data: [8, 9, 5, 40, 13, 19, 58, 21, 47, 59, 23, 46] },
 ];
 
+export const mockMultiStackBarData = [
+  { name: 'Fun 1', data: [58, 49, 38, 23, 27, 68, 38, 35, 7, 64, 65, 31], stack: 'stack-1' },
+  { name: 'Fun 2', data: [8, 6, 34, 19, 9, 7, 17, 25, 14, 7, 10, 32], stack: 'stack-1' },
+  { name: 'Fun 3', data: [67, 60, 66, 32, 61, 54, 13, 50, 16, 11, 47, 28], stack: 'stack-2' },
+  { name: 'Fun 4', data: [8, 9, 5, 40, 13, 19, 58, 21, 47, 59, 23, 46], stack: 'stack-2' },
+];
+
 export const mockDefaultStackedLineData = [
   { name: 'Stacked median line', data: [67, 60, 66, 32, 61, 54, 13, 50, 16, 11, 47, 28] },
 ];