From f2cb82ca813928cb20a7d7a9350d4880d5a5f0b5 Mon Sep 17 00:00:00 2001
From: Oleh Omelchenko <ptrvtch@protonmail.com>
Date: Thu, 30 Jan 2025 09:39:44 +0200
Subject: [PATCH] Add new HTML file for dynamic chart embedding and
 visualization

---
 public/all-charts.html | 55 ++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 55 insertions(+)
 create mode 100644 public/all-charts.html
diff --git a/public/all-charts.html b/public/all-charts.html
new file mode 100644
index 0000000..692ea12
--- /dev/null
+++ b/public/all-charts.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+    <title>all-charts</title>
+    <link rel="stylesheet" href="css/styles.css">
+    <script src="https://cdn.jsdelivr.net/npm/vega@5"></script>
+    <script src="https://cdn.jsdelivr.net/npm/vega-lite@5"></script>
+    <script src="https://cdn.jsdelivr.net/npm/vega-embed@6"></script>
+</head>
+<body>
+    <div id="all-charts">
+        <!-- Containers for all charts will be dynamically added here -->
+    </div>
+    <script>
+        function createAllCharts() {
+            fetch('data/questions.json')
+                .then(response => response.json())
+                .then(data => {
+                    const versions = Object.keys(data.quizzes);
+                    const allChartsContainer = document.getElementById('all-charts');
+                    const chartTypes = new Set();
+
+                    // Collect all unique chart types
+                    versions.forEach(version => {
+                        data.quizzes[version].questions.forEach(question => {
+                            chartTypes.add(question.chart);
+                        });
+                    });
+
+                    // Iterate over each chart type and embed charts for all versions
+                    chartTypes.forEach(chartType => {
+                        versions.forEach(version => {
+                            const question = data.quizzes[version].questions.find(q => q.chart === chartType);
+                            if (question) {
+                                const chartContainer = document.createElement('div');
+                                chartContainer.id = `chart-${question.chart}-${version}`;
+                                allChartsContainer.appendChild(chartContainer);
+                                const chartFile = `charts/${question.chart}-${version}.vl.json`;
+                                vegaEmbed(`#chart-${question.chart}-${version}`, chartFile)
+                                    .catch(error => console.error('Error embedding chart:', error));
+                            }
+                        });
+                    });
+                })
+                .catch(error => console.error('Error loading questions:', error));
+        }
+
+        // Call the function to create all charts
+        createAllCharts();
+    </script>
+</body>
+</html>
\ No newline at end of file
