@progress/kendo-charts 2.7.0-dev.202501020821 → 2.7.0-dev.202501200911

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 (13) 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/{base-theme.js → theme/base-theme.js} +2 -2
  4. package/dist/es/chart/theme/load-theme.js +272 -0
  5. package/dist/es/main.js +2 -2
  6. package/dist/es2015/chart/{base-theme.js → theme/base-theme.js} +2 -2
  7. package/dist/es2015/chart/theme/load-theme.js +272 -0
  8. package/dist/es2015/main.js +2 -2
  9. package/dist/npm/common.d.ts +2 -0
  10. package/dist/npm/main.d.ts +4 -0
  11. package/dist/npm/main.js +277 -1
  12. package/dist/systemjs/kendo-charts.js +1 -1
  13. package/package.json +1 -1
package/dist/es/chart/{base-theme.js → theme/base-theme.js} RENAMED
@@ -1,5 +1,5 @@
1
- import { AREA, LINE } from './constants';
2
- import { INHERIT } from '../common/constants';
1
+ import { AREA, LINE } from '../constants';
2
+ import { INHERIT } from '../../common/constants';
3
3
 
4
4
  var BAR_GAP = 1.5;
5
5
  var BAR_SPACING = 0.4;
package/dist/es/chart/theme/load-theme.js ADDED
@@ -0,0 +1,272 @@
1
+ var SERIES_COLORS = 30;
2
+ var seriesVar = '--kendo-chart-series-';
3
+ var elementStyles = function (element) { return element.ownerDocument.defaultView.getComputedStyle(element); };
4
+ var cache = {};
5
+
6
+ var toColor = function (colorMix, element) {
7
+ if (cache[colorMix]) {
8
+ return cache[colorMix];
9
+ }
10
+
11
+ var curColor = element.style.color;
12
+ element.style.color = colorMix;
13
+ var color = elementStyles(element).color;
14
+ element.style.color = curColor;
15
+
16
+ cache[colorMix] = color;
17
+
18
+ return color;
19
+ };
20
+
21
+ var getProp = function (element, prop) {
22
+ var value = elementStyles(element).getPropertyValue(prop);
23
+ if (/^color-mix/i.test(value)) {
24
+ value = toColor(value, element);
25
+ }
26
+ return value;
27
+ };
28
+
29
+ var getNumberProp = function (element, prop) { return parseFloat(elementStyles(element).getPropertyValue(prop)); };
30
+
31
+ var getFont = function (element, weightProp, sizeProp, familyProp) {
32
+ var styles = elementStyles(element);
33
+ return [styles.getPropertyValue(weightProp), styles.getPropertyValue(sizeProp), styles.getPropertyValue(familyProp) || styles.fontFamily].join(" ");
34
+ };
35
+
36
+ var getSeriesColors = function (element) {
37
+ var styles = elementStyles(element);
38
+ var result = [];
39
+ var count = 1;
40
+ var color = styles.getPropertyValue(("" + seriesVar + (count++)));
41
+ while (color || count <= SERIES_COLORS) {
42
+ result.push(color);
43
+ color = styles.getPropertyValue(("" + seriesVar + (count++)));
44
+ }
45
+ return result;
46
+ };
47
+
48
+ export var gaugeTheme = function (element) { return ({
49
+ pointer: {
50
+ color: getProp(element, "--kendo-chart-gauge-pointer")
51
+ },
52
+ scale: {
53
+ labels: {
54
+ color: getProp(element, "--kendo-chart-text")
55
+ },
56
+
57
+ rangePlaceholderColor: getProp(element, "--kendo-chart-gauge-track"),
58
+
59
+ minorTicks: {
60
+ color: getProp(element, "--kendo-chart-text")
61
+ },
62
+
63
+ majorTicks: {
64
+ color: getProp(element, "--kendo-chart-text")
65
+ },
66
+
67
+ line: {
68
+ color: getProp(element, "--kendo-chart-text")
69
+ }
70
+ }
71
+ }); };
72
+
73
+ export var sankeyTheme = function (element) { return ({
74
+ labels: {
75
+ color: getProp(element, "--kendo-chart-text"),
76
+ font: getFont(element, "--kendo-font-weight", "--kendo-chart-font-size", "--kendo-font-family"),
77
+ stroke: {
78
+ color: getProp(element, "--kendo-chart-bg"),
79
+ },
80
+ },
81
+ links: {
82
+ color: getProp(element, "--kendo-color-subtle"),
83
+ },
84
+ nodeColors: getSeriesColors(element)
85
+ }); };
86
+
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"),
95
+ },
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
+ },
124
+ chartArea: {
125
+ background: getProp(element, "--kendo-chart-bg"),
126
+ },
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
+ },
144
+ },
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
+ },
164
+ },
165
+ bullet: {
166
+ target: {
167
+ color: getProp(element, "--kendo-chart-text"),
168
+ },
169
+ },
170
+ candlestick: {
171
+ downColor: getProp(element, "--kendo-chart-text"),
172
+ line: {
173
+ color: getProp(element, "--kendo-chart-text"),
174
+ },
175
+ },
176
+ errorBars: {
177
+ color: getProp(element, "--kendo-chart-error-bars-bg"),
178
+ },
179
+ horizontalWaterfall: {
180
+ line: {
181
+ color: getProp(element, "--kendo-chart-major-lines"),
182
+ },
183
+ },
184
+ icon: {
185
+ border: {
186
+ color: getProp(element, "--kendo-chart-major-lines"),
187
+ },
188
+ },
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"),
194
+ },
195
+ line: {
196
+ highlight: {
197
+ inactiveOpacity: getNumberProp(element, "--kendo-chart-area-inactive-opacity"),
198
+ },
199
+ },
200
+ notes: {
201
+ icon: {
202
+ background: getProp(element, "--kendo-chart-notes-bg"),
203
+ border: {
204
+ color: getProp(element, "--kendo-chart-notes-border"),
205
+ },
206
+ },
207
+ line: {
208
+ color: getProp(element, "--kendo-chart-notes-lines"),
209
+ },
210
+ label: {
211
+ font: getFont(element, "--kendo-font-weight", "--kendo-chart-label-font-size", "--kendo-font-family"),
212
+ },
213
+ },
214
+ radarArea: {
215
+ opacity: getNumberProp(element, "--kendo-chart-area-opacity"),
216
+ highlight: {
217
+ inactiveOpacity: getNumberProp(element, "--kendo-chart-area-inactive-opacity"),
218
+ },
219
+ },
220
+ verticalArea: {
221
+ opacity: getNumberProp(element, "--kendo-chart-area-opacity"),
222
+ highlight: {
223
+ inactiveOpacity: getNumberProp(element, "--kendo-chart-area-inactive-opacity"),
224
+ },
225
+ },
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"),
236
+ },
237
+ },
238
+ verticalBullet: {
239
+ target: {
240
+ color: getProp(element, "--kendo-chart-text"),
241
+ },
242
+ },
243
+ verticalLine: {
244
+ highlight: {
245
+ inactiveOpacity: getNumberProp(element, "--kendo-chart-area-inactive-opacity"),
246
+ },
247
+ },
248
+ verticalWaterfall: {
249
+ line: {
250
+ color: getProp(element, "--kendo-chart-major-lines"),
251
+ },
252
+ },
253
+ waterfall: {
254
+ line: {
255
+ color: getProp(element, "--kendo-chart-major-lines"),
256
+ },
257
+ },
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"),
270
+ }
271
+ }
272
+ }); };
package/dist/es/main.js CHANGED
@@ -11,5 +11,5 @@ export * from './sankey';
11
11
  export * from './common';
12
12
  export * from './chart-wizard';
13
13
 
14
- export { baseTheme as chartBaseTheme } from './chart/base-theme';
15
-
14
+ export { baseTheme as chartBaseTheme } from './chart/theme/base-theme';
15
+ export { chartTheme, gaugeTheme, sankeyTheme } from './chart/theme/load-theme';
package/dist/es2015/chart/{base-theme.js → theme/base-theme.js} RENAMED
@@ -1,5 +1,5 @@
1
- import { AREA, LINE } from './constants';
2
- import { INHERIT } from '../common/constants';
1
+ import { AREA, LINE } from '../constants';
2
+ import { INHERIT } from '../../common/constants';
3
3
 
4
4
  const BAR_GAP = 1.5;
5
5
  const BAR_SPACING = 0.4;
package/dist/es2015/chart/theme/load-theme.js ADDED
@@ -0,0 +1,272 @@
1
+ const SERIES_COLORS = 30;
2
+ const seriesVar = '--kendo-chart-series-';
3
+ const elementStyles = element => element.ownerDocument.defaultView.getComputedStyle(element);
4
+ const cache = {};
5
+
6
+ const toColor = (colorMix, element) => {
7
+ if (cache[colorMix]) {
8
+ return cache[colorMix];
9
+ }
10
+
11
+ const curColor = element.style.color;
12
+ element.style.color = colorMix;
13
+ const color = elementStyles(element).color;
14
+ element.style.color = curColor;
15
+
16
+ cache[colorMix] = color;
17
+
18
+ return color;
19
+ };
20
+
21
+ const getProp = (element, prop) => {
22
+ let value = elementStyles(element).getPropertyValue(prop);
23
+ if (/^color-mix/i.test(value)) {
24
+ value = toColor(value, element);
25
+ }
26
+ return value;
27
+ };
28
+
29
+ const getNumberProp = (element, prop) => parseFloat(elementStyles(element).getPropertyValue(prop));
30
+
31
+ const getFont = (element, weightProp, sizeProp, familyProp) => {
32
+ const styles = elementStyles(element);
33
+ return [styles.getPropertyValue(weightProp), styles.getPropertyValue(sizeProp), styles.getPropertyValue(familyProp) || styles.fontFamily].join(" ");
34
+ };
35
+
36
+ const getSeriesColors = (element) => {
37
+ const styles = elementStyles(element);
38
+ const result = [];
39
+ let count = 1;
40
+ let color = styles.getPropertyValue(`${seriesVar}${count++}`);
41
+ while (color || count <= SERIES_COLORS) {
42
+ result.push(color);
43
+ color = styles.getPropertyValue(`${seriesVar}${count++}`);
44
+ }
45
+ return result;
46
+ };
47
+
48
+ export const gaugeTheme = (element) => ({
49
+ pointer: {
50
+ color: getProp(element, "--kendo-chart-gauge-pointer")
51
+ },
52
+ scale: {
53
+ labels: {
54
+ color: getProp(element, "--kendo-chart-text")
55
+ },
56
+
57
+ rangePlaceholderColor: getProp(element, "--kendo-chart-gauge-track"),
58
+
59
+ minorTicks: {
60
+ color: getProp(element, "--kendo-chart-text")
61
+ },
62
+
63
+ majorTicks: {
64
+ color: getProp(element, "--kendo-chart-text")
65
+ },
66
+
67
+ line: {
68
+ color: getProp(element, "--kendo-chart-text")
69
+ }
70
+ }
71
+ });
72
+
73
+ export const sankeyTheme = (element) => ({
74
+ labels: {
75
+ color: getProp(element, "--kendo-chart-text"),
76
+ font: getFont(element, "--kendo-font-weight", "--kendo-chart-font-size", "--kendo-font-family"),
77
+ stroke: {
78
+ color: getProp(element, "--kendo-chart-bg"),
79
+ },
80
+ },
81
+ links: {
82
+ color: getProp(element, "--kendo-color-subtle"),
83
+ },
84
+ nodeColors: getSeriesColors(element)
85
+ });
86
+
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"),
95
+ },
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
+ },
124
+ chartArea: {
125
+ background: getProp(element, "--kendo-chart-bg"),
126
+ },
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
+ },
144
+ },
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
+ },
164
+ },
165
+ bullet: {
166
+ target: {
167
+ color: getProp(element, "--kendo-chart-text"),
168
+ },
169
+ },
170
+ candlestick: {
171
+ downColor: getProp(element, "--kendo-chart-text"),
172
+ line: {
173
+ color: getProp(element, "--kendo-chart-text"),
174
+ },
175
+ },
176
+ errorBars: {
177
+ color: getProp(element, "--kendo-chart-error-bars-bg"),
178
+ },
179
+ horizontalWaterfall: {
180
+ line: {
181
+ color: getProp(element, "--kendo-chart-major-lines"),
182
+ },
183
+ },
184
+ icon: {
185
+ border: {
186
+ color: getProp(element, "--kendo-chart-major-lines"),
187
+ },
188
+ },
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"),
194
+ },
195
+ line: {
196
+ highlight: {
197
+ inactiveOpacity: getNumberProp(element, "--kendo-chart-area-inactive-opacity"),
198
+ },
199
+ },
200
+ notes: {
201
+ icon: {
202
+ background: getProp(element, "--kendo-chart-notes-bg"),
203
+ border: {
204
+ color: getProp(element, "--kendo-chart-notes-border"),
205
+ },
206
+ },
207
+ line: {
208
+ color: getProp(element, "--kendo-chart-notes-lines"),
209
+ },
210
+ label: {
211
+ font: getFont(element, "--kendo-font-weight", "--kendo-chart-label-font-size", "--kendo-font-family"),
212
+ },
213
+ },
214
+ radarArea: {
215
+ opacity: getNumberProp(element, "--kendo-chart-area-opacity"),
216
+ highlight: {
217
+ inactiveOpacity: getNumberProp(element, "--kendo-chart-area-inactive-opacity"),
218
+ },
219
+ },
220
+ verticalArea: {
221
+ opacity: getNumberProp(element, "--kendo-chart-area-opacity"),
222
+ highlight: {
223
+ inactiveOpacity: getNumberProp(element, "--kendo-chart-area-inactive-opacity"),
224
+ },
225
+ },
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"),
236
+ },
237
+ },
238
+ verticalBullet: {
239
+ target: {
240
+ color: getProp(element, "--kendo-chart-text"),
241
+ },
242
+ },
243
+ verticalLine: {
244
+ highlight: {
245
+ inactiveOpacity: getNumberProp(element, "--kendo-chart-area-inactive-opacity"),
246
+ },
247
+ },
248
+ verticalWaterfall: {
249
+ line: {
250
+ color: getProp(element, "--kendo-chart-major-lines"),
251
+ },
252
+ },
253
+ waterfall: {
254
+ line: {
255
+ color: getProp(element, "--kendo-chart-major-lines"),
256
+ },
257
+ },
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"),
270
+ }
271
+ }
272
+ });
package/dist/es2015/main.js CHANGED
@@ -11,5 +11,5 @@ export * from './sankey';
11
11
  export * from './common';
12
12
  export * from './chart-wizard';
13
13
 
14
- export { baseTheme as chartBaseTheme } from './chart/base-theme';
15
-
14
+ export { baseTheme as chartBaseTheme } from './chart/theme/base-theme';
15
+ export { chartTheme, gaugeTheme, sankeyTheme } from './chart/theme/load-theme';
package/dist/npm/common.d.ts CHANGED
@@ -9,3 +9,5 @@ export class InstanceObserver {
9
9
 
10
10
  requiresHandlers(names: string[]): boolean;
11
11
  }
12
+
13
+ export function deepExtend(destination: any, ...source: any[]): any;
package/dist/npm/main.d.ts CHANGED
@@ -14,3 +14,7 @@ export * from './validation';
14
14
  export * from './chart-wizard';
15
15
 
16
16
  export function chartBaseTheme(): any;
17
+
18
+ export const chartTheme: (element: HTMLElement) => any;
19
+ export const gaugeTheme: (element: HTMLElement) => any;
20
+ export const sankeyTheme: (element: HTMLElement) => any;