@gitlab/ui 111.8.0 → 111.8.1

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [111.8.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v111.8.0...v111.8.1) (2025-03-27)
+
+
+### Bug Fixes
+
+* **GlLineChart, GlAreaChart, GlStackedColumn:** Fix tooltip updates ([7ac5e58](https://gitlab.com/gitlab-org/gitlab-ui/commit/7ac5e589838ad720e2767fb986b628b026467745))
+
 # [111.8.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v111.7.1...v111.8.0) (2025-03-26)
 
 

package/dist/components/charts/area/area.js

@@ -146,18 +146,7 @@ var script = {
       return generateAnnotationSeries(this.annotations);
     },
     options() {
-      const defaultAreaChartOptions = {
-        xAxis: {
-          axisPointer: {
-            show: true,
-            lineStyle: {
-              type: 'solid'
-            },
-            label: {
-              formatter: this.formatTooltipText
-            }
-          }
-        },
+      const areaChartOptions = {
         yAxis: {
           axisTick: {
             show: false
@@ -167,7 +156,20 @@ var script = {
           show: false
         }
       };
-      const mergedOptions = merge({}, defaultChartOptions, defaultAreaChartOptions, this.option, dataZoomAdjustments(this.option.dataZoom));
+
+      // `formatTooltipText` is deprecated, these added options should be
+      // removed when `formatTooltipText` is removed.
+      const deprecatedTooltipFormatterOptions = {
+        xAxis: {
+          axisPointer: {
+            show: true,
+            label: {
+              formatter: this.formatTooltipText
+            }
+          }
+        }
+      };
+      const mergedOptions = merge({}, defaultChartOptions, areaChartOptions, this.formatTooltipText ? deprecatedTooltipFormatterOptions : {}, this.option, dataZoomAdjustments(this.option.dataZoom));
       // All chart options can be merged but series
       // needs to be handled specially.
       return mergeSeriesToOptions(mergeAnnotationAxisToOptions(mergedOptions, this.hasAnnotations), this.series);

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

@@ -140,14 +140,8 @@ var script = {
       return generateAnnotationSeries(this.annotations);
     },
     options() {
-      const defaultLineChartOptions = {
+      const lineChartOptions = {
         xAxis: {
-          axisPointer: {
-            show: true,
-            label: {
-              formatter: this.formatTooltipText
-            }
-          },
           axisTick: {
             alignWithLabel: true,
             show: true,
@@ -160,7 +154,20 @@ var script = {
           show: false
         }
       };
-      const mergedOptions = merge({}, defaultChartOptions, defaultLineChartOptions, this.option, dataZoomAdjustments(this.option.dataZoom));
+
+      // `formatTooltipText` is deprecated, these added options should be
+      // removed when `formatTooltipText` is removed.
+      const deprecatedTooltipFormatterOptions = {
+        xAxis: {
+          axisPointer: {
+            show: true,
+            label: {
+              formatter: this.formatTooltipText
+            }
+          }
+        }
+      };
+      const mergedOptions = merge({}, defaultChartOptions, lineChartOptions, this.formatTooltipText ? deprecatedTooltipFormatterOptions : {}, this.option, dataZoomAdjustments(this.option.dataZoom));
       // All chart options can be merged but series
       // needs to be handled specially
       return mergeSeriesToOptions(mergeAnnotationAxisToOptions(mergedOptions, this.hasAnnotations), this.series);

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

@@ -1,5 +1,5 @@
 import merge from 'lodash/merge';
-import { yAxis, generateBarSeries, generateLineSeries, defaultChartOptions, gridWithSecondaryYAxis, grid, dataZoomAdjustments, mergeSeriesToOptions } from '../../../utils/charts/config';
+import { yAxis, generateBarSeries, generateLineSeries, gridWithSecondaryYAxis, grid, defaultChartOptions, dataZoomAdjustments, mergeSeriesToOptions } from '../../../utils/charts/config';
 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';
@@ -205,7 +205,7 @@ var script = {
       return [...this.barSeries, ...this.lineSeries, ...this.secondarySeries];
     },
     options() {
-      const mergedOptions = merge({}, defaultChartOptions, {
+      const stackedColumnChartOptions = {
         grid: this.hasSecondaryAxis ? gridWithSecondaryYAxis : grid,
         xAxis: {
           boundaryGap: true,
@@ -217,11 +217,7 @@ var script = {
             show: false
           },
           axisPointer: {
-            show: true,
-            type: 'none',
-            label: {
-              formatter: this.formatTooltipText
-            }
+            type: 'none'
           },
           data: this.groupBy,
           name: this.xAxisTitle,
@@ -238,7 +234,21 @@ var script = {
         legend: {
           show: false
         }
-      }, this.option, dataZoomAdjustments(this.option.dataZoom));
+      };
+
+      // `formatTooltipText` is deprecated, these added options should be
+      // removed when `formatTooltipText` is removed.
+      const deprecatedTooltipFormatterOptions = {
+        xAxis: {
+          axisPointer: {
+            show: true,
+            label: {
+              formatter: this.formatTooltipText
+            }
+          }
+        }
+      };
+      const mergedOptions = merge({}, defaultChartOptions, stackedColumnChartOptions, this.formatTooltipText ? deprecatedTooltipFormatterOptions : {}, this.option, dataZoomAdjustments(this.option.dataZoom));
       // All chart options can be merged but series
       // needs to be handled specially
       return mergeSeriesToOptions(mergedOptions, this.series);

package/dist/utils/charts/config.js

@@ -37,6 +37,10 @@ const grid = {
   left: 64,
   right: 32
 };
+
+/**
+ * Options for charts where the y-axis is the metrics axis.
+ */
 const defaultChartOptions = {
   grid,
   xAxis,

package/package.json

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

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

@@ -186,18 +186,7 @@ export default {
       return generateAnnotationSeries(this.annotations);
     },
     options() {
-      const defaultAreaChartOptions = {
-        xAxis: {
-          axisPointer: {
-            show: true,
-            lineStyle: {
-              type: 'solid',
-            },
-            label: {
-              formatter: this.formatTooltipText,
-            },
-          },
-        },
+      const areaChartOptions = {
         yAxis: {
           axisTick: {
             show: false,
@@ -207,10 +196,25 @@ export default {
           show: false,
         },
       };
+
+      // `formatTooltipText` is deprecated, these added options should be
+      // removed when `formatTooltipText` is removed.
+      const deprecatedTooltipFormatterOptions = {
+        xAxis: {
+          axisPointer: {
+            show: true,
+            label: {
+              formatter: this.formatTooltipText,
+            },
+          },
+        },
+      };
+
       const mergedOptions = merge(
         {},
         defaultChartOptions,
-        defaultAreaChartOptions,
+        areaChartOptions,
+        this.formatTooltipText ? deprecatedTooltipFormatterOptions : {},
         this.option,
         dataZoomAdjustments(this.option.dataZoom)
       );

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

@@ -180,14 +180,8 @@ export default {
       return generateAnnotationSeries(this.annotations);
     },
     options() {
-      const defaultLineChartOptions = {
+      const lineChartOptions = {
         xAxis: {
-          axisPointer: {
-            show: true,
-            label: {
-              formatter: this.formatTooltipText,
-            },
-          },
           axisTick: {
             alignWithLabel: true,
             show: true,
@@ -200,10 +194,25 @@ export default {
           show: false,
         },
       };
+
+      // `formatTooltipText` is deprecated, these added options should be
+      // removed when `formatTooltipText` is removed.
+      const deprecatedTooltipFormatterOptions = {
+        xAxis: {
+          axisPointer: {
+            show: true,
+            label: {
+              formatter: this.formatTooltipText,
+            },
+          },
+        },
+      };
+
       const mergedOptions = merge(
         {},
         defaultChartOptions,
-        defaultLineChartOptions,
+        lineChartOptions,
+        this.formatTooltipText ? deprecatedTooltipFormatterOptions : {},
         this.option,
         dataZoomAdjustments(this.option.dataZoom)
       );

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

@@ -192,46 +192,58 @@ export default {
       return [...this.barSeries, ...this.lineSeries, ...this.secondarySeries];
     },
     options() {
-      const mergedOptions = merge(
-        {},
-        defaultChartOptions,
-        {
-          grid: this.hasSecondaryAxis ? gridWithSecondaryYAxis : grid,
-          xAxis: {
-            boundaryGap: true,
-            axisLabel: {
-              margin: 20,
-              verticalAlign: 'bottom',
-            },
-            axisLine: {
-              show: false,
-            },
-            axisPointer: {
-              show: true,
-              type: 'none',
-              label: {
-                formatter: this.formatTooltipText,
-              },
-            },
-            data: this.groupBy,
-            name: this.xAxisTitle,
-            type: this.xAxisType,
+      const stackedColumnChartOptions = {
+        grid: this.hasSecondaryAxis ? gridWithSecondaryYAxis : grid,
+        xAxis: {
+          boundaryGap: true,
+          axisLabel: {
+            margin: 20,
+            verticalAlign: 'bottom',
           },
-          yAxis: [
-            {
-              ...yAxisDefaults,
-              name: this.yAxisTitle,
-            },
-            {
-              ...yAxisDefaults,
-              name: this.secondaryDataTitle,
-              show: this.hasSecondaryAxis,
-            },
-          ],
-          legend: {
+          axisLine: {
             show: false,
           },
+          axisPointer: {
+            type: 'none',
+          },
+          data: this.groupBy,
+          name: this.xAxisTitle,
+          type: this.xAxisType,
+        },
+        yAxis: [
+          {
+            ...yAxisDefaults,
+            name: this.yAxisTitle,
+          },
+          {
+            ...yAxisDefaults,
+            name: this.secondaryDataTitle,
+            show: this.hasSecondaryAxis,
+          },
+        ],
+        legend: {
+          show: false,
+        },
+      };
+
+      // `formatTooltipText` is deprecated, these added options should be
+      // removed when `formatTooltipText` is removed.
+      const deprecatedTooltipFormatterOptions = {
+        xAxis: {
+          axisPointer: {
+            show: true,
+            label: {
+              formatter: this.formatTooltipText,
+            },
+          },
         },
+      };
+
+      const mergedOptions = merge(
+        {},
+        defaultChartOptions,
+        stackedColumnChartOptions,
+        this.formatTooltipText ? deprecatedTooltipFormatterOptions : {},
         this.option,
         dataZoomAdjustments(this.option.dataZoom)
       );

package/src/utils/charts/config.js

@@ -42,6 +42,9 @@ export const grid = {
   right: 32,
 };
 
+/**
+ * Options for charts where the y-axis is the metrics axis.
+ */
 export const defaultChartOptions = {
   grid,
   xAxis,