Dashboards in Spica

In this article, we’ll look at how to use Dashboards in Spica.

Spica is a free and open-source engine that offers practically everything a back-end developer requires. It may be used as a back-end service, a database layer, or as a headless CMS for content management.

The dashboard property in Spica allows the user to create custom dashboards and graphs. You can get your data from a remote URL, but today we will be getting our data directly from Spica Buckets using an HTTP-triggered function.

To showcase how the dashboard can be used, we will create graphs of a class of students’ grade.

First thing we have to do is to create a bucket.

Creating a Function

We create a function to get the data from this bucket and to do some calculations.

Function creation

I chose Typescript for my project’s language, the reason being that in Javascript you don’t see type definitions and checks.

We add the “@spica-devkit/bucket” module to our dependencies to be able to use it in the function. The function installs this library using NPM automatically.

import * as Bucket from "@spica-devkit/bucket"

export default async function (req, res) {
    Bucket.initialize({ publicUrl: 'https://master.spicaengine.com/api', apikey: '3o15f18l9ea93w0' })

    let data: grade[] = await Bucket.data.getAll('6389b4e0ea080c002bb4af49').catch(console.error) as grade[];

    let studentArr: Array<string> = [];
    data?.map(item => studentArr.push(item.student_id))

    let markArr: Array<number> = []
    data?.map(item => markArr.push(item.mark))

    const mean = markArr.reduce((a, b) => a + b, 0) / markArr.length
    let meanArr = Array(0)
    for (var i = 0; i < markArr.length; i++) {
        meanArr.push(mean)
    }

    return {
        "title": "Student Grades Line Chart",
        "options": { "legend": { "display": true }, "responsive": true },
        "label": studentArr,
        "datasets": [
            { "data": markArr, "label": "Grade" },
            { "data": meanArr, "label": "Mean" }
        ],
        "legend": true,
        "width": 70,
    }
}

export interface grade {
    _id: string;
    student_id: string;
    mark: number;
}

Notice that we have to return a specific kind of JSON structure according to the graph we want to use. You can find more examples here.

Creating a Dashboard

Now we can create a dashboard with the URL being the execution path we created earlier.

Dashboard creation

Changing the type of graph

The output will look like this:

Line chart visualization

If we want to change the graph type, we usually need to send a different type of JSON structure. But bar chart and line chart share the same structure. So if we just change the type of graph when creating the dashboard component, we will get this instead:

Bar chart visualization

Conclusion

The function and dashboard can be much more complex. There are many chart types in the dashboard component to accommodate your needs. Be sure to check out the documentation to view these types.

Thanks for reading!