From d29c5b4dad4a03142fa0b337fc339f504ac96640 Mon Sep 17 00:00:00 2001
From: artem <artem@webart-tech.ru>
Date: Mon, 4 Nov 2024 13:39:57 +0300
Subject: [PATCH] add button - zoom out

---
 src/components/icons/VaZoomOut.vue | 33 ++++++++++++++++++++++++++++++
 src/pages/workouts/WorkoutItem.vue | 20 ++++++++++++++++--
 2 files changed, 51 insertions(+), 2 deletions(-)
 create mode 100644 src/components/icons/VaZoomOut.vue

diff --git a/src/components/icons/VaZoomOut.vue b/src/components/icons/VaZoomOut.vue
new file mode 100644
index 0000000..125dde9
--- /dev/null
+++ b/src/components/icons/VaZoomOut.vue
@@ -0,0 +1,33 @@
+<template>
+    
+<svg xmlns="http://www.w3.org/2000/svg" 
+    class="va-icon-zoomout"
+    height="24px" 
+    viewBox="0 -960 960 960" 
+    width="24px" 
+    fill="#5f6368">
+    <path d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400ZM280-540v-80h200v80H280Z"/></svg>
+  </template>
+  <script>
+  export default {
+    name: "VaIconZoomOut",
+    inject: ["contextConfig"],
+    computed: {
+      themeGradientId() {
+        return this.contextConfig.invertedColor ? "CORPORATE" : "ORIGINAL";
+      },
+      textColor() {
+        return this.contextConfig.invertedColor ? "#6E85E8" : "#E4FF32";
+      },
+    },
+  };
+  </script>
+  
+  <style lang="scss">
+  .va-icon-zoomout {
+    .st0 {
+      fill: #4ae387;
+    }
+  }
+  </style>
+  
\ No newline at end of file
diff --git a/src/pages/workouts/WorkoutItem.vue b/src/pages/workouts/WorkoutItem.vue
index 2330a56..85dcaec 100644
--- a/src/pages/workouts/WorkoutItem.vue
+++ b/src/pages/workouts/WorkoutItem.vue
@@ -26,16 +26,20 @@
         }"
     />
     </yandex-map>
+    <VaButton v-on:click="resetChartZoom()" preset="secondary" color="textPrimary"  id="zoom-botton"  ><VaZoomOut /></VaButton>
     <!-- @vue-ignore -->
-    <LineWithLineChart id="my-chart-id" :options="chartOptions"  :data="data" />  
+    <LineWithLineChart id="chart" ref="chart" :options="chartOptions"  :data="data" /> 
 </template>
 <script setup lang="ts">
+import VaZoomOut from "../../components/icons/VaZoomOut.vue";
+
+
 import { useRoute } from 'vue-router'
 import 'chartjs-adapter-moment';
 import { AxiosResponse, AxiosInstance } from "axios";
 import { ref, inject, shallowRef } from 'vue'
 import { useToast } from "vuestic-ui/web-components";
-import zoomPlugin from 'chartjs-plugin-zoom';
+import zoomPlugin, { resetZoom } from 'chartjs-plugin-zoom';
 import { 
     Chart as ChartJS, 
     Title, 
@@ -54,6 +58,7 @@ import { YandexMap, YandexMapDefaultSchemeLayer, YandexMapFeature, YandexMapDefa
 
 //Можно использовать для различных преобразований
 const map = shallowRef<null | YMap>(null);
+const chart = ref();
 let mapCenter = ref<Array<number>>([37.617644, 55.755819]);
 let lineCoordinates = ref<Array<Array<number>>>([]);
 ChartJS.register(
@@ -170,6 +175,11 @@ const chartOptions ={
 }
 const msToKmh = (ms: number) => ms * 3.6;
 const axiosAuth= inject('axiosAuth') as AxiosInstance;
+
+const resetChartZoom = () => {
+    resetZoom(chart.value.chart);
+}
+
 const initWorkout = (id: string) => {
     axiosAuth
     .get(`/api/v0/workouts/${id}`)
@@ -226,4 +236,10 @@ initWorkout(route.params.id as string);
     background-repeat: no-repeat;
     background-size: cover;
   }
+  #zoom-botton {
+    display: block;
+    margin-top: 20px;
+    margin-bottom: -35px;
+    margin-left: 20px;
+  }
 </style>
\ No newline at end of file