ngx-dygraphs/ngx-dygraphs.es5.js

Angular 2+ and 4+ library for support of dygraphs(<http://dygraphs.com>) charts.

import { Component, Input, NgModule, ViewChild } from '@angular/core';
import { CommonModule } from '@angular/common';
/**
 * Wrapper arround Dygraphs
 *
 * \@class NgxDygraphsComponent
 */
var NgxDygraphsComponent = (function () {
    function NgxDygraphsComponent() {
    }
    /**
     * @return {?}
     */
    NgxDygraphsComponent.prototype.ngOnInit = function () {
        this.noDataLabel = this.noDataLabel || 'NO DATA AVAILABLE';
        this.chartWidth = (this.options && this.options.width) || 640;
        this.chartHeight = (this.options && this.options.height) || 480;
    };
    /**
     * ngOnChanges
     * \@method ngOnChanges
     * @param {?} changes
     * @return {?}
     */
    NgxDygraphsComponent.prototype.ngOnChanges = function (changes) {
        var _this = this;
        if (!changes) {
            return;
        }
        if (!this.data || !this.data.length) {
            this.loadingInProgress = false;
            return;
        }
        this.loadingInProgress = true;
        var /** @type {?} */ options = Object.assign({}, this.options);
        if (!options.width) {
            options.width = this.chartWidth;
        }
        if (!options.height) {
            options.height = this.chartHeight;
        }
        if (!options.legend) {
            options.legend = 'always';
        }
        setTimeout(function () {
            _this.dygraph = new Dygraph(_this.chart.nativeElement, _this.data, options);
            _this.loadingInProgress = false;
            _this.dygraph.ready(function (graph) {
                _this.watchRangeSelector(graph);
            });
        }, 500);
    };
    /**
     * @param {?} index
     * @param {?} value
     * @return {?}
     */
    NgxDygraphsComponent.prototype.changeVisibility = function (index, value) {
        this.dygraph.setVisibility(index, value);
    };
    /**
     * @param {?} graph
     * @return {?}
     */
    NgxDygraphsComponent.prototype.watchRangeSelector = function (graph) {
        var /** @type {?} */ observer = new MutationObserver(function (mutations) {
            if (mutations.length === 2) {
                // Zoom to the same zoom to trigger zoomCallback
                var /** @type {?} */ zoomCallback = graph.getFunctionOption('zoomCallback');
                var _a = graph.xAxisRange(), minX = _a[0], maxX = _a[1];
                zoomCallback.call(graph, minX, maxX, graph.yAxisRanges());
            }
        });
        Array.from(document.getElementsByClassName('dygraph-rangesel-zoomhandle')).forEach(
        // work on range selector handles
        function (element, idx, arr) {
            // watch for style changes
            observer.observe(element, { attributes: true, attributeFilter: ['style'] });
        });
    };
    return NgxDygraphsComponent;
}());
NgxDygraphsComponent.decorators = [
    { type: Component, args: [{
                selector: 'ngx-dygraphs',
                template: "\n    <div class=\"ng-dygraphs\">\n        <div *ngIf=\"loadingInProgress\" class=\"loader-holder\">\n            <div class=\"loader\"></div>\n        </div>\n        <div class=\"ng-dygraphs-chart-container\">\n            <div [ngClass]=\"{'hide': !data?.length}\" #chart [style.width.px]=\"chartWidth\" [style.height.px]=\"chartHeight\"></div>\n            <div *ngIf=\"!data?.length\" class=\"nodata\" [style.width.px]=\"chartWidth\" [style.height.px]=\"chartHeight\">\n              {{noDataLabel}}\n            </div>\n        </div>\n    </div>\n  ",
                styles: ["\n    .ng-dygraphs {\n      position: relative; }\n      .ng-dygraphs .name-nodes-holder {\n        display: -ms-flexbox;\n        display: -webkit-box;\n        display: flex;\n        -ms-flex-direction: row;\n            -webkit-box-orient: horizontal;\n            -webkit-box-direction: normal;\n                flex-direction: row;\n        padding-right: 30px;\n        padding-left: 30px; }\n      .ng-dygraphs .ng-dygraphs-chart-container {\n        background-color: #fff;\n        padding: 0;\n        margin: 5px;}\n        .ng-dygraphs .ng-dygraphs-chart-container .nodata {\n          display: -ms-flexbox;\n          display: -webkit-box;\n          display: flex;\n          -webkit-box-pack: center;\n             -ms-flex-pack: center;\n           justify-content: center;\n         -webkit-box-align: center;\n            -ms-flex-align: center;\n               align-items: center;\n          color: #5c5c5c;\n          font-weight: bold;\n          font-size: 24px; \n          display: flex;\n          -ms-flex-line-pack: center;\n              align-content: center; }\n        .ng-dygraphs .ng-dygraphs-chart-container .hide {\n           display: none; }\n      .ng-dygraphs .loader-holder {\n        position: absolute;\n        display: -ms-flexbox;\n        display: -webkit-box;\n        display: flex;\n        -ms-flex-align: center;\n            -webkit-box-align: center;\n                align-items: center;\n        width: 100%;\n        height: 100%;\n        background-color: #fff;\n        z-index: 55;\n        opacity: 0.9; }\n      .ng-dygraphs .loader {\n        color: #0dc5c1;\n        font-size: 20px;\n        margin: 100px auto;\n        width: 1em;\n        height: 1em;\n        border-radius: 50%;\n        position: relative;\n        text-indent: -9999em;\n        -webkit-animation: load4 1.3s infinite linear;\n        animation: load4 1.3s infinite linear;\n        -webkit-transform: translateZ(0);\n        transform: translateZ(0); }\n\n    @-webkit-keyframes load4 {\n      0%,\n      100% {\n        -webkit-box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;\n                box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0; }\n      12.5% {\n        -webkit-box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;\n                box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em; }\n      25% {\n        -webkit-box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;\n                box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em; }\n      37.5% {\n        -webkit-box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;\n                box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em; }\n      50% {\n        -webkit-box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;\n                box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em; }\n      62.5% {\n        -webkit-box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;\n                box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em; }\n      75% {\n        -webkit-box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;\n                box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0; }\n      87.5% {\n        -webkit-box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;\n                box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em; } }\n\n    @keyframes load4 {\n      0%,\n      100% {\n        -webkit-box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;\n                box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0; }\n      12.5% {\n        -webkit-box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;\n                box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em; }\n      25% {\n        -webkit-box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;\n                box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em; }\n      37.5% {\n        -webkit-box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;\n                box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em; }\n      50% {\n        -webkit-box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;\n                box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em; }\n      62.5% {\n        -webkit-box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;\n                box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em; }\n      75% {\n        -webkit-box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;\n                box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0; }\n      87.5% {\n        -webkit-box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;\n                box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em; } }\n  "]
            },] },
];
/**
 * @nocollapse
 */
NgxDygraphsComponent.ctorParameters = function () { return []; };
NgxDygraphsComponent.propDecorators = {
    'options': [{ type: Input },],
    'data': [{ type: Input },],
    'noDataLabel': [{ type: Input },],
    'chart': [{ type: ViewChild, args: ['chart',] },],
};
var NgxDygraphsModule = (function () {
    function NgxDygraphsModule() {
    }
    /**
     * @return {?}
     */
    NgxDygraphsModule.forRoot = function () {
        return {
            ngModule: NgxDygraphsModule
        };
    };
    return NgxDygraphsModule;
}());
NgxDygraphsModule.decorators = [
    { type: NgModule, args: [{
                imports: [
                    CommonModule
                ],
                declarations: [
                    NgxDygraphsComponent
                ],
                exports: [
                    NgxDygraphsComponent
                ]
            },] },
];
/**
 * @nocollapse
 */
NgxDygraphsModule.ctorParameters = function () { return []; };
/**
 * Generated bundle index. Do not edit.
 */
export { NgxDygraphsComponent, NgxDygraphsModule };
//# sourceMappingURL=ngx-dygraphs.es5.js.map