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') }}
</div>
<div class="elevation-start">
<div class="elevation-start" v-if="hasElevation">
<label>
<input
type="checkbox"
@ -82,6 +82,9 @@
const datasets: ComputedRef<IWorkoutChartData> = computed(() =>
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 fromMUnit = getUnitTo('m')
const chartData: ComputedRef<ChartData<'line'>> = computed(() => ({
@ -141,6 +144,7 @@
},
yElevation: {
beginAtZero: beginElevationAtZero.value,
display: hasElevation.value,
grid: {
drawOnChartArea: false,
},
@ -194,6 +198,7 @@
},
htmlLegend: {
containerID: 'chart-legend',
displayElevation: hasElevation.value,
},
},
}))

View File

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

View File

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

View File

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