Using and Configuring Smart Widgets

The Smart Widget generator automatically determines the appropriate type of Smart Widget based on the user input in the Create Chart or Widget field:

Example 1: Submissions by Users Chart

For example, if we have two entities, Submissions and Users, and in the Create Chart or Widget field, the user inputs “create a diagram of all submissions by users” the Smart Widget component will generate the corresponding chart:

Example 2: Total Submissions Count

Additionally, if the user requests the generator to show the total number of submissions, a Smart Widget displaying the total count will be created:

Specifying Chart Type

In the Create Chart or Widget field, the user can specify the type of chart they want to display. For instance, if the user inputs “show all submissions by status as a pie chart” the result will be:

Component Details

The component responsible for generating and displaying the Smart Widgets is located in the frontend/src/components/SmartWidget directory.

Chart Types

The possible chart types are enumerated in the frontend/src/components/SmartWidget/models/widget.model.ts file:

export enum WidgetChartType {
  scalar = 'scalar',
  bar = 'bar',
  line = 'line',
  pie = 'pie',
  area = 'area',
  funnel = 'funnel',
}

Libraries Used

For rendering charts, we use third-party libraries chartjs and apexcharts.