Balance és una aplicació web per visualitzar dades financeres personals a partir d’un fitxer CSV.
La idea del projecte era convertir els moviments d’un extracte bancari en una interfície que permeti entendre millor l’evolució dels ingressos i les despeses, tant de manera global com per mesos i categories.
Del CSV a les dades estructurades
El procés comença important un CSV amb quatre camps: data, categoria, import i descripció.
A partir d’aquí, Balance ordena els moviments per any i mes. Els imports positius es tracten com a ingressos i els negatius com a despeses. Per cada període calcula els totals, el balanç i les quantitats acumulades de cada categoria.
Les categories no necessiten cap identificador, però sí que han de coincidir amb els noms definits a l’aplicació: House, Food, Sports, Health, Eating out, Entertainment, Bills, Car, Transport, Taxi, Cosmetic, Clothes, Gifts i Salary. La comparació és exacta, de manera que també cal respectar les majúscules i els espais.
Les dades es processen completament al navegador i es conserven a sessionStorage. Això permet mantenir-les mentre la sessió continua oberta sense haver de construir un backend ni guardar els moviments en una base de dades externa.
Una interfície dividida en components
La interfície està construïda amb Vue 2. Cada part de la visualització té el seu propi component: la càrrega del CSV, la selecció de dates, la posició global, el resum per categories, els gràfics mensuals i el detall dels moviments.
El component principal coordina aquestes peces i distribueix les dades ja estructurades. D’aquesta manera, cada bloc s’encarrega d’una responsabilitat concreta i es pot actualitzar quan l’usuari canvia l’any o el mes seleccionat.
Element UI proporciona els selectors, les targetes i l’estructura general de la pàgina. Per a la part gràfica vaig utilitzar Highcharts, que permet representar les dades amb gràfics de barres, línies i sectors.
El resultat mostra els totals anuals d’ingressos, despeses i balanç, calcula les mitjanes mensuals i permet veure quin pes té cada categoria. També es pot seleccionar un mes concret per consultar-ne l’evolució i els moviments individuals.
És una arquitectura senzilla: el CSV entra, Vue organitza l’estat i els components, i Highcharts converteix els càlculs en una representació visual. Tot funciona com una aplicació web de client, sense serveis addicionals al servidor.