Client - do not display elevation chart when no elevation

This commit is contained in:
Sam 2023-07-18 21:11:32 +02:00
parent 62f3940e7d
commit 12615e980e
4 changed files with 18 additions and 5 deletions

View File

@ -34,7 +34,7 @@
{{ $t('workouts.NO_DATA_CLEANING') }} {{ $t('workouts.NO_DATA_CLEANING') }}
</div> </div>
<div class="elevation-start"> <div class="elevation-start" v-if="hasElevation">
<label> <label>
<input <input
type="checkbox" type="checkbox"
@ -82,6 +82,9 @@
const datasets: ComputedRef<IWorkoutChartData> = computed(() => const datasets: ComputedRef<IWorkoutChartData> = computed(() =>
getDatasets(props.workoutData.chartData, t, props.authUser.imperial_units) getDatasets(props.workoutData.chartData, t, props.authUser.imperial_units)
) )
const hasElevation = computed(
() => datasets.value && datasets.value.datasets.elevation.data.length > 0
)
const fromKmUnit = getUnitTo('km') const fromKmUnit = getUnitTo('km')
const fromMUnit = getUnitTo('m') const fromMUnit = getUnitTo('m')
const chartData: ComputedRef<ChartData<'line'>> = computed(() => ({ const chartData: ComputedRef<ChartData<'line'>> = computed(() => ({
@ -141,6 +144,7 @@
}, },
yElevation: { yElevation: {
beginAtZero: beginElevationAtZero.value, beginAtZero: beginElevationAtZero.value,
display: hasElevation.value,
grid: { grid: {
drawOnChartArea: false, drawOnChartArea: false,
}, },
@ -194,6 +198,7 @@
}, },
htmlLegend: { htmlLegend: {
containerID: 'chart-legend', containerID: 'chart-legend',
displayElevation: hasElevation.value,
}, },
}, },
})) }))

View File

@ -30,6 +30,12 @@ export const htmlLegendPlugin = {
: [] : []
legendItems.forEach((item: LegendItem) => { legendItems.forEach((item: LegendItem) => {
if (
!chart.config.options?.scales?.yElevation?.display &&
item.datasetIndex === 1 // elevation
) {
return
}
const li = document.createElement('li') const li = document.createElement('li')
li.onclick = () => { li.onclick = () => {
if (item.datasetIndex !== undefined) { if (item.datasetIndex !== undefined) {

View File

@ -143,7 +143,7 @@ export type TWorkoutsPayload = TPaginationPayload & {
export interface IWorkoutApiChartData { export interface IWorkoutApiChartData {
distance: number distance: number
duration: number duration: number
elevation: number elevation?: number
latitude: number latitude: number
longitude: number longitude: number
speed: number speed: number

View File

@ -43,9 +43,11 @@ export const getDatasets = (
datasets.speed.data.push( datasets.speed.data.push(
convertStatsDistance('km', data.speed, useImperialUnits) convertStatsDistance('km', data.speed, useImperialUnits)
) )
datasets.elevation.data.push( if (data.elevation !== undefined) {
convertStatsDistance('m', data.elevation, useImperialUnits) datasets.elevation.data.push(
) convertStatsDistance('m', data.elevation, useImperialUnits)
)
}
coordinates.push({ latitude: data.latitude, longitude: data.longitude }) coordinates.push({ latitude: data.latitude, longitude: data.longitude })
}) })