Issues Widget

Embed the Issues KPI Widget


Issues Widget

To embed the Issues KPI Widget, use to following tag

<sigmetic-issues></sigmetic-issues>

The KPI Widget will work out of the box, and will appear as soon as you refresh the page.

Settings

You can provide settings to the widget by setting a settings property.
The settings follow the interface

{
  repository: string;
  labels: Array<{ name: string; color: string; }>;
  state: 'open' | 'closed' | 'all';
  useAll?: boolean;
}

Example

// Query the widget
const widget = document.querySelector('sigmetic-issues');

// Add settings
widget.settings = {
  repository: 'owner/repository',
  labels: [
    { name: 'bug', color: 'red' },
    { name: 'help-wanted', color: '#0075ca' },
  ],
  state: 'open',
  useAll: true,
};

Events & callbacks

When you change the settings on the widget, an event will be fired.

  • If you don't provide a settings property as described above, a initial-settings event will be fired, as soon as the widget renders.
  • Everytime you change the settings of the widget, a change-settings event will be fired.

The settings that is carried with the event will be corrosponding to the settings object above.

Example 1

// Query the widget
const widget = document.querySelector('sigmetic-issues');

// Add 'initial-settings' listener
widget.addEventListener('initial-settings', (e) => {
  // Handle intial settings
  const initialSettings = e.detail;
});

Example 2

// Query the widget
const widget = document.querySelector('sigmetic-issues');

// Add 'change-settings' listener
widget.addEventListener('change-settings', (e) => {
  // Handle changed settings
  const changedSettings = e.detail;
});