Add top author stats to activity page (#9615)

web_src/js/components/ActivityTopAuthors.vue

@@ -0,0 +1,102 @@
+<template>
+    <div>
+        <div class="activity-bar-graph" ref="style" style="width:0px;height:0px"></div>
+        <div class="activity-bar-graph-alt" ref="altStyle" style="width:0px;height:0px"></div>
+        <vue-bar-graph
+            :points="graphData"
+            :show-x-axis="true"
+            :show-y-axis="false"
+            :show-values="true"
+            :width="graphWidth"
+            :bar-color="colors.barColor"
+            :text-color="colors.textColor"
+            :text-alt-color="colors.textAltColor"
+            :height="100"
+            :label-height="20"
+        >
+            <template v-slot:label="opt">
+                <g v-for="(author, idx) in authors" :key="author.position">
+                    <a
+                        v-if="opt.bar.index === idx && author.home_link !== ''"
+                        :href="author.home_link"
+                    >
+                        <image
+                            :x="`${opt.bar.midPoint - 10}px`"
+                            :y="`${opt.bar.yLabel}px`"
+                            height="20"
+                            width="20"
+                            :href="author.avatar_link"
+                        />
+                    </a>
+                    <image
+                        v-else-if="opt.bar.index === idx"
+                        :x="`${opt.bar.midPoint - 10}px`"
+                        :y="`${opt.bar.yLabel}px`"
+                        height="20"
+                        width="20"
+                        :href="author.avatar_link"
+                    />
+                </g>
+            </template>
+            <template v-slot:title="opt">
+                <tspan v-for="(author, idx) in authors" :key="author.position"><tspan v-if="opt.bar.index === idx">{{ author.name }}</tspan></tspan>
+            </template>
+        </vue-bar-graph>
+    </div>
+</template>
+
+<script>
+import VueBarGraph from 'vue-bar-graph';
+
+export default {
+    components: {
+        VueBarGraph,
+    },
+    props: {
+        data: { type: Array, default: () => [] },
+    },
+    mounted() {
+        const st = window.getComputedStyle(this.$refs.style);
+        const stalt = window.getComputedStyle(this.$refs.altStyle);
+
+        this.colors.barColor = st.backgroundColor;
+        this.colors.textColor = st.color;
+        this.colors.textAltColor = stalt.color;
+    },
+    data() {
+        return {
+            colors: {
+                barColor: 'green',
+                textColor: 'black',
+                textAltColor: 'white',
+            },
+        };
+    },
+    computed: {
+        graphData() {
+            return this.data.map((item) => {
+                return {
+                    value: item.commits,
+                    label: item.name,
+                };
+            });
+        },
+        authors() {
+            return this.data.map((item, idx) => {
+                return {
+                    position: idx+1,
+                    ...item,
+                }
+            });
+        },
+        graphWidth() {
+            return this.data.length * 40;
+        },
+    },
+    methods: {
+        hasHomeLink(i) {
+            return this.graphData[i].homeLink !== '' && this.graphData[i].homeLink !== null;
+        },
+    }
+}
+</script>

web_src/js/index.js

@@ -7,6 +7,8 @@ import './gitGraphLoader.js';
 import './semanticDropdown.js';
 import initContextPopups from './features/contextPopup';
 
+import ActivityTopAuthors from './components/ActivityTopAuthors.vue';
+
 function htmlEncode(text) {
   return jQuery('<div />').text(text).html();
 }
@@ -2894,9 +2896,13 @@ function initVueApp() {
     delimiters: ['${', '}'],
     el,
     data: {
-      searchLimit: document.querySelector('meta[name=_search_limit]').content,
+      searchLimit: (document.querySelector('meta[name=_search_limit]') || {}).content,
       suburl: document.querySelector('meta[name=_suburl]').content,
-      uid: Number(document.querySelector('meta[name=_context_uid]').content),
+      uid: Number((document.querySelector('meta[name=_context_uid]') || {}).content),
+      activityTopAuthors: window.ActivityTopAuthors || [],
+    },
+    components: {
+      ActivityTopAuthors,
     },
   });
 }

web_src/less/_base.less

@@ -999,6 +999,15 @@ footer {
     background-color: #025900;
 }
 
+.activity-bar-graph {
+    background-color: #6cc644;
+    color: #000000;
+}
+
+.activity-bar-graph-alt {
+    color: #000000;
+}
+
 .archived-icon {
     color: lighten(#000000, 70%) !important;
 }

web_src/less/themes/arc-green.less

@@ -1353,6 +1353,11 @@ a.ui.labels .label:hover {
     .heatmap(100%);
 }
 
+.activity-bar-graph {
+    background-color: #a0cc75;
+    color: #9e9e9e;
+}
+
 /* code mirror dark theme */
 
 .CodeMirror {