@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.
Files changed (8) 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 +176 -179
  4. package/dist/es2015/chart/theme/load-theme.js +176 -179
  5. package/dist/npm/main.js +177 -180
  6. package/dist/npm/sankey.d.ts +2 -0
  7. package/dist/systemjs/kendo-charts.js +1 -1
  8. package/package.json +1 -1
package/dist/es2015/chart/theme/load-theme.js CHANGED
@@ -45,35 +45,73 @@ const getSeriesColors = (element) => {
45
45
  return result;
46
46
  };
47
47
 
48
- export const gaugeTheme = (element) => ({
49
- pointer: {
50
- color: getProp(element, "--kendo-chart-gauge-pointer")
51
- },
52
- scale: {
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");
51
+
52
+ const title = (element) => ({
53
+ color: normalTextColor(element),
54
+ font: getFont(element, "--kendo-font-weight", '--kendo-chart-title-font-size', "--kendo-font-family"),
55
+ });
56
+
57
+ const sankeyLegend = (element) => {
58
+ const 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
+ 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
+ };
58
82
 
59
- minorTicks: {
60
- color: getProp(element, "--kendo-chart-text")
83
+ export const gaugeTheme = (element) => {
84
+ const 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 const sankeyTheme = (element) => ({
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 const sankeyTheme = (element) => ({
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 const chartTheme = (element) => ({
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
+ const notes = (element) => ({
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 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,
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
+ const waterfall = () => ({
166
+ line: {
167
+ color: majorLines,
178
168
  },
179
- horizontalWaterfall: {
180
- line: {
181
- color: getProp(element, "--kendo-chart-major-lines"),
182
- },
169
+ });
170
+
171
+ const area = () => ({
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
+ const line = () => ({
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
+ const bullet = () => ({
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
+ };