@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.
Files changed (7) hide show
  1. package/dist/cdn/js/kendo-charts.js +1 -1
  2. package/dist/cdn/main.js +1 -1
  3. package/dist/es/chart/theme/load-theme.js +170 -180
  4. package/dist/es2015/chart/theme/load-theme.js +170 -180
  5. package/dist/npm/main.js +171 -181
  6. package/dist/systemjs/kendo-charts.js +1 -1
  7. package/package.json +1 -1
package/dist/es2015/chart/theme/load-theme.js CHANGED
@@ -45,60 +45,73 @@ const getSeriesColors = (element) => {
45
45
  return result;
46
46
  };
47
47
 
48
- const title = (element) => ({
49
- color: getProp(element, "--kendo-chart-text"),
50
- font: getFont(element, "--kendo-font-weight", "--kendo-chart-title-font-size", "--kendo-font-family"),
51
- });
48
+ const defaultFont = element => getFont(element, "--kendo-font-weight", '--kendo-chart-font-size', "--kendo-font-family");
49
+ const paneTitleFont = (element) => getFont(element, "--kendo-chart-pane-title-font-weight", '--kendo-chart-pane-title-font-size', "--kendo-font-family");
50
+ const normalTextColor = (element) => getProp(element, "--kendo-chart-text");
52
51
 
53
- const sankeyLegend = (element) => ({
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
+ const title = (element) => ({
53
+ color: normalTextColor(element),
54
+ font: getFont(element, "--kendo-font-weight", '--kendo-chart-title-font-size', "--kendo-font-family"),
61
55
  });
62
56
 
63
- const chartLegend = (element) => (Object.assign({}, {inactiveItems: {
57
+ const sankeyLegend = (element) => {
58
+ const 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 const gaugeTheme = (element) => ({
74
- pointer: {
75
- color: getProp(element, "--kendo-chart-gauge-pointer")
76
- },
77
- scale: {
78
- labels: {
79
- color: getProp(element, "--kendo-chart-text")
70
+ const chartLegend = (element) => {
71
+ const 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 const gaugeTheme = (element) => {
84
+ const 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 const sankeyTheme = (element) => ({
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 const sankeyTheme = (element) => ({
111
124
  legend: sankeyLegend(element),
112
125
  });
113
126
 
114
- export const chartTheme = (element) => ({
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
+ const notes = (element) => ({
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 const chartTheme = (element) => {
143
+ const majorLines = getProp(element, "--kendo-chart-major-lines");
144
+ const normalTextColor = getProp(element, "--kendo-chart-text");
145
+ const axisLabelFont = getFont(element, "--kendo-font-weight", "--kendo-chart-label-font-size", "--kendo-font-family");
146
+ const chartBg = getProp(element, "--kendo-chart-bg");
147
+ const notesProps = notes(element);
148
+ const areaOpacity = getNumberProp(element, "--kendo-chart-area-opacity");
149
+ const surfaceColor = getProp(element, "--kendo-color-surface");
150
+ const primaryBg = getProp(element, "--kendo-chart-primary-bg");
151
+
152
+ const boxPlot = () => ({
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
+ const waterfall = () => ({
166
+ line: {
167
+ color: majorLines,
188
168
  },
189
- horizontalWaterfall: {
190
- line: {
191
- color: getProp(element, "--kendo-chart-major-lines"),
192
- },
169
+ });
170
+
171
+ const area = () => ({
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
+ const line = () => ({
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
+ const bullet = () => ({
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
+ };