Skip to main content

Managing Widgets

This guide explains how to add widgets to the dashboard canvas and arrange them to create your desired layout.

Adding Widgets​

[Screenshot] Widget library panel

Widget Library

  1. Open the Widget Library panel on the left.
  2. Select the desired widget type.
  3. Drag the widget onto the canvas or click to add it.

Widget Types​

D.Hub dashboards provide 8 widget types to meet various visualization needs.

Statistic Card​

A widget that prominently displays key metrics (KPIs).

  • Use cases: Total revenue, active user count, conversion rate, and other single value highlights
  • Configuration options:
    • Value field and aggregation method (SUM, AVG, COUNT, etc.)
    • Prefix/suffix (e.g., $, %, items)
    • Display change rate compared to previous period

Bar Chart​

A chart suitable for comparing data across categories.

  • Use cases: Sales by category, monthly order count comparison
  • Configuration options:
    • Vertical/horizontal orientation toggle
    • Stacked or Grouped mode
    • Color palette selection

Line Chart​

A chart for visualizing trends in time-series data.

  • Use cases: Daily visitor count, hourly traffic trends
  • Configuration options:
    • Multi-series support
    • Area fill option
    • Smooth curves

Pie Chart​

A chart for visualizing proportions relative to the whole.

  • Use cases: Market share, category composition ratios
  • Configuration options:
    • Donut mode
    • Label display (value, percentage)
    • Legend position adjustment

Heatmap​

Expresses value intensity through colors at the intersection of two dimensions.

  • Use cases: Traffic by hour and day, sales by region and category
  • Configuration options:
    • X-axis/Y-axis field specification
    • Color scale selection
    • Cell value display toggle

Gauge​

Visualizes achievement rate of current value against a target.

  • Use cases: Goal achievement rate, server utilization, progress status
  • Configuration options:
    • Min/max value settings
    • Threshold-based color zone definition
    • Value formatting

Data Table​

Displays detailed data in tabular format.

  • Use cases: Detailed transaction history, user list, log data
  • Configuration options:
    • Column selection
    • Sorting and pagination
    • Column width adjustment

Map​

Visualizes location-based data on a map.

  • Use cases: Regional sales, store locations, travel routes
  • Configuration options:
    • Latitude/longitude field mapping
    • Marker size and color
    • Clustering options

Widget Positioning and Resizing​

  • Move: Drag the widget header to move it to the desired position.
  • Resize: Drag the handle at the bottom-right corner of the widget to adjust its size.
  • Auto Layout Adjustment: When you move a widget, other widgets are automatically rearranged to minimize empty space.

Widget Settings​

[Screenshot] Widget settings panel

Widget Settings

When you select a widget, the Settings Panel on the right becomes active.

1. General Settings​

  • Title: Enter the title to be displayed at the top of the widget.
  • Description: Enter additional description for the widget.

2. Data Settings​

  • Data Mode: Select Simple or Query mode
  • Data Source: Select the dataset to connect
  • Field Mapping: Specify X-axis, Y-axis, and value fields

For more details, refer to the Data Configuration documentation.

3. Style​

  • Depending on the chart type, you can adjust visual elements such as colors, legend visibility, and axis settings.

Widget Actions​

  • Duplicate: Select duplicate from the widget header menu to quickly create a widget with identical settings.
  • Delete: Select the widget and press the Delete key, or select delete from the menu.
  • Lock: Lock the widget to prevent accidental movement.