Skip to content

Commit

Permalink
Activity breakdown on height diff graphs
Browse files Browse the repository at this point in the history
  • Loading branch information
@cbeauchesne
cbeauchesne committed Apr 27, 2021
1 parent 5d7ca90 commit b34ea8a
Show file tree
Hide file tree
Showing 2 changed files with 73 additions and 25 deletions.
64 changes: 49 additions & 15 deletions src/views/portals/outings-stats/OutingsStatsPart.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@
</template>

<script>
import { Histogram, StackedHistogram } from './outings-stats';
import { StackedHistogram } from './outings-stats';
import constants from '@/js/constants';
import common from '@/js/constants/common.json';
Expand Down Expand Up @@ -149,6 +149,24 @@ const formatLengthInMeter = function (length) {
}
};
const activitySplittedValue = function (outing, value) {
/* returns an object where:
* key are outing's activity
* value is the the value in argument divided by the number of outing's activity
*/
const result = {};
if (value) {
for (const activity of outing.activities) {
result[activity] = value / outing.activities.length;
}
}
return result;
};
export default {
props: {
outings: {
Expand Down Expand Up @@ -253,80 +271,96 @@ export default {
// so we display a filter on legend only for the first part (all activities)
const categoryUrlGetter = this.activity ? null : (category) => this.urlBuilder({ activities: category });
new StackedHistogram(this.outings, this.$refs.year_repartition, getOutingYear, (d) => d.activities)
new StackedHistogram(this.outings, this.$refs.year_repartition, getOutingYear)
.y((d) => d.activities)
.color(getActivityColor)
.categoryUrl(categoryUrlGetter)
.categoryLabel((activity) => this.$gettext(activity, 'activities'))
.xUrl((year) => this.urlBuilder({ year }))
.dataUrl(this.activity ? null : (year, category) => this.urlBuilder({ year, activities: category }))
.draw();
new StackedHistogram(this.outings, this.$refs.month_repartition, getOutingMonth, (d) => d.activities)
new StackedHistogram(this.outings, this.$refs.month_repartition, getOutingMonth)
.y((d) => d.activities)
.color(getActivityColor)
.xTickLabel(this.$dateUtils.month)
.categoryUrl(categoryUrlGetter)
.categoryLabel((activity) => this.$gettext(activity, 'activities'))
.xDomain([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]) // always display all months
.draw();
new Histogram(this.outings, this.$refs.height_diff_up, getOutingYear)
.y((outing) => outing.height_diff_up)
new StackedHistogram(this.outings, this.$refs.height_diff_up, getOutingYear)
.y((outing) => activitySplittedValue(outing, outing.height_diff_up))
.color(getActivityColor)
.yTickLabel(formatLengthInMeter)
.categoryUrl((category) => this.urlBuilder({ activities: category, height_diff_up: NOT_NULL_VALUES }))
.categoryLabel((activity) => this.$gettext(activity, 'activities'))
.xUrl((year) => this.urlBuilder({ year, height_diff_up: NOT_NULL_VALUES }))
.dataUrl((year, category) => this.urlBuilder({ year, activities: category, height_diff_up: NOT_NULL_VALUES }))
.draw();
new Histogram(this.outings, this.$refs.height_diff_difficulties, getOutingYear)
.y((outing) => outing.height_diff_difficulties)
new StackedHistogram(this.outings, this.$refs.height_diff_difficulties, getOutingYear)
.y((outing) => activitySplittedValue(outing, outing.height_diff_difficulties))
.color(getActivityColor)
.yTickLabel(formatLengthInMeter)
.categoryUrl((category) => this.urlBuilder({ activities: category, height_diff_difficulties: NOT_NULL_VALUES }))
.categoryLabel((activity) => this.$gettext(activity, 'activities'))
.xUrl((year) =>
this.urlBuilder({
year,
height_diff_difficulties: NOT_NULL_VALUES,
activities: 'mountain_climbing,snow_ice_mixed',
})
)
.dataUrl((year, category) =>
this.urlBuilder({ year, activities: category, height_diff_difficulties: NOT_NULL_VALUES })
)
.draw();
new StackedHistogram(this.outings, this.$refs.rock_free_rating, getOutingYear, (d) => [d.rock_free_rating])
new StackedHistogram(this.outings, this.$refs.rock_free_rating, getOutingYear)
.y((d) => d.rock_free_rating)
.color(getRockRatingColor)
.categoryUrl((rock_free_rating) => this.urlBuilder({ rock_free_rating }))
.xUrl((year) => this.urlBuilder({ year, rock_free_rating: NOT_NULL_VALUES }))
.dataUrl((year, rock_free_rating) => this.urlBuilder({ year, rock_free_rating }))
.draw();
new StackedHistogram(this.outings, this.$refs.global_rating, getOutingYear, (d) => [d.global_rating])
new StackedHistogram(this.outings, this.$refs.global_rating, getOutingYear)
.y((d) => d.global_rating)
.color(getGlobalRatingColor)
.categoryUrl((global_rating) => this.urlBuilder({ global_rating }))
.categoryComparator(compareGlobalRatings)
.xUrl((year) => this.urlBuilder({ year, global_rating: NOT_NULL_VALUES }))
.dataUrl((year, global_rating) => this.urlBuilder({ year, global_rating }))
.draw();
new StackedHistogram(this.outings, this.$refs.labande_global_rating, getOutingYear, (d) => [
d.labande_global_rating,
])
new StackedHistogram(this.outings, this.$refs.labande_global_rating, getOutingYear)
.y((d) => d.labande_global_rating)
.color(getGlobalRatingColor)
.categoryUrl((labande_global_rating) => this.urlBuilder({ labande_global_rating }))
.categoryComparator(compareGlobalRatings)
.xUrl((year) => this.urlBuilder({ year, labande_global_rating: NOT_NULL_VALUES }))
.dataUrl((year, labande_global_rating) => this.urlBuilder({ year, labande_global_rating }))
.draw();
new StackedHistogram(this.outings, this.$refs.ski_rating, getOutingYear, (d) => [d.ski_rating])
new StackedHistogram(this.outings, this.$refs.ski_rating, getOutingYear)
.y((d) => d.ski_rating)
.color(getSkiRatingColor)
.categoryUrl((ski_rating) => this.urlBuilder({ ski_rating }))
.xUrl((year) => this.urlBuilder({ year, ski_rating: NOT_NULL_VALUES }))
.dataUrl((year, ski_rating) => this.urlBuilder({ year, ski_rating }))
.draw();
new StackedHistogram(this.outings, this.$refs.ice_rating, getOutingYear, (d) => [d.ice_rating])
new StackedHistogram(this.outings, this.$refs.ice_rating, getOutingYear)
.y((d) => d.ice_rating)
.color(getIceRatingColor)
.categoryUrl((ice_rating) => this.urlBuilder({ ice_rating }))
.xUrl((year) => this.urlBuilder({ year, ice_rating: NOT_NULL_VALUES }))
.dataUrl((year, ice_rating) => this.urlBuilder({ year, ice_rating }))
.draw();
new StackedHistogram(this.outings, this.$refs.hiking_rating, getOutingYear, (d) => [d.hiking_rating])
new StackedHistogram(this.outings, this.$refs.hiking_rating, getOutingYear)
.y((d) => d.hiking_rating)
.color(getHikingRatingColor)
.categoryUrl((hiking_rating) => this.urlBuilder({ hiking_rating }))
.xUrl((year) => this.urlBuilder({ year, hiking_rating: NOT_NULL_VALUES }))
Expand Down
34 changes: 24 additions & 10 deletions src/views/portals/outings-stats/outings-stats.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -143,9 +143,8 @@ export class Histogram {
}

export class StackedHistogram extends Histogram {
constructor(data, htmlElement, getX, getCategories) {
constructor(data, htmlElement, getX) {
super(data, htmlElement, getX);
this._getCategories = getCategories;
this._getCategoryLabel = (category) => category;
this._color = () => '#F93';
this._categoryComparator = (a, b) => (a < b ? -1 : a > b ? 1 : 0);
Expand All @@ -162,17 +161,32 @@ export class StackedHistogram extends Histogram {
for (const d of this._data) {
const x = this._getX(d);
const y = this._getY(d);
let categories = this._getCategories(d);

for (let category of categories) {
if (!!category) {
const key = `${x}_${category}`;
if (!!y) {
let y_as_object = {};

if (typeof y === 'string') {
// simply use y as a category, and set value to 1
y_as_object[y] = 1;
} else if (Array.isArray(y)) {
// Use item of array as category, and value as 1/length for each category
for (const category of y) {
y_as_object[category] = 1 / y.length;
}
} else {
y_as_object = y;
}

for (const category in y_as_object) {
if (!!category && y_as_object[category] !== 0) {
const key = `${x}_${category}`;

values[key] = values[key] || { x, category, y: 0, yDown: 0, yUp: 0, color: null };
values[key].y += y / categories.length;
values[key] = values[key] || { x, category, y: 0, yDown: 0, yUp: 0, color: null };
values[key].y += y_as_object[category];

all_categories.add(category);
xs.add(x);
all_categories.add(category);
xs.add(x);
}
}
}
}
Expand Down

0 comments on commit b34ea8a

Please sign in to comment.