add reset zoom, switch period

6 files changed, 49 insertions, 26 deletions

diff --git a/src/components/_sila/Global/TableDatePicker.vue b/src/components/_sila/Global/TableDatePicker.vue
index 0eef0f8c..397c507f 100644
--- a/src/components/_sila/Global/TableDatePicker.vue
+++ b/src/components/_sila/Global/TableDatePicker.vue
@@ -20,9 +20,11 @@ export default {
       type: String,
       default: 'hour',
     },
-    switchTimeScale: {
-      type: Function,
-      required: true,
+  },
+
+  methods: {
+    switchTimeScale(period) {
+      this.$emit('changePeriod', period);
     },
   },
 };
diff --git a/src/views/_sila/Fans/Dynamic/FanSpeed.vue b/src/views/_sila/Fans/Dynamic/FanSpeed.vue
index 97c862de..d2ecde50 100644
--- a/src/views/_sila/Fans/Dynamic/FanSpeed.vue
+++ b/src/views/_sila/Fans/Dynamic/FanSpeed.vue
@@ -181,9 +181,6 @@ export default {
     timeScale() {
       this.loadData();
     },
-    items(data) {
-      console.log('data!!!', data);
-    },
   },
 
   created() {
diff --git a/src/views/_sila/Fans/Dynamic/FansDynamicPage.vue b/src/views/_sila/Fans/Dynamic/FansDynamicPage.vue
index 8be848d5..dda22dfb 100644
--- a/src/views/_sila/Fans/Dynamic/FansDynamicPage.vue
+++ b/src/views/_sila/Fans/Dynamic/FansDynamicPage.vue
@@ -1,10 +1,7 @@
 <template>
   <b-container fluid="xl">
     <page-title :description="$t('appPageTitle.dynamicInformation')" />
-    <table-date-picker
-      :switch-time-scale="switchTimeScale"
-      :time-scale="timeScale"
-    />
+    <table-date-picker :time-scale="timeScale" @changePeriod="onChangePeriod" />
     <fan-speed :time-scale="timeScale"></fan-speed>
   </b-container>
 </template>
@@ -29,8 +26,17 @@ export default {
   },
 
   methods: {
-    switchTimeScale(period) {
+    resetZoom() {
+      const resetButton = document.querySelector('.highcharts-reset-zoom');
+      if (!resetButton) {
+        return;
+      }
+
+      resetButton.dispatchEvent(new Event('click'));
+    },
+    onChangePeriod(period) {
       this.timeScale = period;
+      this.resetZoom();
     },
   },
 };
diff --git a/src/views/_sila/Memory/Dynamic/MemoryDynamicPage.vue b/src/views/_sila/Memory/Dynamic/MemoryDynamicPage.vue
index b9360024..10496829 100644
--- a/src/views/_sila/Memory/Dynamic/MemoryDynamicPage.vue
+++ b/src/views/_sila/Memory/Dynamic/MemoryDynamicPage.vue
@@ -1,10 +1,7 @@
 <template>
   <b-container fluid="xl">
     <page-title :description="$t('appPageTitle.dynamicInformation')" />
-    <table-date-picker
-      :switch-time-scale="switchTimeScale"
-      :time-scale="timeScale"
-    />
+    <table-date-picker :time-scale="timeScale" @changePeriod="onChangePeriod" />
     <memory-temp :time-scale="timeScale"></memory-temp>
   </b-container>
 </template>
@@ -29,8 +26,17 @@ export default {
   },
 
   methods: {
-    switchTimeScale(period) {
+    resetZoom() {
+      const resetButton = document.querySelector('.highcharts-reset-zoom');
+      if (!resetButton) {
+        return;
+      }
+
+      resetButton.dispatchEvent(new Event('click'));
+    },
+    onChangePeriod(period) {
       this.timeScale = period;
+      this.resetZoom();
     },
   },
 };
diff --git a/src/views/_sila/Motherboard/Dynamic/MotherboardDynamicPage.vue b/src/views/_sila/Motherboard/Dynamic/MotherboardDynamicPage.vue
index 15768432..c5562f2b 100644
--- a/src/views/_sila/Motherboard/Dynamic/MotherboardDynamicPage.vue
+++ b/src/views/_sila/Motherboard/Dynamic/MotherboardDynamicPage.vue
@@ -1,10 +1,7 @@
 <template>
   <b-container fluid="xl">
     <page-title :description="$t('appPageTitle.dynamicInformation')" />
-    <table-date-picker
-      :switch-time-scale="switchTimeScale"
-      :time-scale="timeScale"
-    />
+    <table-date-picker :time-scale="timeScale" @changePeriod="onChangePeriod" />
     <motherboard-temp :time-scale="timeScale"></motherboard-temp>
   </b-container>
 </template>
@@ -29,8 +26,17 @@ export default {
   },
 
   methods: {
-    switchTimeScale(period) {
+    resetZoom() {
+      const resetButton = document.querySelector('.highcharts-reset-zoom');
+      if (!resetButton) {
+        return;
+      }
+
+      resetButton.dispatchEvent(new Event('click'));
+    },
+    onChangePeriod(period) {
       this.timeScale = period;
+      this.resetZoom();
     },
   },
 };
diff --git a/src/views/_sila/Processors/Dynamic/ProcessorsDynamicPage.vue b/src/views/_sila/Processors/Dynamic/ProcessorsDynamicPage.vue
index eef6fd0b..ff9feb2e 100644
--- a/src/views/_sila/Processors/Dynamic/ProcessorsDynamicPage.vue
+++ b/src/views/_sila/Processors/Dynamic/ProcessorsDynamicPage.vue
@@ -1,10 +1,7 @@
 <template>
   <b-container fluid="xl">
     <page-title :description="$t('appPageTitle.dynamicInformation')" />
-    <table-date-picker
-      :switch-time-scale="switchTimeScale"
-      :time-scale="timeScale"
-    />
+    <table-date-picker :time-scale="timeScale" @changePeriod="onChangePeriod" />
     <cpu-temp :time-scale="timeScale"></cpu-temp>
     <cpu-power :time-scale="timeScale"></cpu-power>
   </b-container>
@@ -35,8 +32,17 @@ export default {
   },
 
   methods: {
-    switchTimeScale(period) {
+    resetZoom() {
+      const resetButton = document.querySelector('.highcharts-reset-zoom');
+      if (!resetButton) {
+        return;
+      }
+
+      resetButton.dispatchEvent(new Event('click'));
+    },
+    onChangePeriod(period) {
       this.timeScale = period;
+      this.resetZoom();
     },
   },
 };