JSFiddle - React, Tailwind, and code Playground

by abhishek_soni

JavaScript

let co = 0,
  cou = 0,
  count = 0;

function $ {
  chartId
}() {
  let receivedObject = ${
    JSON.stringify(testReport)
  };

  var ctx = document.getElementById("${chartId}").getContext("2d");
  let allObservation = receivedObject.pastObservation;

  allObservations = allObservation.concat({
    value: receivedObject.testResultValue,
    observation_time: receivedObject.time
  });
  // console.log('allObservations in line chart', allObservations);

  let sortedObservations = allObservations.sort((a, b) => new Date(a.observation_time) - new Date(b.observation_time));
  //  console.log('sortedObservations in line chart', sortedObservations);


  // let labels = sortedObservations.map(value => new Date(value.observation_time).toLocaleDateString("en-GB", { day: "numeric", month: "numeric", year: "2-digit" }));

  let labels = sortedObservations.map(value => new Date(value.observation_time));



  // console.log('labels', labels, 'type' , typeof labels, '3rd label type', typeof labels);
  let data = sortedObservations.map(value => value.value);
  // console.log('type of variable data', typeof data);
  let resultsAverageValue = function(data) {
    let dataArray = Object.values(data).map(Number);
    return parseInt(dataArray.reduce((a, b) => (a + b)) / dataArray.length);
  }(data);
  // console.log(data, 'data', 'json data', data,'hello here', resultsAverageValue);
  let minValue = receivedObject.minParameterValue;
  let maxValue = receivedObject.maxParameterValue;
  let dataLabelBg = [];
  // console.log('minvalue, maxvalue', minValue, maxValue)
  data.map(i => parseInt(i) < minValue ? dataLabelBg.push('${
      color.colorPlaceholder.oneFromNormal
    }
    ') : parseInt(i) > maxValue ? dataLabelBg.push('
    $ {
      color.colorPlaceholder.finalCritial
    }
    ') : dataLabelBg.push('
    $ {
      color.colorPlaceholder.normal
    }
    '));

    // let dataLabelPadding = [];
    // data.map(i => parseInt(i) > 99 ? dataLabelPadding.push({ top: 13, left: 10,...