1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
11. 11
12. 12
13. 13
14. 14
15. 15
16. 16
17. 17
18. 18
19. 19
20. 20
21. 21
22. 22
23. 23
24. 24
25. 25
26. 26
27. 27
28. 28
29. 29
30. 30
31. 31
32. 32
33. 33
34. 34
35. 35
36. 36
37. 37
38. 38
39. 39
40. 40
41. 41
42. 42
43. 43
44. 44
45. 45
46. 46
47. 47
48. 48
49. 49
50. 50
51. 51
52. 52
53. 53
54. 54
55. 55
56. 56
57. 57
58. 58
59. 59
60. 60
61. 61
62. 62
63. 63
64. 64
65. 65
66. 66
67. 67
68. 68
69. 69
70. 70
71. 71
72. 72
73. 73
74. 74
75. 75
76. 76
77. 77
78. 78
79. 79
80. 80
81. 81
82. 82
83. 83
84. 84
85. 85
86. 86
87. 87
88. 88
89. 89
90. 90
91. 91
92. 92
93. 93
94. 94
95. 95
96. 96
97. 97
98. 98
99. 99
100. 100
101. 101
102. 102
103. 103
104. 104
105. 105
106. 106
107. 107
108. 108
109. 109

<template>
  <div>
    <div class="activity-bar-graph" ref="style" style="width: 0; height: 0;"/>
    <div class="activity-bar-graph-alt" ref="altStyle" style="width: 0; height: 0;"/>
    <vue-bar-graph
      :points="graphPoints"
      :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 #label="opt">
        <g v-for="(author, idx) in graphAuthors" :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 #title="opt">
        <tspan v-for="(author, idx) in graphAuthors" :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';
import {initVueApp} from './VueComponentLoader.js';

const sfc = {
  components: {VueBarGraph},
  data: () => ({
    colors: {
      barColor: 'green',
      textColor: 'black',
      textAltColor: 'white',
    },

    // possible keys:
    // * avatar_link: (...)
    // * commits: (...)
    // * home_link: (...)
    // * login: (...)
    // * name: (...)
    activityTopAuthors: window.config.pageData.repoActivityTopAuthors || [],
  }),
  computed: {
    graphPoints() {
      return this.activityTopAuthors.map((item) => {
        return {
          value: item.commits,
          label: item.name,
        };
      });
    },
    graphAuthors() {
      return this.activityTopAuthors.map((item, idx) => {
        return {
          position: idx + 1,
          ...item,
        };
      });
    },
    graphWidth() {
      return this.activityTopAuthors.length * 40;
    },
  },
  mounted() {
    const refStyle = window.getComputedStyle(this.$refs.style);
    const refAltStyle = window.getComputedStyle(this.$refs.altStyle);

    this.colors.barColor = refStyle.backgroundColor;
    this.colors.textColor = refStyle.color;
    this.colors.textAltColor = refAltStyle.color;
  }
};

export function initRepoActivityTopAuthorsChart() {
  initVueApp('#repo-activity-top-authors-chart', sfc);
}

export default sfc; // this line is necessary to activate the IDE's Vue plugin
</script>