Total.js Dashboard

Total.js Dashboard is dashboard for IoT and Total.js Flow.

Installation

Total.js +v2.6.0
Flow +v4.0.0
download and copy dashboard.package into the /packages/ directory or create a definition file with:

var options = {};

// ====================================
// COMMON (OPTIONAL)
// ====================================

// options.url = '/$dashboard/';

// A maximum length of request:
// options.limit = 50;

// Predefined set of components (default value):
// options.templates = 'https://raw.githubusercontent.com/totaljs/dashboardcomponents/master/templates.json';

// ====================================
// Security (OPTIONAL)
// ====================================

// HTTP Basic auth:
// options.auth = ['admin:admin', 'name:password'];

// Standard "authorize" flag
// options.auth = true;

// IP restrictions:
// options.restrictions = ['127.0.0.1', '138.201', '172.31.33'];

// options.token = ['OUR_COMPANY_TOKEN'];
// you can open dashboard using : /$dashboard/?token=OUR_COMPANY_TOKEN

INSTALL('package', 'https://cdn.totaljs.com/dashboard.package', options);

IMPORTANT: it doesn't support UPTODATE mechanism
URL address http://127.0.0.1:8000/$dashboard/ (default, can be changed in config)
first start you have to install components via Component manager in Dashboard

How to create own component?

Dashboard (client-side)

<!-- (OPTIONAL) SETTINGS FORM -->
<script type="text/html" settings>
<div class="padding npb">
    <div class="m" data-jc="dropdown" data-jc-path="id" data-required="true" data-source="common.instances" data-source-condition="n => n.component === 'dashboardanalytics'" data-empty="">@(Flow instance)</div>
</div>
</script>

<!-- (OPTIONAL) ELEMENT IN DESIGNER -->
<script type="text/html" body>
    <div class="click"><i class="fa fa-plug"></i></div>
</script>

<!-- (OPTIONAL) CUSTOM STYLES -->
<style>
    .fb-component { background-color: #E33733; color: white; text-align: center; font-size: 16px; }
</style>

<!-- (OPTIONAL) CODE -->
<script>
// {String}, IMPORTANT (lower case without diacritics)
exports.name = 'component';

// {String}, optional (default: "component name")
exports.title = 'Component';

// {String}, optional (default: "")
// Font-Awesome icon without "fa-"
exports.icon = 'plug';

// {String}, optional (default: "Unknown")
exports.author = 'Peter Širka';

// {String}, optional (default: "Common")
exports.group = 'Common';

// {Object}, optional (default "undefined")
// Default options for new and existing instances
exports.options = { id: null };

// {String}, optional (default: "")
exports.version = '1.0.0';

// Installation
exports.install = function(instance) {

    // =======================================
    // PROPERTIES
    // =======================================

    instance.id;
    // {String} current instance ID

    instance.element;
    // {jQuery Element} current element

    instance.name;
    // {String} component name

    instance.size;
    // {Object} current size of element

    instance.options;
    // {Object} custom options

    // =======================================
    // METHODS
    // =======================================

    instance.emit(name, [argA], [argN]);
    // Emits an event for this component

    instance.on(name, fn);
    // Registers a listener for the event

    instance.menu(items, [element], [callback(item)], [offsetX]);
    // Shows a context-menu
    // items [{ name: String, icon: String }, { name: String, icon: String, url: String }, 'DIVIDER']

    instance.send(id, type, [data]);
    // Sends a message to specified instance by instance id

    instance.find(selector);
    // Returns jQuery (alias for instance.element.find())

    instance.append(html);
    // Appends HTML (alias for instance.element.append())

    instance.html(html);
    // Rewrites content (alias for instance.element.html())

    instance.event(html);
    // Registers a listener for the event (alias for instance.element.on())

    instance.settings();
    // Shows settings form

    instance.hidden();
    // Determines whether the widget is hidden
    // Returns {Boolean}

    // =======================================
    // EVENTS
    // =======================================

    instance.on('destroy', function() {
        // instance is destroying
    });

    instance.on('options', function(options_new, options_old) {
        // options were changed
    });

    instance.on('resize', function(size) {
        // size.width    {Number}
        // size.height   {Number}
        // size.device   {String}: lg, md, sm, xs
        // size.cols     {Number}
        // size.rows     {Number}
    });

    instance.on('lg', function(size) {
        // Is a large display
    });

    instance.on('md', function(size) {
        // Is a medium display
    });

    instance.on('sm', function(size) {
        // Is a small display
    });

    instance.on('xs', function(size) {
        // Is an extra small display
    });

    instance.on('data', function(response) {

        response.id;
        // {String} Flow: instance.id

        response.name;
        // {String} Flow: instance.name

        response.component;
        // {String} Flow: instance.component

        response.reference;
        // {String} Flow: instance.reference

        response.type;
        // {String} type (optional)

        response.body;
        // {Object} data

    });
};

// (OPTIONAL) Uninstallation
exports.uninstall = function() {
    // This method is executed when the component is uninstalled from the Dashboard
};
</script>

Common variables (client-side):

common.instances;
// {Object Array} All Flow instances

DEBUG;
// {Boolean} Determines component's maker

RELEASE;
// {Boolean} Determines dashboard

Common methods (client-side):

common.operations.emit(event_name, [arg1], [arg2], [argN]);
// Emits an event in all components

Good to know:

each Dashboard element is wrapped to data-jc-scope="" (generated randomly)

Flow (server-side)

Each Flow component connected to Dashboard component can define this code:

// (Optional) This method sends data to Dashboard component (server-side to client-side)
instance.dashboard(type, data);

// (Optional) This event captures data from Dashboard component
instance.on('dashboard', function(type, data) {

});

Components: jComponent +v12.0.0

Bellow jComponents can be used in Settings form:

autocomplete (declared body)
binder (declared in body)
calendar (declared in body)
checkbox
checkboxlist
codemirror
colorpicker (declared in body)
confirm (declared in body)
contextmenu (declared in body)
dropdown
dropdowncheckbox
error
exec (declared in body)
form
importer
keyvalue
loading
message (declared in body)
nosqlcounter
repeater
repeater-group
search
selectbox
textbox
textboxlist
validation
visible
multioptions
dragdropfiles
filereader

References:

Components

https://github.com/totaljs/dashboardcomponents

Contribute

This project is stored in private repository on GitHub. Contact me petersirka@gmail.com if you want be a contributor.

AbdallahMezo/dashboard