Smarter Data at a Glance: Sparklines and Threshold Colors


A number on its own tells you the current value. A sparkline tells you whether that value is growing or collapsing. A threshold color tells you whether to worry. Together, they turn a plain text widget into something you can understand in a single glance — no mental arithmetic required.

Sparklines — automatic mini charts

A sparkline is a small inline line chart, usually without axes or labels. Edward Tufte popularized them in Beautiful Evidence as a way to show trend, shape, and variation in the space of a single word. Pinodock renders them automatically.

When a field in your custom plugin resolves to an array of numbers, Pinodock detects this and replaces the default list display with an SVG polyline chart drawn in your plugin's accent color. No configuration needed — if the data is an array of numbers, a sparkline appears.

Where this works naturally

  • Crypto prices — the built-in Crypto widget now shows a 7-day sparkline per coin, fetched from CoinGecko's markets endpoint alongside the current price and 24h change
  • Stripe MRR history — if your relay returns monthly revenue as an array, the trend is visualized immediately
  • Server metrics — CPU or memory usage over time as an array of hourly readings
  • GitHub commit frequency — weekly commit counts rendered as a contribution-style sparkline
  • Custom analytics — daily active users, conversion rate, error rate over a rolling window
How it works: Pinodock checks if all values in an array are parseable as numbers. If yes, and there are at least two values, it renders a sparkline instead of the default list. The chart normalizes to the min/max of the data, so even small changes are visible.

Threshold colors — red, amber, green without code

Threshold coloring is common in dashboards and monitoring tools — a metric goes green when it's healthy, amber when it needs attention, and red when it's critical. Pinodock brings this pattern to custom plugins without any code.

For each numeric field, you can set up to four thresholds in the field settings:

  • Warn above — value turns amber when it exceeds this number
  • Danger above — value turns red when it exceeds this number
  • Warn below — value turns amber when it falls below this number
  • Danger below — value turns red when it falls below this number

When none of the thresholds are triggered — meaning the value is within your healthy range — the number displays in green. This gives you the full RAG (red/amber/green) status indicator without writing a single conditional.

Real-world threshold examples

  • GitHub open PRs: warn above 3, danger above 7 — keeps your WIP under control
  • AWS monthly cost: warn above $50, danger above $200
  • PagerDuty active incidents: danger above 0 — any incident is worth seeing in red
  • Server uptime percentage: warn below 99.5, danger below 99
  • Linear P0 bugs: warn above 1, danger above 3
  • Stripe MRR: warn below $8000 if that's your monthly target

Click-through URL fields

Sometimes a field value is a URL — a link to a failing CI run, a Jira issue, a Notion page. Mark the field as a URL field and Pinodock adds a small ↗ button next to the value. Clicking it opens the URL in a new tab without navigating away from your new tab widget.

This avoids the nested anchor problem: each plugin widget already wraps its content in a link to the source URL. The ↗ button uses stopPropagation so clicking it opens the field URL rather than the widget's main URL.

Badge count on the extension icon

The most urgent information — the number you need to see without even opening a new tab — can be surfaced as a badge on the Pinodock extension icon itself. One plugin can claim the badge slot by setting isBadgeSource and specifying which field value to display.

The badge updates every time the plugin's background refresh fires. Common uses:

  • Unread email count from Gmail
  • Open GitHub notifications
  • Active PagerDuty incidents
  • Open PRs waiting for your review
  • Any critical count you want visible without clicking
Note: Only one plugin can own the badge slot at a time. This is by design — a badge that could show different things depending on which plugin last refreshed would be untrustworthy. Choose your most critical metric and let it own the badge.

Configuring these features

All four features — sparklines, threshold colors, URL click-through, and badge count — are configured from the plugin settings UI, not from code:

  1. Open Pinodock Settings → Plugins → your custom plugin → Edit
  2. In the field list, click ⚙ more on any field to expand its advanced options
  3. Toggle Value is a URL to enable the ↗ button
  4. Fill in any combination of the four threshold number inputs
  5. For badge count, scroll to the plugin-level Badge count section, enable it, and type the field label to surface

Sparklines require no configuration — if your field resolves to a number array, the chart appears automatically.