--- title: Visualize recurring expenditures using pave.dev description: "With pave.dev, building feature rich customer experiences can be as easy as making a simple API call. This post will show you how quick and easy it is to build a recurring expenditures dashboard using our Cashflow API. Github Repo: https://github.com/Pave-Financial/pave-examples Preview Assumptions We’ll be making the following assumptions in this post: Technologies Used Here’s what […]" --- [Skip to content](https://hs.pavefi.com/pave-blog/blog/visualize-recurring-expenditures-using-pave-dev#main-content) Pave Financial, Inc. Open main navigation Close main navigation - [Contact us](https://hs.pavefi.com/pave-blog/blog/visualize-recurring-expenditures-using-pave-dev#contact) [Contact us](https://hs.pavefi.com/pave-blog/blog/visualize-recurring-expenditures-using-pave-dev#contact) Aug 2, 2021 8:54:00 AM # Visualize recurring expenditures using pave.dev [Lennon Chimbumu](https://hs.pavefi.com/pave-blog/author/lennon-chimbumu) Share: [facebook-f icon](http://www.facebook.com/share.php?u=https://hs.pavefi.com/pave-blog/blog/visualize-recurring-expenditures-using-pave-dev) [linkedin-in icon](http://www.linkedin.com/shareArticle?mini=true&url=https://hs.pavefi.com/pave-blog/blog/visualize-recurring-expenditures-using-pave-dev) [Twitter icon](https://twitter.com/intent/tweet?url=https://hs.pavefi.com/pave-blog/blog/visualize-recurring-expenditures-using-pave-dev) [pinterest-p icon](http://pinterest.com/pin/create/link/?url=https://hs.pavefi.com/pave-blog/blog/visualize-recurring-expenditures-using-pave-dev) [envelope icon](mailto:?body=https://hs.pavefi.com/pave-blog/blog/visualize-recurring-expenditures-using-pave-dev) With pave.dev, building feature rich customer experiences can be as easy as making a simple API call. This post will show you how quick and easy it is to build a recurring expenditures dashboard using our Cashflow API. Github Repo: [https://github.com/Pave-Financial/pave-examples](https://github.com/Pave-Financial/pave-examples/tree/main/react-sample) ### Preview ![](https://hs.pavefi.com/hs-fs/hubfs/Imported_Blog_Media/Screen-Shot-2022-07-29-at-12_24_28-PM-Oct-17-2024-09-24-54-7383-PM.png?width=575&height=1024&name=Screen-Shot-2022-07-29-at-12_24_28-PM-Oct-17-2024-09-24-54-7383-PM.png) ### Assumptions We’ll be making the following assumptions in this post: - You already have access to the pave.dev cashflow API. - You have already uploaded some sample data to pave.dev. - If either of these assumptions does not hold for you, please contact us at [api@pave.dev](mailto:api@pave.dev) ### Technologies Used - [Redux](https://redux.js.org/) – Redux makes it easy to have a predictable application state. - [React](https://reactjs.org/) – Any modern frontend JavaScript will do. We’ll be using React bootstrapped with the [create-react-app](https://reactjs.org/docs/create-a-new-react-app.html#create-react-app) tool Here’s what we’ll cover in this post: 1. Basic Setup 2. Implementing the HTTP API 3. Creating visualizations with the recurring expenditures data. ### **Step 1: Setting up** You’ll need to make sure that you have the Node.js version 14 or greater installed on your development environment. Our example source code ships with a `.devcontainer` folder that takes advantage of the VS Code Remote Containers feature. This folder contains a portable development environment that contains all the prerequisites for running the development environment. You can find documentation on how to set this up on VS Code’s official documentation. ### Step 2: Implement our HTTP API We are including the basic implementation of the API here but we’ll be skipping over the minutiae of the Redux implementation. If you’re interested in the implementation of the Redux stores and reducers, you can refer to our Github repository. You may find the following files to be useful: - [Creating the API Reducer](https://github.com/Pave-Financial/pave-examples/blob/main/react-sample/src/redux/reducers/apiReducer.js) - [Combining Reducers](https://github.com/Pave-Financial/pave-examples/blob/main/react-sample/src/redux/reducers/index.js) - [Setting up the redux store](https://github.com/Pave-Financial/pave-examples/tree/main/react-sample/src/redux/store) The following code uses the fetch API and Redux actions to invoke the recurring expenditures API. ``` import fetch from 'isomorphic-fetch' const { REACT_APP_API_KEY, REACT_APP_API_ENDPOINT } = process.env; function requestExpendituresActions() { return { type: FETCH_RECURRING_EXPENSES } } function receiveExpendituresActions(json) { return { type: RECEIVE_RECURRING_EXPENSES, data: json, receivedAt: new Date() } } export function fetchRecurringExpenditures(userId) { const url = `${REACT_APP_API_ENDPOINT}/users/${userId}/recurring_expenditures`; return function(dispatch) { dispatch(requestExpendituresActions()) const options = { method: 'GET', headers: {'x-api-key': YOUR_API_KEY} } fetch(url, options) .then((res) => res.json()) .then((json) => { dispatch(receiveExpendituresActions(json)) }) .catch((err) => { console.error(err); // eslint-disable-line }); } } ``` If everything goes well, your API response should resemble the following output. ``` { "user_id": "user_123", "from": "2017-07-31", "to": "2019-08-01", "recurring_expenditures": [ { "type": "Utility", "normalized_merchant_name": "Comcast", "merchant_uuid": "MERCHANT_ID",, "logo": "https://assets.pave.dev/merchants/logos/0002e1ce-e901-4715-bd9a-xxxxxxxxxxxx.png", "last_amount": 184.78, "last_description": "Comcast", "last_date": "2019-07-30", "avg_amount": 181.23, "iso_currency_code": "USD", "count": 24, "avg_period_days": 30.7, "normalized_frequency": "monthly", "previous_amount": 184.78, "previous_date": "2019-07-01", "delta_amount": 0.0, "delta_percent": 0.0 }, ... ] } ``` ### **Step 3: Create a Pie Chart** At this point, you should be able to consume the data in the display components. You can find the full implementations for all the charts and tables in our [github repository](https://github.com/Pave-Financial/pave-examples/tree/main/react-sample). The code that displays the Pie Chart is located in `src/pages/charts/ApexCharts`. Our example uses ApexCharts, but you can use any chart library of your choosing. Now that we have everything set up, let’s create our pie chart to visualize recurring expenditures by merchants. ``` // src/pages/charts/ApexCharts/Column.js /** * This Component renders spending by category */ import React from "react"; import Chart from "react-apexcharts"; import { connect } from "react-redux"; import {map, groupBy} from 'lodash'; import numeral from 'numeral' const ColumnChart = ({ theme, recurringExpenditures }) => { // Group the data by transaction type const groupedData = groupBy(recurringExpenditures, (elem) => elem.type); const sourceData = groupedData ? groupedData : [] // Sum up all the transactions for a specific type const data = map(sourceData, (expenditures, type) => { return { name: type, data: [expenditures.reduce((accumulator, current) => accumulator + (current.last_amount || 0), 0)] } }) const options = { plotOptions: { bar: { horizontal: false, columnWidth: "25%", borderRadius: 8, } }, chart: { type: 'bar', stacked: true, toolbar: { show: true }, }, dataLabels: { enabled: false }, xaxis: { categories: [ "Spending By Category", ] }, yaxis: { title: { text: "$" }, labels: { formatter: function (value) { return numeral(value).format('$0,0.00a'); } } } }; // Render the chart return ( <div className="chart"> <Chart options={options} series={data} type="bar" height="350" /> </div> ); }; export default connect(store => ({ theme: store.theme.currentTheme }))(ColumnChart); ``` Your chart should look something like this: ![images/pie-chart.png](https://static.hsstatic.net/BlogImporterAssetsUI/ex/missing-image.png) That’s it! consuming the pave.dev Cashflow API is that simple. We’re excited to see what you can build with our API. If this looks interesting for you to try yourself, you can [request access to our Sandbox here.](https://www.pave.dev/contact/) [Use Cases](https://hs.pavefi.com/pave-blog/tag/use-cases) ## Related posts [bill tracking](https://hs.pavefi.com/pave-blog/tag/bill-tracking), [Use Cases](https://hs.pavefi.com/pave-blog/tag/use-cases) ## [How to build bill & subscription tracking in hours](https://hs.pavefi.com/pave-blog/blog/how-to-build-bill-subscription-tracking-in-hours) [Lennon Chimbumu](https://hs.pavefi.com/pave-blog/author/lennon-chimbumu) Aug 5, 2021 8:28:00 AM With our Cashflow API, it is simple to retrieve and display a user’s bills and subscriptions. [Read more](https://hs.pavefi.com/pave-blog/blog/how-to-build-bill-subscription-tracking-in-hours) [API](https://hs.pavefi.com/pave-blog/tag/api), [Product Features](https://hs.pavefi.com/pave-blog/tag/product-features), [collections](https://hs.pavefi.com/pave-blog/tag/collections) ## [Announcing the Underwriting and Collections APIs](https://hs.pavefi.com/pave-blog/blog/announcing-the-underwriting-and-collections-apis) [Amelia Chikota](https://hs.pavefi.com/pave-blog/author/amelia-chikota) Apr 19, 2024 3:39:14 AM We’ve released new API endpoints for ingesting Underwriting & Collections data. About The new... [Read more](https://hs.pavefi.com/pave-blog/blog/announcing-the-underwriting-and-collections-apis) [![](https://hs.pavefi.com/hs-fs/hubfs/Imported_Blog_Media/Group-798-Oct-17-2024-09-26-02-4219-PM.png?height=200&name=Group-798-Oct-17-2024-09-26-02-4219-PM.png)](https://hs.pavefi.com/pave-blog/blog/pave-dev-and-effectiv-partner-to-enhance-risk-decisioning-with-real-time-cashflow-analytics) [Partnerships](https://hs.pavefi.com/pave-blog/tag/partnerships), [fintech](https://hs.pavefi.com/pave-blog/tag/fintech), [cashflow insights](https://hs.pavefi.com/pave-blog/tag/cashflow-insights), [Announcements](https://hs.pavefi.com/pave-blog/tag/announcements) ## [Pave.dev and Effectiv Partner to Enhance Risk Decisioning with Real-Time Cashflow Analytics](https://hs.pavefi.com/pave-blog/blog/pave-dev-and-effectiv-partner-to-enhance-risk-decisioning-with-real-time-cashflow-analytics) [Amelia Chikota](https://hs.pavefi.com/pave-blog/author/amelia-chikota) Jul 8, 2024 12:06:49 AM We’re thrilled to announce our partnership with Effectiv, a leading credit and fraud decisioning... [Read more](https://hs.pavefi.com/pave-blog/blog/pave-dev-and-effectiv-partner-to-enhance-risk-decisioning-with-real-time-cashflow-analytics) facebook-f icon linkedin-in icon Twitter icon instagram icon - Menu Item 1 - Sub-menu Item 1 - Another Item - Sub-menu Item 2 - Menu Item 2 - Yet Another Item - Menu Item 3 - Menu Item 4 --- # Pave Financial, Inc. 123 Main Street, City, State 11111 Copyright © 2026, Pave Financial, Inc ```json { "@context" : "https://schema.org", "@type" : "BlogPosting", "author" : { "@type" : "Person", "name" : "Lennon Chimbumu", "url" : "https://hs.pavefi.com/pave-blog/author/lennon-chimbumu" }, "dateModified" : "2024-10-17T21:31:56.948Z", "datePublished" : "2021-08-02T15:54:00.000Z", "headline" : "Visualize recurring expenditures using pave.dev", "mainEntityOfPage" : { "@id" : "https://hs.pavefi.com/pave-blog/blog/visualize-recurring-expenditures-using-pave-dev", "@type" : "WebPage" }, "publisher" : { "@type" : "Organization", "logo" : { "@type" : "ImageObject", "url" : "https://hs.pavefi.com/hubfs/PaveLogo-t.png" }, "name" : "Pave Financial, Inc" } } ```