Commit Trend Widget

Embed the Commit Trend KPI Widget


Commit Trend Widget

To embed the Commit Trend KPI Widget, use to following tag

<sigmetic-commit-trends></sigmetic-commit-trends>

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;
  date: string;
  lookBackDays: number;
  preset?: 'last-week' | 'last-2-weeks' | 'last-3-weeks' | 'last-month' | 'custom';
  useAll?: boolean;
  compareToPast?: boolean;
}

Example

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

// Add settings
widget.settings = {
  repository: 'owner/repository',
  date: '2020-20-05'
  lookBackDays: 7,
  preset: 'custom'
  useAll: true,
  compareToPast: false,
};

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-commit-trends');

// 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-commit-trends');

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