123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111 |
- <script>
- import VueBarGraph from 'vue-bar-graph';
- import {createApp} from 'vue';
-
- 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() {
- const el = document.getElementById('repo-activity-top-authors-chart');
- if (el) {
- createApp(sfc).mount(el);
- }
- }
-
- export default sfc; // activate the IDE's Vue plugin
- </script>
- <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>
|