Client - display chart with axis starting at min elevation - fix #91

This commit is contained in:
Sam 2021-11-11 10:39:32 +01:00
parent adb4fc8016
commit 6fe42f7f8c
22 changed files with 52 additions and 24 deletions

View File

@ -6,6 +6,7 @@
#### New Features
* [#91](https://github.com/SamR1/FitTrackee/issues/91) - Display elevation chart with min and max altitude of workout
* [#18](https://github.com/SamR1/FitTrackee/issues/18) - Better UI
#### Bugs Fixed

Binary file not shown.

Before

Width:  |  Height:  |  Size: 363 KiB

After

Width:  |  Height:  |  Size: 367 KiB

View File

@ -6,6 +6,7 @@
#### New Features
* [#91](https://github.com/SamR1/FitTrackee/issues/91) - Display elevation chart with min and max altitude of workout
* [#18](https://github.com/SamR1/FitTrackee/issues/18) - Better UI
#### Bugs Fixed

View File

@ -277,6 +277,7 @@
<section id="new-features">
<h4>New Features<a class="headerlink" href="#new-features" title="Permalink to this headline"></a></h4>
<ul class="simple">
<li><p><a class="reference external" href="https://github.com/SamR1/FitTrackee/issues/91">#91</a> - Display elevation chart with min and max altitude of workout</p></li>
<li><p><a class="reference external" href="https://github.com/SamR1/FitTrackee/issues/18">#18</a> - Better UI</p></li>
</ul>
</section>

File diff suppressed because one or more lines are too long

Binary file not shown.

Before

Width:  |  Height:  |  Size: 363 KiB

After

Width:  |  Height:  |  Size: 367 KiB

View File

@ -1 +1 @@
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><!--[if IE]><link rel="icon" href="/favicon.ico"><![endif]--><link rel="stylesheet" href="/static/css/fork-awesome.min.css"><link rel="stylesheet" href="/static/css/leaflet.css"><title>FitTrackee</title><link href="/static/css/admin.04e24276.css" rel="prefetch"><link href="/static/css/main.c790adb1.css" rel="prefetch"><link href="/static/css/main~workouts.66c5ef05.css" rel="prefetch"><link href="/static/css/profile.b52bc193.css" rel="prefetch"><link href="/static/css/reset.bd9657a8.css" rel="prefetch"><link href="/static/css/workouts.b4f73c62.css" rel="prefetch"><link href="/static/js/admin.2f1d393d.js" rel="prefetch"><link href="/static/js/chunk-2d0c9189.c81458cc.js" rel="prefetch"><link href="/static/js/chunk-2d0cf391.020c75ea.js" rel="prefetch"><link href="/static/js/chunk-2d0da8f3.c8c3e7e8.js" rel="prefetch"><link href="/static/js/chunk-2d2248b6.d84473c1.js" rel="prefetch"><link href="/static/js/chunk-2d22523a.4b710d99.js" rel="prefetch"><link href="/static/js/main.e5da50b8.js" rel="prefetch"><link href="/static/js/main~workouts.a74990d7.js" rel="prefetch"><link href="/static/js/profile.6a786c1d.js" rel="prefetch"><link href="/static/js/reset.518e646f.js" rel="prefetch"><link href="/static/js/workouts.16e33b8b.js" rel="prefetch"><link href="/static/css/app.534b9c5c.css" rel="preload" as="style"><link href="/static/js/app.7f21cc2d.js" rel="preload" as="script"><link href="/static/js/chunk-vendors.71654064.js" rel="preload" as="script"><link href="/static/css/app.534b9c5c.css" rel="stylesheet"><link rel="icon" type="image/png" sizes="32x32" href="/img/icons/favicon-32x32.png"><link rel="icon" type="image/png" sizes="16x16" href="/img/icons/favicon-16x16.png"><link rel="manifest" href="/manifest.json"><meta name="theme-color" content="#4DBA87"><meta name="apple-mobile-web-app-capable" content="no"><meta name="apple-mobile-web-app-status-bar-style" content="default"><meta name="apple-mobile-web-app-title" content="fittrackee_client"><link rel="apple-touch-icon" href="/img/icons/apple-touch-icon-152x152.png"><link rel="mask-icon" href="/img/icons/safari-pinned-tab.svg" color="#4DBA87"><meta name="msapplication-TileImage" content="/img/icons/msapplication-icon-144x144.png"><meta name="msapplication-TileColor" content="#000000"></head><body><noscript><strong>We're sorry but FitTrackee doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="/static/js/chunk-vendors.71654064.js"></script><script src="/static/js/app.7f21cc2d.js"></script></body></html>
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><!--[if IE]><link rel="icon" href="/favicon.ico"><![endif]--><link rel="stylesheet" href="/static/css/fork-awesome.min.css"><link rel="stylesheet" href="/static/css/leaflet.css"><title>FitTrackee</title><link href="/static/css/admin.04e24276.css" rel="prefetch"><link href="/static/css/main.c790adb1.css" rel="prefetch"><link href="/static/css/main~workouts.66c5ef05.css" rel="prefetch"><link href="/static/css/profile.b52bc193.css" rel="prefetch"><link href="/static/css/reset.bd9657a8.css" rel="prefetch"><link href="/static/css/workouts.d0767062.css" rel="prefetch"><link href="/static/js/admin.2f1d393d.js" rel="prefetch"><link href="/static/js/chunk-2d0c9189.c81458cc.js" rel="prefetch"><link href="/static/js/chunk-2d0cf391.020c75ea.js" rel="prefetch"><link href="/static/js/chunk-2d0da8f3.c8c3e7e8.js" rel="prefetch"><link href="/static/js/chunk-2d2248b6.d84473c1.js" rel="prefetch"><link href="/static/js/chunk-2d22523a.4b710d99.js" rel="prefetch"><link href="/static/js/main.e5da50b8.js" rel="prefetch"><link href="/static/js/main~workouts.a74990d7.js" rel="prefetch"><link href="/static/js/profile.6a786c1d.js" rel="prefetch"><link href="/static/js/reset.518e646f.js" rel="prefetch"><link href="/static/js/workouts.1c22fd12.js" rel="prefetch"><link href="/static/css/app.534b9c5c.css" rel="preload" as="style"><link href="/static/js/app.cb19dec0.js" rel="preload" as="script"><link href="/static/js/chunk-vendors.71654064.js" rel="preload" as="script"><link href="/static/css/app.534b9c5c.css" rel="stylesheet"><link rel="icon" type="image/png" sizes="32x32" href="/img/icons/favicon-32x32.png"><link rel="icon" type="image/png" sizes="16x16" href="/img/icons/favicon-16x16.png"><link rel="manifest" href="/manifest.json"><meta name="theme-color" content="#4DBA87"><meta name="apple-mobile-web-app-capable" content="no"><meta name="apple-mobile-web-app-status-bar-style" content="default"><meta name="apple-mobile-web-app-title" content="fittrackee_client"><link rel="apple-touch-icon" href="/img/icons/apple-touch-icon-152x152.png"><link rel="mask-icon" href="/img/icons/safari-pinned-tab.svg" color="#4DBA87"><meta name="msapplication-TileImage" content="/img/icons/msapplication-icon-144x144.png"><meta name="msapplication-TileColor" content="#000000"></head><body><noscript><strong>We're sorry but FitTrackee doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="/static/js/chunk-vendors.71654064.js"></script><script src="/static/js/app.cb19dec0.js"></script></body></html>

View File

@ -64,7 +64,7 @@ self.__precacheManifest = (self.__precacheManifest || []).concat([
"url": "/img/workouts/mountains.svg"
},
{
"revision": "2805c227385c134ad285de42cc711727",
"revision": "30289b764f066cf8bed7d7fc17033e28",
"url": "/index.html"
},
{
@ -80,7 +80,7 @@ self.__precacheManifest = (self.__precacheManifest || []).concat([
"url": "/static/css/admin.04e24276.css"
},
{
"revision": "721008f76f229741e20e",
"revision": "9b14d931a380bf5149cf",
"url": "/static/css/app.534b9c5c.css"
},
{
@ -108,8 +108,8 @@ self.__precacheManifest = (self.__precacheManifest || []).concat([
"url": "/static/css/reset.bd9657a8.css"
},
{
"revision": "51104bdd3692f36e8e18",
"url": "/static/css/workouts.b4f73c62.css"
"revision": "5e13fc66c78986a630a0",
"url": "/static/css/workouts.d0767062.css"
},
{
"revision": "e719f9244c69e28e7d00e725ca1e280e",
@ -196,8 +196,8 @@ self.__precacheManifest = (self.__precacheManifest || []).concat([
"url": "/static/js/admin.2f1d393d.js"
},
{
"revision": "721008f76f229741e20e",
"url": "/static/js/app.7f21cc2d.js"
"revision": "9b14d931a380bf5149cf",
"url": "/static/js/app.cb19dec0.js"
},
{
"revision": "bd7d183c9f68e5f4027d",
@ -240,7 +240,7 @@ self.__precacheManifest = (self.__precacheManifest || []).concat([
"url": "/static/js/reset.518e646f.js"
},
{
"revision": "51104bdd3692f36e8e18",
"url": "/static/js/workouts.16e33b8b.js"
"revision": "5e13fc66c78986a630a0",
"url": "/static/js/workouts.1c22fd12.js"
}
]);

View File

@ -14,7 +14,7 @@
importScripts("https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js");
importScripts(
"/precache-manifest.23ffc490a01d5278a49f731e9269ae72.js"
"/precache-manifest.90d775e2d744aab1ffc734560cc95fe0.js"
);
workbox.core.setCacheNameDetails({prefix: "fittrackee_client"});

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -28,9 +28,22 @@
class="line-chart"
@mouseleave="emitEmptyCoordinates"
/>
<div class="chart-info">
<div class="no-data-cleaning">
{{ $t('workouts.NO_DATA_CLEANING') }}
</div>
<div class="elevation-start">
<label>
<input
type="checkbox"
:checked="beginElevationAtZero"
@click="beginElevationAtZero = !beginElevationAtZero"
/>
{{ $t('workouts.START_ELEVATION_AT_ZERO') }}
</label>
</div>
</div>
</template>
</Card>
</div>
@ -61,6 +74,7 @@
const { t } = useI18n()
let displayDistance = ref(true)
let beginElevationAtZero = ref(true)
const datasets: ComputedRef<IWorkoutChartData> = computed(() =>
getDatasets(props.workoutData.chartData, t)
)
@ -120,7 +134,7 @@
},
},
yElevation: {
beginAtZero: true,
beginAtZero: beginElevationAtZero.value,
grid: {
drawOnChartArea: false,
},
@ -206,7 +220,9 @@
padding: 0 $default-padding;
}
}
.no-data-cleaning {
.chart-info {
display: flex;
justify-content: space-between;
font-size: 0.85em;
font-style: italic;
}
@ -215,6 +231,12 @@
@media screen and (max-width: $small-limit) {
.card-content {
padding: $default-padding 0;
.chart-info {
display: flex;
flex-direction: column-reverse;
.elevation-start {
padding: $default-padding $default-padding * 1.5 0;
}
.no-data-cleaning {
padding: 0 $default-padding * 2;
}
@ -222,4 +244,5 @@
}
}
}
}
</style>

View File

@ -51,6 +51,7 @@
"SPEED": "speed",
"SPORT": "sport | sports",
"START": "start",
"START_ELEVATION_AT_ZERO": "Elevation axis beginning at 0",
"TITLE": "title",
"TO": "to",
"TOTAL_DURATION": "total duration",

View File

@ -51,6 +51,7 @@
"SPEED": "vitesse",
"SPORT": "sport | sports",
"START": "début",
"START_ELEVATION_AT_ZERO": "Axe pour l'altitude démarrant à 0",
"TITLE": "titre",
"TO": "jusqu'au",
"TOTAL_DURATION": "durée totale",