fix(echart): align echarts colors to themes (#1604)

Co-authored-by: Lukas Maurer <[email protected]> Co-authored-by: Julian Lamplmair <[email protected]>
siemens · Dec 16, 2024 · 7ef10e3 · 7ef10e3
1 parent e6bbb44
commit 7ef10e3
Show file tree

Hide file tree

Showing 20 changed files with 540 additions and 292 deletions.
diff --git a/.changeset/weak-singers-cover.md b/.changeset/weak-singers-cover.md
@@ -0,0 +1,5 @@
+---
+"@siemens/ix-echarts": patch
+---
+
+Update **ECharts** theme chart colors.
diff --git a/packages/angular-test-app/src/preview-examples/echarts.ts b/packages/angular-test-app/src/preview-examples/echarts.ts
@@ -16,7 +16,7 @@ import { EChartsOption } from 'echarts';
 @Component({
   selector: 'app-example',
   templateUrl: './echarts.html',
-  styleUrls: ["./echarts.css"],
+  styleUrls: ['./echarts.css'],
 })
 export default class Echarts implements OnInit {
   theme = convertThemeName(themeSwitcher.getCurrentTheme());

diff --git a/packages/echarts/src/themes/brand-dark.ts b/packages/echarts/src/themes/brand-dark.ts
@@ -7,21 +7,30 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+const colors = [
+  '#00C1B6' /* theme-chart-3 */,
+  '#85E9D2' /* theme-chart-2 */,
+  '#3664C6' /* theme-chart-8 */,
+  '#00FFB9' /* theme-chart-1 */,
+  '#6895F6' /* theme-chart-6 */,
+  '#CCF5F5' /* theme-chart-4 */,
+  '#805CFF' /* theme-chart-10 */,
+  '#BFB0F3' /* theme-chart-9 */,
+  '#B95CC9' /* theme-chart-11 */,
+  '#BE5925' /* theme-chart-14 */,
+  '#FF98C4' /* theme-chart-13 */,
+  '#E5659B' /* theme-chart-12 */,
+  '#97C7FF' /* theme-chart-7 */,
+  '#FFBC66' /* theme-chart-15 */,
+  '#FFF7D6' /* theme-chart-16 */,
+  '#AAAA96' /* theme-chart-17 */,
+  '#FFBC66' /* theme-chart-5 */,
+];
+
 export default {
   themeName: 'brand-dark',
   theme: {
-    color: [
-      '#00ffb9',
-      '#41b7e6',
-      '#cd31e7',
-      '#b3b3be',
-      '#0087be',
-      '#86a0f6',
-      '#baba9d',
-      '#009e78',
-      '#ffb180',
-      '#b5bd00',
-    ],
+    color: colors,
     backgroundColor: 'rgba(0,0,0,0)',
     textStyle: {},
     title: {
@@ -123,18 +132,7 @@ export default {
       symbolSize: 4,
       symbol: 'emptyCircle',
       smooth: false,
-      color: [
-        '#00ffb9',
-        '#41b7e6',
-        '#cd31e7',
-        '#b3b3be',
-        '#0087be',
-        '#86a0f6',
-        '#baba9d',
-        '#009e78',
-        '#ffb180',
-        '#b5bd00',
-      ],
+      color: colors,
       label: {
         color: '#000000',
       },

diff --git a/packages/echarts/src/themes/brand-light.ts b/packages/echarts/src/themes/brand-light.ts
@@ -7,21 +7,30 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+const colors = [
+  '#009999' /* theme-chart-3 */,
+  '#005159' /* theme-chart-2 */,
+  '#00004A' /* theme-chart-8 */,
+  '#1A747D' /* theme-chart-1 */,
+  '#3664C6' /* theme-chart-6 */,
+  '#002949' /* theme-chart-4 */,
+  '#7353E5' /* theme-chart-10 */,
+  '#553BA3' /* theme-chart-9 */,
+  '#740089' /* theme-chart-11 */,
+  '#BE5925' /* theme-chart-14 */,
+  '#4F153D' /* theme-chart-13 */,
+  '#C04774' /* theme-chart-12 */,
+  '#00237A' /* theme-chart-7 */,
+  '#801100' /* theme-chart-15 */,
+  '#805800' /* theme-chart-16 */,
+  '#5E5E4A' /* theme-chart-17 */,
+  '#801100' /* theme-chart-5 */,
+];
+
 export default {
   themeName: 'brand-light',
   theme: {
-    color: [
-      '#00af8e',
-      '#0087be',
-      '#aa32be',
-      '#71758f',
-      '#00557c',
-      '#4660b4',
-      '#94947b',
-      '#007362',
-      '#dd886a',
-      '#909700',
-    ],
+    color: colors,
     backgroundColor: 'rgba(0,0,0,0)',
     textStyle: {},
     title: {
@@ -123,18 +132,7 @@ export default {
       symbolSize: 4,
       symbol: 'circle',
       smooth: false,
-      color: [
-        '#00af8e',
-        '#0087be',
-        '#aa32be',
-        '#71758f',
-        '#00557c',
-        '#4660b4',
-        '#94947b',
-        '#007362',
-        '#dd886a',
-        '#909700',
-      ],
+      color: colors,
       label: {
         color: '#ffffff',
       },

diff --git a/packages/echarts/src/themes/builder/brand-dark-tb.json b/packages/echarts/src/themes/builder/brand-dark-tb.json
@@ -10,16 +10,23 @@
     "textColor": "#ffffff",
     "markTextColor": "#000000",
     "color": [
-      "#00ffb9",
-      "#41b7e6",
-      "#cd31e7",
-      "#b3b3be",
-      "#0087be",
-      "#86a0f6",
-      "#baba9d",
-      "#009e78",
-      "#ffb180",
-      "#b5bd00"
+      "#00C1B6",
+      "#85E9D2",
+      "#3664C6",
+      "#00FFB9",
+      "#6895F6",
+      "#CCF5F5",
+      "#805CFF",
+      "#BFB0F3",
+      "#B95CC9",
+      "#BE5925",
+      "#FF98C4",
+      "#E5659B",
+      "#97C7FF",
+      "#FFBC66",
+      "#FFF7D6",
+      "#AAAA96",
+      "#FFBC66"
     ],
     "borderColor": "#ffffff",
     "borderWidth": 0,

diff --git a/packages/echarts/src/themes/builder/brand-light-tb.json b/packages/echarts/src/themes/builder/brand-light-tb.json
@@ -10,16 +10,23 @@
     "textColor": "#000028",
     "markTextColor": "#ffffff",
     "color": [
-      "#00af8e",
-      "#0087be",
-      "#aa32be",
-      "#71758f",
-      "#00557c",
-      "#4660b4",
-      "#94947b",
-      "#007362",
-      "#dd886a",
-      "#909700"
+      "#009999",
+      "#005159",
+      "#00004A",
+      "#1A747D",
+      "#3664C6",
+      "#002949",
+      "#7353E5",
+      "#553BA3",
+      "#740089",
+      "#BE5925",
+      "#4F153D",
+      "#C04774",
+      "#00237A",
+      "#801100",
+      "#805800",
+      "#5E5E4A",
+      "#801100"
     ],
     "borderColor": "#000028",
     "borderWidth": 0,