code.gitea.io/gitea@v1.21.7/web_src/js/components/RepoActivityTopAuthors.vue (about)

     1  <script>
     2  import VueBarGraph from 'vue-bar-graph';
     3  import {createApp} from 'vue';
     4  
     5  const sfc = {
     6    components: {VueBarGraph},
     7    data: () => ({
     8      colors: {
     9        barColor: 'green',
    10        textColor: 'black',
    11        textAltColor: 'white',
    12      },
    13  
    14      // possible keys:
    15      // * avatar_link: (...)
    16      // * commits: (...)
    17      // * home_link: (...)
    18      // * login: (...)
    19      // * name: (...)
    20      activityTopAuthors: window.config.pageData.repoActivityTopAuthors || [],
    21    }),
    22    computed: {
    23      graphPoints() {
    24        return this.activityTopAuthors.map((item) => {
    25          return {
    26            value: item.commits,
    27            label: item.name,
    28          };
    29        });
    30      },
    31      graphAuthors() {
    32        return this.activityTopAuthors.map((item, idx) => {
    33          return {
    34            position: idx + 1,
    35            ...item,
    36          };
    37        });
    38      },
    39      graphWidth() {
    40        return this.activityTopAuthors.length * 40;
    41      },
    42    },
    43    mounted() {
    44      const refStyle = window.getComputedStyle(this.$refs.style);
    45      const refAltStyle = window.getComputedStyle(this.$refs.altStyle);
    46  
    47      this.colors.barColor = refStyle.backgroundColor;
    48      this.colors.textColor = refStyle.color;
    49      this.colors.textAltColor = refAltStyle.color;
    50    }
    51  };
    52  
    53  export function initRepoActivityTopAuthorsChart() {
    54    const el = document.getElementById('repo-activity-top-authors-chart');
    55    if (el) {
    56      createApp(sfc).mount(el);
    57    }
    58  }
    59  
    60  export default sfc; // activate the IDE's Vue plugin
    61  </script>
    62  <template>
    63    <div>
    64      <div class="activity-bar-graph" ref="style" style="width: 0; height: 0;"/>
    65      <div class="activity-bar-graph-alt" ref="altStyle" style="width: 0; height: 0;"/>
    66      <vue-bar-graph
    67        :points="graphPoints"
    68        :show-x-axis="true"
    69        :show-y-axis="false"
    70        :show-values="true"
    71        :width="graphWidth"
    72        :bar-color="colors.barColor"
    73        :text-color="colors.textColor"
    74        :text-alt-color="colors.textAltColor"
    75        :height="100"
    76        :label-height="20"
    77      >
    78        <template #label="opt">
    79          <g v-for="(author, idx) in graphAuthors" :key="author.position">
    80            <a
    81              v-if="opt.bar.index === idx && author.home_link"
    82              :href="author.home_link"
    83            >
    84              <image
    85                :x="`${opt.bar.midPoint - 10}px`"
    86                :y="`${opt.bar.yLabel}px`"
    87                height="20"
    88                width="20"
    89                :href="author.avatar_link"
    90              />
    91            </a>
    92            <image
    93              v-else-if="opt.bar.index === idx"
    94              :x="`${opt.bar.midPoint - 10}px`"
    95              :y="`${opt.bar.yLabel}px`"
    96              height="20"
    97              width="20"
    98              :href="author.avatar_link"
    99            />
   100          </g>
   101        </template>
   102        <template #title="opt">
   103          <tspan v-for="(author, idx) in graphAuthors" :key="author.position">
   104            <tspan v-if="opt.bar.index === idx">
   105              {{ author.name }}
   106            </tspan>
   107          </tspan>
   108        </template>
   109      </vue-bar-graph>
   110    </div>
   111  </template>