Feature/timeseries support revisited

README.md

@@ -23,6 +23,7 @@ A simple and lightweight official Angular component for FusionCharts JavaScript
   - [Working with events](#working-with-events)
 - [Quick Start](#quick-start)
 - [Going Beyond Charts](#going-beyond-charts)
+- [Usage and Integration of FusionTime](#usage-and-integration-of-fusionTime)
 - [For Contributors](#for-contributors)
 - [Licensing](#licensing)
 
@@ -255,6 +256,109 @@ export class AppComponent {
 
 ```
 
+## Usage and integration of FusionTime
+
+From `fusioncharts@3.13.3-sr.1` and `angular-fusioncharts@3.0.0`, You can visualize timeseries data easily with angular.
+
+Learn more about FusionTime [here](https://www.fusioncharts.com/fusiontime).
+
+### Setup for FusionTime
+
+```typescript
+// app.module.ts
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+import { AppComponent } from './app.component';
+// Import angular-fusioncharts
+import { FusionChartsModule } from 'angular-fusioncharts';
+// Import FusionCharts library and chart modules
+import * as FusionCharts from 'fusioncharts';
+import * as Charts from 'fusioncharts/fusioncharts.charts';
+import * as TimeSeries from 'fusioncharts/fusioncharts.timeseries'; // Import timeseries
+// Pass the fusioncharts library and chart modules
+FusionChartsModule.fcRoot(FusionCharts, Charts, TimeSeries);
+@NgModule({
+  declarations: [AppComponent],
+  imports: [
+    BrowserModule,
+    // Specify FusionChartsModule as import
+    FusionChartsModule
+  ],
+  providers: [],
+  bootstrap: [AppComponent]
+})
+export class AppModule {}
+```
+
+### Component code
+
+```typescript
+// In app.component.ts
+import { Component } from '@angular/core';
+import * as FusionCharts from 'fusioncharts';
+const dataUrl =
+  'https://raw.githubusercontent.com/fusioncharts/dev_centre_docs/fusiontime-beta-release/charts-resources/fusiontime/online-sales-single-series/data.json';
+const schemaUrl =
+  'https://raw.githubusercontent.com/fusioncharts/dev_centre_docs/fusiontime-beta-release/charts-resources/fusiontime/online-sales-single-series/schema.json';
+@Component({
+  selector: 'app',
+  templateUrl: './app.component.html'
+})
+export class AppComponent {
+  dataSource: any;
+  type: string;
+  width: string;
+  height: string;
+  constructor() {
+    this.type = 'timeseries';
+    this.width = '400';
+    this.height = '400';
+    this.dataSource = {
+      data: null,
+      yAxis: {
+        plot: [{ value: 'Sales' }]
+      },
+      caption: {
+        text: 'Online Sales of a SuperStore in the US'
+      }
+    };
+    this.fetchData();
+  }
+  fetchData() {
+    let jsonify = res => res.json();
+    let dataFetch = fetch(dataUrl).then(jsonify);
+    let schemaFetch = fetch(schemaUrl).then(jsonify);
+    Promise.all([dataFetch, schemaFetch]).then(res => {
+      let data = res[0];
+      let schema = res[1];
+      let fusionTable = new FusionCharts.DataStore().createDataTable(
+        data,
+        schema
+      ); // Instance of DataTable to be passed as data in dataSource
+      this.dataSource.data = fusionTable;
+    });
+  }
+}
+```
+
+### Template Code
+
+```html
+<div>
+  <fusioncharts
+    [type]="type"
+    [width]="width"
+    [height]="height"
+    [dataSource]="dataSource"
+  ></fusioncharts>
+</div>
+```
+
+Useful links for FusionTime
+
+- [How FusionTime works](https://www.fusioncharts.com/dev/fusiontime/getting-started/how-fusion-time-works)
+- [Create your first chart](https://www.fusioncharts.com/dev/fusiontime/getting-started/create-your-first-chart-in-fusiontime)
+
 ## For Contributors
 
 - Clone the repository and install dependencies

dist/README.md

@@ -23,6 +23,7 @@ A simple and lightweight official Angular component for FusionCharts JavaScript
   - [Working with events](#working-with-events)
 - [Quick Start](#quick-start)
 - [Going Beyond Charts](#going-beyond-charts)
+- [Usage and Integration of FusionTime](#usage-and-integration-of-fusionTime)
 - [For Contributors](#for-contributors)
 - [Licensing](#licensing)
 
@@ -255,6 +256,109 @@ export class AppComponent {
 
 ```
 
+## Usage and integration of FusionTime
+
+From `fusioncharts@3.13.3-sr.1` and `angular-fusioncharts@3.0.0`, You can visualize timeseries data easily with angular.
+
+Learn more about FusionTime [here](https://www.fusioncharts.com/fusiontime).
+
+### Setup for FusionTime
+
+```typescript
+// app.module.ts
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+import { AppComponent } from './app.component';
+// Import angular-fusioncharts
+import { FusionChartsModule } from 'angular-fusioncharts';
+// Import FusionCharts library and chart modules
+import * as FusionCharts from 'fusioncharts';
+import * as Charts from 'fusioncharts/fusioncharts.charts';
+import * as TimeSeries from 'fusioncharts/fusioncharts.timeseries'; // Import timeseries
+// Pass the fusioncharts library and chart modules
+FusionChartsModule.fcRoot(FusionCharts, Charts, TimeSeries);
+@NgModule({
+  declarations: [AppComponent],
+  imports: [
+    BrowserModule,
+    // Specify FusionChartsModule as import
+    FusionChartsModule
+  ],
+  providers: [],
+  bootstrap: [AppComponent]
+})
+export class AppModule {}
+```
+
+### Component code
+
+```typescript
+// In app.component.ts
+import { Component } from '@angular/core';
+import * as FusionCharts from 'fusioncharts';
+const dataUrl =
+  'https://raw.githubusercontent.com/fusioncharts/dev_centre_docs/fusiontime-beta-release/charts-resources/fusiontime/online-sales-single-series/data.json';
+const schemaUrl =
+  'https://raw.githubusercontent.com/fusioncharts/dev_centre_docs/fusiontime-beta-release/charts-resources/fusiontime/online-sales-single-series/schema.json';
+@Component({
+  selector: 'app',
+  templateUrl: './app.component.html'
+})
+export class AppComponent {
+  dataSource: any;
+  type: string;
+  width: string;
+  height: string;
+  constructor() {
+    this.type = 'timeseries';
+    this.width = '400';
+    this.height = '400';
+    this.dataSource = {
+      data: null,
+      yAxis: {
+        plot: [{ value: 'Sales' }]
+      },
+      caption: {
+        text: 'Online Sales of a SuperStore in the US'
+      }
+    };
+    this.fetchData();
+  }
+  fetchData() {
+    let jsonify = res => res.json();
+    let dataFetch = fetch(dataUrl).then(jsonify);
+    let schemaFetch = fetch(schemaUrl).then(jsonify);
+    Promise.all([dataFetch, schemaFetch]).then(res => {
+      let data = res[0];
+      let schema = res[1];
+      let fusionTable = new FusionCharts.DataStore().createDataTable(
+        data,
+        schema
+      ); // Instance of DataTable to be passed as data in dataSource
+      this.dataSource.data = fusionTable;
+    });
+  }
+}
+```
+
+### Template Code
+
+```html
+<div>
+  <fusioncharts
+    [type]="type"
+    [width]="width"
+    [height]="height"
+    [dataSource]="dataSource"
+  ></fusioncharts>
+</div>
+```
+
+Useful links for FusionTime
+
+- [How FusionTime works](https://www.fusioncharts.com/dev/fusiontime/getting-started/how-fusion-time-works)
+- [Create your first chart](https://www.fusioncharts.com/dev/fusiontime/getting-started/create-your-first-chart-in-fusiontime)
+
 ## For Contributors
 
 - Clone the repository and install dependencies

dist/dist/index.js

@@ -424,8 +424,55 @@ var FusionChartsComponent = /** @class */ (function () {
         this.containerId = fusionchartsService.getNextItemCount();
     }
     // @ViewChild('samplediv') chartContainer: ElementRef;
+    FusionChartsComponent.prototype.checkIfDataTableExists = function (dataSource) {
+        if (dataSource && dataSource.data && dataSource.data._dataStore) {
+            return true;
+        }
+        return false;
+    };
+    FusionChartsComponent.prototype.cloneDataSource = function (obj) {
+        var type = typeof obj;
+        if (type === 'string' ||
+            type === 'number' ||
+            type === 'function' ||
+            type === 'boolean') {
+            return obj;
+        }
+        if (obj === null || obj === undefined) {
+            return obj;
+        }
+        if (Array.isArray(obj)) {
+            var arr = [];
+            for (var i = 0; i < obj.length; i++) {
+                arr.push(this.cloneDataSource(obj[i]));
+            }
+            return arr;
+        }
+        if (typeof obj === 'object') {
+            var clonedObj = {};
+            for (var prop in obj) {
+                // Edge case handling for DataTable
+                if (prop === 'data') {
+                    if (obj[prop]._dataStore) {
+                        clonedObj[prop] = '-';
+                    }
+                    else {
+                        clonedObj[prop] = this.cloneDataSource(obj[prop]);
+                    }
+                    continue;
+                }
+                clonedObj[prop] = this.cloneDataSource(obj[prop]);
+            }
+            return clonedObj;
+        }
+    };
     FusionChartsComponent.prototype.ngOnInit = function () {
-        this.oldDataSource = JSON.stringify(this.dataSource);
+        if (this.checkIfDataTableExists(this.dataSource)) {
+            this.oldDataSource = JSON.stringify(this.cloneDataSource(this.dataSource));
+        }
+        else {
+            this.oldDataSource = JSON.stringify(this.dataSource);
+        }
         this.placeholder = this.placeholder || 'FusionCharts will render here';
     };
     FusionChartsComponent.prototype.ngOnChanges = function (changes) {
@@ -438,7 +485,13 @@ var FusionChartsComponent = /** @class */ (function () {
         }
     };
     FusionChartsComponent.prototype.ngDoCheck = function () {
-        var data = JSON.stringify(this.dataSource);
+        var data;
+        if (this.checkIfDataTableExists(this.dataSource)) {
+            data = JSON.stringify(this.cloneDataSource(this.dataSource));
+        }
+        else {
+            data = JSON.stringify(this.dataSource);
+        }
         if (this.oldDataSource === data) {
         }
         else {
@@ -471,23 +524,6 @@ var FusionChartsComponent = /** @class */ (function () {
             this.chartObj.chartType(this.type);
         }
     };
-    /*
-      // Removed as some events will be fired
-      attachChartEventListener(chartObj: any, eventName: string){
-          chartObj.addEventListener(eventName, (eventObj:any, dataObj:any) => {
-              let fEventObj:FusionChartsEvent = { eventObj:{}, dataObj:{} };
-              if(eventObj) fEventObj.eventObj  = eventObj;
-              if(dataObj) fEventObj.dataObj = dataObj;
-              this[eventName].emit(fEventObj);
-          });
-      }
-
-      attachAllChartEvents(chartObj:any, eventList:Array<string>){
-          eventList.forEach(eventName => {
-              this.attachChartEventListener(chartObj, eventName);
-          });
-      }
-      */
     FusionChartsComponent.prototype.generateEventsCallback = function (eventList$$1) {
         var _this_1 = this;
         var events = {};
@@ -542,7 +578,7 @@ var FusionChartsComponent = /** @class */ (function () {
     FusionChartsComponent.decorators = [
         { type: _angular_core.Component, args: [{
                     selector: 'fusioncharts',
-                    template: "\n    <div attr.id=\"container-{{containerId}}\" style=\"width:100%;height:100%\">\n      {{ placeholder }}\n    </div>\n  ",
+                    template: "\n    <div attr.id=\"container-{{ containerId }}\" style=\"width:100%;height:100%\">\n      {{ placeholder }}\n    </div>\n  ",
                     providers: [FusionChartsService]
                 },] },
     ];

dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "angular-fusioncharts",
-  "version": "2.0.4",
+  "version": "3.0.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/fusioncharts/angular-fusioncharts"
@@ -24,14 +24,14 @@
       "name": "Ashok Mandal",
       "email": "askipop@gmail.com",
       "url": "https://github.com/ashok1994"
+    },
+    {
+      "name": "Rohan Dey",
+      "email": "rohanoid5@gmail.com",
+      "url": "https://github.com/rohanoid5"
     }
   ],
-  "keywords": [
-    "angular",
-    "angular2",
-    "angular 2",
-    "FusionCharts"
-  ],
+  "keywords": ["angular", "angular2", "angular 2", "FusionCharts"],
   "license": "MIT",
   "bugs": {
     "url": "https://github.com/fusioncharts/angular-fusioncharts/issues"

dist/src/fusioncharts.component.d.ts

@@ -7,7 +7,7 @@ declare class FusionChartsComponent implements OnInit, OnChanges, DoCheck, After
     private zone;
     chartObj: any;
     placeholder: string;
-    dataSource: Object;
+    dataSource: any;
     type: string;
     id: string;
     width: string;
@@ -211,6 +211,8 @@ declare class FusionChartsComponent implements OnInit, OnChanges, DoCheck, After
     element: ElementRef;
     fusionchartsService: FusionChartsService;
     constructor(element: ElementRef, fusionchartsService: FusionChartsService, differs: KeyValueDiffers, zone: NgZone);
+    checkIfDataTableExists(dataSource: any): boolean;
+    cloneDataSource(obj: any): any;
     ngOnInit(): void;
     ngOnChanges(changes: any): void;
     ngDoCheck(): void;