Skip to content

Commit 8c8acbc

Browse files
ashok1994ashok1994
committedDec 24, 2018
Merge branch 'release/3.0.0'
2 parents adb57c1 + f50f34c commit 8c8acbc

34 files changed

+514
-947
lines changed
 

‎README.md

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ A simple and lightweight official Angular component for FusionCharts JavaScript
2323
- [Working with events](#working-with-events)
2424
- [Quick Start](#quick-start)
2525
- [Going Beyond Charts](#going-beyond-charts)
26+
- [Usage and Integration of FusionTime](#usage-and-integration-of-fusionTime)
2627
- [For Contributors](#for-contributors)
2728
- [Licensing](#licensing)
2829

@@ -255,6 +256,109 @@ export class AppComponent {
255256

256257
```
257258

259+
## Usage and integration of FusionTime
260+
261+
From `fusioncharts@3.13.3-sr.1` and `angular-fusioncharts@3.0.0`, You can visualize timeseries data easily with angular.
262+
263+
Learn more about FusionTime [here](https://www.fusioncharts.com/fusiontime).
264+
265+
### Setup for FusionTime
266+
267+
```typescript
268+
// app.module.ts
269+
import { BrowserModule } from '@angular/platform-browser';
270+
import { NgModule } from '@angular/core';
271+
import { AppComponent } from './app.component';
272+
// Import angular-fusioncharts
273+
import { FusionChartsModule } from 'angular-fusioncharts';
274+
// Import FusionCharts library and chart modules
275+
import * as FusionCharts from 'fusioncharts';
276+
import * as Charts from 'fusioncharts/fusioncharts.charts';
277+
import * as TimeSeries from 'fusioncharts/fusioncharts.timeseries'; // Import timeseries
278+
// Pass the fusioncharts library and chart modules
279+
FusionChartsModule.fcRoot(FusionCharts, Charts, TimeSeries);
280+
@NgModule({
281+
declarations: [AppComponent],
282+
imports: [
283+
BrowserModule,
284+
// Specify FusionChartsModule as import
285+
FusionChartsModule
286+
],
287+
providers: [],
288+
bootstrap: [AppComponent]
289+
})
290+
export class AppModule {}
291+
```
292+
293+
### Component code
294+
295+
```typescript
296+
// In app.component.ts
297+
import { Component } from '@angular/core';
298+
import * as FusionCharts from 'fusioncharts';
299+
const dataUrl =
300+
'https://raw.githubusercontent.com/fusioncharts/dev_centre_docs/fusiontime-beta-release/charts-resources/fusiontime/online-sales-single-series/data.json';
301+
const schemaUrl =
302+
'https://raw.githubusercontent.com/fusioncharts/dev_centre_docs/fusiontime-beta-release/charts-resources/fusiontime/online-sales-single-series/schema.json';
303+
@Component({
304+
selector: 'app',
305+
templateUrl: './app.component.html'
306+
})
307+
export class AppComponent {
308+
dataSource: any;
309+
type: string;
310+
width: string;
311+
height: string;
312+
constructor() {
313+
this.type = 'timeseries';
314+
this.width = '400';
315+
this.height = '400';
316+
this.dataSource = {
317+
data: null,
318+
yAxis: {
319+
plot: [{ value: 'Sales' }]
320+
},
321+
caption: {
322+
text: 'Online Sales of a SuperStore in the US'
323+
}
324+
};
325+
this.fetchData();
326+
}
327+
fetchData() {
328+
let jsonify = res => res.json();
329+
let dataFetch = fetch(dataUrl).then(jsonify);
330+
let schemaFetch = fetch(schemaUrl).then(jsonify);
331+
Promise.all([dataFetch, schemaFetch]).then(res => {
332+
let data = res[0];
333+
let schema = res[1];
334+
let fusionTable = new FusionCharts.DataStore().createDataTable(
335+
data,
336+
schema
337+
); // Instance of DataTable to be passed as data in dataSource
338+
this.dataSource.data = fusionTable;
339+
});
340+
}
341+
}
342+
```
343+
344+
### Template Code
345+
346+
```html
347+
<div>
348+
<fusioncharts
349+
[type]="type"
350+
[width]="width"
351+
[height]="height"
352+
[dataSource]="dataSource"
353+
></fusioncharts>
354+
</div>
355+
```
356+
357+
Useful links for FusionTime
358+
359+
- [How FusionTime works](https://www.fusioncharts.com/dev/fusiontime/getting-started/how-fusion-time-works)
360+
- [Create your first chart](https://www.fusioncharts.com/dev/fusiontime/getting-started/create-your-first-chart-in-fusiontime)
361+
258362
## For Contributors
259363

260364
- Clone the repository and install dependencies

‎dist/README.md

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ A simple and lightweight official Angular component for FusionCharts JavaScript
2323
- [Working with events](#working-with-events)
2424
- [Quick Start](#quick-start)
2525
- [Going Beyond Charts](#going-beyond-charts)
26+
- [Usage and Integration of FusionTime](#usage-and-integration-of-fusionTime)
2627
- [For Contributors](#for-contributors)
2728
- [Licensing](#licensing)
2829

@@ -255,6 +256,109 @@ export class AppComponent {
255256

256257
```
257258

259+
## Usage and integration of FusionTime
260+
261+
From `fusioncharts@3.13.3-sr.1` and `angular-fusioncharts@3.0.0`, You can visualize timeseries data easily with angular.
262+
263+
Learn more about FusionTime [here](https://www.fusioncharts.com/fusiontime).
264+
265+
### Setup for FusionTime
266+
267+
```typescript
268+
// app.module.ts
269+
import { BrowserModule } from '@angular/platform-browser';
270+
import { NgModule } from '@angular/core';
271+
import { AppComponent } from './app.component';
272+
// Import angular-fusioncharts
273+
import { FusionChartsModule } from 'angular-fusioncharts';
274+
// Import FusionCharts library and chart modules
275+
import * as FusionCharts from 'fusioncharts';
276+
import * as Charts from 'fusioncharts/fusioncharts.charts';
277+
import * as TimeSeries from 'fusioncharts/fusioncharts.timeseries'; // Import timeseries
278+
// Pass the fusioncharts library and chart modules
279+
FusionChartsModule.fcRoot(FusionCharts, Charts, TimeSeries);
280+
@NgModule({
281+
declarations: [AppComponent],
282+
imports: [
283+
BrowserModule,
284+
// Specify FusionChartsModule as import
285+
FusionChartsModule
286+
],
287+
providers: [],
288+
bootstrap: [AppComponent]
289+
})
290+
export class AppModule {}
291+
```
292+
293+
### Component code
294+
295+
```typescript
296+
// In app.component.ts
297+
import { Component } from '@angular/core';
298+
import * as FusionCharts from 'fusioncharts';
299+
const dataUrl =
300+
'https://raw.githubusercontent.com/fusioncharts/dev_centre_docs/fusiontime-beta-release/charts-resources/fusiontime/online-sales-single-series/data.json';
301+
const schemaUrl =
302+
'https://raw.githubusercontent.com/fusioncharts/dev_centre_docs/fusiontime-beta-release/charts-resources/fusiontime/online-sales-single-series/schema.json';
303+
@Component({
304+
selector: 'app',
305+
templateUrl: './app.component.html'
306+
})
307+
export class AppComponent {
308+
dataSource: any;
309+
type: string;
310+
width: string;
311+
height: string;
312+
constructor() {
313+
this.type = 'timeseries';
314+
this.width = '400';
315+
this.height = '400';
316+
this.dataSource = {
317+
data: null,
318+
yAxis: {
319+
plot: [{ value: 'Sales' }]
320+
},
321+
caption: {
322+
text: 'Online Sales of a SuperStore in the US'
323+
}
324+
};
325+
this.fetchData();
326+
}
327+
fetchData() {
328+
let jsonify = res => res.json();
329+
let dataFetch = fetch(dataUrl).then(jsonify);
330+
let schemaFetch = fetch(schemaUrl).then(jsonify);
331+
Promise.all([dataFetch, schemaFetch]).then(res => {
332+
let data = res[0];
333+
let schema = res[1];
334+
let fusionTable = new FusionCharts.DataStore().createDataTable(
335+
data,
336+
schema
337+
); // Instance of DataTable to be passed as data in dataSource
338+
this.dataSource.data = fusionTable;
339+
});
340+
}
341+
}
342+
```
343+
344+
### Template Code
345+
346+
```html
347+
<div>
348+
<fusioncharts
349+
[type]="type"
350+
[width]="width"
351+
[height]="height"
352+
[dataSource]="dataSource"
353+
></fusioncharts>
354+
</div>
355+
```
356+
357+
Useful links for FusionTime
358+
359+
- [How FusionTime works](https://www.fusioncharts.com/dev/fusiontime/getting-started/how-fusion-time-works)
360+
- [Create your first chart](https://www.fusioncharts.com/dev/fusiontime/getting-started/create-your-first-chart-in-fusiontime)
361+
258362
## For Contributors
259363

260364
- Clone the repository and install dependencies

‎dist/dist/index.js

Lines changed: 56 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -424,8 +424,55 @@ var FusionChartsComponent = /** @class */ (function () {
424424
this.containerId = fusionchartsService.getNextItemCount();
425425
}
426426
// @ViewChild('samplediv') chartContainer: ElementRef;
427+
FusionChartsComponent.prototype.checkIfDataTableExists = function (dataSource) {
428+
if (dataSource && dataSource.data && dataSource.data._dataStore) {
429+
return true;
430+
}
431+
return false;
432+
};
433+
FusionChartsComponent.prototype.cloneDataSource = function (obj) {
434+
var type = typeof obj;
435+
if (type === 'string' ||
436+
type === 'number' ||
437+
type === 'function' ||
438+
type === 'boolean') {
439+
return obj;
440+
}
441+
if (obj === null || obj === undefined) {
442+
return obj;
443+
}
444+
if (Array.isArray(obj)) {
445+
var arr = [];
446+
for (var i = 0; i < obj.length; i++) {
447+
arr.push(this.cloneDataSource(obj[i]));
448+
}
449+
return arr;
450+
}
451+
if (typeof obj === 'object') {
452+
var clonedObj = {};
453+
for (var prop in obj) {
454+
// Edge case handling for DataTable
455+
if (prop === 'data') {
456+
if (obj[prop]._dataStore) {
457+
clonedObj[prop] = '-';
458+
}
459+
else {
460+
clonedObj[prop] = this.cloneDataSource(obj[prop]);
461+
}
462+
continue;
463+
}
464+
clonedObj[prop] = this.cloneDataSource(obj[prop]);
465+
}
466+
return clonedObj;
467+
}
468+
};
427469
FusionChartsComponent.prototype.ngOnInit = function () {
428-
this.oldDataSource = JSON.stringify(this.dataSource);
470+
if (this.checkIfDataTableExists(this.dataSource)) {
471+
this.oldDataSource = JSON.stringify(this.cloneDataSource(this.dataSource));
472+
}
473+
else {
474+
this.oldDataSource = JSON.stringify(this.dataSource);
475+
}
429476
this.placeholder = this.placeholder || 'FusionCharts will render here';
430477
};
431478
FusionChartsComponent.prototype.ngOnChanges = function (changes) {
@@ -438,7 +485,13 @@ var FusionChartsComponent = /** @class */ (function () {
438485
}
439486
};
440487
FusionChartsComponent.prototype.ngDoCheck = function () {
441-
var data = JSON.stringify(this.dataSource);
488+
var data;
489+
if (this.checkIfDataTableExists(this.dataSource)) {
490+
data = JSON.stringify(this.cloneDataSource(this.dataSource));
491+
}
492+
else {
493+
data = JSON.stringify(this.dataSource);
494+
}
442495
if (this.oldDataSource === data) {
443496
}
444497
else {
@@ -471,23 +524,6 @@ var FusionChartsComponent = /** @class */ (function () {
471524
this.chartObj.chartType(this.type);
472525
}
473526
};
474-
/*
475-
// Removed as some events will be fired
476-
attachChartEventListener(chartObj: any, eventName: string){
477-
chartObj.addEventListener(eventName, (eventObj:any, dataObj:any) => {
478-
let fEventObj:FusionChartsEvent = { eventObj:{}, dataObj:{} };
479-
if(eventObj) fEventObj.eventObj = eventObj;
480-
if(dataObj) fEventObj.dataObj = dataObj;
481-
this[eventName].emit(fEventObj);
482-
});
483-
}
484-
485-
attachAllChartEvents(chartObj:any, eventList:Array<string>){
486-
eventList.forEach(eventName => {
487-
this.attachChartEventListener(chartObj, eventName);
488-
});
489-
}
490-
*/
491527
FusionChartsComponent.prototype.generateEventsCallback = function (eventList$$1) {
492528
var _this_1 = this;
493529
var events = {};
@@ -542,7 +578,7 @@ var FusionChartsComponent = /** @class */ (function () {
542578
FusionChartsComponent.decorators = [
543579
{ type: _angular_core.Component, args: [{
544580
selector: 'fusioncharts',
545-
template: "\n <div attr.id=\"container-{{containerId}}\" style=\"width:100%;height:100%\">\n {{ placeholder }}\n </div>\n ",
581+
template: "\n <div attr.id=\"container-{{ containerId }}\" style=\"width:100%;height:100%\">\n {{ placeholder }}\n </div>\n ",
546582
providers: [FusionChartsService]
547583
},] },
548584
];

‎dist/dist/index.min.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/package.json

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "angular-fusioncharts",
3-
"version": "2.0.4",
3+
"version": "3.0.0",
44
"repository": {
55
"type": "git",
66
"url": "https://github.com/fusioncharts/angular-fusioncharts"
@@ -24,14 +24,14 @@
2424
"name": "Ashok Mandal",
2525
"email": "askipop@gmail.com",
2626
"url": "https://github.com/ashok1994"
27+
},
28+
{
29+
"name": "Rohan Dey",
30+
"email": "rohanoid5@gmail.com",
31+
"url": "https://github.com/rohanoid5"
2732
}
2833
],
29-
"keywords": [
30-
"angular",
31-
"angular2",
32-
"angular 2",
33-
"FusionCharts"
34-
],
34+
"keywords": ["angular", "angular2", "angular 2", "FusionCharts"],
3535
"license": "MIT",
3636
"bugs": {
3737
"url": "https://github.com/fusioncharts/angular-fusioncharts/issues"

‎dist/src/fusioncharts.component.d.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ declare class FusionChartsComponent implements OnInit, OnChanges, DoCheck, After
77
private zone;
88
chartObj: any;
99
placeholder: string;
10-
dataSource: Object;
10+
dataSource: any;
1111
type: string;
1212
id: string;
1313
width: string;
@@ -211,6 +211,8 @@ declare class FusionChartsComponent implements OnInit, OnChanges, DoCheck, After
211211
element: ElementRef;
212212
fusionchartsService: FusionChartsService;
213213
constructor(element: ElementRef, fusionchartsService: FusionChartsService, differs: KeyValueDiffers, zone: NgZone);
214+
checkIfDataTableExists(dataSource: any): boolean;
215+
cloneDataSource(obj: any): any;
214216
ngOnInit(): void;
215217
ngOnChanges(changes: any): void;
216218
ngDoCheck(): void;

0 commit comments

Comments
 (0)