@gitlab/ui 111.7.1 → 111.8.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +14 -0
- package/dist/components/base/animated_icon/animated_chevron_down_up_icon.js +45 -0
- package/dist/components/base/animated_icon/animated_chevron_lg_down_up_icon.js +45 -0
- package/dist/components/base/animated_icon/animated_chevron_lg_right_down_icon.js +45 -0
- package/dist/components/charts/area/area.js +15 -13
- package/dist/components/charts/line/line.js +15 -8
- package/dist/components/charts/stacked_column/stacked_column.js +18 -8
- package/dist/index.css +1 -1
- package/dist/index.css.map +1 -1
- package/dist/index.js +3 -0
- package/dist/utils/charts/config.js +4 -0
- package/package.json +1 -1
- package/src/components/base/animated_icon/animated_chevron_down_up_icon.vue +36 -0
- package/src/components/base/animated_icon/animated_chevron_lg_down_up_icon.vue +36 -0
- package/src/components/base/animated_icon/animated_chevron_lg_right_down_icon.vue +28 -0
- package/src/components/base/animated_icon/animated_icon.scss +106 -0
- package/src/components/charts/area/area.vue +17 -13
- package/src/components/charts/line/line.vue +17 -8
- package/src/components/charts/stacked_column/stacked_column.vue +48 -36
- package/src/index.js +3 -0
- package/src/utils/charts/config.js +3 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,17 @@
|
|
|
1
|
+
## [111.8.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v111.8.0...v111.8.1) (2025-03-27)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Bug Fixes
|
|
5
|
+
|
|
6
|
+
* **GlLineChart, GlAreaChart, GlStackedColumn:** Fix tooltip updates ([7ac5e58](https://gitlab.com/gitlab-org/gitlab-ui/commit/7ac5e589838ad720e2767fb986b628b026467745))
|
|
7
|
+
|
|
8
|
+
# [111.8.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v111.7.1...v111.8.0) (2025-03-26)
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
### Features
|
|
12
|
+
|
|
13
|
+
* **GlAnimatedIcon:** add down-up, lg-down-up and lg-right-down chevrons ([1bc7430](https://gitlab.com/gitlab-org/gitlab-ui/commit/1bc7430bd3ebffb4decd2639867bb52fc544d4c5))
|
|
14
|
+
|
|
1
15
|
## [111.7.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v111.7.0...v111.7.1) (2025-03-25)
|
|
2
16
|
|
|
3
17
|
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import GlBaseAnimatedIcon from './base_animated_icon';
|
|
2
|
+
import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
|
|
3
|
+
|
|
4
|
+
var script = {
|
|
5
|
+
name: 'GlAnimatedChevronDownUpIcon',
|
|
6
|
+
extends: GlBaseAnimatedIcon
|
|
7
|
+
};
|
|
8
|
+
|
|
9
|
+
/* script */
|
|
10
|
+
const __vue_script__ = script;
|
|
11
|
+
|
|
12
|
+
/* template */
|
|
13
|
+
var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('svg',{class:[_vm.iconStateClass, _vm.iconVariantClass],attrs:{"aria-label":_vm.ariaLabel,"width":"16","height":"16","viewBox":"0 0 16 16","fill":"none","xmlns":"http://www.w3.org/2000/svg"}},[_c('path',{staticClass:"gl-animated-chevron-down-up-arrow-left-line",attrs:{"d":"M0 0L0 4.6","stroke":"currentColor","stroke-width":"1.5","stroke-linecap":"round","stroke-linejoin":"round"}}),_vm._v(" "),_c('path',{staticClass:"gl-animated-chevron-down-up-arrow-right-line",attrs:{"d":"M0 0L0 4.6","stroke":"currentColor","stroke-width":"1.5","stroke-linecap":"round","stroke-linejoin":"round"}})])};
|
|
14
|
+
var __vue_staticRenderFns__ = [];
|
|
15
|
+
|
|
16
|
+
/* style */
|
|
17
|
+
const __vue_inject_styles__ = undefined;
|
|
18
|
+
/* scoped */
|
|
19
|
+
const __vue_scope_id__ = undefined;
|
|
20
|
+
/* module identifier */
|
|
21
|
+
const __vue_module_identifier__ = undefined;
|
|
22
|
+
/* functional template */
|
|
23
|
+
const __vue_is_functional_template__ = false;
|
|
24
|
+
/* style inject */
|
|
25
|
+
|
|
26
|
+
/* style inject SSR */
|
|
27
|
+
|
|
28
|
+
/* style inject shadow dom */
|
|
29
|
+
|
|
30
|
+
|
|
31
|
+
|
|
32
|
+
const __vue_component__ = __vue_normalize__(
|
|
33
|
+
{ render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
|
|
34
|
+
__vue_inject_styles__,
|
|
35
|
+
__vue_script__,
|
|
36
|
+
__vue_scope_id__,
|
|
37
|
+
__vue_is_functional_template__,
|
|
38
|
+
__vue_module_identifier__,
|
|
39
|
+
false,
|
|
40
|
+
undefined,
|
|
41
|
+
undefined,
|
|
42
|
+
undefined
|
|
43
|
+
);
|
|
44
|
+
|
|
45
|
+
export default __vue_component__;
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import GlBaseAnimatedIcon from './base_animated_icon';
|
|
2
|
+
import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
|
|
3
|
+
|
|
4
|
+
var script = {
|
|
5
|
+
name: 'GlAnimatedChevronLgDownUpIcon',
|
|
6
|
+
extends: GlBaseAnimatedIcon
|
|
7
|
+
};
|
|
8
|
+
|
|
9
|
+
/* script */
|
|
10
|
+
const __vue_script__ = script;
|
|
11
|
+
|
|
12
|
+
/* template */
|
|
13
|
+
var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('svg',{class:[_vm.iconStateClass, _vm.iconVariantClass],attrs:{"aria-label":_vm.ariaLabel,"width":"16","height":"16","viewBox":"0 0 16 16","fill":"none","xmlns":"http://www.w3.org/2000/svg"}},[_c('path',{staticClass:"gl-animated-chevron-lg-down-up-arrow-left-line",attrs:{"d":"M0 0L0 7.5","stroke":"currentColor","stroke-width":"1.5","stroke-linecap":"round","stroke-linejoin":"round"}}),_vm._v(" "),_c('path',{staticClass:"gl-animated-chevron-lg-down-up-arrow-right-line",attrs:{"d":"M0 0L0 7.5","stroke":"currentColor","stroke-width":"1.5","stroke-linecap":"round","stroke-linejoin":"round"}})])};
|
|
14
|
+
var __vue_staticRenderFns__ = [];
|
|
15
|
+
|
|
16
|
+
/* style */
|
|
17
|
+
const __vue_inject_styles__ = undefined;
|
|
18
|
+
/* scoped */
|
|
19
|
+
const __vue_scope_id__ = undefined;
|
|
20
|
+
/* module identifier */
|
|
21
|
+
const __vue_module_identifier__ = undefined;
|
|
22
|
+
/* functional template */
|
|
23
|
+
const __vue_is_functional_template__ = false;
|
|
24
|
+
/* style inject */
|
|
25
|
+
|
|
26
|
+
/* style inject SSR */
|
|
27
|
+
|
|
28
|
+
/* style inject shadow dom */
|
|
29
|
+
|
|
30
|
+
|
|
31
|
+
|
|
32
|
+
const __vue_component__ = __vue_normalize__(
|
|
33
|
+
{ render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
|
|
34
|
+
__vue_inject_styles__,
|
|
35
|
+
__vue_script__,
|
|
36
|
+
__vue_scope_id__,
|
|
37
|
+
__vue_is_functional_template__,
|
|
38
|
+
__vue_module_identifier__,
|
|
39
|
+
false,
|
|
40
|
+
undefined,
|
|
41
|
+
undefined,
|
|
42
|
+
undefined
|
|
43
|
+
);
|
|
44
|
+
|
|
45
|
+
export default __vue_component__;
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import GlBaseAnimatedIcon from './base_animated_icon';
|
|
2
|
+
import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
|
|
3
|
+
|
|
4
|
+
var script = {
|
|
5
|
+
name: 'GlAnimatedChevronLgRightDownIcon',
|
|
6
|
+
extends: GlBaseAnimatedIcon
|
|
7
|
+
};
|
|
8
|
+
|
|
9
|
+
/* script */
|
|
10
|
+
const __vue_script__ = script;
|
|
11
|
+
|
|
12
|
+
/* template */
|
|
13
|
+
var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('svg',{class:[_vm.iconStateClass, _vm.iconVariantClass],attrs:{"aria-label":_vm.ariaLabel,"width":"16","height":"16","viewBox":"0 0 16 16","fill":"none","xmlns":"http://www.w3.org/2000/svg"}},[_c('path',{staticClass:"gl-animated-chevron-lg-right-down-arrow",attrs:{"d":"M5.75 13.2537L11.0018 8.00183L5.75 2.75","stroke":"currentColor","stroke-width":"1.5","stroke-linecap":"round","stroke-linejoin":"round"}})])};
|
|
14
|
+
var __vue_staticRenderFns__ = [];
|
|
15
|
+
|
|
16
|
+
/* style */
|
|
17
|
+
const __vue_inject_styles__ = undefined;
|
|
18
|
+
/* scoped */
|
|
19
|
+
const __vue_scope_id__ = undefined;
|
|
20
|
+
/* module identifier */
|
|
21
|
+
const __vue_module_identifier__ = undefined;
|
|
22
|
+
/* functional template */
|
|
23
|
+
const __vue_is_functional_template__ = false;
|
|
24
|
+
/* style inject */
|
|
25
|
+
|
|
26
|
+
/* style inject SSR */
|
|
27
|
+
|
|
28
|
+
/* style inject shadow dom */
|
|
29
|
+
|
|
30
|
+
|
|
31
|
+
|
|
32
|
+
const __vue_component__ = __vue_normalize__(
|
|
33
|
+
{ render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
|
|
34
|
+
__vue_inject_styles__,
|
|
35
|
+
__vue_script__,
|
|
36
|
+
__vue_scope_id__,
|
|
37
|
+
__vue_is_functional_template__,
|
|
38
|
+
__vue_module_identifier__,
|
|
39
|
+
false,
|
|
40
|
+
undefined,
|
|
41
|
+
undefined,
|
|
42
|
+
undefined
|
|
43
|
+
);
|
|
44
|
+
|
|
45
|
+
export default __vue_component__;
|
|
@@ -146,18 +146,7 @@ var script = {
|
|
|
146
146
|
return generateAnnotationSeries(this.annotations);
|
|
147
147
|
},
|
|
148
148
|
options() {
|
|
149
|
-
const
|
|
150
|
-
xAxis: {
|
|
151
|
-
axisPointer: {
|
|
152
|
-
show: true,
|
|
153
|
-
lineStyle: {
|
|
154
|
-
type: 'solid'
|
|
155
|
-
},
|
|
156
|
-
label: {
|
|
157
|
-
formatter: this.formatTooltipText
|
|
158
|
-
}
|
|
159
|
-
}
|
|
160
|
-
},
|
|
149
|
+
const areaChartOptions = {
|
|
161
150
|
yAxis: {
|
|
162
151
|
axisTick: {
|
|
163
152
|
show: false
|
|
@@ -167,7 +156,20 @@ var script = {
|
|
|
167
156
|
show: false
|
|
168
157
|
}
|
|
169
158
|
};
|
|
170
|
-
|
|
159
|
+
|
|
160
|
+
// `formatTooltipText` is deprecated, these added options should be
|
|
161
|
+
// removed when `formatTooltipText` is removed.
|
|
162
|
+
const deprecatedTooltipFormatterOptions = {
|
|
163
|
+
xAxis: {
|
|
164
|
+
axisPointer: {
|
|
165
|
+
show: true,
|
|
166
|
+
label: {
|
|
167
|
+
formatter: this.formatTooltipText
|
|
168
|
+
}
|
|
169
|
+
}
|
|
170
|
+
}
|
|
171
|
+
};
|
|
172
|
+
const mergedOptions = merge({}, defaultChartOptions, areaChartOptions, this.formatTooltipText ? deprecatedTooltipFormatterOptions : {}, this.option, dataZoomAdjustments(this.option.dataZoom));
|
|
171
173
|
// All chart options can be merged but series
|
|
172
174
|
// needs to be handled specially.
|
|
173
175
|
return mergeSeriesToOptions(mergeAnnotationAxisToOptions(mergedOptions, this.hasAnnotations), this.series);
|
|
@@ -140,14 +140,8 @@ var script = {
|
|
|
140
140
|
return generateAnnotationSeries(this.annotations);
|
|
141
141
|
},
|
|
142
142
|
options() {
|
|
143
|
-
const
|
|
143
|
+
const lineChartOptions = {
|
|
144
144
|
xAxis: {
|
|
145
|
-
axisPointer: {
|
|
146
|
-
show: true,
|
|
147
|
-
label: {
|
|
148
|
-
formatter: this.formatTooltipText
|
|
149
|
-
}
|
|
150
|
-
},
|
|
151
145
|
axisTick: {
|
|
152
146
|
alignWithLabel: true,
|
|
153
147
|
show: true,
|
|
@@ -160,7 +154,20 @@ var script = {
|
|
|
160
154
|
show: false
|
|
161
155
|
}
|
|
162
156
|
};
|
|
163
|
-
|
|
157
|
+
|
|
158
|
+
// `formatTooltipText` is deprecated, these added options should be
|
|
159
|
+
// removed when `formatTooltipText` is removed.
|
|
160
|
+
const deprecatedTooltipFormatterOptions = {
|
|
161
|
+
xAxis: {
|
|
162
|
+
axisPointer: {
|
|
163
|
+
show: true,
|
|
164
|
+
label: {
|
|
165
|
+
formatter: this.formatTooltipText
|
|
166
|
+
}
|
|
167
|
+
}
|
|
168
|
+
}
|
|
169
|
+
};
|
|
170
|
+
const mergedOptions = merge({}, defaultChartOptions, lineChartOptions, this.formatTooltipText ? deprecatedTooltipFormatterOptions : {}, this.option, dataZoomAdjustments(this.option.dataZoom));
|
|
164
171
|
// All chart options can be merged but series
|
|
165
172
|
// needs to be handled specially
|
|
166
173
|
return mergeSeriesToOptions(mergeAnnotationAxisToOptions(mergedOptions, this.hasAnnotations), this.series);
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import merge from 'lodash/merge';
|
|
2
|
-
import { yAxis, generateBarSeries, generateLineSeries,
|
|
2
|
+
import { yAxis, generateBarSeries, generateLineSeries, gridWithSecondaryYAxis, grid, defaultChartOptions, dataZoomAdjustments, mergeSeriesToOptions } from '../../../utils/charts/config';
|
|
3
3
|
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';
|
|
4
4
|
import { colorFromDefaultPalette } from '../../../utils/charts/theme';
|
|
5
5
|
import { columnOptions } from '../../../utils/constants';
|
|
@@ -205,7 +205,7 @@ var script = {
|
|
|
205
205
|
return [...this.barSeries, ...this.lineSeries, ...this.secondarySeries];
|
|
206
206
|
},
|
|
207
207
|
options() {
|
|
208
|
-
const
|
|
208
|
+
const stackedColumnChartOptions = {
|
|
209
209
|
grid: this.hasSecondaryAxis ? gridWithSecondaryYAxis : grid,
|
|
210
210
|
xAxis: {
|
|
211
211
|
boundaryGap: true,
|
|
@@ -217,11 +217,7 @@ var script = {
|
|
|
217
217
|
show: false
|
|
218
218
|
},
|
|
219
219
|
axisPointer: {
|
|
220
|
-
|
|
221
|
-
type: 'none',
|
|
222
|
-
label: {
|
|
223
|
-
formatter: this.formatTooltipText
|
|
224
|
-
}
|
|
220
|
+
type: 'none'
|
|
225
221
|
},
|
|
226
222
|
data: this.groupBy,
|
|
227
223
|
name: this.xAxisTitle,
|
|
@@ -238,7 +234,21 @@ var script = {
|
|
|
238
234
|
legend: {
|
|
239
235
|
show: false
|
|
240
236
|
}
|
|
241
|
-
}
|
|
237
|
+
};
|
|
238
|
+
|
|
239
|
+
// `formatTooltipText` is deprecated, these added options should be
|
|
240
|
+
// removed when `formatTooltipText` is removed.
|
|
241
|
+
const deprecatedTooltipFormatterOptions = {
|
|
242
|
+
xAxis: {
|
|
243
|
+
axisPointer: {
|
|
244
|
+
show: true,
|
|
245
|
+
label: {
|
|
246
|
+
formatter: this.formatTooltipText
|
|
247
|
+
}
|
|
248
|
+
}
|
|
249
|
+
}
|
|
250
|
+
};
|
|
251
|
+
const mergedOptions = merge({}, defaultChartOptions, stackedColumnChartOptions, this.formatTooltipText ? deprecatedTooltipFormatterOptions : {}, this.option, dataZoomAdjustments(this.option.dataZoom));
|
|
242
252
|
// All chart options can be merged but series
|
|
243
253
|
// needs to be handled specially
|
|
244
254
|
return mergeSeriesToOptions(mergedOptions, this.series);
|