From d4d0bbe94d6068794b9aaf8f368ab7a5fc20a1d4 Mon Sep 17 00:00:00 2001
From: cbeauchesne <charles.de.beauchesne@gmail.com>
Date: Wed, 24 Mar 2021 11:28:38 +0100
Subject: [PATCH] Add query items

---
 src/views/documents/utils/QueryItems.vue |  2 +-
 src/views/portals/OutingsStatsView.vue   | 33 ++++++++++++++++++++----
 src/views/portals/utils/outings-stats.js |  5 +++-
 3 files changed, 33 insertions(+), 7 deletions(-)

diff --git a/src/views/documents/utils/QueryItems.vue b/src/views/documents/utils/QueryItems.vue
index 167a00745e..ca7193e514 100644
--- a/src/views/documents/utils/QueryItems.vue
+++ b/src/views/documents/utils/QueryItems.vue
@@ -218,7 +218,7 @@ export default {
     },
 
     documentType() {
-      return this.$route.name.slice(0, -1);
+      return this.$route.name.split('-')[0].slice(0, -1);
     },
 
     associations() {
diff --git a/src/views/portals/OutingsStatsView.vue b/src/views/portals/OutingsStatsView.vue
index 6d5b3d0070..eeaaaa2344 100644
--- a/src/views/portals/OutingsStatsView.vue
+++ b/src/views/portals/OutingsStatsView.vue
@@ -1,16 +1,20 @@
 <template>
   <div class="section">
-    <h1>
-      <span>Outing statistics</span>
+    <html-header :title="$gettext('Outings statistics')" />
+    <h1 class="title is-3 header-section">
+      <span v-translate>Outing statistics</span>
       <span v-if="!outings">{{ Math.round(loadingPercentage * 100) }}%</span>
     </h1>
-    <div v-if="outings" class="columns">
+
+    <query-items class="filter-section" />
+
+    <div v-if="outings" class="columns result-section">
       <div class="column">
-        <h2>By year</h2>
+        <h2 class="title is-4" v-translate>By year</h2>
         <div ref="year_repartition"></div>
       </div>
       <div class="column">
-        <h2>By month</h2>
+        <h2 class="title is-4" v-translate>By month</h2>
         <div ref="month_repartition"></div>
       </div>
     </div>
@@ -22,6 +26,7 @@ import { createHistogram } from './utils/outings-stats';
 
 import c2c from '@/js/apis/c2c';
 import d3 from '@/js/libs/d3';
+import QueryItems from '@/views/documents/utils/QueryItems';
 
 const getOutingYear = function (outing) {
   return parseInt(outing.date_start.substring(0, 4), 10);
@@ -31,6 +36,10 @@ const getOutingMonth = function (outing) {
 };
 
 export default {
+  components: {
+    QueryItems,
+  },
+
   data() {
     return {
       outings: null,
@@ -66,3 +75,17 @@ export default {
   },
 };
 </script>
+
+<style scoped lang="scss">
+.filter-section {
+  padding-bottom: 0.5rem;
+  clear: both;
+}
+
+.result-section {
+  margin-top: 0.5rem;
+  border-top: 1px solid lightgrey;
+  padding-top: 0.5rem;
+  clear: both;
+}
+</style>
diff --git a/src/views/portals/utils/outings-stats.js b/src/views/portals/utils/outings-stats.js
index 2f65f7f4d5..8338c186f5 100644
--- a/src/views/portals/utils/outings-stats.js
+++ b/src/views/portals/utils/outings-stats.js
@@ -1,7 +1,10 @@
 export function createHistogram(d3, outings, htmlElement, aggregationFuntion) {
+  // clean
+  htmlElement.innerHTML = '';
+
   // set the dimensions and margins of the graph
   var margin = { top: 10, right: 30, bottom: 30, left: 40 },
-    width = 460 - margin.left - margin.right,
+    width = htmlElement.offsetWidth - margin.left - margin.right,
     height = 400 - margin.top - margin.bottom;
 
   // append the svg object to the body of the page