https://github.com/brosenberger/jquery-dashboard

This repository contains a easy to use and extendable dashboard framework written in javascript to be embedded within existing web applications
https://github.com/brosenberger/jquery-dashboard

dashboard-widget dashboards javascript javascript-library jquery jquery-ui widgets

Last synced: 22 days ago
JSON representation

This repository contains a easy to use and extendable dashboard framework written in javascript to be embedded within existing web applications

• Host: GitHub
• URL: https://github.com/brosenberger/jquery-dashboard
• Owner: brosenberger
• License: mit
• Created: 2017-04-12T10:28:00.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2017-04-27T06:45:14.000Z (over 7 years ago)
• Last Synced: 2024-11-17T04:03:04.134Z (about 1 month ago)
• Topics: dashboard-widget, dashboards, javascript, javascript-library, jquery, jquery-ui, widgets
• Language: JavaScript
• Homepage: https://brosenberger.github.io/jquery-dashboard/docs/index.html
• Size: 1.86 MB
• Stars: 12
• Watchers: 3
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# jquery-dashboard

Demo: see https://brosenberger.github.io/jquery-dashboard/docs/index.html

This library provides a framework for showing a Jira-Like Dashboard and easy creating Widgets.

**Usage**

Install via npm:

```js

npm install jquery-dashboard --save

```

As library embedd dependencies (e.g. with cdn links):

```html

```

and dashboard components (styles not yet included, see docs/index.html for inline styling):

```html

```

initialize components:

```js

$(document).ready(function () {

    // initialize dashboard services

    var service = Dashboard.core.default();

    // register sample widgets

    Dashboard.samples.default(service);

    // create dashboard view and refresh list

    var dashboard = $('.dashboard-sortable').dashboard({

        dashboardService: service

    }).dashboard("refresh");

    // initialize widget add dialog

    $('h1 .fa.fa-plus-square').dashboardWidgetDialog({

        dashboardService: service,

        addCallback: function(widgetData) {

            dashboard.dashboard("addWidget", widgetData);

        }

    });

});

```

**Creating your own Widgets**

This is possible with standard require/extension mechanism like within the sample, but also without all js environment.

e.g. a Welcome Widget, just showing some welcome message:

```js

var WelcomeWidget = function () {

    this.type = WelcomeWidget.type;

    this.widgetTemplate=  Dashboard.widgetWelcome;

    this.sizeConfiguration= 'col-xs-12 col-md-6';

};

WelcomeWidget.type = 'welcomeWidget';

WelcomeWidget.prototype = $.extend(Dashboard.core.Widget.prototype, {

    description: {

        title: 'Welcome Widget',

        description: 'Gives you a warm welcome'

    },

    initialize: function (widgetElement) {

        console.log('welcome widget initialized');

    }

});

```

Handlebarlayouts have to initialized when embedding as library:

```js

handlebarsLayouts.register(Handlebars);

Handlebars.registerPartial('widget-layout', Dashboard.templates.layout);

Handlebars.registerPartial('widget-configuration-layout', Dashboard.templates.configurationLayout);

```

Register the widget within the service: 

```js

dashboardService.registerWidget(new WelcomeWidget());

```