
////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////
const output = {
    "focus": {
        "m2": [-172.5, -157.5, -142.5, -127.5, -112.5],
        "fwhm": [0.10064985570671775, 0.13491970933111289, 0.11172006170908892, 0.11070416111967406, 0.17595453291547908]
    }
}

const focus = output.focus
const data = focus.m2.map((x, i) => ({ x, y: focus.fwhm[i] }));

// // Sample data
// const data = [
//     { x: 0.5, y: 5 },
//     { x: 1, y: 7 },
//     { x: 2.5, y: 1 },
//     { x: 3, y: 3 },
//     { x: 4, y: 18 },
//     { x: 6, y: 1118 },
// ];

var keys = Object.keys(focus)
// Create the line chart in the specified container
const chart1 = lineChart("#box1-chart", data, {xlabel:keys[0], ylabel:keys[1]});
const chart2 = lineChart("#box2-chart", data, {yrange:[-1,1]});
const chart3 = linepointChart("#box3-chart", data, {xlabel:"con punti"});
const chart4 = linepointChart("#box4-chart", data, {xlabel:"solo punti"});

// Function to add a new data point and update the chart
function test() {
    const newDataPoint = {
        x: data.length,
        y: Math.random() * 10  // Generate a random y value for demonstration
    };
    
    // Add the new data point to the data array
    data.push(newDataPoint);
    
    // Update the chart with the new data
    chart1.update(data);    
    chart2.update(data.slice(-10));
    chart3.update(data);    
    chart4.update(data.slice(-10));
}

$("#showline").change(function(){
    var flag = $(this).prop("checked")
    chart3.showLine(flag);
})

$("#showpoints").change(function(){
    var flag = $(this).prop("checked")
    chart3.showPoints(flag);
})

$("#ylog").change(function(){
    var flag = $(this).prop("checked")
    chart3.ylog(flag);
})

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


// Sample data for createHeatmap
const createHeatmapData1 = Array.from({ length: 30 }, (_, i) =>
  Array.from({ length: 70 }, (_, j) => Math.random())
);

// Sample data for createHeatmap
const createHeatmapData2 = Array.from({ length: 70 }, (_, i) =>
  Array.from({ length: 30 }, (_, j) => Math.random())
);

// Test function
function testHeatmap() {    
    
    const heatmapChart1 = matrixChart("#box5-chart", createHeatmapData1,
                                      {ylabel: "qwe"
                                      })
    const heatmapChart2 = matrixChart("#box6-chart", createHeatmapData2)
    
    d3.selectAll("#minColorScale,#maxColorScale").on("input", function () {
        const minColorScaleValue = +d3.select("#minColorScale").property("value");
        const maxColorScaleValue = +d3.select("#maxColorScale").property("value");
        heatmapChart1.setColorScale([minColorScaleValue, maxColorScaleValue]);
    });
    
    
  // Example of updating the heatmap every 5 seconds
  setInterval(() => {
    const newData1 = Array.from({ length: 30 }, (_, i) =>
      Array.from({ length: 70 }, (_, j) => Math.random())
    );
    const newData2 = Array.from({ length: 70 }, (_, i) =>
      Array.from({ length: 30 }, (_, j) => Math.random())
    );
      heatmapChart1.update(newData1);
      heatmapChart2.update(newData2);
      
  }, 1000);

    
}

// Call the test function
testHeatmap();


