$(function () {
  function loadTreeMap(data) {
    console.log('triggered the treemap');
    if(data){
    var dataArr = Object.values(data);
   var byCount = dataArr.slice(0);
    byCount.sort(function(a,b) {
    return a.count - b.count;
});
   
       
            
 var $container=$('.treemap-container');
        $container.empty();
        var $canvas = $('<canvas>').addClass('chart').appendTo($container);

    
//Function to generate opacity for a color based on it's value 
    function colorFromRaw($canvas,biggest){
      //surpass first load
      
      if($canvas.type != 'data') {
        return 'transparent';
      }

      //a:amount of pixels (w*h), x:xas, y: yas, w: width pixels, h: height pixels, s: total sum, v: value 
      const value = $canvas.raw.v;
      let alpha = value/biggest;
      //nog even uitzoeken hoe dit werkt, maar is een soort calculatie ding tussen `` tekens. weird. werkt wel!
      return `rgba(14,135,77, ${alpha})`;
    };

window.chart1 = new Chart($canvas, {
  type: "treemap",
  data: {
    datasets: [
      {
        key: "count",
        groups: ["displayValue"],
        fontColor: "white",
        fontSize: 16,
        fontWeight: "bold",
        tree: byCount.slice(-10).map(item => {
          const { count, label } = item;
  
          //const displayValue = `${count}x\n${label}`;
          const displayValue = label; 
          return { ...item, displayValue };
        }),
        backgroundColor: $canvas => colorFromRaw($canvas,byCount.slice(-1)[0].count),
        hoverBackgroundColor: $canvas => colorFromRaw($canvas,byCount.slice(-1)[0].count),
        borderColor: "white",
        // colorFromValue($canvas.dataset.data[$canvas.dataIndex], true),
        spacing: 0,
        borderWidth: 0.5,
        borderColor: "rgba(255,255,255, 1)",
        labels: {
          align: 'center',
          display: true,
           color:'white',
          formatter($canvas) {
            if ($canvas.type !== 'data') {
              return;
            }
            return [$canvas.raw.v + 'x', $canvas.raw.g];
          }
         }
      }
    ]
  },
  options: {
   plugins: {
      title: {
        display: false,
        text: 'Labelling data'
      },
      legend: {
        display: false
      },
     tooltip: {
        enabled: false
      }
    }
  }
});
      }
else {
       var $container=$('.treemap-container');
        $container.empty();
       var $notfound = $('<div>').addClass('notfound').append('no data').appendTo($container);
      }
  };
    if ($('#ftrindex').length) {
        var ftrindex = $('#ftrindex').data('handle');
        ftrindex.attachHook('treemap', 'treemap', loadTreeMap, {field: 'people'});
        

    } else {
        console.log('#ftrindex has no length, abort mission.')
    }
      
      
});
/*******************************************************************/
/* ftrtch dino */
/* [type: JS] [file:project-treemap] [62.1546] DESIGN*/
/*******************************************************************/
/* 0.1 D>D */
/* db 159 */