// Initializing the list of months
const months = [
	"january",
	"february",
	"march",
	"april",
	"may",
	"june",
	"july",
	"august",
	"september",
	"october",
	"november",
	"december",
];

// Initializing the chart diagram element
const chart = document.querySelector("#diagram>svg.chart");

const resize = new ResizeObserver((entries) => {
	entries.forEach((entry) => {
		// Initializing offset
		const offset = entry.contentRect.width / 11;

		// Generating width of the shell (100% + 10%)
		entry.target.setAttribute(
			"viewBox",
			"-30 -40 " + (entry.contentRect.width + 60) + " 280",
		);

		// Initializing the chart line elements
		const [
			background,
			line,
			horizontal,
			vertical,
		] = entry.target.getElementsByTagName("polyline");

		// Initializing coordinates
		const coordinates = new Map();

		// Generating coordinates
		line
			.getAttribute("points")
			?.split(" ")
			.forEach((coordinate, index) => {
				// Iterating over generated coordinates

				// Writing generated coordinate
				coordinates.set(months[index], [
					offset * index,
					coordinate.split(",")[1],
				]);
			});

		// Declaring generated coordinates attribute value
		let points = "";

		// Initializing nodes and titles (<a> elements)
		const a = entry.target.getElementsByTagName("a");

		// Initializing iterator
		let i = 0;

		coordinates.forEach((coordinate, month) => {
			// Iterating over generated coordinates

			// Initializing texts and nodes
			const [text, circle] = a[i++].children;

			// Writing coordinate for the text
			// if (i === 1) {
			//   text.setAttribute("x", coordinate[0] + 12);
			//   text.setAttribute("y", coordinate[1] - 18);
			// } else {
			text.setAttribute("x", coordinate[0]);
			text.setAttribute("y", i % 2 ? +coordinate[1] + 30 : coordinate[1] - 25);
			// }

			// Writing coordinate for the node
			circle.setAttribute("cx", coordinate[0]);
			circle.setAttribute("cy", coordinate[1]);

			// Generating coordinates attribute value for the line
			points += coordinate[0] + "," + coordinate[1] + " ";
		});

		// Trimming the last space character
		points = points.trimEnd();

		// Writing coordinates to the line
		line.setAttribute("points", points);

		// Initializing last coordinate
		const last = offset * 11;

		// Writing coordinates to the line background
		background.setAttribute(
			"points",
			// "0,155 " + points + " " + offset * 11 + ",155"
			points + " " + last + ",155",
		);

		// Initializing background rectangle
		const rectangle = entry.target.getElementsByTagName("rect")[0];

		// Writing coordinate to the background rectangle
		rectangle.setAttribute("width", last);

		// Writing coordinates to the horizontal metadata line
		horizontal.setAttribute("points", "0,155 " + last + ",155");

		// Initializing horizontal legend text
		const time = entry.target.getElementsByTagName("text")[0];

		// Writing coordinate to the horizontal legend text
		time.setAttribute("x", last);
	});
});

// start listening to changes
resize.observe(chart);

// later, stop listening to changes
// myObserver.disconnect();
