mirror of
https://github.com/olehomelchenko/minivlat-local-ua.git
synced 2025-12-21 13:12:23 +00:00
99 lines
4.8 KiB
HTML
99 lines
4.8 KiB
HTML
<!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>
|
||
<style>
|
||
/* Ensure charts are resized to 100% width */
|
||
.chart-container {
|
||
width: 100%;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
/* Optimize for mobile */
|
||
@media (max-width: 768px) {
|
||
body {
|
||
padding: 10px;
|
||
}
|
||
}
|
||
</style>
|
||
</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}`;
|
||
chartContainer.className = 'chart-container';
|
||
allChartsContainer.appendChild(chartContainer);
|
||
const chartFile = `charts/${question.chart}-${version}.vl.json`;
|
||
|
||
// Embed the Vega-Lite chart with custom options
|
||
const embedOptions = {
|
||
downloadFileName: `${question.chart}-${version}`,
|
||
actions: {
|
||
export: {
|
||
svg: true,
|
||
png: true
|
||
},
|
||
source: false,
|
||
compiled: false,
|
||
editor: false
|
||
},
|
||
tooltip: false, // Disable tooltips
|
||
};
|
||
|
||
if (version === 'ukrainian') {
|
||
embedOptions.timeFormatLocale = {
|
||
dateTime: "%A, %e %B %Y р. %X",
|
||
date: "%d.%m.%Y",
|
||
time: "%H:%M:%S",
|
||
periods: ["", ""],
|
||
days: ["неділя", "понеділок", "вівторок", "середа", "четвер", "п'ятниця", "субота"],
|
||
shortDays: ["нд", "пн", "вт", "ср", "чт", "пт", "сб"],
|
||
months: ["січень", "лютий", "березень", "квітень", "травень", "червень", "липень", "серпень", "вересень", "жовтень", "листопад", "грудень"],
|
||
shortMonths: ["січ", "лют", "бер", "кві", "тра", "чер", "лип", "сер", "вер", "жов", "лис", "гру"]
|
||
};
|
||
}
|
||
|
||
vegaEmbed(`#chart-${question.chart}-${version}`, chartFile, embedOptions)
|
||
.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> |