@gitlab/ui 119.1.0 → 119.2.0

package/dist/components/charts/bar/bar.js

@@ -1,13 +1,14 @@
 import merge from 'lodash/merge';
 import truncate from 'lodash/truncate';
 import { dataZoomAdjustments, mergeSeriesToOptions, grid } from '../../../utils/charts/config';
-import { HEIGHT_AUTO_CLASSES } from '../../../utils/charts/constants';
+import { CHART_DEFAULT_SERIES_STACK, HEIGHT_AUTO_CLASSES } from '../../../utils/charts/constants';
 import { colorFromDefaultPalette } from '../../../utils/charts/theme';
 import { engineeringNotation } from '../../../utils/number_utils';
 import { hexToRgba } from '../../../utils/utils';
 import TooltipDefaultFormat from '../shared/tooltip/tooltip_default_format/tooltip_default_format';
 import Chart from '../chart/chart';
 import ChartTooltip from '../shared/tooltip/tooltip';
+import { stackedPresentationOptions } from '../../../utils/constants';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 //
@@ -96,6 +97,17 @@ var script = {
       type: [Number, String],
       required: false,
       default: null
+    },
+    /**
+     * Controls how multiple series data are displayed in the chart –
+     * `stacked` stacks series horizontally, and
+     * `tiled` displays series as grouped bars.
+     */
+    presentation: {
+      type: String,
+      required: false,
+      default: stackedPresentationOptions.stacked,
+      validator: value => Object.values(stackedPresentationOptions).includes(value)
     }
   },
   data() {
@@ -113,7 +125,7 @@ var script = {
           name: key,
           data: this.data[key],
           type: 'bar',
-          stack: 'chart',
+          stack: this.presentation === stackedPresentationOptions.tiled ? null : CHART_DEFAULT_SERIES_STACK,
           itemStyle: {
             color: hexToRgba(barColor, 0.2),
             borderColor: barColor,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "119.1.0",
+  "version": "119.2.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -69,7 +69,7 @@
     "tailwind-config-viewer:export": "tailwind-config-viewer export ./tailwind-config-viewer-static"
   },
   "dependencies": {
-    "@floating-ui/dom": "1.7.3",
+    "@floating-ui/dom": "1.7.4",
     "echarts": "^5.6.0",
     "gridstack": "^12.3.3",
     "iframe-resizer": "^4.4.5",
@@ -102,8 +102,8 @@
     "@babel/preset-env": "^7.28.3",
     "@babel/preset-react": "^7.27.1",
     "@cypress/grep": "^4.1.1",
-    "@gitlab/fonts": "^1.3.0",
-    "@gitlab/svgs": "3.143.0",
+    "@gitlab/fonts": "^1.3.1",
+    "@gitlab/svgs": "3.145.0",
     "@jest/test-sequencer": "30.0.5",
     "@rollup/plugin-commonjs": "^28.0.6",
     "@rollup/plugin-node-resolve": "^16.0.1",
@@ -122,9 +122,9 @@
     "@storybook/vue3": "^7.6.20",
     "@storybook/vue3-webpack5": "^7.6.20",
     "@types/jest-image-snapshot": "^6.4.0",
-    "@vue/compat": "^3.5.18",
-    "@vue/compiler-sfc": "^3.5.18",
-    "@vue/server-renderer": "^3.5.18",
+    "@vue/compat": "^3.5.19",
+    "@vue/compiler-sfc": "^3.5.19",
+    "@vue/server-renderer": "^3.5.19",
     "@vue/test-utils": "1.3.6",
     "@vue/test-utils-vue3": "npm:@vue/test-utils@^2.4.6",
     "@vue/vue2-jest": "29.2.6",
@@ -171,7 +171,7 @@
     "start-server-and-test": "^2.0.13",
     "storybook": "^7.6.20",
     "storybook-dark-mode": "4.0.2",
-    "style-dictionary": "^5.0.1",
+    "style-dictionary": "^5.0.2",
     "style-loader": "^4",
     "tailwind-config-viewer": "2.0.4",
     "tailwindcss": "3.4.17",

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

@@ -3,13 +3,14 @@
 import merge from 'lodash/merge';
 import truncate from 'lodash/truncate';
 import { grid, dataZoomAdjustments, mergeSeriesToOptions } from '../../../utils/charts/config';
-import { HEIGHT_AUTO_CLASSES } from '../../../utils/charts/constants';
+import { CHART_DEFAULT_SERIES_STACK, HEIGHT_AUTO_CLASSES } from '../../../utils/charts/constants';
 import { colorFromDefaultPalette } from '../../../utils/charts/theme';
 import { engineeringNotation } from '../../../utils/number_utils';
 import { hexToRgba } from '../../../utils/utils';
 import TooltipDefaultFormat from '../shared/tooltip/tooltip_default_format/tooltip_default_format.vue';
 import Chart from '../chart/chart.vue';
 import ChartTooltip from '../shared/tooltip/tooltip.vue';
+import { stackedPresentationOptions } from '../../../utils/constants';
 
 /**
  * `nameGap` in charts/config is set to 50 but it is not
@@ -97,6 +98,17 @@ export default {
       required: false,
       default: null,
     },
+    /**
+     * Controls how multiple series data are displayed in the chart –
+     * `stacked` stacks series horizontally, and
+     * `tiled` displays series as grouped bars.
+     */
+    presentation: {
+      type: String,
+      required: false,
+      default: stackedPresentationOptions.stacked,
+      validator: (value) => Object.values(stackedPresentationOptions).includes(value),
+    },
   },
   data() {
     return {
@@ -114,7 +126,10 @@ export default {
           name: key,
           data: this.data[key],
           type: 'bar',
-          stack: 'chart',
+          stack:
+            this.presentation === stackedPresentationOptions.tiled
+              ? null
+              : CHART_DEFAULT_SERIES_STACK,
           itemStyle: {
             color: hexToRgba(barColor, 0.2),
             borderColor: barColor,