Components

The building blocks you compose a Public Page from, and the data each one carries.

Every Public Page is composed from component instances. Each component renders a specific piece of content, and its config carries its own data source. There is no separate data-source endpoint; a component describes where its data comes from in its own config.

Layout components

Layout components organize a page and present static content. They carry no data source.

• heading - renders a heading to title sections of the page.
• paragraph - renders a block of text for prose and explanation.
• list - renders a list of items.
• divider - renders a horizontal rule to separate sections.
• number - renders a static number.
• text - renders a short text value, useful next to a metric or inside a caption.

Chart components

Chart components render a live visualization of analytics data. Each chart resolves against your events on load, filtering by eventType and any filters you apply.

• line-chart - a time series of counts or values over time.
• bar-chart - aggregated values per category or time bucket.
• pie-chart - the proportional share of values in a field.
• area-chart - a filled time series, useful for volumes.

A line chart config points at an event type and optionally narrows it with filters:

{
  "type": "line-chart",
  "config": {
    "title": "Daily orders",
    "eventType": "checkout.completed",
    "filters": [
      { "field": "data.plan", "operator": "equals", "value": "pro" }
    ],
    "timeRange": "7d"
  }
}

A pie chart instead measures the share of a field's values:

{
  "type": "pie-chart",
  "config": {
    "title": "Signup sources",
    "eventType": "user.signup",
    "field": "source",
    "timeRange": "30d"
  }
}

Metric components

A metric renders a single value, typically pulled from a named metric you maintain in your project. The config names the metric with metricName:

{
  "type": "metric",
  "config": {
    "title": "MRR",
    "metricName": "monthly-recurring-revenue",
    "format": "currency"
  }
}

Uptime component

An uptime component renders the status of a single monitor. It references the monitor with monitorId, so you share the current up or down state of a specific service:

{
  "type": "uptime",
  "config": {
    "title": "API status",
    "monitorId": "mon_8f3c1a"
  }
}

Events table

An events component renders a table of the most recent matching events. Its config sets the event type and any filters, and the table lists the latest events that match:

{
  "type": "events",
  "config": {
    "title": "Recent payments",
    "eventType": "payment.completed",
    "filters": [
      { "field": "data.amount", "operator": "gte", "value": 100 }
    ],
    "limit": 20
  }
}