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
+};