ng2-google-charts - npm Package Compare versions

Comparing version 3.5.0 to 4.0.0

bundles/ng2-google-charts.umd.js

@@ -144,9 +144,62 @@ (function webpackUniversalModuleDefinition(root, factory) {
     function GoogleChartComponent(el, loaderService) {
+        var _this = this;
+        this.mouseOverListener = function (item) {
+            var event = _this.parseMouseEvent(item);
+            event.tooltip = _this.getHTMLTooltip();
+            return event;
+        };
+        this.mouseOutListener = function (item) {
+            var event = _this.parseMouseEvent(item);
+            return event;
+        };
+        this.selectListener = function () {
+            var event = {
+                message: 'select',
+                row: null,
+                column: null,
+                selectedRowValues: [],
+                selectedRowFormattedValues: [],
+                columnLabel: ''
+            };
+            var s = _this.wrapper.visualization.getSelection();
+            var gs = s[s.length - 1];
+            if (!gs) {
+                event.message = 'deselect';
+                return event;
+            }
+            var selection = gs;
+            if (gs.row != null) {
+                event.row = selection.row;
+                var selectedRowValues = [];
+                var selectedRowFormattedValues = [];
+                var dataTable = _this.wrapper.getDataTable();
+                var numberOfColumns = dataTable.getNumberOfColumns();
+                for (var i = 0; i < numberOfColumns; i++) {
+                    selectedRowValues.push(dataTable.getValue(selection.row, i));
+                    selectedRowFormattedValues.push(dataTable.getFormattedValue(selection.row, i));
+                }
+                event.selectedRowValues = selectedRowValues;
+                event.selectedRowFormattedValues = selectedRowFormattedValues;
+            }
+            if (selection.column != null) {
+                event.column = selection.column;
+                event.columnLabel = _this.getColumnLabelAtPosition(selection);
+            }
+            if (gs.name) {
+                event.columnLabel = gs.name;
+            }
+            return event;
+        };
         this.el = el;
         this.loaderService = loaderService;
         this.chartSelect = new core_["EventEmitter"]();
+        this.chartSelectOneTime = new core_["EventEmitter"]();
         this.chartReady = new core_["EventEmitter"]();
+        this.chartReadyOneTime = new core_["EventEmitter"]();
         this.chartError = new core_["EventEmitter"]();
+        this.chartErrorOneTime = new core_["EventEmitter"]();
         this.mouseOver = new core_["EventEmitter"]();
+        this.mouseOverOneTime = new core_["EventEmitter"]();
         this.mouseOut = new core_["EventEmitter"]();
+        this.mouseOutOneTime = new core_["EventEmitter"]();
     }
@@ -161,18 +214,26 @@ GoogleChartComponent.prototype.ngOnChanges = function (changes) {
             this.options = this.data.options;
-            this.loaderService.load(this.data.chartType, this.data.apiKey).then(function () {
+            if (!this.options) {
+                this.options = {};
+            }
+            this.data.component = this;
+            this.loaderService.load().then(function () {
                 if (_this.wrapper === undefined || _this.wrapper.getChartType() !== _this.data.chartType) {
+                    _this.convertOptions();
+                    if (_this.data.opt_firstRowIsData && Array.isArray(_this.data.dataTable)) {
+                        _this.data.dataTable = google.visualization.arrayToDataTable(_this.data.dataTable, true);
+                    }
                     _this.wrapper = new google.visualization.ChartWrapper(_this.data);
+                    _this.registerChartWrapperEvents();
                 }
                 else {
-                    _this.unregisterChartEvents();
-                    _this.wrapper.setDataTable(_this.data.dataTable);
-                    _this.wrapper.setOptions(_this.options);
+                    // this.unregisterEvents();
                 }
-                _this.registerChartWrapperEvents();
-                _this.reformat();
-                _this.redraw();
+                _this.draw();
             });
         }
     };
-    GoogleChartComponent.prototype.redraw = function () {
+    GoogleChartComponent.prototype.draw = function () {
+        this.wrapper.setDataTable(this.data.dataTable);
+        this.convertOptions();
+        this.wrapper.setOptions(this.options);
         this.reformat();
@@ -205,5 +266,6 @@ this.wrapper.draw(this.el.nativeElement.querySelector('div'));
                 }
+                var dt = this.wrapper.getDataTable();
                 for (var _d = 0, _e = formatterConfig.columns; _d < _e.length; _d++) {
                     var col = _e[_d];
-                    formatter.format(this.wrapper.getDataTable(), col);
+                    formatter.format(dt, col);
                 }
@@ -248,3 +310,2 @@ }
             var series = this.getSeriesByColumn(column);
-            var bar = item.row;
             var row = item.row;
@@ -269,3 +330,3 @@ var seriesType = this.options.seriesType;
     GoogleChartComponent.prototype.getValueAtPosition = function (position) {
-        if (position.row === null) {
+        if (position.row == null) {
             return null;
@@ -292,12 +353,29 @@ }
     GoogleChartComponent.prototype.parseMouseEvent = function (item) {
+        var chartType = this.wrapper.getChartType();
+        var eventColumn = item.column;
+        if (eventColumn == null) {
+            switch (chartType) {
+                case 'Timeline':
+                    eventColumn = this.wrapper.getDataTable().getNumberOfColumns() === 3 ? 0 : 1;
+                    break;
+                default:
+                    eventColumn = 0;
+            }
+        }
+        var eventRow = item.row;
+        var myItem = {
+            row: eventRow,
+            column: eventColumn
+        };
         var event = {
             position: item,
-            boundingBox: this.getBoundingBoxForItem(item),
-            value: this.getValueAtPosition(item),
-            columnType: this.getColumnTypeAtPosition(item),
-            columnLabel: this.getColumnLabelAtPosition(item)
+            boundingBox: this.getBoundingBoxForItem(myItem),
+            value: this.getValueAtPosition(myItem),
+            columnType: this.getColumnTypeAtPosition(myItem),
+            columnLabel: this.getColumnLabelAtPosition(myItem)
         };
         return event;
     };
-    GoogleChartComponent.prototype.unregisterChartEvents = function () {
+    GoogleChartComponent.prototype.unregisterEvents = function () {
+        google.visualization.events.removeAllListeners(this.wrapper.getChart());
         google.visualization.events.removeAllListeners(this.wrapper);
@@ -307,5 +385,5 @@ };
         var _this = this;
+        var chart = this.wrapper.getChart();
+        this.cli = chart.getChartLayoutInterface ? chart.getChartLayoutInterface() : null;
         if (this.mouseOver.observers.length > 0) {
-            var chart = this.wrapper.getChart();
-            this.cli = chart.getChartLayoutInterface();
             google.visualization.events.addListener(chart, 'onmouseover', function (item) {
@@ -317,5 +395,10 @@ var event = _this.parseMouseEvent(item);
         }
+        if (this.mouseOverOneTime.observers.length > 0) {
+            google.visualization.events.addOneTimeListener(chart, 'onmouseover', function (item) {
+                var event = _this.parseMouseEvent(item);
+                event.tooltip = _this.getHTMLTooltip();
+                _this.mouseOverOneTime.emit(event);
+            });
+        }
         if (this.mouseOut.observers.length > 0) {
-            var chart = this.wrapper.getChart();
-            this.cli = chart.getChartLayoutInterface();
             google.visualization.events.addListener(chart, 'onmouseout', function (item) {
@@ -326,2 +409,8 @@ var event = _this.parseMouseEvent(item);
         }
+        if (this.mouseOutOneTime.observers.length > 0) {
+            google.visualization.events.addOneTimeListener(chart, 'onmouseout', function (item) {
+                var event = _this.parseMouseEvent(item);
+                _this.mouseOutOneTime.emit(event);
+            });
+        }
     };
@@ -332,2 +421,5 @@ GoogleChartComponent.prototype.registerChartWrapperEvents = function () {
             _this.chartReady.emit({ message: 'Chart ready' });
+        });
+        google.visualization.events.addOneTimeListener(this.wrapper, 'ready', function () {
+            _this.chartReadyOneTime.emit({ message: 'Chart ready (one time)' });
             _this.registerChartEvents();
@@ -338,38 +430,26 @@ });
         });
-        google.visualization.events.addListener(this.wrapper, 'select', function () {
-            var _a;
-            var event;
-            var selection = _this.wrapper.visualization.getSelection()[0];
-            if (selection !== undefined) {
-                var selectedRowValues = [];
-                var selectedRowFormattedValues = [];
-                if (selection.row !== null) {
-                    var dataTable = _this.wrapper.getDataTable();
-                    var numberOfColumns = dataTable.getNumberOfColumns();
-                    for (var i = 0; i < numberOfColumns; i++) {
-                        selectedRowValues.push(dataTable.getValue(selection.row, i));
-                        selectedRowFormattedValues.push(dataTable.getFormattedValue(selection.row, i));
-                    }
-                }
-                event = (_a = {
-                        message: 'select',
-                        row: selection.row,
-                        column: selection.column
-                    },
-                    _a['selectedRowValues'] = selectedRowValues,
-                    _a['selectedRowFormattedValues'] = selectedRowFormattedValues,
-                    _a);
-            }
-            else {
-                event = {
-                    message: 'deselect',
-                    row: null,
-                    column: null,
-                    selectedRowValues: [],
-                    selectedRowFormattedValues: []
-                };
-            }
-            _this.chartSelect.emit(event);
+        google.visualization.events.addOneTimeListener(this.wrapper, 'error', function (error) {
+            _this.chartErrorOneTime.emit(error);
         });
+        this.addListener(this.wrapper, 'select', this.selectListener, this.chartSelect);
+        this.addOneTimeListener(this.wrapper, 'select', this.selectListener, this.chartSelectOneTime);
     };
+    GoogleChartComponent.prototype.addListener = function (source, eventType, listenerFn, evEmitter) {
+        google.visualization.events.addListener(source, eventType, function () {
+            evEmitter.emit(listenerFn());
+        });
+    };
+    GoogleChartComponent.prototype.addOneTimeListener = function (source, eventType, listenerFn, evEmitter) {
+        google.visualization.events.addOneTimeListener(source, eventType, function () {
+            evEmitter.emit(listenerFn());
+        });
+    };
+    GoogleChartComponent.prototype.convertOptions = function () {
+        try {
+            this.options = google.charts[this.data.chartType].convertOptions(this.options);
+        }
+        catch (error) {
+            return;
+        }
+    };
     __decorate([
@@ -383,12 +463,27 @@ Object(core_["Input"])()
         Object(core_["Output"])()
+    ], GoogleChartComponent.prototype, "chartReadyOneTime", void 0);
+    __decorate([
+        Object(core_["Output"])()
     ], GoogleChartComponent.prototype, "chartError", void 0);
     __decorate([
         Object(core_["Output"])()
+    ], GoogleChartComponent.prototype, "chartErrorOneTime", void 0);
+    __decorate([
+        Object(core_["Output"])()
     ], GoogleChartComponent.prototype, "chartSelect", void 0);
     __decorate([
         Object(core_["Output"])()
+    ], GoogleChartComponent.prototype, "chartSelectOneTime", void 0);
+    __decorate([
+        Object(core_["Output"])()
     ], GoogleChartComponent.prototype, "mouseOver", void 0);
     __decorate([
         Object(core_["Output"])()
+    ], GoogleChartComponent.prototype, "mouseOverOneTime", void 0);
+    __decorate([
+        Object(core_["Output"])()
     ], GoogleChartComponent.prototype, "mouseOut", void 0);
+    __decorate([
+        Object(core_["Output"])()
+    ], GoogleChartComponent.prototype, "mouseOutOneTime", void 0);
     GoogleChartComponent = __decorate([
@@ -421,3 +516,3 @@ Object(core_["Component"])({
         return extendStatics(d, b);
-    }
+    };
     return function (d, b) {
@@ -475,36 +570,13 @@ extendStatics(d, b);
 var google_charts_loader_service_GoogleChartsLoaderService = /** @class */ (function () {
-    function GoogleChartsLoaderService(localeId) {
-        this.chartPackage = {
-            AnnotationChart: 'annotationchart',
-            AreaChart: 'corechart',
-            Bar: 'bar',
-            BarChart: 'corechart',
-            BubbleChart: 'corechart',
-            Calendar: 'calendar',
-            CandlestickChart: 'corechart',
-            ColumnChart: 'corechart',
-            ComboChart: 'corechart',
-            PieChart: 'corechart',
-            Gantt: 'gantt',
-            Gauge: 'gauge',
-            GeoChart: 'geochart',
-            Histogram: 'corechart',
-            Line: 'line',
-            LineChart: 'corechart',
-            Map: 'map',
-            OrgChart: 'orgchart',
-            Sankey: 'sankey',
-            Scatter: 'scatter',
-            ScatterChart: 'corechart',
-            SteppedAreaChart: 'corechart',
-            Table: 'table',
-            Timeline: 'timeline',
-            TreeMap: 'treemap',
-            WordTree: 'wordtree'
-        };
+    function GoogleChartsLoaderService(localeId, googleChartsVersion, mapsApiKey) {
+        this.googleChartsVersion = googleChartsVersion;
+        this.mapsApiKey = mapsApiKey;
         this.googleScriptLoadingNotifier = new core_["EventEmitter"]();
         this.googleScriptIsLoading = false;
         this.localeId = localeId;
+        if (this.googleChartsVersion === null) {
+            this.googleChartsVersion = '46';
+        }
     }
-    GoogleChartsLoaderService.prototype.load = function (chartType, apiKey) {
+    GoogleChartsLoaderService.prototype.load = function (packages) {
         var _this = this;
@@ -516,10 +588,10 @@ return new Promise(function (resolve, reject) {
                 var initializer = {
-                    packages: [_this.chartPackage[chartType]],
                     language: _this.localeId,
-                    callback: resolve
+                    callback: resolve,
+                    packages: packages
                 };
-                if (apiKey) {
-                    initializer.mapsApiKey = apiKey;
+                if (_this.mapsApiKey) {
+                    initializer.mapsApiKey = _this.mapsApiKey;
                 }
-                google.charts.load('45.2', initializer);
+                google.charts.load(_this.googleChartsVersion, initializer);
             }).catch(function (err) { return reject(); });
@@ -569,3 +641,5 @@ });
         Object(core_["Injectable"])(),
-        __param(0, Object(core_["Inject"])(core_["LOCALE_ID"]))
+        __param(0, Object(core_["Inject"])(core_["LOCALE_ID"])),
+        __param(1, Object(core_["Inject"])('googleChartsVersion')), __param(1, Object(core_["Optional"])()),
+        __param(2, Object(core_["Inject"])('mapsApiKey')), __param(2, Object(core_["Optional"])())
     ], GoogleChartsLoaderService);
@@ -572,0 +646,0 @@ return GoogleChartsLoaderService;

bundles/ng2-google-charts.umd.min.js

@@ -1,2 +0,2 @@
-!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("@angular/core")):"function"==typeof define&&define.amd?define(["@angular/core"],e):"object"==typeof exports?exports["ng2-google-charts.umd.min"]=e(require("@angular/core")):t["ng2-google-charts.umd.min"]=e(t["@angular/core"])}(window,function(t){return function(t){var e={};function o(r){if(e[r])return e[r].exports;var n=e[r]={i:r,l:!1,exports:{}};return t[r].call(n.exports,n,n.exports,o),n.l=!0,n.exports}return o.m=t,o.c=e,o.d=function(t,e,r){o.o(t,e)||Object.defineProperty(t,e,{configurable:!1,enumerable:!0,get:r})},o.r=function(t){Object.defineProperty(t,"__esModule",{value:!0})},o.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return o.d(e,"a",e),e},o.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},o.p="/",o(o.s=4)}([function(e,o){e.exports=t},function(t,e){},function(t,e){},function(t,e){},function(t,e,o){"use strict";o.r(e);var r=o(0),n=function(){function t(t){this.tooltipDOMElement=t}return t.prototype.setPosition=function(e,o){this.tooltipDOMElement.nativeElement.style.left=e+t.PIXELS,this.tooltipDOMElement.nativeElement.style.top=o+t.PIXELS},t.prototype.getDOMElement=function(){return this.tooltipDOMElement},t.PIXELS="px",t}(),i=function(t,e,o,r){var n,i=arguments.length,a=i<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(t,e,o,r);else for(var c=t.length-1;c>=0;c--)(n=t[c])&&(a=(i<3?n(a):i>3?n(e,o,a):n(e,o))||a);return i>3&&a&&Object.defineProperty(e,o,a),a},a=function(){function t(t,e){this.el=t,this.loaderService=e,this.chartSelect=new r.EventEmitter,this.chartReady=new r.EventEmitter,this.chartError=new r.EventEmitter,this.mouseOver=new r.EventEmitter,this.mouseOut=new r.EventEmitter}return t.prototype.ngOnChanges=function(t){var e=this;if(t.data){if(!this.data)return;this.options=this.data.options,this.loaderService.load(this.data.chartType,this.data.apiKey).then(function(){void 0===e.wrapper||e.wrapper.getChartType()!==e.data.chartType?e.wrapper=new google.visualization.ChartWrapper(e.data):(e.unregisterChartEvents(),e.wrapper.setDataTable(e.data.dataTable),e.wrapper.setOptions(e.options)),e.registerChartWrapperEvents(),e.reformat(),e.redraw()})}},t.prototype.redraw=function(){this.reformat(),this.wrapper.draw(this.el.nativeElement.querySelector("div"))},t.prototype.reformat=function(){if(this.data&&void 0!==this.data.formatters)for(var t=0,e=this.data.formatters;t<e.length;t++){var o=e[t],r=google.visualization[o.type],n=o.options,i=new r(n);if("ColorFormat"===o.type&&n)for(var a=0,c=n.ranges;a<c.length;a++){var u=c[a];void 0!==u.fromBgColor&&void 0!==u.toBgColor?i.addGradientRange(u.from,u.to,u.color,u.fromBgColor,u.toBgColor):i.addRange(u.from,u.to,u.color,u.bgcolor)}for(var s=0,l=o.columns;s<l.length;s++){var p=l[s];i.format(this.wrapper.getDataTable(),p)}}},t.prototype.getSelectorBySeriesType=function(t){return{bars:"bar#%s#%r",haxis:"hAxis#0#label",line:"point#%s#%r",legend:"legendentry#%s",area:"point#%s#%r"}[t]},t.prototype.getSeriesByColumn=function(t){for(var e=0,o=this.wrapper.getDataTable(),r=t-1;r>=0;r--){var n=o.getColumnRole(r),i=o.getColumnType(r);"data"!==n&&"number"!==i||e++}return e},t.prototype.getBoundingBoxForItem=function(t){var e={top:0,left:0,width:0,height:0};if(this.cli){var o=t.column,r=this.getSeriesByColumn(o),n=(t.row,t.row),i=this.options.seriesType;if(this.options.series&&this.options.series[r]&&this.options.series[r].type&&(i=this.options.series[r].type),i){var a=this.getSelectorBySeriesType(i);if(a){a=a.replace("%s",r+"").replace("%c",o+"").replace("%r",n+"");var c=this.cli.getBoundingBox(a);c&&(e=c)}}}return e},t.prototype.getValueAtPosition=function(t){return null===t.row?null:this.wrapper.getDataTable().getValue(t.row,t.column)},t.prototype.getColumnTypeAtPosition=function(t){return this.wrapper.getDataTable().getColumnType(t.column)||""},t.prototype.getColumnLabelAtPosition=function(t){return this.wrapper.getDataTable().getColumnLabel(t.column)||""},t.prototype.getHTMLTooltip=function(){var t=new r.ElementRef(this.el.nativeElement.querySelector(".google-visualization-tooltip"));return new n(t)},t.prototype.parseMouseEvent=function(t){return{position:t,boundingBox:this.getBoundingBoxForItem(t),value:this.getValueAtPosition(t),columnType:this.getColumnTypeAtPosition(t),columnLabel:this.getColumnLabelAtPosition(t)}},t.prototype.unregisterChartEvents=function(){google.visualization.events.removeAllListeners(this.wrapper)},t.prototype.registerChartEvents=function(){var t=this;if(this.mouseOver.observers.length>0){var e=this.wrapper.getChart();this.cli=e.getChartLayoutInterface(),google.visualization.events.addListener(e,"onmouseover",function(e){var o=t.parseMouseEvent(e);o.tooltip=t.getHTMLTooltip(),t.mouseOver.emit(o)})}if(this.mouseOut.observers.length>0){e=this.wrapper.getChart();this.cli=e.getChartLayoutInterface(),google.visualization.events.addListener(e,"onmouseout",function(e){var o=t.parseMouseEvent(e);t.mouseOut.emit(o)})}},t.prototype.registerChartWrapperEvents=function(){var t=this;google.visualization.events.addListener(this.wrapper,"ready",function(){t.chartReady.emit({message:"Chart ready"}),t.registerChartEvents()}),google.visualization.events.addListener(this.wrapper,"error",function(e){t.chartError.emit(e)}),google.visualization.events.addListener(this.wrapper,"select",function(){var e,o,r=t.wrapper.visualization.getSelection()[0];if(void 0!==r){var n=[],i=[];if(null!==r.row)for(var a=t.wrapper.getDataTable(),c=a.getNumberOfColumns(),u=0;u<c;u++)n.push(a.getValue(r.row,u)),i.push(a.getFormattedValue(r.row,u));(e={message:"select",row:r.row,column:r.column}).selectedRowValues=n,e.selectedRowFormattedValues=i,o=e}else o={message:"deselect",row:null,column:null,selectedRowValues:[],selectedRowFormattedValues:[]};t.chartSelect.emit(o)})},i([Object(r.Input)()],t.prototype,"data",void 0),i([Object(r.Output)()],t.prototype,"chartReady",void 0),i([Object(r.Output)()],t.prototype,"chartError",void 0),i([Object(r.Output)()],t.prototype,"chartSelect",void 0),i([Object(r.Output)()],t.prototype,"mouseOver",void 0),i([Object(r.Output)()],t.prototype,"mouseOut",void 0),t=i([Object(r.Component)({selector:"google-chart",template:"<div></div>",changeDetection:r.ChangeDetectionStrategy.OnPush})],t)}(),c=o(3),u=o(2),s=o(1),l=function(){var t=function(e,o){return(t=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var o in e)e.hasOwnProperty(o)&&(t[o]=e[o])})(e,o)};return function(e,o){function r(){this.constructor=e}t(e,o),e.prototype=null===o?Object.create(o):(r.prototype=o.prototype,new r)}}(),p=function(){return function(){}}(),h=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return l(e,t),e}(p),f=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return l(e,t),e}(p),g=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return l(e,t),e}(p),d=function(t,e,o,r){var n,i=arguments.length,a=i<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(t,e,o,r);else for(var c=t.length-1;c>=0;c--)(n=t[c])&&(a=(i<3?n(a):i>3?n(e,o,a):n(e,o))||a);return i>3&&a&&Object.defineProperty(e,o,a),a},v=function(t,e){return function(o,r){e(o,r,t)}},m=function(){function t(t){this.chartPackage={AnnotationChart:"annotationchart",AreaChart:"corechart",Bar:"bar",BarChart:"corechart",BubbleChart:"corechart",Calendar:"calendar",CandlestickChart:"corechart",ColumnChart:"corechart",ComboChart:"corechart",PieChart:"corechart",Gantt:"gantt",Gauge:"gauge",GeoChart:"geochart",Histogram:"corechart",Line:"line",LineChart:"corechart",Map:"map",OrgChart:"orgchart",Sankey:"sankey",Scatter:"scatter",ScatterChart:"corechart",SteppedAreaChart:"corechart",Table:"table",Timeline:"timeline",TreeMap:"treemap",WordTree:"wordtree"},this.googleScriptLoadingNotifier=new r.EventEmitter,this.googleScriptIsLoading=!1,this.localeId=t}return t.prototype.load=function(t,e){var o=this;return new Promise(function(r,n){void 0===r&&(r=Function.prototype),void 0===n&&(n=Function.prototype),o.loadGoogleChartsScript().then(function(){var n={packages:[o.chartPackage[t]],language:o.localeId,callback:r};e&&(n.mapsApiKey=e),google.charts.load("45.2",n)}).catch(function(t){return n()})})},t.prototype.loadGoogleChartsScript=function(){var t=this;return new Promise(function(e,o){if(void 0===e&&(e=Function.prototype),void 0===o&&(o=Function.prototype),"undefined"!=typeof google&&google.charts)e();else if(t.googleScriptIsLoading)t.googleScriptLoadingNotifier.subscribe(function(t){t?e():o()});else{t.googleScriptIsLoading=!0;var r=document.createElement("script");r.type="text/javascript",r.src="https://www.gstatic.com/charts/loader.js",r.async=!0,r.defer=!0,r.onload=function(){t.googleScriptIsLoading=!1,t.googleScriptLoadingNotifier.emit(!0),e()},r.onerror=function(){t.googleScriptIsLoading=!1,t.googleScriptLoadingNotifier.emit(!1),o()},document.getElementsByTagName("head")[0].appendChild(r)}})},t=d([Object(r.Injectable)(),v(0,Object(r.Inject)(r.LOCALE_ID))],t)}(),y=function(t,e,o,r){var n,i=arguments.length,a=i<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(t,e,o,r);else for(var c=t.length-1;c>=0;c--)(n=t[c])&&(a=(i<3?n(a):i>3?n(e,o,a):n(e,o))||a);return i>3&&a&&Object.defineProperty(e,o,a),a},C=function(){function t(){}return t=y([Object(r.NgModule)({declarations:[a],providers:[m],exports:[a]})],t)}();o.d(e,"GoogleChartComponent",function(){return a}),o.d(e,"ChartReadyEvent",function(){return c.ChartReadyEvent}),o.d(e,"ChartErrorEvent",function(){return u.ChartErrorEvent}),o.d(e,"ChartSelectEvent",function(){return s.ChartSelectEvent}),o.d(e,"ChartHTMLTooltip",function(){return n}),o.d(e,"ChartMouseOverEvent",function(){return f}),o.d(e,"ChartMouseOutEvent",function(){return g}),o.d(e,"MouseOverEvent",function(){return h}),o.d(e,"BoundingBox",function(){}),o.d(e,"DataPointPosition",function(){}),o.d(e,"Ng2GoogleChartsModule",function(){return C})}])});
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("@angular/core")):"function"==typeof define&&define.amd?define(["@angular/core"],e):"object"==typeof exports?exports["ng2-google-charts.umd.min"]=e(require("@angular/core")):t["ng2-google-charts.umd.min"]=e(t["@angular/core"])}(window,function(t){return function(t){var e={};function o(r){if(e[r])return e[r].exports;var n=e[r]={i:r,l:!1,exports:{}};return t[r].call(n.exports,n,n.exports,o),n.l=!0,n.exports}return o.m=t,o.c=e,o.d=function(t,e,r){o.o(t,e)||Object.defineProperty(t,e,{configurable:!1,enumerable:!0,get:r})},o.r=function(t){Object.defineProperty(t,"__esModule",{value:!0})},o.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return o.d(e,"a",e),e},o.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},o.p="/",o(o.s=4)}([function(e,o){e.exports=t},function(t,e){},function(t,e){},function(t,e){},function(t,e,o){"use strict";o.r(e);var r=o(0),n=function(){function t(t){this.tooltipDOMElement=t}return t.prototype.setPosition=function(e,o){this.tooltipDOMElement.nativeElement.style.left=e+t.PIXELS,this.tooltipDOMElement.nativeElement.style.top=o+t.PIXELS},t.prototype.getDOMElement=function(){return this.tooltipDOMElement},t.PIXELS="px",t}(),i=function(t,e,o,r){var n,i=arguments.length,a=i<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(t,e,o,r);else for(var s=t.length-1;s>=0;s--)(n=t[s])&&(a=(i<3?n(a):i>3?n(e,o,a):n(e,o))||a);return i>3&&a&&Object.defineProperty(e,o,a),a},a=function(){function t(t,e){var o=this;this.mouseOverListener=function(t){var e=o.parseMouseEvent(t);return e.tooltip=o.getHTMLTooltip(),e},this.mouseOutListener=function(t){return o.parseMouseEvent(t)},this.selectListener=function(){var t={message:"select",row:null,column:null,selectedRowValues:[],selectedRowFormattedValues:[],columnLabel:""},e=o.wrapper.visualization.getSelection(),r=e[e.length-1];if(!r)return t.message="deselect",t;var n=r;if(null!=r.row){t.row=n.row;for(var i=[],a=[],s=o.wrapper.getDataTable(),u=s.getNumberOfColumns(),l=0;l<u;l++)i.push(s.getValue(n.row,l)),a.push(s.getFormattedValue(n.row,l));t.selectedRowValues=i,t.selectedRowFormattedValues=a}return null!=n.column&&(t.column=n.column,t.columnLabel=o.getColumnLabelAtPosition(n)),r.name&&(t.columnLabel=r.name),t},this.el=t,this.loaderService=e,this.chartSelect=new r.EventEmitter,this.chartSelectOneTime=new r.EventEmitter,this.chartReady=new r.EventEmitter,this.chartReadyOneTime=new r.EventEmitter,this.chartError=new r.EventEmitter,this.chartErrorOneTime=new r.EventEmitter,this.mouseOver=new r.EventEmitter,this.mouseOverOneTime=new r.EventEmitter,this.mouseOut=new r.EventEmitter,this.mouseOutOneTime=new r.EventEmitter}return t.prototype.ngOnChanges=function(t){var e=this;if(t.data){if(!this.data)return;this.options=this.data.options,this.options||(this.options={}),this.data.component=this,this.loaderService.load().then(function(){void 0!==e.wrapper&&e.wrapper.getChartType()===e.data.chartType||(e.convertOptions(),e.data.opt_firstRowIsData&&Array.isArray(e.data.dataTable)&&(e.data.dataTable=google.visualization.arrayToDataTable(e.data.dataTable,!0)),e.wrapper=new google.visualization.ChartWrapper(e.data),e.registerChartWrapperEvents()),e.draw()})}},t.prototype.draw=function(){this.wrapper.setDataTable(this.data.dataTable),this.convertOptions(),this.wrapper.setOptions(this.options),this.reformat(),this.wrapper.draw(this.el.nativeElement.querySelector("div"))},t.prototype.reformat=function(){if(this.data&&void 0!==this.data.formatters)for(var t=0,e=this.data.formatters;t<e.length;t++){var o=e[t],r=google.visualization[o.type],n=o.options,i=new r(n);if("ColorFormat"===o.type&&n)for(var a=0,s=n.ranges;a<s.length;a++){var u=s[a];void 0!==u.fromBgColor&&void 0!==u.toBgColor?i.addGradientRange(u.from,u.to,u.color,u.fromBgColor,u.toBgColor):i.addRange(u.from,u.to,u.color,u.bgcolor)}for(var l=this.wrapper.getDataTable(),c=0,p=o.columns;c<p.length;c++){var h=p[c];i.format(l,h)}}},t.prototype.getSelectorBySeriesType=function(t){return{bars:"bar#%s#%r",haxis:"hAxis#0#label",line:"point#%s#%r",legend:"legendentry#%s",area:"point#%s#%r"}[t]},t.prototype.getSeriesByColumn=function(t){for(var e=0,o=this.wrapper.getDataTable(),r=t-1;r>=0;r--){var n=o.getColumnRole(r),i=o.getColumnType(r);"data"!==n&&"number"!==i||e++}return e},t.prototype.getBoundingBoxForItem=function(t){var e={top:0,left:0,width:0,height:0};if(this.cli){var o=t.column,r=this.getSeriesByColumn(o),n=t.row,i=this.options.seriesType;if(this.options.series&&this.options.series[r]&&this.options.series[r].type&&(i=this.options.series[r].type),i){var a=this.getSelectorBySeriesType(i);if(a){a=a.replace("%s",r+"").replace("%c",o+"").replace("%r",n+"");var s=this.cli.getBoundingBox(a);s&&(e=s)}}}return e},t.prototype.getValueAtPosition=function(t){return null==t.row?null:this.wrapper.getDataTable().getValue(t.row,t.column)},t.prototype.getColumnTypeAtPosition=function(t){return this.wrapper.getDataTable().getColumnType(t.column)||""},t.prototype.getColumnLabelAtPosition=function(t){return this.wrapper.getDataTable().getColumnLabel(t.column)||""},t.prototype.getHTMLTooltip=function(){var t=new r.ElementRef(this.el.nativeElement.querySelector(".google-visualization-tooltip"));return new n(t)},t.prototype.parseMouseEvent=function(t){var e=this.wrapper.getChartType(),o=t.column;if(null==o)switch(e){case"Timeline":o=3===this.wrapper.getDataTable().getNumberOfColumns()?0:1;break;default:o=0}var r={row:t.row,column:o};return{position:t,boundingBox:this.getBoundingBoxForItem(r),value:this.getValueAtPosition(r),columnType:this.getColumnTypeAtPosition(r),columnLabel:this.getColumnLabelAtPosition(r)}},t.prototype.unregisterEvents=function(){google.visualization.events.removeAllListeners(this.wrapper.getChart()),google.visualization.events.removeAllListeners(this.wrapper)},t.prototype.registerChartEvents=function(){var t=this,e=this.wrapper.getChart();this.cli=e.getChartLayoutInterface?e.getChartLayoutInterface():null,this.mouseOver.observers.length>0&&google.visualization.events.addListener(e,"onmouseover",function(e){var o=t.parseMouseEvent(e);o.tooltip=t.getHTMLTooltip(),t.mouseOver.emit(o)}),this.mouseOverOneTime.observers.length>0&&google.visualization.events.addOneTimeListener(e,"onmouseover",function(e){var o=t.parseMouseEvent(e);o.tooltip=t.getHTMLTooltip(),t.mouseOverOneTime.emit(o)}),this.mouseOut.observers.length>0&&google.visualization.events.addListener(e,"onmouseout",function(e){var o=t.parseMouseEvent(e);t.mouseOut.emit(o)}),this.mouseOutOneTime.observers.length>0&&google.visualization.events.addOneTimeListener(e,"onmouseout",function(e){var o=t.parseMouseEvent(e);t.mouseOutOneTime.emit(o)})},t.prototype.registerChartWrapperEvents=function(){var t=this;google.visualization.events.addListener(this.wrapper,"ready",function(){t.chartReady.emit({message:"Chart ready"})}),google.visualization.events.addOneTimeListener(this.wrapper,"ready",function(){t.chartReadyOneTime.emit({message:"Chart ready (one time)"}),t.registerChartEvents()}),google.visualization.events.addListener(this.wrapper,"error",function(e){t.chartError.emit(e)}),google.visualization.events.addOneTimeListener(this.wrapper,"error",function(e){t.chartErrorOneTime.emit(e)}),this.addListener(this.wrapper,"select",this.selectListener,this.chartSelect),this.addOneTimeListener(this.wrapper,"select",this.selectListener,this.chartSelectOneTime)},t.prototype.addListener=function(t,e,o,r){google.visualization.events.addListener(t,e,function(){r.emit(o())})},t.prototype.addOneTimeListener=function(t,e,o,r){google.visualization.events.addOneTimeListener(t,e,function(){r.emit(o())})},t.prototype.convertOptions=function(){try{this.options=google.charts[this.data.chartType].convertOptions(this.options)}catch(t){return}},i([Object(r.Input)()],t.prototype,"data",void 0),i([Object(r.Output)()],t.prototype,"chartReady",void 0),i([Object(r.Output)()],t.prototype,"chartReadyOneTime",void 0),i([Object(r.Output)()],t.prototype,"chartError",void 0),i([Object(r.Output)()],t.prototype,"chartErrorOneTime",void 0),i([Object(r.Output)()],t.prototype,"chartSelect",void 0),i([Object(r.Output)()],t.prototype,"chartSelectOneTime",void 0),i([Object(r.Output)()],t.prototype,"mouseOver",void 0),i([Object(r.Output)()],t.prototype,"mouseOverOneTime",void 0),i([Object(r.Output)()],t.prototype,"mouseOut",void 0),i([Object(r.Output)()],t.prototype,"mouseOutOneTime",void 0),t=i([Object(r.Component)({selector:"google-chart",template:"<div></div>",changeDetection:r.ChangeDetectionStrategy.OnPush})],t)}(),s=o(3),u=o(2),l=o(1),c=function(){var t=function(e,o){return(t=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var o in e)e.hasOwnProperty(o)&&(t[o]=e[o])})(e,o)};return function(e,o){function r(){this.constructor=e}t(e,o),e.prototype=null===o?Object.create(o):(r.prototype=o.prototype,new r)}}(),p=function(){return function(){}}(),h=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return c(e,t),e}(p),g=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return c(e,t),e}(p),f=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return c(e,t),e}(p),d=function(t,e,o,r){var n,i=arguments.length,a=i<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(t,e,o,r);else for(var s=t.length-1;s>=0;s--)(n=t[s])&&(a=(i<3?n(a):i>3?n(e,o,a):n(e,o))||a);return i>3&&a&&Object.defineProperty(e,o,a),a},m=function(t,e){return function(o,r){e(o,r,t)}},v=function(){function t(t,e,o){this.googleChartsVersion=e,this.mapsApiKey=o,this.googleScriptLoadingNotifier=new r.EventEmitter,this.googleScriptIsLoading=!1,this.localeId=t,null===this.googleChartsVersion&&(this.googleChartsVersion="46")}return t.prototype.load=function(t){var e=this;return new Promise(function(o,r){void 0===o&&(o=Function.prototype),void 0===r&&(r=Function.prototype),e.loadGoogleChartsScript().then(function(){var r={language:e.localeId,callback:o,packages:t};e.mapsApiKey&&(r.mapsApiKey=e.mapsApiKey),google.charts.load(e.googleChartsVersion,r)}).catch(function(t){return r()})})},t.prototype.loadGoogleChartsScript=function(){var t=this;return new Promise(function(e,o){if(void 0===e&&(e=Function.prototype),void 0===o&&(o=Function.prototype),"undefined"!=typeof google&&google.charts)e();else if(t.googleScriptIsLoading)t.googleScriptLoadingNotifier.subscribe(function(t){t?e():o()});else{t.googleScriptIsLoading=!0;var r=document.createElement("script");r.type="text/javascript",r.src="https://www.gstatic.com/charts/loader.js",r.async=!0,r.defer=!0,r.onload=function(){t.googleScriptIsLoading=!1,t.googleScriptLoadingNotifier.emit(!0),e()},r.onerror=function(){t.googleScriptIsLoading=!1,t.googleScriptLoadingNotifier.emit(!1),o()},document.getElementsByTagName("head")[0].appendChild(r)}})},t=d([Object(r.Injectable)(),m(0,Object(r.Inject)(r.LOCALE_ID)),m(1,Object(r.Inject)("googleChartsVersion")),m(1,Object(r.Optional)()),m(2,Object(r.Inject)("mapsApiKey")),m(2,Object(r.Optional)())],t)}(),y=function(t,e,o,r){var n,i=arguments.length,a=i<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(t,e,o,r);else for(var s=t.length-1;s>=0;s--)(n=t[s])&&(a=(i<3?n(a):i>3?n(e,o,a):n(e,o))||a);return i>3&&a&&Object.defineProperty(e,o,a),a},O=function(){function t(){}return t=y([Object(r.NgModule)({declarations:[a],providers:[v],exports:[a]})],t)}();o.d(e,"GoogleChartComponent",function(){return a}),o.d(e,"ChartReadyEvent",function(){return s.ChartReadyEvent}),o.d(e,"ChartErrorEvent",function(){return u.ChartErrorEvent}),o.d(e,"ChartSelectEvent",function(){return l.ChartSelectEvent}),o.d(e,"ChartHTMLTooltip",function(){return n}),o.d(e,"ChartMouseOverEvent",function(){return g}),o.d(e,"ChartMouseOutEvent",function(){return f}),o.d(e,"MouseOverEvent",function(){return h}),o.d(e,"BoundingBox",function(){}),o.d(e,"DataPointPosition",function(){}),o.d(e,"Ng2GoogleChartsModule",function(){return O})}])});
 //# sourceMappingURL=ng2-google-charts.umd.min.js.map

google-chart/chart-mouse-event.js

@@ -7,3 +7,3 @@ var __extends = (this && this.__extends) || (function () {
         return extendStatics(d, b);
-    }
+    };
     return function (d, b) {
@@ -10,0 +10,0 @@ extendStatics(d, b);

google-chart/chart-select-event.d.ts

@@ -5,4 +5,5 @@ export interface ChartSelectEvent {
     column: number | null;
+    columnLabel: string;
     selectedRowValues: any[];
     selectedRowFormattedValues: any[];
 }

google-chart/google-chart.component.d.ts

 import { ElementRef, OnChanges, SimpleChanges, EventEmitter } from '@angular/core';
 import { GoogleChartsLoaderService } from '../google-charts-loader.service';
+import { GoogleChartInterface, GoogleChartComponentInterface } from '../google-charts-interfaces';
 import { ChartReadyEvent } from './chart-ready-event';
@@ -7,9 +8,14 @@ import { ChartErrorEvent } from './chart-error-event';
 import { ChartMouseOverEvent, ChartMouseOutEvent } from './chart-mouse-event';
-export declare class GoogleChartComponent implements OnChanges {
-    data: any;
+export declare class GoogleChartComponent implements OnChanges, GoogleChartComponentInterface {
+    data: GoogleChartInterface;
     chartReady: EventEmitter<ChartReadyEvent>;
+    chartReadyOneTime: EventEmitter<ChartReadyEvent>;
     chartError: EventEmitter<ChartErrorEvent>;
+    chartErrorOneTime: EventEmitter<ChartErrorEvent>;
     chartSelect: EventEmitter<ChartSelectEvent>;
+    chartSelectOneTime: EventEmitter<ChartSelectEvent>;
     mouseOver: EventEmitter<ChartMouseOverEvent>;
+    mouseOverOneTime: EventEmitter<ChartMouseOverEvent>;
     mouseOut: EventEmitter<ChartMouseOutEvent>;
+    mouseOutOneTime: EventEmitter<ChartMouseOutEvent>;
     wrapper: any;
@@ -22,3 +28,3 @@ private cli;
     ngOnChanges(changes: SimpleChanges): void;
-    redraw(): void;
+    draw(): void;
     /**
@@ -43,5 +49,11 @@ * Applies formatters to data columns, if defined
     private parseMouseEvent;
-    private unregisterChartEvents;
+    private unregisterEvents;
     private registerChartEvents;
     private registerChartWrapperEvents;
+    private addListener;
+    private addOneTimeListener;
+    private mouseOverListener;
+    private mouseOutListener;
+    private selectListener;
+    private convertOptions;
 }

google-chart/google-chart.component.js

@@ -15,9 +15,62 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
     function GoogleChartComponent(el, loaderService) {
+        var _this = this;
+        this.mouseOverListener = function (item) {
+            var event = _this.parseMouseEvent(item);
+            event.tooltip = _this.getHTMLTooltip();
+            return event;
+        };
+        this.mouseOutListener = function (item) {
+            var event = _this.parseMouseEvent(item);
+            return event;
+        };
+        this.selectListener = function () {
+            var event = {
+                message: 'select',
+                row: null,
+                column: null,
+                selectedRowValues: [],
+                selectedRowFormattedValues: [],
+                columnLabel: ''
+            };
+            var s = _this.wrapper.visualization.getSelection();
+            var gs = s[s.length - 1];
+            if (!gs) {
+                event.message = 'deselect';
+                return event;
+            }
+            var selection = gs;
+            if (gs.row != null) {
+                event.row = selection.row;
+                var selectedRowValues = [];
+                var selectedRowFormattedValues = [];
+                var dataTable = _this.wrapper.getDataTable();
+                var numberOfColumns = dataTable.getNumberOfColumns();
+                for (var i = 0; i < numberOfColumns; i++) {
+                    selectedRowValues.push(dataTable.getValue(selection.row, i));
+                    selectedRowFormattedValues.push(dataTable.getFormattedValue(selection.row, i));
+                }
+                event.selectedRowValues = selectedRowValues;
+                event.selectedRowFormattedValues = selectedRowFormattedValues;
+            }
+            if (selection.column != null) {
+                event.column = selection.column;
+                event.columnLabel = _this.getColumnLabelAtPosition(selection);
+            }
+            if (gs.name) {
+                event.columnLabel = gs.name;
+            }
+            return event;
+        };
         this.el = el;
         this.loaderService = loaderService;
         this.chartSelect = new EventEmitter();
+        this.chartSelectOneTime = new EventEmitter();
         this.chartReady = new EventEmitter();
+        this.chartReadyOneTime = new EventEmitter();
         this.chartError = new EventEmitter();
+        this.chartErrorOneTime = new EventEmitter();
         this.mouseOver = new EventEmitter();
+        this.mouseOverOneTime = new EventEmitter();
         this.mouseOut = new EventEmitter();
+        this.mouseOutOneTime = new EventEmitter();
     }
@@ -32,18 +85,26 @@ GoogleChartComponent.prototype.ngOnChanges = function (changes) {
             this.options = this.data.options;
-            this.loaderService.load(this.data.chartType, this.data.apiKey).then(function () {
+            if (!this.options) {
+                this.options = {};
+            }
+            this.data.component = this;
+            this.loaderService.load().then(function () {
                 if (_this.wrapper === undefined || _this.wrapper.getChartType() !== _this.data.chartType) {
+                    _this.convertOptions();
+                    if (_this.data.opt_firstRowIsData && Array.isArray(_this.data.dataTable)) {
+                        _this.data.dataTable = google.visualization.arrayToDataTable(_this.data.dataTable, true);
+                    }
                     _this.wrapper = new google.visualization.ChartWrapper(_this.data);
+                    _this.registerChartWrapperEvents();
                 }
                 else {
-                    _this.unregisterChartEvents();
-                    _this.wrapper.setDataTable(_this.data.dataTable);
-                    _this.wrapper.setOptions(_this.options);
+                    // this.unregisterEvents();
                 }
-                _this.registerChartWrapperEvents();
-                _this.reformat();
-                _this.redraw();
+                _this.draw();
             });
         }
     };
-    GoogleChartComponent.prototype.redraw = function () {
+    GoogleChartComponent.prototype.draw = function () {
+        this.wrapper.setDataTable(this.data.dataTable);
+        this.convertOptions();
+        this.wrapper.setOptions(this.options);
         this.reformat();
@@ -76,5 +137,6 @@ this.wrapper.draw(this.el.nativeElement.querySelector('div'));
                 }
+                var dt = this.wrapper.getDataTable();
                 for (var _d = 0, _e = formatterConfig.columns; _d < _e.length; _d++) {
                     var col = _e[_d];
-                    formatter.format(this.wrapper.getDataTable(), col);
+                    formatter.format(dt, col);
                 }
@@ -119,3 +181,2 @@ }
             var series = this.getSeriesByColumn(column);
-            var bar = item.row;
             var row = item.row;
@@ -140,3 +201,3 @@ var seriesType = this.options.seriesType;
     GoogleChartComponent.prototype.getValueAtPosition = function (position) {
-        if (position.row === null) {
+        if (position.row == null) {
             return null;
@@ -163,12 +224,29 @@ }
     GoogleChartComponent.prototype.parseMouseEvent = function (item) {
+        var chartType = this.wrapper.getChartType();
+        var eventColumn = item.column;
+        if (eventColumn == null) {
+            switch (chartType) {
+                case 'Timeline':
+                    eventColumn = this.wrapper.getDataTable().getNumberOfColumns() === 3 ? 0 : 1;
+                    break;
+                default:
+                    eventColumn = 0;
+            }
+        }
+        var eventRow = item.row;
+        var myItem = {
+            row: eventRow,
+            column: eventColumn
+        };
         var event = {
             position: item,
-            boundingBox: this.getBoundingBoxForItem(item),
-            value: this.getValueAtPosition(item),
-            columnType: this.getColumnTypeAtPosition(item),
-            columnLabel: this.getColumnLabelAtPosition(item)
+            boundingBox: this.getBoundingBoxForItem(myItem),
+            value: this.getValueAtPosition(myItem),
+            columnType: this.getColumnTypeAtPosition(myItem),
+            columnLabel: this.getColumnLabelAtPosition(myItem)
         };
         return event;
     };
-    GoogleChartComponent.prototype.unregisterChartEvents = function () {
+    GoogleChartComponent.prototype.unregisterEvents = function () {
+        google.visualization.events.removeAllListeners(this.wrapper.getChart());
         google.visualization.events.removeAllListeners(this.wrapper);
@@ -178,5 +256,5 @@ };
         var _this = this;
+        var chart = this.wrapper.getChart();
+        this.cli = chart.getChartLayoutInterface ? chart.getChartLayoutInterface() : null;
         if (this.mouseOver.observers.length > 0) {
-            var chart = this.wrapper.getChart();
-            this.cli = chart.getChartLayoutInterface();
             google.visualization.events.addListener(chart, 'onmouseover', function (item) {
@@ -188,5 +266,10 @@ var event = _this.parseMouseEvent(item);
         }
+        if (this.mouseOverOneTime.observers.length > 0) {
+            google.visualization.events.addOneTimeListener(chart, 'onmouseover', function (item) {
+                var event = _this.parseMouseEvent(item);
+                event.tooltip = _this.getHTMLTooltip();
+                _this.mouseOverOneTime.emit(event);
+            });
+        }
         if (this.mouseOut.observers.length > 0) {
-            var chart = this.wrapper.getChart();
-            this.cli = chart.getChartLayoutInterface();
             google.visualization.events.addListener(chart, 'onmouseout', function (item) {
@@ -197,2 +280,8 @@ var event = _this.parseMouseEvent(item);
         }
+        if (this.mouseOutOneTime.observers.length > 0) {
+            google.visualization.events.addOneTimeListener(chart, 'onmouseout', function (item) {
+                var event = _this.parseMouseEvent(item);
+                _this.mouseOutOneTime.emit(event);
+            });
+        }
     };
@@ -203,2 +292,5 @@ GoogleChartComponent.prototype.registerChartWrapperEvents = function () {
             _this.chartReady.emit({ message: 'Chart ready' });
+        });
+        google.visualization.events.addOneTimeListener(this.wrapper, 'ready', function () {
+            _this.chartReadyOneTime.emit({ message: 'Chart ready (one time)' });
             _this.registerChartEvents();
@@ -209,38 +301,26 @@ });
         });
-        google.visualization.events.addListener(this.wrapper, 'select', function () {
-            var _a;
-            var event;
-            var selection = _this.wrapper.visualization.getSelection()[0];
-            if (selection !== undefined) {
-                var selectedRowValues = [];
-                var selectedRowFormattedValues = [];
-                if (selection.row !== null) {
-                    var dataTable = _this.wrapper.getDataTable();
-                    var numberOfColumns = dataTable.getNumberOfColumns();
-                    for (var i = 0; i < numberOfColumns; i++) {
-                        selectedRowValues.push(dataTable.getValue(selection.row, i));
-                        selectedRowFormattedValues.push(dataTable.getFormattedValue(selection.row, i));
-                    }
-                }
-                event = (_a = {
-                        message: 'select',
-                        row: selection.row,
-                        column: selection.column
-                    },
-                    _a['selectedRowValues'] = selectedRowValues,
-                    _a['selectedRowFormattedValues'] = selectedRowFormattedValues,
-                    _a);
-            }
-            else {
-                event = {
-                    message: 'deselect',
-                    row: null,
-                    column: null,
-                    selectedRowValues: [],
-                    selectedRowFormattedValues: []
-                };
-            }
-            _this.chartSelect.emit(event);
+        google.visualization.events.addOneTimeListener(this.wrapper, 'error', function (error) {
+            _this.chartErrorOneTime.emit(error);
         });
+        this.addListener(this.wrapper, 'select', this.selectListener, this.chartSelect);
+        this.addOneTimeListener(this.wrapper, 'select', this.selectListener, this.chartSelectOneTime);
     };
+    GoogleChartComponent.prototype.addListener = function (source, eventType, listenerFn, evEmitter) {
+        google.visualization.events.addListener(source, eventType, function () {
+            evEmitter.emit(listenerFn());
+        });
+    };
+    GoogleChartComponent.prototype.addOneTimeListener = function (source, eventType, listenerFn, evEmitter) {
+        google.visualization.events.addOneTimeListener(source, eventType, function () {
+            evEmitter.emit(listenerFn());
+        });
+    };
+    GoogleChartComponent.prototype.convertOptions = function () {
+        try {
+            this.options = google.charts[this.data.chartType].convertOptions(this.options);
+        }
+        catch (error) {
+            return;
+        }
+    };
     __decorate([
@@ -257,2 +337,6 @@ Input(),
         __metadata("design:type", EventEmitter)
+    ], GoogleChartComponent.prototype, "chartReadyOneTime", void 0);
+    __decorate([
+        Output(),
+        __metadata("design:type", EventEmitter)
     ], GoogleChartComponent.prototype, "chartError", void 0);
@@ -262,2 +346,6 @@ __decorate([
         __metadata("design:type", EventEmitter)
+    ], GoogleChartComponent.prototype, "chartErrorOneTime", void 0);
+    __decorate([
+        Output(),
+        __metadata("design:type", EventEmitter)
     ], GoogleChartComponent.prototype, "chartSelect", void 0);
@@ -267,2 +355,6 @@ __decorate([
         __metadata("design:type", EventEmitter)
+    ], GoogleChartComponent.prototype, "chartSelectOneTime", void 0);
+    __decorate([
+        Output(),
+        __metadata("design:type", EventEmitter)
     ], GoogleChartComponent.prototype, "mouseOver", void 0);
@@ -272,3 +364,11 @@ __decorate([
         __metadata("design:type", EventEmitter)
+    ], GoogleChartComponent.prototype, "mouseOverOneTime", void 0);
+    __decorate([
+        Output(),
+        __metadata("design:type", EventEmitter)
     ], GoogleChartComponent.prototype, "mouseOut", void 0);
+    __decorate([
+        Output(),
+        __metadata("design:type", EventEmitter)
+    ], GoogleChartComponent.prototype, "mouseOutOneTime", void 0);
     GoogleChartComponent = __decorate([
@@ -275,0 +375,0 @@ Component({

google-chart/google-chart.component.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":4,"metadata":{"GoogleChartComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":26,"character":1},"arguments":[{"selector":"google-chart","template":"<div></div>","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":29,"character":19},"member":"OnPush"}}]}],"members":{"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":33,"character":3}}]}],"chartReady":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":35,"character":3}}]}],"chartError":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":37,"character":3}}]}],"chartSelect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":39,"character":3}}]}],"mouseOver":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":41,"character":3}}]}],"mouseOut":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":43,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":52,"character":25},{"__symbolic":"reference","module":"../google-charts-loader.service","name":"GoogleChartsLoaderService","line":53,"character":36}]}],"ngOnChanges":[{"__symbolic":"method"}],"redraw":[{"__symbolic":"method"}],"reformat":[{"__symbolic":"method"}],"getSelectorBySeriesType":[{"__symbolic":"method"}],"getSeriesByColumn":[{"__symbolic":"method"}],"getBoundingBoxForItem":[{"__symbolic":"method"}],"getValueAtPosition":[{"__symbolic":"method"}],"getColumnTypeAtPosition":[{"__symbolic":"method"}],"getColumnLabelAtPosition":[{"__symbolic":"method"}],"getHTMLTooltip":[{"__symbolic":"method"}],"parseMouseEvent":[{"__symbolic":"method"}],"unregisterChartEvents":[{"__symbolic":"method"}],"registerChartEvents":[{"__symbolic":"method"}],"registerChartWrapperEvents":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"GoogleChartComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":27,"character":1},"arguments":[{"selector":"google-chart","template":"<div></div>","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":30,"character":19},"member":"OnPush"}}]}],"members":{"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":34,"character":3}}]}],"chartReady":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":36,"character":3}}]}],"chartReadyOneTime":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":37,"character":3}}]}],"chartError":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":39,"character":3}}]}],"chartErrorOneTime":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":40,"character":3}}]}],"chartSelect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":42,"character":3}}]}],"chartSelectOneTime":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":43,"character":3}}]}],"mouseOver":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":45,"character":3}}]}],"mouseOverOneTime":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":46,"character":3}}]}],"mouseOut":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":48,"character":3}}]}],"mouseOutOneTime":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":49,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":58,"character":25},{"__symbolic":"reference","module":"../google-charts-loader.service","name":"GoogleChartsLoaderService","line":59,"character":36}]}],"ngOnChanges":[{"__symbolic":"method"}],"draw":[{"__symbolic":"method"}],"reformat":[{"__symbolic":"method"}],"getSelectorBySeriesType":[{"__symbolic":"method"}],"getSeriesByColumn":[{"__symbolic":"method"}],"getBoundingBoxForItem":[{"__symbolic":"method"}],"getValueAtPosition":[{"__symbolic":"method"}],"getColumnTypeAtPosition":[{"__symbolic":"method"}],"getColumnLabelAtPosition":[{"__symbolic":"method"}],"getHTMLTooltip":[{"__symbolic":"method"}],"parseMouseEvent":[{"__symbolic":"method"}],"unregisterEvents":[{"__symbolic":"method"}],"registerChartEvents":[{"__symbolic":"method"}],"registerChartWrapperEvents":[{"__symbolic":"method"}],"addListener":[{"__symbolic":"method"}],"addOneTimeListener":[{"__symbolic":"method"}],"convertOptions":[{"__symbolic":"method"}]}}}}]

google-charts-loader.service.d.ts

 export declare class GoogleChartsLoaderService {
-    private chartPackage;
+    private googleChartsVersion?;
+    private mapsApiKey?;
     private googleScriptLoadingNotifier;
     private googleScriptIsLoading;
     private localeId;
-    constructor(localeId: string);
-    load(chartType: string, apiKey?: string): Promise<any>;
+    constructor(localeId: string, googleChartsVersion?: string, mapsApiKey?: string);
+    load(packages?: string[]): Promise<any>;
     private loadGoogleChartsScript;
 }

google-charts-loader.service.js

@@ -13,38 +13,15 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
 };
-import { Injectable, EventEmitter, LOCALE_ID, Inject } from '@angular/core';
+import { Injectable, EventEmitter, LOCALE_ID, Inject, Optional } from '@angular/core';
 var GoogleChartsLoaderService = /** @class */ (function () {
-    function GoogleChartsLoaderService(localeId) {
-        this.chartPackage = {
-            AnnotationChart: 'annotationchart',
-            AreaChart: 'corechart',
-            Bar: 'bar',
-            BarChart: 'corechart',
-            BubbleChart: 'corechart',
-            Calendar: 'calendar',
-            CandlestickChart: 'corechart',
-            ColumnChart: 'corechart',
-            ComboChart: 'corechart',
-            PieChart: 'corechart',
-            Gantt: 'gantt',
-            Gauge: 'gauge',
-            GeoChart: 'geochart',
-            Histogram: 'corechart',
-            Line: 'line',
-            LineChart: 'corechart',
-            Map: 'map',
-            OrgChart: 'orgchart',
-            Sankey: 'sankey',
-            Scatter: 'scatter',
-            ScatterChart: 'corechart',
-            SteppedAreaChart: 'corechart',
-            Table: 'table',
-            Timeline: 'timeline',
-            TreeMap: 'treemap',
-            WordTree: 'wordtree'
-        };
+    function GoogleChartsLoaderService(localeId, googleChartsVersion, mapsApiKey) {
+        this.googleChartsVersion = googleChartsVersion;
+        this.mapsApiKey = mapsApiKey;
         this.googleScriptLoadingNotifier = new EventEmitter();
         this.googleScriptIsLoading = false;
         this.localeId = localeId;
+        if (this.googleChartsVersion === null) {
+            this.googleChartsVersion = '46';
+        }
     }
-    GoogleChartsLoaderService.prototype.load = function (chartType, apiKey) {
+    GoogleChartsLoaderService.prototype.load = function (packages) {
         var _this = this;
@@ -56,10 +33,10 @@ return new Promise(function (resolve, reject) {
                 var initializer = {
-                    packages: [_this.chartPackage[chartType]],
                     language: _this.localeId,
-                    callback: resolve
+                    callback: resolve,
+                    packages: packages
                 };
-                if (apiKey) {
-                    initializer.mapsApiKey = apiKey;
+                if (_this.mapsApiKey) {
+                    initializer.mapsApiKey = _this.mapsApiKey;
                 }
-                google.charts.load('45.2', initializer);
+                google.charts.load(_this.googleChartsVersion, initializer);
             }).catch(function (err) { return reject(); });
@@ -110,3 +87,5 @@ });
         __param(0, Inject(LOCALE_ID)),
-        __metadata("design:paramtypes", [String])
+        __param(1, Inject('googleChartsVersion')), __param(1, Optional()),
+        __param(2, Inject('mapsApiKey')), __param(2, Optional()),
+        __metadata("design:paramtypes", [String, String, String])
     ], GoogleChartsLoaderService);
@@ -113,0 +92,0 @@ return GoogleChartsLoaderService;

google-charts-loader.service.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":4,"metadata":{"GoogleChartsLoaderService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":4,"character":1}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":40,"character":22},"arguments":[{"__symbolic":"reference","module":"@angular/core","name":"LOCALE_ID","line":40,"character":29}]}]],"parameters":[{"__symbolic":"reference","name":"string"}]}],"load":[{"__symbolic":"method"}],"loadGoogleChartsScript":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"GoogleChartsLoaderService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":4,"character":1}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":12,"character":5},"arguments":[{"__symbolic":"reference","module":"@angular/core","name":"LOCALE_ID","line":12,"character":12}]}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":13,"character":5},"arguments":["googleChartsVersion"]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":13,"character":36}}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":14,"character":5},"arguments":["mapsApiKey"]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":14,"character":27}}]],"parameters":[{"__symbolic":"reference","name":"string"},{"__symbolic":"reference","name":"string"},{"__symbolic":"reference","name":"string"}]}],"load":[{"__symbolic":"method"}],"loadGoogleChartsScript":[{"__symbolic":"method"}]}}}}]

package.json

 {
 	"main": "bundles/ng2-google-charts.umd.js",
-	"version": "3.5.0",
+	"version": "4.0.0",
 	"description": "Angular2 Google Charts module",
@@ -24,3 +24,3 @@ "module": "index.js",
 	"name": "ng2-google-charts",
-	"_id": "ng2-google-charts@3.5.0"
+	"_id": "ng2-google-charts@4.0.0"
 }

README.md

 # ng2-google-charts
 
-> Google Charts module for Angular 2
+> Google Charts module for Angular 2 and beyond.
 
-Please see [this page][example-page] for a live demo.
-
 [![NPM Version][npm-image]][npm-url]
@@ -16,269 +14,5 @@ [![Downloads][npm-downloads-image]][npm-downloads-url]
 
-## Usage
+## Usage & Demo
+Check out the [reference documentation][reference] and the [live demo][example-page].
 
-Import the `Ng2GoogleChartsModule` in your `app.module.ts`:
-```ts
-import { Ng2GoogleChartsModule } from 'ng2-google-charts';
-
-@NgModule({
-  ...
-  imports: [
-    ...
-    Ng2GoogleChartsModule,
-  ],
-})
-export class AppModule { }
-```
-
-In your templates, use the `google-chart` component like this:
-```html
-<google-chart [data]="pieChartData"></google-chart>
-```
-and in the corresponding `.ts` file:
-```ts
-pieChartData =  {
-  chartType: 'PieChart',
-  dataTable: [
-    ['Task', 'Hours per Day'],
-    ['Work',     11],
-    ['Eat',      2],
-    ['Commute',  2],
-    ['Watch TV', 2],
-    ['Sleep',    7]
-  ],
-  options: {'title': 'Tasks'},
-};
-```
-
-Make sure you are compiling your Angular app with the Ahead-of-Time (AOT)
-compiler (option --aot).
-
-## Formatters
-
-You can specify an array of multiple formatter types and configurations like
-this:
-```ts
-public tableChartData =  {
-  chartType: 'Table',
-  dataTable: [
-    ['Department', 'Revenues', 'Another column', 'ColorFormat'],
-    ['Shoes', 10700, -100, 100],
-    ['Sports', -15400, 25, 500],
-    ['Toys', 12500, 40, 800],
-    ['Electronics', -2100, 889, 1000],
-    ['Food', 22600, 78, 1100],
-    ['Art', 1100, 42, 400]
-  ],
-  formatters: [
-    {
-      columns: [1, 2],
-      type: 'NumberFormat',
-      options: {
-        prefix: '&euro;', negativeColor: 'red', negativeParens: true
-      }
-    },
-    {
-      columns: [3],
-      type: 'ColorFormat',
-      options: {
-        ranges: [
-          {from: 100, to: 900, fromBgColor: 'green', toBgColor: 'yellow'}
-        ]
-      }
-    }
-  ],
-  options: {title: 'Countries', allowHtml: true}
-};
-```
-
-Please refer to the Google Chart [documentation for formatter types and options](https://developers.google.com/chart/interactive/docs/reference#formatters).
-
-Please see [this page][example-page] for a demo with more examples.
-
-## Events
-
-### chartReady
-
-The `chartReady` event is fired when a chart is completely loaded.
-
-Bind the `chartReady` event in the `google-chart` component like this:
-```html
-<google-chart [data]='pieChartData' (chartReady)='ready($event)'></google-chart>
-```
-
-Your `ready()` function is passed an event whose interface looks like this:
-```ts
-interface ChartReadyEvent {
-  message: string;
-}
-```
-
-You can import the `ChartReadyEvent` interface in your `.ts` file:
-```ts
-import { ChartReadyEvent } from 'ng2-google-charts';
-```
-
-and then use it like:
-```ts
-public ready(event: ChartReadyEvent) {
-  // your logic
-}
-```
-
-### chartError
-
-The `chartError` event is fired if there are some errors with a chart.
-
-Bind the `chartError` event in the `google-chart` component, like this:
-```html
-<google-chart [data]='pieChartData' (chartError)='error($event)'></google-chart>
-```
-
-Your `error()` function is passed an event whose interface looks like this:
-```ts
-interface ChartErrorEvent {
-  id: string;
-  message: string;
-  detailedMessage: string;
-  options: Object;
-}
-```
-
-You can import the `ChartErrorEvent` interface in your `.ts` file:
-```ts
-import { ChartErrorEvent } from 'ng2-google-charts';
-```
-
-and then use it like:
-```ts
-public error(event: ChartErrorEvent) {
-  // your logic
-}
-```
-
-See more details about [returned values for error event][google-charts-error-event].
-
-### chartSelect
-
-The `chartSelect` event is fired when a chart is selected/clicked.
-
-Bind the `chartSelect` event in the `google-chart` component, like this:
-```html
-<google-chart [data]='pieChartData' (chartSelect)='select($event)'></google-chart>
-```
-
-Your `select()` function is passed an event whose interface looks like this:
-```ts
-interface ChartSelectEvent {
-  message: string;
-  row: number | null;
-  column: number | null;
-  selectedRowValues: any[];
-  selectedRowFormattedValues: any[];
-}
-```
-
-You can import the `ChartSelectEvent` interface in your `.ts` file:
-```ts
-import { ChartSelectEvent } from 'ng2-google-charts';
-```
-
-and then use it like:
-```ts
-public select(event: ChartSelectEvent) {
-  // your logic
-}
-```
-
-### mouseOver
-
-The `mouseOver` event is fired when the user moves the mouse over some chart
-item.
-
-Bind the `MouseOver` event in the `google-chart` component like this:
-```html
-<google-chart [data]="comboChartData" (mouseOver)="mouseOver($event)"></google-chart>
-```
-
-Your `mouseOver()` function is passed an event whose class looks like this:
-```ts
-class ChartMouseOverEvent {
-  position: DataPointPosition;
-  boundingBox: BoundingBox;
-  value: any;
-  tooltip: ChartHTMLTooltip | null;
-  columnType: string;
-  columnLabel: string;
-}
-```
-
-You can import the `ChartMouseOverEvent` class in your `.ts` file:
-```ts
-import { ChartMouseOverEvent } from 'ng2-google-charts';
-```
-
-and then use it like:
-```ts
-public mouseOver(event: ChartMouseOverEvent) {
-  // your logic
-}
-```
-
-### mouseOut
-
-The `mouseOut` event is fired when the user moves the mouse out of some chart
-item.
-
-Bind the `MouseOut` event in the `google-chart` component like this:
-```html
-<google-chart [data]="comboChartData" (mouseOut)="mouseOut($event)"></google-chart>
-```
-
-Your `mouseOut()` function is passed an event whose class looks like this:
-```ts
-class ChartMouseOutEvent {
-  position: DataPointPosition;
-  boundingBox: BoundingBox;
-  value: any;
-  columnType: string;
-  columnLabel: string;
-}
-```
-
-You can import the `ChartMouseOutEvent` class in your `.ts` file:
-```ts
-import { ChartMouseOutEvent } from 'ng2-google-charts';
-```
-
-and then use it like:
-```ts
-public mouseOut(event: ChartMouseOutEvent) {
-  // your logic
-}
-```
-
-# Advanced usage
-You can access Google Chart's underlying [ChartWrapper](https://developers.google.com/chart/interactive/docs/reference#chartwrapperobject) through the
-`wrapper` property of the component object:
-```html
-<google-chart #cchart [data]="columnChartData"></google-chart>
-```
-
-```ts
-import {ViewChild} from '@angular/core';
-
-export class AppComponent {
-
-  @ViewChild('cchart') cchart;
-
-  myfunction() {
-    let googleChartWrapper = this.cchart.wrapper;
-
-    //force a redraw
-    this.cchart.redraw();
-  }
-
-}
-```
-
 ## License
@@ -292,3 +26,3 @@
 [npm-downloads-url]: https://npmjs.org/package/ng2-google-charts
-[example-page]: https://www.devrandom.it/software/ng2-google-charts/
-[google-charts-error-event]: https://developers.google.com/chart/interactive/docs/events#the-error-event
+[reference]: https://www.devrandom.it/software/ng2-google-charts/
+[example-page]: https://www.devrandom.it/software/ng2-google-charts/demo

No alert changes

Improved metrics

Total package byte prevSize

164550

increased by18.08%

Number of package files

39

increased by14.71%

Lines of code

1416

increased by17.8%

Worsened metrics

Number of lines in readme file

27

decreased by-90.78%

No dependency changes