Min value for intervals

Author: Stigmatoz

src/_locales/de/messages.json

@@ -299,11 +299,14 @@
     "message": "Änderungsliste anzeigen",
     "description": "Zeigen Sie die Liste der Änderungen nach dem Aktualisieren der Erweiterung an"
   },
-  "byHoursChart": {
+  "byHours": {
     "message": "Stundenweise"
   },
-  "intervalChartChart": {
-    "message": "Intervalldiagramm",
-    "description": "Es werden nur Zeitintervalle angezeigt, die länger als 5 Sekunden sind"
+  "intervals": {
+    "message": "Intervalle"
+  },
+  "intervalsChart": {
+    "message": "Nur Zeitintervalle größer als",
+    "description": "werden angezeigt"
   }
 }

src/_locales/en/messages.json

@@ -299,11 +299,14 @@
     "message": "Show changelog",
     "description": "Show the list of changes after updating extension"
   },
-  "byHoursChart": {
+  "byHours": {
     "message": "Horly"
   },
-  "intervalChartChart": {
-    "message": "Interval Chart",
-    "description": "Only time intervals greater than 5 seconds are shown"
+  "intervals": {
+    "message": "Intervals"
+  },
+  "intervalsChart": {
+    "message": "Only time intervals greater than",
+    "description": "are shown"
   }
 }

src/_locales/ru/messages.json

@@ -299,11 +299,15 @@
     "message": "Показывать список изменений",
     "description": "Показывать список изменений после обновления расширения"
   },
-  "byHoursChart": {
+  "byHours": {
     "message": "По часам"
   },
-  "intervalChartChart": {
-    "message": "Интервальная диаграмма",
+  "intervals": {
+    "message": "Интервальны",
     "description": "Отображаются только временные интервалы, превышающие 5 секунд"
+  },
+  "intervalsChart": {
+    "message": "Отображаются только временные интервалы, превышающие",
+    "description": ""
   }
 }

src/components/Dashboad.vue

@@ -8,13 +8,13 @@
         <input
           type="button"
           :class="['chart-btn', chart == TypeOfChart.Horly ? 'active' : '']"
-          :value="t('byHoursChart.message')"
+          :value="t('byHours.message')"
           @click="openChart(TypeOfChart.Horly)"
         />
         <input
           type="button"
           :class="['ml-10', 'chart-btn', chart == TypeOfChart.Interval ? 'active' : '']"
-          :value="t('intervalChartChart.message')"
+          :value="t('intervals.message')"
           @click="openChart(TypeOfChart.Interval)"
         />
       </div>

src/components/TimeIntervalChart.vue

@@ -1,5 +1,16 @@
 <template>
-  <p class="description">{{ t('intervalChartChart.description') }}</p>
+  <div>
+    <p class="description d-inline-block">{{ t('intervalsChart.message') }}</p>
+    <div class="d-inline-block mr-10 ml-10">
+      <select class="option" v-model="minValue" @change="refreshChart()">
+        <option :value="MinValue.Seconds_10">10 {{ t('sec.message') }}</option>
+        <option :value="MinValue.Min_1">1 {{ t('min.message') }}</option>
+        <option :value="MinValue.Min_5">5 {{ t('2min.message') }}</option>
+        <option :value="MinValue.Min_10">10 {{ t('mins.message') }}</option>
+      </select>
+    </div>
+    <p class="description d-inline-block">{{ t('intervalsChart.description') }}</p>
+  </div>
   <div ref="chart" id="timeIntervalChartD3"></div>
 </template>
 
@@ -19,34 +30,56 @@ import { useI18n } from 'vue-i18n';
 import * as d3 from 'd3';
 import { convertStringTimeIntervalToSeconds } from '../utils/converter';
 
+enum MinValue {
+  Seconds_10 = 10,
+  Min_1 = 60,
+  Min_5 = 300,
+  Min_10 = 600,
+}
+
 const { t } = useI18n();
 const storage = injecStorage();
 
 const chart = ref<any>();
+const minValue = ref<number>();
+const todayIntervals = ref<TimeInterval[]>();
 
 type DataForChart = {
   domain: string;
   interval: string;
 };
 
 onMounted(async () => {
+  minValue.value = MinValue.Seconds_10;
   const timeIntervalList = (await storage.getDeserializeList(
     StorageDeserializeParam.TIMEINTERVAL_LIST,
   )) as TimeInterval[];
 
-  const todayIntervals = timeIntervalList?.filter(x => x.day == todayLocalDate());
+  todayIntervals.value = timeIntervalList?.filter(x => x.day == todayLocalDate());
+  renderChart();
+});
+
+function renderChart() {
   const dataForChart: DataForChart[] = [];
-  todayIntervals.forEach(interval => {
+  todayIntervals.value?.forEach(interval => {
     interval.intervals.forEach(int => {
       const from = int.split('-')[0];
       const to = int.split('-')[1];
-      if (convertStringTimeIntervalToSeconds(to) - convertStringTimeIntervalToSeconds(from) > 5) {
+      if (
+        convertStringTimeIntervalToSeconds(to) - convertStringTimeIntervalToSeconds(from) >
+        minValue.value!
+      ) {
         dataForChart.push({ domain: interval.domain, interval: convertInterval(int) });
       }
     });
   });
   drawIntervalChart(dataForChart);
-});
+}
+
+function refreshChart() {
+  chart.value.innerHTML = '';
+  renderChart();
+}
 
 function convertInterval(interval: string): string {
   function convert(item: string[]) {