Charts and widgets
The charts, the key figures you can drag into a new order, the PNG and CSV exports, the world map and the card stack.
The charts
| Chart | Page | What a user can do |
|---|---|---|
| Your Statistics, an area chart | Overview | Hover for the values |
| Portfolio Performance, a bar chart | Overview | Hover for the values |
| Revenue vs Expenses | Analytics | Switch between Daily, Weekly, Monthly and Yearly; hover for the values; download it as a PNG |
| Spending by Category, a donut chart | Analytics | Hover a category for its share; download it as a PNG |
| Weekly Activity | Analytics | A heatmap of the week with activity and spending trends; download it as a PNG |
| Recent Transactions | Analytics | Download the table as a PNG |
The charts follow the brand colour and the light or dark mode, and their labels are translated. A PNG is drawn at twice the screen size, on the page's background colour.
Key figures you can drag
The row of four key figures on the analytics, transactions and cards pages can be put in any order: drag a card onto another's place. With a keyboard, focus a card, press Space to pick it up, move it with the arrow keys and press Space again to drop it. Each card shows its value and, where it has one, the change in green or red.
The browser remembers the order for each page separately, so it stays after a reload. Clearing the site's data brings back the original order.
Export the transactions
Export on the transactions page downloads the transactions inside the chosen date range and Filter dialog settings as a CSV file named transactions_ followed by the day's date. The columns are Date, Description, Type, Category, Amount and Status, with headings and texts in the page's language and dates written as year-month-day. Incoming amounts start with +, outgoing ones with -. The file opens in Excel with Arabic text intact. A dialog confirms the download.
The world map and the card stack
- Global Transfers on the overview is a world map with a marker for each transfer and buttons to zoom in and out. It loads the country shapes from the internet.
- The card stack on the overview shows the payment cards on top of each other. Click the front card to bring the next one forward, and Add card puts a new sample card on the stack.
The chart components
Included with your purchase. Sign in to read, or open it in your download.
The reusable chart components and how to add a PNG download to any widget.
How the draggable cards work
Included with your purchase. Sign in to read, or open it in your download.
The DraggableStatsGrid component, its props, its data shape and where the order is saved.
How the CSV export works
Included with your purchase. Sign in to read, or open it in your download.
The export component, its props, and how to change its columns or file name.
The world map's country shapes
Included with your purchase. Sign in to read, or open it in your download.
Where the map loads its shapes from, how to serve them yourself, and the map's props.