From cf641b687a35468fefaf0593d6e253108b30285f Mon Sep 17 00:00:00 2001 From: Rohan Dey Date: Tue, 22 Jan 2019 15:59:53 +0530 Subject: [PATCH] Added FusionTime Integration section --- src/app/app.component.html | 104 +++++++++++++++++++++++++++++++++- src/app/app.component.ts | 92 +++++++++++++++--------------- src/app/quickstart-snippet.ts | 11 +++- 3 files changed, 156 insertions(+), 51 deletions(-) diff --git a/src/app/app.component.html b/src/app/app.component.html index bf4c6ac..583cfb0 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -687,10 +687,10 @@ -

In the template

+

In the template

-
-
+
+
@@ -712,6 +712,104 @@
+
+
+
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. +

+
+
+
+
+
+ Setup for FusionTime + +
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+
+ Component code + +
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+
+ Template Code + +
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 89404da..53b124e 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,56 +1,56 @@ -import {Component, ViewEncapsulation} from '@angular/core'; -import { Router } from "@angular/router"; +import { Component, ViewEncapsulation } from '@angular/core'; +import { Router } from '@angular/router'; import '../../node_modules/prismjs/prism.js'; import 'codemirror/mode/javascript/javascript'; import 'codemirror/mode/xml/xml'; -import CodeSnippets from "./quickstart-snippet"; +import CodeSnippets from './quickstart-snippet'; import SelectedSingleton from './fusioncharts/services/selected.singleton'; import SampleCode from './fusioncharts/samplecode'; @Component({ - selector: 'app', - styleUrls: [ - './app.component.css', - '../../node_modules/prismjs/themes/prism.css', - './themes/fusioncharts.theme.fusion.css', - './themes/github-css/codemirror.css', - './themes/github-css/dracula.css', - './themes/github-css/style.css' - ], - encapsulation: ViewEncapsulation.None, - templateUrl: './app.component.html', + selector: 'app', + styleUrls: [ + './app.component.css', + '../../node_modules/prismjs/themes/prism.css', + './themes/fusioncharts.theme.fusion.css', + './themes/github-css/codemirror.css', + './themes/github-css/dracula.css', + './themes/github-css/style.css' + ], + encapsulation: ViewEncapsulation.None, + templateUrl: './app.component.html' }) export class AppComponent { - - installCode = CodeSnippets.installCode; - installFusionCharts = CodeSnippets.installFusionCharts; - includeInModule = CodeSnippets.importCode; - useDirective = CodeSnippets.useDirective; - renderFusionMaps = CodeSnippets.renderFusionMaps; - mapHtml = CodeSnippets.mapHtml; - - modalClasses = 'show fade in'; - isModalOpen = false; - - sampleCode = SampleCode; - selectedTitle = ''; - - toggleModal = (state) => { - this.isModalOpen = state; - } - - openPage = (route) =>{ - this.isModalOpen = false; - this.router.navigate([route]); - } - - constructor(private router:Router){ - SelectedSingleton.on = (value) => { - this.selectedTitle = value; - } - } - - updateId (id) { - - } + installCode = CodeSnippets.installCode; + installFusionCharts = CodeSnippets.installFusionCharts; + includeInModule = CodeSnippets.importCode; + useDirective = CodeSnippets.useDirective; + renderFusionMaps = CodeSnippets.renderFusionMaps; + mapHtml = CodeSnippets.mapHtml; + setupFusionTime = CodeSnippets.setupFusionTime; + fusionTimeComponentCode = CodeSnippets.fusionTimeComponentCode; + fusionTimeTemplateCode = CodeSnippets.fusionTimeTemplateCode; + + modalClasses = 'show fade in'; + isModalOpen = false; + + sampleCode = SampleCode; + selectedTitle = ''; + + toggleModal = state => { + this.isModalOpen = state; + }; + + openPage = route => { + this.isModalOpen = false; + this.router.navigate([route]); + }; + + constructor(private router: Router) { + SelectedSingleton.on = value => { + this.selectedTitle = value; + }; + } + + updateId(id) {} } diff --git a/src/app/quickstart-snippet.ts b/src/app/quickstart-snippet.ts index 009b815..104a6d7 100644 --- a/src/app/quickstart-snippet.ts +++ b/src/app/quickstart-snippet.ts @@ -4,11 +4,18 @@ let installFusionCharts = '$ npm install fusioncharts --save'; let useDirective = `import { Component } from '@angular/core';\n\n@Component({\n selector: 'my-app',\n template: \`\n \n \`,\n})\nexport class AppComponent {\n data: Object;\n \n constructor() {\n this.data = {\n chart: { },\n data: [\n {value: 500},\n {value: 600},\n {value: 700}\n ]\n };\n }\n}`; let renderFusionMaps = `import { NgModule } from '@angular/core';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { AppComponent } from './app.component';\n\n// Import FusionChartsModule from angular-fusioncharts\nimport { FusionChartsModule } from 'angular-fusioncharts';\n\n// Import FusionCharts library\nimport * as FusionCharts from 'fusioncharts';\n\n\n// Load FusionCharts Maps module\nimport * as Maps from 'fusioncharts/fusioncharts.maps';\n\n// Load WorldMap map definition module\nimport * as World from 'fusioncharts/maps/fusioncharts.world';\n\n// Use FusionChartsModule.fcRoot(FusionCharts, [Comma separated modules])\nFusionChartsModule.fcRoot(FusionCharts, Maps, World)\n\n@NgModule({\n declarations: [\n AppComponent\n ],\n imports: [\n BrowserModule, \n FusionChartsModule // Include in the imports\n ],\n bootstrap: [AppComponent]\n})\nexport class AppModule { }`; let mapHtml = `\n\n`; +let setupFusionTime = `// app.module.ts\nimport { BrowserModule } from '@angular/platform-browser';\nimport { NgModule } from '@angular/core';\nimport { AppComponent } from './app.component';\n// Import angular-fusioncharts\nimport { FusionChartsModule } from 'angular-fusioncharts';\n// Import FusionCharts library and chart modules\nimport * as FusionCharts from 'fusioncharts';\nimport * as Charts from 'fusioncharts/fusioncharts.charts';\nimport * as TimeSeries from 'fusioncharts/fusioncharts.timeseries'; // Import timeseries\n// Pass the fusioncharts library and chart modules\nFusionChartsModule.fcRoot(FusionCharts, Charts, TimeSeries);\n@NgModule({\n declarations: [AppComponent],\n imports: [\n BrowserModule,\n // Specify FusionChartsModule as import\n FusionChartsModule\n ],\n providers: [],\n bootstrap: [AppComponent]\n})\nexport class AppModule {}`; +let fusionTimeComponentCode = `// In app.component.ts\nimport { Component } from '@angular/core';\nimport * as FusionCharts from 'fusioncharts';\nconst dataUrl =\n 'https://raw.githubusercontent.com/fusioncharts/dev_centre_docs/master/assets/datasources/fusiontime/online-sales-single-series-area-data-plot/data.json';\nconst schemaUrl =\n 'https://raw.githubusercontent.com/fusioncharts/dev_centre_docs/master/assets/datasources/fusiontime/online-sales-single-series-area-data-plot/schema.json';\n@Component({\n selector: 'app',\n templateUrl: './app.component.html'\n})\nexport class AppComponent {\n dataSource: any;\n type: string;\n width: string;\n height: string;\n constructor() {\n this.type = 'timeseries';\n this.width = '400';\n this.height = '400';\n this.dataSource = {\n data: null,\n yAxis: {\n plot: [{ value: 'Sales' }]\n },\n caption: {\n text: 'Online Sales of a SuperStore in the US'\n }\n };\n this.fetchData();\n }\n fetchData() {\n let jsonify = res => res.json();\n let dataFetch = fetch(dataUrl).then(jsonify);\n let schemaFetch = fetch(schemaUrl).then(jsonify);\n Promise.all([dataFetch, schemaFetch]).then(res => {\n let data = res[0];\n let schema = res[1];\n let fusionTable = new FusionCharts.DataStore().createDataTable(\n data,\n schema\n ); // Instance of DataTable to be passed as data in dataSource\n this.dataSource.data = fusionTable;\n });\n }\n}`; +let fusionTimeTemplateCode = `
\n \n
`; + export default { importCode, installCode, installFusionCharts, useDirective, renderFusionMaps, - mapHtml -} \ No newline at end of file + mapHtml, + setupFusionTime, + fusionTimeComponentCode, + fusionTimeTemplateCode +};