@progress/kendo-charts 2.7.1-dev.202501290658 → 2.7.1-dev.202501310847

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.
@@ -37,68 +37,82 @@ var getSeriesColors = function (element) {
37
37
  var styles = elementStyles(element);
38
38
  var result = [];
39
39
  var count = 1;
40
- var color = styles.getPropertyValue(("" + seriesVar + (count++)));
40
+ var color = styles.getPropertyValue(("" + seriesVar + count));
41
41
  while (color || count <= SERIES_COLORS) {
42
42
  result.push(color);
43
- color = styles.getPropertyValue(("" + seriesVar + (count++)));
43
+ count++;
44
+ color = styles.getPropertyValue(("" + seriesVar + count));
44
45
  }
45
46
  return result;
46
47
  };
47
48
 
48
- var title = function (element) { return ({
49
- color: getProp(element, "--kendo-chart-text"),
50
- font: getFont(element, "--kendo-font-weight", "--kendo-chart-title-font-size", "--kendo-font-family"),
51
- }); };
49
+ var defaultFont = function (element) { return getFont(element, "--kendo-font-weight", '--kendo-chart-font-size', "--kendo-font-family"); };
50
+ var paneTitleFont = function (element) { return getFont(element, "--kendo-chart-pane-title-font-weight", '--kendo-chart-pane-title-font-size', "--kendo-font-family"); };
51
+ var normalTextColor = function (element) { return getProp(element, "--kendo-chart-text"); };
52
52
 
53
- var sankeyLegend = function (element) { return ({
54
- labels: {
55
- color: getProp(element, "--kendo-chart-text"),
56
- font: getFont(element, "--kendo-font-weight", "--kendo-chart-label-font-size", "--kendo-font-family"),
57
- },
58
- title: {
59
- color: getProp(element, "--kendo-chart-text")
60
- }
53
+ var title = function (element) { return ({
54
+ color: normalTextColor(element),
55
+ font: getFont(element, "--kendo-font-weight", '--kendo-chart-title-font-size', "--kendo-font-family"),
61
56
  }); };
62
57
 
63
- var chartLegend = function (element) { return (Object.assign({}, {inactiveItems: {
58
+ var sankeyLegend = function (element) {
59
+ var textColorNormal = normalTextColor(element);
60
+ return {
64
61
  labels: {
65
- color: getProp(element, "--kendo-chart-inactive"),
62
+ color: textColorNormal,
63
+ font: defaultFont(element),
66
64
  },
67
- markers: {
68
- color: getProp(element, "--kendo-chart-inactive"),
69
- },
70
- }},
71
- sankeyLegend(element))); };
65
+ title: {
66
+ color: textColorNormal,
67
+ }
68
+ };
69
+ };
72
70
 
73
- export var gaugeTheme = function (element) { return ({
74
- pointer: {
75
- color: getProp(element, "--kendo-chart-gauge-pointer")
76
- },
77
- scale: {
78
- labels: {
79
- color: getProp(element, "--kendo-chart-text")
71
+ var chartLegend = function (element) {
72
+ var inactiveColor = getProp(element, "--kendo-chart-inactive");
73
+ return Object.assign({}, {inactiveItems: {
74
+ labels: {
75
+ color: inactiveColor,
76
+ },
77
+ markers: {
78
+ color: inactiveColor,
79
+ },
80
+ }},
81
+ sankeyLegend(element));
82
+ };
83
+
84
+ export var gaugeTheme = function (element) {
85
+ var textColorNormal = normalTextColor(element);
86
+ return {
87
+ pointer: {
88
+ color: getProp(element, "--kendo-chart-gauge-pointer")
80
89
  },
90
+ scale: {
91
+ labels: {
92
+ color: textColorNormal
93
+ },
81
94
 
82
- rangePlaceholderColor: getProp(element, "--kendo-chart-gauge-track"),
95
+ rangePlaceholderColor: getProp(element, "--kendo-chart-gauge-track"),
83
96
 
84
- minorTicks: {
85
- color: getProp(element, "--kendo-chart-text")
86
- },
97
+ minorTicks: {
98
+ color: textColorNormal
99
+ },
87
100
 
88
- majorTicks: {
89
- color: getProp(element, "--kendo-chart-text")
90
- },
101
+ majorTicks: {
102
+ color: textColorNormal
103
+ },
91
104
 
92
- line: {
93
- color: getProp(element, "--kendo-chart-text")
105
+ line: {
106
+ color: textColorNormal
107
+ }
94
108
  }
95
- }
96
- }); };
109
+ };
110
+ };
97
111
 
98
112
  export var sankeyTheme = function (element) { return ({
99
113
  labels: {
100
- color: getProp(element, "--kendo-chart-text"),
101
- font: getFont(element, "--kendo-font-weight", "--kendo-chart-font-size", "--kendo-font-family"),
114
+ color: normalTextColor(element),
115
+ font: defaultFont(element),
102
116
  stroke: {
103
117
  color: getProp(element, "--kendo-chart-bg"),
104
118
  },
@@ -111,169 +125,146 @@ export var sankeyTheme = function (element) { return ({
111
125
  legend: sankeyLegend(element),
112
126
  }); };
113
127
 
114
- export var chartTheme = function (element) { return ({
115
- axisDefaults: {
116
- crosshair: {
117
- color: getProp(element, "--kendo-chart-crosshair-bg"),
118
- },
119
- labels: {
120
- color: getProp(element, "--kendo-chart-text"),
121
- font: getFont(element, "--kendo-font-weight", "--kendo-chart-label-font-size", "--kendo-font-family"),
122
- },
123
- line: {
124
- color: getProp(element, "--kendo-chart-major-lines"),
125
- },
126
- majorGridLines: {
127
- color: getProp(element, "--kendo-chart-major-lines"),
128
- },
129
- minorGridLines: {
130
- color: getProp(element, "--kendo-chart-minor-lines"),
131
- },
132
- notes: {
133
- icon: {
134
- background: getProp(element, "--kendo-chart-notes-bg"),
135
- border: {
136
- color: getProp(element, "--kendo-chart-notes-border"),
137
- },
138
- },
139
- line: {
140
- color: getProp(element, "--kendo-chart-notes-lines"),
141
- },
142
- label: {
143
- font: getFont(element, "--kendo-font-weight", "--kendo-chart-label-font-size", "--kendo-font-family"),
144
- },
128
+ var notes = function (element) { return ({
129
+ icon: {
130
+ background: getProp(element, "--kendo-chart-notes-bg"),
131
+ border: {
132
+ color: getProp(element, "--kendo-chart-notes-border"),
145
133
  },
146
- title: {
147
- color: getProp(element, "--kendo-chart-text"),
148
- font: getFont(element, "--kendo-font-weight", "--kendo-chart-font-size", "--kendo-font-family"),
149
- }
150
134
  },
151
- chartArea: {
152
- background: getProp(element, "--kendo-chart-bg"),
135
+ line: {
136
+ color: getProp(element, "--kendo-chart-notes-lines"),
153
137
  },
154
- legend: chartLegend(element),
155
- seriesColors: getSeriesColors(element),
156
- seriesDefaults: {
157
- area: {
158
- opacity: getNumberProp(element, "--kendo-chart-area-opacity"),
159
- highlight: {
160
- inactiveOpacity: getNumberProp(element, "--kendo-chart-area-inactive-opacity"),
161
- },
162
- },
163
- boxPlot: {
164
- downColor: getProp(element, "--kendo-chart-major-lines"),
165
- mean: {
166
- color: getProp(element, "--kendo-color-surface"),
167
- },
168
- median: {
169
- color: getProp(element, "--kendo-color-surface"),
170
- },
171
- whiskers: {
172
- color: getProp(element, "--kendo-color-primary"),
173
- },
138
+ label: {
139
+ font: defaultFont(element),
140
+ },
141
+ }); };
142
+
143
+ export var chartTheme = function (element) {
144
+ var majorLines = getProp(element, "--kendo-chart-major-lines");
145
+ var normalTextColor = getProp(element, "--kendo-chart-text");
146
+ var axisLabelFont = getFont(element, "--kendo-font-weight", "--kendo-chart-label-font-size", "--kendo-font-family");
147
+ var chartBg = getProp(element, "--kendo-chart-bg");
148
+ var notesProps = notes(element);
149
+ var areaOpacity = getNumberProp(element, "--kendo-chart-area-opacity");
150
+ var surfaceColor = getProp(element, "--kendo-color-surface");
151
+ var primaryBg = getProp(element, "--kendo-chart-primary-bg");
152
+
153
+ var boxPlot = function () { return ({
154
+ downColor: majorLines,
155
+ mean: {
156
+ color: surfaceColor,
174
157
  },
175
- bullet: {
176
- target: {
177
- color: getProp(element, "--kendo-chart-text"),
178
- },
158
+ median: {
159
+ color: surfaceColor,
179
160
  },
180
- candlestick: {
181
- downColor: getProp(element, "--kendo-chart-text"),
182
- line: {
183
- color: getProp(element, "--kendo-chart-text"),
184
- },
161
+ whiskers: {
162
+ color: primaryBg,
185
163
  },
186
- errorBars: {
187
- color: getProp(element, "--kendo-chart-error-bars-bg"),
164
+ }); };
165
+
166
+ var waterfall = function () { return ({
167
+ line: {
168
+ color: majorLines,
188
169
  },
189
- horizontalWaterfall: {
190
- line: {
191
- color: getProp(element, "--kendo-chart-major-lines"),
192
- },
170
+ }); };
171
+
172
+ var area = function () { return ({
173
+ opacity: areaOpacity,
174
+ highlight: {
175
+ inactiveOpacity: getNumberProp(element, "--kendo-chart-area-inactive-opacity"),
193
176
  },
194
- icon: {
195
- border: {
196
- color: getProp(element, "--kendo-chart-major-lines"),
197
- },
177
+ }); };
178
+
179
+ var line = function () { return ({
180
+ highlight: {
181
+ inactiveOpacity: getNumberProp(element, "--kendo-chart-line-inactive-opacity"),
198
182
  },
199
- labels: {
200
- background: getProp(element, "--kendo-chart-bg"),
201
- color: getProp(element, "--kendo-chart-text"),
202
- font: getFont(element, "--kendo-font-weight", "--kendo-chart-label-font-size", "--kendo-font-family"),
203
- opacity: getNumberProp(element, "--kendo-chart-area-opacity"),
183
+ }); };
184
+
185
+ var bullet = function () { return ({
186
+ target: {
187
+ color: normalTextColor,
204
188
  },
205
- line: {
206
- highlight: {
207
- inactiveOpacity: getNumberProp(element, "--kendo-chart-area-inactive-opacity"),
189
+ }); };
190
+
191
+ return {
192
+ axisDefaults: {
193
+ crosshair: {
194
+ color: getProp(element, "--kendo-chart-crosshair-bg"),
208
195
  },
209
- },
210
- notes: {
211
- icon: {
212
- background: getProp(element, "--kendo-chart-notes-bg"),
213
- border: {
214
- color: getProp(element, "--kendo-chart-notes-border"),
215
- },
196
+ labels: {
197
+ color: normalTextColor,
198
+ font: axisLabelFont,
216
199
  },
217
200
  line: {
218
- color: getProp(element, "--kendo-chart-notes-lines"),
201
+ color: majorLines,
219
202
  },
220
- label: {
221
- font: getFont(element, "--kendo-font-weight", "--kendo-chart-label-font-size", "--kendo-font-family"),
203
+ majorGridLines: {
204
+ color: majorLines,
222
205
  },
223
- },
224
- radarArea: {
225
- opacity: getNumberProp(element, "--kendo-chart-area-opacity"),
226
- highlight: {
227
- inactiveOpacity: getNumberProp(element, "--kendo-chart-area-inactive-opacity"),
206
+ minorGridLines: {
207
+ color: getProp(element, "--kendo-chart-minor-lines"),
228
208
  },
209
+ notes: structuredClone(notesProps),
210
+ title: {
211
+ color: normalTextColor,
212
+ font: defaultFont(element),
213
+ }
229
214
  },
230
- verticalArea: {
231
- opacity: getNumberProp(element, "--kendo-chart-area-opacity"),
232
- highlight: {
233
- inactiveOpacity: getNumberProp(element, "--kendo-chart-area-inactive-opacity"),
234
- },
215
+ chartArea: {
216
+ background: chartBg,
235
217
  },
236
- verticalBoxPlot: {
237
- downColor: getProp(element, "--kendo-chart-major-lines"),
238
- mean: {
239
- color: getProp(element, "--kendo-color-surface"),
240
- },
241
- median: {
242
- color: getProp(element, "--kendo-color-surface"),
218
+ legend: chartLegend(element),
219
+ seriesColors: getSeriesColors(element),
220
+ seriesDefaults: {
221
+ area: area(),
222
+ verticalArea: area(),
223
+ radarArea: area(),
224
+
225
+ boxPlot: boxPlot(),
226
+ verticalBoxPlot: boxPlot(),
227
+
228
+ bullet: bullet(),
229
+ verticalBullet: bullet(),
230
+
231
+ horizontalWaterfall: waterfall(),
232
+ waterfall: waterfall(),
233
+
234
+ line: line(),
235
+ verticalLine: line(),
236
+
237
+ candlestick: {
238
+ downColor: normalTextColor,
239
+ line: {
240
+ color: normalTextColor,
241
+ },
243
242
  },
244
- whiskers: {
245
- color: getProp(element, "--kendo-chart-primary-bg"),
243
+ errorBars: {
244
+ color: getProp(element, "--kendo-chart-error-bars-bg"),
246
245
  },
247
- },
248
- verticalBullet: {
249
- target: {
250
- color: getProp(element, "--kendo-chart-text"),
246
+ icon: {
247
+ border: {
248
+ color: majorLines,
249
+ },
251
250
  },
252
- },
253
- verticalLine: {
254
- highlight: {
255
- inactiveOpacity: getNumberProp(element, "--kendo-chart-area-inactive-opacity"),
251
+ labels: {
252
+ background: chartBg,
253
+ color: normalTextColor,
254
+ font: axisLabelFont,
255
+ opacity: areaOpacity,
256
256
  },
257
+ notes: structuredClone(notesProps),
257
258
  },
258
- verticalWaterfall: {
259
- line: {
260
- color: getProp(element, "--kendo-chart-major-lines"),
261
- },
262
- },
263
- waterfall: {
264
- line: {
265
- color: getProp(element, "--kendo-chart-major-lines"),
266
- },
259
+ subtitle: {
260
+ color: normalTextColor,
261
+ font: paneTitleFont(element),
267
262
  },
268
- },
269
- subtitle: {
270
- color: getProp(element, "--kendo-chart-text"),
271
- font: getFont(element, "--kendo-chart-pane-title-font-weight", "--kendo-chart-pane-title-font-size", "--kendo-font-family"),
272
- },
273
- title: title(element),
274
- paneDefaults: {
275
- title: {
276
- font: getFont(element, "--kendo-chart-pane-title-font-weight", "--kendo-chart-pane-title-font-size", "--kendo-font-family"),
263
+ title: title(element),
264
+ paneDefaults: {
265
+ title: {
266
+ font: paneTitleFont(element),
267
+ }
277
268
  }
278
- }
279
- }); };
269
+ };
270
+ };