@gitlab/ui 134.8.0 → 135.0.0

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

@@ -64,23 +64,38 @@ export default {
   },
   inheritAttrs: false,
   props: {
+    /**
+     * The chart data series to render.
+     */
     data: {
       type: Object,
       required: true,
     },
+    /**
+     * Additional ECharts option overrides.
+     */
     option: {
       type: Object,
       required: false,
       default: () => ({}),
     },
+    /**
+     * Title text for the Y axis.
+     */
     yAxisTitle: {
       type: String,
       required: true,
     },
+    /**
+     * Title text for the X axis.
+     */
     xAxisTitle: {
       type: String,
       required: true,
     },
+    /**
+     * Type of the X axis (e.g., 'category', 'value').
+     */
     xAxisType: {
       type: String,
       required: false,

package/src/components/charts/chart/chart.vue

@@ -31,6 +31,9 @@ export default {
       type: Object,
       required: true,
     },
+    /**
+     * Width of the chart in pixels. Set to "auto" to use the width of the container.
+     */
     width: {
       type: [Number, String],
       required: false,
@@ -38,7 +41,7 @@ export default {
       validator: sizeValidator,
     },
     /**
-     * Sets the chart's height in pixels. Set to `"auto"` to use the height of the container.
+     * Height of the chart in pixels. Set to "auto" to use the height of the container.
      */
     height: {
       type: [Number, String],
@@ -67,6 +70,9 @@ export default {
         return validRenderers.includes(renderer);
       },
     },
+    /**
+     * When true, the chart automatically resizes to fit its container.
+     */
     responsive: {
       type: Boolean,
       required: false,

package/src/components/charts/column/column.vue

@@ -36,39 +36,63 @@ export default {
   },
   inheritAttrs: false,
   props: {
+    /**
+     * Array of bar series data.
+     */
     bars: {
       type: Array,
       required: false,
       default: () => [],
     },
+    /**
+     * Array of line series data.
+     */
     lines: {
       type: Array,
       required: false,
       default: () => [],
     },
+    /**
+     * Secondary data series for the chart.
+     */
     secondaryData: {
       type: Array,
       required: false,
       default: () => [],
     },
+    /**
+     * Additional ECharts option overrides.
+     */
     option: {
       type: Object,
       required: false,
       default: () => ({}),
     },
+    /**
+     * Title text for the Y axis.
+     */
     yAxisTitle: {
       type: String,
       required: true,
     },
+    /**
+     * Title text for the secondary data axis.
+     */
     secondaryDataTitle: {
       type: String,
       required: false,
       default: '',
     },
+    /**
+     * Title text for the X axis.
+     */
     xAxisTitle: {
       type: String,
       required: true,
     },
+    /**
+     * Type of the X axis (e.g., 'category', 'value').
+     */
     xAxisType: {
       type: String,
       required: true,

package/src/components/charts/discrete_scatter/discrete_scatter.vue

@@ -20,33 +20,54 @@ export default {
   },
   inheritAttrs: false,
   props: {
+    /**
+     * The chart data series to render.
+     */
     data: {
       type: Array,
       required: true,
     },
+    /**
+     * Additional ECharts option overrides.
+     */
     option: {
       type: Object,
       required: false,
       default: () => ({}),
     },
+    /**
+     * Title text for the Y axis.
+     */
     yAxisTitle: {
       type: String,
       required: true,
     },
+    /**
+     * Title text for the X axis.
+     */
     xAxisTitle: {
       type: String,
       required: true,
     },
+    /**
+     * Size of the scatter symbols.
+     */
     symbolSize: {
       type: Number,
       required: false,
       default: 8,
     },
+    /**
+     * Custom function to format tooltip text.
+     */
     formatTooltipText: {
       type: Function,
       required: false,
       default: null,
     },
+    /**
+     * When true, disables the tooltip.
+     */
     disableTooltip: {
       type: Boolean,
       required: false,

package/src/components/charts/gauge/gauge.vue

@@ -53,20 +53,32 @@ export default {
     Chart,
   },
   props: {
+    /**
+     * The current gauge value.
+     */
     value: {
       type: Number,
       required: true,
     },
+    /**
+     * Minimum value of the gauge scale.
+     */
     min: {
       type: Number,
       required: false,
       default: 0,
     },
+    /**
+     * Maximum value of the gauge scale.
+     */
     max: {
       type: Number,
       required: false,
       default: 100,
     },
+    /**
+     * Array of threshold configurations for coloring the gauge.
+     */
     thresholds: {
       type: Array,
       required: false,
@@ -75,16 +87,25 @@ export default {
         return value?.length ? value.every((item) => Number.isFinite(item)) : true;
       },
     },
+    /**
+     * Text label to display on the gauge.
+     */
     text: {
       type: String,
       required: false,
       default: '',
     },
+    /**
+     * Number of split segments on the gauge scale.
+     */
     splitNumber: {
       type: Number,
       required: false,
       default: 10,
     },
+    /**
+     * Additional ECharts option overrides.
+     */
     option: {
       type: Object,
       required: false,

package/src/components/charts/heatmap/heatmap.vue

@@ -48,50 +48,80 @@ export default {
     TooltipDefaultFormat,
   },
   props: {
+    /**
+     * Additional ECharts option overrides.
+     */
     option: {
       type: Object,
       required: false,
       default: () => ({}),
     },
+    /**
+     * The heatmap data series to render.
+     */
     dataSeries: {
       type: Array,
       required: true,
     },
+    /**
+     * Labels for the X axis categories.
+     */
     xAxisLabels: {
       type: Array,
       required: false,
       default: () => [],
     },
+    /**
+     * Labels for the Y axis categories.
+     */
     yAxisLabels: {
       type: Array,
       required: false,
       default: () => [],
     },
+    /**
+     * Name/label for the X axis.
+     */
     xAxisName: {
       type: String,
       required: false,
       default: '',
     },
+    /**
+     * Name/label for the Y axis.
+     */
     yAxisName: {
       type: String,
       required: false,
       default: '',
     },
+    /**
+     * Custom function to format tooltip text.
+     */
     formatTooltipText: {
       type: Function,
       required: false,
       default: null,
     },
+    /**
+     * Custom text for the average value in the legend.
+     */
     legendAverageText: {
       type: String,
       required: false,
       default: 'Avg',
     },
+    /**
+     * Custom text for the maximum value in the legend.
+     */
     legendMaxText: {
       type: String,
       required: false,
       default: 'Max',
     },
+    /**
+     * When true, the chart automatically resizes to fit its container.
+     */
     responsive: {
       type: Boolean,
       required: false,
@@ -105,6 +135,9 @@ export default {
       required: false,
       default: null,
     },
+    /**
+     * When true, enables the tooltip on hover.
+     */
     showTooltip: {
       type: Boolean,
       default: true,

package/src/components/charts/legend/legend.vue

@@ -20,6 +20,9 @@ export default {
     GlTruncate,
   },
   props: {
+    /**
+     * Reference to the ECharts instance.
+     */
     chart: {
       type: Object,
       required: true,
@@ -27,6 +30,9 @@ export default {
         return Object.is(chart, echarts.getInstanceByDom(chart.getDom()));
       },
     },
+    /**
+     * Array of series information for the legend.
+     */
     seriesInfo: {
       type: Array,
       required: true,
@@ -34,6 +40,9 @@ export default {
         return seriesInfo.every((series) => series.type && series.name && series.color);
       },
     },
+    /**
+     * Text style configuration for the legend labels.
+     */
     textStyle: {
       type: Object,
       required: false,
@@ -47,11 +56,17 @@ export default {
       required: false,
       default: LEGEND_AVERAGE_TEXT,
     },
+    /**
+     * Custom text for the current value label.
+     */
     currentText: {
       type: String,
       required: false,
       default: LEGEND_CURRENT_TEXT,
     },
+    /**
+     * Custom text for the minimum value label.
+     */
     minText: {
       type: String,
       required: false,

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

@@ -53,25 +53,40 @@ export default {
   },
   inheritAttrs: false,
   props: {
+    /**
+     * The chart data series to render.
+     */
     data: {
       type: Array,
       required: true,
     },
+    /**
+     * Additional ECharts option overrides.
+     */
     option: {
       type: Object,
       required: false,
       default: () => ({}),
     },
+    /**
+     * Array of threshold configurations for coloring the line.
+     */
     thresholds: {
       type: Array,
       required: false,
       default: () => [],
     },
+    /**
+     * Array of annotation configurations.
+     */
     annotations: {
       type: Array,
       required: false,
       default: () => [],
     },
+    /**
+     * When true, includes average and maximum values in the legend.
+     */
     includeLegendAvgMax: {
       type: Boolean,
       required: false,
@@ -88,26 +103,41 @@ export default {
       required: false,
       default: null,
     },
+    /**
+     * Custom text for the average value in the legend.
+     */
     legendAverageText: {
       type: String,
       required: false,
       default: LEGEND_AVERAGE_TEXT,
     },
+    /**
+     * Custom text for the maximum value in the legend.
+     */
     legendMaxText: {
       type: String,
       required: false,
       default: LEGEND_MAX_TEXT,
     },
+    /**
+     * Custom text for the minimum value label.
+     */
     legendMinText: {
       type: String,
       required: false,
       default: LEGEND_MIN_TEXT,
     },
+    /**
+     * Custom text for the current value label.
+     */
     legendCurrentText: {
       type: String,
       required: false,
       default: LEGEND_CURRENT_TEXT,
     },
+    /**
+     * Layout configuration for the legend.
+     */
     legendLayout: {
       type: String,
       required: false,
@@ -116,6 +146,9 @@ export default {
         return [LEGEND_LAYOUT_INLINE, LEGEND_LAYOUT_TABLE].indexOf(layout) !== -1;
       },
     },
+    /**
+     * When true, displays the legend.
+     */
     showLegend: {
       type: Boolean,
       required: false,

package/src/components/charts/series_label/series_label.vue

@@ -6,10 +6,16 @@ const makePathRect = (startX, startY, width, height) =>
 export default {
   name: 'GlChartSeriesLabel',
   props: {
+    /**
+     * Color of the series label indicator.
+     */
     color: {
       type: String,
       required: true,
     },
+    /**
+     * Type of the series label (e.g., 'line', 'bar').
+     */
     type: {
       type: String,
       required: false,

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

@@ -21,6 +21,9 @@ export default {
   },
   inheritAttrs: false,
   props: {
+    /**
+     * Reference to the ECharts instance.
+     */
     chart: {
       type: Object,
       required: true,
@@ -28,6 +31,9 @@ export default {
         return Object.is(chart, echarts.getInstanceByDom(chart.getDom()));
       },
     },
+    /**
+     * Unique identifier for the tooltip.
+     */
     id: {
       type: String,
       required: false,

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

@@ -7,6 +7,9 @@ export default {
     SeriesLabel,
   },
   props: {
+    /**
+     * The tooltip content object to format.
+     */
     tooltipContent: {
       type: Object,
       required: true,

package/src/components/charts/single_stat/single_stat.vue

@@ -19,14 +19,23 @@ export default {
     GlTooltip: GlTooltipDirective,
   },
   props: {
+    /**
+     * Title text for the single stat.
+     */
     title: {
       type: String,
       required: true,
     },
+    /**
+     * The numeric value to display.
+     */
     value: {
       type: [String, Number],
       required: true,
     },
+    /**
+     * Unit text to display after the value.
+     */
     unit: {
       type: String,
       required: false,
@@ -40,12 +49,18 @@ export default {
       required: false,
       default: false,
     },
+    /**
+     * Visual variant of the single stat display.
+     */
     variant: {
       type: String,
       required: false,
       default: badgeVariantOptions.neutral,
       validator: (variant) => Object.values(badgeVariantOptions).includes(variant),
     },
+    /**
+     * Name of the icon to show next to the title.
+     */
     titleIcon: {
       type: String,
       required: false,
@@ -59,11 +74,17 @@ export default {
       required: false,
       default: '',
     },
+    /**
+     * Name of the icon to show next to the meta text.
+     */
     metaIcon: {
       type: String,
       required: false,
       default: null,
     },
+    /**
+     * Meta text displayed below the main value.
+     */
     metaText: {
       type: String,
       required: false,
@@ -77,16 +98,25 @@ export default {
       required: false,
       default: '',
     },
+    /**
+     * When true, animates the value change.
+     */
     shouldAnimate: {
       type: Boolean,
       required: false,
       default: false,
     },
+    /**
+     * Number of decimal places for the animated value.
+     */
     animationDecimalPlaces: {
       type: Number,
       required: false,
       default: 0,
     },
+    /**
+     * Description text for the single stat.
+     */
     description: {
       type: String,
       required: false,