Datagram API Reference

Text

Text widget commonly used to provide contextual information, such as instructions or descriptions, helping users understand the data presented. It also function as static content elements, such as titles, headers, labels, and annotations, which help organize the data story and make it more user-friendly.

Attributes

Name
text
Type
string
Description
Default: "Sales Data"
Name
variant
Type
string
Description
Allowed Values: displaytitleheadingsubheadbodycaption
Default: "title"
Name
alignment
Type
string
Description
Allowed Values: leftcenterright
Default: "left"
Name
color
Type
string
Description
Default: "#FFFFFF"

Example Config

{
    "text": "Sales Data",
    "variant": "title",
    "alignment": "left",
    "color": "#FFFFFF"
}

KPI

A KPI widget in a story is an essential tool for displaying key performance indicators, providing users with a quick and clear overview of critical metrics. It is designed to showcase important data points, such as sales figures, customer satisfaction scores, or operational efficiency metrics, allowing users to monitor performance at a glance. By presenting data in an easily digestible format, KPI widgets enable users to make informed decisions, track goals, and identify trends or issues promptly.

Attributes

Name
title
Type
string
Description
Default: "KPI Title"
Name
value
Type
number
Description
Default: 1000000
Name
target
Type
number
Description
Name
progress
Type
string
Description
Allowed Values: nonebarcircle
Default: "none"

Example Config

{
    "title": "KPI Title",
    "value": 1000000,
    "progress": "none"
}

Month

A Month widget could be used to visualize metrics on a day-to-day basis throughout a month, offering users detailed insights into daily performance trends. This widget enables users to monitor and compare daily data points such as revenue, user activity, or production numbers, providing a clear view of daily variations and patterns. It helps identify specific days with notable changes, allowing users to understand the underlying factors driving these fluctuations.

Attributes

Name
data
Type
array
Description
Default: [{"label":"2024-05-01","value":84},{"label":"2024-05-02","value":65},{"label":"2024-05-03","value":35},{"label":"2024-05-04","value":80},{"label":"2024-05-05","value":99}]

Example Config

{
    "data": [
        {
            "label": "2024-05-01",
            "value": 84
        },
        {
            "label": "2024-05-02",
            "value": 65
        },
        {
            "label": "2024-05-03",
            "value": 35
        },
        {
            "label": "2024-05-04",
            "value": 80
        },
        {
            "label": "2024-05-05",
            "value": 99
        }
    ]
}

Heatmap

A Heatmap widget displays data points in a matrix format where colors represent different values, making it easy to spot trends, correlations, and anomalies at a glance. This widget is particularly effective for illustrating variations over time or across categories, such as website traffic, user engagement, or sales performance. By translating numerical data into a visual format, the heatmap widget aids users in comprehending intricate datasets and making data-driven decisions.

Attributes

Name
data
Type
array
Description
Default: [{"key":"Mon","label":"06:00","value":71},{"key":"Mon","label":"07:00","value":48},{"key":"Mon","label":"08:00","value":42},{"key":"Mon","label":"09:00","value":24},{"key":"Tue","label":"06:00","value":59},{"key":"Tue","label":"07:00","value":90},{"key":"Tue","label":"08:00","value":55},{"key":"Tue","label":"09:00","value":80},{"key":"Wed","label":"06:00","value":3},{"key":"Wed","label":"07:00","value":25},{"key":"Wed","label":"08:00","value":65},{"key":"Wed","label":"09:00","value":88},{"key":"Thu","label":"06:00","value":33},{"key":"Thu","label":"07:00","value":34},{"key":"Thu","label":"08:00","value":68},{"key":"Thu","label":"09:00","value":28},{"key":"Fri","label":"06:00","value":7},{"key":"Fri","label":"07:00","value":70},{"key":"Fri","label":"08:00","value":66},{"key":"Fri","label":"09:00","value":68}]

Example Config

{
    "data": [
        {
            "key": "Mon",
            "label": "06:00",
            "value": 71
        },
        {
            "key": "Mon",
            "label": "07:00",
            "value": 48
        },
        {
            "key": "Mon",
            "label": "08:00",
            "value": 42
        },
        {
            "key": "Mon",
            "label": "09:00",
            "value": 24
        },
        {
            "key": "Tue",
            "label": "06:00",
            "value": 59
        },
        {
            "key": "Tue",
            "label": "07:00",
            "value": 90
        },
        {
            "key": "Tue",
            "label": "08:00",
            "value": 55
        },
        {
            "key": "Tue",
            "label": "09:00",
            "value": 80
        },
        {
            "key": "Wed",
            "label": "06:00",
            "value": 3
        },
        {
            "key": "Wed",
            "label": "07:00",
            "value": 25
        },
        {
            "key": "Wed",
            "label": "08:00",
            "value": 65
        },
        {
            "key": "Wed",
            "label": "09:00",
            "value": 88
        },
        {
            "key": "Thu",
            "label": "06:00",
            "value": 33
        },
        {
            "key": "Thu",
            "label": "07:00",
            "value": 34
        },
        {
            "key": "Thu",
            "label": "08:00",
            "value": 68
        },
        {
            "key": "Thu",
            "label": "09:00",
            "value": 28
        },
        {
            "key": "Fri",
            "label": "06:00",
            "value": 7
        },
        {
            "key": "Fri",
            "label": "07:00",
            "value": 70
        },
        {
            "key": "Fri",
            "label": "08:00",
            "value": 66
        },
        {
            "key": "Fri",
            "label": "09:00",
            "value": 68
        }
    ]
}

Dots

Dots widget displays data as dots plotted on a grid or chart, making it easy to see patterns, clusters, and outliers. It is especially useful for analyzing metrics such as customer locations, event occurrences, or performance scores across different categories. By presenting data in a dot format, the widget allows users to quickly grasp the spread and concentration of values, facilitating deeper insights and informed decision-making.

Attributes

Name
cols
Type
number
Description
Default: 5
Name
rows
Type
number
Description
Default: 5
Name
data
Type
array
Description
Default: [{"label":"Label 1","value":100},{"label":"Label 2","value":200},{"label":"Label 3","value":300}]

Example Config

{
    "cols": 5,
    "rows": 5,
    "data": [
        {
            "label": "Label 1",
            "value": 100
        },
        {
            "label": "Label 2",
            "value": 200
        },
        {
            "label": "Label 3",
            "value": 300
        }
    ]
}

TreeMap

A Treemap widget in a story is a highly effective tool for visualizing hierarchical data through nested rectangles, allowing users to comprehend the proportional relationships and distribution of various categories. Each rectangle represents a category, and its size is proportional to its value, making it easy to identify the relative importance and contribution of each item. This widget is particularly useful for displaying data such as sales by product, budget allocations, or website content usage

Attributes

Name
data
Type
array
Description
Default: [{"label":"Label 1","value":100},{"label":"Label 2","value":200},{"label":"Label 3","value":300}]

Example Config

{
    "data": [
        {
            "label": "Label 1",
            "value": 100
        },
        {
            "label": "Label 2",
            "value": 200
        },
        {
            "label": "Label 3",
            "value": 300
        }
    ]
}

Funnel

A Funnel widget represents each stage as a segment of the funnel, with the width of each segment proportional to the number of items or the value passing through that stage. This visual format makes it easy to identify drop-off points, conversion rates, and areas needing improvement. By clearly illustrating how data flows from one stage to the next, the funnel widget helps users understand the efficiency and effectiveness of their processes.

Attributes

Name
data
Type
array
Description
Default: [{"label":"Label 1","value":100},{"label":"Label 2","value":200},{"label":"Label 3","value":300}]

Example Config

{
    "data": [
        {
            "label": "Label 1",
            "value": 100
        },
        {
            "label": "Label 2",
            "value": 200
        },
        {
            "label": "Label 3",
            "value": 300
        }
    ]
}

Bar Chart

A BarChart widget is a fundamental tool for visually representing data through horizontal bars, where the length or height of each bar corresponds to the value it represents. This widget effectively compares quantitative data across different categories or time periods, making trends, comparisons, and patterns easily identifiable. It is commonly used to display metrics such as sales figures by product, market share by region, or performance metrics over time.

Attributes

Name
data
Type
array
Description
Default: [{"label":"Label 1","value":100},{"label":"Label 2","value":200},{"label":"Label 3","value":300}]

Example Config

{
    "data": [
        {
            "label": "Label 1",
            "value": 100
        },
        {
            "label": "Label 2",
            "value": 200
        },
        {
            "label": "Label 3",
            "value": 300
        }
    ]
}

Table

A Table widget serves as a versatile tool for organizing and presenting structured data in rows and columns, allowing users to easily view and compare detailed information. This widget typically displays data in a tabular format, where each row represents a record or data point, and each column represents a specific attribute or metric. It is effective for presenting diverse datasets, such as sales data, user demographics, or inventory levels, offering a comprehensive overview that facilitates detailed analysis and decision-making.

Attributes

Name
rows
Type
table
Description
Default: [{"cols":[{"variant":"text","content":"Data 1"},{"variant":"text","content":"100"}]},{"cols":[{"variant":"text","content":"Data 2"},{"variant":"text","content":"200"}]}]

Example Config

{
    "rows": [
        {
            "cols": [
                {
                    "variant": "text",
                    "content": "Data 1"
                },
                {
                    "variant": "text",
                    "content": "100"
                }
            ]
        },
        {
            "cols": [
                {
                    "variant": "text",
                    "content": "Data 2"
                },
                {
                    "variant": "text",
                    "content": "200"
                }
            ]
        }
    ]
}

Divider

A Divider widget serves a practical purpose by adding blank space or a visible line between other widgets, thereby enhancing the layout and organization of information. This widget does not display any data or metrics itself but rather acts as a visual separator or spacer between different sections or groups of widgets

Attributes

Example Config

{}