Skip to content

Added FusionTime Integration section #54

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jan 22, 2019
Merged

Added FusionTime Integration section #54

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
104 changes: 101 additions & 3 deletions src/app/app.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -687,10 +687,10 @@
</div>
</div>
</div>
<p class="code-desc">In the template</p>
<p class="code-desc pt-1">In the template</p>
<div class="row">
<div class="col-12 pt-1">
<div class="code-view mt-2">
<div class="col-12">
<div class="code-view">
<div class="card-shadow">
<div class="card-body p-0">
<div class="code-panel">
Expand All @@ -712,6 +712,104 @@
</div>
</div>

<div class="row">
<div class="col">
<div class="h2 mt-2">Usage and integration of FusionTime</div>
</div>
</div>
<div class="row">
<div class="col-12">
<p class="code-desc">From <code>fusioncharts@3.13.3-sr.1</code> and <code>angular-fusioncharts@3.0.0</code>, You can visualize timeseries data easily with angular.
</p>
</div>
</div>
<div class="row">
<div class="col-12 pt-3">
<div class="h5">
<span>Setup for FusionTime
</span>
</div>
</div>
<div class="col-12">
<div class="code-view mt-2">
<div class="card-shadow">
<div class="card-body p-0">
<div class="code-panel">
<div class="codeMirrorDiv" id="c3">
<codemirror [(ngModel)]="setupFusionTime" [config]="{
lineNumbers: true,
theme:'dracula',
tabSize: '4',
smartIndent: true,
readOnly: true,
mode:'javascript'
}">
</codemirror>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12 pt-3">
<div class="h5">
<span>Component code
</span>
</div>
</div>
<div class="col-12">
<div class="code-view mt-2">
<div class="card-shadow">
<div class="card-body p-0">
<div class="code-panel">
<div class="codeMirrorDiv" id="c3">
<codemirror [(ngModel)]="fusionTimeComponentCode" [config]="{
lineNumbers: true,
theme:'dracula',
tabSize: '4',
smartIndent: true,
readOnly: true,
mode:'javascript'
}">
</codemirror>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12 pt-3">
<div class="h5">
<span>Template Code
</span>
</div>
</div>
<div class="col-12">
<div class="code-view mt-2">
<div class="card-shadow">
<div class="card-body p-0">
<div class="code-panel">
<div class="codeMirrorDiv" id="c3">
<codemirror [(ngModel)]="fusionTimeTemplateCode" [config]="{
lineNumbers: true,
theme:'dracula',
tabSize: '4',
smartIndent: true,
readOnly: true,
mode:'htmlembedded'
}">
</codemirror>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

<div class="row">
<div class="col-12 pt-3">
Expand Down
92 changes: 46 additions & 46 deletions src/app/app.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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) {}
}
11 changes: 9 additions & 2 deletions src/app/quickstart-snippet.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: \`<fusioncharts\n width="500" \n height="300"\n type="column2d"\n dataFormat="json"\n [dataSource]="data" >\n </fusioncharts>\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 = `<!-- in app.component.html -->\n<fusioncharts\n type="world"\n width="800"\n height="500"\n dataFormat="json">\n</fusioncharts>`;
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 = `<div>\n <fusioncharts\n [type]="type"\n [width]="width"\n [height]="height"\n [dataSource]="dataSource"\n ></fusioncharts>\n</div>`;

export default {
importCode,
installCode,
installFusionCharts,
useDirective,
renderFusionMaps,
mapHtml
}
mapHtml,
setupFusionTime,
fusionTimeComponentCode,
fusionTimeTemplateCode
};