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