Updated class with singleton

hendrathings · Jan 7, 2017 · 76d8cfa · 76d8cfa
1 parent 82dca08
commit 76d8cfa
Show file tree

Hide file tree

Showing 11 changed files with 500 additions and 833 deletions.
diff --git a/README.md b/README.md
@@ -1,6 +1,9 @@
 # angular2-nvd3
 
-[![NPM Version](https://img.shields.io/npm/v/angular2-nvd3.svg?style=flat)](https://www.npmjs.org/package/ng2-nvd3)
+[![NPM Version](https://img.shields.io/npm/v/angular2-nvd3.svg?style=flat)](https://www.npmjs.org/package/angular2-nvd3)
+[![NPM license](http://img.shields.io/npm/l/angular2-nvd3.svg?style=flat)](https://www.npmjs.org/package/angular2-nvd3)
+[![Dependency Status](https://david-dm.org/hendrathings/angular2-nvd3.svg)](https://david-dm.org/hendrathings/angular2-nvd3)
+
 
 Create nvd3 with angular2 use directive or as a component.
 This project has tested latest angular2 `v2.4.1`.
@@ -9,7 +12,7 @@ If you are using nvd3 for angular2.RC take a look [ng2-nvd3](https://github.com/
 
 ## Install
 
-Before using this module, make sure to install node dependency:
+This node use some dependency of [@types](https://github.com/DefinitelyTyped/DefinitelyTyped) :
 
 - @types/nvd3
 - @types/d3

diff --git a/dist/angular2-nvd3/angular2-nvd3.component.d.ts b/dist/angular2-nvd3/angular2-nvd3.component.d.ts
@@ -1,18 +1,10 @@
-import { ElementRef, OnChanges } from '@angular/core';
-export declare class NvD3Component implements OnChanges {
+import { ElementRef, OnChanges, AfterViewInit } from '@angular/core';
+export declare class NvD3Component implements OnChanges, AfterViewInit {
+    private el;
     private options;
     private data;
-    private el;
-    private chart;
-    private svg;
-    private isViewInitialize;
-    constructor(elementRef: ElementRef);
+    private ngNvD3;
+    constructor(el: ElementRef);
     ngOnChanges(): void;
     ngAfterViewInit(): void;
-    ngOnDestroy(): void;
-    private updateWithOptions(options);
-    private updateWithData(data);
-    private configure(chart, options, chartType);
-    private configureEvents(dispatch, options);
-    private clearElement();
 }
diff --git a/dist/angular2-nvd3/angular2-nvd3.component.js b/dist/angular2-nvd3/angular2-nvd3.component.js
@@ -9,209 +9,18 @@ var __metadata = (this && this.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
 var core_1 = require("@angular/core");
-var d3 = require("d3");
-var nv = require("nvd3");
+var angular2_nvd3_core_1 = require("./angular2-nvd3.core");
 var NvD3Component = (function () {
-    function NvD3Component(elementRef) {
-        this.isViewInitialize = false;
-        this.el = elementRef.nativeElement;
+    function NvD3Component(el) {
+        this.el = el;
+        this.ngNvD3 = angular2_nvd3_core_1.Angular2NvD3.NgNvD3.getInstance(this.el, this.data, this.options);
     }
     NvD3Component.prototype.ngOnChanges = function () {
-        this.updateWithOptions(this.options);
+        this.ngNvD3.updateWithOptions();
     };
     NvD3Component.prototype.ngAfterViewInit = function () {
-        this.isViewInitialize = true;
-        this.updateWithOptions(this.options);
-    };
-    NvD3Component.prototype.ngOnDestroy = function () {
-    };
-    NvD3Component.prototype.updateWithOptions = function (options) {
-        if (!this.isViewInitialize || !options) {
-            return;
-        }
-        ;
-        var self = this;
-        this.clearElement();
-        this.chart = nv.models[options.chart.type]();
-        this.chart.id = Math.random().toString(36).substr(2, 15);
-        for (var key in this.chart) {
-            if (!this.chart.hasOwnProperty(key)) {
-                continue;
-            }
-            if (key[0] === '_') {
-            }
-            else if ([
-                'clearHighlights',
-                'highlightPoint',
-                'id',
-                'options',
-                'resizeHandler',
-                'state',
-                'open',
-                'close',
-                'tooltipContent'
-            ].indexOf(key) >= 0) {
-            }
-            else if (key === 'dispatch') {
-                this.configureEvents(this.chart[key], options.chart[key]);
-            }
-            else if ([
-                'bars',
-                'bars1',
-                'bars2',
-                'boxplot',
-                'bullet',
-                'controls',
-                'discretebar',
-                'distX',
-                'distY',
-                'interactiveLayer',
-                'legend',
-                'lines',
-                'lines1',
-                'lines2',
-                'multibar',
-                'pie',
-                'scatter',
-                'scatters1',
-                'scatters2',
-                'sparkline',
-                'stack1',
-                'stack2',
-                'sunburst',
-                'tooltip',
-                'x2Axis',
-                'xAxis',
-                'y1Axis',
-                'y2Axis',
-                'y3Axis',
-                'y4Axis',
-                'yAxis',
-                'yAxis1',
-                'yAxis2'
-            ].indexOf(key) >= 0 ||
-                (key === 'stacked' && options.chart.type === 'stackedAreaChart')) {
-                this.configure(this.chart[key], options.chart[key], options.chart.type);
-            }
-            else if ((key === 'xTickFormat' || key === 'yTickFormat') && options.chart.type === 'lineWithFocusChart') {
-            }
-            else if ((key === 'tooltips') && options.chart.type === 'boxPlotChart') {
-            }
-            else if ((key === 'tooltipXContent' || key === 'tooltipYContent') && options.chart.type === 'scatterChart') {
-            }
-            else if (options.chart[key] === undefined || options.chart[key] === null) {
-            }
-            else {
-                this.chart[key](options.chart[key]);
-            }
-        }
-        this.updateWithData(this.data);
-        nv.addGraph(function () {
-            if (!self.chart) {
-                return;
-            }
-            if (self.chart.resizeHandler) {
-                self.chart.resizeHandler.clear();
-            }
-            self.chart.resizeHandler = nv.utils.windowResize(function () {
-                if (self.chart && self.chart.update) {
-                    self.chart.update();
-                }
-            });
-            return self.chart;
-        }, options.chart['callback']);
-    };
-    NvD3Component.prototype.updateWithData = function (data) {
-        if (data) {
-            d3.select(this.el).select('svg').remove();
-            var h = void 0, w = void 0;
-            this.svg = d3.select(this.el).append('svg');
-            if (h = this.options.chart.height) {
-                if (!isNaN(+h)) {
-                    h += 'px';
-                }
-                this.svg.attr('height', h).style({ height: h });
-            }
-            if (w = this.options.chart.width) {
-                if (!isNaN(+w)) {
-                    w += 'px';
-                }
-                this.svg.attr('width', w).style({ width: w });
-            }
-            else {
-                this.svg.attr('width', '100%').style({ width: '100%' });
-            }
-            this.svg.datum(data).call(this.chart);
-        }
-    };
-    NvD3Component.prototype.configure = function (chart, options, chartType) {
-        if (chart && options) {
-            for (var key in chart) {
-                if (!chart.hasOwnProperty(key)) {
-                    continue;
-                }
-                var value = chart[key];
-                if (key[0] === '_') {
-                }
-                else if (key === 'dispatch') {
-                    this.configureEvents(value, options[key]);
-                }
-                else if (key === 'tooltip') {
-                    this.configure(chart[key], options[key], chartType);
-                }
-                else if (key === 'contentGenerator') {
-                    if (options[key]) {
-                        chart[key](options[key]);
-                    }
-                }
-                else if ([
-                    'axis',
-                    'clearHighlights',
-                    'defined',
-                    'highlightPoint',
-                    'nvPointerEventsClass',
-                    'options',
-                    'rangeBand',
-                    'rangeBands',
-                    'scatter',
-                    'open',
-                    'close'
-                ].indexOf(key) === -1) {
-                    if (options[key] === undefined || options[key] === null) {
-                    }
-                    else {
-                        chart[key](options[key]);
-                    }
-                }
-            }
-        }
-    };
-    NvD3Component.prototype.configureEvents = function (dispatch, options) {
-        if (dispatch && options) {
-            for (var key in dispatch) {
-                if (!dispatch.hasOwnProperty(key)) {
-                    continue;
-                }
-                if (options[key] === undefined || options[key] === null) {
-                }
-                else {
-                    dispatch.on(key + '._', options[key]);
-                }
-            }
-        }
-    };
-    NvD3Component.prototype.clearElement = function () {
-        this.el.innerHTML = '';
-        if (this.chart && this.chart.tooltip && this.chart.tooltip.id) {
-            d3.select('#' + this.chart.tooltip.id()).remove();
-        }
-        if (nv.tooltip && nv.tooltip.cleanup) {
-            nv.tooltip.cleanup();
-        }
-        if (this.chart && this.chart.resizeHandler) {
-            this.chart.resizeHandler.clear();
-        }
-        this.chart = null;
+        this.ngNvD3.isViewInitialize(true);
+        this.ngNvD3.updateWithOptions();
     };
     return NvD3Component;
 }());

diff --git a/dist/angular2-nvd3/angular2-nvd3.core.d.ts b/dist/angular2-nvd3/angular2-nvd3.core.d.ts
@@ -0,0 +1,19 @@
+export declare namespace Angular2NvD3 {
+    class NgNvD3 {
+        private el;
+        private data;
+        private options;
+        private chart;
+        private svg;
+        private viewInitialize;
+        private static instance;
+        constructor(el: any, options: any, data: any);
+        static getInstance(el: any, options: any, data: any): NgNvD3;
+        isViewInitialize(value: boolean): void;
+        updateWithOptions(): void;
+        private updateWithData(data);
+        private configure(chart, options, chartType);
+        private configureEvents(dispatch, options);
+        private clearElement();
+    }
+}