Alexander/FitTrackee
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #119 from SamR1/update-chart-legend

Browse Source 
Update workout chart legend
This commit is contained in:
Sam 2021-11-28 16:12:58 +01:00 committed by GitHub
commit 406574168b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
22 changed files with 126 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
CHANGELOG.md
View File

@ -6,9 +6,10 @@
#### New Features
* [#116](https://github.com/SamR1/FitTrackee/issues/116) - Better UI for Speed and Elevation buttons in the graph of the Workout screen
* [#5](https://github.com/SamR1/FitTrackee/issues/5) - Display a chart with average speed
In this release 1 issue was closed.
In this release 2 issue were closed.
## Version 0.5.0 (2021/11/14)

BIN
docs/_images/fittrackee_screenshot-02.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 367 KiB

After

Width:  |  Height:  |  Size: 352 KiB

3
docs/_sources/changelog.md.txt
View File

@ -6,9 +6,10 @@
#### New Features
* [#116](https://github.com/SamR1/FitTrackee/issues/116) - Better UI for Speed and Elevation buttons in the graph of the Workout screen
* [#5](https://github.com/SamR1/FitTrackee/issues/5) - Display a chart with average speed
In this release 1 issue was closed.
In this release 2 issue were closed.
## Version 0.5.0 (2021/11/14)

3
docs/changelog.html
View File

@ -284,9 +284,10 @@
<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/116">#116</a> - Better UI for Speed and Elevation buttons in the graph of the Workout screen</p></li>
<li><p><a class="reference external" href="https://github.com/SamR1/FitTrackee/issues/5">#5</a> - Display a chart with average speed</p></li>
</ul>
<p>In this release 1 issue was closed.</p>
<p>In this release 2 issue were closed.</p>
</section>
</section>
</section>

2
docs/searchindex.js
View File

File diff suppressed because one or more lines are too long

BIN
docsrc/source/_images/fittrackee_screenshot-02.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 367 KiB

After

Width:  |  Height:  |  Size: 352 KiB

2
fittrackee/dist/index.html vendored
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.babfd43e.css" rel="prefetch"><link href="/static/css/main.4a1640fb.css" rel="prefetch"><link href="/static/css/main~workouts.0edb3403.css" rel="prefetch"><link href="/static/css/profile.05400f70.css" rel="prefetch"><link href="/static/css/reset.46776e72.css" rel="prefetch"><link href="/static/css/workouts.84cbed34.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.8ecc731b.js" rel="prefetch"><link href="/static/js/main~workouts.6afa0411.js" rel="prefetch"><link href="/static/js/profile.62578012.js" rel="prefetch"><link href="/static/js/reset.518e646f.js" rel="prefetch"><link href="/static/js/workouts.ca9449b1.js" rel="prefetch"><link href="/static/css/app.2b8c39ab.css" rel="preload" as="style"><link href="/static/js/app.aa3fc8a8.js" rel="preload" as="script"><link href="/static/js/chunk-vendors.caa4fc1c.js" rel="preload" as="script"><link href="/static/css/app.2b8c39ab.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.caa4fc1c.js"></script><script src="/static/js/app.aa3fc8a8.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.babfd43e.css" rel="prefetch"><link href="/static/css/main.4a1640fb.css" rel="prefetch"><link href="/static/css/main~workouts.0edb3403.css" rel="prefetch"><link href="/static/css/profile.05400f70.css" rel="prefetch"><link href="/static/css/reset.46776e72.css" rel="prefetch"><link href="/static/css/workouts.197ab953.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.8ecc731b.js" rel="prefetch"><link href="/static/js/main~workouts.6afa0411.js" rel="prefetch"><link href="/static/js/profile.62578012.js" rel="prefetch"><link href="/static/js/reset.518e646f.js" rel="prefetch"><link href="/static/js/workouts.1c155cb9.js" rel="prefetch"><link href="/static/css/app.2b8c39ab.css" rel="preload" as="style"><link href="/static/js/app.b027dbd7.js" rel="preload" as="script"><link href="/static/js/chunk-vendors.caa4fc1c.js" rel="preload" as="script"><link href="/static/css/app.2b8c39ab.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.caa4fc1c.js"></script><script src="/static/js/app.b027dbd7.js"></script></body></html>

16
fittrackee/dist/precache-manifest.eb56f78718c678088fa66ae97922cb98.js → fittrackee/dist/precache-manifest.2e2eb84e4accc8b7d67ca2003d6f2c3d.js vendored
View File

@ -64,7 +64,7 @@ self.__precacheManifest = (self.__precacheManifest || []).concat([
"url": "/img/workouts/mountains.svg"
},
{
"revision": "daeb08eb2247d9fbbfce6f460f1066be",
"revision": "3b09ea8a7fce0c991aee2536ab72be32",
"url": "/index.html"
},
{
@ -80,7 +80,7 @@ self.__precacheManifest = (self.__precacheManifest || []).concat([
"url": "/static/css/admin.babfd43e.css"
},
{
"revision": "4fefe86bda62538fef01",
"revision": "5db8c0a17e329affd1b3",
"url": "/static/css/app.2b8c39ab.css"
},
{
@ -108,8 +108,8 @@ self.__precacheManifest = (self.__precacheManifest || []).concat([
"url": "/static/css/reset.46776e72.css"
},
{
"revision": "03d9a79c5f845c47ef9c",
"url": "/static/css/workouts.84cbed34.css"
"revision": "c5e16df5dc480079541e",
"url": "/static/css/workouts.197ab953.css"
},
{
"revision": "e719f9244c69e28e7d00e725ca1e280e",
@ -196,8 +196,8 @@ self.__precacheManifest = (self.__precacheManifest || []).concat([
"url": "/static/js/admin.2f1d393d.js"
},
{
"revision": "4fefe86bda62538fef01",
"url": "/static/js/app.aa3fc8a8.js"
"revision": "5db8c0a17e329affd1b3",
"url": "/static/js/app.b027dbd7.js"
},
{
"revision": "bd7d183c9f68e5f4027d",
@ -240,7 +240,7 @@ self.__precacheManifest = (self.__precacheManifest || []).concat([
"url": "/static/js/reset.518e646f.js"
},
{
"revision": "03d9a79c5f845c47ef9c",
"url": "/static/js/workouts.ca9449b1.js"
"revision": "c5e16df5dc480079541e",
"url": "/static/js/workouts.1c155cb9.js"
}
]);

2
fittrackee/dist/service-worker.js vendored
View File

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

1
fittrackee/dist/static/css/workouts.197ab953.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
fittrackee/dist/static/css/workouts.84cbed34.css vendored
View File

File diff suppressed because one or more lines are too long

4
fittrackee/dist/static/js/app.aa3fc8a8.js → fittrackee/dist/static/js/app.b027dbd7.js vendored
View File

File diff suppressed because one or more lines are too long

2
fittrackee/dist/static/js/app.aa3fc8a8.js.map → fittrackee/dist/static/js/app.b027dbd7.js.map vendored
View File

File diff suppressed because one or more lines are too long

2
fittrackee/dist/static/js/workouts.1c155cb9.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
fittrackee/dist/static/js/workouts.1c155cb9.js.map vendored Normal file
View File

File diff suppressed because one or more lines are too long

2
fittrackee/dist/static/js/workouts.ca9449b1.js vendored
View File

File diff suppressed because one or more lines are too long

1
fittrackee/dist/static/js/workouts.ca9449b1.js.map vendored
View File

File diff suppressed because one or more lines are too long

36
fittrackee_client/src/components/Workout/WorkoutChart.vue → fittrackee_client/src/components/Workout/WorkoutDetail/WorkoutChart/index.vue
View File

@ -23,6 +23,7 @@
{{ $t('workouts.DURATION') }}
</label>
</div>
<div id="chart-legend" />
<LineChart
v-bind="lineChartProps"
class="line-chart"
@ -55,6 +56,7 @@
import { LineChart, useLineChart } from 'vue-chart-3'
import { useI18n } from 'vue-i18n'
import { htmlLegendPlugin } from '@/components/Workout/WorkoutDetail/WorkoutChart/legend'
import { TUnit } from '@/types/units'
import { IUserProfile } from '@/types/user'
import {
@ -187,11 +189,18 @@
},
},
},
legend: {
display: false,
},
htmlLegend: {
containerID: 'chart-legend',
},
},
}))
const { lineChartProps } = useLineChart({
chartData,
options,
plugins: [htmlLegendPlugin],
})
function updateDisplayDistance() {
@ -237,6 +246,33 @@
font-size: 0.85em;
font-style: italic;
}
#chart-legend {
display: flex;
justify-content: center;
ul {
display: flex;
margin-bottom: 0;
padding: 0;
li {
cursor: pointer;
display: flex;
font-size: 0.85em;
padding: 0 $default-padding * 0.5;
span {
border-radius: 5%;
border-style: solid;
border-width: 1.5px;
height: 10px;
margin-top: 4px;
margin-left: 2px;
width: 20px;
}
}
}
}
}
@media screen and (max-width: $small-limit) {

63
fittrackee_client/src/components/Workout/WorkoutDetail/WorkoutChart/legend.ts Normal file
View File

@ -0,0 +1,63 @@
import { Chart, LegendItem } from 'chart.js'
const getOrCreateLegendList = (id: string): HTMLUListElement => {
const legendContainer = document.getElementById(id)
if (legendContainer) {
let listContainer = legendContainer.querySelector('ul')
if (!listContainer) {
listContainer = document.createElement('ul')
legendContainer.appendChild(listContainer)
}
return listContainer
}
throw new Error('No legend container')
}
export const htmlLegendPlugin = {
id: 'htmlLegend',
afterUpdate(
chart: Chart,
args: Record<string, unknown>,
options: Record<string, string>
): void {
const ul = getOrCreateLegendList(options.containerID)
while (ul.firstChild) {
ul.firstChild.remove()
}
const legendItems = chart.options.plugins?.legend?.labels?.generateLabels
? chart.options.plugins?.legend?.labels?.generateLabels(chart)
: []
legendItems.forEach((item: LegendItem) => {
const li = document.createElement('li')
li.onclick = () => {
chart.setDatasetVisibility(
item.datasetIndex,
!chart.isDatasetVisible(item.datasetIndex)
)
chart.update()
}
const checkBox = document.createElement('input')
if (checkBox) {
checkBox.type = 'checkbox'
checkBox.id = item.text
checkBox.checked = !item.hidden
}
const text = document.createTextNode(item.text)
const boxSpan = document.createElement('span')
if (boxSpan) {
boxSpan.style.background = String(item.fillStyle)
boxSpan.style.borderColor = String(item.strokeStyle)
}
li.appendChild(checkBox)
li.appendChild(text)
li.appendChild(boxSpan)
ul.appendChild(li)
})
},
}

0
fittrackee_client/src/components/Workout/WorkoutNotes.vue → fittrackee_client/src/components/Workout/WorkoutDetail/WorkoutNotes.vue
View File

0
fittrackee_client/src/components/Workout/WorkoutSegments.vue → fittrackee_client/src/components/Workout/WorkoutDetail/WorkoutSegments.vue
View File

6
fittrackee_client/src/views/workouts/Workout.vue
View File

@ -52,10 +52,10 @@
import { useRoute } from 'vue-router'
import NotFound from '@/components/Common/NotFound.vue'
import WorkoutChart from '@/components/Workout/WorkoutChart.vue'
import WorkoutDetail from '@/components/Workout/WorkoutDetail/index.vue'
import WorkoutNotes from '@/components/Workout/WorkoutNotes.vue'
import WorkoutSegments from '@/components/Workout/WorkoutSegments.vue'
import WorkoutChart from '@/components/Workout/WorkoutDetail/WorkoutChart/index.vue'
import WorkoutNotes from '@/components/Workout/WorkoutDetail/WorkoutNotes.vue'
import WorkoutSegments from '@/components/Workout/WorkoutDetail/WorkoutSegments.vue'
import {
AUTH_USER_STORE,
SPORTS_STORE,