1 files changed, 43 insertions, 0 deletions
diff --git a/src/views/_sila/Fans/Dynamic/FansDynamicPage.vue b/src/views/_sila/Fans/Dynamic/FansDynamicPage.vue
new file mode 100644
index 00000000..dda22dfb
--- /dev/null
+++ b/src/views/_sila/Fans/Dynamic/FansDynamicPage.vue
@@ -0,0 +1,43 @@
+<template>
+  <b-container fluid="xl">
+    <page-title :description="$t('appPageTitle.dynamicInformation')" />
+    <table-date-picker :time-scale="timeScale" @changePeriod="onChangePeriod" />
+    <fan-speed :time-scale="timeScale"></fan-speed>
+  </b-container>
+</template>
+
+<script>
+import PageTitle from '@/components/_sila/Global/PageTitle';
+import TableDatePicker from '@/components/_sila/Global/TableDatePicker';
+
+import DataFormatterMixin from '@/components/_sila/Mixins/DataFormatterMixin';
+import LoadingBarMixin from '@/components/_sila/Mixins/LoadingBarMixin';
+import TableFilterMixin from '@/components/_sila/Mixins/TableFilterMixin';
+
+import FanSpeed from './FanSpeed';
+
+export default {
+  components: { FanSpeed, PageTitle, TableDatePicker },
+  mixins: [DataFormatterMixin, LoadingBarMixin, TableFilterMixin],
+  data() {
+    return {
+      timeScale: 'hour',
+    };
+  },
+
+  methods: {
+    resetZoom() {
+      const resetButton = document.querySelector('.highcharts-reset-zoom');
+      if (!resetButton) {
+        return;
+      }
+
+      resetButton.dispatchEvent(new Event('click'));
+    },
+    onChangePeriod(period) {
+      this.timeScale = period;
+      this.resetZoom();
+    },
+  },
+};
+</script>