$(function () {

    function topicsChart(labels, datasets) {
        var $container=$('.topics-chartcontainer');
        $container.empty();
     
        var $canvas = $('<canvas>').addClass('chart').appendTo($container);
        var charttitle = "Topics";

        var chart = new Chart($canvas, {
            type: 'line',

            data: {
                labels: labels,
                datasets: datasets
            },
            options: {
                animation: true,
                title: {display: true, text: charttitle, fontColor: "#fff"},
                legend: {
   labels: {
        onHover: function (e) {
          e.native.target.style.cursor = 'pointer';
        },
        onLeave: function (e) {
          e.native.target.style.cursor = 'default';
        }
      }
  },
              tooltips: {
   mode: 'dataset'
},
                scales: {
                    y: {
                        grid: {display: false},
                        title: {display: true, text:'occurrence in % of articles'},
                        ticks: {
                            stepSize: 10,
                            beginAtZero: true,

                        }
                    }
                },
            }
        });
    
    }

    function topicsTimeline(data, keywords, hook, steptype) {

        if (window.debugmode) console.log('got topics timeline', {d: data, labels: keywords});
      if(data){
        var topics={}, labels = [];

        const shortMonthNames = ["Jan", "Feb", "Mar", "Apr", "May", "June", "July", "Aug", "Sep", "Oct", "Nov", "Dec"];
        const bordercolors = ['#0E874D', '#27953A', '#3FA328', '#58B115', '#70BF02'];

        $.each(data, function (i, step) {
            switch (steptype)
            {
              case 'day':labels.push(step.id.day+'/'+step.id.month);break;
              case 'month':labels.push(shortMonthNames[step.id.month - 1]);break;
              default: labels.push('?');  
            }

            $.each(step.fields, function(f, count){
                if (!topics[f]) topics[f]=[];
                topics[f].push(count);
            });


        });

        var datasets = [];
        var idx=0;
        $.each(topics, function(tid, values){
            datasets.push({
                data: values,
                fill: false,
                borderColor: bordercolors[idx++],
                label: keywords[tid],
                lineTension: 0.5,

            })});

        topicsChart(labels, datasets);
}else {
   var $container=$('.topics-chartcontainer');
        $container.empty();
       var $nodata = $('<div>').addClass('nodata').append('no data').appendTo($container);
    }
    }

    if ($('#ftrindex').length) {
        var ftrindex = $('#ftrindex').data('handle');
        ftrindex.attachHook('topics-timeline', 'timeline', topicsTimeline, {field: 'keywords', step: 'month', top: 6});
    } else {
        console.log('#ftrindex has no length, abort mission.')
    }
});

/*******************************************************************/
/* ftrtch dino */
/* [type: JS] [file:project-timelines] [35.1545] DESIGN*/
/*******************************************************************/
/* 0.1 D>D */
/* db 162 */