async function getJSON(url) {

  const response = await fetch(url);

  if (!response.ok) {

    throw response.status;

  } else {

    return await response.json();

  }

}

​

const baseUrl = "https://oss.x-lab.info/open_digger/github";

const repoName = "X-lab2017/open-digger";

​

const container = document.getElementById("main");

const chart = echarts.init(container);

const updateFrequency = 2000;

const colorMap = new Map();

const option = {

  grid: {

    top: 10,

    bottom: 30,

    left: 150,

    right: 80

  },

  xAxis: {

    max: "dataMax",

    axisLabel: {

      formatter: function (n) {

        return Math.round(n) + "";

      }

    }

  },

  yAxis: {

    type: "category",

    inverse: true,

    max: 10,

    axisLabel: {

      show: true,

      fontSize: 14,

      formatter: function (value) {

        if (!value || value.endsWith("[bot]")) return value;

        return `${value} {avatar${value.replaceAll("-", "")}|}`;

      },

      rich: null

    },

    animationDuration: 300,

    animationDurationUpdate: 300

  },

  series: [

    {

      realtimeSort: true,

      seriesLayoutBy: "column",

      type: "bar",

      itemStyle: {

        color: function (params) {

          const githubId = params.value[0];

          if (colorMap.has(githubId)) {

            return colorMap.get(githubId);

          } else {

            const randomColor =

              "#" + Math.floor(Math.random() * 16777215).toString(16);

            colorMap.set(githubId, randomColor);

            return randomColor;

          }

        }

      },

      data: null,

      encode: {

        x: 1,

        y: 0

      },

      label: {

        show: true,

        precision: 1,

        position: "right",

        valueAnimation: true,

        fontFamily: "monospace"

      }

    }

  ],

  // Disable init animation.

  animationDuration: 0,

  animationDurationUpdate: updateFrequency,

  animationEasing: "linear",

  animationEasingUpdate: "linear",

  graphic: {

    elements: [

      {

        type: "text",

        right: 60,

        bottom: 60,

        style: {

          text: null,

          font: "bolder 60px monospace",

          fill: "rgba(100, 100, 100, 0.25)"

        },

        z: 100

      }

    ]

  }

};

​

let playing = false;

async function play() {

  $('#title').text(repoName);

  playing = true;

  const data = await getJSON(`${baseUrl}/${repoName}/activity_details.json`);

  const months = Object.keys(data);

  let startIndex = 0;

  let startMonth = months[startIndex];

​

  for (let i = startIndex; i < months.length - 1; ++i) {

    (function (i) {

      setTimeout(function () {

        updateMonth(months[i + 1]);

        if (i + 1 === months.length - 1) {

          playing = false;

        }

      }, (i - startIndex) * updateFrequency);

    })(i);

  }

  function updateMonth(month) {

    const rich = {};

    data[month].forEach((item) => {

      // rich name cannot contain special characters such as '-'

      rich[`avatar${item[0].replaceAll("-", "")}`] = {

        backgroundColor: {

          image: `https://avatars.githubusercontent.com/${item[0]}?s=48&v=4`

        },

        height: 20

      };

    });

    option.yAxis.axisLabel.rich = rich;

    option.series[0].data = data[month];

    option.graphic.elements[0].style.text = month;

    chart.setOption(option);

  }

}

​

play();

$("#replay-btn").click(() => {

  if (playing) {

    alert("Already playing!");

    return;

  }

  play();

});

​