monitor-widget
TypeScript icon, indicating that this package has built-in type declarations

1.0.17 β€’ Public β€’ Published

🧭 Monitor Widget

A lightweight component for monitoring subgraph statuses. Supports vanilla JS, React, Next.js, and CDN integration.


✨ Features

  • πŸš€ Easy integration with Web Components, React, or plain JS
  • 🎨 Supports light, dark, and auto themes
  • πŸ”„ Automatic refreshing of subgraph statuses
  • ⚠️ Robust error handling for partial or failed responses
  • 🌍 CDN-ready or available via npm
  • πŸ“¦ Minimal bundle size

πŸ“¦ Installation

Using npm

npm install monitor-widget
# or
yarn add monitor-widget

Using CDN

<script
  type="module"
  src="https://cdn.jsdelivr.net/npm/monitor-widget@latest/dist/vanilla.mjs"
></script>

πŸš€ Quick Start

Vanilla JS (Web Component)

<script
  type="module"
  src="https://cdn.jsdelivr.net/npm/monitor-widget@latest/dist/vanilla.mjs"
></script>

<monitor-widget
  subgraph-ids="Qm123...,Qm456..."
  status-endpoint="http://localhost:3000/status"
  refresh-interval-ms="10000"
  theme="auto"
></monitor-widget>

Example

You can try out the widget live on CodePen.

Attributes

Attribute Type Required Description
subgraph-ids string βœ… Comma-separated list of subgraph IDs
status-endpoint string βœ… API endpoint URL for fetching subgraph status
refresh-interval-ms number ❌ Refresh interval in milliseconds (default false). ⚠️ Note: the underlying data source updates roughly every 10β€―minutes, but you can set any interval you like in your app.
theme string ❌ Theme mode: light, dark, or auto (default)

React / Next.js

import { MonitorWidget } from 'monitor-widget/react';

<MonitorWidget
  subgraphIds={['Qm123...', 'Qm456...']}
  statusEndpoint="http://localhost:3000/status"
  refreshIntervalMs={10000}
  theme="auto" // "light" | "dark"
/>;

Example

You can try out the widget live on StackBlitz.

Props

Prop Type Required Description
subgraphIds string[] βœ… Array of subgraph IDs
statusEndpoint string βœ… API endpoint URL for fetching subgraph status
refreshIntervalMs number ❌ Refresh interval in milliseconds (default: false).⚠️ Note: the underlying data source updates roughly every 10β€―minutes, but you can set any interval you like in your app.
theme string ❌ Theme mode: light, dark, or auto (default)

Core JS via CDN

<div id="monitor-container"></div>

<script type="module">
  import { WidgetApp } from 'https://cdn.jsdelivr.net/npm/monitor-widget@latest/dist/core.mjs';

  const app = new WidgetApp({
    subgraphIds: ['Qm123...', 'Qm456...'],
    statusEndpoint: 'http://localhost:3000/status',
    refreshIntervalMs: 10000,
    theme: 'auto', // "light" | "dark"
  });

  app.render(document.getElementById('monitor-container'));
</script>

Example

You can try out the widget live on CodePen.

Options

Option Type Required Description
subgraphIds string[] βœ… Array of subgraph IDs
statusEndpoint string βœ… API endpoint URL for fetching subgraph status
refreshIntervalMs number ❌ Refresh interval (default: false). ⚠️ Note: the underlying data source updates roughly every 10β€―minutes, but you can set any interval you like in your app.
theme string ❌ Theme mode: light, dark, or auto (default)

πŸ–ŒοΈ Theme Customization

The widget supports the following themes:

  • πŸŒ™ Dark mode
  • β˜€οΈ Light mode
  • βš™οΈ Auto mode (based on user's OS preference)

Customize further by overriding CSS variables or adding your own styles.


⚑️ Contributing

Feel free to open issues, submit pull requests, or suggest improvements!


πŸ“„ License

MIT

Readme

Keywords

none

Package Sidebar

Install

npm i monitor-widget

Weekly Downloads

5

Version

1.0.17

License

none

Unpacked Size

44.9 kB

Total Files

8

Last publish

Collaborators

  • vasylkiv_t