https://github.com/brunoquaresma/dashboardify
Dashboardify Web App
https://github.com/brunoquaresma/dashboardify
dashboard json
Last synced: over 1 year ago
JSON representation
Dashboardify Web App
- Host: GitHub
- URL: https://github.com/brunoquaresma/dashboardify
- Owner: BrunoQuaresma
- Created: 2022-02-19T16:41:40.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2022-03-02T23:04:08.000Z (over 4 years ago)
- Last Synced: 2025-02-27T04:46:33.684Z (over 1 year ago)
- Topics: dashboard, json
- Language: TypeScript
- Homepage: https://dashboardify.app
- Size: 342 KB
- Stars: 5
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Dashboardify
Create dashboards using JSON providing a simple JSON schema to create a dashboard that can be shared with your team, company or users.
## Creating a dashboard using JSON
Dashboardify lets you create dashboards using a JSON you provide via a URL. This JSON needs to be formatted in a specific way as shown below:
```json
{
"sections": [
{
"title": "Users",
"stats": [
{
"label": "Total",
"value": 1540
},
{
"label": "Today",
"value": 20
},
{
"label": "Pro Users",
"value": 125
}
]
},
{
"title": "Revenue",
"stats": [
{
"label": "Total",
"value": 8654,
"prefix": "$"
},
{
"label": "This month",
"value": 804.5,
"prefix": "$"
},
{
"label": "MRR",
"value": 968.43,
"prefix": "$"
}
]
},
{
"title": "Requests",
"table": {
"columns": [
"User",
"Number of requests"
],
"data": [
[
"bruno@hotmail.com",
3450
],
[
"joao@hotmail.com",
2789
],
[
"neto@hotmail.com",
2379
],
[
"pedro@hotmail.com",
1045
],
[
"jr@hotmail.com",
875
],
[
"beto@hotmail.com",
294
]
]
}
}
]
}
```
As you can see, the dashboard is made up of sections that can have stats, table and a chart. To see the dashboard generated by this example, you can go to the dashboard page.
### Schema
To start the schema, you must define the sections you want to show.
| ATTRIBUTE | TYPE | REQUIRED |
|-----------|------------------------------|----------|
| sections | Array of [Section](#Section) | Yes |
### Section
Sections are how Dashboardify groups information. You can have everything in the same section or create different ones for each context, like "Users", "Recipe", "Requests", etc.
| ATTRIBUTE | TYPE | REQUIRED |
|-----------|------------------------------|----------|
| title | String | Yes |
| stats | Array of [Stat](#Stat) | No |
| table | [Table](#Table) | No |
| chart | [Chart](#Chart) | No |
### Stat
A stat is used to display numbers as metrics and monetary values.
| ATTRIBUTE | TYPE | REQUIRED |
|-----------|------------------------------|----------|
| label | String | Yes |
| value | Number | Yes |
| prefix | String | No |
### Table
A table is used to display tabular data. It's useful when you have a list of values you want to see at once.
| ATTRIBUTE | TYPE | REQUIRED |
|-----------|------------------------------------|----------|
| columns | Array of String | Yes |
| data | Array of Array of String or Number | Yes |
### Chart
Display a line chart with x and y defined values.
| ATTRIBUTE | TYPE | REQUIRED |
|-----------|------------------------------------|----------|
| label | String | Yes |
| type | "linear" | Yes |
| lines | Array of [Line](#Chart-line) | Yes |
#### Chart line
| ATTRIBUTE | TYPE | REQUIRED |
|-----------|------------------------------------|----------|
| id | String | Yes |
| color | String | Yes |
| data | Array of [Values](#Chart-values) | Yes |
#### Chart values
| ATTRIBUTE | TYPE | REQUIRED |
|-----------|------------------------------------|----------|
| x | String | Yes |
| y | Number | Yes |