githaven/web_src/js/components/RepoCodeFrequency.vue

<script lang="ts">
import {SvgIcon} from '../svg.ts';
import {
  Chart,
  Legend,
  LinearScale,
  TimeScale,
  PointElement,
  LineElement,
  Filler,
} from 'chart.js';
import {GET} from '../modules/fetch.ts';
import {Line as ChartLine} from 'vue-chartjs';
import {
  startDaysBetween,
  firstStartDateAfterDate,
  fillEmptyStartDaysWithZeroes,
} from '../utils/time.ts';
import {chartJsColors} from '../utils/color.ts';
import {sleep} from '../utils.ts';
import 'chartjs-adapter-dayjs-4/dist/chartjs-adapter-dayjs-4.esm';

const {pageData} = window.config;

Chart.defaults.color = chartJsColors.text;
Chart.defaults.borderColor = chartJsColors.border;

Chart.register(
  TimeScale,
  LinearScale,
  Legend,
  PointElement,
  LineElement,
  Filler,
);

export default {
  components: {ChartLine, SvgIcon},
  props: {
    locale: {
      type: Object,
      required: true,
    },
  },
  data: () => ({
    isLoading: false,
    errorText: '',
    repoLink: pageData.repoLink || [],
    data: [],
  }),
  mounted() {
    this.fetchGraphData();
  },
  methods: {
    async fetchGraphData() {
      this.isLoading = true;
      try {
        let response;
        do {
          response = await GET(`${this.repoLink}/activity/code-frequency/data`);
          if (response.status === 202) {
            await sleep(1000); // wait for 1 second before retrying
          }
        } while (response.status === 202);
        if (response.ok) {
          this.data = await response.json();
          const weekValues = Object.values(this.data);
          const start = weekValues[0].week;
          const end = firstStartDateAfterDate(new Date());
          const startDays = startDaysBetween(start, end);
          this.data = fillEmptyStartDaysWithZeroes(startDays, this.data);
          this.errorText = '';
        } else {
          this.errorText = response.statusText;
        }
      } catch (err) {
        this.errorText = err.message;
      } finally {
        this.isLoading = false;
      }
    },

    toGraphData(data) {
      return {
        datasets: [
          {
            data: data.map((i) => ({x: i.week, y: i.additions})),
            pointRadius: 0,
            pointHitRadius: 0,
            fill: true,
            label: 'Additions',
            backgroundColor: chartJsColors['additions'],
            borderWidth: 0,
            tension: 0.3,
          },
          {
            data: data.map((i) => ({x: i.week, y: -i.deletions})),
            pointRadius: 0,
            pointHitRadius: 0,
            fill: true,
            label: 'Deletions',
            backgroundColor: chartJsColors['deletions'],
            borderWidth: 0,
            tension: 0.3,
          },
        ],
      };
    },

    getOptions() {
      return {
        responsive: true,
        maintainAspectRatio: false,
        animation: true,
        plugins: {
          legend: {
            display: true,
          },
        },
        scales: {
          x: {
            type: 'time',
            grid: {
              display: false,
            },
            time: {
              minUnit: 'month',
            },
            ticks: {
              maxRotation: 0,
              maxTicksLimit: 12,
            },
          },
          y: {
            ticks: {
              maxTicksLimit: 6,
            },
          },
        },
      };
    },
  },
};
</script>
<template>
  <div>
    <div class="ui header tw-flex tw-items-center tw-justify-between">
      {{ isLoading ? locale.loadingTitle : errorText ? locale.loadingTitleFailed: `Code frequency over the history of ${repoLink.slice(1)}` }}
    </div>
    <div class="tw-flex ui segment main-graph">
      <div v-if="isLoading || errorText !== ''" class="gt-tc tw-m-auto">
        <div v-if="isLoading">
          <SvgIcon name="octicon-sync" class="tw-mr-2 job-status-rotate"/>
          {{ locale.loadingInfo }}
        </div>
        <div v-else class="text red">
          <SvgIcon name="octicon-x-circle-fill"/>
          {{ errorText }}
        </div>
      </div>
      <ChartLine
        v-memo="data" v-if="data.length !== 0"
        :data="toGraphData(data)" :options="getOptions()"
      />
    </div>
  </div>
</template>
<style scoped>
.main-graph {
  height: 440px;
}
</style>