Покажите, как программно изменить диапазон и цвет датчика

var humidityData = [
  {
    domain: { x: [0, 1], y: [0, 1] },
    value: 0,
    title: { text: "Feuchtigkeit" },
    type: "indicator",
    mode: "gauge+number+delta",
    delta: { reference: 69 },
    gauge: {
      axis: { range: [40, 103] },
      steps: [
        { range: [10, 65], color: "red" },
        { range: [65, 68], color: "yellow" },
        { range: [68, 75], color: "lightgreen" },
        { range: [75, 78], color: "yellow" },
        { range: [78, 103], color: "red" },
      ],
    },
  },
];

if (temperature_soll!=20) {
    var temp_soll = ((20*1.8)+32)
    var temperature_update = {
      value: temperature,
      'delta.reference': temp_soll,
      'gauge.axis.range': [((10*1.8)+32), ((30*1.8)+32)],
      'gauge.steps.range': [((10*1.8)+32), ((15*1.8)+32)], color:"red",
      'gauge.steps.range': [((15*1.8)+32), ((18*1.8)+32)], color: "yellow",
      'gauge.steps.range': [((18*1.8)+32), ((22*1.8)+32)], color: "lightgreen",
      'gauge.steps.range': [((22*1.8)+32), ((25*1.8)+32)], color: "yellow",
      'gauge.steps.range': [((25*1.8)+32), ((30*1.8)+32)], color: "red",
    };
  };

var temperatureHistoryDiv = document.getElementById("temperature-history");
var humidityHistoryDiv = document.getElementById("humidity-history");

var temperatureGaugeDiv = document.getElementById("temperature-gauge");
var humidityGaugeDiv = document.getElementById("humidity-gauge");

// History Data
var temperatureTrace = {
  x: [],
  y: [],
  name: "Temperatur",
  mode: "lines+markers",
  type: "line",
};
var humidityTrace = {
  x: [],
  y: [],
  name: "Feuchtigkeit",
  mode: "lines+markers",
  type: "line",
};

var temperatureLayout = {
  autosize: false,
  title: {
    text: "Temperatur",
  },
  font: {
    size: 14,
    color: "#7f7f7f",
  },
  colorway: ["#B22222"],
  width: 450,
  height: 260,
  margin: { t: 30, b: 20, pad: 5 },
};
var humidityLayout = {
  autosize: false,
  title: {
    text: "Feuchtigkeit",
  },
  font: {
    size: 14,
    color: "#7f7f7f",
  },
  colorway: ["#00008B"],
  width: 450,
  height: 260,
  margin: { t: 30, b: 20, pad: 5 },
};

Plotly.newPlot(temperatureHistoryDiv, [temperatureTrace], temperatureLayout);
Plotly.newPlot(humidityHistoryDiv, [humidityTrace], humidityLayout);

// Gauge Data
var temperatureData = [
  {
    domain: { x: [0, 1], y: [0, 1] },
    value: 0,
    title: { text: "Temperatur" },
    type: "indicator",
    mode: "gauge+number+delta",
    delta: { reference: 20 },
    gauge: {
      axis: { range: [10, 30] },
      steps: [
        { range: [10, 15], color: "red" },
        { range: [15, 18], color: "yellow" },
        { range: [18, 22], color: "lightgreen" },
        { range: [22, 25], color: "yellow" },
        { range: [25, 30], color: "red" },
      ],
    },
  },
];

var humidityData = [
  {
    domain: { x: [0, 1], y: [0, 1] },
    value: 0,
    title: { text: "Feuchtigkeit" },
    type: "indicator",
    mode: "gauge+number+delta",
    delta: { reference: 69 },
    gauge: {
      axis: { range: [40, 103] },
      steps: [
        { range: [10, 65], color: "red" },
        { range: [65, 68], color: "yellow" },
        { range: [68, 75], color: "lightgreen" },
        { range: [75, 78], color: "yellow" },
        { range: [78, 103], color: "red" },
      ],
    },
  },
];

var layout = { width: 300, height: 250, margin: { t: 0, b: 0, l: 0, r: 0 }};

Plotly.newPlot(temperatureGaugeDiv, temperatureData, layout);
Plotly.newPlot(humidityGaugeDiv, humidityData, layout);

// Will hold the arrays we receive from our BME280 sensor
// Temperature
let newTempXArray = [];
let newTempYArray = [];
// Humidity
let newHumidityXArray = [];
let newHumidityYArray = [];

// The maximum number of data points displayed on our scatter/line graph
let MAX_GRAPH_POINTS = 60;
let ctr = 0;

// Callback function that will retrieve our latest sensor readings and redraw our Gauge with the latest readings
function updateSensorReadings() {
  fetch(`/sensorReadings`)
    .then((response) => response.json())
    .then((jsonResponse) => {
      let temperature_soll = jsonResponse.temperature_soll.toFixed(1);
      let temperature = jsonResponse.temperature.toFixed(1);
      let humidity = jsonResponse.humidity.toFixed(1);
      let humidity_soll = jsonResponse.humidity_soll.toFixed(1);
      

      updateBoxes(temperature, humidity);

      updateGauge(temperature_soll, temperature, humidity, humidity_soll);

      // Update Temperature Line Chart
      updateCharts(
        temperatureHistoryDiv,
        newTempXArray,
        newTempYArray,
        temperature
      );
      // Update Humidity Line Chart
      updateCharts(
        humidityHistoryDiv,
        newHumidityXArray,
        newHumidityYArray,
        humidity
      );
    });
}

function updateBoxes(temperature, humidity, pressure, altitude) {
  let temperatureDiv = document.getElementById("temperature");
  let humidityDiv = document.getElementById("humidity");

  temperatureDiv.innerHTML = temperature + " C";
  humidityDiv.innerHTML = humidity + " %";
}

function updateGauge(temperature_soll, temperature, humidity, humidity_soll) {
  //Celsius values in json
  if (temperature_soll==20) {
    var temperature_update = {
      value: temperature,
      'delta.reference': temperature_soll,
      'gauge.axis': [
        { range: [10, 30] },
      ],
      'gauge.steps': [
        { range: [10, 15], color: "red" },
        { range: [15, 18], color: "yellow" },
        { range: [18, 22], color: "lightgreen" },
        { range: [22, 25], color: "yellow" },
        { range: [25, 30], color: "red" },
      ],
    };
  };
  //Fahrenheit values in json
  if (temperature_soll!=20) {
    //var temp_soll = ((20*1.8)+32)
    var temperature_update = {
      value: temperature,
      'delta.reference': 68,
      'gauge.axis': [
        { range: [50, 86] },
      ],
      'gauge.steps': [
        { range: [50, 59], color: "red" },
        { range: [((15*1.8)+32), ((18*1.8)+32)], color: "yellow" },
        { range: [((18*1.8)+32), ((22*1.8)+32)], color: "lightgreen" },
        { range: [((22*1.8)+32), ((25*1.8)+32)], color: "yellow" },
        { range: [((25*1.8)+32), ((30*1.8)+32)], color: "red" },
      ],
    };
  };
  
  
  var humidity_update = {
    value: humidity,
    'delta.reference': humidity_soll,
  };
  Plotly.update(temperatureGaugeDiv, temperature_update);
  Plotly.update(humidityGaugeDiv, humidity_update);
}

function updateCharts(lineChartDiv, xArray, yArray, sensorRead) {
  if (xArray.length >= MAX_GRAPH_POINTS) {
    xArray.shift();
  }
  if (yArray.length >= MAX_GRAPH_POINTS) {
    yArray.shift();
  }
  xArray.push(ctr++);
  yArray.push(sensorRead);

  var data_update = {
    x: [xArray],
    y: [yArray],
  };

  Plotly.update(lineChartDiv, data_update);
}


// Continuos loop that runs evry 3 seconds to update our web page with the latest sensor readings
(function loop() {
  setTimeout(() => {
    updateSensorReadings();
    loop();
  }, 3000);
})();