Report Widgets

Widgets are the building blocks of reports. They transform your log data into visual insights like charts, tables, and metrics.

Widget Types

Logstyx supports five widget types:

• Total Value - Display a single aggregated metric
• Line Chart - Show trends over time
• Bar Chart - Compare values across groups
• Table - Display detailed log entries
• Pie Chart - Show distribution of values

Adding Widgets

From a report detail page:

1. Click the Create Widget button (top of page)
2. Configure the widget in the "Manage Widget" modal
3. Click Create Widget to add it to the report

The widget appears immediately and fetches its data.

Common Widget Settings

All widgets share these basic settings:

Widget Template

Label: "Widget Template"
Required: Yes

Select the widget type:

• Total Value
• Line Chart
• Bar Chart
• Table
• Pie Chart

Widget Title

Label: "Widget Title"
Placeholder: "e.g., Total Errors (24h)"
Required: Yes

A descriptive name for the widget.

Description

Label: "Description"
Placeholder: "Description"
Optional: Yes

Additional context about what the widget shows.

Data Source (Project)

Label: "Data Source (Project)"
Description: "Which project's logs to query"
Required: Yes

Select which project's logs this widget queries. The dropdown is searchable.

Time Range

Label: "Time Range"
Required: Yes (for most widgets)

Select the time window for data:

• Last Hour - last_1h
• Last 6 Hours - last_6h
• Last 12 Hours - last_12h
• Last 24 Hours - last_24h
• Last 3 Days - last_3d
• Last 7 Days - last_7d
• Last 30 Days - last_30d

Filters

Click + Add Filter to narrow your data.

Filter Fields:

• Field - Placeholder: "field (e.g. level or context.userId or data.amount)"
• Operator - Options: eq, ne, contains, gt, gte, lt, lte
• Value - The comparison value

Add multiple filters to refine results. Filters use AND logic.

Widget-Specific Settings

Total Value

Displays a single aggregated number.

Operation

Label: "Operation"
Required: Yes

Select the aggregation:

• Count - Number of logs
• Sum - Total of field values
• Average - Mean of field values
• Minimum - Smallest value
• Maximum - Largest value
• Latest - Most recent value
• First - Oldest value

Field

Label: "Field"
Description: "Numeric field from project's rawIndexes"
Required: Yes (for Sum, Average, Min, Max, Latest, First)

Select which numeric field to aggregate. Only shown for operations other than Count.

Example: Count errors in last 24h, or Sum of data.orderAmount for revenue.

Line Chart

Shows trends over time with a line graph.

Metric

Operation Placeholder: "Operation"
Required: Yes

Select aggregation:

• Count
• Sum
• Average
• Minimum
• Maximum

If not Count, select a Field from raw indexes.

Time Interval

Label: "Time Interval"
Required: Yes

Group data by time buckets:

• No Grouping (Raw Data) - none
• 5 Minutes - 5m
• 10 Minutes - 10m
• 15 Minutes - 15m
• 30 Minutes - 30m
• 1 Hour - 1h
• 1 Day - 1d

Example: Count of errors grouped by 15-minute intervals over last 24h.

Bar Chart

Compares values across different categories.

Metric

Operation Placeholder: "Operation"
Required: Yes

Select aggregation (Count, Sum, Average, Min, Max).

If not Count, select a Field from raw indexes.

Group By

Label: "Group By"
Description: "Field to group by (from project indexes)"
Required: Yes

Select which field to group results by:

• level (Log Level)
• Any indexed field from project settings

Limit

Label: "Limit"
Description: "Show top N results"
Default: 10
Range: 1-50

How many groups to display.

Example: Top 10 error types by count, grouped by context.errorType.

Pie Chart

Shows distribution as slices of a pie.

Metric (Optional)

Operation Placeholder: "Operation"

Select aggregation if needed (defaults to Count).

Group By

Label: "Group By"
Description: "Field to group by"
Required: Yes

Select field to slice the pie by (level or indexed fields).

Limit

Label: "Limit"
Description: "Show top N slices"
Default: 5
Range: 1-20

Number of slices to display.

Example: Distribution of log levels (Info, Warning, Error, Critical).

Table

Displays log entries in tabular format.

Columns

Label: "Columns"
Description: "Select columns to display"
Required: Yes

Multi-select which columns to show:

• createdAt
• updatedAt
• level
• count
• Plus all indexed fields from project settings

Limit

Label: "Limit"
Description: "Number of rows to display"
Default: 50
Range: 1-100

How many log entries to show.

Example: Last 50 error logs with columns: level, context.userId, data.message, createdAt.

Managing Widgets

Editing Widgets

1. Click the Edit icon (pencil) on the widget card
2. Modify settings in the "Manage Widget" modal
3. Click Create Widget to save (note: button always says "Create Widget")

Changes apply immediately.

Refreshing Widget Data

Click the Refresh icon on the widget card to reload data.

Refresh Button

The refresh button only appears on reports you own (not on public read-only views).

Deleting Widgets

1. Click the Delete icon (trash) on the widget card
2. Confirm in the dialog:
   • Title: "Delete widget"
   • Message: "Are you sure you want to delete this widget? This action cannot be undone."
3. Click Delete to remove

The widget is removed immediately and cannot be recovered.

Widget Layout

Positioning

Widgets can be dragged to any position on the 12-column grid.

Sizing

Drag widget corners to resize.

Constraints:

• Minimum width: 3 columns
• Maximum width: 12 columns (full width)
• Minimum height: 2 rows
• Maximum height: 8 rows

Row height: 100px with 12px margins

Auto-Save

Layout changes (position and size) save automatically. No manual save needed.

Widget Data

Data Fetching

Widgets fetch data automatically when:

• Widget is created
• Widget is edited
• Refresh button is clicked
• Page is loaded

Loading States

While fetching data, widgets show loading indicators.

Error States

If data fetch fails, widget displays error message:

• Generic: "Error loading data"
• Specific: API error message if available

Common Widget Configurations

A) Error Rate Over Time

Type: Line Chart

• Title: "Error Rate (24h)"
• Project: Production API
• Time Range: Last 24 Hours
• Metric: Count
• Time Interval: 15 Minutes
• Filters: level = ERROR

B) Top Error Messages

Type: Bar Chart

• Title: "Top 10 Errors"
• Project: Production API
• Time Range: Last 7 Days
• Metric: Count
• Group By: data.errorMessage
• Limit: 10
• Filters: level = ERROR

C) Critical Issues Count

Type: Total Value

• Title: "Critical Issues"
• Project: Production API
• Time Range: Last 24 Hours
• Operation: Count
• Filters: level = CRITICAL

D) Log Level Distribution

Type: Pie Chart

• Title: "Log Distribution"
• Project: Production API
• Time Range: Last 24 Hours
• Group By: level
• Limit: 5

E) Recent Errors

Type: Table

• Title: "Recent Errors"
• Project: Production API
• Time Range: Last Hour
• Columns: level, context.userId, data.message, createdAt
• Limit: 25
• Filters: level = ERROR

Best Practices

Widget Titles

• Be specific: "API Errors (24h)" vs "Errors"
• Include timeframe when relevant
• Mention grouping: "Top 10 Users by Activity"

Data Source Selection

• Use consistent projects across related widgets
• Group widgets from same project on one report
• Consider creating separate reports per project

Time Ranges

• Match time ranges across related widgets
• Use shorter ranges for real-time monitoring
• Use longer ranges for trend analysis

Filters

• Start broad, then add filters to narrow
• Combine multiple filters for precision
• Document filter logic in widget description

Layout Organization

• Put summary metrics at top
• Group related charts together
• Size widgets based on importance
• Leave space between widget groups

Troubleshooting

Widget Shows No Data

Problem: Widget displays empty or "no data"

Solutions:

• Verify logs exist in selected project
• Check time range includes relevant data
• Review filters - may be too restrictive
• Try removing filters one by one

Widget Shows Error

Problem: "Error loading data" appears

Solutions:

• Check project still exists
• Verify fields in filters exist in project
• Refresh the widget
• Check browser console for details

Field Not Available

Problem: Field doesn't appear in dropdowns

Solutions:

• Verify field is configured in project indexes
• Check if field is in rawIndexes (for numeric operations)
• Ensure project is selected first
• Field must exist in project settings

Widget Won't Save

Problem: Create/edit doesn't work

Solutions:

• Fill all required fields
• Check title is not empty
• Verify project is selected
• Ensure numeric fields have valid values