Custom Dashboards components

Custom YouTube Component

This article shows how to create custom Dashboards Component, in this example YouTube Component.

Note, that to create the custom component we are using ES6, to use the class and extends keywords, which makes creating custom class much easier.

We start by importing the default Component class and ComponentRegistry from Dashboards namespace. We can use destructuring syntax to retrieve this 2 classes. The next step is creating the class which will inherit from the imported Component class. The name of the class will automatically be the string, that will be used to reference this component type e.g. the class YouTubeComponent will be referenced by name: "YouTube".

const { Component, ComponentRegistry } = Dashboards;
class YouTubeComponent extends Component {
}

Then, depending on what the Component is expected to do, the options are limitless. In this example, one iframe element will be added, which will accept one attribute from options, which is videoId, and since the iframe element needs it size to be defined, the resize method is extended to update the size of the element.

At the end, the new YouTubeComponent class needs to be added to the registry, using the ComponentRegistry.registerComponent method.

The custom code looks like below:

class YouTubeComponent extends Component {
    constructor(cell, options) {
        super(cell, options);
        this.type = 'YouTube';
        this.youTubeElement = document.createElement('iframe');
        return this;
    }
    resize(width, height) {
        super.resize.call(this, width, height);
        this.youTubeElement.setAttribute('width', width - 10);
        this.youTubeElement.setAttribute('height', height - 10);
    }
    load() {
        super.load();
        this.youTubeElement.setAttribute(
            'src',
            'https://www.youtube.com/embed/' + this.options.videoId
        );
        this.youTubeElement.setAttribute('title', 'YouTube video player');
        this.youTubeElement.setAttribute('frameborder', '0');
        this.youTubeElement.allowfullscreen = true;
        this.contentElement.appendChild(this.youTubeElement);
        this.parentElement.appendChild(this.element);
        return this;
    }
}
ComponentRegistry.registerComponent('YouTube', YouTubeComponent);

And that's it! The component is ready to be used. Now, the new component type can be referenced like that:

Dashboards.board({
    gui: [{
        layouts: [{
            rows: [{
                cells:[{
                    id: 'cell-id'
                }]
            }]
        }]
    }],
    components: [{
        cell: 'cell-id',
        type: 'YouTube',
        videoId: 'video-id-from-youtube'
    }]
});

The live example can be found here.

Custom HTML Component

The basic HTML component described in the Types of Components it is easier to use, but requires a lot of configuration. In this example, we will create a custom HTML component, which will require less code to configure.

This custom component will extend basic HTML component, so we need to import the HTMLComponent class. The easiest way to do so is through the ComponentRegistry as shown below. We also will use the Highcharts.AST class, which will be used to parse the string type HTML into the AST-like object.

Then we can create our custom class, which extends the HTMLComponent class. The only thing we need to do, is to create a method to extract the HTML from the options and parse it into the AST-like object. In the example this method is called getCustomHTML and it assigns the element generated by the AST to the elements property. The only thing left is to register the new component in the ComponentRegistry and we are ready to use it.

const { ComponentRegistry } = Dashboards,
    HTMLComponent = ComponentRegistry.types.HTML,
    AST = Highcharts.AST;
class CustomHTML extends HTMLComponent {
    constructor(cell, options) {
        super(cell, options);
        this.type = 'CustomHTML';
        this.getCustomHTML();
        return this;
    }
    getCustomHTML() {
        const options = this.options;
        if (options.id) {
            const customHTML = document.getElementById(options.id).outerHTML;
            this.options.elements = new AST(customHTML).nodes;
        } else if (options.html) {
            this.options.elements = new AST(options.html).nodes;
        }
    }
}
ComponentRegistry.registerComponent('CustomHTML', CustomHTML);

This custom component can generate HTML elements in the dashboards by:

  • referencing the HTML element by its id attribute
  • passing the HTML as a string to the html property

Use of this component is shown below:

Dashboards.board('container', {
    gui: {
        layouts: [{
            id: 'layout-1',
            rows: [{
                cells: [{
                    id: 'dashboard-col-0'
                }, {
                    id: 'dashboard-col-1'
                }, {
                    id: 'dashboard-col-2'
                }]
            }]
        }]
    },
    components: [{
        type: 'CustomHTML',
        cell: 'dashboard-col-0',
        id: 'custom-html-div'
    }, {
        type: 'CustomHTML',
        cell: 'dashboard-col-1',
        html: `
            <div>
                <h1>Custom HTML 2</h1>
                <span id="custom-html-div-2">Custom HTML added as string </span>
            </div>
    },
    {
        cell: 'dashboard-col-2',
        type: 'Highcharts',
        chartOptions: {
            series: [{
                data: [1, 2, 3, 4]
            }]
        }
    }]
});

Check out the live example here.

Edit this page