@progress/kendo-charts 2.11.3 → 2.12.0-develop.2

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 +52 -43
  4. package/dist/es2015/chart/theme/load-theme.js +52 -43
  5. package/dist/npm/main.js +51 -44
  6. package/dist/systemjs/kendo-charts.js +1 -1
  7. package/package.json +3 -3
package/dist/es/chart/theme/load-theme.js CHANGED
@@ -1,33 +1,34 @@
1
+ import { resolveElementColor } from "@progress/kendo-drawing";
2
+
1
3
  const SERIES_COLORS = 30;
2
4
  const seriesVar = '--kendo-chart-series-';
5
+
3
6
  const elementStyles = element => element.ownerDocument.defaultView.getComputedStyle(element);
4
- const cache = {};
7
+ const getProp = (element, prop) => elementStyles(element).getPropertyValue(prop);
8
+ const getNumberProp = (element, prop) => parseFloat(elementStyles(element).getPropertyValue(prop));
5
9
 
6
- const toColor = (colorMix, element) => {
7
- if (cache[colorMix]) {
8
- return cache[colorMix];
10
+ let colorCache;
11
+ const getColorProp = (element, prop) => {
12
+ let value = elementStyles(element).getPropertyValue(prop);
13
+ if (!value) {
14
+ return undefined;
9
15
  }
10
16
 
11
- const curColor = element.style.color;
12
- element.style.color = colorMix;
13
- const color = elementStyles(element).color;
14
- element.style.color = curColor;
17
+ if (!colorCache) {
18
+ colorCache = new Map();
19
+ }
15
20
 
16
- cache[colorMix] = color;
21
+ let color;
22
+ if (colorCache.has(value)) {
23
+ color = colorCache.get(value);
24
+ } else {
25
+ color = resolveElementColor(element, prop);
26
+ colorCache.set(value, color);
27
+ }
17
28
 
18
29
  return color;
19
30
  };
20
31
 
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
32
  const getFont = (element, weightProp, sizeProp, familyProp) => {
32
33
  const styles = elementStyles(element);
33
34
  return [styles.getPropertyValue(weightProp), styles.getPropertyValue(sizeProp), styles.getPropertyValue(familyProp) || styles.fontFamily].join(" ");
@@ -38,16 +39,24 @@ for (let i = 1; i <= SERIES_COLORS; i++) {
38
39
  seriesColorsVars[`series-color-${i}`] = `${seriesVar}${i}`;
39
40
  }
40
41
 
42
+ const seriesColorByIndex = (element, index) => {
43
+ const propName = `${seriesVar}${index}`;
44
+ return getColorProp(element, propName);
45
+ };
46
+
41
47
  const getSeriesColors = (element) => {
42
- const styles = elementStyles(element);
43
48
  const result = [];
44
- let count = 1;
45
- let color = styles.getPropertyValue(`${seriesVar}${count}`);
46
- while (color || count <= SERIES_COLORS) {
47
- result.push(color);
48
- count++;
49
- color = styles.getPropertyValue(`${seriesVar}${count}`);
49
+ let count = 0;
50
+
51
+ while (count++ <= SERIES_COLORS) {
52
+ const seriesColor = seriesColorByIndex(element, count);
53
+ if (seriesColor === undefined) {
54
+ break;
55
+ }
56
+
57
+ result.push(seriesColor);
50
58
  }
59
+
51
60
  return result;
52
61
  };
53
62
 
@@ -125,7 +134,7 @@ const gaugeVariables = {
125
134
  // Font & color helpers using variable objects (avoid raw CSS strings)
126
135
  const defaultFont = element => getFont(element, sharedVariables.fontWeight, chartVariables.chartFontSize, sharedVariables.fontFamily);
127
136
  const paneTitleFont = (element) => getFont(element, chartVariables.paneTitleFontWeight, chartVariables.paneTitleFontSize, sharedVariables.fontFamily);
128
- const normalTextColor = (element) => getProp(element, sharedVariables.text);
137
+ const normalTextColor = (element) => getColorProp(element, sharedVariables.text);
129
138
 
130
139
  const title = (element) => ({
131
140
  color: normalTextColor(element),
@@ -146,7 +155,7 @@ const sankeyLegend = (element) => {
146
155
  };
147
156
 
148
157
  const chartLegend = (element) => {
149
- const inactiveColor = getProp(element, chartVariables.inactive);
158
+ const inactiveColor = getColorProp(element, chartVariables.inactive);
150
159
  return Object.assign({}, {inactiveItems: {
151
160
  labels: {
152
161
  color: inactiveColor,
@@ -167,14 +176,14 @@ export const gaugeTheme = (element) => {
167
176
  const textColorNormal = normalTextColor(element);
168
177
  return {
169
178
  pointer: {
170
- color: getProp(element, vars.gaugePointer)
179
+ color: getColorProp(element, vars.gaugePointer)
171
180
  },
172
181
  scale: {
173
182
  labels: {
174
183
  color: textColorNormal
175
184
  },
176
185
 
177
- rangePlaceholderColor: getProp(element, vars.gaugeTrack),
186
+ rangePlaceholderColor: getColorProp(element, vars.gaugeTrack),
178
187
 
179
188
  minorTicks: {
180
189
  color: textColorNormal
@@ -198,11 +207,11 @@ export const sankeyTheme = (element) => {
198
207
  color: normalTextColor(element),
199
208
  font: defaultFont(element),
200
209
  stroke: {
201
- color: getProp(element, vars.chartBg),
210
+ color: getColorProp(element, vars.chartBg),
202
211
  },
203
212
  },
204
213
  links: {
205
- color: getProp(element, vars.linksColor),
214
+ color: getColorProp(element, vars.linksColor),
206
215
  },
207
216
  nodeColors: getSeriesColors(element),
208
217
  title: title(element),
@@ -212,13 +221,13 @@ export const sankeyTheme = (element) => {
212
221
 
213
222
  const notes = (element) => ({
214
223
  icon: {
215
- background: getProp(element, chartVariables.notesBg),
224
+ background: getColorProp(element, chartVariables.notesBg),
216
225
  border: {
217
- color: getProp(element, chartVariables.notesBorder),
226
+ color: getColorProp(element, chartVariables.notesBorder),
218
227
  },
219
228
  },
220
229
  line: {
221
- color: getProp(element, chartVariables.notesLines),
230
+ color: getColorProp(element, chartVariables.notesLines),
222
231
  },
223
232
  label: {
224
233
  font: defaultFont(element),
@@ -229,14 +238,14 @@ const notes = (element) => ({
229
238
 
230
239
  export const chartTheme = (element) => {
231
240
  const vars = chartCSSVariables;
232
- const majorLines = getProp(element, vars.majorLines);
233
- const normalTextColor = getProp(element, vars.text);
241
+ const majorLines = getColorProp(element, vars.majorLines);
242
+ const normalTextColor = getColorProp(element, vars.text);
234
243
  const axisLabelFont = getFont(element, vars.axisLabelFontWeight, vars.axisLabelFontSize, vars.axisLabelFontFamily);
235
- const chartBg = getProp(element, vars.chartBg);
244
+ const chartBg = getColorProp(element, vars.chartBg);
236
245
  const notesProps = notes(element);
237
246
  const areaOpacity = getNumberProp(element, vars.areaOpacity);
238
- const surfaceColor = getProp(element, vars.surface);
239
- const primaryBg = getProp(element, vars.primaryBg);
247
+ const surfaceColor = getColorProp(element, vars.surface);
248
+ const primaryBg = getColorProp(element, vars.primaryBg);
240
249
 
241
250
  const boxPlot = () => ({
242
251
  downColor: majorLines,
@@ -287,7 +296,7 @@ export const chartTheme = (element) => {
287
296
  return {
288
297
  axisDefaults: {
289
298
  crosshair: {
290
- color: getProp(element, vars.crosshairBg),
299
+ color: getColorProp(element, vars.crosshairBg),
291
300
  },
292
301
  labels: {
293
302
  color: normalTextColor,
@@ -300,7 +309,7 @@ export const chartTheme = (element) => {
300
309
  color: majorLines,
301
310
  },
302
311
  minorGridLines: {
303
- color: getProp(element, vars.minorLines),
312
+ color: getColorProp(element, vars.minorLines),
304
313
  },
305
314
  notes: structuredClone(notesProps),
306
315
  title: {
@@ -343,7 +352,7 @@ export const chartTheme = (element) => {
343
352
  },
344
353
  },
345
354
  errorBars: {
346
- color: getProp(element, vars.errorBarsBg),
355
+ color: getColorProp(element, vars.errorBarsBg),
347
356
  },
348
357
  icon: {
349
358
  border: {
package/dist/es2015/chart/theme/load-theme.js CHANGED
@@ -1,33 +1,34 @@
1
+ import { resolveElementColor } from "@progress/kendo-drawing";
2
+
1
3
  const SERIES_COLORS = 30;
2
4
  const seriesVar = '--kendo-chart-series-';
5
+
3
6
  const elementStyles = element => element.ownerDocument.defaultView.getComputedStyle(element);
4
- const cache = {};
7
+ const getProp = (element, prop) => elementStyles(element).getPropertyValue(prop);
8
+ const getNumberProp = (element, prop) => parseFloat(elementStyles(element).getPropertyValue(prop));
5
9
 
6
- const toColor = (colorMix, element) => {
7
- if (cache[colorMix]) {
8
- return cache[colorMix];
10
+ let colorCache;
11
+ const getColorProp = (element, prop) => {
12
+ let value = elementStyles(element).getPropertyValue(prop);
13
+ if (!value) {
14
+ return undefined;
9
15
  }
10
16
 
11
- const curColor = element.style.color;
12
- element.style.color = colorMix;
13
- const color = elementStyles(element).color;
14
- element.style.color = curColor;
17
+ if (!colorCache) {
18
+ colorCache = new Map();
19
+ }
15
20
 
16
- cache[colorMix] = color;
21
+ let color;
22
+ if (colorCache.has(value)) {
23
+ color = colorCache.get(value);
24
+ } else {
25
+ color = resolveElementColor(element, prop);
26
+ colorCache.set(value, color);
27
+ }
17
28
 
18
29
  return color;
19
30
  };
20
31
 
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
32
  const getFont = (element, weightProp, sizeProp, familyProp) => {
32
33
  const styles = elementStyles(element);
33
34
  return [styles.getPropertyValue(weightProp), styles.getPropertyValue(sizeProp), styles.getPropertyValue(familyProp) || styles.fontFamily].join(" ");
@@ -38,16 +39,24 @@ for (let i = 1; i <= SERIES_COLORS; i++) {
38
39
  seriesColorsVars[`series-color-${i}`] = `${seriesVar}${i}`;
39
40
  }
40
41
 
42
+ const seriesColorByIndex = (element, index) => {
43
+ const propName = `${seriesVar}${index}`;
44
+ return getColorProp(element, propName);
45
+ };
46
+
41
47
  const getSeriesColors = (element) => {
42
- const styles = elementStyles(element);
43
48
  const result = [];
44
- let count = 1;
45
- let color = styles.getPropertyValue(`${seriesVar}${count}`);
46
- while (color || count <= SERIES_COLORS) {
47
- result.push(color);
48
- count++;
49
- color = styles.getPropertyValue(`${seriesVar}${count}`);
49
+ let count = 0;
50
+
51
+ while (count++ <= SERIES_COLORS) {
52
+ const seriesColor = seriesColorByIndex(element, count);
53
+ if (seriesColor === undefined) {
54
+ break;
55
+ }
56
+
57
+ result.push(seriesColor);
50
58
  }
59
+
51
60
  return result;
52
61
  };
53
62
 
@@ -125,7 +134,7 @@ const gaugeVariables = {
125
134
  // Font & color helpers using variable objects (avoid raw CSS strings)
126
135
  const defaultFont = element => getFont(element, sharedVariables.fontWeight, chartVariables.chartFontSize, sharedVariables.fontFamily);
127
136
  const paneTitleFont = (element) => getFont(element, chartVariables.paneTitleFontWeight, chartVariables.paneTitleFontSize, sharedVariables.fontFamily);
128
- const normalTextColor = (element) => getProp(element, sharedVariables.text);
137
+ const normalTextColor = (element) => getColorProp(element, sharedVariables.text);
129
138
 
130
139
  const title = (element) => ({
131
140
  color: normalTextColor(element),
@@ -146,7 +155,7 @@ const sankeyLegend = (element) => {
146
155
  };
147
156
 
148
157
  const chartLegend = (element) => {
149
- const inactiveColor = getProp(element, chartVariables.inactive);
158
+ const inactiveColor = getColorProp(element, chartVariables.inactive);
150
159
  return Object.assign({}, {inactiveItems: {
151
160
  labels: {
152
161
  color: inactiveColor,
@@ -167,14 +176,14 @@ export const gaugeTheme = (element) => {
167
176
  const textColorNormal = normalTextColor(element);
168
177
  return {
169
178
  pointer: {
170
- color: getProp(element, vars.gaugePointer)
179
+ color: getColorProp(element, vars.gaugePointer)
171
180
  },
172
181
  scale: {
173
182
  labels: {
174
183
  color: textColorNormal
175
184
  },
176
185
 
177
- rangePlaceholderColor: getProp(element, vars.gaugeTrack),
186
+ rangePlaceholderColor: getColorProp(element, vars.gaugeTrack),
178
187
 
179
188
  minorTicks: {
180
189
  color: textColorNormal
@@ -198,11 +207,11 @@ export const sankeyTheme = (element) => {
198
207
  color: normalTextColor(element),
199
208
  font: defaultFont(element),
200
209
  stroke: {
201
- color: getProp(element, vars.chartBg),
210
+ color: getColorProp(element, vars.chartBg),
202
211
  },
203
212
  },
204
213
  links: {
205
- color: getProp(element, vars.linksColor),
214
+ color: getColorProp(element, vars.linksColor),
206
215
  },
207
216
  nodeColors: getSeriesColors(element),
208
217
  title: title(element),
@@ -212,13 +221,13 @@ export const sankeyTheme = (element) => {
212
221
 
213
222
  const notes = (element) => ({
214
223
  icon: {
215
- background: getProp(element, chartVariables.notesBg),
224
+ background: getColorProp(element, chartVariables.notesBg),
216
225
  border: {
217
- color: getProp(element, chartVariables.notesBorder),
226
+ color: getColorProp(element, chartVariables.notesBorder),
218
227
  },
219
228
  },
220
229
  line: {
221
- color: getProp(element, chartVariables.notesLines),
230
+ color: getColorProp(element, chartVariables.notesLines),
222
231
  },
223
232
  label: {
224
233
  font: defaultFont(element),
@@ -229,14 +238,14 @@ const notes = (element) => ({
229
238
 
230
239
  export const chartTheme = (element) => {
231
240
  const vars = chartCSSVariables;
232
- const majorLines = getProp(element, vars.majorLines);
233
- const normalTextColor = getProp(element, vars.text);
241
+ const majorLines = getColorProp(element, vars.majorLines);
242
+ const normalTextColor = getColorProp(element, vars.text);
234
243
  const axisLabelFont = getFont(element, vars.axisLabelFontWeight, vars.axisLabelFontSize, vars.axisLabelFontFamily);
235
- const chartBg = getProp(element, vars.chartBg);
244
+ const chartBg = getColorProp(element, vars.chartBg);
236
245
  const notesProps = notes(element);
237
246
  const areaOpacity = getNumberProp(element, vars.areaOpacity);
238
- const surfaceColor = getProp(element, vars.surface);
239
- const primaryBg = getProp(element, vars.primaryBg);
247
+ const surfaceColor = getColorProp(element, vars.surface);
248
+ const primaryBg = getColorProp(element, vars.primaryBg);
240
249
 
241
250
  const boxPlot = () => ({
242
251
  downColor: majorLines,
@@ -287,7 +296,7 @@ export const chartTheme = (element) => {
287
296
  return {
288
297
  axisDefaults: {
289
298
  crosshair: {
290
- color: getProp(element, vars.crosshairBg),
299
+ color: getColorProp(element, vars.crosshairBg),
291
300
  },
292
301
  labels: {
293
302
  color: normalTextColor,
@@ -300,7 +309,7 @@ export const chartTheme = (element) => {
300
309
  color: majorLines,
301
310
  },
302
311
  minorGridLines: {
303
- color: getProp(element, vars.minorLines),
312
+ color: getColorProp(element, vars.minorLines),
304
313
  },
305
314
  notes: structuredClone(notesProps),
306
315
  title: {
@@ -343,7 +352,7 @@ export const chartTheme = (element) => {
343
352
  },
344
353
  },
345
354
  errorBars: {
346
- color: getProp(element, vars.errorBarsBg),
355
+ color: getColorProp(element, vars.errorBarsBg),
347
356
  },
348
357
  icon: {
349
358
  border: {