var container = document.getElementById('main');

var chart = echarts.init(container);

​

var baseUrl = 'https://oss.x-lab.info/open_digger/github/';

var repoName = 'X-lab2017/open-digger';

​

$.getJSON(`${baseUrl}${repoName}/issues_new.json`, issuesNewData => {

  $.getJSON(`${baseUrl}${repoName}/issues_closed.json`, issuesClosedData => {

    $.getJSON(`${baseUrl}${repoName}/issue_comments.json`, issueCommentData => {

      var monthes = Object.keys(issuesNewData).filter(k => k.length === 7);

      var issuesNew = monthes.map(m => issuesNewData[m] ?? 0);

      var issuesClosed = monthes.map(m => issuesClosedData[m] ?? 0);

      var issueComment = monthes.map(m => issueCommentData[m] ?? 0);

      var issuesNewBase = [0];

      var issuesClosedBase = [];

      for (var i = 1; i < issuesNew.length; i++)

        issuesNewBase.push(issuesNew[i - 1] - issuesClosed[i - 1] + issuesNewBase[i - 1]);

      for (var i = 0; i < issuesNew.length; i++)

        issuesClosedBase.push(issuesNewBase[i] + issuesNew[i] - issuesClosed[i]);

​

      option = {

        title: {

          text: `Issue status for ${repoName}`,

          left: 'center'

        },

        legend: {

          data: ['New', 'Close', 'Comment'],

          padding: 40,

        },

        xAxis: {

          type: 'category',

          data: monthes,

        },

        yAxis: [{ type: 'value', min: 0 }, { type: 'value' }],

        series: [

          {

            type: 'bar',

            stack: 'Total',

            silent: true,

            itemStyle: {

              borderColor: 'transparent',

              color: 'transparent'

            },

            emphasis: {

              itemStyle: {

                borderColor: 'transparent',

                color: 'transparent'

              }

            },

            data: issuesNewBase,

          },

          {

            type: 'bar',

            stack: 'CloseTotal',

            silent: true,

            itemStyle: {

              borderColor: 'transparent',

              color: 'transparent'

            },

            emphasis: {

              itemStyle: {

                borderColor: 'transparent',

                color: 'transparent'

              }

            },

            data: issuesClosedBase,

          },

          {

            name: 'New',

            type: 'bar',

            stack: 'Total',

            itemStyle: {

              color: 'green',

            },

            data: issuesNew,

            markPoint: {

              data: [

                {

                  value: 'Start CHAOSS impl',

                  coord: ['2021-07', issuesNewData['2021-07'] + 30 ],

                  symbol: 'rect', symbolSize: [120, 20]

                },

                {

                  value: 'Add label data',

                  coord: ['2022-03', issuesNewData['2022-03'] + 70 ],

                  symbol: 'rect', symbolSize: [90, 20]

                }

             ]},

          },

          {

            name: 'Close',

            type: 'bar',

            itemStyle: {

              color: 'red',

            },

            stack: 'CloseTotal',

            data: issuesClosed,

          },

          {

            name: 'Comment',

            type: 'line',

            data: issueComment,

            yAxisIndex: 1,

            markPoint: {

              data: [

                {

                  value: 'Disscussion for COSAR2020',

                  coord: ['2020-12', issueCommentData['2020-12'] + 15 ],

                  symbol: 'rect', symbolSize: [170, 20]

                },

                {

                  value: 'Tricky CHAOSS metrics',

                  coord: ['2022-09', issueCommentData['2022-12'] + 40 ],

                  symbol: 'rect', symbolSize: [140, 20]

                }

              ]

            }

          }

        ]

      };

      chart.setOption(option);

    });

  });

});