@siemens/ix-docs 4.3.0 → 5.0.0

package/build/static/demo/v2/vue/echarts-pie.vue

@@ -8,8 +8,12 @@ LICENSE file in the root directory of this source tree.
 -->
 
 <script setup lang="ts">
-import { ref } from 'vue';
-import { getComputedCSSProperty, registerTheme } from '@siemens/ix-echarts';
+import { onBeforeUnmount, ref } from 'vue';
+import {
+  getComputedCSSProperty,
+  registerTheme,
+  resolveEChartThemeName,
+} from '@siemens/ix-echarts';
 import { themeSwitcher } from '@siemens/ix';
 import VueECharts from 'vue-echarts';
 import * as echarts from 'echarts';
@@ -29,11 +33,7 @@ echarts.use([
 
 registerTheme(echarts);
 
-const theme = ref(themeSwitcher.getCurrentTheme());
-
-themeSwitcher.themeChanged.on((newTheme: string) => {
-  theme.value = newTheme;
-});
+const theme = ref(resolveEChartThemeName());
 
 const data = [
   { value: 29.4, name: 'China' },
@@ -45,35 +45,48 @@ const data = [
   { value: 31.5, name: 'Other' },
 ];
 
-const options: EChartsOption = {
-  tooltip: {
-    trigger: 'item',
-  },
-  legend: {
-    icon: 'rect',
-    bottom: '0',
-    left: '0',
-  },
-  series: [
-    {
-      name: 'CO2 emissions from<',
-      type: 'pie',
-      radius: '80%',
-      data: data,
-      label: {
-        show: true,
-        color: getComputedCSSProperty('color-neutral'),
-      },
-      emphasis: {
-        itemStyle: {
-          shadowBlur: 10,
-          shadowOffsetX: 0,
-          shadowColor: 'rgba(0, 0, 0, 0.5)',
+function getOptions(): EChartsOption {
+  return {
+    tooltip: {
+      trigger: 'item',
+    },
+    legend: {
+      icon: 'rect',
+      bottom: '0',
+      left: '0',
+    },
+    series: [
+      {
+        name: 'CO2 emissions from<',
+        type: 'pie',
+        radius: '80%',
+        data: data,
+        label: {
+          show: true,
+          color: getComputedCSSProperty('color-neutral'),
+        },
+        emphasis: {
+          itemStyle: {
+            shadowBlur: 10,
+            shadowOffsetX: 0,
+            shadowColor: 'rgba(0, 0, 0, 0.5)',
+          },
         },
       },
-    },
-  ],
-} as EChartsOption;
+    ],
+  };
+}
+
+const options = ref<EChartsOption>(getOptions());
+
+const disposer = themeSwitcher.themeChanged.on(() => {
+  theme.value = resolveEChartThemeName();
+  options.value = getOptions();
+});
+
+onBeforeUnmount(() => {
+  disposer.dispose();
+});
 </script>
 
 <style scoped src="./echarts-pie.css"></style>

package/build/static/demo/v2/vue/echarts-progress-arc.vue

@@ -8,8 +8,12 @@ LICENSE file in the root directory of this source tree.
 -->
 
 <script setup lang="ts">
-import { ref } from 'vue';
-import { getComputedCSSProperty, registerTheme } from '@siemens/ix-echarts';
+import { onBeforeUnmount, ref } from 'vue';
+import {
+  getComputedCSSProperty,
+  registerTheme,
+  resolveEChartThemeName,
+} from '@siemens/ix-echarts';
 import { themeSwitcher } from '@siemens/ix';
 import VueECharts from 'vue-echarts';
 import * as echarts from 'echarts';
@@ -29,71 +33,80 @@ echarts.use([
 
 registerTheme(echarts);
 
-const theme = ref(themeSwitcher.getCurrentTheme());
-
-themeSwitcher.themeChanged.on((newTheme: string) => {
-  theme.value = newTheme;
-});
+const theme = ref(resolveEChartThemeName());
 
 const value = 60;
 
-const options = {
-  series: [
-    {
-      id: '1',
-      type: 'gauge',
-      axisLine: {
-        show: true,
-        lineStyle: {
-          width: 15,
-          color: [[1, getComputedCSSProperty('color-neutral-40')]],
+function getOptions(): EChartsOption {
+  return {
+    series: [
+      {
+        id: '1',
+        type: 'gauge',
+        axisLine: {
+          show: true,
+          lineStyle: {
+            width: 15,
+            color: [[1, getComputedCSSProperty('color-neutral-40')]],
+          },
         },
-      },
-      axisTick: {
-        show: false,
-      },
-      radius: '100%',
-      startAngle: 200,
-      endAngle: -20,
-      splitLine: {
-        show: false,
-      },
-      axisLabel: {
-        show: false,
-      },
-      progress: {
-        show: true,
-        overlap: false,
-        width: 35,
-        itemStyle: {
-          borderMiterLimit: 16,
-          color: getComputedCSSProperty('color-success'),
+        axisTick: {
+          show: false,
         },
-      },
-      pointer: {
-        show: false,
-      },
-      data: [
-        {
-          value: value,
-          detail: {
-            offsetCenter: [0, 0],
-            overflow: 'break',
-            fontSize: '2rem',
-            fontWeight: 'normal',
-            color: getComputedCSSProperty('color-soft-text'),
-            width: 250,
-            lineHeight: 35,
-            formatter: '{value} / 100 \n completed',
-          },
-          pointer: {
-            show: false,
+        radius: '100%',
+        startAngle: 200,
+        endAngle: -20,
+        splitLine: {
+          show: false,
+        },
+        axisLabel: {
+          show: false,
+        },
+        progress: {
+          show: true,
+          overlap: false,
+          width: 35,
+          itemStyle: {
+            borderMiterLimit: 16,
+            color: getComputedCSSProperty('color-success'),
           },
         },
-      ],
-    } as EChartsOption,
-  ],
-};
+        pointer: {
+          show: false,
+        },
+        data: [
+          {
+            value: value,
+            detail: {
+              offsetCenter: [0, 0],
+              overflow: 'break',
+              fontSize: '2rem',
+              fontWeight: 'normal',
+              color: getComputedCSSProperty('color-soft-text'),
+              width: 250,
+              lineHeight: 35,
+              formatter: '{value} / 100 \n completed',
+            },
+            pointer: {
+              show: false,
+            },
+          },
+        ],
+      },
+    ],
+  };
+}
+
+const options = ref<EChartsOption>(getOptions());
+
+const disposer = themeSwitcher.themeChanged.on(() => {
+  theme.value = resolveEChartThemeName();
+  options.value = getOptions();
+});
+
+onBeforeUnmount(() => {
+  disposer.dispose();
+});
 </script>
 
 <style scoped src="./echarts-progress-arc.css"></style>

package/build/static/demo/v2/vue/echarts-progress-circle.vue

@@ -8,8 +8,12 @@ LICENSE file in the root directory of this source tree.
 -->
 
 <script setup lang="ts">
-import { ref } from 'vue';
-import { getComputedCSSProperty, registerTheme } from '@siemens/ix-echarts';
+import { onBeforeUnmount, ref } from 'vue';
+import {
+  getComputedCSSProperty,
+  registerTheme,
+  resolveEChartThemeName,
+} from '@siemens/ix-echarts';
 import { themeSwitcher } from '@siemens/ix';
 import VueECharts from 'vue-echarts';
 import * as echarts from 'echarts';
@@ -29,79 +33,88 @@ echarts.use([
 
 registerTheme(echarts);
 
-const theme = ref(themeSwitcher.getCurrentTheme());
-
-themeSwitcher.themeChanged.on((newTheme: string) => {
-  theme.value = newTheme;
-});
+const theme = ref(resolveEChartThemeName());
 
 const value = 60;
 
-const options: EChartsOption = {
-  series: [
-    {
-      id: '1',
-      type: 'gauge',
-      axisLine: {
-        show: true,
-        lineStyle: {
-          width: 15,
-          color: [[1, getComputedCSSProperty('color-neutral-40')]],
+function getOptions(): EChartsOption {
+  return {
+    series: [
+      {
+        id: '1',
+        type: 'gauge',
+        axisLine: {
+          show: true,
+          lineStyle: {
+            width: 15,
+            color: [[1, getComputedCSSProperty('color-neutral-40')]],
+          },
         },
-      },
-      axisTick: {
-        show: false,
-      },
-      radius: '100%',
-      startAngle: 90,
-      endAngle: -270,
-      splitLine: {
-        show: false,
-      },
-      axisLabel: {
-        show: false,
-      },
-      progress: {
-        show: true,
-        overlap: false,
-        width: 35,
-        itemStyle: {
-          borderMiterLimit: 16,
-          color: getComputedCSSProperty('color-success'),
+        axisTick: {
+          show: false,
         },
-      },
-      pointer: {
-        show: false,
-      },
-      data: [
-        {
-          value: value,
-          detail: {
-            offsetCenter: [0, 0],
-            fontSize: '2rem',
-            fontWeight: 'normal',
-            color: getComputedCSSProperty('color-soft-text'),
-            rich: {
-              valueStyle: {
-                fontSize: '2rem',
-                color: getComputedCSSProperty('color-soft-text'),
-                fontWeight: 'bold',
-              },
-              textStyle: {
-                fontSize: '1.5rem',
-                color: getComputedCSSProperty('color-soft-text'),
+        radius: '100%',
+        startAngle: 90,
+        endAngle: -270,
+        splitLine: {
+          show: false,
+        },
+        axisLabel: {
+          show: false,
+        },
+        progress: {
+          show: true,
+          overlap: false,
+          width: 35,
+          itemStyle: {
+            borderMiterLimit: 16,
+            color: getComputedCSSProperty('color-success'),
+          },
+        },
+        pointer: {
+          show: false,
+        },
+        data: [
+          {
+            value: value,
+            detail: {
+              offsetCenter: [0, 0],
+              fontSize: '2rem',
+              fontWeight: 'normal',
+              color: getComputedCSSProperty('color-soft-text'),
+              rich: {
+                valueStyle: {
+                  fontSize: '2rem',
+                  color: getComputedCSSProperty('color-soft-text'),
+                  fontWeight: 'bold',
+                },
+                textStyle: {
+                  fontSize: '1.5rem',
+                  color: getComputedCSSProperty('color-soft-text'),
+                },
               },
+              formatter: `{valueStyle|{value}}/100\n{textStyle|completed}`,
+            },
+            pointer: {
+              show: false,
             },
-            formatter: `{valueStyle|{value}}/100\n{textStyle|completed}`,
-          },
-          pointer: {
-            show: false,
           },
-        },
-      ],
-    },
-  ],
-} as EChartsOption;
+        ],
+      },
+    ],
+  };
+}
+
+const options = ref<EChartsOption>(getOptions());
+
+const disposer = themeSwitcher.themeChanged.on(() => {
+  theme.value = resolveEChartThemeName();
+  options.value = getOptions();
+});
+
+onBeforeUnmount(() => {
+  disposer.dispose();
+});
 </script>
 
 <style scoped src="./echarts-progress-circle.css"></style>

package/build/static/demo/v2/vue/echarts-special-3d.vue

@@ -8,8 +8,12 @@ LICENSE file in the root directory of this source tree.
 -->
 
 <script setup lang="ts">
-import { ref } from 'vue';
-import { getComputedCSSProperty, registerTheme } from '@siemens/ix-echarts';
+import { onBeforeUnmount, ref } from 'vue';
+import {
+  getComputedCSSProperty,
+  registerTheme,
+  resolveEChartThemeName,
+} from '@siemens/ix-echarts';
 import { themeSwitcher } from '@siemens/ix';
 import VueECharts from 'vue-echarts';
 import * as echarts from 'echarts';
@@ -30,11 +34,7 @@ echarts.use([
 
 registerTheme(echarts);
 
-const theme = ref(themeSwitcher.getCurrentTheme());
-
-themeSwitcher.themeChanged.on((newTheme: string) => {
-  theme.value = newTheme;
-});
+const theme = ref(resolveEChartThemeName());
 
 function gridConfig() {
   return {
@@ -55,42 +55,55 @@ function gridConfig() {
   };
 }
 
-const options = {
-  tooltip: {},
-  visualMap: {
-    show: false,
-    dimension: 2,
-    min: -1,
-    max: 1,
-  },
-  xAxis3D: gridConfig(),
-  yAxis3D: gridConfig(),
-  zAxis3D: gridConfig(),
-  grid3D: {
-    viewControl: {
-      projection: 'orthographic',
+function getOptions(): EChartsOption {
+  return {
+    tooltip: {},
+    visualMap: {
+      show: false,
+      dimension: 2,
+      min: -1,
+      max: 1,
     },
-  },
-  series: [
-    {
-      type: 'surface',
-      equation: {
-        x: {
-          step: 0.05,
-        },
-        y: {
-          step: 0.05,
-        },
-        z: (x: number, y: number): string | number => {
-          if (Math.abs(x) < 0.1 && Math.abs(y) < 0.1) {
-            return '-';
-          }
-          return Math.sin(x * Math.PI) * Math.sin(y * Math.PI);
-        },
+    xAxis3D: gridConfig(),
+    yAxis3D: gridConfig(),
+    zAxis3D: gridConfig(),
+    grid3D: {
+      viewControl: {
+        projection: 'orthographic',
       },
-    } as any,
-  ],
-} as EChartsOption;
+    },
+    series: [
+      {
+        type: 'surface',
+        equation: {
+          x: {
+            step: 0.05,
+          },
+          y: {
+            step: 0.05,
+          },
+          z: (x: number, y: number): string | number => {
+            if (Math.abs(x) < 0.1 && Math.abs(y) < 0.1) {
+              return '-';
+            }
+            return Math.sin(x * Math.PI) * Math.sin(y * Math.PI);
+          },
+        },
+      } as any,
+    ],
+  };
+}
+
+const options = ref<EChartsOption>(getOptions());
+
+const disposer = themeSwitcher.themeChanged.on(() => {
+  theme.value = resolveEChartThemeName();
+  options.value = getOptions();
+});
+
+onBeforeUnmount(() => {
+  disposer.dispose();
+});
 </script>
 
 <style scoped src="./echarts-special-3d.css"></style>

package/build/static/demo/v2/vue/echarts-special-toolbox.vue

@@ -8,8 +8,8 @@ LICENSE file in the root directory of this source tree.
 -->
 
 <script setup lang="ts">
-import { ref } from 'vue';
-import { registerTheme } from '@siemens/ix-echarts';
+import { onBeforeUnmount, ref } from 'vue';
+import { registerTheme, resolveEChartThemeName } from '@siemens/ix-echarts';
 import { themeSwitcher } from '@siemens/ix';
 import VueECharts from 'vue-echarts';
 import * as echarts from 'echarts';
@@ -30,10 +30,14 @@ echarts.use([
 
 registerTheme(echarts);
 
-const theme = ref(themeSwitcher.getCurrentTheme());
+const theme = ref(resolveEChartThemeName());
 
-themeSwitcher.themeChanged.on((newTheme: string) => {
-  theme.value = newTheme;
+const disposer = themeSwitcher.themeChanged.on(() => {
+  theme.value = resolveEChartThemeName();
+});
+
+onBeforeUnmount(() => {
+  disposer.dispose();
 });
 
 const data = {