ngx-dygraphs
Version:
Angular 2+ and 4+ library for support of dygraphs(<http://dygraphs.com>) charts.
142 lines (137 loc) • 12.5 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('/core'), require('@angular/common')) :
typeof define === 'function' && define.amd ? define(['exports', '/core', '@angular/common'], factory) :
(factory((global['ngx-dygraphs'] = {}),global.ng.core,global.ng.common));
}(this, (function (exports,core,common) { 'use strict';
/**
* 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: core.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: core.Input },],
'data': [{ type: core.Input },],
'noDataLabel': [{ type: core.Input },],
'chart': [{ type: core.ViewChild, args: ['chart',] },],
};
var NgxDygraphsModule = (function () {
function NgxDygraphsModule() {
}
/**
* @return {?}
*/
NgxDygraphsModule.forRoot = function () {
return {
ngModule: NgxDygraphsModule
};
};
return NgxDygraphsModule;
}());
NgxDygraphsModule.decorators = [
{ type: core.NgModule, args: [{
imports: [
common.CommonModule
],
declarations: [
NgxDygraphsComponent
],
exports: [
NgxDygraphsComponent
]
},] },
];
/**
* @nocollapse
*/
NgxDygraphsModule.ctorParameters = function () { return []; };
exports.NgxDygraphsComponent = NgxDygraphsComponent;
exports.NgxDygraphsModule = NgxDygraphsModule;
Object.defineProperty(exports, '__esModule', { value: true });
})));
//# sourceMappingURL=ngx-dygraphs.umd.js.map