appChart.js

// DEBUG: for testing without a browser
// const axios = require("axios").default;

// Request parameters
const BASE_URL =
  "http://193.196.138.56/frost-icity-tp31/v1.1/Datastreams(48)/Observations";
const PARAM_RESULT_FORMAT = "dataArray";
const PARAM_ORDER_BY = "phenomenonTime asc";
const PARAM_FILTER =
  "resultTime ge 2018-01-01T00:00:00.000Z and resultTime le 2018-02-01T00:00:00.000Z";
const PARAM_SELECT = "result,phenomenonTime";

/**
 * Helper function for converting the observation time from a string to Unix epoch
 * @param {*} obsArray
 */
const formatObservationTime = function (obsArray) {
  const dataSTAFormatted = [];
  obsArray.forEach((result) => {
    const timestampObs = new Date(result[0].slice(0, -1)).getTime(); // slice() removes trailing "Z" character in timestamp
    const valueObs = result[1];
    dataSTAFormatted.push([timestampObs, valueObs]);
  });
  return dataSTAFormatted;
};

/**
 * Function draws chart using Highcharts library
 * @param {*} dataArr
 */
const drawLineChartHC = function (dataArr) {
  // Create the chart
  Highcharts.stockChart("chart-highcharts", {
    rangeSelector: {
      selected: 1,
    },

    title: {
      text: "AAPL Stock Price",
    },

    series: [
      {
        name: "AAPL",
        data: dataArr,
        tooltip: {
          valueDecimals: 2,
        },
        // turboThreshold: 10000, // Disable this option; otherwise throws error if our array has a length > 1000
      },
    ],
  });
};

/**
 * Function draws chart using Apexcharts library
 * @param {*} dataArr
 */
const drawLineChartAC = function (dataArr) {
  // Chart constants
  const CHART_HTML_ELEMENT = document.querySelector("#chart-apex-line");
  const CHART_NAME = "Temperature";
  const TITLE_TEXT = "Inlet flow (Vorlauf)";
  const Y_AXIS_TITLE = "Temperature";

  const options = {
    series: [
      {
        name: CHART_NAME,
        data: dataArr,
      },
    ],
    chart: {
      type: "area",
      stacked: false,
      height: 350,
      zoom: {
        type: "x",
        enabled: true,
        autoScaleYaxis: true,
      },
      toolbar: {
        autoSelected: "zoom",
      },
    },
    dataLabels: {
      enabled: false,
    },
    markers: {
      size: 0,
    },
    title: {
      text: TITLE_TEXT,
      align: "left",
    },
    fill: {
      type: "gradient",
      gradient: {
        shadeIntensity: 1,
        inverseColors: false,
        opacityFrom: 0.5,
        opacityTo: 0,
        stops: [0, 90, 100],
      },
    },
    yaxis: {
      labels: {
        formatter: function (val) {
          return val.toFixed(2);
        },
      },
      title: {
        text: Y_AXIS_TITLE,
      },
    },
    xaxis: {
      type: "datetime",
    },
    tooltip: {
      shared: false,
      y: {
        formatter: function (val) {
          return val.toFixed(2);
        },
      },
    },
  };

  const chart = new ApexCharts(CHART_HTML_ELEMENT, options);

  chart.render();
};

/**
 * Function follows "@iot.nextLink" links
 * Appends new results to existing results
 * @param {*} responsePromise
 */
const followNextLink = function (responsePromise) {
  return responsePromise
    .then(function (lastSuccess) {
      if (lastSuccess.data["@iot.nextLink"]) {
        return followNextLink(
          axios.get(lastSuccess.data["@iot.nextLink"])
        ).then(function (nextLinkSuccess) {
          nextLinkSuccess.data.value = lastSuccess.data.value.concat(
            nextLinkSuccess.data.value
          );
          return nextLinkSuccess;
        });
      } else {
        return lastSuccess;
      }
    })
    .catch(function (err) {
      console.log(err);
    });
};

// Get "ALL" the Observations that satisfy our query
followNextLink(
  axios.get(BASE_URL, {
    params: {
      "$resultFormat": PARAM_RESULT_FORMAT,
      "$orderBy": PARAM_ORDER_BY,
      "$filter": PARAM_FILTER,
      "$select": PARAM_SELECT,
    },
  })
)
  .then((success) => {
    const successValue = success.data.value;

    // Array that will hold the combined observations
    const combinedObservations = [];

    successValue.forEach((dataObj) => {
      // Each page of results will have a dataArray that holds the observations
      const dataArrays = dataObj.dataArray;

      combinedObservations.push(...dataArrays);
    });
    // DEBUG: Check total number of observations
    console.log(combinedObservations.length);

    return combinedObservations;
  })
  .catch((err) => {
    console.log(err);
  })
  .then((observationArr) => {
    const formattedObservations = formatObservationTime(observationArr);
    console.log(formattedObservations);
    drawLineChartAC(observationArr);
  });