@siemens/ix-echarts 1.2.1 → 1.3.0-beta.0

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 (9) hide show
  1. package/dist/index.esm.js +61 -38
  2. package/dist/index.js +67 -38
  3. package/dist/types/index.d.ts +5 -1
  4. package/dist/types/register.d.ts +1 -1
  5. package/dist/types/themes/{brand-dark.project.d.ts → brand-dark.d.ts} +5 -0
  6. package/dist/types/themes/{brand-light.project.d.ts → brand-light.d.ts} +5 -0
  7. package/dist/types/themes/{classic-dark.project.d.ts → classic-dark.d.ts} +5 -0
  8. package/dist/types/themes/{classic-light.project.d.ts → classic-light.d.ts} +5 -0
  9. package/package.json +3 -3
package/dist/index.esm.js CHANGED
@@ -35,6 +35,11 @@ var brandDarkProject = {
35
35
  borderWidth: 0,
36
36
  visualMapColor: ['#ff2640', '#ff9000', '#ffd732'],
37
37
  legendTextColor: '#ffffff',
38
+ legend: {
39
+ textStyle: {
40
+ color: '#ffffff',
41
+ },
42
+ },
38
43
  kColor: '#fe0137',
39
44
  kColor0: '#40c200',
40
45
  kBorderColor: '#fe0137',
@@ -181,6 +186,11 @@ var brandLightProject = {
181
186
  borderWidth: 0,
182
187
  visualMapColor: ['#d72339', '#e96401', '#e9c32a'],
183
188
  legendTextColor: '#000028',
189
+ legend: {
190
+ textStyle: {
191
+ color: '#000028',
192
+ },
193
+ },
184
194
  kColor: '#d72339',
185
195
  kColor0: '#01893a',
186
196
  kBorderColor: '#d72339',
@@ -305,28 +315,33 @@ var classicDarkProject = {
305
315
  themeName: 'classic-dark',
306
316
  theme: {
307
317
  seriesCnt: 3,
308
- backgroundColor: 'transparent',
309
- titleColor: 'rgba(255,255,255,0.85)',
310
- subtitleColor: 'rgba(255,255,255,0.85)',
318
+ backgroundColor: 'rgba(0,0,0,0)',
319
+ titleColor: '#ffffff',
320
+ subtitleColor: '#ffffff',
311
321
  textColorShow: false,
312
322
  textColor: 'rgba(255,255,255,0.85)',
313
- markTextColor: '#ffffff',
323
+ markTextColor: '#000000',
314
324
  color: [
315
325
  '#00ebd5',
316
- '#42aaff',
317
- '#e446ff',
326
+ '#42b3ff',
327
+ '#dd65b5',
318
328
  '#86acc0',
319
329
  '#2473ff',
320
- '#759eff',
330
+ '#757eff',
321
331
  '#baba9d',
322
332
  '#009e78',
323
333
  '#ffb180',
324
334
  '#b5bd00',
325
335
  ],
326
- borderColor: 'rgba(255,255,255,0.45)',
336
+ borderColor: '#ffffff',
327
337
  borderWidth: 0,
328
338
  visualMapColor: ['#fe0137', '#eb780a', '#ffb900'],
329
- legendTextColor: 'rgba(255,255,255,0.85)',
339
+ legendTextColor: '#ffffff',
340
+ legend: {
341
+ textStyle: {
342
+ color: '#ffffff',
343
+ },
344
+ },
330
345
  kColor: '#fe0137',
331
346
  kColor0: '#40c200',
332
347
  kBorderColor: '#fe0137',
@@ -338,7 +353,7 @@ var classicDarkProject = {
338
353
  symbolBorderWidth: 1,
339
354
  lineSmooth: false,
340
355
  graphLineWidth: '1',
341
- graphLineColor: 'rgba(255,255,255,0.6)',
356
+ graphLineColor: '#ffffff',
342
357
  mapLabelColor: '#000',
343
358
  mapLabelColorE: 'rgb(100,0,0)',
344
359
  mapBorderColor: '#444',
@@ -420,21 +435,21 @@ var classicDarkProject = {
420
435
  },
421
436
  ],
422
437
  axisSeperateSetting: false,
423
- toolboxColor: 'rgba(255,255,255,0.6)',
438
+ toolboxColor: '#ffffff',
424
439
  toolboxEmphasisColor: '#ffffff',
425
- tooltipAxisColor: 'rgba(255,255,255,0.3)',
440
+ tooltipAxisColor: '#ffffff',
426
441
  tooltipAxisWidth: '1',
427
- timelineLineColor: 'rgba(0,0,0,0)',
442
+ timelineLineColor: 'transparent',
428
443
  timelineLineWidth: '1',
429
- timelineItemColor: 'rgba(255,255,255,0.35)',
430
- timelineItemColorE: 'rgba(255,255,255,0.6)',
444
+ timelineItemColor: '#ffffff',
445
+ timelineItemColorE: '#ffffff',
431
446
  timelineCheckColor: '#41aaaa',
432
- timelineCheckBorderColor: 'rgba(0,0,0,0)',
447
+ timelineCheckBorderColor: 'transparent',
433
448
  timelineItemBorderWidth: '1',
434
449
  timelineControlColor: '#41aaaa',
435
450
  timelineControlBorderColor: '#41aaaa',
436
451
  timelineControlBorderWidth: '1',
437
- timelineLabelColor: 'rgba(255,255,255,0.3)',
452
+ timelineLabelColor: '#ffffff',
438
453
  },
439
454
  };
440
455
 
@@ -451,28 +466,33 @@ var classicLightProject = {
451
466
  themeName: 'classic-light',
452
467
  theme: {
453
468
  seriesCnt: 3,
454
- backgroundColor: 'transparent',
455
- titleColor: 'rgba(0,0,0,0.75)',
456
- subtitleColor: 'rgba(0,0,0,0.75)',
469
+ backgroundColor: 'rgba(0,0,0,0)',
470
+ titleColor: '#000000',
471
+ subtitleColor: '#000000',
457
472
  textColorShow: false,
458
473
  textColor: 'rgba(0,0,0,0.75)',
459
- markTextColor: '#000000',
474
+ markTextColor: '#ffffff',
460
475
  color: [
461
476
  '#00b8a6',
462
- '#1d86dc',
463
- '#a207bd',
477
+ '#0094f0',
478
+ '#b63b8c',
464
479
  '#617d8c',
465
480
  '#2351a4',
466
- '#5581e7',
481
+ '#5560ff',
467
482
  '#94947b',
468
483
  '#007362',
469
484
  '#dd886a',
470
485
  '#909700',
471
486
  ],
472
- borderColor: 'rgba(0,0,0,0.3)',
487
+ borderColor: '#000000',
473
488
  borderWidth: 0,
474
489
  visualMapColor: ['#dc0031', '#ff8d00', '#f0b800'],
475
- legendTextColor: 'rgba(0,0,0,0.75)',
490
+ legendTextColor: '#000000',
491
+ legend: {
492
+ textStyle: {
493
+ color: '#000000',
494
+ },
495
+ },
476
496
  kColor: '#dc0031',
477
497
  kColor0: '#339b00',
478
498
  kBorderColor: '#dc0031',
@@ -484,8 +504,8 @@ var classicLightProject = {
484
504
  symbolBorderWidth: 1,
485
505
  lineSmooth: false,
486
506
  graphLineWidth: '1',
487
- graphLineColor: 'rgba(0,0,0,0.6)',
488
- mapLabelColor: '#000',
507
+ graphLineColor: '#000000',
508
+ mapLabelColor: '#fff',
489
509
  mapLabelColorE: 'rgb(100,0,0)',
490
510
  mapBorderColor: '#444',
491
511
  mapBorderColorE: '#444',
@@ -566,21 +586,21 @@ var classicLightProject = {
566
586
  },
567
587
  ],
568
588
  axisSeperateSetting: false,
569
- toolboxColor: 'rgba(0,0,0,0.3)',
570
- toolboxEmphasisColor: 'rgba(0,0,0,0.75)',
571
- tooltipAxisColor: 'rgba(0,0,0,0.3)',
589
+ toolboxColor: '#000000',
590
+ toolboxEmphasisColor: '#000000',
591
+ tooltipAxisColor: '#000000',
572
592
  tooltipAxisWidth: '1',
573
- timelineLineColor: 'rgba(0,0,0,0)',
593
+ timelineLineColor: 'transparent',
574
594
  timelineLineWidth: '1',
575
- timelineItemColor: 'rgba(0,0,0,0.3)',
576
- timelineItemColorE: 'rgba(0,0,0,0.6)',
595
+ timelineItemColor: '#000000',
596
+ timelineItemColorE: '#000000',
577
597
  timelineCheckColor: '#0e777c',
578
598
  timelineCheckBorderColor: '#ffffff',
579
599
  timelineItemBorderWidth: '1',
580
600
  timelineControlColor: '#0e777c',
581
601
  timelineControlBorderColor: '#0e777c',
582
602
  timelineControlBorderWidth: '1',
583
- timelineLabelColor: 'rgba(0,0,0,0.3)',
603
+ timelineLabelColor: '#000000',
584
604
  },
585
605
  };
586
606
 
@@ -592,8 +612,9 @@ var classicLightProject = {
592
612
  * This source code is licensed under the MIT license found in the
593
613
  * LICENSE file in the root directory of this source tree.
594
614
  */
595
- function registerEChartsThemes() {
596
- if (echarts === undefined) {
615
+ function registerEChartsThemes(echartsInstance) {
616
+ const chart = echartsInstance !== null && echartsInstance !== void 0 ? echartsInstance : echarts;
617
+ if (chart === undefined) {
597
618
  console.error('echarts not found!');
598
619
  }
599
620
  [
@@ -602,7 +623,7 @@ function registerEChartsThemes() {
602
623
  brandDarkProject,
603
624
  brandLightProject,
604
625
  ].forEach((themeBundle) => {
605
- echarts.registerTheme(themeBundle.themeName, themeBundle.theme);
626
+ chart.registerTheme(themeBundle.themeName, themeBundle.theme);
606
627
  });
607
628
  }
608
629
 
@@ -615,3 +636,5 @@ function registerEChartsThemes() {
615
636
  * LICENSE file in the root directory of this source tree.
616
637
  */
617
638
  registerEChartsThemes();
639
+
640
+ export { brandDarkProject as brandDark, brandLightProject as brandLight, classicDarkProject as classicDark, classicLightProject as classicLight, registerEChartsThemes as registerTheme };
package/dist/index.js CHANGED
@@ -1,5 +1,7 @@
1
1
  'use strict';
2
2
 
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
3
5
  const echarts = require('echarts');
4
6
 
5
7
  function _interopNamespace(e) {
@@ -57,6 +59,11 @@ const brandDarkProject = {
57
59
  borderWidth: 0,
58
60
  visualMapColor: ['#ff2640', '#ff9000', '#ffd732'],
59
61
  legendTextColor: '#ffffff',
62
+ legend: {
63
+ textStyle: {
64
+ color: '#ffffff',
65
+ },
66
+ },
60
67
  kColor: '#fe0137',
61
68
  kColor0: '#40c200',
62
69
  kBorderColor: '#fe0137',
@@ -203,6 +210,11 @@ const brandLightProject = {
203
210
  borderWidth: 0,
204
211
  visualMapColor: ['#d72339', '#e96401', '#e9c32a'],
205
212
  legendTextColor: '#000028',
213
+ legend: {
214
+ textStyle: {
215
+ color: '#000028',
216
+ },
217
+ },
206
218
  kColor: '#d72339',
207
219
  kColor0: '#01893a',
208
220
  kBorderColor: '#d72339',
@@ -327,28 +339,33 @@ const classicDarkProject = {
327
339
  themeName: 'classic-dark',
328
340
  theme: {
329
341
  seriesCnt: 3,
330
- backgroundColor: 'transparent',
331
- titleColor: 'rgba(255,255,255,0.85)',
332
- subtitleColor: 'rgba(255,255,255,0.85)',
342
+ backgroundColor: 'rgba(0,0,0,0)',
343
+ titleColor: '#ffffff',
344
+ subtitleColor: '#ffffff',
333
345
  textColorShow: false,
334
346
  textColor: 'rgba(255,255,255,0.85)',
335
- markTextColor: '#ffffff',
347
+ markTextColor: '#000000',
336
348
  color: [
337
349
  '#00ebd5',
338
- '#42aaff',
339
- '#e446ff',
350
+ '#42b3ff',
351
+ '#dd65b5',
340
352
  '#86acc0',
341
353
  '#2473ff',
342
- '#759eff',
354
+ '#757eff',
343
355
  '#baba9d',
344
356
  '#009e78',
345
357
  '#ffb180',
346
358
  '#b5bd00',
347
359
  ],
348
- borderColor: 'rgba(255,255,255,0.45)',
360
+ borderColor: '#ffffff',
349
361
  borderWidth: 0,
350
362
  visualMapColor: ['#fe0137', '#eb780a', '#ffb900'],
351
- legendTextColor: 'rgba(255,255,255,0.85)',
363
+ legendTextColor: '#ffffff',
364
+ legend: {
365
+ textStyle: {
366
+ color: '#ffffff',
367
+ },
368
+ },
352
369
  kColor: '#fe0137',
353
370
  kColor0: '#40c200',
354
371
  kBorderColor: '#fe0137',
@@ -360,7 +377,7 @@ const classicDarkProject = {
360
377
  symbolBorderWidth: 1,
361
378
  lineSmooth: false,
362
379
  graphLineWidth: '1',
363
- graphLineColor: 'rgba(255,255,255,0.6)',
380
+ graphLineColor: '#ffffff',
364
381
  mapLabelColor: '#000',
365
382
  mapLabelColorE: 'rgb(100,0,0)',
366
383
  mapBorderColor: '#444',
@@ -442,21 +459,21 @@ const classicDarkProject = {
442
459
  },
443
460
  ],
444
461
  axisSeperateSetting: false,
445
- toolboxColor: 'rgba(255,255,255,0.6)',
462
+ toolboxColor: '#ffffff',
446
463
  toolboxEmphasisColor: '#ffffff',
447
- tooltipAxisColor: 'rgba(255,255,255,0.3)',
464
+ tooltipAxisColor: '#ffffff',
448
465
  tooltipAxisWidth: '1',
449
- timelineLineColor: 'rgba(0,0,0,0)',
466
+ timelineLineColor: 'transparent',
450
467
  timelineLineWidth: '1',
451
- timelineItemColor: 'rgba(255,255,255,0.35)',
452
- timelineItemColorE: 'rgba(255,255,255,0.6)',
468
+ timelineItemColor: '#ffffff',
469
+ timelineItemColorE: '#ffffff',
453
470
  timelineCheckColor: '#41aaaa',
454
- timelineCheckBorderColor: 'rgba(0,0,0,0)',
471
+ timelineCheckBorderColor: 'transparent',
455
472
  timelineItemBorderWidth: '1',
456
473
  timelineControlColor: '#41aaaa',
457
474
  timelineControlBorderColor: '#41aaaa',
458
475
  timelineControlBorderWidth: '1',
459
- timelineLabelColor: 'rgba(255,255,255,0.3)',
476
+ timelineLabelColor: '#ffffff',
460
477
  },
461
478
  };
462
479
 
@@ -473,28 +490,33 @@ const classicLightProject = {
473
490
  themeName: 'classic-light',
474
491
  theme: {
475
492
  seriesCnt: 3,
476
- backgroundColor: 'transparent',
477
- titleColor: 'rgba(0,0,0,0.75)',
478
- subtitleColor: 'rgba(0,0,0,0.75)',
493
+ backgroundColor: 'rgba(0,0,0,0)',
494
+ titleColor: '#000000',
495
+ subtitleColor: '#000000',
479
496
  textColorShow: false,
480
497
  textColor: 'rgba(0,0,0,0.75)',
481
- markTextColor: '#000000',
498
+ markTextColor: '#ffffff',
482
499
  color: [
483
500
  '#00b8a6',
484
- '#1d86dc',
485
- '#a207bd',
501
+ '#0094f0',
502
+ '#b63b8c',
486
503
  '#617d8c',
487
504
  '#2351a4',
488
- '#5581e7',
505
+ '#5560ff',
489
506
  '#94947b',
490
507
  '#007362',
491
508
  '#dd886a',
492
509
  '#909700',
493
510
  ],
494
- borderColor: 'rgba(0,0,0,0.3)',
511
+ borderColor: '#000000',
495
512
  borderWidth: 0,
496
513
  visualMapColor: ['#dc0031', '#ff8d00', '#f0b800'],
497
- legendTextColor: 'rgba(0,0,0,0.75)',
514
+ legendTextColor: '#000000',
515
+ legend: {
516
+ textStyle: {
517
+ color: '#000000',
518
+ },
519
+ },
498
520
  kColor: '#dc0031',
499
521
  kColor0: '#339b00',
500
522
  kBorderColor: '#dc0031',
@@ -506,8 +528,8 @@ const classicLightProject = {
506
528
  symbolBorderWidth: 1,
507
529
  lineSmooth: false,
508
530
  graphLineWidth: '1',
509
- graphLineColor: 'rgba(0,0,0,0.6)',
510
- mapLabelColor: '#000',
531
+ graphLineColor: '#000000',
532
+ mapLabelColor: '#fff',
511
533
  mapLabelColorE: 'rgb(100,0,0)',
512
534
  mapBorderColor: '#444',
513
535
  mapBorderColorE: '#444',
@@ -588,21 +610,21 @@ const classicLightProject = {
588
610
  },
589
611
  ],
590
612
  axisSeperateSetting: false,
591
- toolboxColor: 'rgba(0,0,0,0.3)',
592
- toolboxEmphasisColor: 'rgba(0,0,0,0.75)',
593
- tooltipAxisColor: 'rgba(0,0,0,0.3)',
613
+ toolboxColor: '#000000',
614
+ toolboxEmphasisColor: '#000000',
615
+ tooltipAxisColor: '#000000',
594
616
  tooltipAxisWidth: '1',
595
- timelineLineColor: 'rgba(0,0,0,0)',
617
+ timelineLineColor: 'transparent',
596
618
  timelineLineWidth: '1',
597
- timelineItemColor: 'rgba(0,0,0,0.3)',
598
- timelineItemColorE: 'rgba(0,0,0,0.6)',
619
+ timelineItemColor: '#000000',
620
+ timelineItemColorE: '#000000',
599
621
  timelineCheckColor: '#0e777c',
600
622
  timelineCheckBorderColor: '#ffffff',
601
623
  timelineItemBorderWidth: '1',
602
624
  timelineControlColor: '#0e777c',
603
625
  timelineControlBorderColor: '#0e777c',
604
626
  timelineControlBorderWidth: '1',
605
- timelineLabelColor: 'rgba(0,0,0,0.3)',
627
+ timelineLabelColor: '#000000',
606
628
  },
607
629
  };
608
630
 
@@ -614,8 +636,9 @@ const classicLightProject = {
614
636
  * This source code is licensed under the MIT license found in the
615
637
  * LICENSE file in the root directory of this source tree.
616
638
  */
617
- function registerEChartsThemes() {
618
- if (echarts__namespace === undefined) {
639
+ function registerEChartsThemes(echartsInstance) {
640
+ const chart = echartsInstance !== null && echartsInstance !== void 0 ? echartsInstance : echarts__namespace;
641
+ if (chart === undefined) {
619
642
  console.error('echarts not found!');
620
643
  }
621
644
  [
@@ -624,7 +647,7 @@ function registerEChartsThemes() {
624
647
  brandDarkProject,
625
648
  brandLightProject,
626
649
  ].forEach((themeBundle) => {
627
- echarts__namespace.registerTheme(themeBundle.themeName, themeBundle.theme);
650
+ chart.registerTheme(themeBundle.themeName, themeBundle.theme);
628
651
  });
629
652
  }
630
653
 
@@ -637,3 +660,9 @@ function registerEChartsThemes() {
637
660
  * LICENSE file in the root directory of this source tree.
638
661
  */
639
662
  registerEChartsThemes();
663
+
664
+ exports.brandDark = brandDarkProject;
665
+ exports.brandLight = brandLightProject;
666
+ exports.classicDark = classicDarkProject;
667
+ exports.classicLight = classicLightProject;
668
+ exports.registerTheme = registerEChartsThemes;
package/dist/types/index.d.ts CHANGED
@@ -1 +1,5 @@
1
- export {};
1
+ export { default as registerTheme } from './register';
2
+ export { default as brandDark } from './themes/brand-dark';
3
+ export { default as brandLight } from './themes/brand-light';
4
+ export { default as classicDark } from './themes/classic-dark';
5
+ export { default as classicLight } from './themes/classic-light';
package/dist/types/register.d.ts CHANGED
@@ -1 +1 @@
1
- export default function registerEChartsThemes(): void;
1
+ export default function registerEChartsThemes(echartsInstance?: any): void;
package/dist/types/themes/{brand-dark.project.d.ts → brand-dark.d.ts} RENAMED
@@ -14,6 +14,11 @@ declare const _default: {
14
14
  borderWidth: number;
15
15
  visualMapColor: string[];
16
16
  legendTextColor: string;
17
+ legend: {
18
+ textStyle: {
19
+ color: string;
20
+ };
21
+ };
17
22
  kColor: string;
18
23
  kColor0: string;
19
24
  kBorderColor: string;
package/dist/types/themes/{brand-light.project.d.ts → brand-light.d.ts} RENAMED
@@ -14,6 +14,11 @@ declare const _default: {
14
14
  borderWidth: number;
15
15
  visualMapColor: string[];
16
16
  legendTextColor: string;
17
+ legend: {
18
+ textStyle: {
19
+ color: string;
20
+ };
21
+ };
17
22
  kColor: string;
18
23
  kColor0: string;
19
24
  kBorderColor: string;
package/dist/types/themes/{classic-dark.project.d.ts → classic-dark.d.ts} RENAMED
@@ -14,6 +14,11 @@ declare const _default: {
14
14
  borderWidth: number;
15
15
  visualMapColor: string[];
16
16
  legendTextColor: string;
17
+ legend: {
18
+ textStyle: {
19
+ color: string;
20
+ };
21
+ };
17
22
  kColor: string;
18
23
  kColor0: string;
19
24
  kBorderColor: string;
package/dist/types/themes/{classic-light.project.d.ts → classic-light.d.ts} RENAMED
@@ -14,6 +14,11 @@ declare const _default: {
14
14
  borderWidth: number;
15
15
  visualMapColor: string[];
16
16
  legendTextColor: string;
17
+ legend: {
18
+ textStyle: {
19
+ color: string;
20
+ };
21
+ };
17
22
  kColor: string;
18
23
  kColor0: string;
19
24
  kBorderColor: string;
package/package.json CHANGED
@@ -7,7 +7,7 @@
7
7
  "url": "https://github.com/siemens/ix",
8
8
  "directory": "packages/echarts"
9
9
  },
10
- "version": "1.2.1",
10
+ "version": "1.3.0-beta.0",
11
11
  "description": "Siemens iX theme for echarts",
12
12
  "main": "dist/index.js",
13
13
  "module": "dist/index.esm.js",
@@ -24,14 +24,14 @@
24
24
  "license": "MIT",
25
25
  "devDependencies": {
26
26
  "@rollup/plugin-typescript": "^8.4.0",
27
+ "echarts": "^5.4.1",
27
28
  "rimraf": "^3.0.2",
28
29
  "rollup": "^2.78.1",
29
30
  "rollup-plugin-dts": "^4.2.0",
30
31
  "rollup-plugin-peer-deps-external": "^2.2.4",
31
32
  "rollup-plugin-sourcemaps": "^0.6.3",
32
33
  "rollup-plugin-terser": "^7.0.2",
33
- "typescript": "^4.5.5",
34
- "echarts": "^5.3.3"
34
+ "typescript": "^4.5.5"
35
35
  },
36
36
  "dependencies": {},
37
37
  "peerDependencies": {