Dashboards & Charts

One of the main features of Adminmate apart from the Data part, is the powerful dashboarding solution we provide.

You can create as many dashboards as you want to fit your needs: Sales, Marketing, Engineering etc... and as many charts as you need into each of them!

There's two way to create charts:

• The manual way using our Charts creation tool
• The coding way using our API via your Data API

The manual way is a very simple and fast way to create almost whatever you need while the coding way there is no limit at all.

Adminmate gives you the ability to create 5 different types of charts:

• Single value
• Pie chart / Repartition chart
• Line chart
• Bar chart
• Objective
• Ranking

To create a chart you just have to click on the bottom right bottom "Add a Chart" and a creation modal will open. Then you will have to choose a title, an optional subtitle and the type of chart you want to create.

The manual creation is very simple & straightforward so we will focus on the custom chart creation in the section bellow.

Create a custom chart

A custom chart is basically a custom endpoint you build yourself and connect to a chart on the back-office UI: this allows you to create a way more customizable chart compared to the manual way.

Create a custom chart is a simple as adding a well-configured chart-object into the charts property of adminmate.js configuration file.

charts: [
  {
    code: 'my-custom-chart',
    label: 'My Chart Title',
    handler: async (data, success, error) => {
      success({}); // Chart data have to be here
    }
  }
]

Let's see how this code is structured.

---

code property

This is a unique code associated with your chart.

---

label property

This is the title that will be shown in the chart.

---

handler function

This is the function where your custom data will be fetched and structured.

The function take 3 parameters: data, success and error.

Most of the time the data parameter is empty, except if your chart is configured to have the timeframe selector. In that case, you will receive the timeframe value in the data parameter.

Custom chart data structure

The data object should be given to the success function and respect different format depending on the chart type.

Single value chart / Objective chart

{
  data: 123
}

Ranking chart

{
  data: [
    { key: 'User 1', value: '100' },
    { key: 'User 2', value: '88' }
    { key: 'User 3', value: '72' }
  ]
}

Repartition / Pie Chart

{
  data: [
    {
      key: "red",
      value: 1349
    },
    {
      key: "orange",
      value: 18
    },
    {
      key: "blue",
      value: 2
    }
  ]
}

Bar chart + Line chart

{
  config: {
    xaxis: [
      { dataKey: 'month' }
    ],
    yaxis: [
      { dataKey: 'value_1', name: 'Value 1 label' },
      { dataKey: 'value_2', name: 'Value 2 label', visible: false }
    ]
  },
  data: [
    ...
    { month: 'Jan', value_1: '2', value_2: '8' },
    { month: 'Jan', value_1: '4', value_2: '7' },
    { month: 'Jan', value_1: '3', value_2: '11' },
    ...
  ]
}