fix(echarts): update theme colors (#281)

siemens · Jan 13, 2023 · 8a0cbff · 8a0cbff
1 parent 9ccddb1
commit 8a0cbff
Show file tree

Hide file tree

Showing 9 changed files with 102 additions and 56 deletions.
diff --git a/packages/echarts/package.json b/packages/echarts/package.json
@@ -24,14 +24,14 @@
   "license": "MIT",
   "devDependencies": {
     "@rollup/plugin-typescript": "^8.4.0",
+    "echarts": "^5.4.1",
     "rimraf": "^3.0.2",
     "rollup": "^2.78.1",
     "rollup-plugin-dts": "^4.2.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-sourcemaps": "^0.6.3",
     "rollup-plugin-terser": "^7.0.2",
-    "typescript": "^4.5.5",
-    "echarts": "^5.3.3"
+    "typescript": "^4.5.5"
   },
   "dependencies": {},
   "peerDependencies": {

diff --git a/packages/echarts/src/index.ts b/packages/echarts/src/index.ts
@@ -7,5 +7,10 @@
  * LICENSE file in the root directory of this source tree.
  */
 import registerEChartsThemes from './register';
+export { default as registerTheme } from './register';
+export { default as brandDark } from './themes/brand-dark';
+export { default as brandLight } from './themes/brand-light';
+export { default as classicDark } from './themes/classic-dark';
+export { default as classicLight } from './themes/classic-light';
 
 registerEChartsThemes();
diff --git a/packages/echarts/src/register.ts b/packages/echarts/src/register.ts
@@ -7,13 +7,14 @@
  * LICENSE file in the root directory of this source tree.
  */
 import * as echarts from 'echarts';
-import brandDarkProject from './themes/brand-dark.project';
-import brandLightProject from './themes/brand-light.project';
-import classicDarkProject from './themes/classic-dark.project';
-import classicLightProject from './themes/classic-light.project';
+import brandDarkProject from './themes/brand-dark';
+import brandLightProject from './themes/brand-light';
+import classicDarkProject from './themes/classic-dark';
+import classicLightProject from './themes/classic-light';
 
-export default function registerEChartsThemes() {
-  if (echarts === undefined) {
+export default function registerEChartsThemes(echartsInstance?: any) {
+  const chart = echartsInstance ?? echarts;
+  if (chart === undefined) {
     console.error('echarts not found!');
   }
 
@@ -23,6 +24,6 @@ export default function registerEChartsThemes() {
     brandDarkProject,
     brandLightProject,
   ].forEach((themeBundle) => {
-    echarts.registerTheme(themeBundle.themeName, themeBundle.theme);
+    chart.registerTheme(themeBundle.themeName, themeBundle.theme);
   });
 }
diff --git a/.../echarts/src/themes/brand-dark.project.ts → packages/echarts/src/themes/brand-dark.ts b/.../echarts/src/themes/brand-dark.project.ts → packages/echarts/src/themes/brand-dark.ts
@@ -33,6 +33,11 @@ export default {
     borderWidth: 0,
     visualMapColor: ['#ff2640', '#ff9000', '#ffd732'],
     legendTextColor: '#ffffff',
+    legend: {
+      textStyle: {
+        color: '#ffffff',
+      },
+    },
     kColor: '#fe0137',
     kColor0: '#40c200',
     kBorderColor: '#fe0137',

diff --git a/...echarts/src/themes/brand-light.project.ts → packages/echarts/src/themes/brand-light.ts b/...echarts/src/themes/brand-light.project.ts → packages/echarts/src/themes/brand-light.ts
@@ -33,6 +33,11 @@ export default {
     borderWidth: 0,
     visualMapColor: ['#d72339', '#e96401', '#e9c32a'],
     legendTextColor: '#000028',
+    legend: {
+      textStyle: {
+        color: '#000028',
+      },
+    },
     kColor: '#d72339',
     kColor0: '#01893a',
     kBorderColor: '#d72339',

diff --git a/...charts/src/themes/classic-dark.project.ts → packages/echarts/src/themes/classic-dark.ts b/...charts/src/themes/classic-dark.project.ts → packages/echarts/src/themes/classic-dark.ts
@@ -11,28 +11,33 @@ export default {
   themeName: 'classic-dark',
   theme: {
     seriesCnt: 3,
-    backgroundColor: 'transparent',
-    titleColor: 'rgba(255,255,255,0.85)',
-    subtitleColor: 'rgba(255,255,255,0.85)',
+    backgroundColor: 'rgba(0,0,0,0)',
+    titleColor: '#ffffff',
+    subtitleColor: '#ffffff',
     textColorShow: false,
     textColor: 'rgba(255,255,255,0.85)',
-    markTextColor: '#ffffff',
+    markTextColor: '#000000',
     color: [
       '#00ebd5',
-      '#42aaff',
-      '#e446ff',
+      '#42b3ff',
+      '#dd65b5',
       '#86acc0',
       '#2473ff',
-      '#759eff',
+      '#757eff',
       '#baba9d',
       '#009e78',
       '#ffb180',
       '#b5bd00',
     ],
-    borderColor: 'rgba(255,255,255,0.45)',
+    borderColor: '#ffffff',
     borderWidth: 0,
     visualMapColor: ['#fe0137', '#eb780a', '#ffb900'],
-    legendTextColor: 'rgba(255,255,255,0.85)',
+    legendTextColor: '#ffffff',
+    legend: {
+      textStyle: {
+        color: '#ffffff',
+      },
+    },
     kColor: '#fe0137',
     kColor0: '#40c200',
     kBorderColor: '#fe0137',
@@ -44,7 +49,7 @@ export default {
     symbolBorderWidth: 1,
     lineSmooth: false,
     graphLineWidth: '1',
-    graphLineColor: 'rgba(255,255,255,0.6)',
+    graphLineColor: '#ffffff',
     mapLabelColor: '#000',
     mapLabelColorE: 'rgb(100,0,0)',
     mapBorderColor: '#444',
@@ -126,20 +131,20 @@ export default {
       },
     ],
     axisSeperateSetting: false,
-    toolboxColor: 'rgba(255,255,255,0.6)',
+    toolboxColor: '#ffffff',
     toolboxEmphasisColor: '#ffffff',
-    tooltipAxisColor: 'rgba(255,255,255,0.3)',
+    tooltipAxisColor: '#ffffff',
     tooltipAxisWidth: '1',
-    timelineLineColor: 'rgba(0,0,0,0)',
+    timelineLineColor: 'transparent',
     timelineLineWidth: '1',
-    timelineItemColor: 'rgba(255,255,255,0.35)',
-    timelineItemColorE: 'rgba(255,255,255,0.6)',
+    timelineItemColor: '#ffffff',
+    timelineItemColorE: '#ffffff',
     timelineCheckColor: '#41aaaa',
-    timelineCheckBorderColor: 'rgba(0,0,0,0)',
+    timelineCheckBorderColor: 'transparent',
     timelineItemBorderWidth: '1',
     timelineControlColor: '#41aaaa',
     timelineControlBorderColor: '#41aaaa',
     timelineControlBorderWidth: '1',
-    timelineLabelColor: 'rgba(255,255,255,0.3)',
+    timelineLabelColor: '#ffffff',
   },
 };
diff --git a/...harts/src/themes/classic-light.project.ts → packages/echarts/src/themes/classic-light.ts b/...harts/src/themes/classic-light.project.ts → packages/echarts/src/themes/classic-light.ts
@@ -11,28 +11,33 @@ export default {
   themeName: 'classic-light',
   theme: {
     seriesCnt: 3,
-    backgroundColor: 'transparent',
-    titleColor: 'rgba(0,0,0,0.75)',
-    subtitleColor: 'rgba(0,0,0,0.75)',
+    backgroundColor: 'rgba(0,0,0,0)',
+    titleColor: '#000000',
+    subtitleColor: '#000000',
     textColorShow: false,
     textColor: 'rgba(0,0,0,0.75)',
-    markTextColor: '#000000',
+    markTextColor: '#ffffff',
     color: [
       '#00b8a6',
-      '#1d86dc',
-      '#a207bd',
+      '#0094f0',
+      '#b63b8c',
       '#617d8c',
       '#2351a4',
-      '#5581e7',
+      '#5560ff',
       '#94947b',
       '#007362',
       '#dd886a',
       '#909700',
     ],
-    borderColor: 'rgba(0,0,0,0.3)',
+    borderColor: '#000000',
     borderWidth: 0,
     visualMapColor: ['#dc0031', '#ff8d00', '#f0b800'],
-    legendTextColor: 'rgba(0,0,0,0.75)',
+    legendTextColor: '#000000',
+    legend: {
+      textStyle: {
+        color: '#000000',
+      },
+    },
     kColor: '#dc0031',
     kColor0: '#339b00',
     kBorderColor: '#dc0031',
@@ -44,8 +49,8 @@ export default {
     symbolBorderWidth: 1,
     lineSmooth: false,
     graphLineWidth: '1',
-    graphLineColor: 'rgba(0,0,0,0.6)',
-    mapLabelColor: '#000',
+    graphLineColor: '#000000',
+    mapLabelColor: '#fff',
     mapLabelColorE: 'rgb(100,0,0)',
     mapBorderColor: '#444',
     mapBorderColorE: '#444',
@@ -126,20 +131,20 @@ export default {
       },
     ],
     axisSeperateSetting: false,
-    toolboxColor: 'rgba(0,0,0,0.3)',
-    toolboxEmphasisColor: 'rgba(0,0,0,0.75)',
-    tooltipAxisColor: 'rgba(0,0,0,0.3)',
+    toolboxColor: '#000000',
+    toolboxEmphasisColor: '#000000',
+    tooltipAxisColor: '#000000',
     tooltipAxisWidth: '1',
-    timelineLineColor: 'rgba(0,0,0,0)',
+    timelineLineColor: 'transparent',
     timelineLineWidth: '1',
-    timelineItemColor: 'rgba(0,0,0,0.3)',
-    timelineItemColorE: 'rgba(0,0,0,0.6)',
+    timelineItemColor: '#000000',
+    timelineItemColorE: '#000000',
     timelineCheckColor: '#0e777c',
     timelineCheckBorderColor: '#ffffff',
     timelineItemBorderWidth: '1',
     timelineControlColor: '#0e777c',
     timelineControlBorderColor: '#0e777c',
     timelineControlBorderWidth: '1',
-    timelineLabelColor: 'rgba(0,0,0,0.3)',
+    timelineLabelColor: '#000000',
   },
 };
diff --git a/packages/html-test-app/src/preview-examples/echarts.html b/packages/html-test-app/src/preview-examples/echarts.html
@@ -8,7 +8,21 @@
 <html>
   <head>
     <title>Dropdown example</title>
-    <script src="https://cdn.jsdelivr.net/npm/echarts@5.3.3/dist/echarts.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script>
+    <script>
+      function detectThemeSwitching() {
+        const searchParams = new URLSearchParams(location.search);
+
+        if (!searchParams.has('theme')) {
+          return 'brand-dark';
+        }
+        const theme = searchParams.get('theme');
+        return theme.substring('theme-'.length, theme.length);
+      }
+
+      const theme = detectThemeSwitching();
+      window.demoTheme = theme;
+    </script>
   </head>
   <body class="theme-brand-dark">
     <!-- Preview code -->
@@ -17,9 +31,15 @@
       style="display: block; position: relative; width: 100%; height: 40rem"
     ></div>
     <script type="module">
-      var myChart = echarts.init(document.querySelector('#main'), 'brand-dark');
-      // Draw the chart
+      import { registerTheme } from '@siemens/ix-echarts';
+
+      registerTheme(echarts);
 
+      var myChart = echarts.init(
+        document.querySelector('#main'),
+        window.demoTheme // brand-dark, brand-light, classic-dark or classic-light
+      );
+      // Draw the chart
       myChart.setOption({
         tooltip: {
           trigger: 'axis',

diff --git a/yarn.lock b/yarn.lock
@@ -6865,13 +6865,13 @@ eastasianwidth@^0.2.0:
   resolved "https://registry.yarnpkg.com/eastasianwidth/-/eastasianwidth-0.2.0.tgz#696ce2ec0aa0e6ea93a397ffcf24aa7840c827cb"
   integrity sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==
 
-echarts@^5.3.3:
-  version "5.4.0"
-  resolved "https://registry.yarnpkg.com/echarts/-/echarts-5.4.0.tgz#a9a8e5367293a397408d3bf3e2638b869249ce04"
-  integrity sha512-uPsO9VRUIKAdFOoH3B0aNg7NRVdN7aM39/OjovjO9MwmWsAkfGyeXJhK+dbRi51iDrQWliXV60/XwLA7kg3z0w==
+echarts@^5.4.1:
+  version "5.4.1"
+  resolved "https://registry.yarnpkg.com/echarts/-/echarts-5.4.1.tgz#d7f65a584d78beff62568d878b16151b3381811c"
+  integrity sha512-9ltS3M2JB0w2EhcYjCdmtrJ+6haZcW6acBolMGIuf01Hql1yrIV01L1aRj7jsaaIULJslEP9Z3vKlEmnJaWJVQ==
   dependencies:
     tslib "2.3.0"
-    zrender "5.4.0"
+    zrender "5.4.1"
 
 ee-first@1.1.1:
   version "1.1.1"
@@ -16743,10 +16743,10 @@ zone.js@~0.11.4:
   dependencies:
     tslib "^2.3.0"
 
-zrender@5.4.0:
-  version "5.4.0"
-  resolved "https://registry.yarnpkg.com/zrender/-/zrender-5.4.0.tgz#d4f76e527b2e3bbd7add2bdaf27a16af85785576"
-  integrity sha512-rOS09Z2HSVGFs2dn/TuYk5BlCaZcVe8UDLLjj1ySYF828LATKKdxuakSZMvrDz54yiKPDYVfjdKqcX8Jky3BIA==
+zrender@5.4.1:
+  version "5.4.1"
+  resolved "https://registry.yarnpkg.com/zrender/-/zrender-5.4.1.tgz#892f864b885c71e1dc25dcb3c7a4ba42678d3f11"
+  integrity sha512-M4Z05BHWtajY2241EmMPHglDQAJ1UyHQcYsxDNzD9XLSkPDqMq4bB28v9Pb4mvHnVQ0GxyTklZ/69xCFP6RXBA==
   dependencies:
     tslib "2.3.0"