oleh/minivlat-local-ua
1
0
Fork 0
mirror of https://github.com/olehomelchenko/minivlat-local-ua.git synced 2025-12-21 21:22:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

Enhance chart embedding with responsive design and custom export options

Browse Source
This commit is contained in:
Oleh Omelchenko
2025-01-30 10:18:24 +02:00
parent 56e2adbba0
commit c59d5bb263
1 changed files with 45 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
public/all-charts.html
View File

@@ -9,6 +9,20 @@
<script src="https://cdn.jsdelivr.net/npm/vega@5"></script> <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-lite@5"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-embed@6"></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> </head>
<body> <body>
<div id="all-charts"> <div id="all-charts">
@@ -37,9 +51,39 @@
if (question) { if (question) {
const chartContainer = document.createElement('div'); const chartContainer = document.createElement('div');
chartContainer.id = `chart-${question.chart}-${version}`; chartContainer.id = `chart-${question.chart}-${version}`;
chartContainer.className = 'chart-container';
allChartsContainer.appendChild(chartContainer); allChartsContainer.appendChild(chartContainer);
const chartFile = `charts/${question.chart}-${version}.vl.json`; const chartFile = `charts/${question.chart}-${version}.vl.json`;
vegaEmbed(`#chart-${question.chart}-${version}`, chartFile)
// 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 embedding chart:', error));
} }
}); });