Use system font with proper ₽ symbol and fix modal close behavior

- Switch to SF Pro / system font stack for consistent ₽ rendering
- Apply font to both HTML and ECharts center text
- Reset chart highlight and details panel when closing modal

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Anton Volnuhin 2026-01-30 22:29:27 +03:00
parent 23b32fab31
commit 0bc2725d4d
2 changed files with 8 additions and 2 deletions

8
app.js
View File

@ -3,6 +3,7 @@ const chartDom = document.getElementById('chart-container');
const myChart = echarts.init(chartDom); const myChart = echarts.init(chartDom);
let option; let option;
let originalSunburstData = null; // Stores the original data for the current month (for reset on center click) let originalSunburstData = null; // Stores the original data for the current month (for reset on center click)
let showDefaultView = null; // Reference to reset details panel to default view
// Drill-down history for back/forward navigation // Drill-down history for back/forward navigation
let drillDownHistory = []; let drillDownHistory = [];
@ -686,6 +687,7 @@ function renderChart(data) {
z: 100, z: 100,
style: { style: {
text: russianMonth + '\n' + sunburstData.total.toFixed(0).toLocaleString() + ' ₽', text: russianMonth + '\n' + sunburstData.total.toFixed(0).toLocaleString() + ' ₽',
fontFamily: '-apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
fontWeight: 'bold', fontWeight: 'bold',
fontSize: 18, fontSize: 18,
textAlign: 'left', textAlign: 'left',
@ -1621,7 +1623,8 @@ function setupHoverEvents(sunburstData, contextName = null) {
} }
// Show the default view with top categories // Show the default view with top categories
function showDefaultView() { // Assign to global so it can be called from closeTransactionModal
showDefaultView = function() {
// Use context name (drilled-down sector) if provided, otherwise use month name // Use context name (drilled-down sector) if provided, otherwise use month name
const selectedMonth = document.getElementById('month-select').value; const selectedMonth = document.getElementById('month-select').value;
const monthName = getRussianMonthName(selectedMonth); const monthName = getRussianMonthName(selectedMonth);
@ -2075,6 +2078,9 @@ function setupRowDetailModalListeners() {
function closeTransactionModal() { function closeTransactionModal() {
const modal = document.getElementById('transaction-modal'); const modal = document.getElementById('transaction-modal');
modal.style.display = 'none'; modal.style.display = 'none';
// Remove any chart highlight and reset details panel
myChart.dispatchAction({ type: 'downplay' });
if (showDefaultView) showDefaultView();
} }
// Global escape key handler for all modals // Global escape key handler for all modals

View File

@ -5,7 +5,7 @@
} }
body { body {
font-family: Arial, sans-serif; font-family: -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
background-color: #f5f5f5; background-color: #f5f5f5;
color: #333; color: #333;
} }