@vaadin/charts 25.0.0-alpha10 → 25.0.0-alpha11
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.
- package/package.json +7 -10
- package/src/styles/vaadin-chart-base-styles.js +73 -100
- package/src/vaadin-chart.js +1 -1
- package/vaadin-chart.js +1 -1
- package/web-types.json +1 -1
- package/web-types.lit.json +1 -1
- package/src/styles/vaadin-chart-core-styles.d.ts +0 -13
- package/src/styles/vaadin-chart-core-styles.js +0 -1063
- package/theme/lumo/vaadin-chart-styles.d.ts +0 -5
- package/theme/lumo/vaadin-chart-styles.js +0 -96
- package/theme/lumo/vaadin-chart.d.ts +0 -2
- package/theme/lumo/vaadin-chart.js +0 -2
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/charts",
|
|
3
|
-
"version": "25.0.0-
|
|
3
|
+
"version": "25.0.0-alpha11",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -21,9 +21,6 @@
|
|
|
21
21
|
"type": "module",
|
|
22
22
|
"files": [
|
|
23
23
|
"src",
|
|
24
|
-
"!src/styles/*-base-styles.d.ts",
|
|
25
|
-
"!src/styles/*-base-styles.js",
|
|
26
|
-
"theme",
|
|
27
24
|
"vaadin-*.d.ts",
|
|
28
25
|
"vaadin-*.js",
|
|
29
26
|
"web-types.json",
|
|
@@ -37,16 +34,16 @@
|
|
|
37
34
|
],
|
|
38
35
|
"dependencies": {
|
|
39
36
|
"@open-wc/dedupe-mixin": "^1.3.0",
|
|
40
|
-
"@vaadin/component-base": "25.0.0-
|
|
41
|
-
"@vaadin/vaadin-
|
|
42
|
-
"@vaadin/vaadin-themable-mixin": "25.0.0-alpha10",
|
|
37
|
+
"@vaadin/component-base": "25.0.0-alpha11",
|
|
38
|
+
"@vaadin/vaadin-themable-mixin": "25.0.0-alpha11",
|
|
43
39
|
"highcharts": "9.2.2",
|
|
44
40
|
"lit": "^3.0.0"
|
|
45
41
|
},
|
|
46
42
|
"devDependencies": {
|
|
47
|
-
"@vaadin/chai-plugins": "25.0.0-
|
|
48
|
-
"@vaadin/test-runner-commands": "25.0.0-
|
|
43
|
+
"@vaadin/chai-plugins": "25.0.0-alpha11",
|
|
44
|
+
"@vaadin/test-runner-commands": "25.0.0-alpha11",
|
|
49
45
|
"@vaadin/testing-helpers": "^2.0.0",
|
|
46
|
+
"@vaadin/vaadin-lumo-styles": "25.0.0-alpha11",
|
|
50
47
|
"sinon": "^18.0.0"
|
|
51
48
|
},
|
|
52
49
|
"cvdlName": "vaadin-chart",
|
|
@@ -54,5 +51,5 @@
|
|
|
54
51
|
"web-types.json",
|
|
55
52
|
"web-types.lit.json"
|
|
56
53
|
],
|
|
57
|
-
"gitHead": "
|
|
54
|
+
"gitHead": "abfd315ba5a7484a613e0768635a4e8fe945a44b"
|
|
58
55
|
}
|
|
@@ -16,7 +16,8 @@
|
|
|
16
16
|
*
|
|
17
17
|
* License: www.highcharts.com/license
|
|
18
18
|
*/
|
|
19
|
-
import '@vaadin/component-base/src/style-props.js';
|
|
19
|
+
import '@vaadin/component-base/src/styles/style-props.js';
|
|
20
|
+
import '@vaadin/component-base/src/styles/user-colors.js';
|
|
20
21
|
import { css, unsafeCSS } from 'lit';
|
|
21
22
|
import { addGlobalThemeStyles } from '@vaadin/vaadin-themable-mixin/register-styles.js';
|
|
22
23
|
|
|
@@ -85,59 +86,31 @@ export const chartStyles = css`
|
|
|
85
86
|
|
|
86
87
|
/* Needs to be a color, not a background image */
|
|
87
88
|
--_bg: var(--vaadin-charts-background, var(--vaadin-background-color));
|
|
88
|
-
--_hue-scale: 180;
|
|
89
|
-
--_accent: var(--vaadin-charts-accent, #4172d5);
|
|
90
|
-
--_accent-0: var(--vaadin-charts-color-0, var(--_accent));
|
|
91
|
-
--_accent-1: var(
|
|
92
|
-
--vaadin-charts-color-1,
|
|
93
|
-
oklch(from var(--_accent-0) clamp(0.2, l - 0.1, 0.8) c calc(h - var(--_hue-scale) / 9 * 1))
|
|
94
|
-
);
|
|
95
|
-
--_accent-2: var(
|
|
96
|
-
--vaadin-charts-color-2,
|
|
97
|
-
oklch(from var(--_accent-0) clamp(0.2, l + 0.1, 0.8) c calc(h - var(--_hue-scale) / 9 * 2))
|
|
98
|
-
);
|
|
99
|
-
--_accent-3: var(
|
|
100
|
-
--vaadin-charts-color-3,
|
|
101
|
-
oklch(from var(--_accent-0) clamp(0.2, l - 0.1, 0.8) c calc(h - var(--_hue-scale) / 9 * 3))
|
|
102
|
-
);
|
|
103
|
-
--_accent-4: var(
|
|
104
|
-
--vaadin-charts-color-4,
|
|
105
|
-
oklch(from var(--_accent-0) clamp(0.2, l + 0.1, 0.8) c calc(h - var(--_hue-scale) / 9 * 4))
|
|
106
|
-
);
|
|
107
|
-
--_accent-5: var(
|
|
108
|
-
--vaadin-charts-color-5,
|
|
109
|
-
oklch(from var(--_accent-0) clamp(0.2, l - 0.1, 0.8) c calc(h - var(--_hue-scale) / 9 * 5))
|
|
110
|
-
);
|
|
111
|
-
--_accent-6: var(
|
|
112
|
-
--vaadin-charts-color-6,
|
|
113
|
-
oklch(from var(--_accent-0) clamp(0.2, l + 0.1, 0.8) c calc(h - var(--_hue-scale) / 9 * 6))
|
|
114
|
-
);
|
|
115
|
-
--_accent-7: var(
|
|
116
|
-
--vaadin-charts-color-7,
|
|
117
|
-
oklch(from var(--_accent-0) clamp(0.2, l - 0.1, 0.8) c calc(h - var(--_hue-scale) / 9 * 7))
|
|
118
|
-
);
|
|
119
|
-
--_accent-8: var(
|
|
120
|
-
--vaadin-charts-color-8,
|
|
121
|
-
oklch(from var(--_accent-0) clamp(0.2, l + 0.1, 0.8) c calc(h - var(--_hue-scale) / 9 * 8))
|
|
122
|
-
);
|
|
123
|
-
--_accent-9: var(
|
|
124
|
-
--vaadin-charts-color-9,
|
|
125
|
-
oklch(from var(--_accent-0) clamp(0.2, l - 0.1, 0.8) c calc(h - var(--_hue-scale) / 9 * 9))
|
|
126
|
-
);
|
|
127
|
-
|
|
128
|
-
--_accent-0-label: oklch(from var(--_accent-0) clamp(0, (0.62 - l) * 1000, 1) 0 0);
|
|
129
|
-
--_accent-1-label: oklch(from var(--_accent-1) clamp(0, (0.62 - l) * 1000, 1) 0 0);
|
|
130
|
-
--_accent-2-label: oklch(from var(--_accent-2) clamp(0, (0.62 - l) * 1000, 1) 0 0);
|
|
131
|
-
--_accent-3-label: oklch(from var(--_accent-3) clamp(0, (0.62 - l) * 1000, 1) 0 0);
|
|
132
|
-
--_accent-4-label: oklch(from var(--_accent-4) clamp(0, (0.62 - l) * 1000, 1) 0 0);
|
|
133
|
-
--_accent-5-label: oklch(from var(--_accent-5) clamp(0, (0.62 - l) * 1000, 1) 0 0);
|
|
134
|
-
--_accent-6-label: oklch(from var(--_accent-6) clamp(0, (0.62 - l) * 1000, 1) 0 0);
|
|
135
|
-
--_accent-7-label: oklch(from var(--_accent-7) clamp(0, (0.62 - l) * 1000, 1) 0 0);
|
|
136
|
-
--_accent-8-label: oklch(from var(--_accent-8) clamp(0, (0.62 - l) * 1000, 1) 0 0);
|
|
137
|
-
--_accent-9-label: oklch(from var(--_accent-9) clamp(0, (0.62 - l) * 1000, 1) 0 0);
|
|
138
89
|
|
|
139
|
-
--
|
|
140
|
-
--
|
|
90
|
+
--_color-0: var(--vaadin-charts-color-0, var(--vaadin-user-color-0));
|
|
91
|
+
--_color-1: var(--vaadin-charts-color-1, var(--vaadin-user-color-1));
|
|
92
|
+
--_color-2: var(--vaadin-charts-color-2, var(--vaadin-user-color-2));
|
|
93
|
+
--_color-3: var(--vaadin-charts-color-3, var(--vaadin-user-color-3));
|
|
94
|
+
--_color-4: var(--vaadin-charts-color-4, var(--vaadin-user-color-4));
|
|
95
|
+
--_color-5: var(--vaadin-charts-color-5, var(--vaadin-user-color-5));
|
|
96
|
+
--_color-6: var(--vaadin-charts-color-6, var(--vaadin-user-color-6));
|
|
97
|
+
--_color-7: var(--vaadin-charts-color-7, var(--vaadin-user-color-7));
|
|
98
|
+
--_color-8: var(--vaadin-charts-color-8, var(--vaadin-user-color-8));
|
|
99
|
+
--_color-9: var(--vaadin-charts-color-9, var(--vaadin-user-color-9));
|
|
100
|
+
|
|
101
|
+
--_color-0-label: oklch(from var(--_color-0) clamp(0, (0.62 - l) * 1000, 1) 0 0);
|
|
102
|
+
--_color-1-label: oklch(from var(--_color-1) clamp(0, (0.62 - l) * 1000, 1) 0 0);
|
|
103
|
+
--_color-2-label: oklch(from var(--_color-2) clamp(0, (0.62 - l) * 1000, 1) 0 0);
|
|
104
|
+
--_color-3-label: oklch(from var(--_color-3) clamp(0, (0.62 - l) * 1000, 1) 0 0);
|
|
105
|
+
--_color-4-label: oklch(from var(--_color-4) clamp(0, (0.62 - l) * 1000, 1) 0 0);
|
|
106
|
+
--_color-5-label: oklch(from var(--_color-5) clamp(0, (0.62 - l) * 1000, 1) 0 0);
|
|
107
|
+
--_color-6-label: oklch(from var(--_color-6) clamp(0, (0.62 - l) * 1000, 1) 0 0);
|
|
108
|
+
--_color-7-label: oklch(from var(--_color-7) clamp(0, (0.62 - l) * 1000, 1) 0 0);
|
|
109
|
+
--_color-8-label: oklch(from var(--_color-8) clamp(0, (0.62 - l) * 1000, 1) 0 0);
|
|
110
|
+
--_color-9-label: oklch(from var(--_color-9) clamp(0, (0.62 - l) * 1000, 1) 0 0);
|
|
111
|
+
|
|
112
|
+
--_color-positive: light-dark(#19b156, #1ccc62);
|
|
113
|
+
--_color-negative: light-dark(#dc0611, #f7353f);
|
|
141
114
|
|
|
142
115
|
--_label: var(--vaadin-charts-label, var(--vaadin-color));
|
|
143
116
|
--_secondary-label: var(--vaadin-charts-secondary-label, var(--vaadin-color-subtle));
|
|
@@ -285,7 +258,7 @@ export const chartStyles = css`
|
|
|
285
258
|
}
|
|
286
259
|
|
|
287
260
|
:where([styled-mode]) .highcharts-crosshair-category {
|
|
288
|
-
stroke: var(--
|
|
261
|
+
stroke: var(--_color-0);
|
|
289
262
|
stroke-opacity: 0.25;
|
|
290
263
|
}
|
|
291
264
|
|
|
@@ -308,7 +281,7 @@ export const chartStyles = css`
|
|
|
308
281
|
${unsafeCSS(tooltipStyles(':where([styled-mode])'))};
|
|
309
282
|
|
|
310
283
|
:where([styled-mode]) .highcharts-selection-marker {
|
|
311
|
-
fill: var(--
|
|
284
|
+
fill: var(--_color-0);
|
|
312
285
|
fill-opacity: 0.25;
|
|
313
286
|
}
|
|
314
287
|
|
|
@@ -365,103 +338,103 @@ export const chartStyles = css`
|
|
|
365
338
|
/* vaadin-charts custom properties */
|
|
366
339
|
/* Use of :where() function to avoid setting classes with high specificity */
|
|
367
340
|
:where([styled-mode]) .highcharts-color-0 {
|
|
368
|
-
fill: var(--
|
|
369
|
-
stroke: var(--
|
|
370
|
-
color: var(--
|
|
341
|
+
fill: var(--_color-0);
|
|
342
|
+
stroke: var(--_color-0);
|
|
343
|
+
color: var(--_color-0-label);
|
|
371
344
|
}
|
|
372
345
|
|
|
373
346
|
:where([styled-mode]) .highcharts-color-1 {
|
|
374
|
-
fill: var(--
|
|
375
|
-
stroke: var(--
|
|
376
|
-
color: var(--
|
|
347
|
+
fill: var(--_color-1);
|
|
348
|
+
stroke: var(--_color-1);
|
|
349
|
+
color: var(--_color-1-label);
|
|
377
350
|
}
|
|
378
351
|
|
|
379
352
|
:where([styled-mode]) .highcharts-color-2 {
|
|
380
|
-
fill: var(--
|
|
381
|
-
stroke: var(--
|
|
382
|
-
color: var(--
|
|
353
|
+
fill: var(--_color-2);
|
|
354
|
+
stroke: var(--_color-2);
|
|
355
|
+
color: var(--_color-2-label);
|
|
383
356
|
}
|
|
384
357
|
|
|
385
358
|
:where([styled-mode]) .highcharts-color-3 {
|
|
386
|
-
fill: var(--
|
|
387
|
-
stroke: var(--
|
|
388
|
-
color: var(--
|
|
359
|
+
fill: var(--_color-3);
|
|
360
|
+
stroke: var(--_color-3);
|
|
361
|
+
color: var(--_color-2-label);
|
|
389
362
|
}
|
|
390
363
|
|
|
391
364
|
:where([styled-mode]) .highcharts-color-4 {
|
|
392
|
-
fill: var(--
|
|
393
|
-
stroke: var(--
|
|
394
|
-
color: var(--
|
|
365
|
+
fill: var(--_color-4);
|
|
366
|
+
stroke: var(--_color-4);
|
|
367
|
+
color: var(--_color-4-label);
|
|
395
368
|
}
|
|
396
369
|
|
|
397
370
|
:where([styled-mode]) .highcharts-color-5 {
|
|
398
|
-
fill: var(--
|
|
399
|
-
stroke: var(--
|
|
400
|
-
color: var(--
|
|
371
|
+
fill: var(--_color-5);
|
|
372
|
+
stroke: var(--_color-5);
|
|
373
|
+
color: var(--_color-5-label);
|
|
401
374
|
}
|
|
402
375
|
|
|
403
376
|
:where([styled-mode]) .highcharts-color-6 {
|
|
404
|
-
fill: var(--
|
|
405
|
-
stroke: var(--
|
|
406
|
-
color: var(--
|
|
377
|
+
fill: var(--_color-6);
|
|
378
|
+
stroke: var(--_color-6);
|
|
379
|
+
color: var(--_color-6-label);
|
|
407
380
|
}
|
|
408
381
|
|
|
409
382
|
:where([styled-mode]) .highcharts-color-7 {
|
|
410
|
-
fill: var(--
|
|
411
|
-
stroke: var(--
|
|
412
|
-
color: var(--
|
|
383
|
+
fill: var(--_color-7);
|
|
384
|
+
stroke: var(--_color-7);
|
|
385
|
+
color: var(--_color-7-label);
|
|
413
386
|
}
|
|
414
387
|
|
|
415
388
|
:where([styled-mode]) .highcharts-color-8 {
|
|
416
|
-
fill: var(--
|
|
417
|
-
stroke: var(--
|
|
418
|
-
color: var(--
|
|
389
|
+
fill: var(--_color-8);
|
|
390
|
+
stroke: var(--_color-8);
|
|
391
|
+
color: var(--_color-8-label);
|
|
419
392
|
}
|
|
420
393
|
|
|
421
394
|
:where([styled-mode]) .highcharts-color-9 {
|
|
422
|
-
fill: var(--
|
|
423
|
-
stroke: var(--
|
|
424
|
-
color: var(--
|
|
395
|
+
fill: var(--_color-9);
|
|
396
|
+
stroke: var(--_color-9);
|
|
397
|
+
color: var(--_color-9-label);
|
|
425
398
|
}
|
|
426
399
|
|
|
427
400
|
:where([styled-mode]) .highcharts-data-label-color-0 {
|
|
428
|
-
color: var(--
|
|
401
|
+
color: var(--_color-0-label);
|
|
429
402
|
}
|
|
430
403
|
|
|
431
404
|
:where([styled-mode]) .highcharts-data-label-color-1 {
|
|
432
|
-
color: var(--
|
|
405
|
+
color: var(--_color-1-label);
|
|
433
406
|
}
|
|
434
407
|
|
|
435
408
|
:where([styled-mode]) .highcharts-data-label-color-2 {
|
|
436
|
-
color: var(--
|
|
409
|
+
color: var(--_color-2-label);
|
|
437
410
|
}
|
|
438
411
|
|
|
439
412
|
:where([styled-mode]) .highcharts-data-label-color-3 {
|
|
440
|
-
color: var(--
|
|
413
|
+
color: var(--_color-3-label);
|
|
441
414
|
}
|
|
442
415
|
|
|
443
416
|
:where([styled-mode]) .highcharts-data-label-color-4 {
|
|
444
|
-
color: var(--
|
|
417
|
+
color: var(--_color-4-label);
|
|
445
418
|
}
|
|
446
419
|
|
|
447
420
|
:where([styled-mode]) .highcharts-data-label-color-5 {
|
|
448
|
-
color: var(--
|
|
421
|
+
color: var(--_color-5-label);
|
|
449
422
|
}
|
|
450
423
|
|
|
451
424
|
:where([styled-mode]) .highcharts-data-label-color-6 {
|
|
452
|
-
color: var(--
|
|
425
|
+
color: var(--_color-6-label);
|
|
453
426
|
}
|
|
454
427
|
|
|
455
428
|
:where([styled-mode]) .highcharts-data-label-color-7 {
|
|
456
|
-
color: var(--
|
|
429
|
+
color: var(--_color-7-label);
|
|
457
430
|
}
|
|
458
431
|
|
|
459
432
|
:where([styled-mode]) .highcharts-data-label-color-8 {
|
|
460
|
-
color: var(--
|
|
433
|
+
color: var(--_color-8-label);
|
|
461
434
|
}
|
|
462
435
|
|
|
463
436
|
:where([styled-mode]) .highcharts-data-label-color-9 {
|
|
464
|
-
color: var(--
|
|
437
|
+
color: var(--_color-9-label);
|
|
465
438
|
}
|
|
466
439
|
|
|
467
440
|
:where([styled-mode]) [class*='highcharts-data-label-color-'] {
|
|
@@ -832,7 +805,7 @@ export const chartStyles = css`
|
|
|
832
805
|
}
|
|
833
806
|
|
|
834
807
|
:where([styled-mode]) .highcharts-navigator-mask-inside {
|
|
835
|
-
fill: var(--
|
|
808
|
+
fill: var(--_color-0);
|
|
836
809
|
/* navigator.maskFill option */
|
|
837
810
|
fill-opacity: 0.2;
|
|
838
811
|
cursor: ew-resize;
|
|
@@ -850,8 +823,8 @@ export const chartStyles = css`
|
|
|
850
823
|
}
|
|
851
824
|
|
|
852
825
|
:where([styled-mode]) .highcharts-navigator-series {
|
|
853
|
-
fill: var(--
|
|
854
|
-
stroke: var(--
|
|
826
|
+
fill: var(--_color-1);
|
|
827
|
+
stroke: var(--_color-1);
|
|
855
828
|
}
|
|
856
829
|
|
|
857
830
|
:where([styled-mode]) .highcharts-navigator-series .highcharts-graph {
|
|
@@ -991,11 +964,11 @@ export const chartStyles = css`
|
|
|
991
964
|
}
|
|
992
965
|
|
|
993
966
|
:where([styled-mode]) .highcharts-candlestick-series .highcharts-point-up {
|
|
994
|
-
fill: var(--
|
|
967
|
+
fill: var(--_color-positive);
|
|
995
968
|
}
|
|
996
969
|
|
|
997
970
|
:where([styled-mode]) .highcharts-candlestick-series .highcharts-point-down {
|
|
998
|
-
fill: var(--
|
|
971
|
+
fill: var(--_color-negative);
|
|
999
972
|
}
|
|
1000
973
|
|
|
1001
974
|
:where([styled-mode]) .highcharts-ohlc-series .highcharts-point-hover {
|
package/src/vaadin-chart.js
CHANGED
|
@@ -15,7 +15,7 @@ import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
|
|
|
15
15
|
import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
|
|
16
16
|
import { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
|
|
17
17
|
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
18
|
-
import { chartStyles } from './styles/vaadin-chart-
|
|
18
|
+
import { chartStyles } from './styles/vaadin-chart-base-styles.js';
|
|
19
19
|
import { ChartMixin } from './vaadin-chart-mixin.js';
|
|
20
20
|
|
|
21
21
|
/**
|
package/vaadin-chart.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import './
|
|
1
|
+
import './src/vaadin-chart.js';
|
|
2
2
|
export * from './src/vaadin-chart.js';
|
package/web-types.json
CHANGED
package/web-types.lit.json
CHANGED
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @license
|
|
3
|
-
* Copyright (c) 2000 - 2025 Vaadin Ltd.
|
|
4
|
-
*
|
|
5
|
-
* This program is available under Vaadin Commercial License and Service Terms.
|
|
6
|
-
*
|
|
7
|
-
*
|
|
8
|
-
* See https://vaadin.com/commercial-license-and-service-terms for the full
|
|
9
|
-
* license.
|
|
10
|
-
*/
|
|
11
|
-
import type { CSSResult } from 'lit';
|
|
12
|
-
|
|
13
|
-
export const chartStyles: CSSResult;
|