Как правильно передать информацию через прослушиватель событий? [закрыто] ⇐ Python

[Anonymous]

У меня есть веб-приложение flask/javascript, и у меня возникли проблемы с передачей информации через прослушиватель событий.
Вот мой код:
fetch('/get_data')
.then(response => response.json())
.then(data => {
const toggleValue1 = document.getElementById("toggleValue1");
const toggleValue2 = document.getElementById("toggleValue2");

// Initial render with both values displayed
renderChart(data, toggleValue1.checked, toggleValue2.checked);

// Update chart when checkboxes change
toggleValue1.addEventListener("change", () => renderChart(data, toggleValue1.checked, toggleValue2.checked));
toggleValue2.addEventListener("change", () => renderChart(data, toggleValue1.checked, toggleValue2.checked));
})
.catch(error => console.error("Error fetching data:", error));

/get_data — это конечная точка колбы, определенная следующим образом:
@app.route('/get_data')
def timeseries():
# Sample time series data
data = [
{"date": "2024-01-01", "value1": 10, "value2": 15},
{"date": "2024-02-01", "value1": 20, "value2": 10},
{"date": "2024-03-01", "value1": 15, "value2": 20},
{"date": "2024-04-01", "value1": 30, "value2": 25},
{"date": "2024-05-01", "value1": 25, "value2": 30},
]
return jsonify(data)

Я распечатал значения данных и обнаружил это при первом вызове renderChart() и после первого вызова renderChart() , все правильно. Однако после того, как флажок установлен и прослушиватель событий вызывает renderChart(), данные имеют нулевые значения даты и выглядят следующим образом:
[
{"date": null, "value1": 10, "value2": 15},
{"date": null, "value1": 20, "value2": 10},
{"date": null, "value1": 15, "value2": 20},
{"date": null, "value1": 30, "value2": 25},
{"date": null, "value1": 25, "value2": 30},
]

Я не могу понять, почему даты обнуляются. Кто-нибудь знает, почему это может быть?
Вот мой полный код:
visualization_app.py
from flask import Flask, render_template, jsonify

app = Flask(__name__)

@app.route('/data_visualizations', methods=["GET", "POST"])
def get_data_visualizations():
return render_template('data_visualizations.html')

@app.route('/get_data')
def timeseries():
# Sample time series data
data = [
{"date": "2024-01-01", "value1": 10, "value2": 15},
{"date": "2024-02-01", "value1": 20, "value2": 10},
{"date": "2024-03-01", "value1": 15, "value2": 20},
{"date": "2024-04-01", "value1": 30, "value2": 25},
{"date": "2024-05-01", "value1": 25, "value2": 30},
]
return jsonify(data)

if __name__ == '__main__':
app.run(host="0.0.0.0", port=8080, debug=True)
#app.run(ssl_context=('cert.pem', 'key.pem'))


script.js
// Chart area and margins
const margin = { top: 20, right: 30, bottom: 50, left: 60 };
const width = 800 - margin.left - margin.right;
const height = 500 - margin.top - margin.bottom;

const svg = d3.select("#chart")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", `translate(${margin.left},${margin.top})`);

const color = { value1: "blue", value2: "orange" };

// Scales and axes
const x = d3.scaleTime().range([0, width]);
const y = d3.scaleLinear().range([height, 0]);

const xAxisGroup = svg.append("g")
.attr("class", "x-axis")
.attr("transform", `translate(0,${height})`);

const yAxisGroup = svg.append("g")
.attr("class", "y-axis");

// Line generators
const lineValue1 = d3.line()
.x(d => x(d.date))
.y(d => y(d.value1));

const lineValue2 = d3.line()
.x(d => x(d.date))
.y(d => y(d.value2));

// Function to render the chart
function renderChart(data, displayValue1, displayValue2) {

console.log("Data 1: ", data)

// Parse dates and set up data bounds
const parseTime = d3.timeParse("%Y-%m-%d");
data.forEach(d => {
d.date = parseTime(d.date);
d.value1 = +d.value1;
d.value2 = +d.value2;
});

console.log("Data 2: ", data)

// Set domains for scales
x.domain(d3.extent(data, d => d.date));
y.domain([0, d3.max(data, d => Math.max(d.value1, d.value2))]);

// Draw the axes
xAxisGroup.call(d3.axisBottom(x));
yAxisGroup.call(d3.axisLeft(y));

// Clear existing lines
svg.selectAll(".line-value1").remove();
svg.selectAll(".line-value2").remove();

// Draw lines based on checkbox selections
if (displayValue1) {
svg.append("path")
.datum(data)
.attr("fill", "none")
.attr("stroke", color.value1)
.attr("stroke-width", 2)
.attr("class", "line-value1")
.attr("d", lineValue1);
}

if (displayValue2) {
svg.append("path")
.datum(data)
.attr("fill", "none")
.attr("stroke", color.value2)
.attr("stroke-width", 2)
.attr("class", "line-value2")
.attr("d", lineValue2);
}

console.log("Data 3: ", data)
}

// Apply zoom behavior to the SVG container
svg.on(".zoom", null);

// Fetch data from the Flask API and initialize the chart
fetch('/get_data')
.then(response => response.json())
.then(data => {
const toggleValue1 = document.getElementById("toggleValue1");
const toggleValue2 = document.getElementById("toggleValue2");

// Initial render with both values displayed
renderChart(data, toggleValue1.checked, toggleValue2.checked);

console.log("Data 4: ", data)

// Update chart when checkboxes change
toggleValue1.addEventListener("change", () => renderChart(data, toggleValue1.checked, toggleValue2.checked));
toggleValue2.addEventListener("change", () => renderChart(data, toggleValue1.checked, toggleValue2.checked));
})
.catch(error => console.error("Error fetching data:", error));


data_visualizations.html





Time Series Line Graph with Toggle




Time Series Data

Value 1
Value 2








Подробнее здесь: https://stackoverflow.com/questions/791 ... t-listener