Client - style fix on charts
This commit is contained in:
parent
e4d4ffb3e8
commit
90269af04f
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="chart">
|
||||
<Bar :data="chartData" :options="options" class="bar-chart" />
|
||||
<div class="bar-chart" :class="{ minimal: !fullStats }">
|
||||
<Bar :data="chartData" :options="options" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -41,7 +41,7 @@
|
||||
}))
|
||||
const options = computed<ChartOptions<'bar'>>(() => ({
|
||||
responsive: true,
|
||||
maintainAspectRatio: true,
|
||||
maintainAspectRatio: false,
|
||||
animation: false,
|
||||
layout: {
|
||||
padding: {
|
||||
@ -198,3 +198,20 @@
|
||||
: 'km'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '~@/scss/vars.scss';
|
||||
|
||||
.bar-chart {
|
||||
min-height: 400px;
|
||||
&.minimal {
|
||||
min-height: 300px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: $small-limit) {
|
||||
&.minimal {
|
||||
min-height: 290px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
@ -24,13 +24,14 @@
|
||||
</label>
|
||||
</div>
|
||||
<div id="chart-legend" />
|
||||
<Line
|
||||
class="line-chart"
|
||||
:data="chartData"
|
||||
:options="options"
|
||||
:plugins="plugins"
|
||||
@mouseleave="emitEmptyCoordinates"
|
||||
/>
|
||||
<div class="line-chart">
|
||||
<Line
|
||||
:data="chartData"
|
||||
:options="options"
|
||||
:plugins="plugins"
|
||||
@mouseleave="emitEmptyCoordinates"
|
||||
/>
|
||||
</div>
|
||||
<div class="chart-info">
|
||||
<div class="no-data-cleaning">
|
||||
{{ $t('workouts.NO_DATA_CLEANING') }}
|
||||
@ -107,7 +108,7 @@
|
||||
)
|
||||
const options = computed<ChartOptions<'line'>>(() => ({
|
||||
responsive: true,
|
||||
maintainAspectRatio: true,
|
||||
maintainAspectRatio: false,
|
||||
animation: false,
|
||||
layout: {
|
||||
padding: {
|
||||
@ -278,6 +279,9 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.line-chart {
|
||||
min-height: 400px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $small-limit) {
|
||||
@ -293,6 +297,9 @@
|
||||
padding: 0 $default-padding * 2;
|
||||
}
|
||||
}
|
||||
.line-chart {
|
||||
min-height: 338px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user