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

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