angular2-google-chart - npm Package Compare versions

Comparing version 2.2.5 to 2.3.0

directives/angular2-google-chart.directive.js

@@ -24,2 +24,5 @@ System.register(["@angular/core"], function (exports_1, context_1) {
                     this.element = element;
+                    this.loadingDelay = 0;
+                    this.itemSelect = new core_1.EventEmitter();
+                    this.itemDeselect = new core_1.EventEmitter();
                     this._element = this.element.nativeElement;
@@ -33,9 +36,12 @@ }
                     }
-                    setTimeout(function () { return _this.drawGraph(_this.chartOptions, _this.chartType, _this.chartData, _this._element); }, 1000);
+                    setTimeout(function () { return _this.drawGraph(_this.chartOptions, _this.chartType, _this.chartData, _this._element); }, this.loadingDelay);
                 };
+                GoogleChart.prototype.onResize = function (event) {
+                    this.drawGraph(this.chartOptions, this.chartType, this.chartData, this._element);
+                };
                 GoogleChart.prototype.drawGraph = function (chartOptions, chartType, chartData, ele) {
                     google.charts.setOnLoadCallback(drawChart);
+                    var self = this;
                     function drawChart() {
-                        var wrapper;
-                        wrapper = new google.visualization.ChartWrapper({
+                        var wrapper = new google.visualization.ChartWrapper({
                             chartType: chartType,
@@ -46,2 +52,24 @@ dataTable: chartData,
                         wrapper.draw(ele);
+                        google.visualization.events.addListener(wrapper, 'select', function () {
+                            var selectedItem = wrapper.getChart().getSelection()[0];
+                            if (selectedItem) {
+                                var msg = void 0;
+                                if (selectedItem !== undefined) {
+                                    var selectedRowValues = [];
+                                    if (selectedItem.row !== null) {
+                                        selectedRowValues.push(wrapper.getDataTable().getValue(selectedItem.row, 0));
+                                        selectedRowValues.push(wrapper.getDataTable().getValue(selectedItem.row, selectedItem.column));
+                                        msg = {
+                                            message: 'select',
+                                            row: selectedItem.row,
+                                            column: selectedItem.column,
+                                            selectedRowValues: selectedRowValues
+                                        };
+                                    }
+                                }
+                                self.itemSelect.emit(msg);
+                            }
+                            else
+                                self.itemDeselect.emit();
+                        });
                     }
@@ -60,5 +88,23 @@ };
             __decorate([
+                core_1.Input('loadingDelay'),
+                __metadata("design:type", Object)
+            ], GoogleChart.prototype, "loadingDelay", void 0);
+            __decorate([
                 core_1.Input('chartData'),
                 __metadata("design:type", Object)
             ], GoogleChart.prototype, "chartData", void 0);
+            __decorate([
+                core_1.Output('itemSelect'),
+                __metadata("design:type", core_1.EventEmitter)
+            ], GoogleChart.prototype, "itemSelect", void 0);
+            __decorate([
+                core_1.Output('itemDeselect'),
+                __metadata("design:type", core_1.EventEmitter)
+            ], GoogleChart.prototype, "itemDeselect", void 0);
+            __decorate([
+                core_1.HostListener('window:resize'),
+                __metadata("design:type", Function),
+                __metadata("design:paramtypes", [Event]),
+                __metadata("design:returntype", void 0)
+            ], GoogleChart.prototype, "onResize", null);
             GoogleChart = __decorate([
@@ -65,0 +111,0 @@ core_1.Directive({

directives/angular2-google-chart.directive.ts

@@ -1,38 +0,67 @@
-
-import {Directive, ElementRef, Input, OnChanges} from '@angular/core';
-declare let google: any;
+import {Directive, ElementRef, Input, Output, OnChanges, EventEmitter, HostBinding, HostListener} from '@angular/core';
+declare const google: any;
 declare let googleLoaded: any;
-declare let googleChartsPackagesToLoad: any;
+declare const googleChartsPackagesToLoad: any;
 @Directive({
-  selector: '[GoogleChart]'
+    selector: '[GoogleChart]'
 })
+export class GoogleChart implements OnChanges {
+    public _element: any;
+    @Input('chartType') public chartType: string;
+    @Input('chartOptions') public chartOptions: Object;
+    @Input('loadingDelay') public loadingDelay = 0;
+    @Input('chartData') public chartData: Object;
+    @Output('itemSelect') public itemSelect: EventEmitter<{ row: number, column: number }> = new EventEmitter();
+    @Output('itemDeselect') public itemDeselect: EventEmitter<void> = new EventEmitter<void>();
 
-export class GoogleChart implements OnChanges {
-  public _element: any;
-  @Input('chartType') public chartType: string;
-  @Input('chartOptions') public chartOptions: Object;
-  @Input('chartData') public chartData: Object;
-  constructor(public element: ElementRef) {
-    this._element = this.element.nativeElement;
-  }
-  ngOnChanges() {
-    if (!googleLoaded) {
-      googleLoaded = true;
-      google.charts.load('current', { 'packages': ['corechart', 'gauge']['orgchart'] });
+    constructor(public element: ElementRef) {
+        this._element = this.element.nativeElement;
     }
-    setTimeout(() => this.drawGraph(this.chartOptions, this.chartType, this.chartData, this._element), 1000);
-  }
-  drawGraph(chartOptions, chartType, chartData, ele) {
-    google.charts.setOnLoadCallback(drawChart);
-    function drawChart() {
-      var wrapper;
-      wrapper = new google.visualization.ChartWrapper({
-        chartType: chartType,
-        dataTable: chartData,
-        options: chartOptions || {}
-      });
-      wrapper.draw(ele);
 
+    ngOnChanges() {
+        if (!googleLoaded) {
+            googleLoaded = true;
+            google.charts.load('current', {'packages': ['corechart', 'gauge']['orgchart']});
+        }
+        setTimeout(() => this.drawGraph(this.chartOptions, this.chartType, this.chartData, this._element), this.loadingDelay);
     }
-  }
-}
+
+    @HostListener('window:resize') onResize(event: Event) {
+        this.drawGraph(this.chartOptions, this.chartType, this.chartData, this._element);
+    }
+
+    drawGraph(chartOptions, chartType, chartData, ele) {
+        google.charts.setOnLoadCallback(drawChart);
+        const self = this;
+
+        function drawChart() {
+            const wrapper = new google.visualization.ChartWrapper({
+                chartType: chartType,
+                dataTable: chartData,
+                options: chartOptions || {}
+            });
+            wrapper.draw(ele);
+            google.visualization.events.addListener(wrapper, 'select', function () {
+                const selectedItem = wrapper.getChart().getSelection()[0];
+                if (selectedItem) {
+                    let msg;
+                    if (selectedItem !== undefined) {
+                        const selectedRowValues = [];
+                        if (selectedItem.row !== null) {
+                            selectedRowValues.push(wrapper.getDataTable().getValue(selectedItem.row, 0));
+                            selectedRowValues.push(wrapper.getDataTable().getValue(selectedItem.row, selectedItem.column));
+                            msg = {
+                                message: 'select',
+                                row: selectedItem.row,
+                                column: selectedItem.column,
+                                selectedRowValues: selectedRowValues
+                            };
+                        }
+                    }
+                    self.itemSelect.emit(msg);
+                } else
+                    self.itemDeselect.emit();
+            });
+        }
+    }
+}

example/app.component.js

@@ -190,2 +190,8 @@ /*
                 }
+                AppComponent.prototype.itemSelected = function (event) {
+                    alert(JSON.stringify(event));
+                };
+                AppComponent.prototype.itemDeselected = function (event) {
+                    alert("DESELECTED");
+                };
                 return AppComponent;
@@ -196,3 +202,3 @@ }());
                     selector: 'my-app',
-                    template: "\n    <h2>  Gaugh Chart</h2>\n    <div id=\"gauge_chart\" [chartData]=\"gauge_ChartData\" [chartOptions]= \"gauge_ChartOptions\" chartType=\"Gauge\" GoogleChart></div>\n    <h2>  Area Chart</h2>\n    <div id=\"area_chart\" [chartData]=\"area_ChartData\" [chartOptions]= \"area_ChartOptions\" chartType=\"AreaChart\" GoogleChart></div>\n    <h2>  Line Chart</h2>\n    <div id=\"line_chart\" [chartData]=\"line_ChartData\" [chartOptions]= \"line_ChartOptions\" chartType=\"LineChart\" GoogleChart></div>\n    <h2>  Bubble Chart</h2>\n    <div id=\"bubble_chart\" [chartData]=\"bubble_ChartData\"  [chartOptions] = \"bubble_ChartOptions\" chartType=\"BubbleChart\" GoogleChart></div>\n    <h2>  Scatter Chart</h2>\n    <div id=\"scatter_chart\" [chartData]=\"scatter_ChartData\"  [chartOptions] = \"scatter_ChartOptions\" chartType=\"ScatterChart\" GoogleChart></div>\n    <h2>  CandlestickChart</h2>\n    <div id=\"candle_chart\" [chartData]=\"candle_ChartData\" [chartOptions] = \"candle_ChartOptions\" chartType=\"CandlestickChart\" GoogleChart></div>\n    <h2>  Pie Chart</h2>\n    <div id=\"pie_chart\" [chartData]=\"pie_ChartData\" [chartOptions] = \"pie_ChartOptions\" chartType=\"PieChart\" GoogleChart></div>\n    <h2>  Bar Chart</h2>\n    <div id=\"bar_chart\" [chartData]=\"bar_ChartData\" [chartOptions] = \"bar_ChartOptions\" chartType=\"BarChart\" GoogleChart></div>\n    <h2>  Map Chart</h2>\n    <div id=\"map_chart\" [chartData]=\"map_ChartData\" [chartOptions] = \"map_ChartOptions\" chartType=\"GeoChart\" GoogleChart></div>\n    <h2>  Organization Chart</h2>\n    <div id=\"org_chart\" [chartData]=\"org_ChartData\" [chartOptions] = \"org_ChartOptions\" chartType=\"OrgChart\" GoogleChart></div>\n\n\t"
+                    template: "\n    <h2>  Gaugh Chart</h2>\n    <div id=\"gauge_chart\" [chartData]=\"gauge_ChartData\" [chartOptions]= \"gauge_ChartOptions\" chartType=\"Gauge\" GoogleChart></div>\n    <h2>  Area Chart</h2>\n    <div id=\"area_chart\" (itemSelect)=\"itemSelected($event)\" (itemDeselect)=\"itemDeselected($event)\" [chartData]=\"area_ChartData\" [chartOptions]= \"area_ChartOptions\" chartType=\"AreaChart\" GoogleChart></div>\n    <h2>  Line Chart</h2>\n    <div id=\"line_chart\" (itemSelect)=\"itemSelected($event)\" (itemDeselect)=\"itemDeselected($event)\" [chartData]=\"line_ChartData\" [chartOptions]= \"line_ChartOptions\" chartType=\"LineChart\" GoogleChart></div>\n    <h2>  Bubble Chart</h2>\n    <div id=\"bubble_chart\" (itemSelect)=\"itemSelected($event)\" (itemDeselect)=\"itemDeselected($event)\" [chartData]=\"bubble_ChartData\"  [chartOptions] = \"bubble_ChartOptions\" chartType=\"BubbleChart\" GoogleChart></div>\n    <h2>  Scatter Chart</h2>\n    <div id=\"scatter_chart\" (itemSelect)=\"itemSelected($event)\" (itemDeselect)=\"itemDeselected($event)\" [chartData]=\"scatter_ChartData\"  [chartOptions] = \"scatter_ChartOptions\" chartType=\"ScatterChart\" GoogleChart></div>\n    <h2>  CandlestickChart</h2>\n    <div id=\"candle_chart\" (itemSelect)=\"itemSelected($event)\" (itemDeselect)=\"itemDeselected($event)\" [chartData]=\"candle_ChartData\" [chartOptions] = \"candle_ChartOptions\" chartType=\"CandlestickChart\" GoogleChart></div>\n    <h2>  Pie Chart</h2>\n    <div id=\"pie_chart\" (itemSelect)=\"itemSelected($event)\" (itemDeselect)=\"itemDeselected($event)\" [chartData]=\"pie_ChartData\" [chartOptions] = \"pie_ChartOptions\" chartType=\"PieChart\" GoogleChart></div>\n    <h2>  Bar Chart</h2>\n    <div id=\"bar_chart\" (itemSelect)=\"itemSelected($event)\" (itemDeselect)=\"itemDeselected($event)\" [chartData]=\"bar_ChartData\" [chartOptions] = \"bar_ChartOptions\" chartType=\"BarChart\" GoogleChart></div>\n    <h2>  Map Chart</h2>\n    <div id=\"map_chart\" (itemSelect)=\"itemSelected($event)\" (itemDeselect)=\"itemDeselected($event)\" [chartData]=\"map_ChartData\" [chartOptions] = \"map_ChartOptions\" chartType=\"GeoChart\" GoogleChart></div>\n    <h2>  Organization Chart</h2>\n    <div id=\"org_chart\" (itemSelect)=\"itemSelected($event)\" (itemDeselect)=\"itemDeselected($event)\" [chartData]=\"org_ChartData\" [chartOptions] = \"org_ChartOptions\" chartType=\"OrgChart\" GoogleChart></div>\n\n\t"
                 })
@@ -199,0 +205,0 @@ ], AppComponent);

example/app.component.ts

@@ -12,19 +12,19 @@ /*
     <h2>  Area Chart</h2>
-    <div id="area_chart" [chartData]="area_ChartData" [chartOptions]= "area_ChartOptions" chartType="AreaChart" GoogleChart></div>
+    <div id="area_chart" (itemSelect)="itemSelected($event)" (itemDeselect)="itemDeselected($event)" [chartData]="area_ChartData" [chartOptions]= "area_ChartOptions" chartType="AreaChart" GoogleChart></div>
     <h2>  Line Chart</h2>
-    <div id="line_chart" [chartData]="line_ChartData" [chartOptions]= "line_ChartOptions" chartType="LineChart" GoogleChart></div>
+    <div id="line_chart" (itemSelect)="itemSelected($event)" (itemDeselect)="itemDeselected($event)" [chartData]="line_ChartData" [chartOptions]= "line_ChartOptions" chartType="LineChart" GoogleChart></div>
     <h2>  Bubble Chart</h2>
-    <div id="bubble_chart" [chartData]="bubble_ChartData"  [chartOptions] = "bubble_ChartOptions" chartType="BubbleChart" GoogleChart></div>
+    <div id="bubble_chart" (itemSelect)="itemSelected($event)" (itemDeselect)="itemDeselected($event)" [chartData]="bubble_ChartData"  [chartOptions] = "bubble_ChartOptions" chartType="BubbleChart" GoogleChart></div>
     <h2>  Scatter Chart</h2>
-    <div id="scatter_chart" [chartData]="scatter_ChartData"  [chartOptions] = "scatter_ChartOptions" chartType="ScatterChart" GoogleChart></div>
+    <div id="scatter_chart" (itemSelect)="itemSelected($event)" (itemDeselect)="itemDeselected($event)" [chartData]="scatter_ChartData"  [chartOptions] = "scatter_ChartOptions" chartType="ScatterChart" GoogleChart></div>
     <h2>  CandlestickChart</h2>
-    <div id="candle_chart" [chartData]="candle_ChartData" [chartOptions] = "candle_ChartOptions" chartType="CandlestickChart" GoogleChart></div>
+    <div id="candle_chart" (itemSelect)="itemSelected($event)" (itemDeselect)="itemDeselected($event)" [chartData]="candle_ChartData" [chartOptions] = "candle_ChartOptions" chartType="CandlestickChart" GoogleChart></div>
     <h2>  Pie Chart</h2>
-    <div id="pie_chart" [chartData]="pie_ChartData" [chartOptions] = "pie_ChartOptions" chartType="PieChart" GoogleChart></div>
+    <div id="pie_chart" (itemSelect)="itemSelected($event)" (itemDeselect)="itemDeselected($event)" [chartData]="pie_ChartData" [chartOptions] = "pie_ChartOptions" chartType="PieChart" GoogleChart></div>
     <h2>  Bar Chart</h2>
-    <div id="bar_chart" [chartData]="bar_ChartData" [chartOptions] = "bar_ChartOptions" chartType="BarChart" GoogleChart></div>
+    <div id="bar_chart" (itemSelect)="itemSelected($event)" (itemDeselect)="itemDeselected($event)" [chartData]="bar_ChartData" [chartOptions] = "bar_ChartOptions" chartType="BarChart" GoogleChart></div>
     <h2>  Map Chart</h2>
-    <div id="map_chart" [chartData]="map_ChartData" [chartOptions] = "map_ChartOptions" chartType="GeoChart" GoogleChart></div>
+    <div id="map_chart" (itemSelect)="itemSelected($event)" (itemDeselect)="itemDeselected($event)" [chartData]="map_ChartData" [chartOptions] = "map_ChartOptions" chartType="GeoChart" GoogleChart></div>
     <h2>  Organization Chart</h2>
-    <div id="org_chart" [chartData]="org_ChartData" [chartOptions] = "org_ChartOptions" chartType="OrgChart" GoogleChart></div>
+    <div id="org_chart" (itemSelect)="itemSelected($event)" (itemDeselect)="itemDeselected($event)" [chartData]="org_ChartData" [chartOptions] = "org_ChartOptions" chartType="OrgChart" GoogleChart></div>
 
@@ -93,11 +93,11 @@ `
     ];
-     public org_ChartData = [
+    public org_ChartData = [
         ['Name', 'Manager', 'ToolTip'],
-         [{v:'Mike', f:'Mike<div style="color:red; font-style:italic">President</div>'},
-           '', 'The President'],
-          [{v:'Jim', f:'Jim<div style="color:red; font-style:italic">Vice President</div>'},
-           'Mike', 'VP'],
-          ['Alice', 'Mike', ''],
-          ['Bob', 'Jim', 'Bob Sponge'],
-          ['Carol', 'Bob', '']
+        [{v: 'Mike', f: 'Mike<div style="color:red; font-style:italic">President</div>'},
+            '', 'The President'],
+        [{v: 'Jim', f: 'Jim<div style="color:red; font-style:italic">Vice President</div>'},
+            'Mike', 'VP'],
+        ['Alice', 'Mike', ''],
+        ['Bob', 'Jim', 'Bob Sponge'],
+        ['Carol', 'Bob', '']
     ];
@@ -114,5 +114,5 @@ public line_ChartOptions = {
         'and population of some world countries (2010)',
-        hAxis: { title: 'Life Expectancy' },
-        vAxis: { title: 'Fertility Rate' },
-        bubble: { textStyle: { fontSize: 11 } }
+        hAxis: {title: 'Life Expectancy'},
+        vAxis: {title: 'Fertility Rate'},
+        bubble: {textStyle: {fontSize: 11}}
 
@@ -122,6 +122,6 @@ };
         legend: 'none',
-        bar: { groupWidth: '100%' }, // Remove space between bars.
+        bar: {groupWidth: '100%'}, // Remove space between bars.
         candlestick: {
-            fallingColor: { strokeWidth: 0, fill: '#a52714' }, // red
-            risingColor: { strokeWidth: 0, fill: '#0f9d58' }   // green
+            fallingColor: {strokeWidth: 0, fill: '#a52714'}, // red
+            risingColor: {strokeWidth: 0, fill: '#0f9d58'}   // green
         }
@@ -137,3 +137,3 @@ };
         title: 'Population of Largest U.S. Cities',
-        chartArea: { width: '50%' },
+        chartArea: {width: '50%'},
         hAxis: {
@@ -192,9 +192,17 @@ title: 'Total Population',
         title: 'Company Performance',
-        hAxis: { title: 'Year', titleTextStyle: { color: '#333' } },
-        vAxis: { minValue: 0 }
+        hAxis: {title: 'Year', titleTextStyle: {color: '#333'}},
+        vAxis: {minValue: 0}
     };
     public map_ChartOptions = {};
     public org_ChartOptions = {
-        allowHtml:true
+        allowHtml: true
     };
-}
+
+    itemSelected(event) {
+        alert(JSON.stringify(event));
+    }
+
+    itemDeselected(event) {
+        alert("DESELECTED");
+    }
+}

package.json

 {
   "name": "angular2-google-chart",
-  "version": "2.2.5",
+  "version": "2.3.0",
   "description": "google chart directive for angular2",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

@@ -6,2 +6,4 @@ # Angular2/ Angular 4
 The sources for this package are in (<https://github.com/vimalavinisha/angular2-google-chart>) repo. Please file issues and pull requests against this repo.
+## Recently added Features:
+  Event listener added  when user select/deselect on the chart points. It is an optional.
 
@@ -16,4 +18,2 @@ ## Demo Output
 npm install angular2-google-chart
-bower install
-bower install google-chart
 ```
@@ -20,0 +20,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

734006

increased by1.07%

Lines of code

759

increased by12.61%

No dependency changes