stats by area

src/pages/workouts/components/WorkoutItem.vue

@@ -103,6 +103,19 @@
                 <div class="workout-item-params-pointer" v-else><a @click="showModalLink = !showModalLink">Добавить</a>    </div>
             </div>
 
+            <div v-if="!isEmpty(areaAvgData)" class="area-data">
+                <h4>Данные участка</h4>
+                <div class="workout-item-params" v-for="(item, index) in areaAvgData" :key="item">
+                    <div class="workout-item-params-name">{{index}}:</div>
+                    <div class="workout-item-params-value">{{ item }}</div>
+                </div>
+
+            </div>
+            <div v-else>
+                Чтобы увидеть информацию по области, выделите область на графике
+            </div>
+
+
         </div>
     </div>
     <VaButton v-on:click="resetChartZoom()" preset="secondary" color="textPrimary" id="zoom-botton">
@@ -186,6 +199,10 @@ interface Props {
     isPrivate: boolean,
     dzenLink?: string
   }
+interface AvgData {
+  [key: string]: string;
+}
+const areaAvgData = ref<AvgData>({});
 const markedCoordinats = ref<Array<Array<number>>>([]);
 const { workoutItem, data, mapCenter, lineCoordinates, dzenLink: dzenLinkProps } = defineProps<Props>()
 const dzenLink = ref(dzenLinkProps);
@@ -239,6 +256,14 @@ const chartPlugins = [
     mapX: mapX,
 }
 ];
+function isEmpty(obj: any) {
+  for (const prop in obj) {
+    if (Object.hasOwn(obj, prop)) {
+      return false;
+    }
+  }
+  return true;
+}
 const chartOptions = {
     animation: {
         duration: 0
@@ -305,18 +330,7 @@ const chartOptions = {
                     let show_data = [];
                     for (let i = 0; i < data.datasets.length; i++) {
                         let value = data.datasets[i].label + " :" + Math.floor(data.datasets[i].data[context.dataIndex])
-                        if (data.datasets[i].label == "Скорость") {
+                        value += getUnit(data.datasets[i].label)
-                            value = value + " км/ч";
-                        }
-                        if (data.datasets[i].label == "Пульс") {
-                            value = value + " уд/мин";
-                        }
-                        if (data.datasets[i].label == "Мощность") {
-                            value = value + " Ватт";
-                        }
-                        if (data.datasets[i].label == "Подъем") {
-                            value = value + " м";
-                        }
                         show_data.push(value);
                     }
                     return show_data;
@@ -347,6 +361,14 @@ const chartOptions = {
                         end = lineCoordinates.length;
                     }
                     markedCoordinats.value = lineCoordinates.slice(start, end);
+                    let avgData: AvgData = {}
+                    for (var key in data.datasets) {
+                        const array = data.datasets[key].data.slice(start, end)
+                        let sum = array.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
+                        let average = sum / array.length;
+                        avgData[data.datasets[key].label] = Math.floor(average).toString() + getUnit(data.datasets[key].label);
+                    }
+                    areaAvgData.value = avgData;
                 },
                 drag: {
                     enabled: true,
@@ -359,6 +381,21 @@ const chartOptions = {
         }
     }
 }
+const getUnit = (label: string) => {
+
+    if (label == "Скорость") {
+        return " км/ч";
+    }
+    if (label == "Пульс") {
+        return " уд/мин";
+    }
+    if (label == "Мощность") {
+        return " Ватт";
+    }
+    if (label == "Подъем") {
+        return " м";
+    }
+}
 const axiosAuth = inject('axiosAuth') as AxiosInstance;
 const saveLink = (hide: any) => {
     if (!dzenLink.value) {
@@ -430,6 +467,7 @@ const changePublic = (value: boolean) => {
 
 const resetChartZoom = () => {
     resetZoom(chart.value.chart);
+    areaAvgData.value = {};
 }
 
 </script>
@@ -487,6 +525,9 @@ h3 {
     font-family: sans-serif;
 
 }
+.area-data h4 {
+    text-decoration: underline;
+}
 .workout-item-params {
     display: flex;
     width: 100%;