ng2-google-charts
Version:
Google Charts module for Angular 2 and beyond
801 lines (789 loc) • 34.3 kB
JavaScript
import { __awaiter } from 'tslib';
import * as i0 from '@angular/core';
import { EventEmitter, Directive, Output, LOCALE_ID, Injectable, Inject, Optional, ElementRef, Component, Input, NgModule } from '@angular/core';
class GoogleChartsDataTable {
constructor(opt) {
this.opt = opt;
this.dataTableChanged = new EventEmitter();
if (opt) {
this._setDataTable(opt.dataTable, opt.firstRowIsData);
}
}
send() {
if (this.query === undefined) {
return;
}
this.query.send((queryResponse) => {
this.setDataTable(queryResponse.getDataTable());
if (this.opt.queryCallback) {
this.opt.queryCallback(queryResponse);
}
});
}
init(opt) {
if (opt) {
this.opt = opt;
}
if (this.tid !== undefined) {
// doesn't work, see https://github.com/google/google-visualization-issues/issues/2381
// this.query.abort();
window.clearInterval(this.tid);
this.tid = undefined;
}
if (this.opt.dataSourceUrl) {
this.query = new google.visualization.Query(this.opt.dataSourceUrl);
if (this.opt.query) {
this.query.setQuery(this.opt.query);
}
if (this.opt.timeout !== undefined) {
this.query.setTimeout(this.opt.timeout);
}
if (this.opt.refreshInterval) {
// this.query.setRefreshInterval(this.opt.refreshInterval);
this.tid = window.setInterval(() => {
this.send();
}, this.opt.refreshInterval * 1000);
}
this.send();
}
else {
this.setDataTable(this.opt.dataTable);
}
}
/**
* @returns Underlying google.visualization.DataTable
*/
getDataTable() {
return this.dataTable;
}
setDataTable(dt, firstRowIsData) {
if (firstRowIsData === undefined) {
firstRowIsData = this.opt.firstRowIsData;
}
this._setDataTable(dt, firstRowIsData);
this.dataTableChanged.emit(this.dataTable);
}
_setDataTable(dt, firstRowIsData) {
if (Array.isArray(dt)) {
dt = google.visualization.arrayToDataTable(dt, firstRowIsData);
}
this.dataTable = dt;
this.reformat();
}
/**
* Applies formatters to data columns, if defined
*/
reformat() {
const dt = this.dataTable;
if (dt === undefined) {
return;
}
if (this.opt.formatters === undefined) {
return;
}
for (const formatterConfig of this.opt.formatters) {
let formatter;
if (formatterConfig.type === 'PatternFormat') {
const fmtOptions = formatterConfig.options;
formatter = new google.visualization.PatternFormat(fmtOptions.pattern);
formatter.format(dt, formatterConfig.columns, fmtOptions.dstColumnIndex);
continue;
}
const formatterConstructor = google.visualization[formatterConfig.type];
const formatterOptions = formatterConfig.options;
formatter = new formatterConstructor(formatterOptions);
if (formatterConfig.type === 'ColorFormat' && formatterOptions) {
const fmtOptions = formatterOptions;
if (fmtOptions.ranges) {
for (const range of fmtOptions.ranges) {
if (typeof (range.fromBgColor) !== 'undefined'
&& typeof (range.toBgColor) !== 'undefined') {
formatter.addGradientRange(range.from, range.to, range.color, range.fromBgColor, range.toBgColor);
}
else {
formatter.addRange(range.from, range.to, range.color, range.bgcolor);
}
}
}
}
for (const col of formatterConfig.columns) {
formatter.format(dt, col);
}
}
}
}
GoogleChartsDataTable.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: GoogleChartsDataTable, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
GoogleChartsDataTable.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.14", type: GoogleChartsDataTable, outputs: { dataTableChanged: "dataTableChanged" }, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: GoogleChartsDataTable, decorators: [{
type: Directive
}], ctorParameters: function () { return [{ type: undefined }]; }, propDecorators: { dataTableChanged: [{
type: Output
}] } });
class ChartHTMLTooltip {
constructor(el) {
this.el = el;
}
setPosition(x, y) {
this.el.nativeElement.style.left = x + ChartHTMLTooltip.PIXELS;
this.el.nativeElement.style.top = y + ChartHTMLTooltip.PIXELS;
}
getDOMElement() {
return this.el;
}
}
ChartHTMLTooltip.PIXELS = 'px';
class GoogleChartsLoaderService {
constructor(localeId, googleChartsSettings) {
this.googleChartsSettings = googleChartsSettings;
this.loadedPackages = [];
this.loaded = false;
const defaultSettings = {
googleChartsVersion: '50',
language: localeId,
};
this.googleChartsSettings = Object.assign(Object.assign({}, defaultSettings), this.googleChartsSettings);
this.googleScriptLoadingNotifier = new EventEmitter();
this.googleChartLoadingNotifier = new EventEmitter();
this.googleScriptIsLoading = false;
this.googleChartIsLoading = false;
this.loadGoogleChartsScriptPromise = new Promise((resolve, reject) => {
if (typeof google !== 'undefined' && google.charts) {
resolve();
}
else if (!this.googleScriptIsLoading) {
this.googleScriptIsLoading = true;
const script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://www.gstatic.com/charts/loader.js';
script.async = true;
script.defer = true;
script.onload = () => {
this.googleScriptIsLoading = false;
this.googleScriptLoadingNotifier.emit(true);
resolve();
};
script.onerror = () => {
this.googleScriptIsLoading = false;
this.googleScriptLoadingNotifier.emit(false);
reject();
};
document.getElementsByTagName('head')[0].appendChild(script);
}
else {
this.googleScriptLoadingNotifier.subscribe((loaded) => {
if (loaded) {
resolve();
}
else {
reject();
}
});
}
});
}
load(settings) {
return __awaiter(this, void 0, void 0, function* () {
yield this.loadGoogleChartsScriptPromise;
yield new Promise((resolve) => {
if (this.googleChartIsLoading) {
this.googleChartLoadingNotifier.subscribe(() => {
this.doLoad(resolve, settings);
});
return;
}
this.doLoad(resolve, settings);
});
});
}
doLoad(resolve, settings) {
settings = Object.assign(Object.assign({}, this.googleChartsSettings), settings);
if (!settings.packages && this.loaded) {
resolve();
return;
}
if (settings.packages) {
let pkgs = settings.packages.filter(p => this.loadedPackages.indexOf(p) < 0);
if (pkgs.length == 0 && this.loaded) {
resolve();
return;
}
settings.packages = pkgs;
}
const _settings = settings;
_settings.callback = () => {
this.googleChartIsLoading = false;
if (_settings.packages !== undefined) {
this.loadedPackages = this.loadedPackages.concat(_settings.packages);
}
this.loaded = true;
this.googleChartLoadingNotifier.emit();
resolve();
};
this.googleChartIsLoading = true;
google.charts.load(settings.googleChartsVersion, _settings);
}
}
GoogleChartsLoaderService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: GoogleChartsLoaderService, deps: [{ token: LOCALE_ID }, { token: 'googleChartsSettings', optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
GoogleChartsLoaderService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: GoogleChartsLoaderService, providedIn: 'root' });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: GoogleChartsLoaderService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root'
}]
}], ctorParameters: function () { return [{ type: undefined, decorators: [{
type: Inject,
args: [LOCALE_ID]
}] }, { type: undefined, decorators: [{
type: Inject,
args: ['googleChartsSettings']
}, {
type: Optional
}] }]; } });
var GoogleChartType;
(function (GoogleChartType) {
GoogleChartType["AnnotationChart"] = "AnnotationChart";
GoogleChartType["AreaChart"] = "AreaChart";
GoogleChartType["BarChart"] = "BarChart";
GoogleChartType["BubbleChart"] = "BubbleChart";
GoogleChartType["Calendar"] = "Calendar";
GoogleChartType["CandlestickChart"] = "CandlestickChart";
GoogleChartType["ColumnChart"] = "ColumnChart";
GoogleChartType["ComboChart"] = "ComboChart";
GoogleChartType["Gantt"] = "Gantt";
GoogleChartType["Gauge"] = "Gauge";
GoogleChartType["GeoChart"] = "GeoChart";
GoogleChartType["Histogram"] = "Histogram";
GoogleChartType["LineChart"] = "LineChart";
GoogleChartType["Map"] = "Map";
GoogleChartType["OrgChart"] = "OrgChart";
GoogleChartType["PieChart"] = "PieChart";
GoogleChartType["Sankey"] = "Sankey";
GoogleChartType["ScatterChart"] = "ScatterChart";
GoogleChartType["SteppedAreaChart"] = "SteppedAreaChart";
GoogleChartType["Table"] = "Table";
GoogleChartType["Timeline"] = "Timeline";
GoogleChartType["TreeMap"] = "TreeMap";
GoogleChartType["VegaChart"] = "VegaChart";
GoogleChartType["WordTree"] = "WordTree";
})(GoogleChartType || (GoogleChartType = {}));
class GoogleChartComponent {
constructor(el, loaderService) {
this.el = el;
this.loaderService = loaderService;
this.selectListener = () => {
const event = {
message: 'select',
row: null,
column: null,
selectedRowValues: [],
selectedRowFormattedValues: [],
columnLabel: ''
};
const s = this.wrapper.visualization.getSelection();
const gs = s[s.length - 1];
if (!gs) {
event.message = 'deselect';
return event;
}
const selection = gs;
if (gs.row != null) {
event.row = selection.row;
const selectedRowValues = [];
const selectedRowFormattedValues = [];
const dataTable = this.wrapper.getDataTable();
const numberOfColumns = dataTable.getNumberOfColumns();
for (let 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.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();
this.regionClick = new EventEmitter();
this.regionClickOneTime = new EventEmitter();
}
ngOnInit() {
this.HTMLel = this.el.nativeElement.querySelector('div');
if (Object.isExtensible(this.data)) {
this.data.component = this;
}
this.options = this.data.options;
this.init().then(() => {
this.draw();
});
}
init() {
return __awaiter(this, void 0, void 0, function* () {
yield this.loaderService.load();
this.recreateWrapper();
});
}
recreateWrapper() {
if (this.wrapper === undefined || this.wrapper.getChartType() !== this.data.chartType) {
this.dataTable = new GoogleChartsDataTable(this.data);
this.dataTable.dataTableChanged.subscribe((dt) => {
this._draw();
});
// see dataTable in https://developers.google.com/chart/interactive/docs/reference#google.visualization.drawchart
let temp = this.data;
if (this.data.firstRowIsData) {
temp = Object.assign(temp, this.data);
temp.dataTable = this.dataTable.getDataTable();
}
this.wrapper = new google.visualization.ChartWrapper(temp);
this.registerChartWrapperEvents();
/* Calling draw even without data is the only way to pass the HTMl element
when using the chart in a dashboard. Don't do this in all other cases:
it breaks formatters with remote data source, hence the conditional. */
if (temp.dataTable === undefined && temp.dataSourceUrl === undefined) {
try {
this.wrapper.draw(this.HTMLel);
}
catch (err) { }
}
}
}
_draw() {
return __awaiter(this, void 0, void 0, function* () {
const dt = this.dataTable.getDataTable();
if (dt === undefined) {
return;
}
this.convertOptions();
this.recreateWrapper();
this.wrapper.setOptions(this.options);
this.wrapper.setDataTable(dt);
this.wrapper.draw(this.HTMLel);
});
}
getDataTable() {
return this.dataTable;
}
draw(value) {
if (value === undefined) {
value = this.data;
}
this.options = value.options;
this.dataTable.init(value);
}
getSelectorBySeriesType(seriesType) {
const selectors = {
bars: 'bar#%s#%r',
haxis: 'hAxis#0#label',
line: 'point#%s#%r',
legend: 'legendentry#%s',
area: 'point#%s#%r'
};
const selector = selectors[seriesType];
return selector;
}
/**
* Given a column number, counts how many
* columns have rol=="data". Those are mapped
* one-to-one to the series array. When rol is not defined
* a column of type number means a series column.
* @param column to inspect
*/
getSeriesByColumn(column) {
let series = 0;
const dataTable = this.wrapper.getDataTable();
for (let i = column - 1; i >= 0; i--) {
const role = dataTable.getColumnRole(i);
const type = dataTable.getColumnType(i);
if (role === 'data' || type === 'number') {
series++;
}
}
return series;
}
getBoundingBoxForItem(item) {
let boundingBox = { top: 0, left: 0, width: 0, height: 0 };
if (this.cli) {
const column = item.column;
const series = this.getSeriesByColumn(column);
const row = item.row;
let seriesType = this.options.seriesType;
if (this.options.series && this.options.series[series] && this.options.series[series].type) {
seriesType = this.options.series[series].type;
}
if (seriesType) {
let selector = this.getSelectorBySeriesType(seriesType);
if (selector) {
selector = selector.replace('%s', series + '').replace('%c', column + '').replace('%r', row + '');
const box = this.cli.getBoundingBox(selector);
if (box) {
boundingBox = box;
}
}
}
}
return boundingBox;
}
getValueAtPosition(position) {
if (position.row == null) {
return null;
}
const dataTable = this.wrapper.getDataTable();
const value = dataTable.getValue(position.row, position.column);
return value;
}
getColumnTypeAtPosition(position) {
const dataTable = this.wrapper.getDataTable();
const type = dataTable.getColumnType(position.column) || '';
return type;
}
getColumnLabelAtPosition(position) {
const dataTable = this.wrapper.getDataTable();
const type = dataTable.getColumnLabel(position.column) || '';
return type;
}
getHTMLTooltip() {
const tooltipER = new ElementRef(this.el.nativeElement.querySelector('.google-visualization-tooltip'));
return new ChartHTMLTooltip(tooltipER);
}
parseMouseEvent(item) {
const chartType = this.wrapper.getChartType();
let eventColumn = item.column;
if (eventColumn == null) {
switch (chartType) {
case 'Timeline':
eventColumn = this.wrapper.getDataTable().getNumberOfColumns() === 3 ? 0 : 1;
break;
default:
eventColumn = 0;
}
}
const eventRow = item.row;
const myItem = {
row: eventRow,
column: eventColumn
};
const event = {
position: item,
boundingBox: this.getBoundingBoxForItem(myItem),
value: this.getValueAtPosition(myItem),
columnType: this.getColumnTypeAtPosition(myItem),
columnLabel: this.getColumnLabelAtPosition(myItem)
};
return event;
}
registerChartEvents() {
const chart = this.wrapper.getChart();
this.cli = chart.getChartLayoutInterface ? chart.getChartLayoutInterface() : null;
if (this.mouseOver.observers.length > 0) {
google.visualization.events.addListener(chart, 'onmouseover', (item) => {
const event = this.parseMouseEvent(item);
event.tooltip = this.getHTMLTooltip();
this.mouseOver.emit(event);
});
}
if (this.mouseOverOneTime.observers.length > 0) {
google.visualization.events.addOneTimeListener(chart, 'onmouseover', (item) => {
const event = this.parseMouseEvent(item);
event.tooltip = this.getHTMLTooltip();
this.mouseOverOneTime.emit(event);
});
}
if (this.mouseOut.observers.length > 0) {
google.visualization.events.addListener(chart, 'onmouseout', (item) => {
const event = this.parseMouseEvent(item);
this.mouseOut.emit(event);
});
}
if (this.mouseOutOneTime.observers.length > 0) {
google.visualization.events.addOneTimeListener(chart, 'onmouseout', (item) => {
const event = this.parseMouseEvent(item);
this.mouseOutOneTime.emit(event);
});
}
if (this.data.chartType === 'GeoChart') {
if (this.regionClick.observers.length > 0) {
google.visualization.events.addListener(chart, 'regionClick', (item) => {
this.regionClick.emit(item);
});
}
if (this.regionClickOneTime.observers.length > 0) {
google.visualization.events.addOneTimeListener(chart, 'regionClick', (item) => {
this.regionClick.emit(item);
});
}
}
}
registerChartWrapperEvents() {
google.visualization.events.addListener(this.wrapper, 'ready', () => {
this.chartReady.emit({ message: 'Chart ready' });
});
google.visualization.events.addOneTimeListener(this.wrapper, 'ready', () => {
this.chartReadyOneTime.emit({ message: 'Chart ready (one time)' });
this.registerChartEvents();
});
google.visualization.events.addListener(this.wrapper, 'error', (error) => {
this.chartError.emit(error);
});
google.visualization.events.addOneTimeListener(this.wrapper, 'error', (error) => {
this.chartErrorOneTime.emit(error);
});
this.addListener(this.wrapper, 'select', this.selectListener, this.chartSelect);
this.addOneTimeListener(this.wrapper, 'select', this.selectListener, this.chartSelectOneTime);
}
addListener(source, eventType, listenerFn, evEmitter) {
google.visualization.events.addListener(source, eventType, () => {
evEmitter.emit(listenerFn());
});
}
addOneTimeListener(source, eventType, listenerFn, evEmitter) {
google.visualization.events.addOneTimeListener(source, eventType, () => {
evEmitter.emit(listenerFn());
});
}
convertOptions() {
try {
this.options = google.charts[this.data.chartType].convertOptions(this.options);
}
catch (error) {
return;
}
}
}
GoogleChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: GoogleChartComponent, deps: [{ token: i0.ElementRef }, { token: GoogleChartsLoaderService }], target: i0.ɵɵFactoryTarget.Component });
GoogleChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.14", type: GoogleChartComponent, selector: "google-chart", inputs: { data: "data" }, outputs: { chartReady: "chartReady", chartReadyOneTime: "chartReadyOneTime", chartError: "chartError", chartErrorOneTime: "chartErrorOneTime", chartSelect: "chartSelect", chartSelectOneTime: "chartSelectOneTime", mouseOver: "mouseOver", mouseOverOneTime: "mouseOverOneTime", mouseOut: "mouseOut", mouseOutOneTime: "mouseOutOneTime", regionClick: "regionClick", regionClickOneTime: "regionClickOneTime" }, ngImport: i0, template: '<div></div>', isInline: true });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: GoogleChartComponent, decorators: [{
type: Component,
args: [{
selector: 'google-chart',
template: '<div></div>',
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: GoogleChartsLoaderService }]; }, propDecorators: { data: [{
type: Input
}], chartReady: [{
type: Output
}], chartReadyOneTime: [{
type: Output
}], chartError: [{
type: Output
}], chartErrorOneTime: [{
type: Output
}], chartSelect: [{
type: Output
}], chartSelectOneTime: [{
type: Output
}], mouseOver: [{
type: Output
}], mouseOverOneTime: [{
type: Output
}], mouseOut: [{
type: Output
}], mouseOutOneTime: [{
type: Output
}], regionClick: [{
type: Output
}], regionClickOneTime: [{
type: Output
}] } });
class GoogleChartsDashboardComponent {
constructor(el, loaderService) {
this.el = el;
this.loaderService = loaderService;
this.el = el;
this.loaderService = loaderService;
}
ngOnInit() {
this.data.component = this;
this.init().then(() => {
if (!this.dataTable) {
this.dataTable = new GoogleChartsDataTable(this.data);
this.dataTable.dataTableChanged.subscribe((dt) => {
this._draw();
});
}
this.draw();
});
}
init() {
return __awaiter(this, void 0, void 0, function* () {
yield this.loaderService.load({ packages: ['controls'] });
this.dashboard = new google.visualization.Dashboard(this.el.nativeElement.querySelector('div'));
for (const b of this.data.bind) {
let controls = b[0];
let charts = b[1];
if (!(controls instanceof Array)) {
controls = [controls];
}
if (!(charts instanceof Array)) {
charts = [charts];
}
for (const c of controls) {
yield c.component.ensureInit();
}
for (const c of charts) {
if (!c.component) {
continue;
}
yield c.component.init();
const data = c.component.data;
if (data.dataTable !== undefined || data.dataSourceUrl !== undefined) {
throw Error('dataTable and dataSourceUrl cannot be specified when ' +
'chart is drawn in a Dashboard');
}
}
this.dashboard.bind(controls.map(x => x.component.wrapper), charts.map(x => x.component.wrapper));
}
});
}
draw(value) {
this.dataTable.init(value);
}
_draw() {
this.dashboard.draw(this.dataTable.getDataTable());
}
}
GoogleChartsDashboardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: GoogleChartsDashboardComponent, deps: [{ token: i0.ElementRef }, { token: GoogleChartsLoaderService }], target: i0.ɵɵFactoryTarget.Component });
GoogleChartsDashboardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.14", type: GoogleChartsDashboardComponent, selector: "google-charts-dashboard", inputs: { data: "data" }, ngImport: i0, template: '<div></div>', isInline: true });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: GoogleChartsDashboardComponent, decorators: [{
type: Component,
args: [{
selector: 'google-charts-dashboard',
template: '<div></div>',
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: GoogleChartsLoaderService }]; }, propDecorators: { data: [{
type: Input
}] } });
class GoogleChartsControlComponent {
constructor(el, loaderService) {
this.el = el;
this.loaderService = loaderService;
this.el = el;
this.loaderService = loaderService;
}
ngOnInit() {
this.data.component = this;
}
ensureInit() {
return __awaiter(this, void 0, void 0, function* () {
if (this.wrapper) {
return;
}
yield this.loaderService.load({ packages: ['controls'] });
let opt;
opt = Object.create(this.data);
opt.containerId = this.el.nativeElement.querySelector('div');
this.wrapper = new google.visualization.ControlWrapper(opt);
});
}
}
GoogleChartsControlComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: GoogleChartsControlComponent, deps: [{ token: i0.ElementRef }, { token: GoogleChartsLoaderService }], target: i0.ɵɵFactoryTarget.Component });
GoogleChartsControlComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.14", type: GoogleChartsControlComponent, selector: "google-charts-control", inputs: { data: "data" }, ngImport: i0, template: '<div></div>', isInline: true });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: GoogleChartsControlComponent, decorators: [{
type: Component,
args: [{
selector: 'google-charts-control',
template: '<div></div>',
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: GoogleChartsLoaderService }]; }, propDecorators: { data: [{
type: Input
}] } });
class Ng2GoogleChartsModule {
}
Ng2GoogleChartsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: Ng2GoogleChartsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
Ng2GoogleChartsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: Ng2GoogleChartsModule, declarations: [GoogleChartComponent,
GoogleChartsDashboardComponent,
GoogleChartsControlComponent], exports: [GoogleChartComponent,
GoogleChartsDashboardComponent,
GoogleChartsControlComponent] });
Ng2GoogleChartsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: Ng2GoogleChartsModule, providers: [
GoogleChartsLoaderService
] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: Ng2GoogleChartsModule, decorators: [{
type: NgModule,
args: [{
declarations: [
GoogleChartComponent,
GoogleChartsDashboardComponent,
GoogleChartsControlComponent,
],
providers: [
GoogleChartsLoaderService
],
exports: [
GoogleChartComponent,
GoogleChartsDashboardComponent,
GoogleChartsControlComponent,
]
}]
}] });
function isComponent(chart) {
return chart.wrapper !== undefined;
}
class GoogleChartEditor {
constructor(loaderService) {
this.loaderService = loaderService;
}
createEditor() {
return __awaiter(this, void 0, void 0, function* () {
if (this.chartEditor !== undefined) {
return;
}
yield this.loaderService.load({ packages: ['charteditor'] });
this.chartEditor = new google.visualization.ChartEditor();
google.visualization.events.addListener(this.chartEditor, 'ok', () => {
const wrapper = this.chartEditor.getChartWrapper();
this.comp.wrapper = wrapper;
this.comp.data.chartType = wrapper.getChartType();
if (this.comp.data.options !== undefined || Object.isExtensible(this.comp.data)) {
this.comp.data.options = wrapper.getOptions();
}
this.comp.wrapper.draw();
});
});
}
openDialog(chart, options) {
return __awaiter(this, void 0, void 0, function* () {
yield this.createEditor();
return new Promise((resolve, reject) => {
this.comp = isComponent(chart) ? chart : chart.component;
google.visualization.events.addListener(this.chartEditor, 'ok', () => {
resolve(this.comp.wrapper);
});
google.visualization.events.addListener(this.chartEditor, 'cancel', () => {
reject();
});
this.chartEditor.openDialog(this.comp.wrapper, options);
});
});
}
}
GoogleChartEditor.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: GoogleChartEditor, deps: [{ token: GoogleChartsLoaderService }], target: i0.ɵɵFactoryTarget.Injectable });
GoogleChartEditor.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: GoogleChartEditor, providedIn: 'root' });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: GoogleChartEditor, decorators: [{
type: Injectable,
args: [{
providedIn: 'root'
}]
}], ctorParameters: function () { return [{ type: GoogleChartsLoaderService }]; } });
/*
* Public API Surface of ng2-google-charts
*/
/**
* Generated bundle index. Do not edit.
*/
export { ChartHTMLTooltip, GoogleChartComponent, GoogleChartEditor, GoogleChartType, GoogleChartsControlComponent, GoogleChartsDashboardComponent, GoogleChartsLoaderService, Ng2GoogleChartsModule };
//# sourceMappingURL=ng2-google-charts.js.map