{"id":415,"date":"2019-06-16T16:16:57","date_gmt":"2019-06-16T16:16:57","guid":{"rendered":"https:\/\/www.nleby.com\/longform\/?p=415"},"modified":"2021-08-14T17:34:20","modified_gmt":"2021-08-14T17:34:20","slug":"financial-overview-tool","status":"publish","type":"post","link":"https:\/\/www.nleby.com\/longform\/2019\/06\/16\/financial-overview-tool\/","title":{"rendered":"Web application to easily view financial information with Chart.js"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Key Technologies: HTML, CSS, JavaScript, CSV, <a href=\"https:\/\/www.chartjs.org\">Chart.js<\/a><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">I really wanted a quick and secure way to get a breakdown of my spending without having to give up my banking details to a third-party. For the longest time I was using an excel spreadsheets and doing a lot of work manually to categorize transactions and compute totals. One day I decided to just build my own tool! <\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Chase&#8217;s developer API is invite only, so used their csv data dump option<\/li><li>Lots of pre-work happens before rendering the charts, data from csv is converted to objects, grouped by months, computed for totals\/averages\/etc., and then categorized by user inputted data<\/li><li>The transaction list allows me to flag what category a transaction should fall under &#8211; under similar transaction will automatically be assigned that category unless explicitly overwritten.<\/li><li>Using <a href=\"https:\/\/www.chartjs.org\">chart.js<\/a> to render the charts &#8211; this framework is incredible and really easy to use<\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Below is a video of what I settled on for a v1. It does everything I need it to quickly, and makes understanding where I&#8217;m spending my money clear. Some future enhancements will include:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Monitor Chase&#8217;s API to see if it opens up for normal developers<\/li><li>Flag transactions that fall outside a specific variance (unexpected transactions)<\/li><li>Show top 5-10 places I&#8217;m spending money, e.g. how much money am I spending at Chipotle!<\/li><li>Add pagination for transactions list<\/li><li>Show YOY information and trends<\/li><li>Add ability to layer in a second account <\/li><li>Refactor code to reduce redundancies in calculations<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-video aligncenter\"><video height=\"720\" style=\"aspect-ratio: 792 \/ 720;\" width=\"792\" controls src=\"https:\/\/www.nleby.com\/longform\/wp-content\/uploads\/2019\/06\/finance_720.mov\"><\/video><figcaption>Example with fake data.<\/figcaption><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Key Technologies: HTML, CSS, JavaScript, CSV, Chart.js I really wanted a quick and secure way to get a breakdown of my spending without having to give up my banking details&hellip;<\/p>\n<p> <a class=\"more-link\" href=\"https:\/\/www.nleby.com\/longform\/2019\/06\/16\/financial-overview-tool\/\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":944,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[13],"tags":[37,36,38,27,33],"class_list":["post-415","post","type-post","status-publish","format-standard","has-post-thumbnail","category-personal","tag-chart-js","tag-csv","tag-finance","tag-javascript","tag-website"],"_links":{"self":[{"href":"https:\/\/www.nleby.com\/longform\/wp-json\/wp\/v2\/posts\/415","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.nleby.com\/longform\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.nleby.com\/longform\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.nleby.com\/longform\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.nleby.com\/longform\/wp-json\/wp\/v2\/comments?post=415"}],"version-history":[{"count":3,"href":"https:\/\/www.nleby.com\/longform\/wp-json\/wp\/v2\/posts\/415\/revisions"}],"predecessor-version":[{"id":454,"href":"https:\/\/www.nleby.com\/longform\/wp-json\/wp\/v2\/posts\/415\/revisions\/454"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.nleby.com\/longform\/wp-json\/wp\/v2\/media\/944"}],"wp:attachment":[{"href":"https:\/\/www.nleby.com\/longform\/wp-json\/wp\/v2\/media?parent=415"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.nleby.com\/longform\/wp-json\/wp\/v2\/categories?post=415"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.nleby.com\/longform\/wp-json\/wp\/v2\/tags?post=415"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}