function prepRibbonData(jsonData) {
  var resList = [];

  const L = jsonData.length;

  var startVal = 2;
  var currentMonth = 0;
  var hourInMonth = 0;

  var x = [];
  var y = [];
  var z = [];
  for (var d = 0; d < L; d++) {
    let tmpDate = new Date(jsonData[d].x);
    // let datum = tmpDate.getDate(); // gets the day of the month 1...31
    let hour = tmpDate.getHours();
    let month = tmpDate.getUTCMonth(); // gets the month as numeric value

    if (currentMonth == month) {
      x.push([startVal, startVal + 1]);
      y.push([hourInMonth, hourInMonth]);
      z.push([jsonData[d].y, jsonData[d].y]);
      hourInMonth++;
    } else {
      resList.push({ x: x, y: y, z: z });
      var x = [];
      var y = [];
      var z = [];
      currentMonth += 1;
      startVal += 2;
      hourInMonth = 0;

      x.push([startVal, startVal + 1]);
      y.push([hourInMonth, hourInMonth]);
      z.push([jsonData[d].y, jsonData[d].y]);
    }
  } // end of for loop

  // add results for last month as else statement will not be reached for the december
  // as the condition d < L will be true before the condition currentMonth === month can be evaluated

  // re-activate following line when i have more than one data point for the next month
  // resList.push({x:x, y:y, z:z } );

  return resList;
}

function makeRibbonPlot(dat) {
  preppedData = prepRibbonData(dat);
  dat = preppedData;

  // https://plotly.com/javascript/ribbon-plots/
  var trace1 = {
    x: dat[0].x,
    y: dat[0].y,
    z: dat[0].z,
    name: "January",
    // colorscale: dat[0].colorscale,
    type: "surface",
    showscale: false,
  };
  var trace2 = {
    name: "Feburary",
    x: dat[1].x,
    y: dat[1].y,
    z: dat[1].z,
    // colorscale: dat[1].colorscale,
    type: "surface",
    showscale: false,
  };
  var trace3 = {
    name: "March",
    x: dat[2].x,
    y: dat[2].y,
    z: dat[2].z,
    // colorscale: dat[2].colorscale,
    type: "surface",
    showscale: false,
  };
  var trace4 = {
    name: "April",
    x: dat[3].x,
    y: dat[3].y,
    z: dat[3].z,
    // colorscale: dat[3].colorscale,
    type: "surface",
    showscale: false,
  };
  var trace5 = {
    name: "May",
    x: dat[4].x,
    y: dat[4].y,
    z: dat[4].z,
    // colorscale: dat[4].colorscale,
    type: "surface",
    showscale: false,
  };
  var trace6 = {
    name: "June",
    x: dat[5].x,
    y: dat[5].y,
    z: dat[5].z,
    // colorscale: dat[5].colorscale,
    type: "surface",
    showscale: false,
  };

  var data = [trace1, trace2, trace3, trace4, trace5, trace6];

  var layout = {
    title: "Inlet flow (per month)",
    showlegend: true,
    autosize: true,
    width: 1400,
    height: 800,
    xaxis: {
      tickmode: "array",
      tickvals: [2.5, 4.5, 6.5, 8.5, 10.5, 12.5],
      ticktext: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
    },
    hoverlabel: {
      bgcolor: "black",
    },
    scene: {
      xaxis: {
        title: "Month ",
        tickmode: "array",
        tickvals: [2.5, 4.5, 6.5, 8.5, 10.5, 12.5],
        ticktext: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
      },
      yaxis: { title: "Hours in a month" },
      zaxis: { title: "Temperature (°C)" },
    },
  };
  Plotly.newPlot("RibbonPlot", data, layout);
}
////////////////////////////////////////////////////////////

function prepHeatmapData(jsonData) {
  const L = jsonData.length;

  var z = [];
  var hourCnt = 0;
  const maxH = 24;
  const incr = Math.round(L / maxH) + 1;

  // span up the matrix that holds my temperature values
  for (var d = 0; d < L; d += incr) {
    // z.push( [...Array(incr).keys(NaN)] );
    z.push(Array(incr).fill(NaN));
  }

  // now populate the empty (nan-filled) array with appropriate values
  var cnt = 0;
  var breakOut = false;
  for (var hour = 0; hour < z.length; hour++) {
    for (var day = 0; day < incr; day++) {
      idx = day * maxH + hour;
      if (idx >= L) continue;
      z[hour][day] = jsonData[idx].y;
      cnt++;
      if (cnt >= L) {
        breakOut = true;
        break;
      }
    }
    if (breakOut) break;
  }

  // window.alert(cnt);

  return z;
}

/////////////////////////////////////

function makeHeatmap(dat) {
  z_data = prepHeatmapData(dat);

  layout = {
    // all "layout" attributes: #layout
    title: "Inlet flow  Overview of 2020 - 1st Jan - 30th Jun", // more about "layout.title": #layout-title
    showlegend: true,
    autosize: true,
    width: 1400,
    height: 800,
    xaxis: {
      // all "layout.xaxis" attributes: #layout-xaxis
      title: "Number of the day of the year",
      tickmode: "array",
      tickvals: [0, 31, 60, 91, 121, 152, 182],
      ticktext: [
        "1st. Jan",
        "1st Feb",
        "1st Mar",
        "1st Apr",
        "1st May",
        "1st Jun",
        "1st Jul",
      ], // more about "layout.xaxis.title": #layout-xaxis-title
    },
    yaxis: {
      title: "Hours of the day",
      tickmode: "array",
      tickvals: [...Array(24).keys()],
      ticktext: String([...Array(24).keys()]),
    },

    annotations: [
      // all "annotation" attributes: #layout-annotations
      //     {
      //         text: '1st of February',    // #layout-annotations-text
      //         x: 0,                         // #layout-annotations-x
      //         xref: 'paper',                // #layout-annotations-xref
      //         y: 0,                         // #layout-annotations-y
      //         yref: 'paper'                 // #layout-annotations-yref
      //     }
    ],
  };

  var data = [
    {
      
      z: z_data,
      type: "heatmap",
      colorscale: 'Portland',
      zsmooth: 'none',  // fast  // best // none
      colorbar: {
        title: {
          text: "Temperature (°C)",
          side: "top"        
        }        
      }
    },
  ];

  Plotly.newPlot("heatmap2d", data, layout);
}

//////////////////////////////

function make2dHistogram(dat) {
  // make heatmap or 2d histogram plot
  var x = [];
  var y = [];
  for (var i = 0; i < 500; i++) {
    x[i] = Math.random();
    y[i] = Math.random() + 1;
  }

  var data = [
    {
      x: x,
      y: y,
      z: x,
      type: "histogram2d", //  try this type as well 'histogram2dcontour' or this one 'histogram2d'
    },
  ];
  Plotly.newPlot("heatmap2d", data);
}

//////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////

function prepBoxplotData(jsonData) {
  var resList = [];
  const L = jsonData.length;
  var currentMonth = 0;

  var x = [];
  var y = [];

  for (var d = 0; d < L; d++) {
    let tmpDate = new Date(jsonData[d].x);
    // let datum = tmpDate.getDate(); // gets the day of the month 1...31

    let month = tmpDate.getUTCMonth(); // gets the month as numeric value

    if (currentMonth == month) {
      y.push(jsonData[d].y);
      x.push(jsonData[d].x);
    } else {
      resList.push({ date: x , temperature: y });
      var x = [];
      var y = [];

      currentMonth += 1;
      y.push(jsonData[d].y);
      x.push(jsonData[d].x);
    }
  }
  return resList;
}

/////////////////////////////////

function makeBoxplot(dat) {
  var preppedData = prepBoxplotData(dat);

  var trace1 = {
    y: preppedData[0].temperature,
    type: "box",
    name: "Jan",
    jitter: 0.3,
    pointpos: -1.8,
    marker: {
      color: "rgba(7,40,89,0.4)",
    },
    boxpoints: "all", // suspectedoutliers   // Outliers   // false   // all
  };

  var trace2 = {
    y: preppedData[1].temperature,
    type: "box",
    name: "Feb",
    jitter: 0.3,
    pointpos: -1.8,
    marker: {
      color: "rgba(47,40,89 ,0.4)",
    },
    boxpoints: "all", // suspectedoutliers   // Outliers   // false   // all
  };

  var trace3 = {
    y: preppedData[2].temperature,
    type: "box",
    name: "Mar",
    jitter: 0.3,
    pointpos: -1.8,
    marker: {
      color: "rgba(87,40,89,0.4)",
    },
    boxpoints: "all", // suspectedoutliers   // Outliers   // false   // all
  };

  var trace4 = {
    y: preppedData[3].temperature,
    type: "box",
    name: "Apr",
    jitter: 0.3,
    pointpos: -1.8,
    marker: {
      color: "rgba(120,40,89,0.4)",
    },
    boxpoints: "all", // suspectedoutliers   // Outliers   // false   // all
  };

  var trace5 = {
    y: preppedData[4].temperature,
    type: "box",
    name: "May",
    jitter: 0.3,
    pointpos: -1.8,
    marker: {
      color: "rgba(160,40,89,0.4)",
    },
    boxpoints: "all", // suspectedoutliers   // Outliers   // false   // all
  };

  var trace6 = {
    y: preppedData[5].temperature,
    type: "box",
    name: "Jun",
    jitter: 0.3,
    pointpos: -1.8,
    marker: {
      color: "rgba(200,40,89,0.4)",
    },
    boxpoints: "all", // suspectedoutliers   // Outliers   // false   // all
  };

  var data = [trace1, trace2, trace3, trace4, trace5, trace6];

  var layout = {
    title: "Inlet flow  Overview of 2020 - 1st Jan - 30th Jun", // more about "layout.title": #layout-title
    showlegend: true,
    autosize: true,
    width: 700,
    height: 500,    
    xaxis: {
      title: 'Month of the year 2020',
      zeroline: false
    },
    yaxis: {
      title: 'Temperature (°C)',
      zeroline: true
    },
    
  };

  Plotly.newPlot("BoxplotPlotly", data, layout);
}


///////////////////////////////////////////////////

function makeLinePlot(dat){

  var preppedData = prepBoxplotData(dat);

  trace1 = {
    type: 'scatter',
    // x: [1, 2, 3, 4],
    // y: [10, 15, 13, 17],
    x: preppedData[0].date,
    y: preppedData[0].temperature,
    mode: 'lines',
    name: 'Jan',
    line: {
      color: "rgba(7,40,89,0.4)",
      width: 2
    }
  };
  
  trace2 = {
    type: 'scatter',
    // x: [1, 2, 3, 4],
    // y: [12, 9, 15, 12],
    x: preppedData[1].date,
    y: preppedData[1].temperature,
    mode: 'lines',
    name: 'Feb',
    line: {
      color: "rgba(47,40,89,0.4)",
      width: 2
    }
  };

  trace3 = {
    type: 'scatter',
    // x: [1, 2, 3, 4],
    // y: [10, 15, 13, 17],
    x: preppedData[2].date,
    y: preppedData[2].temperature,
    mode: 'lines',
    name: 'Mar',
    line: {
      color: "rgba(87,40,89,0.4)",
      width: 2
    }
  };
  
  trace4 = {
    type: 'scatter',
    // x: [1, 2, 3, 4],
    // y: [12, 9, 15, 12],
    x: preppedData[3].date,
    y: preppedData[3].temperature,
    mode: 'lines',
    name: 'Apr',
    line: {
      color: "rgba(127,40,89,0.4)",
      width: 2
    }
  };

  trace5 = {
    type: 'scatter',
    // x: [1, 2, 3, 4],
    // y: [10, 15, 13, 17],
    x: preppedData[4].date,
    y: preppedData[4].temperature,
    mode: 'lines',
    name: 'May',
    line: {
      color: "rgba(167,40,89,0.4)",
      width: 2
    }
  };
  
  trace6 = {
    type: 'scatter',
    // x: [1, 2, 3, 4],
    // y: [12, 9, 15, 12],
    x: preppedData[5].date,
    y: preppedData[5].temperature,
    mode: 'lines',
    name: 'Jun',
    line: {
      color: "rgba(207,40,89,0.4)",
      width: 2
    }
  };
  
  

  var layout = {
    title: "Inlet flow  Overview of 2020 - 1st Jan - 30th Jun", // more about "layout.title": #layout-title
    showlegend: true,
    autosize: true,
    width: 700,
    height: 500,    
    xaxis: {
      title: 'Month of the year 2020',
      zeroline: false
    },
    yaxis: {
      title: 'Temperature (°C)',
      zeroline: true
    },
    
  };
  
  var data = [trace1, trace2, trace3,trace4, trace5, trace6];
  
  Plotly.newPlot('LineplotPlotly', data, layout);

}