@gitlab/ui 62.9.3 → 62.10.0
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 +8 -0
- package/dist/components/charts/legend/legend.js +51 -3
- package/dist/utility_classes.css +1 -1
- package/dist/utility_classes.css.map +1 -1
- package/package.json +1 -1
- package/src/components/charts/area/area.spec.js +11 -10
- package/src/components/charts/legend/legend.spec.js +47 -5
- package/src/components/charts/legend/legend.stories.js +21 -1
- package/src/components/charts/legend/legend.vue +52 -6
- package/src/scss/utilities.scss +8 -0
- package/src/scss/utility-mixins/cursor.scss +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,11 @@
|
|
|
1
|
+
# [62.10.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v62.9.3...v62.10.0) (2023-05-11)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Features
|
|
5
|
+
|
|
6
|
+
* **GlChartLegend:** Prevent toggling off all legends ([b036385](https://gitlab.com/gitlab-org/gitlab-ui/commit/b036385448b95003368a22e1533304d6b8097050))
|
|
7
|
+
* add hover state to gl-cursor-notallowed mixin ([4a122c2](https://gitlab.com/gitlab-org/gitlab-ui/commit/4a122c2be93d4e5da505d3390ccea116353524f1))
|
|
8
|
+
|
|
1
9
|
## [62.9.3](https://gitlab.com/gitlab-org/gitlab-ui/compare/v62.9.2...v62.9.3) (2023-05-11)
|
|
2
10
|
|
|
3
11
|
|
|
@@ -75,7 +75,8 @@ var script = {
|
|
|
75
75
|
},
|
|
76
76
|
data() {
|
|
77
77
|
return {
|
|
78
|
-
disabledSeries: {}
|
|
78
|
+
disabledSeries: {},
|
|
79
|
+
lastActiveSeriesLabel: null
|
|
79
80
|
};
|
|
80
81
|
},
|
|
81
82
|
computed: {
|
|
@@ -84,8 +85,17 @@ var script = {
|
|
|
84
85
|
fontFamily: this.textStyle.fontFamily || 'sans-serif',
|
|
85
86
|
fontSize: `${this.textStyle.fontSize || defaultFontSize}px`
|
|
86
87
|
};
|
|
88
|
+
},
|
|
89
|
+
hasOneSeriesElement() {
|
|
90
|
+
return this.seriesInfo.length === 1;
|
|
87
91
|
}
|
|
88
92
|
},
|
|
93
|
+
created() {
|
|
94
|
+
this.chart.on('legendselectchanged', this.suppressLastActiveSeriesLabelToggle);
|
|
95
|
+
},
|
|
96
|
+
beforeDestroy() {
|
|
97
|
+
this.chart.off('legendselectchanged', this.suppressLastActiveSeriesLabelToggle);
|
|
98
|
+
},
|
|
89
99
|
methods: {
|
|
90
100
|
sanitizeSeriesData(seriesData) {
|
|
91
101
|
var _seriesData$filter;
|
|
@@ -110,7 +120,12 @@ var script = {
|
|
|
110
120
|
seriesNameIsLong(seriesName) {
|
|
111
121
|
return seriesName.length > 120;
|
|
112
122
|
},
|
|
113
|
-
handleClick(
|
|
123
|
+
handleClick(_ref, key) {
|
|
124
|
+
let {
|
|
125
|
+
name,
|
|
126
|
+
disabled
|
|
127
|
+
} = _ref;
|
|
128
|
+
if (this.hasOneSeriesElement || this.isToggleDisabled(name, disabled)) return;
|
|
114
129
|
this.chart.dispatchAction({
|
|
115
130
|
type: 'legendToggleSelect',
|
|
116
131
|
name
|
|
@@ -134,6 +149,30 @@ var script = {
|
|
|
134
149
|
},
|
|
135
150
|
getColor(color, key) {
|
|
136
151
|
return this.disabledSeries[key] ? gray200 : color;
|
|
152
|
+
},
|
|
153
|
+
suppressLastActiveSeriesLabelToggle(_ref2) {
|
|
154
|
+
let {
|
|
155
|
+
selected
|
|
156
|
+
} = _ref2;
|
|
157
|
+
const selectedSeriesLabels = Object.entries(selected).filter(_ref3 => {
|
|
158
|
+
let [, isSelected] = _ref3;
|
|
159
|
+
return Boolean(isSelected);
|
|
160
|
+
});
|
|
161
|
+
this.lastActiveSeriesLabel = null;
|
|
162
|
+
if (selectedSeriesLabels.length === 1) {
|
|
163
|
+
const [lastActiveSeriesLabelName] = selectedSeriesLabels[0];
|
|
164
|
+
this.lastActiveSeriesLabel = lastActiveSeriesLabelName;
|
|
165
|
+
}
|
|
166
|
+
},
|
|
167
|
+
/**
|
|
168
|
+
* Disables toggling legend if it is the last active one or if its data series
|
|
169
|
+
* has a disabled property set to true
|
|
170
|
+
* @param {String} name Series name
|
|
171
|
+
* @param {Boolean} isDisabled Value of the series element's disabled property
|
|
172
|
+
* @returns {boolean}
|
|
173
|
+
*/
|
|
174
|
+
isToggleDisabled(name, isDisabled) {
|
|
175
|
+
return name === this.lastActiveSeriesLabel || isDisabled;
|
|
137
176
|
}
|
|
138
177
|
},
|
|
139
178
|
legendLayoutTypes: {
|
|
@@ -146,7 +185,16 @@ var script = {
|
|
|
146
185
|
const __vue_script__ = script;
|
|
147
186
|
|
|
148
187
|
/* template */
|
|
149
|
-
var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',
|
|
188
|
+
var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{attrs:{"data-testid":"gl-chart-legend"}},[(_vm.layout === _vm.$options.legendLayoutTypes.LEGEND_LAYOUT_INLINE)?[_c('div',{staticClass:"gl-legend-inline"},_vm._l((_vm.seriesInfo),function(series,key){return _c('div',{key:key,staticClass:"gl-legend-inline-series",class:{
|
|
189
|
+
'text-muted': _vm.disabledSeries[key],
|
|
190
|
+
'w-100': _vm.seriesNameIsLong(series.name),
|
|
191
|
+
'gl-hover-cursor-not-allowed!':
|
|
192
|
+
_vm.hasOneSeriesElement || _vm.isToggleDisabled(series.name, series.disabled),
|
|
193
|
+
},style:(_vm.fontStyle),attrs:{"aria-disabled":_vm.hasOneSeriesElement || _vm.isToggleDisabled(series.name, series.disabled),"role":"button"},on:{"click":function($event){return _vm.handleClick(series, key)},"mouseenter":function($event){return _vm.handleMouseEnter(series.name)},"mouseleave":function($event){return _vm.handleMouseLeave(series.name)}}},[_c('gl-chart-series-label',{staticClass:"gl-legend-inline-series-label",class:{ 'w-75': _vm.seriesNameIsLong(series.name) },attrs:{"color":_vm.getColor(series.color, key),"type":series.type}},[_c('gl-truncate',{staticClass:"gl-font-weight-bold",attrs:{"text":series.name}})],1),_vm._v(" "),(series.data && series.data.length)?_c('span',{class:{ 'gl-white-space-nowrap': _vm.seriesNameIsLong(series.name) }},[_vm._v("\n "+_vm._s(_vm.averageText)+": "+_vm._s(_vm.seriesAverage(series.data))+" · "+_vm._s(_vm.maxText)+":\n "+_vm._s(_vm.seriesMax(series.data))+"\n ")]):_vm._e()],1)}),0)]:_vm._e(),_vm._v(" "),(_vm.layout === _vm.$options.legendLayoutTypes.LEGEND_LAYOUT_TABLE)?[_c('div',{staticClass:"gl-legend-tabular",style:(_vm.fontStyle)},[_c('header',{staticClass:"gl-legend-tabular-header"},[_c('div',{staticClass:"gl-legend-tabular-header-cell"},[_vm._v(_vm._s(_vm.minText))]),_vm._v(" "),_c('div',{staticClass:"gl-legend-tabular-header-cell"},[_vm._v(_vm._s(_vm.maxText))]),_vm._v(" "),_c('div',{staticClass:"gl-legend-tabular-header-cell"},[_vm._v(_vm._s(_vm.averageText))]),_vm._v(" "),_c('div',{staticClass:"gl-legend-tabular-header-cell"},[_vm._v(_vm._s(_vm.currentText))])]),_vm._v(" "),_c('section',{staticClass:"gl-legend-tabular-body"},_vm._l((_vm.seriesInfo),function(series,key){return _c('div',{key:key,staticClass:"gl-legend-tabular-row",class:{
|
|
194
|
+
'text-muted': _vm.disabledSeries[key],
|
|
195
|
+
'gl-hover-cursor-not-allowed!':
|
|
196
|
+
_vm.hasOneSeriesElement || _vm.isToggleDisabled(series.name, series.disabled),
|
|
197
|
+
},style:(_vm.fontStyle),attrs:{"aria-disabled":_vm.isToggleDisabled(series.name, series.disabled),"role":"button"},on:{"click":function($event){return _vm.handleClick(series, key)},"mouseenter":function($event){return _vm.handleMouseEnter(series.name)},"mouseleave":function($event){return _vm.handleMouseLeave(series.name)}}},[_c('div',{staticClass:"gl-legend-tabular-title-cell"},[_c('gl-chart-series-label',{style:(_vm.fontStyle),attrs:{"color":_vm.getColor(series.color, key),"type":series.type}},[_c('gl-truncate',{staticClass:"gl-font-weight-bold",attrs:{"text":series.name}})],1)],1),_vm._v(" "),(_vm.sanitizeSeriesData(series.data).length)?[_c('div',{staticClass:"gl-legend-tabular-details-cell"},[_vm._v(_vm._s(_vm.seriesMin(series.data)))]),_vm._v(" "),_c('div',{staticClass:"gl-legend-tabular-details-cell"},[_vm._v(_vm._s(_vm.seriesMax(series.data)))]),_vm._v(" "),_c('div',{staticClass:"gl-legend-tabular-details-cell"},[_vm._v(_vm._s(_vm.seriesAverage(series.data)))]),_vm._v(" "),_c('div',{staticClass:"gl-legend-tabular-details-cell"},[_vm._v(_vm._s(_vm.seriesLast(series.data)))])]:[_c('div',{staticClass:"gl-legend-tabular-details-cell"},[_vm._v("-")]),_vm._v(" "),_c('div',{staticClass:"gl-legend-tabular-details-cell"},[_vm._v("-")]),_vm._v(" "),_c('div',{staticClass:"gl-legend-tabular-details-cell"},[_vm._v("-")]),_vm._v(" "),_c('div',{staticClass:"gl-legend-tabular-details-cell"},[_vm._v("-")])]],2)}),0)])]:_vm._e()],2)};
|
|
150
198
|
var __vue_staticRenderFns__ = [];
|
|
151
199
|
|
|
152
200
|
/* style */
|