#244 [sources] sources year chart (for admins)

components/Chart.vue

@@ -5,7 +5,7 @@
 <script>
     export default {
         props: {
-            name: { required: true },
+            label: { required: true },
             data: { required: true },
             cumulative: { type: Boolean },
         },
@@ -26,12 +26,12 @@
                     data: {
                         labels: Object.keys(this.data),
                         datasets: [{
-                            label: this.cumulative ? `cumulative ${this.name}` : `new ${this.name} per day`,
+                            label: this.label,
                             data: this.cumulative ? this.accumulate(Object.values(this.data)) : Object.values(this.data),
                             fill: false,
                             borderColor: '#C71585',
                         }],
-                    }
+                    },
                 });
             },
             accumulate(values) {

components/ChartSet.vue

@@ -10,8 +10,8 @@
             </div>
         </div>
         <div class="card-body" v-if="mode">
-            <Chart :name="name" :data="data" v-show="mode === 'daily'"/>
-            <Chart :name="name" :data="data" cumulative v-show="mode === 'cumulative'"/>
+            <Chart :data="data" :label="`cumulative ${name}`" v-show="mode === 'daily'"/>
+            <Chart :data="data" :label="`new ${name} per day`" cumulative v-show="mode === 'cumulative'"/>
         </div>
     </div>
 </template>

components/SourceList.vue

@@ -5,6 +5,7 @@
             <Icon v="info-circle"/>
             <LinkedText :text="pronoun.sourcesInfo"/>
         </div>
+        <SourcesChart :sources="sources" :label="pronoun ? pronoun.name() : ''"/>
         <ul class="list-unstyled">
             <li v-for="source in sources" :key="source.id" v-if="isVisible(source)" class="my-2 clearfix">
                 <Source :source="source" :manage="manage" @edit-source="edit"/>

components/SourcesChart.vue

@@ -0,0 +1,53 @@
+<template>
+    <div v-if="publishDates !== null && $isGranted('sources')" class="card">
+        <div class="card-body">
+            <p class="small">
+                <Icon v="chart-line"/>
+                This chart is only visible for the admins.
+                Please take it with a grain of salt, considering that our list of sources is very incomplete.
+            </p>
+            <Chart :data="publishDates" :label="label"/>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        props: {
+            sources: { required: true },
+            label: { required: true },
+        },
+        computed: {
+            publishDates() {
+                if (this.sources === undefined) {
+                    return null;
+                }
+                const dates = {};
+                let count = 0;
+                let min, max;
+                for (let source of this.sources) {
+                    if (source.year) {
+                        if (dates[source.year] === undefined) { dates[source.year] = 0; }
+                        dates[source.year]++;
+                        count++;
+                        if (min === undefined || source.year < min) {
+                            min = source.year;
+                        }
+                        if (max === undefined || source.year > max) {
+                            max = source.year;
+                        }
+                    }
+                }
+                if (Object.keys(dates).length < 2 || count < 5) {
+                    return null;
+                }
+                for (let i = min + 1; i < max; i++) {
+                    if (dates[i] === undefined) {
+                        dates[i] = 0;
+                    }
+                }
+                return dates;
+            },
+        },
+    }
+</script>

routes/sources.vue

@@ -13,6 +13,8 @@
             <Share :title="$t('sources.headerLonger')"/>
         </section>
 
+        <SourcesChart :sources="sources" label="all pronouns"/>
+
         <Loading :value="sourceLibrary" size="5rem"><template v-if="sourceLibrary !== undefined">
 
         <section v-show="config.sources.submit">