Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/joaomonteir0/printheritage/llms.txt

Use this file to discover all available pages before exploring further.

The Monitoring Dashboard is the primary data visualisation surface in PrintHeritage. It renders interactive time-series charts powered by ApexCharts for every dataset attached to a project. The dashboard supports multiple chart types, date-range filtering, dataset-by-dataset carousel navigation, fullscreen mode, and variable chart height — all without leaving the project detail page. When a project has more than one dataset, a pagination control appears in the toolbar:
  • Previous (‹) and Next (›) arrow buttons cycle through datasets one at a time.
  • A counter badge shows the current position (e.g. 2 / 5) so you always know how many datasets are loaded.
  • Navigating to a different dataset automatically clears any active date filters.
Only one dataset is rendered at a time. The active dataset’s label is displayed in the header alongside a Sensor Data badge.
The carousel counter and navigation arrows are only rendered when the project has two or more datasets. For single-dataset projects the controls are hidden.

​
Chart Types

Each dataset carries a metadata.defaultChartType value set during ingestion. When a dataset is loaded, the monitoring dashboard maps the Portuguese chart type name to its ApexCharts type identifier:
Metadata valueApexCharts type
Linhaline
Áreaarea
Barrasbar
Scatterscatter
If the dataset’s metadata also specifies supportedChartTypes, a toolbar button group renders an icon button for each supported type. Clicking a button switches the chart type in real time. If no supportedChartTypes is set, the toolbar defaults to showing Area and Line buttons.
The default chart type can be changed during the data ingestion preview step. Once saved, it persists as part of the dataset metadata and is restored every time you navigate to that dataset in the carousel.

​
Date Range Filtering

A date range control sits below the main toolbar:
  • Start date input — filters out all readings with a date before the selected value.
  • End date input — filters out all readings with a date after the selected value.
  • Both inputs use YYYY-MM-DD comparison against the first 10 characters of each reading’s date field.
  • The Clear Filters button (with a FilterX icon) appears only when at least one filter is active and resets both inputs to empty.
Filtering is applied client-side using useMemo, so it is instantaneous and requires no additional API calls. A live reading counter next to the filter bar shows the number of data points currently visible after filtering, labelled Leituras.

​
Multi-Series Charts

Datasets that contain multiple sensor columns — defined by metadata.selectedColumns — render each column as a separate series on the same chart. If selectedColumns is not present in the metadata, the dashboard falls back to all keys in the first data row except date. Each series is automatically coloured using a four-colour palette (#3b82f6, #10b981, #f59e0b, #ef4444) and labelled by its column name in the chart legend. The x-axis uses Unix timestamps derived from new Date(d.date).getTime() and is formatted as dd MMM yyyy HH:mm in tooltips. The y-axis label shows the sensor type in uppercase along with the unit in parentheses (e.g. TEMPERATURA (°C)). The unit defaults to ºC if metadata.unit is absent.

​
Chart Configuration Options

Fullscreen Mode

The fullscreen toggle button (Maximize2 / Minimize2 icon) switches the entire dashboard component from its inline card layout to a fixed overlay covering the full viewport. The chart height in fullscreen mode is locked to 70vh.

Chart Height

The height adjustment button (ArrowsUpFromLine icon) cycles the chart height through three values: 500 px → 800 px → 350 px → 500 px, letting you trade vertical space for more data visibility.

Toolbar

The underlying ApexCharts toolbar exposes download, selection, zoom in/out, pan, and reset controls. These allow precise exploration of any time window within the visible data.

Smooth Stroke

All line and area series use a smooth bezier curve (stroke.curve: 'smooth', width 3). Area fills use a gradient that fades from 45 % opacity at the series line to 5 % at the bottom.

​
Dark Mode Support

The chart theme (ApexOptions.theme.mode) is set dynamically by inspecting document.documentElement.classList.contains('dark') at render time. Axis label colours, grid line opacity, and tooltip theme all adapt accordingly. Background is always transparent, inheriting the card background from the parent component.

​
Dataset Deletion

When canDelete is true — granted to users with the SUPER_ADMIN or GENERAL_ADMIN global role, or PROJECT_ADMIN project role — a red trash-bin button appears in the toolbar. Clicking it triggers a confirmation modal. If confirmed, the project detail page calls: 
DELETE /projects/{project_id}/datasets/{dataset_id}
After deletion the project data is re-fetched and the carousel resets to the first remaining dataset.
Dataset deletion is permanent and cannot be undone. Only users with the appropriate role can see the delete button — Visualizers have no access to this control.

​
Empty State

If a project has no datasets, the monitoring dashboard renders a simple placeholder card with the message Sem dados de monitorização ativos in place of the chart. This is the default state for newly created projects before any sensor data has been ingested.

Build docs developers (and LLMs) love

Get started for freeTalk to us