chrome-extensions-samples/functional-samples/sample.co2meter/chart-iframe.js

import storage from "./modules/storage.js";
import { NEW_READING_SAVED_MESSAGE, PERMISSION_GRANTED_MESSAGE, CO2_METER_UNAVAILABLE } from "./modules/constant.js";
import CO2Meter from "./modules/co2_meter.js";

let lastChartUpdateTimeMs =
  new Date(new Date().getTime() - 7 * 24 * 60 * 60 * 1000).getTime();  // Initialize to one week ago.

let chart = null;

window.onload = async e => {
  const chartConfig = {
    type: 'line',
    data: {
      datasets: [
        {
          label: "Temperature",
          data: [],
          borderColor: 'rgba(255, 0, 0, 1)',
          backgroundColor: 'rgba(255, 0, 0, 0.5)',
          yAxisID: 'y'
        },
        {
          label: "CO₂",
          data: [],
          borderColor: 'rgba(0, 0, 255, 1)',
          backgroundColor: 'rgba(0, 0, 255, 0.5)',
          yAxisID: 'y1'
        }
      ]
    },
    options: {
      type: 'line',
      pointStyle: false,
      scales: {
        x: {
          type: 'time'
        },
        y: {
          type: 'linear',
          display: true,
          position: 'left',

          grid: {
            drawOnChartArea: false
          }
        },
        y1: {
          type: 'linear',
          display: true,
          position: 'right'
        }
      }
    }
  };

  chart = new Chart(document.getElementById('chart'), chartConfig);
  await updateChart();

  // Update when document becomes visible.
  document.onvisibilitychange = updateChart;

  // Register for messages to update chart upon new data readings.
  chrome.runtime.connect().onMessage.addListener((msg) => {
    if (msg === NEW_READING_SAVED_MESSAGE) { updateChart(); }
    else if (msg === PERMISSION_GRANTED_MESSAGE) { updateCO2MeterStatus(true); }
    else if (msg === CO2_METER_UNAVAILABLE) { updateCO2MeterStatus(false); }
  });

  // Dialog
  closeDialogButton.onclick = () => { noDeviceDialog.close(); }

  await CO2Meter.init();
  updateCO2MeterStatus(CO2Meter.getDeviceStatus());
  CO2Meter.registerCallback(CO2MeterConnected, CO2MeterDisconnected);
}

function updateCO2MeterStatus(connected) {
  if (connected) {
    noDeviceDialog.close();
  } else {
    if (!noDeviceDialog.open) {
      noDeviceDialog.showModal();
    }
  }
}

function CO2MeterConnected() {
  updateCO2MeterStatus(true);
}

function CO2MeterDisconnected() {
  updateCO2MeterStatus(false);
}

async function updateChart() {
  if (document.visibilityState == 'hidden')
    return;  // Don't update if hidden.

  let TempData = await storage.getTempValueInRange(lastChartUpdateTimeMs);
  let CO2Data = await storage.getCO2ValueInRange(lastChartUpdateTimeMs);
  lastChartUpdateTimeMs = new Date().getTime();

  function KelvinToFahrenheit(k) { return (k - 273.15) * 9/5 + 32; }
  function KelvinToCelsius(k) { return k - 273.15; }
  let isCelsius = await storage.getTemperatureUnit() == "Celsius";
  let convert = isCelsius ? KelvinToCelsius : KelvinToFahrenheit
  chart.data.datasets[0].label = "Temperature " + (isCelsius ? "(C)" : "(F)");
  
  TempData.forEach(datum => {
    chart.data.datasets[0].data.push({ x: datum.time, y: convert(datum.reading) });
  });
  CO2Data.forEach(datum => {
    chart.data.datasets[1].data.push({ x: datum.time, y: datum.reading });
  });
  chart.update();
}