Buckets:
| <html lang="ro"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>Dashboard Buget Universitate Demo</title> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet"> | |
| <style> | |
| :root { | |
| --bg: #f6f7fb; | |
| --card: #ffffff; | |
| --text: #111827; | |
| --muted: #6b7280; | |
| --line: #e5e7eb; | |
| --blue: #0041dc; | |
| --green: #16a34a; | |
| --red: #dc2626; | |
| --amber: #f59e0b; | |
| --shadow: 0 18px 50px rgba(17, 24, 39, 0.08); | |
| --radius: 24px; | |
| } | |
| * { box-sizing: border-box; } | |
| body { | |
| margin: 0; | |
| font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; | |
| background: radial-gradient(circle at top left, rgba(0, 65, 220, 0.10), transparent 34%), var(--bg); | |
| color: var(--text); | |
| } | |
| .page { | |
| width: min(1280px, calc(100% - 32px)); | |
| margin: 0 auto; | |
| padding: 36px 0 48px; | |
| } | |
| .hero { | |
| display: flex; | |
| align-items: flex-end; | |
| justify-content: space-between; | |
| gap: 24px; | |
| margin-bottom: 28px; | |
| } | |
| .eyebrow { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| padding: 8px 12px; | |
| border: 1px solid rgba(0, 65, 220, 0.14); | |
| border-radius: 999px; | |
| color: var(--blue); | |
| background: rgba(0, 65, 220, 0.06); | |
| font-size: 13px; | |
| font-weight: 700; | |
| margin-bottom: 14px; | |
| } | |
| h1 { | |
| margin: 0; | |
| font-size: clamp(34px, 5vw, 64px); | |
| letter-spacing: -0.055em; | |
| line-height: 0.94; | |
| } | |
| .subtitle { | |
| margin: 14px 0 0; | |
| color: var(--muted); | |
| font-size: 16px; | |
| max-width: 680px; | |
| line-height: 1.65; | |
| } | |
| .meta-card { | |
| background: rgba(255,255,255,0.72); | |
| border: 1px solid rgba(229,231,235,0.86); | |
| border-radius: 20px; | |
| padding: 16px 18px; | |
| min-width: 220px; | |
| box-shadow: 0 12px 34px rgba(17, 24, 39, 0.05); | |
| backdrop-filter: blur(10px); | |
| } | |
| .meta-card span { display: block; color: var(--muted); font-size: 13px; } | |
| .meta-card strong { display: block; margin-top: 4px; font-size: 20px; } | |
| .kpi-grid { | |
| display: grid; | |
| grid-template-columns: repeat(4, minmax(0, 1fr)); | |
| gap: 18px; | |
| margin-bottom: 18px; | |
| } | |
| .kpi { | |
| background: var(--card); | |
| border: 1px solid var(--line); | |
| border-radius: var(--radius); | |
| padding: 22px; | |
| box-shadow: var(--shadow); | |
| min-height: 144px; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: space-between; | |
| } | |
| .kpi-label { color: var(--muted); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; } | |
| .kpi-value { font-size: clamp(24px, 3vw, 36px); font-weight: 800; letter-spacing: -0.05em; margin-top: 12px; } | |
| .kpi-note { color: var(--muted); font-size: 13px; margin-top: 10px; } | |
| .positive { color: var(--green); } | |
| .negative { color: var(--red); } | |
| .blue { color: var(--blue); } | |
| .dashboard-grid { | |
| display: grid; | |
| grid-template-columns: 1.15fr 0.85fr; | |
| gap: 18px; | |
| margin-top: 18px; | |
| } | |
| .panel { | |
| background: var(--card); | |
| border: 1px solid var(--line); | |
| border-radius: var(--radius); | |
| padding: 22px; | |
| box-shadow: var(--shadow); | |
| } | |
| .panel-head { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 14px; | |
| margin-bottom: 16px; | |
| } | |
| .panel h2 { | |
| margin: 0; | |
| font-size: 19px; | |
| letter-spacing: -0.03em; | |
| } | |
| .panel small { color: var(--muted); font-weight: 600; } | |
| .chart-wrap { height: 330px; } | |
| .chart-wrap.small { height: 280px; } | |
| .table-wrap { overflow-x: auto; border-radius: 18px; border: 1px solid var(--line); } | |
| table { width: 100%; border-collapse: collapse; background: #fff; min-width: 850px; } | |
| th, td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--line); font-size: 14px; } | |
| th { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; background: #f9fafb; } | |
| tr:last-child td { border-bottom: none; } | |
| .pill { display:inline-flex; align-items:center; padding: 6px 10px; border-radius: 999px; font-weight: 700; font-size: 12px; } | |
| .pill.in { background: rgba(22, 163, 74, 0.10); color: var(--green); } | |
| .pill.out { background: rgba(220, 38, 38, 0.10); color: var(--red); } | |
| .bar-list { display: grid; gap: 14px; } | |
| .bar-row { display: grid; gap: 8px; } | |
| .bar-top { display:flex; justify-content:space-between; gap:12px; font-size: 14px; font-weight: 700; } | |
| .bar-track { height: 10px; background: #eef2ff; border-radius: 999px; overflow:hidden; } | |
| .bar-fill { height: 100%; background: var(--blue); border-radius: 999px; } | |
| .value-muted { color: var(--muted); font-weight: 600; } | |
| @media (max-width: 980px) { | |
| .hero { flex-direction: column; align-items: flex-start; } | |
| .meta-card { width: 100%; } | |
| .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } | |
| .dashboard-grid { grid-template-columns: 1fr; } | |
| } | |
| @media (max-width: 620px) { | |
| .page { width: min(100% - 20px, 1280px); padding-top: 22px; } | |
| .kpi-grid { grid-template-columns: 1fr; } | |
| .panel, .kpi { padding: 18px; border-radius: 20px; } | |
| .chart-wrap, .chart-wrap.small { height: 260px; } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <main class="page"> | |
| <section class="hero"> | |
| <div> | |
| <div class="eyebrow">Buget demo universitar · CSV static</div> | |
| <h1>Dashboard buget universitate</h1> | |
| <p class="subtitle">Vizualizare sintetică pentru 20 de intrări demo: venituri, cheltuieli, surse de finanțare, departamente și valori bugetare pentru perioada 2026.</p> | |
| </div> | |
| <div class="meta-card"> | |
| <span>Perioadă analizată</span> | |
| <strong>2026 · MDL</strong> | |
| </div> | |
| </section> | |
| <section class="kpi-grid"> | |
| <article class="kpi"> | |
| <div> | |
| <div class="kpi-label">Total venituri</div> | |
| <div class="kpi-value positive" id="kpi-venituri"></div> | |
| </div> | |
| <div class="kpi-note">Taxe, subvenții, granturi, cercetare și sponsorizări.</div> | |
| </article> | |
| <article class="kpi"> | |
| <div> | |
| <div class="kpi-label">Total cheltuieli</div> | |
| <div class="kpi-value negative" id="kpi-cheltuieli"></div> | |
| </div> | |
| <div class="kpi-note">Salarii, burse, utilități, IT, logistică și mentenanță.</div> | |
| </article> | |
| <article class="kpi"> | |
| <div> | |
| <div class="kpi-label">Sold estimat</div> | |
| <div class="kpi-value blue" id="kpi-sold"></div> | |
| </div> | |
| <div class="kpi-note">Diferența dintre venituri și cheltuieli.</div> | |
| </article> | |
| <article class="kpi"> | |
| <div> | |
| <div class="kpi-label">Intrări CSV</div> | |
| <div class="kpi-value" id="kpi-count"></div> | |
| </div> | |
| <div class="kpi-note">Set demo complet, pregătit pentru testare.</div> | |
| </article> | |
| </section> | |
| <section class="dashboard-grid"> | |
| <article class="panel"> | |
| <div class="panel-head"> | |
| <div> | |
| <h2>Venituri vs. cheltuieli</h2> | |
| <small>Agregare pe categorie principală</small> | |
| </div> | |
| </div> | |
| <div class="chart-wrap"><canvas id="categoryChart"></canvas></div> | |
| </article> | |
| <article class="panel"> | |
| <div class="panel-head"> | |
| <div> | |
| <h2>Distribuție pe tip</h2> | |
| <small>Ponderea fluxurilor bugetare</small> | |
| </div> | |
| </div> | |
| <div class="chart-wrap small"><canvas id="typeChart"></canvas></div> | |
| </article> | |
| </section> | |
| <section class="dashboard-grid"> | |
| <article class="panel"> | |
| <div class="panel-head"> | |
| <div> | |
| <h2>Top subcategorii după valoare</h2> | |
| <small>Cele mai mari linii bugetare din CSV</small> | |
| </div> | |
| </div> | |
| <div class="chart-wrap"><canvas id="subChart"></canvas></div> | |
| </article> | |
| <article class="panel"> | |
| <div class="panel-head"> | |
| <div> | |
| <h2>Departamente</h2> | |
| <small>Valori cumulate pe departament</small> | |
| </div> | |
| </div> | |
| <div class="bar-list" id="departmentBars"></div> | |
| </article> | |
| </section> | |
| <section class="panel" style="margin-top:18px;"> | |
| <div class="panel-head"> | |
| <div> | |
| <h2>Tabel detaliat</h2> | |
| <small>Toate cele 20 de intrări din fișierul CSV</small> | |
| </div> | |
| </div> | |
| <div class="table-wrap"> | |
| <table> | |
| <thead> | |
| <tr> | |
| <th>ID</th> | |
| <th>Categorie</th> | |
| <th>Subcategorie</th> | |
| <th>Tip</th> | |
| <th>Sursă finanțare</th> | |
| <th>Valoare</th> | |
| <th>Departament</th> | |
| </tr> | |
| </thead> | |
| <tbody id="budgetRows"></tbody> | |
| </table> | |
| </div> | |
| </section> | |
| </main> | |
| <script> | |
| const records = [{"ID": 1, "Categorie": "Venituri", "Subcategorie": "Taxe de școlarizare", "Tip": "Venit", "Sursă_Finanțare": "Studenți", "Valoare": 2500000, "Monedă": "MDL", "Perioadă": 2026, "Departament": "Financiar"}, {"ID": 2, "Categorie": "Venituri", "Subcategorie": "Subvenții de la stat", "Tip": "Venit", "Sursă_Finanțare": "Buget de stat", "Valoare": 3200000, "Monedă": "MDL", "Perioadă": 2026, "Departament": "Financiar"}, {"ID": 3, "Categorie": "Venituri", "Subcategorie": "Proiecte europene", "Tip": "Venit", "Sursă_Finanțare": "Grant UE", "Valoare": 1800000, "Monedă": "MDL", "Perioadă": 2026, "Departament": "Cercetare"}, {"ID": 4, "Categorie": "Venituri", "Subcategorie": "Contracte cercetare", "Tip": "Venit", "Sursă_Finanțare": "Parteneriate", "Valoare": 900000, "Monedă": "MDL", "Perioadă": 2026, "Departament": "Cercetare"}, {"ID": 5, "Categorie": "Venituri", "Subcategorie": "Donații și sponsorizări", "Tip": "Venit", "Sursă_Finanțare": "Privat", "Valoare": 350000, "Monedă": "MDL", "Perioadă": 2026, "Departament": "Relații externe"}, {"ID": 6, "Categorie": "Cheltuieli", "Subcategorie": "Salarii cadre didactice", "Tip": "Cheltuială", "Sursă_Finanțare": "Fond salarial", "Valoare": 2800000, "Monedă": "MDL", "Perioadă": 2026, "Departament": "HR"}, {"ID": 7, "Categorie": "Cheltuieli", "Subcategorie": "Salarii personal administrativ", "Tip": "Cheltuială", "Sursă_Finanțare": "Fond salarial", "Valoare": 1200000, "Monedă": "MDL", "Perioadă": 2026, "Departament": "HR"}, {"ID": 8, "Categorie": "Cheltuieli", "Subcategorie": "Utilități", "Tip": "Cheltuială", "Sursă_Finanțare": "Electricitate/Gaz", "Valoare": 600000, "Monedă": "MDL", "Perioadă": 2026, "Departament": "Administrativ"}, {"ID": 9, "Categorie": "Cheltuieli", "Subcategorie": "Întreținere clădiri", "Tip": "Cheltuială", "Sursă_Finanțare": "Mentenanță", "Valoare": 450000, "Monedă": "MDL", "Perioadă": 2026, "Departament": "Administrativ"}, {"ID": 10, "Categorie": "Cheltuieli", "Subcategorie": "Echipamente IT", "Tip": "Cheltuială", "Sursă_Finanțare": "Investiții", "Valoare": 700000, "Monedă": "MDL", "Perioadă": 2026, "Departament": "IT"}, {"ID": 11, "Categorie": "Cheltuieli", "Subcategorie": "Licențe software", "Tip": "Cheltuială", "Sursă_Finanțare": "IT", "Valoare": 300000, "Monedă": "MDL", "Perioadă": 2026, "Departament": "IT"}, {"ID": 12, "Categorie": "Cheltuieli", "Subcategorie": "Burse studenți", "Tip": "Cheltuială", "Sursă_Finanțare": "Social", "Valoare": 950000, "Monedă": "MDL", "Perioadă": 2026, "Departament": "Studenți"}, {"ID": 13, "Categorie": "Cheltuieli", "Subcategorie": "Evenimente academice", "Tip": "Cheltuială", "Sursă_Finanțare": "Conferințe", "Valoare": 200000, "Monedă": "MDL", "Perioadă": 2026, "Departament": "Cercetare"}, {"ID": 14, "Categorie": "Cheltuieli", "Subcategorie": "Mobilitate internațională", "Tip": "Cheltuială", "Sursă_Finanțare": "Erasmus+", "Valoare": 400000, "Monedă": "MDL", "Perioadă": 2026, "Departament": "Relații externe"}, {"ID": 15, "Categorie": "Cheltuieli", "Subcategorie": "Marketing și promovare", "Tip": "Cheltuială", "Sursă_Finanțare": "Comunicare", "Valoare": 150000, "Monedă": "MDL", "Perioadă": 2026, "Departament": "Marketing"}, {"ID": 16, "Categorie": "Cheltuieli", "Subcategorie": "Servicii juridice", "Tip": "Cheltuială", "Sursă_Finanțare": "Consultanță", "Valoare": 120000, "Monedă": "MDL", "Perioadă": 2026, "Departament": "Administrativ"}, {"ID": 17, "Categorie": "Cheltuieli", "Subcategorie": "Servicii externe", "Tip": "Cheltuială", "Sursă_Finanțare": "Outsourcing", "Valoare": 220000, "Monedă": "MDL", "Perioadă": 2026, "Departament": "Administrativ"}, {"ID": 18, "Categorie": "Cheltuieli", "Subcategorie": "Materiale didactice", "Tip": "Cheltuială", "Sursă_Finanțare": "Consumabile", "Valoare": 180000, "Monedă": "MDL", "Perioadă": 2026, "Departament": "Academic"}, {"ID": 19, "Categorie": "Cheltuieli", "Subcategorie": "Transport și logistică", "Tip": "Cheltuială", "Sursă_Finanțare": "Operațional", "Valoare": 160000, "Monedă": "MDL", "Perioadă": 2026, "Departament": "Administrativ"}, {"ID": 20, "Categorie": "Cheltuieli", "Subcategorie": "Fond de rezervă", "Tip": "Cheltuială", "Sursă_Finanțare": "Strategic", "Valoare": 300000, "Monedă": "MDL", "Perioadă": 2026, "Departament": "Financiar"}]; | |
| const byCategory = [{"Categorie": "Cheltuieli", "Valoare": 8730000}, {"Categorie": "Venituri", "Valoare": 8750000}]; | |
| const byDepartment = [{"Departament": "Financiar", "Valoare": 6000000}, {"Departament": "HR", "Valoare": 4000000}, {"Departament": "Cercetare", "Valoare": 2900000}, {"Departament": "Administrativ", "Valoare": 1550000}, {"Departament": "IT", "Valoare": 1000000}, {"Departament": "Studenți", "Valoare": 950000}, {"Departament": "Relații externe", "Valoare": 750000}, {"Departament": "Academic", "Valoare": 180000}, {"Departament": "Marketing", "Valoare": 150000}]; | |
| const bySubcategory = [{"ID": 2, "Categorie": "Venituri", "Subcategorie": "Subvenții de la stat", "Tip": "Venit", "Sursă_Finanțare": "Buget de stat", "Valoare": 3200000, "Monedă": "MDL", "Perioadă": 2026, "Departament": "Financiar"}, {"ID": 6, "Categorie": "Cheltuieli", "Subcategorie": "Salarii cadre didactice", "Tip": "Cheltuială", "Sursă_Finanțare": "Fond salarial", "Valoare": 2800000, "Monedă": "MDL", "Perioadă": 2026, "Departament": "HR"}, {"ID": 1, "Categorie": "Venituri", "Subcategorie": "Taxe de școlarizare", "Tip": "Venit", "Sursă_Finanțare": "Studenți", "Valoare": 2500000, "Monedă": "MDL", "Perioadă": 2026, "Departament": "Financiar"}, {"ID": 3, "Categorie": "Venituri", "Subcategorie": "Proiecte europene", "Tip": "Venit", "Sursă_Finanțare": "Grant UE", "Valoare": 1800000, "Monedă": "MDL", "Perioadă": 2026, "Departament": "Cercetare"}, {"ID": 7, "Categorie": "Cheltuieli", "Subcategorie": "Salarii personal administrativ", "Tip": "Cheltuială", "Sursă_Finanțare": "Fond salarial", "Valoare": 1200000, "Monedă": "MDL", "Perioadă": 2026, "Departament": "HR"}, {"ID": 12, "Categorie": "Cheltuieli", "Subcategorie": "Burse studenți", "Tip": "Cheltuială", "Sursă_Finanțare": "Social", "Valoare": 950000, "Monedă": "MDL", "Perioadă": 2026, "Departament": "Studenți"}, {"ID": 4, "Categorie": "Venituri", "Subcategorie": "Contracte cercetare", "Tip": "Venit", "Sursă_Finanțare": "Parteneriate", "Valoare": 900000, "Monedă": "MDL", "Perioadă": 2026, "Departament": "Cercetare"}, {"ID": 10, "Categorie": "Cheltuieli", "Subcategorie": "Echipamente IT", "Tip": "Cheltuială", "Sursă_Finanțare": "Investiții", "Valoare": 700000, "Monedă": "MDL", "Perioadă": 2026, "Departament": "IT"}, {"ID": 8, "Categorie": "Cheltuieli", "Subcategorie": "Utilități", "Tip": "Cheltuială", "Sursă_Finanțare": "Electricitate/Gaz", "Valoare": 600000, "Monedă": "MDL", "Perioadă": 2026, "Departament": "Administrativ"}, {"ID": 9, "Categorie": "Cheltuieli", "Subcategorie": "Întreținere clădiri", "Tip": "Cheltuială", "Sursă_Finanțare": "Mentenanță", "Valoare": 450000, "Monedă": "MDL", "Perioadă": 2026, "Departament": "Administrativ"}, {"ID": 14, "Categorie": "Cheltuieli", "Subcategorie": "Mobilitate internațională", "Tip": "Cheltuială", "Sursă_Finanțare": "Erasmus+", "Valoare": 400000, "Monedă": "MDL", "Perioadă": 2026, "Departament": "Relații externe"}, {"ID": 5, "Categorie": "Venituri", "Subcategorie": "Donații și sponsorizări", "Tip": "Venit", "Sursă_Finanțare": "Privat", "Valoare": 350000, "Monedă": "MDL", "Perioadă": 2026, "Departament": "Relații externe"}, {"ID": 11, "Categorie": "Cheltuieli", "Subcategorie": "Licențe software", "Tip": "Cheltuială", "Sursă_Finanțare": "IT", "Valoare": 300000, "Monedă": "MDL", "Perioadă": 2026, "Departament": "IT"}, {"ID": 20, "Categorie": "Cheltuieli", "Subcategorie": "Fond de rezervă", "Tip": "Cheltuială", "Sursă_Finanțare": "Strategic", "Valoare": 300000, "Monedă": "MDL", "Perioadă": 2026, "Departament": "Financiar"}, {"ID": 17, "Categorie": "Cheltuieli", "Subcategorie": "Servicii externe", "Tip": "Cheltuială", "Sursă_Finanțare": "Outsourcing", "Valoare": 220000, "Monedă": "MDL", "Perioadă": 2026, "Departament": "Administrativ"}, {"ID": 13, "Categorie": "Cheltuieli", "Subcategorie": "Evenimente academice", "Tip": "Cheltuială", "Sursă_Finanțare": "Conferințe", "Valoare": 200000, "Monedă": "MDL", "Perioadă": 2026, "Departament": "Cercetare"}, {"ID": 18, "Categorie": "Cheltuieli", "Subcategorie": "Materiale didactice", "Tip": "Cheltuială", "Sursă_Finanțare": "Consumabile", "Valoare": 180000, "Monedă": "MDL", "Perioadă": 2026, "Departament": "Academic"}, {"ID": 19, "Categorie": "Cheltuieli", "Subcategorie": "Transport și logistică", "Tip": "Cheltuială", "Sursă_Finanțare": "Operațional", "Valoare": 160000, "Monedă": "MDL", "Perioadă": 2026, "Departament": "Administrativ"}, {"ID": 15, "Categorie": "Cheltuieli", "Subcategorie": "Marketing și promovare", "Tip": "Cheltuială", "Sursă_Finanțare": "Comunicare", "Valoare": 150000, "Monedă": "MDL", "Perioadă": 2026, "Departament": "Marketing"}, {"ID": 16, "Categorie": "Cheltuieli", "Subcategorie": "Servicii juridice", "Tip": "Cheltuială", "Sursă_Finanțare": "Consultanță", "Valoare": 120000, "Monedă": "MDL", "Perioadă": 2026, "Departament": "Administrativ"}]; | |
| const formatMDL = value => new Intl.NumberFormat('ro-MD', { | |
| style: 'currency', currency: 'MDL', maximumFractionDigits: 0 | |
| }).format(value); | |
| const venituri = records.filter(r => r.Tip === 'Venit').reduce((sum, r) => sum + r.Valoare, 0); | |
| const cheltuieli = records.filter(r => r.Tip === 'Cheltuială').reduce((sum, r) => sum + r.Valoare, 0); | |
| const sold = venituri - cheltuieli; | |
| document.getElementById('kpi-venituri').textContent = formatMDL(venituri); | |
| document.getElementById('kpi-cheltuieli').textContent = formatMDL(cheltuieli); | |
| document.getElementById('kpi-sold').textContent = formatMDL(sold); | |
| document.getElementById('kpi-count').textContent = records.length; | |
| const chartDefaults = { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| plugins: { | |
| legend: { labels: { usePointStyle: true, boxWidth: 8, font: { family: 'Inter', weight: '600' } } }, | |
| tooltip: { callbacks: { label: context => `${context.label || context.dataset.label}: ${formatMDL(context.raw)}` } } | |
| }, | |
| scales: { | |
| y: { beginAtZero: true, ticks: { callback: value => new Intl.NumberFormat('ro-MD', { notation: 'compact' }).format(value) }, grid: { color: '#eef2f7' } }, | |
| x: { grid: { display: false } } | |
| } | |
| }; | |
| new Chart(document.getElementById('categoryChart'), { | |
| type: 'bar', | |
| data: { | |
| labels: byCategory.map(item => item.Categorie), | |
| datasets: [{ label: 'Valoare', data: byCategory.map(item => item.Valoare), borderRadius: 14, borderSkipped: false }] | |
| }, | |
| options: chartDefaults | |
| }); | |
| new Chart(document.getElementById('typeChart'), { | |
| type: 'doughnut', | |
| data: { | |
| labels: ['Venituri', 'Cheltuieli'], | |
| datasets: [{ data: [venituri, cheltuieli], borderWidth: 0 }] | |
| }, | |
| options: { responsive: true, maintainAspectRatio: false, cutout: '72%', plugins: chartDefaults.plugins } | |
| }); | |
| new Chart(document.getElementById('subChart'), { | |
| type: 'bar', | |
| data: { | |
| labels: bySubcategory.slice(0, 8).map(item => item.Subcategorie), | |
| datasets: [{ label: 'Valoare', data: bySubcategory.slice(0, 8).map(item => item.Valoare), borderRadius: 14, borderSkipped: false }] | |
| }, | |
| options: { ...chartDefaults, indexAxis: 'y' } | |
| }); | |
| const maxDepartmentValue = Math.max(...byDepartment.map(item => item.Valoare)); | |
| document.getElementById('departmentBars').innerHTML = byDepartment.map(item => ` | |
| <div class="bar-row"> | |
| <div class="bar-top"><span>${item.Departament}</span><span class="value-muted">${formatMDL(item.Valoare)}</span></div> | |
| <div class="bar-track"><div class="bar-fill" style="width:${Math.round((item.Valoare / maxDepartmentValue) * 100)}%"></div></div> | |
| </div> | |
| `).join(''); | |
| document.getElementById('budgetRows').innerHTML = records.map(row => ` | |
| <tr> | |
| <td>${row.ID}</td> | |
| <td>${row.Categorie}</td> | |
| <td><strong>${row.Subcategorie}</strong></td> | |
| <td><span class="pill ${row.Tip === 'Venit' ? 'in' : 'out'}">${row.Tip}</span></td> | |
| <td>${row.Sursă_Finanțare}</td> | |
| <td><strong>${formatMDL(row.Valoare)}</strong></td> | |
| <td>${row.Departament}</td> | |
| </tr> | |
| `).join(''); | |
| </script> | |
| </body> | |
| </html> |
Xet Storage Details
- Size:
- 22 kB
- Xet hash:
- 4508347e2fe0b63bb0e3b1deedd695f9ddb0771a002b5008e245e996f73639c5
·
Xet efficiently stores files, intelligently splitting them into unique chunks and accelerating uploads and downloads. More info.