(function(){
  "use strict";
  kintone.events.on([
    'space.portal.show',
    'mobile.space.portal.show',
  ], function(event){
    var spaceId = ****; //ガントチャートを表示するスペースのID
    if(Number(event.spaceId) !== spaceId){
      return event;
    }
    var appId = ****; //参照するアプリのID
    var projectNameField = 'Project';
    var taskTableField = 'Table';
    var taskNameField = 'Task';
    var startDateField = 'Start';
    var endDateField = 'End';
    var client = new KintoneRestAPIClient();
    var ganttChartContainer = document.createElement('div');
    client.record.getAllRecordsWithCursor({
      app: appId,
      query: 'order by $id asc'
    }).then(function(records){
      Highcharts.ganttChart(ganttChartContainer, {
        series: records.map(function(record){
          return {
            name: record[projectNameField].value,
            data: [{
              id: record[projectNameField].value,
              name: record[projectNameField].value,
            }].concat(record[taskTableField].value.map(function(row){
              return {
                name: row.value[taskNameField].value,
                start: new Date(row.value[startDateField].value).getTime(),
                end: new Date(row.value[endDateField].value).getTime(),
                parent: record[projectNameField].value
              }
            }))
          }
        }),
      });
    });
    if(event.type === 'space.portal.show') {
      kintone.space.portal.getContentSpaceElement().appendChild(ganttChartContainer);
    }else{
      kintone.mobile.space.portal.getContentSpaceElement().appendChild(ganttChartContainer);
    }
    return event;
  });
})();