@sapui5/sap.suite.ui.microchart 1.120.29 → 1.120.31
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/package.json +1 -1
- package/src/sap/suite/ui/microchart/.library +1 -1
- package/src/sap/suite/ui/microchart/AreaMicroChart.js +1 -1
- package/src/sap/suite/ui/microchart/AreaMicroChartItem.js +1 -1
- package/src/sap/suite/ui/microchart/AreaMicroChartLabel.js +1 -1
- package/src/sap/suite/ui/microchart/AreaMicroChartPoint.js +1 -1
- package/src/sap/suite/ui/microchart/BulletMicroChart.js +1 -1
- package/src/sap/suite/ui/microchart/BulletMicroChartData.js +1 -1
- package/src/sap/suite/ui/microchart/ColumnMicroChart.js +1 -1
- package/src/sap/suite/ui/microchart/ColumnMicroChartData.js +1 -1
- package/src/sap/suite/ui/microchart/ColumnMicroChartLabel.js +1 -1
- package/src/sap/suite/ui/microchart/ComparisonMicroChart.js +1 -1
- package/src/sap/suite/ui/microchart/ComparisonMicroChartData.js +1 -1
- package/src/sap/suite/ui/microchart/DeltaMicroChart.js +1 -1
- package/src/sap/suite/ui/microchart/HarveyBallMicroChart.js +1 -1
- package/src/sap/suite/ui/microchart/HarveyBallMicroChartItem.js +1 -1
- package/src/sap/suite/ui/microchart/InteractiveBarChart.js +1 -1
- package/src/sap/suite/ui/microchart/InteractiveBarChartBar.js +1 -1
- package/src/sap/suite/ui/microchart/InteractiveDonutChart.js +1 -1
- package/src/sap/suite/ui/microchart/InteractiveDonutChartSegment.js +1 -1
- package/src/sap/suite/ui/microchart/InteractiveLineChart.js +1 -1
- package/src/sap/suite/ui/microchart/InteractiveLineChartPoint.js +1 -1
- package/src/sap/suite/ui/microchart/LineMicroChart.js +1 -1
- package/src/sap/suite/ui/microchart/LineMicroChartEmphasizedPoint.js +1 -1
- package/src/sap/suite/ui/microchart/LineMicroChartLine.js +1 -1
- package/src/sap/suite/ui/microchart/LineMicroChartPoint.js +1 -1
- package/src/sap/suite/ui/microchart/RadialMicroChart.js +1 -1
- package/src/sap/suite/ui/microchart/StackedBarMicroChart.js +1 -1
- package/src/sap/suite/ui/microchart/StackedBarMicroChartBar.js +15 -3
- package/src/sap/suite/ui/microchart/StackedBarMicroChartRenderer.js +45 -15
- package/src/sap/suite/ui/microchart/library.js +3 -4
- package/src/sap/suite/ui/microchart/themes/base/StackedBarMicroChart.less +29 -7
package/package.json
CHANGED
|
@@ -17,7 +17,7 @@ sap.ui.define(['./library', 'sap/ui/core/Element'],
|
|
|
17
17
|
* Displays or hides the labels for start and end dates, start and end values, and minimum and maximum values.
|
|
18
18
|
* @extends sap.ui.core.Element
|
|
19
19
|
*
|
|
20
|
-
* @version 1.120.
|
|
20
|
+
* @version 1.120.31
|
|
21
21
|
* @since 1.34
|
|
22
22
|
*
|
|
23
23
|
* @public
|
|
@@ -42,7 +42,7 @@ sap.ui.define([
|
|
|
42
42
|
* <br>Note: You can assign a custom tooltip for this microchart. The custom tooltip can be set using expression binding. When no custom tooltip is defined, the tooltip is generated automatically based on the logic described in {@link sap.ui.core.Element#getTooltip_AsString}. For a combination of a generated and a custom tooltip, use <code>((AltText))</code> inside of the tooltip string. The aggregated data of the microchart can also be customized.
|
|
43
43
|
* @extends sap.ui.core.Control
|
|
44
44
|
*
|
|
45
|
-
* @version 1.120.
|
|
45
|
+
* @version 1.120.31
|
|
46
46
|
* @since 1.34
|
|
47
47
|
*
|
|
48
48
|
* @public
|
|
@@ -35,7 +35,7 @@ sap.ui.define([
|
|
|
35
35
|
* <br>Note: You can assign a custom tooltip for this microchart. The custom tooltip can be set using expression binding. When no custom tooltip is defined, the tooltip is generated automatically based on the logic described in {@link sap.ui.core.Element#getTooltip_AsString}. For a combination of a generated and a custom tooltip, use <code>((AltText))</code> inside of the tooltip string. The aggregated data of the microchart can also be customized.
|
|
36
36
|
* @extends sap.ui.core.Control
|
|
37
37
|
*
|
|
38
|
-
* @version 1.120.
|
|
38
|
+
* @version 1.120.31
|
|
39
39
|
* @since 1.34
|
|
40
40
|
*
|
|
41
41
|
* @public
|
|
@@ -42,7 +42,7 @@ sap.ui.define([
|
|
|
42
42
|
* The InteractiveLineChart control belongs to a chart control group in the MicroChart library having a number of interactive features.
|
|
43
43
|
* @extends sap.ui.core.Control
|
|
44
44
|
* @author SAP SE
|
|
45
|
-
* @version 1.120.
|
|
45
|
+
* @version 1.120.31
|
|
46
46
|
*
|
|
47
47
|
* @public
|
|
48
48
|
* @since 1.42.0
|
|
@@ -31,7 +31,7 @@ sap.ui.define([
|
|
|
31
31
|
* <br>Note: You can assign a custom tooltip for this microchart. The custom tooltip can be set using expression binding. When no custom tooltip is defined, the tooltip is generated automatically based on the logic described in {@link sap.ui.core.Element#getTooltip_AsString}. For a combination of a generated and a custom tooltip, use <code>((AltText))</code> inside of the tooltip string.
|
|
32
32
|
* @extends sap.ui.core.Control
|
|
33
33
|
*
|
|
34
|
-
* @version 1.120.
|
|
34
|
+
* @version 1.120.31
|
|
35
35
|
* @since 1.48.0
|
|
36
36
|
*
|
|
37
37
|
* @public
|
|
@@ -21,7 +21,7 @@ sap.ui.define(["sap/m/library", "sap/suite/ui/microchart/LineMicroChartPoint"],
|
|
|
21
21
|
* Contains the emphasized point of the line micro chart.
|
|
22
22
|
* @extends sap.suite.ui.microchart.LineMicroChartPoint
|
|
23
23
|
*
|
|
24
|
-
* @version 1.120.
|
|
24
|
+
* @version 1.120.31
|
|
25
25
|
* @since 1.48.0
|
|
26
26
|
*
|
|
27
27
|
* @constructor
|
|
@@ -32,7 +32,7 @@ sap.ui.define([
|
|
|
32
32
|
* <br>Note: You can assign a custom tooltip for this microchart. The custom tooltip can be set using expression binding. When no custom tooltip is defined, the tooltip is generated automatically based on the logic described in {@link sap.ui.core.Element#getTooltip_AsString}. For a combination of a generated and a custom tooltip, use <code>((AltText))</code> inside of the tooltip string. The aggregated data of the microchart can also be customized.
|
|
33
33
|
* @extends sap.ui.core.Control
|
|
34
34
|
*
|
|
35
|
-
* @version 1.120.
|
|
35
|
+
* @version 1.120.31
|
|
36
36
|
* @since 1.44.0
|
|
37
37
|
*
|
|
38
38
|
* @public
|
|
@@ -9,7 +9,12 @@ sap.ui.define(["sap/ui/thirdparty/jquery", './library', 'sap/ui/core/Element', "
|
|
|
9
9
|
"use strict";
|
|
10
10
|
|
|
11
11
|
var ValueCSSColor = mobileLibrary.ValueCSSColor;
|
|
12
|
-
|
|
12
|
+
var SEMANTIC_COLORS = {
|
|
13
|
+
Good: "Good",
|
|
14
|
+
Error: "Bad",
|
|
15
|
+
Critical: "Critical",
|
|
16
|
+
Neutral: "Neutral"
|
|
17
|
+
};
|
|
13
18
|
/**
|
|
14
19
|
* Constructor for a new StackedBarMicroChartBar.
|
|
15
20
|
*
|
|
@@ -20,7 +25,7 @@ sap.ui.define(["sap/ui/thirdparty/jquery", './library', 'sap/ui/core/Element', "
|
|
|
20
25
|
* Contains the values of the stacked bar chart.
|
|
21
26
|
* @extends sap.ui.core.Element
|
|
22
27
|
*
|
|
23
|
-
* @version 1.120.
|
|
28
|
+
* @version 1.120.31
|
|
24
29
|
* @since 1.44.0
|
|
25
30
|
*
|
|
26
31
|
* @constructor
|
|
@@ -55,7 +60,14 @@ sap.ui.define(["sap/ui/thirdparty/jquery", './library', 'sap/ui/core/Element', "
|
|
|
55
60
|
};
|
|
56
61
|
|
|
57
62
|
StackedBarMicroChartBar.prototype.setValueColor = function(sValue, bSuppressInvalidate) {
|
|
58
|
-
var bIsValueSet =
|
|
63
|
+
var bIsValueSet = false;
|
|
64
|
+
|
|
65
|
+
if (SEMANTIC_COLORS.hasOwnProperty(sValue) || (sValue == null || sValue == "")){
|
|
66
|
+
bIsValueSet = true;
|
|
67
|
+
} else {
|
|
68
|
+
bIsValueSet = ValueCSSColor.isValid(sValue);
|
|
69
|
+
}
|
|
70
|
+
|
|
59
71
|
return this.setProperty("valueColor", bIsValueSet ? sValue : null, bSuppressInvalidate);
|
|
60
72
|
};
|
|
61
73
|
|
|
@@ -6,9 +6,8 @@
|
|
|
6
6
|
sap.ui.define([
|
|
7
7
|
'sap/m/library',
|
|
8
8
|
'sap/ui/core/theming/Parameters',
|
|
9
|
-
'./library',
|
|
10
9
|
'sap/suite/ui/microchart/MicroChartRenderUtils'
|
|
11
|
-
], function(mobileLibrary, Parameters,
|
|
10
|
+
], function(mobileLibrary, Parameters, MicroChartRenderUtils) {
|
|
12
11
|
"use strict";
|
|
13
12
|
|
|
14
13
|
var ValueColor = mobileLibrary.ValueColor;
|
|
@@ -46,8 +45,8 @@ sap.ui.define([
|
|
|
46
45
|
yellow: "#ffff00", yellowgreen: "#9acd32"};
|
|
47
46
|
|
|
48
47
|
StackedBarMicroChartRenderer.SEMANTIC_COLORS = {
|
|
49
|
-
Good: "
|
|
50
|
-
Error: "
|
|
48
|
+
Good: "Good",
|
|
49
|
+
Error: "Bad",
|
|
51
50
|
Critical: "Critical",
|
|
52
51
|
Neutral: "Neutral"
|
|
53
52
|
};
|
|
@@ -154,7 +153,7 @@ sap.ui.define([
|
|
|
154
153
|
|
|
155
154
|
if (!oDataBar.color) {
|
|
156
155
|
oRm.style("background-color", "transparent");
|
|
157
|
-
} else if (ValueColor[oDataBar.color]) {
|
|
156
|
+
} else if (ValueColor[oDataBar.color] || Object.keys(StackedBarMicroChartRenderer.SEMANTIC_COLORS).includes(oDataBar.color)) {
|
|
158
157
|
oRm.class("sapSuiteStackedMCBarSemanticColor" + oDataBar.color);
|
|
159
158
|
sColor = Parameters.get(this._getValueCssParameter(oDataBar.color));
|
|
160
159
|
} else {
|
|
@@ -167,7 +166,7 @@ sap.ui.define([
|
|
|
167
166
|
oRm.style("width", oDataBar.width + "%");
|
|
168
167
|
oRm.openEnd();
|
|
169
168
|
if (sColor && bRenderLabels) {
|
|
170
|
-
this._renderChartBarLabel(oRm,
|
|
169
|
+
this._renderChartBarLabel(oRm, oDataBar.displayValue, oDataBar.color);
|
|
171
170
|
}
|
|
172
171
|
oRm.close("div");
|
|
173
172
|
};
|
|
@@ -181,29 +180,50 @@ sap.ui.define([
|
|
|
181
180
|
* @param {string} displayValue The value that should be displayed
|
|
182
181
|
* @param {string} backgroundColor The background color of the current bar area
|
|
183
182
|
*/
|
|
184
|
-
StackedBarMicroChartRenderer._renderChartBarLabel = function(oRm,
|
|
183
|
+
StackedBarMicroChartRenderer._renderChartBarLabel = function(oRm, displayValue, color) {
|
|
185
184
|
if (!displayValue) {
|
|
186
185
|
return;
|
|
187
186
|
}
|
|
188
187
|
oRm.openStart("div");
|
|
189
188
|
oRm.class("sapSuiteStackedMCBarLabel");
|
|
189
|
+
if (Object.keys(StackedBarMicroChartRenderer.SEMANTIC_COLORS).includes(color)) {
|
|
190
|
+
oRm.class("sapSuiteStackedMCBarLabel" + color);
|
|
191
|
+
} else {
|
|
192
|
+
oRm.style("color", this._getLabelColor(color));
|
|
193
|
+
}
|
|
190
194
|
oRm.openEnd();
|
|
191
195
|
oRm.text(displayValue);
|
|
192
196
|
oRm.close("div");
|
|
193
197
|
};
|
|
194
198
|
|
|
195
199
|
/**
|
|
196
|
-
* Returns the color
|
|
200
|
+
* Returns the color value of the label by calculating the data point color brightness
|
|
197
201
|
*
|
|
198
202
|
* @private
|
|
199
|
-
* @param {string}
|
|
200
|
-
* @returns {string} The
|
|
203
|
+
* @param {string} backgroundColor The background color
|
|
204
|
+
* @returns {string} The color of the label
|
|
201
205
|
*/
|
|
202
|
-
StackedBarMicroChartRenderer.
|
|
203
|
-
var
|
|
204
|
-
|
|
206
|
+
StackedBarMicroChartRenderer._getLabelColor = function(backgroundColor) {
|
|
207
|
+
var sHexColor = this._colorNameToHex(backgroundColor);
|
|
208
|
+
// convert 3-digit hexcolor to 6-digit first (e.g.: #abc -> #aabbcc)
|
|
209
|
+
if (!sHexColor && backgroundColor.length === 4) {
|
|
210
|
+
// concatenate each char after repeating it
|
|
211
|
+
sHexColor = "#" + new Array(3).join(backgroundColor.substring(1, 2)) + new Array(3).join(backgroundColor.substring(2, 3)) + new Array(3).join(backgroundColor.substring(3, 4));
|
|
212
|
+
} else if (!sHexColor) {
|
|
213
|
+
sHexColor = backgroundColor;
|
|
214
|
+
}
|
|
215
|
+
var iRedValue = parseInt(sHexColor.substring(1, 3), 16),
|
|
216
|
+
iGreenValue = parseInt(sHexColor.substring(3, 5), 16),
|
|
217
|
+
iBlueValue = parseInt(sHexColor.substring(5, 7), 16);
|
|
218
|
+
|
|
219
|
+
// apply the data point color brightness algorithm
|
|
220
|
+
var fDataPoint = ((iRedValue * 299) + (iGreenValue * 587) + (iBlueValue * 114)) / 1000;
|
|
221
|
+
if (fDataPoint > 127.5) {
|
|
222
|
+
return StackedBarMicroChartRenderer.LABEL_COLOR_DARK;
|
|
223
|
+
} else {
|
|
224
|
+
return StackedBarMicroChartRenderer.LABEL_COLOR_LIGHT;
|
|
225
|
+
}
|
|
205
226
|
};
|
|
206
|
-
|
|
207
227
|
/**
|
|
208
228
|
* Converts a color keyword to its HEX color value.
|
|
209
229
|
*
|
|
@@ -213,7 +233,17 @@ sap.ui.define([
|
|
|
213
233
|
*/
|
|
214
234
|
StackedBarMicroChartRenderer._colorNameToHex = function(color) {
|
|
215
235
|
return StackedBarMicroChartRenderer.COLORNAME_TO_HEX_MAP[color];
|
|
216
|
-
|
|
236
|
+
};
|
|
237
|
+
/**
|
|
238
|
+
* Converts a color keyword to its HEX color value.
|
|
239
|
+
*
|
|
240
|
+
* @private
|
|
241
|
+
* @param {string} color The css color name
|
|
242
|
+
* @returns {string} The css hex representation or undefined if the keyword cannot be found
|
|
243
|
+
*/
|
|
244
|
+
StackedBarMicroChartRenderer._getValueCssParameter = function(color) {
|
|
245
|
+
var sSemanticColor = this.SEMANTIC_COLORS[color] ? "sapChart_Sequence_" + this.SEMANTIC_COLORS[color] : "sapUi" + color + "Element";
|
|
246
|
+
return sSemanticColor;
|
|
217
247
|
};
|
|
218
248
|
|
|
219
249
|
MicroChartRenderUtils.extendMicroChartRenderer(StackedBarMicroChartRenderer);
|
|
@@ -7,13 +7,12 @@
|
|
|
7
7
|
* Initialization Code and shared classes of library sap.suite.ui.microchart.
|
|
8
8
|
*/
|
|
9
9
|
sap.ui.define([
|
|
10
|
-
"sap/ui/thirdparty/jquery",
|
|
11
10
|
"sap/ui/core/IntervalTrigger",
|
|
12
11
|
"sap/ui/core/Lib",
|
|
13
12
|
"sap/ui/core/Core", // provides sap.ui.getCore()
|
|
14
13
|
"sap/ui/core/library", // library dependency
|
|
15
14
|
"sap/m/library" // library dependency
|
|
16
|
-
], function(
|
|
15
|
+
], function(IntervalTrigger, CoreLib) {
|
|
17
16
|
"use strict";
|
|
18
17
|
|
|
19
18
|
/**
|
|
@@ -22,12 +21,12 @@ sap.ui.define([
|
|
|
22
21
|
* @namespace
|
|
23
22
|
* @alias sap.suite.ui.microchart
|
|
24
23
|
* @author SAP SE
|
|
25
|
-
* @version 1.120.
|
|
24
|
+
* @version 1.120.31
|
|
26
25
|
* @public
|
|
27
26
|
*/
|
|
28
27
|
var thisLib = CoreLib.init({
|
|
29
28
|
name: "sap.suite.ui.microchart",
|
|
30
|
-
version: "1.120.
|
|
29
|
+
version: "1.120.31",
|
|
31
30
|
// library dependencies
|
|
32
31
|
dependencies: ["sap.ui.core", "sap.m"],
|
|
33
32
|
types: [
|
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
width: 100%;
|
|
18
18
|
min-width: 2rem;
|
|
19
19
|
max-width: 20rem;
|
|
20
|
-
|
|
20
|
+
height: fit-content;
|
|
21
21
|
max-height: 3.5rem;
|
|
22
22
|
border: 1px solid @sapGroup_ContentBackground;
|
|
23
23
|
outline: 1px solid @sapContent_ForegroundBorderColor;
|
|
@@ -48,8 +48,6 @@ html.sap-desktop .sapSuiteStackedMC:focus:not([tabindex]),
|
|
|
48
48
|
overflow: hidden;
|
|
49
49
|
white-space: nowrap;
|
|
50
50
|
line-height: 1rem;
|
|
51
|
-
color: @sapContent_ContrastTextColor;
|
|
52
|
-
text-shadow: @sapContent_ContrastTextShadow;
|
|
53
51
|
|
|
54
52
|
&.sapSuiteStackedMCBarLabelHidden {
|
|
55
53
|
display: none;
|
|
@@ -100,17 +98,41 @@ html.sap-desktop .sapSuiteStackedMC:focus {
|
|
|
100
98
|
}
|
|
101
99
|
|
|
102
100
|
.sapSuiteStackedMCBarSemanticColorNeutral {
|
|
103
|
-
background-color: @
|
|
101
|
+
background-color: @sapChart_Sequence_Neutral;
|
|
102
|
+
.sapSuiteStackedMCBarLabel {
|
|
103
|
+
color: @sapChart_Sequence_Neutral_TextColor;
|
|
104
|
+
text-shadow: @sapChart_Sequence_Neutral_TextShadow;
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
.sapSuiteStackedMCBarSemanticColorNone {
|
|
109
|
+
background-color: @sapChart_Sequence_Neutral;
|
|
110
|
+
.sapSuiteStackedMCBarLabel {
|
|
111
|
+
color: @sapChart_Sequence_Neutral_TextColor;
|
|
112
|
+
text-shadow: @sapChart_Sequence_Neutral_TextShadow;
|
|
113
|
+
}
|
|
104
114
|
}
|
|
105
115
|
|
|
106
116
|
.sapSuiteStackedMCBarSemanticColorGood {
|
|
107
|
-
background-color: @
|
|
117
|
+
background-color: @sapChart_Sequence_Good;
|
|
118
|
+
.sapSuiteStackedMCBarLabel {
|
|
119
|
+
color: @sapChart_Sequence_Good_TextColor;
|
|
120
|
+
text-shadow: @sapChart_Sequence_Good_TextShadow;
|
|
121
|
+
}
|
|
108
122
|
}
|
|
109
123
|
|
|
110
124
|
.sapSuiteStackedMCBarSemanticColorCritical {
|
|
111
|
-
background-color: @
|
|
125
|
+
background-color: @sapChart_Sequence_Critical;
|
|
126
|
+
.sapSuiteStackedMCBarLabel {
|
|
127
|
+
color: @sapChart_Sequence_Critical_TextColor;
|
|
128
|
+
text-shadow: @sapChart_Sequence_Critical_TextShadow;
|
|
129
|
+
}
|
|
112
130
|
}
|
|
113
131
|
|
|
114
132
|
.sapSuiteStackedMCBarSemanticColorError {
|
|
115
|
-
background-color: @
|
|
133
|
+
background-color: @sapChart_Sequence_Bad;
|
|
134
|
+
.sapSuiteStackedMCBarLabel {
|
|
135
|
+
color: @sapChart_Sequence_Bad_TextColor;
|
|
136
|
+
text-shadow: @sapChart_Sequence_Bad_TextShadow;
|
|
137
|
+
}
|
|
116
138
|
}
|