├── src ├── app │ ├── tabs │ │ ├── app.ts │ │ ├── tabs.component.css │ │ ├── tabs.component.html │ │ ├── tabs.interface.ts │ │ ├── tab.component.ts │ │ └── tabs.component.ts │ ├── fusioncharts │ │ ├── ex.css │ │ ├── codepreview.ts │ │ ├── services │ │ │ └── selected.singleton.ts │ │ ├── ex1 │ │ │ ├── ex1.html │ │ │ └── ex1.ts │ │ ├── ex22 │ │ │ ├── ex22.html │ │ │ └── ex22.ts │ │ ├── ex2 │ │ │ ├── ex2.html │ │ │ └── ex2.ts │ │ ├── ex3 │ │ │ ├── ex3.html │ │ │ └── ex3.ts │ │ ├── ex5a │ │ │ ├── ex5a.html │ │ │ └── ex5a.ts │ │ ├── ex5 │ │ │ ├── ex5.html │ │ │ └── ex5.ts │ │ ├── tabbedComponent │ │ │ └── tabbed.code.component.ts │ │ ├── ex13 │ │ │ ├── ex13.html │ │ │ └── ex13.ts │ │ ├── ex12 │ │ │ ├── ex12.html │ │ │ └── ex12.ts │ │ ├── ex14 │ │ │ ├── ex14.html │ │ │ └── ex14.ts │ │ ├── ex4 │ │ │ ├── ex4.html │ │ │ └── ex4.ts │ │ ├── ex32 │ │ │ ├── ex32.html │ │ │ └── ex32.ts │ │ ├── ex26 │ │ │ ├── ex26.html │ │ │ └── ex26.ts │ │ ├── ex27 │ │ │ ├── ex27.html │ │ │ └── ex27.ts │ │ ├── ex28 │ │ │ ├── ex28.html │ │ │ └── ex28.ts │ │ ├── ex29 │ │ │ ├── ex29.html │ │ │ └── ex29.ts │ │ ├── ex30 │ │ │ ├── ex30.html │ │ │ └── ex30.ts │ │ ├── ex31 │ │ │ ├── ex31.html │ │ │ └── ex31.ts │ │ ├── ex33 │ │ │ └── ex33.html │ │ ├── ex34 │ │ │ └── ex34.html │ │ ├── ex35 │ │ │ └── ex35.html │ │ ├── ex36 │ │ │ ├── ex36.html │ │ │ └── ex36.ts │ │ ├── ex11 │ │ │ └── ex11.html │ │ ├── ex16 │ │ │ └── ex16.html │ │ ├── ex15 │ │ │ ├── ex15.html │ │ │ └── ex15.ts │ │ ├── ex23 │ │ │ ├── ex23.html │ │ │ └── ex23.ts │ │ ├── ex7 │ │ │ ├── ex7.html │ │ │ └── ex7.ts │ │ ├── fusioncharts.component.ts │ │ ├── ex6 │ │ │ ├── ex6.html │ │ │ └── ex6.ts │ │ ├── ex19 │ │ │ ├── ex19.html │ │ │ └── ex19.ts │ │ ├── ex9 │ │ │ ├── ex9.html │ │ │ └── ex9.ts │ │ ├── ex25 │ │ │ ├── ex25.html │ │ │ └── ex25.ts │ │ ├── ex17 │ │ │ ├── ex17.html │ │ │ └── ex17.ts │ │ ├── ex8 │ │ │ ├── ex8.html │ │ │ └── ex8.ts │ │ ├── ex10 │ │ │ └── ex10.html │ │ ├── ex21 │ │ │ ├── ex21.ts │ │ │ └── ex21.html │ │ ├── ex18 │ │ │ └── ex18.ts │ │ ├── ex24 │ │ │ └── ex24.ts │ │ └── ex20 │ │ │ ├── ex20.ts │ │ │ └── ex20.html │ ├── observable │ │ ├── observable.component.html │ │ └── observable.component.ts │ ├── fusiontime │ │ └── fusiontime.html │ ├── pipes │ │ └── trustAsHtml.ts │ ├── themes │ │ ├── fusioncharts.theme.fusion.css │ │ └── github-css │ │ │ └── dracula.css │ ├── app.component.ts │ └── app.component.css ├── assets │ ├── .gitkeep │ ├── images │ │ ├── ng-fc-logo.png │ │ ├── angular.svg │ │ └── fc-min-logo.svg │ ├── data │ │ ├── data.xml │ │ └── data.json │ └── github-theme │ │ └── css │ │ └── dracula.css ├── environments │ ├── environment.prod.ts │ └── environment.ts ├── favicon.ico ├── typings.d.ts ├── angular-fusioncharts │ ├── interfaces │ │ ├── FusionChartInstance.ts │ │ └── FusionChartsEvent.ts │ ├── src │ │ ├── getModuleFn.ts │ │ ├── fusioncharts.directive.ts │ │ ├── fusioncharts.pipe.ts │ │ ├── fusioncharts.constructor.ts │ │ └── fusioncharts.service.ts │ ├── index.ts │ └── events │ │ └── events.ts ├── tsconfig.spec.json ├── main.ts ├── index.html ├── tsconfig.app.json ├── styles.css ├── test.ts └── polyfills.ts ├── examples ├── ng-app-17 │ ├── src │ │ ├── assets │ │ │ └── .gitkeep │ │ ├── app │ │ │ ├── app.component.css │ │ │ ├── app.routes.ts │ │ │ ├── app.component.html │ │ │ ├── app.config.ts │ │ │ ├── app.component.spec.ts │ │ │ └── app.component.ts │ │ ├── styles.css │ │ ├── favicon.ico │ │ ├── main.ts │ │ └── index.html │ ├── tsconfig.app.json │ ├── tsconfig.spec.json │ ├── .editorconfig │ ├── tsconfig.json │ ├── README.md │ ├── package.json │ └── angular.json └── ng-app-18 │ ├── src │ ├── app │ │ ├── app.component.css │ │ ├── app.routes.ts │ │ ├── app.component.html │ │ ├── app.config.ts │ │ ├── app.component.spec.ts │ │ └── app.component.ts │ ├── styles.css │ ├── main.ts │ └── index.html │ ├── public │ └── favicon.ico │ ├── .editorconfig │ ├── tsconfig.app.json │ ├── tsconfig.spec.json │ ├── tsconfig.json │ ├── README.md │ ├── package.json │ └── angular.json ├── .vscode └── settings.json ├── dist ├── src │ ├── getModuleFn.d.ts │ ├── fusioncharts.constructor.d.ts │ ├── getModuleFn.js │ ├── fusioncharts.constructor.js │ ├── fusioncharts.directive.d.ts │ ├── fusioncharts.pipe.d.ts │ ├── getModuleFn.js.map │ ├── fusioncharts.directive.js.map │ ├── fusioncharts.constructor.js.map │ ├── fusioncharts.pipe.js.map │ ├── fusioncharts.service.d.ts │ ├── fusioncharts.directive.js │ ├── fusioncharts.pipe.js │ ├── fusioncharts.service.js │ └── fusioncharts.service.js.map ├── events │ ├── events.d.ts │ └── events.js ├── interfaces │ ├── FusionChartsEvent.js │ ├── FusionChartInstance.js │ ├── FusionChartInstance.d.ts │ ├── FusionChartsEvent.d.ts │ ├── FusionChartInstance.js.map │ └── FusionChartsEvent.js.map ├── package.json ├── LICENSE.md ├── index.d.ts ├── index.js.map └── index.js ├── .editorconfig ├── rollup.config.js ├── .npmignore ├── .browserslistrc ├── tsconfig.json ├── .gitignore ├── protractor.conf.js ├── tsconfig-aot.json ├── package-dist.json ├── LICENSE.md ├── .angular-cli.json ├── karma.conf.js ├── package.json └── tslint.json /src/app/tabs/app.ts: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/app/tabs/tabs.component.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/app/tabs/tabs.component.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/ng-app-17/src/assets/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/ng-app-17/src/app/app.component.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/ng-app-18/src/app/app.component.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/app/fusioncharts/ex.css: -------------------------------------------------------------------------------- 1 | /* tab style */ 2 | -------------------------------------------------------------------------------- /src/app/observable/observable.component.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "angular.enable-strict-mode-prompt": false 3 | } -------------------------------------------------------------------------------- /dist/src/getModuleFn.d.ts: -------------------------------------------------------------------------------- 1 | export declare function getModuleFn(mod: any): any; 2 | -------------------------------------------------------------------------------- /dist/events/events.d.ts: -------------------------------------------------------------------------------- 1 | declare let eventList: Array; 2 | export default eventList; 3 | -------------------------------------------------------------------------------- /dist/interfaces/FusionChartsEvent.js: -------------------------------------------------------------------------------- 1 | export {}; 2 | //# sourceMappingURL=FusionChartsEvent.js.map -------------------------------------------------------------------------------- /dist/interfaces/FusionChartInstance.js: -------------------------------------------------------------------------------- 1 | export {}; 2 | //# sourceMappingURL=FusionChartInstance.js.map -------------------------------------------------------------------------------- /src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fusioncharts/angular-fusioncharts/HEAD/src/favicon.ico -------------------------------------------------------------------------------- /src/app/tabs/tabs.interface.ts: -------------------------------------------------------------------------------- 1 | export interface Tab { 2 | tabTitle: string; 3 | selected: boolean; 4 | } -------------------------------------------------------------------------------- /examples/ng-app-17/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /examples/ng-app-18/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /examples/ng-app-17/src/app/app.routes.ts: -------------------------------------------------------------------------------- 1 | import { Routes } from '@angular/router'; 2 | 3 | export const routes: Routes = []; 4 | -------------------------------------------------------------------------------- /examples/ng-app-18/src/app/app.routes.ts: -------------------------------------------------------------------------------- 1 | import { Routes } from '@angular/router'; 2 | 3 | export const routes: Routes = []; 4 | -------------------------------------------------------------------------------- /src/assets/images/ng-fc-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fusioncharts/angular-fusioncharts/HEAD/src/assets/images/ng-fc-logo.png -------------------------------------------------------------------------------- /examples/ng-app-17/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fusioncharts/angular-fusioncharts/HEAD/examples/ng-app-17/src/favicon.ico -------------------------------------------------------------------------------- /dist/src/fusioncharts.constructor.d.ts: -------------------------------------------------------------------------------- 1 | export declare function FusionChartsConstructor(fusionchartsService: any, chartConfig: Object): any; 2 | -------------------------------------------------------------------------------- /examples/ng-app-18/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fusioncharts/angular-fusioncharts/HEAD/examples/ng-app-18/public/favicon.ico -------------------------------------------------------------------------------- /src/typings.d.ts: -------------------------------------------------------------------------------- 1 | /* SystemJS module definition */ 2 | declare var module: NodeModule; 3 | interface NodeModule { 4 | id: string; 5 | } 6 | -------------------------------------------------------------------------------- /dist/interfaces/FusionChartInstance.d.ts: -------------------------------------------------------------------------------- 1 | interface FusionChartInstance { 2 | chart: Object; 3 | } 4 | export default FusionChartInstance; 5 | -------------------------------------------------------------------------------- /src/angular-fusioncharts/interfaces/FusionChartInstance.ts: -------------------------------------------------------------------------------- 1 | interface FusionChartInstance{ 2 | chart: Object; 3 | } 4 | 5 | export default FusionChartInstance; -------------------------------------------------------------------------------- /dist/interfaces/FusionChartsEvent.d.ts: -------------------------------------------------------------------------------- 1 | interface FusionChartsEvent { 2 | eventObj: Object; 3 | dataObj: Object; 4 | } 5 | export default FusionChartsEvent; 6 | -------------------------------------------------------------------------------- /examples/ng-app-17/src/app/app.component.html: -------------------------------------------------------------------------------- 1 | 7 | -------------------------------------------------------------------------------- /examples/ng-app-18/src/app/app.component.html: -------------------------------------------------------------------------------- 1 | 7 | -------------------------------------------------------------------------------- /src/angular-fusioncharts/interfaces/FusionChartsEvent.ts: -------------------------------------------------------------------------------- 1 | interface FusionChartsEvent{ 2 | eventObj: Object; 3 | dataObj: Object; 4 | } 5 | export default FusionChartsEvent; -------------------------------------------------------------------------------- /src/angular-fusioncharts/src/getModuleFn.ts: -------------------------------------------------------------------------------- 1 | // Utility to unwrap .default from ESM/CommonJS interop 2 | export function getModuleFn(mod: any) { 3 | return (mod && typeof mod === 'object' && mod.default) ? mod.default : mod; 4 | } 5 | -------------------------------------------------------------------------------- /dist/src/getModuleFn.js: -------------------------------------------------------------------------------- 1 | // Utility to unwrap .default from ESM/CommonJS interop 2 | export function getModuleFn(mod) { 3 | return (mod && typeof mod === 'object' && mod.default) ? mod.default : mod; 4 | } 5 | //# sourceMappingURL=getModuleFn.js.map -------------------------------------------------------------------------------- /src/app/fusioncharts/codepreview.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'ng-prism', 5 | template: '
', 6 | standalone: false 7 | }) 8 | 9 | export class CodePrev { 10 | 11 | } 12 | -------------------------------------------------------------------------------- /src/app/fusiontime/fusiontime.html: -------------------------------------------------------------------------------- 1 |
2 | 8 |
9 | 10 | 11 | -------------------------------------------------------------------------------- /examples/ng-app-17/src/app/app.config.ts: -------------------------------------------------------------------------------- 1 | import { ApplicationConfig } from '@angular/core'; 2 | import { provideRouter } from '@angular/router'; 3 | 4 | import { routes } from './app.routes'; 5 | 6 | export const appConfig: ApplicationConfig = { 7 | providers: [provideRouter(routes)] 8 | }; 9 | -------------------------------------------------------------------------------- /examples/ng-app-17/src/main.ts: -------------------------------------------------------------------------------- 1 | import { bootstrapApplication } from '@angular/platform-browser'; 2 | import { appConfig } from './app/app.config'; 3 | import { AppComponent } from './app/app.component'; 4 | 5 | bootstrapApplication(AppComponent, appConfig) 6 | .catch((err) => console.error(err)); 7 | -------------------------------------------------------------------------------- /examples/ng-app-18/src/main.ts: -------------------------------------------------------------------------------- 1 | import { bootstrapApplication } from '@angular/platform-browser'; 2 | import { appConfig } from './app/app.config'; 3 | import { AppComponent } from './app/app.component'; 4 | 5 | bootstrapApplication(AppComponent, appConfig) 6 | .catch((err) => console.error(err)); 7 | -------------------------------------------------------------------------------- /dist/interfaces/FusionChartInstance.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"FusionChartInstance.js","sourceRoot":"","sources":["../../src/angular-fusioncharts/interfaces/FusionChartInstance.ts"],"names":[],"mappings":"","sourcesContent":["interface FusionChartInstance{\n chart: Object;\n}\n\nexport default FusionChartInstance;"]} -------------------------------------------------------------------------------- /src/app/fusioncharts/services/selected.singleton.ts: -------------------------------------------------------------------------------- 1 | function Observer(){ 2 | this.on = function(){}; 3 | this.value = ''; 4 | this.change = function(val){ 5 | this.value = val; 6 | this.on && this.on(val); 7 | } 8 | } 9 | 10 | let observer = new Observer(); 11 | 12 | export default observer; -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.md] 12 | max_line_length = off 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /dist/interfaces/FusionChartsEvent.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"FusionChartsEvent.js","sourceRoot":"","sources":["../../src/angular-fusioncharts/interfaces/FusionChartsEvent.ts"],"names":[],"mappings":"","sourcesContent":["interface FusionChartsEvent{\n eventObj: Object;\n dataObj: Object;\n}\nexport default FusionChartsEvent;"]} -------------------------------------------------------------------------------- /src/angular-fusioncharts/src/fusioncharts.directive.ts: -------------------------------------------------------------------------------- 1 | import {Directive, ElementRef} from '@angular/core'; 2 | 3 | @Directive({ 4 | selector: '[appFusionchartsDirective]', 5 | standalone: false 6 | }) 7 | export class FusionChartsDirective { 8 | 9 | constructor(private el: ElementRef) { 10 | } 11 | 12 | } 13 | -------------------------------------------------------------------------------- /rollup.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | input: "dist/index.js", 3 | external: ["@angular/core"], 4 | output: { 5 | file: "dist/dist/index.js", 6 | format: "umd", 7 | name: "ng.angular-fusioncharts", 8 | sourcemap: false, 9 | globals: { 10 | "@angular/core": "ng.core", 11 | }, 12 | }, 13 | }; 14 | -------------------------------------------------------------------------------- /src/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/spec", 5 | "baseUrl": "", 6 | "types": [ 7 | "jasmine", 8 | "node" 9 | ] 10 | }, 11 | "files": [ 12 | "test.ts" 13 | ], 14 | "include": [ 15 | "**/*.spec.ts", 16 | "**/*.d.ts" 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /examples/ng-app-17/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "./tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "./out-tsc/app", 6 | "types": [] 7 | }, 8 | "files": [ 9 | "src/main.ts" 10 | ], 11 | "include": [ 12 | "src/**/*.d.ts" 13 | ] 14 | } 15 | -------------------------------------------------------------------------------- /examples/ng-app-17/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "./tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "./out-tsc/spec", 6 | "types": [ 7 | "jasmine" 8 | ] 9 | }, 10 | "include": [ 11 | "src/**/*.spec.ts", 12 | "src/**/*.d.ts" 13 | ] 14 | } 15 | -------------------------------------------------------------------------------- /examples/ng-app-18/src/app/app.config.ts: -------------------------------------------------------------------------------- 1 | import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core'; 2 | import { provideRouter } from '@angular/router'; 3 | 4 | import { routes } from './app.routes'; 5 | 6 | export const appConfig: ApplicationConfig = { 7 | providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes)] 8 | }; 9 | -------------------------------------------------------------------------------- /examples/ng-app-17/.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see https://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.ts] 12 | quote_type = single 13 | 14 | [*.md] 15 | max_line_length = off 16 | trim_trailing_whitespace = false 17 | -------------------------------------------------------------------------------- /examples/ng-app-18/.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see https://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.ts] 12 | quote_type = single 13 | 14 | [*.md] 15 | max_line_length = off 16 | trim_trailing_whitespace = false 17 | -------------------------------------------------------------------------------- /dist/src/fusioncharts.constructor.js: -------------------------------------------------------------------------------- 1 | import { getModuleFn } from './getModuleFn'; 2 | export function FusionChartsConstructor(fusionchartsService, chartConfig) { 3 | var FusionCharts = fusionchartsService.getFusionChartsStatic(); 4 | FusionCharts = getModuleFn(FusionCharts); 5 | return new FusionCharts(chartConfig); 6 | } 7 | //# sourceMappingURL=fusioncharts.constructor.js.map -------------------------------------------------------------------------------- /examples/ng-app-17/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | NgApp17 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /examples/ng-app-18/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | NgApp18 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /src/main.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | 4 | import { AppModule } from './app/app.module'; 5 | import { environment } from './environments/environment'; 6 | 7 | if (environment.production) { 8 | enableProdMode(); 9 | } 10 | 11 | platformBrowserDynamic().bootstrapModule(AppModule); 12 | -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Angular FusionCharts 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | Loading... 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/angular-fusioncharts/src/fusioncharts.pipe.ts: -------------------------------------------------------------------------------- 1 | import {Injectable, PipeTransform, Pipe} from '@angular/core'; 2 | 3 | /** 4 | * Transforms any input value 5 | */ 6 | @Pipe({ 7 | name: 'fusionchartsPipe', 8 | standalone: false 9 | }) 10 | @Injectable() 11 | export class FusionChartsPipe implements PipeTransform { 12 | transform(value: any, args?: any[]): string { 13 | return value; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /src/app/pipes/trustAsHtml.ts: -------------------------------------------------------------------------------- 1 | import { DomSanitizer } from '@angular/platform-browser'; 2 | import { PipeTransform, Pipe } from "@angular/core"; 3 | 4 | @Pipe({ 5 | name: 'trustAsHtml', 6 | standalone: false 7 | }) 8 | export class SafeHtmlPipe implements PipeTransform{ 9 | constructor(private sanitized: DomSanitizer) {} 10 | transform(value){ 11 | return this.sanitized.bypassSecurityTrustHtml(value); 12 | } 13 | } -------------------------------------------------------------------------------- /src/environments/environment.ts: -------------------------------------------------------------------------------- 1 | // The file contents for the current environment will overwrite these during build. 2 | // The build system defaults to the dev environment which uses `environment.ts`, but if you do 3 | // `ng build --env=prod` then `environment.prod.ts` will be used instead. 4 | // The list of which env maps to which file can be found in `.angular-cli.json`. 5 | 6 | export const environment = { 7 | production: false 8 | }; 9 | -------------------------------------------------------------------------------- /dist/src/fusioncharts.directive.d.ts: -------------------------------------------------------------------------------- 1 | import { ElementRef } from '@angular/core'; 2 | import * as i0 from "@angular/core"; 3 | export declare class FusionChartsDirective { 4 | private el; 5 | constructor(el: ElementRef); 6 | static ɵfac: i0.ɵɵFactoryDeclaration; 7 | static ɵdir: i0.ɵɵDirectiveDeclaration; 8 | } 9 | -------------------------------------------------------------------------------- /src/angular-fusioncharts/src/fusioncharts.constructor.ts: -------------------------------------------------------------------------------- 1 | 2 | 3 | import { FusionChartsService } from './fusioncharts.service'; 4 | import { getModuleFn } from './getModuleFn'; 5 | 6 | 7 | export function FusionChartsConstructor(fusionchartsService: any, chartConfig: Object) { 8 | let FusionCharts = fusionchartsService.getFusionChartsStatic(); 9 | FusionCharts = getModuleFn(FusionCharts); 10 | return new FusionCharts(chartConfig); 11 | } 12 | 13 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | # Node 2 | node_modules/* 3 | npm-debug.log 4 | 5 | # DO NOT IGNORE TYPESCRIPT FILES FOR NPM 6 | # TypeScript 7 | # *.js 8 | # *.map 9 | # *.d.ts 10 | 11 | # JetBrains 12 | .idea 13 | .project 14 | .settings 15 | .idea/* 16 | *.iml 17 | 18 | # VS Code 19 | .vscode/* 20 | 21 | # Windows 22 | Thumbs.db 23 | Desktop.ini 24 | 25 | # Mac 26 | .DS_Store 27 | **/.DS_Store 28 | 29 | # Source files 30 | src/ 31 | aot/ 32 | 33 | # Docs generated directory 34 | docs/ 35 | -------------------------------------------------------------------------------- /.browserslistrc: -------------------------------------------------------------------------------- 1 | # This file is used by the build system to adjust CSS and JS output to support the specified browsers below. 2 | # For additional information regarding the format and rule options, please see: 3 | # https://github.com/browserslist/browserslist#queries 4 | 5 | # You can see what browsers were selected by your queries by running: 6 | # npx browserslist 7 | 8 | > 0.5% 9 | last 2 versions 10 | Firefox ESR 11 | not dead 12 | not IE 9-11 # For IE 9-11 support, remove 'not'. -------------------------------------------------------------------------------- /src/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/app", 5 | "baseUrl": "", 6 | // typeRoots option has been previously configured 7 | "typeRoots": [ 8 | // add path to @types 9 | "node_modules/@types" 10 | ], 11 | "types": [] 12 | }, 13 | "exclude": [ 14 | "test.ts", 15 | "**/*.spec.ts" 16 | ], 17 | "files": [ 18 | "main.ts", 19 | "polyfills.ts" 20 | ] 21 | } 22 | -------------------------------------------------------------------------------- /src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | @import 'https://s3-eu-west-1.amazonaws.com/fcdesignsystem/1.0.0/css/fusionDesign.css'; 3 | @import "codemirror/lib/codemirror.css"; 4 | @import "codemirror/theme/material.css"; 5 | 6 | .demo-list > a.active > .nav-item{ 7 | color: #FFFFFF; 8 | background: #6957DA; 9 | border-radius: 4px; 10 | overflow: hidden; 11 | box-shadow: 0 4px 9px 0 rgba(23, 28, 33, .06); 12 | cursor: auto; 13 | } -------------------------------------------------------------------------------- /examples/ng-app-18/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | /* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */ 2 | /* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */ 3 | { 4 | "extends": "./tsconfig.json", 5 | "compilerOptions": { 6 | "outDir": "./out-tsc/app", 7 | "types": [] 8 | }, 9 | "files": [ 10 | "src/main.ts" 11 | ], 12 | "include": [ 13 | "src/**/*.d.ts" 14 | ] 15 | } 16 | -------------------------------------------------------------------------------- /dist/src/fusioncharts.pipe.d.ts: -------------------------------------------------------------------------------- 1 | import { PipeTransform } from '@angular/core'; 2 | import * as i0 from "@angular/core"; 3 | /** 4 | * Transforms any input value 5 | */ 6 | export declare class FusionChartsPipe implements PipeTransform { 7 | transform(value: any, args?: any[]): string; 8 | static ɵfac: i0.ɵɵFactoryDeclaration; 9 | static ɵpipe: i0.ɵɵPipeDeclaration; 10 | static ɵprov: i0.ɵɵInjectableDeclaration; 11 | } 12 | -------------------------------------------------------------------------------- /examples/ng-app-18/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | /* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */ 2 | /* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */ 3 | { 4 | "extends": "./tsconfig.json", 5 | "compilerOptions": { 6 | "outDir": "./out-tsc/spec", 7 | "types": [ 8 | "jasmine" 9 | ] 10 | }, 11 | "include": [ 12 | "src/**/*.spec.ts", 13 | "src/**/*.d.ts" 14 | ] 15 | } 16 | -------------------------------------------------------------------------------- /dist/src/getModuleFn.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"getModuleFn.js","sourceRoot":"","sources":["../../src/angular-fusioncharts/src/getModuleFn.ts"],"names":[],"mappings":"AAAA,uDAAuD;AACvD,MAAM,UAAU,WAAW,CAAC,GAAQ;IAClC,OAAO,CAAC,GAAG,IAAI,OAAO,GAAG,KAAK,QAAQ,IAAI,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC;AAC7E,CAAC","sourcesContent":["// Utility to unwrap .default from ESM/CommonJS interop\nexport function getModuleFn(mod: any) {\n return (mod && typeof mod === 'object' && mod.default) ? mod.default : mod;\n}\n"]} -------------------------------------------------------------------------------- /src/app/fusioncharts/ex1/ex1.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | 7 | 8 |
9 |
10 |
11 | 12 | 16 | 17 | -------------------------------------------------------------------------------- /src/app/fusioncharts/ex22/ex22.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | 9 | 10 |
11 |
12 |
13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /src/app/fusioncharts/ex2/ex2.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | 9 | 10 |
11 |
12 |
13 | 17 | 18 | -------------------------------------------------------------------------------- /src/assets/data/data.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /src/app/fusioncharts/ex3/ex3.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | 9 | 10 |
11 |
12 |
13 | 14 | 18 | 19 | -------------------------------------------------------------------------------- /src/app/fusioncharts/ex5a/ex5a.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | 10 | 11 |
12 |
13 |
14 | 15 | 19 | -------------------------------------------------------------------------------- /src/app/fusioncharts/ex5/ex5.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | 10 | 11 |
12 |
13 |
14 | 15 | 19 | 20 | -------------------------------------------------------------------------------- /src/app/fusioncharts/tabbedComponent/tabbed.code.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Input } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'tabbed-code', 5 | templateUrl: './tabbed.code.html', 6 | standalone: false 7 | }) 8 | export class TabbedCode { 9 | @Input() moduleCode; 10 | @Input() componentCode; 11 | @Input() templateCode; 12 | @Input() schemaCode; 13 | @Input() dataCode; 14 | cSelected = 'component'; 15 | 16 | constructor() {} 17 | 18 | ngOnInit() {} 19 | 20 | selectCode(type) { 21 | this.cSelected = type; 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /src/app/fusioncharts/ex13/ex13.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | 11 |
12 |
13 |
14 | 18 | -------------------------------------------------------------------------------- /src/app/fusioncharts/ex12/ex12.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | 10 | 11 |
12 |
13 |
14 | 15 | 19 | 20 | -------------------------------------------------------------------------------- /src/app/fusioncharts/ex14/ex14.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | 10 | 11 |
12 |
13 |
14 | 18 | -------------------------------------------------------------------------------- /src/app/fusioncharts/ex4/ex4.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | 5 | 6 | 7 | 8 | 9 |
10 |
11 |
12 | 13 | 17 | 18 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "importHelpers": true, 5 | "module": "es2020", 6 | "esModuleInterop": true, 7 | "outDir": "./dist/out-tsc", 8 | "baseUrl": "src", 9 | "sourceMap": true, 10 | "declaration": false, 11 | "moduleResolution": "bundler", 12 | "experimentalDecorators": true, 13 | "target": "ES2022", 14 | "typeRoots": [ 15 | "node_modules/@types" 16 | ], 17 | "lib": [ 18 | "es2016", 19 | "dom" 20 | ], 21 | "useDefineForClassFields": false 22 | }, 23 | "angularCompilerOptions": { 24 | "enableIvy": true 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /dist/src/fusioncharts.directive.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"fusioncharts.directive.js","sourceRoot":"","sources":["../../src/angular-fusioncharts/src/fusioncharts.directive.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAa,MAAM,eAAe,CAAC;;AAEpD;IAME,+BAAoB,EAAc;QAAd,OAAE,GAAF,EAAE,CAAY;IAClC,CAAC;8HAHU,qBAAqB;4EAArB,qBAAqB;gCANlC;CAWC,AATD,IASC;SALY,qBAAqB;uFAArB,qBAAqB;cAJjC,SAAS;eAAC;gBACP,QAAQ,EAAE,4BAA4B;gBACtC,UAAU,EAAE,KAAK;aACpB","sourcesContent":["import {Directive, ElementRef} from '@angular/core';\n\n@Directive({\n selector: '[appFusionchartsDirective]',\n standalone: false\n})\nexport class FusionChartsDirective {\n\n constructor(private el: ElementRef) {\n }\n\n}\n"]} -------------------------------------------------------------------------------- /src/app/fusioncharts/ex32/ex32.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | 10 | 11 |
12 |
13 |
14 | 15 | 22 | -------------------------------------------------------------------------------- /src/app/fusioncharts/ex26/ex26.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | 10 | 11 |
12 |
13 |
14 | 15 | 22 | 23 | -------------------------------------------------------------------------------- /src/app/fusioncharts/ex27/ex27.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | 10 | 11 |
12 |
13 |
14 | 15 | 22 | 23 | -------------------------------------------------------------------------------- /src/app/fusioncharts/ex28/ex28.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | 10 | 11 |
12 |
13 |
14 | 15 | 22 | 23 | -------------------------------------------------------------------------------- /src/app/fusioncharts/ex29/ex29.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | 10 | 11 |
12 |
13 |
14 | 15 | 22 | 23 | -------------------------------------------------------------------------------- /src/app/fusioncharts/ex30/ex30.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | 10 | 11 |
12 |
13 |
14 | 15 | 22 | 23 | -------------------------------------------------------------------------------- /src/app/fusioncharts/ex31/ex31.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | 10 | 11 |
12 |
13 |
14 | 15 | 22 | 23 | -------------------------------------------------------------------------------- /src/app/fusioncharts/ex33/ex33.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | 10 | 11 |
12 |
13 |
14 | 15 | 22 | 23 | -------------------------------------------------------------------------------- /src/app/fusioncharts/ex34/ex34.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | 10 | 11 |
12 |
13 |
14 | 15 | 22 | 23 | -------------------------------------------------------------------------------- /src/app/fusioncharts/ex35/ex35.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | 10 | 11 |
12 |
13 |
14 | 15 | 22 | 23 | -------------------------------------------------------------------------------- /src/app/fusioncharts/ex36/ex36.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | 10 | 11 |
12 |
13 |
14 | 15 | 22 | 23 | -------------------------------------------------------------------------------- /src/app/fusioncharts/ex11/ex11.html: -------------------------------------------------------------------------------- 1 | 2 |
3 |
4 |
5 | 12 | 13 |
14 |
15 |
16 | 17 | 21 | -------------------------------------------------------------------------------- /src/app/fusioncharts/ex5a/ex5a.ts: -------------------------------------------------------------------------------- 1 | import { Component, AfterViewInit} from '@angular/core'; 2 | 3 | import fcDemos from '../samplecode'; 4 | import SelectedSingleton from '../services/selected.singleton'; 5 | declare var Prism; 6 | 7 | @Component({ 8 | selector: 'chart', 9 | templateUrl: 'ex5a.html', 10 | standalone: false 11 | }) 12 | 13 | export class Ex5a { 14 | demoId = 'ex5a'; 15 | sampleCode = fcDemos; 16 | 17 | constructor () { 18 | 19 | } 20 | ngOnInit(){ 21 | setTimeout(() => { 22 | SelectedSingleton.change(this.sampleCode['ex5a'].title); 23 | }) 24 | } 25 | 26 | 27 | ngAfterViewInit() { 28 | Prism && Prism.highlightAll(); 29 | } 30 | }; 31 | -------------------------------------------------------------------------------- /src/app/fusioncharts/ex5/ex5.ts: -------------------------------------------------------------------------------- 1 | import { Component, AfterViewInit} from '@angular/core'; 2 | 3 | import fcDemos from '../samplecode'; 4 | import SelectedSingleton from '../services/selected.singleton'; 5 | 6 | declare var Prism; 7 | 8 | @Component({ 9 | selector: 'chart', 10 | templateUrl: 'ex5.html', 11 | standalone: false 12 | }) 13 | 14 | export class Ex5 { 15 | demoId = 'ex5'; 16 | sampleCode = fcDemos; 17 | 18 | constructor () { 19 | 20 | } 21 | 22 | ngOnInit(){ 23 | setTimeout(() => { 24 | SelectedSingleton.change(this.sampleCode['ex5'].title); 25 | }); 26 | } 27 | ngAfterViewInit() { 28 | Prism && Prism.highlightAll(); 29 | } 30 | }; 31 | 32 | -------------------------------------------------------------------------------- /src/app/fusioncharts/ex16/ex16.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | 12 | 13 |

14 |
15 |
16 |
17 | 18 | 19 | 23 | -------------------------------------------------------------------------------- /src/app/fusioncharts/ex15/ex15.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | 11 | 12 |

{{message || 'You will see a notification here after chart completes rendering.'}}

13 |
14 |
15 |
16 | 17 | 18 | 22 | -------------------------------------------------------------------------------- /dist/src/fusioncharts.constructor.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"fusioncharts.constructor.js","sourceRoot":"","sources":["../../src/angular-fusioncharts/src/fusioncharts.constructor.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAG5C,MAAM,UAAU,uBAAuB,CAAC,mBAAwB,EAAE,WAAmB;IACjF,IAAI,YAAY,GAAG,mBAAmB,CAAC,qBAAqB,EAAE,CAAC;IAC/D,YAAY,GAAG,WAAW,CAAC,YAAY,CAAC,CAAC;IACzC,OAAO,IAAI,YAAY,CAAC,WAAW,CAAC,CAAC;AACzC,CAAC","sourcesContent":["\n\nimport { FusionChartsService } from './fusioncharts.service';\nimport { getModuleFn } from './getModuleFn';\n\n\nexport function FusionChartsConstructor(fusionchartsService: any, chartConfig: Object) {\n let FusionCharts = fusionchartsService.getFusionChartsStatic();\n FusionCharts = getModuleFn(FusionCharts);\n return new FusionCharts(chartConfig);\n}\n\n"]} -------------------------------------------------------------------------------- /dist/src/fusioncharts.pipe.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"fusioncharts.pipe.js","sourceRoot":"","sources":["../../src/angular-fusioncharts/src/fusioncharts.pipe.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAiB,IAAI,EAAC,MAAM,eAAe,CAAC;;AAE9D;;GAEG;AACH;IAAA;KASC;IAHC,oCAAS,GAAT,UAAU,KAAU,EAAE,IAAY;QAChC,OAAO,KAAK,CAAC;IACf,CAAC;oHAHU,gBAAgB;6FAAhB,gBAAgB;0EAAhB,gBAAgB,WAAhB,gBAAgB;2BAV7B;CAcC,AATD,IASC;SAJY,gBAAgB;uFAAhB,gBAAgB;cAL5B,IAAI;eAAC;gBACF,IAAI,EAAE,kBAAkB;gBACxB,UAAU,EAAE,KAAK;aACpB;;cACA,UAAU","sourcesContent":["import {Injectable, PipeTransform, Pipe} from '@angular/core';\n\n/**\n * Transforms any input value\n */\n@Pipe({\n name: 'fusionchartsPipe',\n standalone: false\n})\n@Injectable()\nexport class FusionChartsPipe implements PipeTransform {\n transform(value: any, args?: any[]): string {\n return value;\n }\n}\n"]} -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # compiled output 4 | /tmp 5 | /out-tsc 6 | 7 | # dependencies 8 | /node_modules 9 | 10 | # IDEs and editors 11 | /.idea 12 | .project 13 | .classpath 14 | .c9/ 15 | *.launch 16 | .settings/ 17 | *.sublime-workspace 18 | 19 | # IDE - VSCode 20 | .vscode/* 21 | !.vscode/settings.json 22 | !.vscode/tasks.json 23 | !.vscode/launch.json 24 | !.vscode/extensions.json 25 | 26 | # misc 27 | /.angular/cache 28 | /examples/ng-app-17/.angular/cache 29 | /examples/ng-app-18/.angular/cache 30 | /.sass-cache 31 | /connect.lock 32 | /coverage 33 | /libpeerconnection.log 34 | npm-debug.log 35 | testem.log 36 | /typings 37 | 38 | # e2e 39 | /e2e/*.js 40 | /e2e/*.map 41 | 42 | # System Files 43 | .DS_Store 44 | Thumbs.db 45 | 46 | # rollup tmp files 47 | .tmp/ 48 | -------------------------------------------------------------------------------- /src/app/fusioncharts/ex23/ex23.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | 14 | 15 |

{{message}}

16 |
17 |
18 |
19 | 20 | -------------------------------------------------------------------------------- /src/assets/data/data.json: -------------------------------------------------------------------------------- 1 | { 2 | "chart": { 3 | "caption": "Countries With Most Oil Reserves [2017-18]", 4 | "subCaption": "In MMbbl = One Million barrels", 5 | "xAxisName": "Country", 6 | "yAxisName": "Reserves (MMbbl)", 7 | "numberSuffix": "K", 8 | "theme": "fusion" 9 | }, 10 | "data": [{ 11 | "label": "Venezuela", 12 | "value": "290" 13 | }, { 14 | "label": "Saudi", 15 | "value": "260" 16 | }, { 17 | "label": "Canada", 18 | "value": "180" 19 | }, { 20 | "label": "Iran", 21 | "value": "140" 22 | }, { 23 | "label": "Russia", 24 | "value": "115" 25 | }, { 26 | "label": "UAE", 27 | "value": "100" 28 | }, { 29 | "label": "US", 30 | "value": "30" 31 | }, { 32 | "label": "China", 33 | "value": "30" 34 | }] 35 | } -------------------------------------------------------------------------------- /protractor.conf.js: -------------------------------------------------------------------------------- 1 | // Protractor configuration file, see link for more information 2 | // https://github.com/angular/protractor/blob/master/lib/config.ts 3 | 4 | const { SpecReporter } = require('jasmine-spec-reporter'); 5 | 6 | exports.config = { 7 | allScriptsTimeout: 11000, 8 | specs: [ 9 | './e2e/**/*.e2e-spec.ts' 10 | ], 11 | capabilities: { 12 | 'browserName': 'chrome' 13 | }, 14 | directConnect: true, 15 | baseUrl: 'http://localhost:4200/', 16 | framework: 'jasmine', 17 | jasmineNodeOpts: { 18 | showColors: true, 19 | defaultTimeoutInterval: 30000, 20 | print: function() {} 21 | }, 22 | beforeLaunch: function() { 23 | require('ts-node').register({ 24 | project: 'e2e/tsconfig.e2e.json' 25 | }); 26 | }, 27 | onPrepare() { 28 | jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } })); 29 | } 30 | }; 31 | -------------------------------------------------------------------------------- /dist/src/fusioncharts.service.d.ts: -------------------------------------------------------------------------------- 1 | import * as i0 from "@angular/core"; 2 | export declare class FusionChartsStatic { 3 | core: any; 4 | modules: Function[]; 5 | static ɵfac: i0.ɵɵFactoryDeclaration; 6 | static ɵprov: i0.ɵɵInjectableDeclaration; 7 | } 8 | export declare class FusionChartsService { 9 | static _fcRoot: any; 10 | static itemCount: any; 11 | _fusionchartsStatice: FusionChartsStatic; 12 | static setFCRoot(fcRoot: any): void; 13 | static getFCRoot(): any; 14 | static isFCRootSet(): boolean; 15 | constructor(FCStatic: FusionChartsStatic); 16 | resolveFusionCharts(core: any, modules: any[]): void; 17 | getFusionChartsStatic(): FusionChartsStatic; 18 | getNextItemCount(): any; 19 | static ɵfac: i0.ɵɵFactoryDeclaration; 20 | static ɵprov: i0.ɵɵInjectableDeclaration; 21 | } 22 | -------------------------------------------------------------------------------- /tsconfig-aot.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "baseUrl": "", 4 | "declaration": true, 5 | "stripInternal": true, 6 | "experimentalDecorators": true, 7 | "strictNullChecks": true, 8 | "noImplicitAny": false, 9 | "module": "es2015", 10 | "moduleResolution": "node", 11 | "paths": { 12 | "@angular/core": [ 13 | "node_modules/@angular/core" 14 | ], 15 | "@angular/common": [ 16 | "node_modules/@angular/common" 17 | ], 18 | "rxjs/*": [ 19 | "node_modules/rxjs/*" 20 | ] 21 | }, 22 | "rootDir": "src/angular-fusioncharts", 23 | "outDir": "dist", 24 | "sourceMap": true, 25 | "inlineSources": true, 26 | "target": "es5", 27 | "skipLibCheck": true, 28 | "lib": [ 29 | "es2015", 30 | "dom" 31 | ] 32 | }, 33 | "files": [ 34 | "./src/angular-fusioncharts/index.ts" 35 | ], 36 | "angularCompilerOptions": { 37 | "strictMetadataEmit": true, 38 | "genDir": ".tmp" 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /src/app/tabs/tab.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Input, OnInit, NgModule } from '@angular/core'; 2 | import { BrowserModule } from '@angular/platform-browser'; 3 | import { Tab } from './tabs.interface'; 4 | import { TabsComponent } from './tabs.component'; 5 | 6 | @Component({ 7 | selector: 'tab', 8 | template: `
9 | 10 |
11 | ` 12 | }) 13 | export class TabComponent implements OnInit, Tab { 14 | 15 | @Input() tabTitle; 16 | 17 | selected: boolean; 18 | 19 | constructor(private tabsComponent: TabsComponent) {} 20 | 21 | ngOnInit() { 22 | this.tabsComponent.addTab(this); 23 | } 24 | } 25 | 26 | 27 | @NgModule({ 28 | imports: [ BrowserModule ], 29 | declarations: [ 30 | TabsComponent, TabComponent 31 | ], 32 | exports: [ 33 | TabsComponent, TabComponent 34 | ] 35 | }) 36 | 37 | export class TabModule {} -------------------------------------------------------------------------------- /dist/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular-fusioncharts", 3 | "version": "4.2.0", 4 | "repository": { 5 | "type": "git", 6 | "url": "https://github.com/fusioncharts/angular-fusioncharts" 7 | }, 8 | "author": { 9 | "name": "FusionCharts", 10 | "email": "support@fusioncharts.com" 11 | }, 12 | "contributors": [ 13 | { 14 | "name": "Meher Howji", 15 | "url": "https://github.com/meherhowji" 16 | } 17 | ], 18 | "keywords": ["angular", "angular2", "angular 2", "FusionCharts"], 19 | "license": "MIT", 20 | "bugs": { 21 | "url": "https://github.com/fusioncharts/angular-fusioncharts/issues" 22 | }, 23 | "main": "dist/index.js", 24 | "module": "index.js", 25 | "typings": "index.d.ts", 26 | "dependencies": { 27 | "@types/fusioncharts": "^3.11.0" 28 | }, 29 | "devDependencies": {}, 30 | "peerDependencies": { 31 | "@angular/core": ">=4.0.0" 32 | }, 33 | "engines": { 34 | "node": ">=4.4.1" 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /package-dist.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular-fusioncharts", 3 | "version": "4.1.1", 4 | "repository": { 5 | "type": "git", 6 | "url": "https://github.com/fusioncharts/angular-fusioncharts" 7 | }, 8 | "author": { 9 | "name": "FusionCharts", 10 | "email": "support@fusioncharts.com" 11 | }, 12 | "contributors": [ 13 | { 14 | "name": "Meher Howji", 15 | "url": "https://github.com/meherhowji" 16 | } 17 | ], 18 | "keywords": ["angular", "angular2", "angular 2", "FusionCharts"], 19 | "license": "MIT", 20 | "bugs": { 21 | "url": "https://github.com/fusioncharts/angular-fusioncharts/issues" 22 | }, 23 | "main": "dist/index.js", 24 | "module": "index.js", 25 | "typings": "index.d.ts", 26 | "dependencies": { 27 | "@types/fusioncharts": "^3.11.0" 28 | }, 29 | "devDependencies": {}, 30 | "peerDependencies": { 31 | "@angular/core": ">=4.0.0" 32 | }, 33 | "engines": { 34 | "node": ">=4.4.1" 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /src/app/fusioncharts/ex7/ex7.html: -------------------------------------------------------------------------------- 1 | 6 | 7 |
8 |
9 |
10 | 16 | 17 |

You're are currently hovering over {{selectedLabel || "______"}} whose value is {{selectedValue || "_______"}}

18 |
19 |
20 |
21 | 22 | 26 | 27 | -------------------------------------------------------------------------------- /src/assets/images/angular.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 10 | 11 | 12 | 13 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /src/app/tabs/tabs.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, EventEmitter, Output } from '@angular/core'; 2 | import { Tab } from './tabs.interface'; 3 | 4 | @Component({ 5 | selector: 'tabset', 6 | template: ` 11 | ` 12 | }) 13 | 14 | export class TabsComponent { 15 | // export class TabsComponent { 16 | 17 | tabs: Tab[] = []; 18 | // selected: any; 19 | // @Output() selected: any = new EventEmitter(); 20 | 21 | addTab(tab: Tab) { 22 | if (!this.tabs.length) { 23 | tab.selected = true; 24 | } 25 | this.tabs.push(tab); 26 | } 27 | 28 | selectTab(tab: Tab) { 29 | this.tabs.map((tab) => { 30 | tab.selected = false; 31 | }) 32 | tab.selected = true; 33 | // this.selected.emit({selectedTab: tab}); 34 | } 35 | } -------------------------------------------------------------------------------- /src/app/fusioncharts/fusioncharts.component.ts: -------------------------------------------------------------------------------- 1 | import {Component} from '@angular/core'; 2 | 3 | var chartData = { 4 | chart: {theme: 'fint'}, 5 | data: [{value: 50}, {value: 55}, {value: 70}, {value: 60}] 6 | } 7 | 8 | var config = { 9 | type: "Column2D", 10 | width: 500, 11 | height: 300, 12 | dataFormat: 'json', 13 | dataSource: chartData 14 | } 15 | 16 | @Component({ 17 | selector: 'chart', 18 | template: ` 19 | 20 | 21 | 22 | Column2D chart will render here... 23 | `, 24 | standalone: false 25 | }) 26 | 27 | export class FusionChartsSample { 28 | chartData = JSON.stringify(chartData); 29 | 30 | chartConf = JSON.stringify(config); 31 | } 32 | -------------------------------------------------------------------------------- /examples/ng-app-17/tsconfig.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "compileOnSave": false, 4 | "compilerOptions": { 5 | "outDir": "./dist/out-tsc", 6 | "strict": true, 7 | "noImplicitOverride": true, 8 | "noPropertyAccessFromIndexSignature": true, 9 | "noImplicitReturns": true, 10 | "noFallthroughCasesInSwitch": true, 11 | "skipLibCheck": true, 12 | "esModuleInterop": true, 13 | "sourceMap": true, 14 | "declaration": false, 15 | "experimentalDecorators": true, 16 | "moduleResolution": "node", 17 | "importHelpers": true, 18 | "target": "ES2022", 19 | "module": "ES2022", 20 | "useDefineForClassFields": false, 21 | "lib": [ 22 | "ES2022", 23 | "dom" 24 | ] 25 | }, 26 | "angularCompilerOptions": { 27 | "enableI18nLegacyMessageIdFormat": false, 28 | "strictInjectionParameters": true, 29 | "strictInputAccessModifiers": true, 30 | "strictTemplates": true 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /src/test.ts: -------------------------------------------------------------------------------- 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files 2 | 3 | import 'zone.js/dist/long-stack-trace-zone'; 4 | import 'zone.js/dist/proxy.js'; 5 | import 'zone.js/dist/sync-test'; 6 | import 'zone.js/dist/jasmine-patch'; 7 | import 'zone.js/dist/async-test'; 8 | import 'zone.js/dist/fake-async-test'; 9 | import { getTestBed } from '@angular/core/testing'; 10 | import { 11 | BrowserDynamicTestingModule, 12 | platformBrowserDynamicTesting 13 | } from '@angular/platform-browser-dynamic/testing'; 14 | 15 | // Unfortunately there's no typing for the `__karma__` variable. Just declare it as any. 16 | declare var __karma__: any; 17 | 18 | // Prevent Karma from running prematurely. 19 | __karma__.loaded = function () {}; 20 | 21 | // First, initialize the Angular testing environment. 22 | getTestBed().initTestEnvironment( 23 | BrowserDynamicTestingModule, 24 | platformBrowserDynamicTesting() 25 | ); 26 | // Finally, start Karma to run the tests. 27 | __karma__.start(); 28 | -------------------------------------------------------------------------------- /src/app/themes/fusioncharts.theme.fusion.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'Source Sans Pro'; 3 | font-style: normal; 4 | font-weight: 400; 5 | src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v11/6xK3dSBYKcSV-LCoeQqfX1RYOo3qOK7lujVj9w.woff2) format('woff2'); 6 | unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; 7 | } 8 | 9 | /* latin */ 10 | @font-face { 11 | font-family: 'Source Sans Pro Light'; 12 | font-style: normal; 13 | font-weight: 300; 14 | src: local('Source Sans Pro Light'), local('SourceSansPro-Light'), url(https://fonts.gstatic.com/s/sourcesanspro/v11/6xKydSBYKcSV-LCoeQqfX1RYOo3ik4zwlxdu3cOWxw.woff2) format('woff2'); 15 | unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; 16 | } 17 | -------------------------------------------------------------------------------- /src/app/fusioncharts/ex6/ex6.html: -------------------------------------------------------------------------------- 1 | 9 |
10 |
11 |
12 | 18 | 19 | 20 | 21 |
22 |
23 |
24 | 25 | 29 | -------------------------------------------------------------------------------- /src/app/fusioncharts/ex19/ex19.html: -------------------------------------------------------------------------------- 1 | 12 |
13 |
14 |
15 | 21 | 22 |

23 | Slice out Microsoft 24 | Reset 25 |

26 |
27 |
28 | 32 | -------------------------------------------------------------------------------- /examples/ng-app-17/src/app/app.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed } from '@angular/core/testing'; 2 | import { AppComponent } from './app.component'; 3 | 4 | describe('AppComponent', () => { 5 | beforeEach(async () => { 6 | await TestBed.configureTestingModule({ 7 | imports: [AppComponent], 8 | }).compileComponents(); 9 | }); 10 | 11 | it('should create the app', () => { 12 | const fixture = TestBed.createComponent(AppComponent); 13 | const app = fixture.componentInstance; 14 | expect(app).toBeTruthy(); 15 | }); 16 | 17 | it(`should have the 'ng-app-17' title`, () => { 18 | const fixture = TestBed.createComponent(AppComponent); 19 | const app = fixture.componentInstance; 20 | expect(app.title).toEqual('ng-app-17'); 21 | }); 22 | 23 | it('should render title', () => { 24 | const fixture = TestBed.createComponent(AppComponent); 25 | fixture.detectChanges(); 26 | const compiled = fixture.nativeElement as HTMLElement; 27 | expect(compiled.querySelector('h1')?.textContent).toContain('Hello, ng-app-17'); 28 | }); 29 | }); 30 | -------------------------------------------------------------------------------- /examples/ng-app-18/src/app/app.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed } from '@angular/core/testing'; 2 | import { AppComponent } from './app.component'; 3 | 4 | describe('AppComponent', () => { 5 | beforeEach(async () => { 6 | await TestBed.configureTestingModule({ 7 | imports: [AppComponent], 8 | }).compileComponents(); 9 | }); 10 | 11 | it('should create the app', () => { 12 | const fixture = TestBed.createComponent(AppComponent); 13 | const app = fixture.componentInstance; 14 | expect(app).toBeTruthy(); 15 | }); 16 | 17 | it(`should have the 'ng-app-18' title`, () => { 18 | const fixture = TestBed.createComponent(AppComponent); 19 | const app = fixture.componentInstance; 20 | expect(app.title).toEqual('ng-app-18'); 21 | }); 22 | 23 | it('should render title', () => { 24 | const fixture = TestBed.createComponent(AppComponent); 25 | fixture.detectChanges(); 26 | const compiled = fixture.nativeElement as HTMLElement; 27 | expect(compiled.querySelector('h1')?.textContent).toContain('Hello, ng-app-18'); 28 | }); 29 | }); 30 | -------------------------------------------------------------------------------- /dist/src/fusioncharts.directive.js: -------------------------------------------------------------------------------- 1 | import { Directive } from '@angular/core'; 2 | import * as i0 from "@angular/core"; 3 | var FusionChartsDirective = /** @class */ (function () { 4 | function FusionChartsDirective(el) { 5 | this.el = el; 6 | } 7 | FusionChartsDirective.ɵfac = function FusionChartsDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || FusionChartsDirective)(i0.ɵɵdirectiveInject(i0.ElementRef)); }; 8 | FusionChartsDirective.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: FusionChartsDirective, selectors: [["", "appFusionchartsDirective", ""]], standalone: false }); 9 | return FusionChartsDirective; 10 | }()); 11 | export { FusionChartsDirective }; 12 | (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FusionChartsDirective, [{ 13 | type: Directive, 14 | args: [{ 15 | selector: '[appFusionchartsDirective]', 16 | standalone: false 17 | }] 18 | }], function () { return [{ type: i0.ElementRef }]; }, null); })(); 19 | //# sourceMappingURL=fusioncharts.directive.js.map -------------------------------------------------------------------------------- /src/app/fusioncharts/ex9/ex9.html: -------------------------------------------------------------------------------- 1 | 14 |
15 |
16 |
17 | 23 | 24 |
25 |
26 |
27 |
28 | 29 | 30 | 31 | 32 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /examples/ng-app-18/tsconfig.json: -------------------------------------------------------------------------------- 1 | /* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */ 2 | /* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */ 3 | { 4 | "compileOnSave": false, 5 | "compilerOptions": { 6 | "outDir": "./dist/out-tsc", 7 | "strict": true, 8 | "noImplicitOverride": true, 9 | "noPropertyAccessFromIndexSignature": true, 10 | "noImplicitReturns": true, 11 | "noFallthroughCasesInSwitch": true, 12 | "skipLibCheck": true, 13 | "esModuleInterop": true, 14 | "sourceMap": true, 15 | "declaration": false, 16 | "experimentalDecorators": true, 17 | "moduleResolution": "bundler", 18 | "importHelpers": true, 19 | "target": "ES2022", 20 | "module": "ES2022", 21 | "useDefineForClassFields": false, 22 | "lib": [ 23 | "ES2022", 24 | "dom" 25 | ] 26 | }, 27 | "angularCompilerOptions": { 28 | "enableI18nLegacyMessageIdFormat": false, 29 | "strictInjectionParameters": true, 30 | "strictInputAccessModifiers": true, 31 | "strictTemplates": true 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | The MIT 2 | License 3 | 4 | Copyright (c) 2010-2022 Google LLC. https://angular.io/license 5 | 6 | Permission is hereby granted, free of charge, to any person obtaining a 7 | copy of this software and associated documentation files (the 8 | “Software”), to deal in the Software without restriction, including 9 | without limitation the rights to use, copy, ,modify, merge, publish, 10 | distribute, sublicense, and/or sell copies of the Software, and to permit 11 | persons to whom the Software is furnished to do so, subject to the 12 | following conditions: 13 | 14 | The above copyright notice and this permission notice shall be included 15 | in all copies or substantial portions of the Software. 16 | 17 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS 18 | OR 19 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 20 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 21 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 22 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 23 | -------------------------------------------------------------------------------- /examples/ng-app-17/README.md: -------------------------------------------------------------------------------- 1 | # NgApp17 2 | 3 | This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 17.3.8. 4 | 5 | ## Development server 6 | 7 | Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files. 8 | 9 | ## Code scaffolding 10 | 11 | Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`. 12 | 13 | ## Build 14 | 15 | Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. 16 | 17 | ## Running unit tests 18 | 19 | Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io). 20 | 21 | ## Running end-to-end tests 22 | 23 | Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities. 24 | 25 | ## Further help 26 | 27 | To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page. 28 | -------------------------------------------------------------------------------- /dist/LICENSE.md: -------------------------------------------------------------------------------- 1 | The MIT 2 | License 3 | 4 | Copyright (c) 2010-2022 Google LLC. https://angular.io/license 5 | 6 | Permission is hereby granted, free of charge, to any person obtaining a 7 | copy of this software and associated documentation files (the 8 | “Software”), to deal in the Software without restriction, including 9 | without limitation the rights to use, copy, ,modify, merge, publish, 10 | distribute, sublicense, and/or sell copies of the Software, and to permit 11 | persons to whom the Software is furnished to do so, subject to the 12 | following conditions: 13 | 14 | The above copyright notice and this permission notice shall be included 15 | in all copies or substantial portions of the Software. 16 | 17 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS 18 | OR 19 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 20 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 21 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 22 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 23 | -------------------------------------------------------------------------------- /examples/ng-app-18/README.md: -------------------------------------------------------------------------------- 1 | # NgApp18 2 | 3 | This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 18.0.7. 4 | 5 | ## Development server 6 | 7 | Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files. 8 | 9 | ## Code scaffolding 10 | 11 | Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`. 12 | 13 | ## Build 14 | 15 | Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. 16 | 17 | ## Running unit tests 18 | 19 | Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io). 20 | 21 | ## Running end-to-end tests 22 | 23 | Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities. 24 | 25 | ## Further help 26 | 27 | To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page. 28 | -------------------------------------------------------------------------------- /src/app/fusioncharts/ex25/ex25.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | 11 | 12 |
13 | 14 | 15 | 16 | 17 |
18 |
19 |
20 |
21 | 22 | 23 | -------------------------------------------------------------------------------- /dist/src/fusioncharts.pipe.js: -------------------------------------------------------------------------------- 1 | import { Injectable, Pipe } from '@angular/core'; 2 | import * as i0 from "@angular/core"; 3 | /** 4 | * Transforms any input value 5 | */ 6 | var FusionChartsPipe = /** @class */ (function () { 7 | function FusionChartsPipe() { 8 | } 9 | FusionChartsPipe.prototype.transform = function (value, args) { 10 | return value; 11 | }; 12 | FusionChartsPipe.ɵfac = function FusionChartsPipe_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || FusionChartsPipe)(); }; 13 | FusionChartsPipe.ɵpipe = /*@__PURE__*/ i0.ɵɵdefinePipe({ name: "fusionchartsPipe", type: FusionChartsPipe, pure: true, standalone: false }); 14 | FusionChartsPipe.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: FusionChartsPipe, factory: FusionChartsPipe.ɵfac }); 15 | return FusionChartsPipe; 16 | }()); 17 | export { FusionChartsPipe }; 18 | (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FusionChartsPipe, [{ 19 | type: Pipe, 20 | args: [{ 21 | name: 'fusionchartsPipe', 22 | standalone: false 23 | }] 24 | }, { 25 | type: Injectable 26 | }], null, null); })(); 27 | //# sourceMappingURL=fusioncharts.pipe.js.map -------------------------------------------------------------------------------- /dist/index.d.ts: -------------------------------------------------------------------------------- 1 | import { ModuleWithProviders } from "@angular/core"; 2 | import { FusionChartsComponent } from "./src/fusioncharts.component"; 3 | import { FusionChartsDirective } from "./src/fusioncharts.directive"; 4 | import { FusionChartsPipe } from "./src/fusioncharts.pipe"; 5 | import { FusionChartsStatic } from "./src/fusioncharts.service"; 6 | import * as i0 from "@angular/core"; 7 | import * as i1 from "./src/fusioncharts.component"; 8 | import * as i2 from "./src/fusioncharts.directive"; 9 | import * as i3 from "./src/fusioncharts.pipe"; 10 | export { FusionChartsComponent, FusionChartsDirective, FusionChartsPipe, FusionChartsStatic, }; 11 | export declare class FusionChartsModule { 12 | static forRoot(fcCore?: any, ...fcModules: any[]): ModuleWithProviders; 13 | static fcRoot(fcCore?: any, ...fcModules: any[]): void; 14 | static ɵfac: i0.ɵɵFactoryDeclaration; 15 | static ɵmod: i0.ɵɵNgModuleDeclaration; 16 | static ɵinj: i0.ɵɵInjectorDeclaration; 17 | } 18 | -------------------------------------------------------------------------------- /src/assets/images/fc-min-logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Icon Copy 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /examples/ng-app-17/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ng-app-17", 3 | "version": "0.0.0", 4 | "scripts": { 5 | "ng": "ng", 6 | "start": "ng serve", 7 | "build": "ng build", 8 | "watch": "ng build --watch --configuration development", 9 | "test": "ng test" 10 | }, 11 | "private": true, 12 | "dependencies": { 13 | "@angular/animations": "^17.3.0", 14 | "@angular/common": "^17.3.0", 15 | "@angular/compiler": "^17.3.0", 16 | "@angular/core": "^17.3.0", 17 | "@angular/forms": "^17.3.0", 18 | "@angular/platform-browser": "^17.3.0", 19 | "@angular/platform-browser-dynamic": "^17.3.0", 20 | "@angular/router": "^17.3.0", 21 | "angular-fusioncharts": "^4.1.1", 22 | "fusioncharts": "^4.0.2", 23 | "rxjs": "~7.8.0", 24 | "tslib": "^2.3.0", 25 | "zone.js": "~0.14.3" 26 | }, 27 | "devDependencies": { 28 | "@angular-devkit/build-angular": "^17.3.8", 29 | "@angular/cli": "^17.3.8", 30 | "@angular/compiler-cli": "^17.3.0", 31 | "@types/jasmine": "~5.1.0", 32 | "jasmine-core": "~5.1.0", 33 | "karma": "~6.4.0", 34 | "karma-chrome-launcher": "~3.2.0", 35 | "karma-coverage": "~2.2.0", 36 | "karma-jasmine": "~5.1.0", 37 | "karma-jasmine-html-reporter": "~2.1.0", 38 | "typescript": "~5.4.2" 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /examples/ng-app-18/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ng-app-18", 3 | "version": "0.0.0", 4 | "scripts": { 5 | "ng": "ng", 6 | "start": "ng serve", 7 | "build": "ng build", 8 | "watch": "ng build --watch --configuration development", 9 | "test": "ng test" 10 | }, 11 | "private": true, 12 | "dependencies": { 13 | "@angular/animations": "^18.0.0", 14 | "@angular/common": "^18.0.0", 15 | "@angular/compiler": "^18.0.0", 16 | "@angular/core": "^18.0.0", 17 | "@angular/forms": "^18.0.0", 18 | "@angular/platform-browser": "^18.0.0", 19 | "@angular/platform-browser-dynamic": "^18.0.0", 20 | "@angular/router": "^18.0.0", 21 | "angular-fusioncharts": "^4.1.1", 22 | "fusioncharts": "^4.0.2", 23 | "rxjs": "~7.8.0", 24 | "tslib": "^2.3.0", 25 | "zone.js": "~0.14.3" 26 | }, 27 | "devDependencies": { 28 | "@angular-devkit/build-angular": "^18.0.7", 29 | "@angular/cli": "^18.0.7", 30 | "@angular/compiler-cli": "^18.0.0", 31 | "@types/jasmine": "~5.1.0", 32 | "jasmine-core": "~5.1.0", 33 | "karma": "~6.4.0", 34 | "karma-chrome-launcher": "~3.2.0", 35 | "karma-coverage": "~2.2.0", 36 | "karma-jasmine": "~5.1.0", 37 | "karma-jasmine-html-reporter": "~2.1.0", 38 | "typescript": "~5.4.2" 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /src/app/fusioncharts/ex17/ex17.html: -------------------------------------------------------------------------------- 1 | 12 | 13 |
14 |
15 |
16 | 22 | 23 | 24 |

25 |

26 | 27 | 28 |

29 |
30 |
31 |
32 | 33 | 34 | 38 | -------------------------------------------------------------------------------- /.angular-cli.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json", 3 | "project": { 4 | "name": "ng2-fc" 5 | }, 6 | "apps": [ 7 | { 8 | "root": "src", 9 | "outDir": "docs", 10 | "assets": [ 11 | "assets", 12 | "favicon.ico" 13 | ], 14 | "index": "index.html", 15 | "main": "main.ts", 16 | "polyfills": "polyfills.ts", 17 | "test": "test.ts", 18 | "tsconfig": "tsconfig.app.json", 19 | "testTsconfig": "tsconfig.spec.json", 20 | "prefix": "app", 21 | "styles": [ 22 | "styles.css" 23 | ], 24 | "scripts": [], 25 | "environmentSource": "environments/environment.ts", 26 | "environments": { 27 | "dev": "environments/environment.ts", 28 | "prod": "environments/environment.prod.ts" 29 | } 30 | } 31 | ], 32 | "e2e": { 33 | "protractor": { 34 | "config": "./protractor.conf.js" 35 | } 36 | }, 37 | "lint": [ 38 | { 39 | "project": "src/tsconfig.app.json" 40 | }, 41 | { 42 | "project": "src/tsconfig.spec.json" 43 | }, 44 | { 45 | "project": "e2e/tsconfig.e2e.json" 46 | } 47 | ], 48 | "test": { 49 | "karma": { 50 | "config": "./karma.conf.js" 51 | } 52 | }, 53 | "defaults": { 54 | "styleExt": "css", 55 | "component": {} 56 | } 57 | } 58 | -------------------------------------------------------------------------------- /src/app/fusioncharts/ex8/ex8.html: -------------------------------------------------------------------------------- 1 | 15 | 16 |
17 |
18 |
19 | 24 | 25 | 30 |
31 |
32 |
33 | 34 | 35 | 36 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /karma.conf.js: -------------------------------------------------------------------------------- 1 | // Karma configuration file, see link for more information 2 | // https://karma-runner.github.io/0.13/config/configuration-file.html 3 | 4 | module.exports = function (config) { 5 | config.set({ 6 | basePath: '', 7 | frameworks: ['jasmine', '@angular/cli'], 8 | plugins: [ 9 | require('karma-jasmine'), 10 | require('karma-chrome-launcher'), 11 | require('karma-jasmine-html-reporter'), 12 | require('karma-coverage-istanbul-reporter'), 13 | require('@angular/cli/plugins/karma') 14 | ], 15 | client:{ 16 | clearContext: false // leave Jasmine Spec Runner output visible in browser 17 | }, 18 | files: [ 19 | { pattern: './src/test.ts', watched: false } 20 | ], 21 | preprocessors: { 22 | './src/test.ts': ['@angular/cli'] 23 | }, 24 | mime: { 25 | 'text/x-typescript': ['ts','tsx'] 26 | }, 27 | coverageIstanbulReporter: { 28 | reports: [ 'html', 'lcovonly' ], 29 | fixWebpackSourcePaths: true 30 | }, 31 | angularCli: { 32 | environment: 'dev' 33 | }, 34 | reporters: config.angularCli && config.angularCli.codeCoverage 35 | ? ['progress', 'coverage-istanbul'] 36 | : ['progress', 'kjhtml'], 37 | port: 9876, 38 | colors: true, 39 | logLevel: config.LOG_INFO, 40 | autoWatch: true, 41 | browsers: ['Chrome'], 42 | singleRun: false 43 | }); 44 | }; 45 | -------------------------------------------------------------------------------- /src/app/fusioncharts/ex10/ex10.html: -------------------------------------------------------------------------------- 1 | 12 | 13 |
14 |
15 |
16 | 21 | 22 | 23 | 29 | 30 | 31 |
32 | 35 |
36 |
37 |
38 |
39 | 40 | 41 | 42 | 43 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /src/angular-fusioncharts/index.ts: -------------------------------------------------------------------------------- 1 | import { NgModule, ModuleWithProviders } from "@angular/core"; 2 | import { FusionChartsComponent } from "./src/fusioncharts.component"; 3 | import { FusionChartsDirective } from "./src/fusioncharts.directive"; 4 | import { FusionChartsPipe } from "./src/fusioncharts.pipe"; 5 | import { 6 | FusionChartsStatic, 7 | FusionChartsService, 8 | } from "./src/fusioncharts.service"; 9 | 10 | export { 11 | FusionChartsComponent, 12 | FusionChartsDirective, 13 | FusionChartsPipe, 14 | FusionChartsStatic, 15 | }; 16 | 17 | @NgModule({ 18 | declarations: [ 19 | FusionChartsComponent, 20 | FusionChartsDirective, 21 | FusionChartsPipe, 22 | ], 23 | exports: [FusionChartsComponent, FusionChartsDirective, FusionChartsPipe], 24 | providers: [FusionChartsService, FusionChartsStatic], 25 | }) 26 | export class FusionChartsModule { 27 | // Keep this for backward compatible 28 | static forRoot( 29 | fcCore?: any, 30 | ...fcModules: any[] 31 | ): ModuleWithProviders { 32 | return { 33 | ngModule: FusionChartsModule, 34 | providers: [ 35 | { 36 | provide: FusionChartsStatic, 37 | useValue: { 38 | core: fcCore, 39 | modules: fcModules, 40 | }, 41 | }, 42 | ], 43 | }; 44 | } 45 | 46 | static fcRoot(fcCore?: any, ...fcModules: any[]) { 47 | FusionChartsService.setFCRoot({ 48 | core: fcCore, 49 | modules: fcModules, 50 | }); 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /src/app/fusioncharts/ex2/ex2.ts: -------------------------------------------------------------------------------- 1 | import { Component, AfterViewInit} from '@angular/core'; 2 | 3 | import fcDemos from '../samplecode'; 4 | 5 | declare var Prism; 6 | import SelectedSingleton from '../services/selected.singleton'; 7 | 8 | @Component({ 9 | selector: 'chart', 10 | templateUrl: 'ex2.html', 11 | standalone: false 12 | }) 13 | 14 | export class Ex2 { 15 | demoId = 'ex2'; 16 | sampleCode = fcDemos; 17 | dataSource = { 18 | "chart": { 19 | "caption": "Recommended Portfolio Split", 20 | "subCaption" : "For a net-worth of $1M", 21 | "showValues":"1", 22 | "showPercentInTooltip" : "0", 23 | "numberPrefix" : "$", 24 | "enableMultiSlicing":"1", 25 | "theme": "fusion" 26 | }, 27 | "data": [{ 28 | "label": "Equity", 29 | "value": "300000" 30 | }, { 31 | "label": "Debt", 32 | "value": "230000" 33 | }, { 34 | "label": "Bullion", 35 | "value": "180000" 36 | }, { 37 | "label": "Real-estate", 38 | "value": "270000" 39 | }, { 40 | "label": "Insurance", 41 | "value": "20000" 42 | }] 43 | } 44 | 45 | constructor () { 46 | 47 | } 48 | ngOnInit(){ 49 | setTimeout(() => { 50 | SelectedSingleton.change(this.sampleCode['ex2'].title); 51 | }) 52 | } 53 | ngAfterViewInit() { 54 | Prism && Prism.highlightAll(); 55 | } 56 | 57 | } 58 | -------------------------------------------------------------------------------- /src/app/fusioncharts/ex14/ex14.ts: -------------------------------------------------------------------------------- 1 | import { Component, NgZone} from '@angular/core'; 2 | 3 | import fcDemos from '../samplecode'; 4 | import SelectedSingleton from '../services/selected.singleton'; 5 | declare var Prism; 6 | 7 | @Component({ 8 | selector: 'chart', 9 | templateUrl: 'ex14.html', 10 | styleUrls: [ 11 | '../ex.css' 12 | ], 13 | standalone: false 14 | }) 15 | export class Ex14 { 16 | demoId = 'ex14'; 17 | 18 | sampleCode = fcDemos; 19 | 20 | dataSource = { 21 | "chart": { 22 | "caption": "Countries With Most Oil Reserves [2017-18]", 23 | "subCaption": "In MMbbl = One Million barrels", 24 | "xAxisName": "Country", 25 | "yAxisName": "Reserves (MMbbl)", 26 | "numberSuffix": "K", 27 | "theme": "gammel", 28 | }, 29 | "data": [{ 30 | "label": "Venezuela", 31 | "value": "290" 32 | }, { 33 | "label": "Saudi", 34 | "value": "260" 35 | }, { 36 | "label": "Canada", 37 | "value": "180" 38 | }, { 39 | "label": "Iran", 40 | "value": "140" 41 | }, { 42 | "label": "Russia", 43 | "value": "115" 44 | }, { 45 | "label": "UAE", 46 | "value": "100" 47 | }, { 48 | "label": "US", 49 | "value": "30" 50 | }, { 51 | "label": "China", 52 | "value": "30" 53 | }] 54 | }; 55 | constructor(private zone:NgZone){} 56 | 57 | ngAfterViewInit() { 58 | Prism && Prism.highlightAll(); 59 | } 60 | ngOnInit(){ 61 | setTimeout(() => { 62 | SelectedSingleton.change(this.sampleCode['ex14'].title); 63 | }) 64 | } 65 | } 66 | -------------------------------------------------------------------------------- /src/app/fusioncharts/ex4/ex4.ts: -------------------------------------------------------------------------------- 1 | import { Component, AfterViewInit, ViewEncapsulation} from '@angular/core'; 2 | 3 | import fcDemos from '../samplecode'; 4 | 5 | declare var Prism; 6 | import SelectedSingleton from '../services/selected.singleton'; 7 | @Component({ 8 | selector: 'chart', 9 | encapsulation: ViewEncapsulation.None, 10 | templateUrl: 'ex4.html', 11 | styles: [` 12 | .chart1 div { 13 | float: left; 14 | } 15 | `], 16 | standalone: false 17 | }) 18 | 19 | export class Ex4 { 20 | demoId = 'ex4'; 21 | sampleCode = fcDemos; 22 | dataSource = { 23 | "chart": { 24 | "caption": "Countries With Most Oil Reserves [2017-18]", 25 | "subCaption": "In MMbbl = One Million barrels", 26 | "xAxisName": "Country", 27 | "yAxisName": "Reserves (MMbbl)", 28 | "numberSuffix": "K", 29 | "theme": "fusion", 30 | }, 31 | "data": [{ 32 | "label": "Venezuela", 33 | "value": "290" 34 | }, { 35 | "label": "Saudi", 36 | "value": "260" 37 | }, { 38 | "label": "Canada", 39 | "value": "180" 40 | }, { 41 | "label": "Iran", 42 | "value": "140" 43 | }, { 44 | "label": "Russia", 45 | "value": "115" 46 | }, { 47 | "label": "UAE", 48 | "value": "100" 49 | }, { 50 | "label": "US", 51 | "value": "30" 52 | }, { 53 | "label": "China", 54 | "value": "30" 55 | }] 56 | }; 57 | 58 | constructor () { 59 | 60 | } 61 | ngOnInit(){ 62 | // SelectedSingleton.change(this.sampleCode['ex4'].title); 63 | } 64 | ngAfterViewInit() { 65 | Prism && Prism.highlightAll(); 66 | } 67 | }; 68 | -------------------------------------------------------------------------------- /src/app/fusioncharts/ex19/ex19.ts: -------------------------------------------------------------------------------- 1 | import { 2 | Component, 3 | NgZone 4 | } from '@angular/core'; 5 | 6 | import fcDemos from '../samplecode'; 7 | import SelectedSingleton from '../services/selected.singleton'; 8 | declare var Prism; 9 | 10 | @Component({ 11 | selector: 'chart', 12 | templateUrl: './ex19.html', 13 | styleUrls: [ 14 | '../ex.css' 15 | ], 16 | standalone: false 17 | }) 18 | export class Ex19 { 19 | demoId = 'ex19'; 20 | sampleCode = fcDemos; 21 | dataSource: any; 22 | chartObj: any; 23 | constructor(private zone: NgZone) { 24 | this.dataSource = { 25 | "chart": { 26 | "caption": "Market Share of Web Servers", 27 | "plottooltext": "$percentValue of web servers run on $label servers", 28 | "showLegend": "1", 29 | "showPercentValues": "1", 30 | "legendPosition": "bottom", 31 | "useDataPlotColorForLabels": "1", 32 | "theme": "fusion", 33 | }, 34 | "data": [{ 35 | "label": "Apache", 36 | "value": "32647479" 37 | }, { 38 | "label": "Microsoft", 39 | "value": "22100932" 40 | }, { 41 | "label": "Zeus", 42 | "value": "14376" 43 | }, { 44 | "label": "Other", 45 | "value": "18674221" 46 | }] 47 | }; 48 | } 49 | 50 | initialized($event){ 51 | this.chartObj = $event.chart; 52 | } 53 | 54 | sliceOut(){ 55 | this.chartObj.slicePlotItem(1, true); 56 | } 57 | 58 | reset(){ 59 | this.chartObj.slicePlotItem(1, false); 60 | } 61 | 62 | 63 | ngOnInit() { 64 | setTimeout(() => { 65 | SelectedSingleton.change(this.sampleCode['ex19'].title); 66 | }) 67 | } 68 | } 69 | -------------------------------------------------------------------------------- /src/app/fusioncharts/ex12/ex12.ts: -------------------------------------------------------------------------------- 1 | import { Component, NgZone} from '@angular/core'; 2 | 3 | import fcDemos from '../samplecode'; 4 | import SelectedSingleton from '../services/selected.singleton'; 5 | declare var Prism; 6 | 7 | @Component({ 8 | selector: 'chart', 9 | templateUrl: 'ex12.html', 10 | styleUrls: [ 11 | '../ex.css' 12 | ], 13 | standalone: false 14 | }) 15 | export class Ex12 { 16 | demoId = 'ex12'; 17 | 18 | sampleCode = fcDemos; 19 | 20 | dataSource = { 21 | "chart": { 22 | "caption": "Nordstorm's Customer Satisfaction Score for 2017", 23 | "lowerLimit": "0", 24 | "upperLimit": "100", 25 | "showValue": "1", 26 | "numberSuffix": "%", 27 | "theme": "fusion", 28 | "showToolTip": "0" 29 | }, 30 | "colorRange": { 31 | "color": [{ 32 | "minValue": "0", 33 | "maxValue": "50", 34 | "code": "#F2726F" 35 | }, { 36 | "minValue": "50", 37 | "maxValue": "75", 38 | "code": "#FFC533" 39 | }, { 40 | "minValue": "75", 41 | "maxValue": "100", 42 | "code": "#62B58F" 43 | }] 44 | }, 45 | "dials": { 46 | "dial": [{ 47 | "value": "81" 48 | }] 49 | } 50 | } 51 | 52 | constructor(private zone:NgZone){} 53 | 54 | ngAfterViewInit() { 55 | Prism && Prism.highlightAll(); 56 | } 57 | ngOnInit(){ 58 | setTimeout(() => { 59 | SelectedSingleton.change(this.sampleCode['ex12'].title); 60 | }); 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /src/app/fusioncharts/ex21/ex21.ts: -------------------------------------------------------------------------------- 1 | import { 2 | Component, 3 | NgZone 4 | } from '@angular/core'; 5 | 6 | import fcDemos from '../samplecode'; 7 | import SelectedSingleton from '../services/selected.singleton'; 8 | declare var Prism; 9 | 10 | @Component({ 11 | selector: 'chart', 12 | templateUrl: './ex21.html', 13 | styleUrls: [ 14 | '../ex.css' 15 | ], 16 | standalone: false 17 | }) 18 | export class Ex21 { 19 | demoId = 'ex21'; 20 | sampleCode = fcDemos; 21 | dataSource: any; 22 | chartObj:any; 23 | chart: any = 'column2d'; 24 | 25 | constructor(private zone: NgZone) { 26 | this.dataSource = { 27 | "chart": { 28 | "caption": "Recommended Portfolio Split", 29 | "subCaption" : "For a net-worth of $1M", 30 | "showValues":"1", 31 | "showPercentInTooltip" : "0", 32 | "numberPrefix" : "$", 33 | "enableMultiSlicing":"1", 34 | "theme": "fusion" 35 | }, 36 | "data": [ 37 | { 38 | "label": "Equity", 39 | "value": "300000" 40 | }, { 41 | "label": "Debt", 42 | "value": "230000" 43 | }, { 44 | "label": "Bullion", 45 | "value": "180000" 46 | }, { 47 | "label": "Real-estate", 48 | "value": "270000" 49 | }, { 50 | "label": "Insurance", 51 | "value": "20000" 52 | } 53 | ] 54 | }; 55 | } 56 | 57 | initialized($event){ 58 | this.chartObj = $event.chart; 59 | } 60 | 61 | onSelectionChange(chart){ 62 | this.chart = chart; 63 | this.chartObj.chartType(chart); 64 | } 65 | 66 | ngOnInit() { 67 | setTimeout(() => { 68 | SelectedSingleton.change(this.sampleCode['ex21'].title); 69 | }) 70 | } 71 | } 72 | -------------------------------------------------------------------------------- /src/app/fusioncharts/ex15/ex15.ts: -------------------------------------------------------------------------------- 1 | import { Component, NgZone} from '@angular/core'; 2 | 3 | import fcDemos from '../samplecode'; 4 | import SelectedSingleton from '../services/selected.singleton'; 5 | declare var Prism; 6 | 7 | @Component({ 8 | selector: 'chart', 9 | templateUrl: 'ex15.html', 10 | styleUrls: [ 11 | '../ex.css' 12 | ], 13 | standalone: false 14 | }) 15 | export class Ex15 { 16 | demoId = 'ex15'; 17 | 18 | sampleCode = fcDemos; 19 | dataSource: any; 20 | message: any; 21 | constructor(private zone:NgZone){ 22 | this.dataSource = { 23 | "chart": { 24 | "caption": "Countries With Most Oil Reserves [2017-18]", 25 | "subCaption": "In MMbbl = One Million barrels", 26 | "xAxisName": "Country", 27 | "yAxisName": "Reserves (MMbbl)", 28 | "numberSuffix": "K", 29 | "theme": "fusion", 30 | }, 31 | "data": [{ 32 | "label": "Venezuela", 33 | "value": "290" 34 | }, { 35 | "label": "Saudi", 36 | "value": "260" 37 | }, { 38 | "label": "Canada", 39 | "value": "180" 40 | }, { 41 | "label": "Iran", 42 | "value": "140" 43 | }, { 44 | "label": "Russia", 45 | "value": "115" 46 | }, { 47 | "label": "UAE", 48 | "value": "100" 49 | }, { 50 | "label": "US", 51 | "value": "30" 52 | }, { 53 | "label": "China", 54 | "value": "30" 55 | }] 56 | }; 57 | } 58 | 59 | chartRender($event){ 60 | this.zone.run(() => { 61 | this.message = 'Chart has completed rendering.'; 62 | }) 63 | } 64 | 65 | ngAfterViewInit() { 66 | Prism && Prism.highlightAll(); 67 | } 68 | ngOnInit(){ 69 | setTimeout(() => { 70 | SelectedSingleton.change(this.sampleCode['ex15'].title); 71 | }) 72 | } 73 | } 74 | -------------------------------------------------------------------------------- /src/app/fusioncharts/ex7/ex7.ts: -------------------------------------------------------------------------------- 1 | import { 2 | Component, 3 | NgZone 4 | } from '@angular/core'; 5 | 6 | import fcDemos from '../samplecode'; 7 | import SelectedSingleton from '../services/selected.singleton'; 8 | declare var Prism; 9 | 10 | @Component({ 11 | selector: 'chart', 12 | templateUrl: 'ex7.html', 13 | styleUrls: [ 14 | '../ex.css' 15 | ], 16 | standalone: false 17 | }) 18 | export class Ex7 { 19 | demoId = 'ex7'; 20 | 21 | sampleCode = fcDemos; 22 | 23 | dataSource = { 24 | "chart": { 25 | "caption": "Countries With Most Oil Reserves [2017-18]", 26 | "subCaption": "In MMbbl = One Million barrels", 27 | "xAxisName": "Country", 28 | "yAxisName": "Reserves (MMbbl)", 29 | "numberSuffix": "K", 30 | "theme": "fusion", 31 | }, 32 | "data": [{ 33 | "label": "Venezuela", 34 | "value": "290" 35 | }, { 36 | "label": "Saudi", 37 | "value": "260" 38 | }, { 39 | "label": "Canada", 40 | "value": "180" 41 | }, { 42 | "label": "Iran", 43 | "value": "140" 44 | }, { 45 | "label": "Russia", 46 | "value": "115" 47 | }, { 48 | "label": "UAE", 49 | "value": "100" 50 | }, { 51 | "label": "US", 52 | "value": "30" 53 | }, { 54 | "label": "China", 55 | "value": "30" 56 | }] 57 | }; 58 | 59 | selectedLabel = ""; 60 | selectedValue = ""; 61 | 62 | update($event) { 63 | this.zone.run(() => { 64 | this.selectedLabel = $event.dataObj.categoryLabel; 65 | this.selectedValue = $event.dataObj.displayValue; 66 | }) 67 | } 68 | 69 | 70 | ngOnInit() { 71 | setTimeout(() => { 72 | SelectedSingleton.change(this.sampleCode['ex7'].title); 73 | }) 74 | } 75 | constructor(private zone: NgZone) {} 76 | 77 | ngAfterViewInit() { 78 | Prism && Prism.highlightAll(); 79 | } 80 | } 81 | -------------------------------------------------------------------------------- /src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, ViewEncapsulation } from '@angular/core'; 2 | import { Router } from '@angular/router'; 3 | import '../../node_modules/prismjs/prism.js'; 4 | import 'codemirror/mode/javascript/javascript'; 5 | import 'codemirror/mode/xml/xml'; 6 | import CodeSnippets from './quickstart-snippet'; 7 | import SelectedSingleton from './fusioncharts/services/selected.singleton'; 8 | import SampleCode from './fusioncharts/samplecode'; 9 | 10 | @Component({ 11 | selector: 'app', 12 | styleUrls: [ 13 | './app.component.css', 14 | '../../node_modules/prismjs/themes/prism.css', 15 | './themes/fusioncharts.theme.fusion.css', 16 | './themes/github-css/codemirror.css', 17 | './themes/github-css/dracula.css', 18 | './themes/github-css/style.css' 19 | ], 20 | encapsulation: ViewEncapsulation.None, 21 | templateUrl: './app.component.html', 22 | standalone: false 23 | }) 24 | export class AppComponent { 25 | installCode = CodeSnippets.installCode; 26 | installFusionCharts = CodeSnippets.installFusionCharts; 27 | includeInModule = CodeSnippets.importCode; 28 | useDirective = CodeSnippets.useDirective; 29 | renderFusionMaps = CodeSnippets.renderFusionMaps; 30 | mapHtml = CodeSnippets.mapHtml; 31 | setupFusionTime = CodeSnippets.setupFusionTime; 32 | fusionTimeComponentCode = CodeSnippets.fusionTimeComponentCode; 33 | fusionTimeTemplateCode = CodeSnippets.fusionTimeTemplateCode; 34 | 35 | modalClasses = 'show fade in'; 36 | isModalOpen = false; 37 | 38 | sampleCode = SampleCode; 39 | selectedTitle = ''; 40 | 41 | toggleModal = state => { 42 | this.isModalOpen = state; 43 | }; 44 | 45 | openPage = route => { 46 | this.isModalOpen = false; 47 | this.router.navigate([route]); 48 | }; 49 | 50 | constructor(private router: Router) { 51 | SelectedSingleton.on = value => { 52 | this.selectedTitle = value; 53 | }; 54 | } 55 | 56 | updateId(id) {} 57 | } 58 | -------------------------------------------------------------------------------- /src/app/fusioncharts/ex8/ex8.ts: -------------------------------------------------------------------------------- 1 | import { Component, AfterViewInit} from '@angular/core'; 2 | 3 | import fcDemos from '../samplecode'; 4 | import SelectedSingleton from '../services/selected.singleton'; 5 | declare var Prism; 6 | 7 | @Component({ 8 | selector: 'chart', 9 | templateUrl: 'ex8.html', 10 | styleUrls: [ 11 | '../ex.css' 12 | ], 13 | standalone: false 14 | }) 15 | 16 | export class Ex8 { 17 | demoId = 'ex8'; 18 | sampleCode = fcDemos; 19 | dataSource:any = { 20 | "chart": { 21 | "caption": "Countries With Most Oil Reserves [2017-18]", 22 | "subCaption": "In MMbbl = One Million barrels", 23 | "xAxisName": "Country", 24 | "yAxisName": "Reserves (MMbbl)", 25 | "numberSuffix": "K", 26 | "theme": "fusion", 27 | }, 28 | "data": [{ 29 | "label": "Venezuela", 30 | "value": "290" 31 | }, { 32 | "label": "Saudi", 33 | "value": "260" 34 | }, { 35 | "label": "Canada", 36 | "value": "180" 37 | }, { 38 | "label": "Iran", 39 | "value": "140" 40 | }, { 41 | "label": "Russia", 42 | "value": "115" 43 | }, { 44 | "label": "UAE", 45 | "value": "100" 46 | }, { 47 | "label": "US", 48 | "value": "30" 49 | }, { 50 | "label": "China", 51 | "value": "30" 52 | }] 53 | }; 54 | 55 | changeBackgroundColor = function () { 56 | this.dataSource.chart.bgColor = "#efefef"; 57 | }; 58 | 59 | changeCaptionTextAlignment = function () { 60 | this.dataSource.chart.captionAlignment = "left"; 61 | }; 62 | 63 | reset(){ 64 | this.dataSource.chart.bgColor = "white"; 65 | this.dataSource.chart.captionAlignment = "center"; 66 | } 67 | 68 | constructor () { 69 | 70 | } 71 | ngOnInit(){ 72 | setTimeout(() => { 73 | SelectedSingleton.change(this.sampleCode['ex8'].title); 74 | }) 75 | } 76 | ngAfterViewInit() { 77 | Prism && Prism.highlightAll(); 78 | } 79 | } 80 | -------------------------------------------------------------------------------- /src/app/fusioncharts/ex1/ex1.ts: -------------------------------------------------------------------------------- 1 | import { 2 | Component, 3 | AfterViewInit 4 | } from '@angular/core'; 5 | 6 | import fcDemos from '../samplecode'; 7 | import SelectedSingleton from '../services/selected.singleton'; 8 | 9 | declare var Prism; 10 | 11 | @Component({ 12 | selector: 'chart', 13 | templateUrl: 'ex1.html', 14 | standalone: false 15 | }) 16 | 17 | export class Ex1 implements AfterViewInit { 18 | demoId = 'ex1'; 19 | sampleCode = fcDemos; 20 | dataSource: Object; 21 | chartConfig: Object; 22 | tabOptions:string[]; 23 | 24 | constructor() { 25 | this.sampleCode = fcDemos; 26 | 27 | this.chartConfig = { 28 | width: '100%', 29 | height: '400', 30 | type: "column2d", 31 | dataFormat: "json", 32 | creditLabel: 'false' 33 | }; 34 | 35 | this.dataSource = { 36 | "chart": { 37 | "caption": "Countries With Most Oil Reserves [2017-18]", 38 | "subCaption": "In MMbbl = One Million barrels", 39 | "xAxisName": "Country", 40 | "yAxisName": "Reserves (MMbbl)", 41 | "numberSuffix": "K", 42 | "theme": "fusion", 43 | }, 44 | "data": [{ 45 | "label": "Venezuela", 46 | "value": "290" 47 | }, { 48 | "label": "Saudi", 49 | "value": "260" 50 | }, { 51 | "label": "Canada", 52 | "value": "180" 53 | }, { 54 | "label": "Iran", 55 | "value": "140" 56 | }, { 57 | "label": "Russia", 58 | "value": "115" 59 | }, { 60 | "label": "UAE", 61 | "value": "100" 62 | }, { 63 | "label": "US", 64 | "value": "30" 65 | }, { 66 | "label": "China", 67 | "value": "30" 68 | }] 69 | }; 70 | 71 | } 72 | 73 | ngOnInit(){ 74 | setTimeout(() => { 75 | SelectedSingleton.change(this.sampleCode['ex1'].title); 76 | }) 77 | } 78 | 79 | ngAfterViewInit() { 80 | Prism && Prism.highlightAll(); 81 | } 82 | 83 | } 84 | -------------------------------------------------------------------------------- /src/app/fusioncharts/ex6/ex6.ts: -------------------------------------------------------------------------------- 1 | import { Component, AfterViewInit} from '@angular/core'; 2 | 3 | import fcDemos from '../samplecode'; 4 | import SelectedSingleton from '../services/selected.singleton'; 5 | 6 | declare var Prism; 7 | @Component({ 8 | selector: 'chart', 9 | templateUrl: 'ex6.html', 10 | standalone: false 11 | }) 12 | 13 | export class Ex6 { 14 | demoId = 'ex6'; 15 | type = "Column2D"; 16 | width = "100%"; 17 | height = "400"; 18 | dataFormat = "json"; 19 | sampleCode = fcDemos; 20 | dataSource: any = { 21 | "chart": { 22 | "caption": "Countries With Most Oil Reserves [2017-18]", 23 | "subCaption": "In MMbbl = One Million barrels", 24 | "xAxisName": "Country", 25 | "yAxisName": "Reserves (MMbbl)", 26 | "numberSuffix": "K", 27 | "theme": "fusion", 28 | "updateAnimDuration":"0.4" 29 | }, 30 | "data": [{ 31 | "label": "Venezuela", 32 | "value": "290" 33 | }, { 34 | "label": "Saudi", 35 | "value": "260" 36 | }, { 37 | "label": "Canada", 38 | "value": "180" 39 | }, { 40 | "label": "Iran", 41 | "value": "140" 42 | }, { 43 | "label": "Russia", 44 | "value": "115" 45 | }, { 46 | "label": "UAE", 47 | "value": "100" 48 | }, { 49 | "label": "US", 50 | "value": "30" 51 | }, { 52 | "label": "China", 53 | "value": "30" 54 | }] 55 | }; 56 | 57 | getRandomNumber = function () { 58 | var max = 290, min = 30; 59 | return Math.round(((max - min) * Math.random()) + min); 60 | } 61 | updateMyChartData() { 62 | 63 | this.dataSource.data[2].value = this.getRandomNumber(); 64 | this.dataSource.data[3].value = this.getRandomNumber(); 65 | } 66 | 67 | ngOnInit(){ 68 | setTimeout(() => { 69 | SelectedSingleton.change(this.sampleCode['ex6'].title); 70 | }) 71 | } 72 | 73 | constructor () { 74 | 75 | } 76 | ngAfterViewInit() { 77 | Prism && Prism.highlightAll(); 78 | } 79 | } 80 | -------------------------------------------------------------------------------- /src/app/fusioncharts/ex3/ex3.ts: -------------------------------------------------------------------------------- 1 | import { Component, AfterViewInit} from '@angular/core'; 2 | 3 | import fcDemos from '../samplecode'; 4 | import SelectedSingleton from '../services/selected.singleton'; 5 | declare var Prism; 6 | 7 | @Component({ 8 | selector: 'chart', 9 | templateUrl: 'ex3.html', 10 | standalone: false 11 | }) 12 | 13 | export class Ex3 { 14 | demoId = 'ex3'; 15 | sampleCode = fcDemos; 16 | dataSource = { 17 | "chart": { 18 | "caption": "Expense Analysis", 19 | "subCaption": "ACME Inc.", 20 | "xAxisname": "Region", 21 | "yAxisName": "Amount (In USD)", 22 | "numberPrefix": "$", 23 | "exportenabled": "1", 24 | "theme": "fusion" 25 | }, 26 | "categories": [{ 27 | "category": [{ 28 | "label": "East" 29 | }, { 30 | "label": "West" 31 | }, { 32 | "label": "South" 33 | }, { 34 | "label": "North" 35 | }] 36 | }], 37 | "dataset": [{ 38 | "seriesName": "Actual Expenses", 39 | "data": [{ 40 | "value": "1441290" 41 | }, { 42 | "value": "855912" 43 | }, { 44 | "value": "911404" 45 | }, { 46 | "value": "648136" 47 | }] 48 | }, { 49 | "seriesName": "Budgeted Expenses", 50 | "renderAs": "line", 51 | "data": [{ 52 | "value": "1297430" 53 | }, { 54 | "value": "776485" 55 | }, { 56 | "value": "685352" 57 | }, { 58 | "value": "726791" 59 | }] 60 | }, { 61 | "seriesName": "Unknown liabilities", 62 | "renderAs": "area", 63 | "showAnchors" : "0", 64 | "data": [{ 65 | "value": "143860" 66 | }, { 67 | "value": "79427" 68 | }, { 69 | "value": "226052" 70 | }, { 71 | "value": "78655" 72 | }] 73 | }] 74 | }; 75 | 76 | constructor () { 77 | 78 | } 79 | ngOnInit(){ 80 | setTimeout(() => { 81 | SelectedSingleton.change(this.sampleCode['ex3'].title); 82 | }) 83 | } 84 | ngAfterViewInit() { 85 | Prism && Prism.highlightAll(); 86 | } 87 | } 88 | -------------------------------------------------------------------------------- /src/polyfills.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * This file includes polyfills needed by Angular and is loaded before the app. 3 | * You can add your own extra polyfills to this file. 4 | * 5 | * This file is divided into 2 sections: 6 | * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. 7 | * 2. Application imports. Files imported after ZoneJS that should be loaded before your main 8 | * file. 9 | * 10 | * The current setup is for so-called "evergreen" browsers; the last versions of browsers that 11 | * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), 12 | * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. 13 | * 14 | * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html 15 | */ 16 | 17 | /*************************************************************************************************** 18 | * BROWSER POLYFILLS 19 | */ 20 | 21 | /** IE9, IE10 and IE11 requires all of the following polyfills. **/ 22 | // import 'core-js/es6/symbol'; 23 | // import 'core-js/es6/object'; 24 | // import 'core-js/es6/function'; 25 | // import 'core-js/es6/parse-int'; 26 | // import 'core-js/es6/parse-float'; 27 | // import 'core-js/es6/number'; 28 | // import 'core-js/es6/math'; 29 | // import 'core-js/es6/string'; 30 | // import 'core-js/es6/date'; 31 | // import 'core-js/es6/array'; 32 | // import 'core-js/es6/regexp'; 33 | // import 'core-js/es6/map'; 34 | // import 'core-js/es6/set'; 35 | 36 | 37 | /** Evergreen browsers require these. **/ 38 | import 'core-js/es/reflect'; 39 | import 'core-js/es/reflect'; 40 | 41 | 42 | 43 | /*************************************************************************************************** 44 | * Zone JS is required by Angular itself. 45 | */ 46 | import 'zone.js'; // Included with Angular CLI. 47 | 48 | 49 | 50 | /*************************************************************************************************** 51 | * APPLICATION IMPORTS 52 | */ 53 | 54 | /** 55 | * Date, currency, decimal and percent pipes. 56 | * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10 57 | */ 58 | // import 'intl'; // Run `npm install --save intl`. 59 | -------------------------------------------------------------------------------- /examples/ng-app-17/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from "@angular/core"; 2 | import { FusionChartsModule } from "angular-fusioncharts"; 3 | 4 | // Import FusionCharts library and chart modules 5 | import FusionCharts from "fusioncharts"; 6 | 7 | import Column2D from "fusioncharts/fusioncharts.charts"; 8 | 9 | // Step 5 - Include the theme as fusion 10 | import FusionTheme from "fusioncharts/themes/fusioncharts.theme.fusion"; 11 | 12 | // Pass the fusioncharts library and chart modules= 13 | @Component({ 14 | standalone: true, 15 | selector: "app-root", 16 | templateUrl: "./app.component.html", 17 | imports: [FusionChartsModule] 18 | }) 19 | export class AppComponent { 20 | dataSource: Object; 21 | constructor() { 22 | FusionChartsModule.fcRoot(FusionCharts, Column2D, FusionTheme); 23 | //STEP 2 - Chart Data 24 | const chartData = [ 25 | { 26 | label: "Venezuela", 27 | value: "290" 28 | }, 29 | { 30 | label: "Saudi", 31 | value: "260" 32 | }, 33 | { 34 | label: "Canada", 35 | value: "180" 36 | }, 37 | { 38 | label: "Iran", 39 | value: "140" 40 | }, 41 | { 42 | label: "Russia", 43 | value: "115" 44 | }, 45 | { 46 | label: "UAE", 47 | value: "100" 48 | }, 49 | { 50 | label: "US", 51 | value: "30" 52 | }, 53 | { 54 | label: "China", 55 | value: "30" 56 | } 57 | ]; 58 | // STEP 3 - Chart Configuration 59 | const dataSource = { 60 | chart: { 61 | //Set the chart caption 62 | caption: "Countries With Most Oil Reserves [2017-18]", 63 | //Set the chart subcaption 64 | subCaption: "In MMbbl = One Million barrels", 65 | //Set the x-axis name 66 | xAxisName: "Country", 67 | //Set the y-axis name 68 | yAxisName: "Reserves (MMbbl)", 69 | numberSuffix: "K", 70 | //Set the theme for your chart 71 | theme: "fusion" 72 | }, 73 | // Chart Data - from step 2 74 | data: chartData 75 | }; 76 | this.dataSource = dataSource; 77 | } 78 | } -------------------------------------------------------------------------------- /examples/ng-app-18/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from "@angular/core"; 2 | import { FusionChartsModule } from "angular-fusioncharts"; 3 | 4 | // Import FusionCharts library and chart modules 5 | import FusionCharts from "fusioncharts"; 6 | 7 | import Column2D from "fusioncharts/fusioncharts.charts"; 8 | 9 | // Step 5 - Include the theme as fusion 10 | import FusionTheme from "fusioncharts/themes/fusioncharts.theme.fusion"; 11 | 12 | // Pass the fusioncharts library and chart modules= 13 | @Component({ 14 | standalone: true, 15 | selector: "app-root", 16 | templateUrl: "./app.component.html", 17 | imports: [FusionChartsModule] 18 | }) 19 | export class AppComponent { 20 | dataSource: Object; 21 | constructor() { 22 | FusionChartsModule.fcRoot(FusionCharts, Column2D, FusionTheme); 23 | //STEP 2 - Chart Data 24 | const chartData = [ 25 | { 26 | label: "Venezuela", 27 | value: "290" 28 | }, 29 | { 30 | label: "Saudi", 31 | value: "260" 32 | }, 33 | { 34 | label: "Canada", 35 | value: "180" 36 | }, 37 | { 38 | label: "Iran", 39 | value: "140" 40 | }, 41 | { 42 | label: "Russia", 43 | value: "115" 44 | }, 45 | { 46 | label: "UAE", 47 | value: "100" 48 | }, 49 | { 50 | label: "US", 51 | value: "30" 52 | }, 53 | { 54 | label: "China", 55 | value: "30" 56 | } 57 | ]; 58 | // STEP 3 - Chart Configuration 59 | const dataSource = { 60 | chart: { 61 | //Set the chart caption 62 | caption: "Countries With Most Oil Reserves [2017-18]", 63 | //Set the chart subcaption 64 | subCaption: "In MMbbl = One Million barrels", 65 | //Set the x-axis name 66 | xAxisName: "Country", 67 | //Set the y-axis name 68 | yAxisName: "Reserves (MMbbl)", 69 | numberSuffix: "K", 70 | //Set the theme for your chart 71 | theme: "fusion" 72 | }, 73 | // Chart Data - from step 2 74 | data: chartData 75 | }; 76 | this.dataSource = dataSource; 77 | } 78 | } -------------------------------------------------------------------------------- /src/app/fusioncharts/ex18/ex18.ts: -------------------------------------------------------------------------------- 1 | import { 2 | Component, 3 | NgZone 4 | } from '@angular/core'; 5 | 6 | import fcDemos from '../samplecode'; 7 | import SelectedSingleton from '../services/selected.singleton'; 8 | declare var Prism; 9 | 10 | @Component({ 11 | selector: 'chart', 12 | templateUrl: './ex18.html', 13 | styleUrls: [ 14 | '../ex.css' 15 | ], 16 | standalone: false 17 | }) 18 | export class Ex18 { 19 | demoId = 'ex18'; 20 | sampleCode = fcDemos; 21 | dataSource: any; 22 | chartObj: any; 23 | theme: string = 'fusion'; 24 | constructor(private zone: NgZone) { 25 | this.dataSource = { 26 | "chart": { 27 | "caption": "Countries With Most Oil Reserves [2017-18]", 28 | "subCaption": "In MMbbl = One Million barrels", 29 | "xAxisName": "Country", 30 | "yAxisName": "Reserves (MMbbl)", 31 | "numberSuffix": "K", 32 | "theme": "fusion" 33 | }, 34 | "data": [ 35 | { 36 | "label": "Venezuela", 37 | "value": "290" 38 | }, 39 | { 40 | "label": "Saudi", 41 | "value": "260" 42 | }, 43 | { 44 | "label": "Canada", 45 | "value": "180" 46 | }, 47 | { 48 | "label": "Iran", 49 | "value": "140" 50 | }, 51 | { 52 | "label": "Russia", 53 | "value": "115" 54 | }, 55 | { 56 | "label": "UAE", 57 | "value": "100" 58 | }, 59 | { 60 | "label": "US", 61 | "value": "30" 62 | }, 63 | { 64 | "label": "China", 65 | "value": "30" 66 | } 67 | ] 68 | }; 69 | } 70 | 71 | initialized($event){ 72 | this.chartObj = $event.chart; 73 | } 74 | onSelectionChange(theme){ 75 | this.theme = theme; 76 | this.chartObj.setChartAttribute('theme', this.theme); 77 | } 78 | 79 | ngOnInit() { 80 | setTimeout(() => { 81 | SelectedSingleton.change(this.sampleCode['ex18'].title); 82 | }) 83 | } 84 | } 85 | -------------------------------------------------------------------------------- /src/angular-fusioncharts/src/fusioncharts.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | 3 | @Injectable() 4 | export class FusionChartsStatic { 5 | core: any; 6 | modules: Function[]; 7 | } 8 | 9 | @Injectable() 10 | export class FusionChartsService { 11 | static _fcRoot: any = null; 12 | static itemCount: any = 0; 13 | _fusionchartsStatice: FusionChartsStatic; 14 | 15 | static setFCRoot(fcRoot: any) { 16 | FusionChartsService._fcRoot = fcRoot; 17 | } 18 | 19 | static getFCRoot(): any { 20 | return FusionChartsService._fcRoot; 21 | } 22 | 23 | static isFCRootSet() { 24 | return !!FusionChartsService._fcRoot; 25 | } 26 | 27 | constructor(FCStatic: FusionChartsStatic) { 28 | let fcRoot: any; 29 | if (FusionChartsService.isFCRootSet()) { 30 | fcRoot = FusionChartsService.getFCRoot(); 31 | } else { 32 | fcRoot = { 33 | core: FCStatic.core, 34 | modules: FCStatic.modules 35 | }; 36 | } 37 | this.resolveFusionCharts(fcRoot.core, fcRoot.modules); 38 | } 39 | 40 | resolveFusionCharts(core: any, modules: any[]) { 41 | if (core && core.id && core.id === 'FusionCharts') { 42 | this._fusionchartsStatice = core; 43 | } else { 44 | this._fusionchartsStatice = core(); 45 | } 46 | 47 | if (modules) { 48 | modules.forEach((FusionChartsModule: any) => { 49 | // Handle both function and object-with-default (ESM interop) 50 | let moduleFn = FusionChartsModule; 51 | if (FusionChartsModule && typeof FusionChartsModule === 'object' && FusionChartsModule.default) { 52 | moduleFn = FusionChartsModule.default; 53 | } 54 | if ( 55 | (moduleFn.getName && moduleFn.getType) || 56 | (moduleFn.name && moduleFn.type) 57 | ) { 58 | core.addDep(moduleFn); 59 | } else if (typeof moduleFn === 'function') { 60 | moduleFn(core); 61 | } 62 | }); 63 | } 64 | } 65 | 66 | getFusionChartsStatic() { 67 | return this._fusionchartsStatice; 68 | } 69 | 70 | getNextItemCount() { 71 | FusionChartsService.itemCount++; 72 | return FusionChartsService.itemCount; 73 | } 74 | } 75 | -------------------------------------------------------------------------------- /src/app/app.component.css: -------------------------------------------------------------------------------- 1 | .codepreview pre { 2 | height: 592px; 3 | } 4 | 5 | /* From the passportjs.org website */ 6 | .masthead { 7 | margin-bottom: 20px; 8 | padding-bottom: 5px; 9 | border-bottom: 1px solid #eeeeee; 10 | } 11 | 12 | .masthead .logo { 13 | height: 38px; 14 | width: 210px; 15 | } 16 | 17 | .masthead h3 a { 18 | color: #333333; 19 | text-decoration: none; 20 | } 21 | 22 | .masthead h3 a:hover { 23 | color: #333333; 24 | text-decoration: none; 25 | } 26 | 27 | .jumbotron .logo { 28 | height: 60px; 29 | width: 119px; 30 | float: left; 31 | margin-right: 15px; 32 | margin-top: 26px; 33 | } 34 | 35 | .jumbotron p { 36 | margin-left: 133px; 37 | } 38 | 39 | .jumbotron p { 40 | margin-left: 133px; 41 | } 42 | 43 | tabset { 44 | display: none; 45 | } 46 | 47 | .tabset { 48 | display: none; 49 | } 50 | .tabset .nav-tabs { 51 | overflow: hidden; 52 | list-style: none; 53 | margin: 0; 54 | padding: 0; 55 | border-bottom: 1px solid #ccc; 56 | } 57 | 58 | .tabset .nav-tabs li { 59 | float: left; 60 | } 61 | 62 | .tabset .nav-tabs li.active { 63 | border: 1px solid #ccc; 64 | border-bottom-color: #fff; 65 | } 66 | 67 | .ng2-tabs { 68 | margin-top: 20px; 69 | } 70 | 71 | .list-group { 72 | border: 1px solid #ddd; 73 | border-radius: 5px; 74 | padding: 2px 0; 75 | } 76 | 77 | .list-group nav { 78 | height: 1071px; 79 | overflow: auto; 80 | } 81 | 82 | .list-group nav .list-group-item { 83 | border: none; 84 | border-top: 1px solid #ddd; 85 | } 86 | 87 | .list-group nav .list-group-item:first-child { 88 | border-top: none; 89 | } 90 | 91 | .list-group nav .list-group-item.active { 92 | color: #333333; 93 | background-color: #f1f1f1; 94 | } 95 | 96 | .nav-group { 97 | display: flex; 98 | justify-content: space-between; 99 | } 100 | 101 | .badge { 102 | font-size: 12px !important; 103 | border-radius: 5px; 104 | align-self: center; 105 | } 106 | 107 | .badge-selected { 108 | background-color: white; 109 | } 110 | 111 | .badge-normal { 112 | background-color: rgb(75, 63, 160); 113 | color: white; 114 | } 115 | -------------------------------------------------------------------------------- /src/app/themes/github-css/dracula.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | Name: dracula 4 | Author: Michael Kaminsky (http://github.com/mkaminsky11) 5 | 6 | Original dracula color scheme by Zeno Rocha (https://github.com/zenorocha/dracula-theme) 7 | 8 | */ 9 | 10 | 11 | .cm-s-dracula.CodeMirror, .cm-s-dracula .CodeMirror-gutters { 12 | background-color: #23273B !important; 13 | color: #f8f8f2 !important; 14 | border: none; 15 | } 16 | .cm-s-dracula .CodeMirror-gutters { color: #23273B; } 17 | .cm-s-dracula .CodeMirror-cursor { border-left: solid thin #f8f8f0; } 18 | .cm-s-dracula .CodeMirror-linenumber { color: #6D8A88; } 19 | .cm-s-dracula .CodeMirror-selected { background: rgba(255, 255, 255, 0.10); } 20 | .cm-s-dracula .CodeMirror-line::selection, .cm-s-dracula .CodeMirror-line > span::selection, .cm-s-dracula .CodeMirror-line > span > span::selection { background: rgba(255, 255, 255, 0.10); } 21 | .cm-s-dracula .CodeMirror-line::-moz-selection, .cm-s-dracula .CodeMirror-line > span::-moz-selection, .cm-s-dracula .CodeMirror-line > span > span::-moz-selection { background: rgba(255, 255, 255, 0.10); } 22 | .cm-s-dracula span.cm-comment { color: #6272a4; } 23 | .cm-s-dracula span.cm-string, .cm-s-dracula span.cm-string-2 { color: #f1fa8c; } 24 | .cm-s-dracula span.cm-number { color: #bd93f9; } 25 | .cm-s-dracula span.cm-variable { color: #50fa7b; } 26 | .cm-s-dracula span.cm-variable-2 { color: white; } 27 | .cm-s-dracula span.cm-def { color: #50fa7b; } 28 | .cm-s-dracula span.cm-operator { color: #ff79c6; } 29 | .cm-s-dracula span.cm-keyword { color: #ff79c6; } 30 | .cm-s-dracula span.cm-atom { color: #bd93f9; } 31 | .cm-s-dracula span.cm-meta { color: #f8f8f2; } 32 | .cm-s-dracula span.cm-tag { color: #ff79c6; } 33 | .cm-s-dracula span.cm-attribute { color: #50fa7b; } 34 | .cm-s-dracula span.cm-qualifier { color: #50fa7b; } 35 | .cm-s-dracula span.cm-property { color: #66d9ef; } 36 | .cm-s-dracula span.cm-builtin { color: #50fa7b; } 37 | .cm-s-dracula span.cm-variable-3, .cm-s-dracula span.cm-type { color: #ffb86c; } 38 | 39 | .cm-s-dracula .CodeMirror-activeline-background { background: rgba(255,255,255,0.1); } 40 | .cm-s-dracula .CodeMirror-matchingbracket { text-decoration: underline; color: white !important; } 41 | -------------------------------------------------------------------------------- /src/assets/github-theme/css/dracula.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | Name: dracula 4 | Author: Michael Kaminsky (http://github.com/mkaminsky11) 5 | 6 | Original dracula color scheme by Zeno Rocha (https://github.com/zenorocha/dracula-theme) 7 | 8 | */ 9 | 10 | 11 | .cm-s-dracula.CodeMirror, .cm-s-dracula .CodeMirror-gutters { 12 | background-color: #23273B !important; 13 | color: #f8f8f2 !important; 14 | border: none; 15 | } 16 | .cm-s-dracula .CodeMirror-gutters { color: #23273B; } 17 | .cm-s-dracula .CodeMirror-cursor { border-left: solid thin #f8f8f0; } 18 | .cm-s-dracula .CodeMirror-linenumber { color: #6D8A88; } 19 | .cm-s-dracula .CodeMirror-selected { background: rgba(255, 255, 255, 0.10); } 20 | .cm-s-dracula .CodeMirror-line::selection, .cm-s-dracula .CodeMirror-line > span::selection, .cm-s-dracula .CodeMirror-line > span > span::selection { background: rgba(255, 255, 255, 0.10); } 21 | .cm-s-dracula .CodeMirror-line::-moz-selection, .cm-s-dracula .CodeMirror-line > span::-moz-selection, .cm-s-dracula .CodeMirror-line > span > span::-moz-selection { background: rgba(255, 255, 255, 0.10); } 22 | .cm-s-dracula span.cm-comment { color: #6272a4; } 23 | .cm-s-dracula span.cm-string, .cm-s-dracula span.cm-string-2 { color: #f1fa8c; } 24 | .cm-s-dracula span.cm-number { color: #bd93f9; } 25 | .cm-s-dracula span.cm-variable { color: #50fa7b; } 26 | .cm-s-dracula span.cm-variable-2 { color: white; } 27 | .cm-s-dracula span.cm-def { color: #50fa7b; } 28 | .cm-s-dracula span.cm-operator { color: #ff79c6; } 29 | .cm-s-dracula span.cm-keyword { color: #ff79c6; } 30 | .cm-s-dracula span.cm-atom { color: #bd93f9; } 31 | .cm-s-dracula span.cm-meta { color: #f8f8f2; } 32 | .cm-s-dracula span.cm-tag { color: #ff79c6; } 33 | .cm-s-dracula span.cm-attribute { color: #50fa7b; } 34 | .cm-s-dracula span.cm-qualifier { color: #50fa7b; } 35 | .cm-s-dracula span.cm-property { color: #66d9ef; } 36 | .cm-s-dracula span.cm-builtin { color: #50fa7b; } 37 | .cm-s-dracula span.cm-variable-3, .cm-s-dracula span.cm-type { color: #ffb86c; } 38 | 39 | .cm-s-dracula .CodeMirror-activeline-background { background: rgba(255,255,255,0.1); } 40 | .cm-s-dracula .CodeMirror-matchingbracket { text-decoration: underline; color: white !important; } 41 | -------------------------------------------------------------------------------- /src/app/fusioncharts/ex13/ex13.ts: -------------------------------------------------------------------------------- 1 | import { Component, NgZone} from '@angular/core'; 2 | 3 | import fcDemos from '../samplecode'; 4 | import SelectedSingleton from '../services/selected.singleton'; 5 | 6 | declare var Prism; 7 | 8 | @Component({ 9 | selector: 'chart', 10 | templateUrl: 'ex13.html', 11 | styleUrls: [ 12 | '../ex.css' 13 | ], 14 | standalone: false 15 | }) 16 | export class Ex13 { 17 | demoId = 'ex13'; 18 | 19 | sampleCode = fcDemos; 20 | 21 | dataSource = { 22 | "chart": { 23 | "caption": "Average Annual Population Growth", 24 | "subcaption": " 1955-2015", 25 | "numbersuffix": "%", 26 | "includevalueinlabels": "1", 27 | "labelsepchar": ": ", 28 | "entityFillHoverColor": "#FFF9C4", 29 | "theme": "fusion" 30 | }, 31 | "colorrange": { 32 | "minvalue": "0", 33 | "code": "#FFE0B2", 34 | "gradient": "1", 35 | "color": [ 36 | 37 | { 38 | "minvalue": "0.5", 39 | "maxvalue": "1.0", 40 | "color": "#FFD74D" 41 | }, 42 | { 43 | "minvalue": "1.0", 44 | "maxvalue": "2.0", 45 | "color": "#FB8C00" 46 | }, 47 | { 48 | "minvalue": "2.0", 49 | "maxvalue": "3.0", 50 | "color": "#E65100" 51 | } 52 | ] 53 | }, 54 | "data": [{ 55 | "id": "NA", 56 | "value": ".82", 57 | "showLabel": "1" 58 | 59 | }, 60 | { 61 | "id": "SA", 62 | "value": "2.04", 63 | "showLabel": "1" 64 | }, 65 | { 66 | "id": "AS", 67 | "value": "1.78", 68 | "showLabel": "1" 69 | 70 | }, 71 | { 72 | "id": "EU", 73 | "value": ".40", 74 | "showLabel": "1" 75 | }, 76 | { 77 | "id": "AF", 78 | "value": "2.58", 79 | "showLabel": "1" 80 | }, 81 | { 82 | "id": "AU", 83 | "value": "1.30", 84 | "showLabel": "1" 85 | } 86 | ] 87 | } 88 | 89 | constructor(private zone:NgZone){} 90 | 91 | ngOnInit(){ 92 | setTimeout(() => { 93 | SelectedSingleton.change(this.sampleCode['ex13'].title); 94 | }) 95 | } 96 | ngAfterViewInit() { 97 | Prism && Prism.highlightAll(); 98 | } 99 | } 100 | -------------------------------------------------------------------------------- /src/app/fusioncharts/ex24/ex24.ts: -------------------------------------------------------------------------------- 1 | import { 2 | Component, 3 | NgZone 4 | } from '@angular/core'; 5 | 6 | import fcDemos from '../samplecode'; 7 | import SelectedSingleton from '../services/selected.singleton'; 8 | declare var Prism; 9 | 10 | @Component({ 11 | selector: 'chart', 12 | templateUrl: './ex24.html', 13 | styleUrls: [ 14 | '../ex.css' 15 | ], 16 | standalone: false 17 | }) 18 | export class Ex24 { 19 | demoId = 'ex24'; 20 | sampleCode = fcDemos; 21 | dataSource: any; 22 | selectedSlice = 'none'; 23 | chart: any; 24 | constructor(private zone: NgZone) { 25 | this.dataSource = { 26 | "chart": { 27 | "caption": "Market Share of Web Servers", 28 | "plottooltext": "$percentValue of web servers run on $label servers", 29 | "showLegend": "1", 30 | "showPercentValues": "1", 31 | "legendPosition": "bottom", 32 | "useDataPlotColorForLabels": "1", 33 | "enablemultislicing": "0", 34 | "showlegend": "0", 35 | "theme": "fusion", 36 | }, 37 | "data": [{ 38 | "label": "Apache", 39 | "value": "32647479" 40 | }, { 41 | "label": "Microsoft", 42 | "value": "22100932" 43 | }, { 44 | "label": "Zeus", 45 | "value": "14376" 46 | }, { 47 | "label": "Other", 48 | "value": "18674221" 49 | }] 50 | }; 51 | } 52 | 53 | initialized($event){ 54 | this.chart = $event.chart; 55 | 56 | } 57 | onRadioOptionChange(option){ 58 | this.selectedSlice = option; 59 | 60 | this.dataSource.data.forEach((d, index) => { 61 | if(option == 'none'){ 62 | this.chart.slicePlotItem(index, false); 63 | } else if(option === d.label.toLowerCase()){ 64 | this.chart.slicePlotItem(index, true); 65 | } 66 | }); 67 | } 68 | 69 | getLabel(index){ 70 | return this.dataSource.data[index].label; 71 | } 72 | 73 | dataplotClick($event){ 74 | let dataIndex = $event.dataObj.dataIndex; 75 | let isSliced = $event.dataObj.isSliced; 76 | this.zone.run(() => { 77 | this.selectedSlice = isSliced ? 'none' : this.getLabel(dataIndex).toLowerCase(); 78 | }) 79 | } 80 | 81 | ngOnInit() { 82 | setTimeout(() => { 83 | SelectedSingleton.change(this.sampleCode['ex24'].title); 84 | }) 85 | } 86 | } 87 | -------------------------------------------------------------------------------- /src/app/fusioncharts/ex22/ex22.ts: -------------------------------------------------------------------------------- 1 | import { 2 | Component, 3 | NgZone 4 | } from '@angular/core'; 5 | 6 | import fcDemos from '../samplecode'; 7 | import SelectedSingleton from '../services/selected.singleton'; 8 | declare var Prism; 9 | 10 | @Component({ 11 | selector: 'chart', 12 | templateUrl: './ex22.html', 13 | styleUrls: [ 14 | '../ex.css' 15 | ], 16 | standalone: false 17 | }) 18 | export class Ex22 { 19 | demoId = 'ex22'; 20 | sampleCode = fcDemos; 21 | dataSource: any; 22 | constructor(private zone: NgZone) { 23 | this.dataSource = { 24 | "chart": { 25 | "caption": "Bakersfield Central - Total footfalls", 26 | "subCaption": "Last week", 27 | "xAxisName": "Day", 28 | "yAxisName": "No. of Visitors (In 1000s)", 29 | "showValues": "0", 30 | "theme": "fusion" 31 | }, 32 | "annotations": { 33 | "groups": [{ 34 | "id": "anchor-highlight", 35 | "items": [{ 36 | "id": "high-star", 37 | "type": "circle", 38 | "x": "$dataset.0.set.2.x", 39 | "y": "$dataset.0.set.2.y", 40 | "radius": "12", 41 | "color": "#6baa01", 42 | "border": "2", 43 | "borderColor": "#f8bd19" 44 | }, 45 | { 46 | "id": "label", 47 | "type": "text", 48 | "text": "Highest footfall 25.5K", 49 | "fillcolor": "#6baa01", 50 | "rotate": "90", 51 | "x": "$dataset.0.set.2.x+75", 52 | "y": "$dataset.0.set.2.y-2" 53 | } 54 | ] 55 | }] 56 | }, 57 | "data": [{ 58 | "label": "Mon", 59 | "value": "15123" 60 | }, 61 | { 62 | "label": "Tue", 63 | "value": "14233" 64 | }, 65 | { 66 | "label": "Wed", 67 | "value": "25507" 68 | }, 69 | { 70 | "label": "Thu", 71 | "value": "9110" 72 | }, 73 | { 74 | "label": "Fri", 75 | "value": "15529" 76 | }, 77 | { 78 | "label": "Sat", 79 | "value": "20803" 80 | }, 81 | { 82 | "label": "Sun", 83 | "value": "19202" 84 | } 85 | ] 86 | } 87 | 88 | } 89 | ngOnInit() { 90 | setTimeout(() => { 91 | SelectedSingleton.change(this.sampleCode['ex22'].title); 92 | }) 93 | } 94 | } 95 | -------------------------------------------------------------------------------- /src/app/fusioncharts/ex20/ex20.ts: -------------------------------------------------------------------------------- 1 | import { 2 | Component, 3 | NgZone 4 | } from '@angular/core'; 5 | 6 | import fcDemos from '../samplecode'; 7 | import SelectedSingleton from '../services/selected.singleton'; 8 | declare var Prism; 9 | 10 | @Component({ 11 | selector: 'chart', 12 | templateUrl: './ex20.html', 13 | styleUrls: [ 14 | '../ex.css' 15 | ], 16 | standalone: false 17 | }) 18 | export class Ex20 { 19 | demoId = 'ex20'; 20 | sampleCode = fcDemos; 21 | dataSource: any; 22 | chartObj: any; 23 | size: string = "secondSize"; 24 | allSizes = { 25 | firstSize: { width : '400px', height: '200px'}, 26 | secondSize: { width: '600px', height: '350px' }, 27 | thirdSize: { width: '700px', height: '400px' } 28 | } 29 | styleObj: object; 30 | 31 | constructor(private zone: NgZone) { 32 | this.dataSource = { 33 | "chart": { 34 | "caption": "Countries With Most Oil Reserves [2017-18]", 35 | "subCaption": "In MMbbl = One Million barrels", 36 | "xAxisName": "Country", 37 | "yAxisName": "Reserves (MMbbl)", 38 | "numberSuffix": "K", 39 | "theme": "fusion" 40 | }, 41 | "data": [ 42 | { 43 | "label": "Venezuela", 44 | "value": "290" 45 | }, 46 | { 47 | "label": "Saudi", 48 | "value": "260" 49 | }, 50 | { 51 | "label": "Canada", 52 | "value": "180" 53 | }, 54 | { 55 | "label": "Iran", 56 | "value": "140" 57 | }, 58 | { 59 | "label": "Russia", 60 | "value": "115" 61 | }, 62 | { 63 | "label": "UAE", 64 | "value": "100" 65 | }, 66 | { 67 | "label": "US", 68 | "value": "30" 69 | }, 70 | { 71 | "label": "China", 72 | "value": "30" 73 | } 74 | ] 75 | }; 76 | 77 | this.styleObj = this.allSizes[this.size]; 78 | } 79 | 80 | getStyle(){ 81 | return this.styleObj; 82 | } 83 | 84 | initialized($event){ 85 | this.chartObj = $event.chart; 86 | } 87 | onSelectionChange(size){ 88 | this.size = size; 89 | this.styleObj = this.allSizes[this.size]; 90 | } 91 | 92 | ngOnInit() { 93 | setTimeout(() => { 94 | SelectedSingleton.change(this.sampleCode['ex20'].title); 95 | }) 96 | } 97 | } 98 | -------------------------------------------------------------------------------- /src/app/fusioncharts/ex25/ex25.ts: -------------------------------------------------------------------------------- 1 | import { 2 | Component, 3 | NgZone 4 | } from '@angular/core'; 5 | 6 | import fcDemos from '../samplecode'; 7 | import SelectedSingleton from '../services/selected.singleton'; 8 | declare var Prism; 9 | 10 | @Component({ 11 | selector: 'chart', 12 | templateUrl: './ex25.html', 13 | styleUrls: [ 14 | '../ex.css' 15 | ], 16 | standalone: false 17 | }) 18 | export class Ex25 { 19 | demoId = 'ex25'; 20 | sampleCode = fcDemos; 21 | dataSource: any; 22 | selectedSlice = 'none'; 23 | chart: any; 24 | constructor(private zone: NgZone) { 25 | this.dataSource = { 26 | "chart": { 27 | "caption": "Countries With Most Oil Reserves [2017-18]", 28 | "subCaption": "In MMbbl = One Million barrels", 29 | "xAxisName": "Country", 30 | "yAxisName": "Reserves (MMbbl)", 31 | "numberSuffix": "K", 32 | "theme": "fusion" 33 | }, 34 | "data": [{ 35 | "label": "Venezuela", 36 | "value": "290" 37 | }, 38 | { 39 | "label": "Saudi", 40 | "value": "260" 41 | }, 42 | { 43 | "label": "Canada", 44 | "value": "180" 45 | }, 46 | { 47 | "label": "Iran", 48 | "value": "140" 49 | }, 50 | { 51 | "label": "Russia", 52 | "value": "115" 53 | }, 54 | { 55 | "label": "UAE", 56 | "value": "100" 57 | }, 58 | { 59 | "label": "US", 60 | "value": "30" 61 | }, 62 | { 63 | "label": "China", 64 | "value": "30" 65 | } 66 | ] 67 | }; 68 | } 69 | 70 | initialized($event) { 71 | this.chart = $event.chart; 72 | } 73 | 74 | changeCaption(caption){ 75 | this.chart.setChartAttribute('caption', caption); 76 | } 77 | 78 | changeXAxisName(xaxisname){ 79 | this.chart.setChartAttribute('xaxisname', xaxisname); 80 | } 81 | 82 | changeYAxisName(yaxisname){ 83 | this.chart.setChartAttribute('yaxisname', yaxisname); 84 | } 85 | 86 | reset(){ 87 | this.chart.setChartAttribute('caption', this.dataSource.chart.caption); 88 | this.chart.setChartAttribute('xaxisname', this.dataSource.chart.xAxisName); 89 | this.chart.setChartAttribute('yaxisname', this.dataSource.chart.yAxisName); 90 | } 91 | 92 | ngOnInit() { 93 | setTimeout(() => { 94 | SelectedSingleton.change(this.sampleCode['ex25'].title); 95 | }) 96 | } 97 | } 98 | -------------------------------------------------------------------------------- /src/app/fusioncharts/ex31/ex31.ts: -------------------------------------------------------------------------------- 1 | import { Component, NgZone } from '@angular/core'; 2 | 3 | import fcDemos from '../samplecode'; 4 | import SelectedSingleton from '../services/selected.singleton'; 5 | import * as FusionCharts from 'fusioncharts'; 6 | 7 | declare var Prism; 8 | 9 | @Component({ 10 | selector: 'chart', 11 | templateUrl: './ex31.html', 12 | styleUrls: ['../ex.css'], 13 | standalone: false 14 | }) 15 | export class Ex31 { 16 | demoId = 'ex31'; 17 | sampleCode = fcDemos; 18 | dataSource: any; 19 | type: string; 20 | width: string; 21 | height: string; 22 | constructor() { 23 | this.type = 'timeseries'; 24 | this.width = '100%'; 25 | this.height = '400'; 26 | // This is the dataSource of the chart 27 | this.dataSource = { 28 | // Initially data is set as null 29 | data: null, 30 | chart: { 31 | showLegend: 0 32 | }, 33 | caption: { 34 | text: 'Daily Visitors Count of a Website' 35 | }, 36 | yAxis: [ 37 | { 38 | plot: { 39 | value: 'Daily Visitors', 40 | type: 'area' 41 | }, 42 | title: 'Daily Visitors (in thousand)' 43 | } 44 | ] 45 | }; 46 | this.fetchData(); 47 | } 48 | 49 | // In this method we will create our DataStore and using that we will create a custom DataTable which takes two 50 | // parameters, one is data another is schema. 51 | fetchData() { 52 | var jsonify = res => res.json(); 53 | var dataFetch = fetch( 54 | 'https://s3.eu-central-1.amazonaws.com/fusion.store/ft/data/area-chart-with-time-axis-data.json' 55 | ).then(jsonify); 56 | var schemaFetch = fetch( 57 | 'https://s3.eu-central-1.amazonaws.com/fusion.store/ft/schema/area-chart-with-time-axis-schema.json' 58 | ).then(jsonify); 59 | 60 | Promise.all([dataFetch, schemaFetch]).then(res => { 61 | const data = res[0]; 62 | const schema = res[1]; 63 | // First we are creating a DataStore 64 | const fusionDataStore = new FusionCharts.DataStore(); 65 | // After that we are creating a DataTable by passing our data and schema as arguments 66 | const fusionTable = fusionDataStore.createDataTable(data, schema); 67 | // Afet that we simply mutated our timeseries datasource by attaching the above 68 | // DataTable into its data property. 69 | this.dataSource.data = fusionTable; 70 | }); 71 | } 72 | 73 | ngOnInit() { 74 | setTimeout(() => { 75 | SelectedSingleton.change(this.sampleCode['ex31'].title); 76 | }); 77 | } 78 | } 79 | -------------------------------------------------------------------------------- /src/app/fusioncharts/ex30/ex30.ts: -------------------------------------------------------------------------------- 1 | import { Component, NgZone } from '@angular/core'; 2 | 3 | import fcDemos from '../samplecode'; 4 | import SelectedSingleton from '../services/selected.singleton'; 5 | import * as FusionCharts from 'fusioncharts'; 6 | 7 | declare var Prism; 8 | 9 | @Component({ 10 | selector: 'chart', 11 | templateUrl: './ex30.html', 12 | styleUrls: ['../ex.css'], 13 | standalone: false 14 | }) 15 | export class Ex30 { 16 | demoId = 'ex30'; 17 | sampleCode = fcDemos; 18 | dataSource: any; 19 | type: string; 20 | width: string; 21 | height: string; 22 | constructor() { 23 | this.type = 'timeseries'; 24 | this.width = '100%'; 25 | this.height = '400'; 26 | // This is the dataSource of the chart 27 | this.dataSource = { 28 | // Initially data is set as null 29 | data: null, 30 | chart: { 31 | showLegend: 0 32 | }, 33 | caption: { 34 | text: 'Daily Visitors Count of a Website' 35 | }, 36 | yAxis: [ 37 | { 38 | plot: { 39 | value: 'Daily Visitors', 40 | type: 'column' 41 | }, 42 | title: 'Daily Visitors (in thousand)' 43 | } 44 | ] 45 | }; 46 | this.fetchData(); 47 | } 48 | 49 | // In this method we will create our DataStore and using that we will create a custom DataTable which takes two 50 | // parameters, one is data another is schema. 51 | fetchData() { 52 | var jsonify = res => res.json(); 53 | var dataFetch = fetch( 54 | 'https://s3.eu-central-1.amazonaws.com/fusion.store/ft/data/column-chart-with-time-axis-data.json' 55 | ).then(jsonify); 56 | var schemaFetch = fetch( 57 | 'https://s3.eu-central-1.amazonaws.com/fusion.store/ft/schema/column-chart-with-time-axis-schema.json' 58 | ).then(jsonify); 59 | 60 | Promise.all([dataFetch, schemaFetch]).then(res => { 61 | const data = res[0]; 62 | const schema = res[1]; 63 | // First we are creating a DataStore 64 | const fusionDataStore = new FusionCharts.DataStore(); 65 | // After that we are creating a DataTable by passing our data and schema as arguments 66 | const fusionTable = fusionDataStore.createDataTable(data, schema); 67 | // Afet that we simply mutated our timeseries datasource by attaching the above 68 | // DataTable into its data property. 69 | this.dataSource.data = fusionTable; 70 | }); 71 | } 72 | 73 | ngOnInit() { 74 | setTimeout(() => { 75 | SelectedSingleton.change(this.sampleCode['ex30'].title); 76 | }); 77 | } 78 | } 79 | -------------------------------------------------------------------------------- /dist/index.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"index.js","sourceRoot":"","sources":["../src/angular-fusioncharts/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAuB,MAAM,eAAe,CAAC;AAC9D,OAAO,EAAE,qBAAqB,EAAE,MAAM,8BAA8B,CAAC;AACrE,OAAO,EAAE,qBAAqB,EAAE,MAAM,8BAA8B,CAAC;AACrE,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,EACL,kBAAkB,EAClB,mBAAmB,GACpB,MAAM,4BAA4B,CAAC;;AAEpC,OAAO,EACL,qBAAqB,EACrB,qBAAqB,EACrB,gBAAgB,EAChB,kBAAkB,GACnB,CAAC;AAEF;IAAA;KAmCC;IAzBC,oCAAoC;IAC7B,0BAAO,GAAd,UACE,MAAY;QACZ,mBAAmB;aAAnB,UAAmB,EAAnB,qBAAmB,EAAnB,IAAmB;YAAnB,kCAAmB;;QAEnB,OAAO;YACL,QAAQ,EAAE,kBAAkB;YAC5B,SAAS,EAAE;gBACT;oBACE,OAAO,EAAE,kBAAkB;oBAC3B,QAAQ,EAAE;wBACR,IAAI,EAAE,MAAM;wBACZ,OAAO,EAAE,SAAS;qBACnB;iBACF;aACF;SACF,CAAC;IACJ,CAAC;IAEM,yBAAM,GAAb,UAAc,MAAY;QAAE,mBAAmB;aAAnB,UAAmB,EAAnB,qBAAmB,EAAnB,IAAmB;YAAnB,kCAAmB;;QAC7C,mBAAmB,CAAC,SAAS,CAAC;YAC5B,IAAI,EAAE,MAAM;YACZ,OAAO,EAAE,SAAS;SACnB,CAAC,CAAC;IACL,CAAC;wHAzBU,kBAAkB;wEAAlB,kBAAkB;6EAFlB,CAAC,mBAAmB,EAAE,kBAAkB,CAAC;6BAvBtD;CAmDC,AAnCD,IAmCC;SA1BY,kBAAkB;uFAAlB,kBAAkB;cAT9B,QAAQ;eAAC;gBACR,YAAY,EAAE;oBACZ,qBAAqB;oBACrB,qBAAqB;oBACrB,gBAAgB;iBACjB;gBACD,OAAO,EAAE,CAAC,qBAAqB,EAAE,qBAAqB,EAAE,gBAAgB,CAAC;gBACzE,SAAS,EAAE,CAAC,mBAAmB,EAAE,kBAAkB,CAAC;aACrD;;wFACY,kBAAkB,mBAP3B,qBAAqB;QACrB,qBAAqB;QACrB,gBAAgB,aAER,qBAAqB,EAAE,qBAAqB,EAAE,gBAAgB","sourcesContent":["import { NgModule, ModuleWithProviders } from \"@angular/core\";\nimport { FusionChartsComponent } from \"./src/fusioncharts.component\";\nimport { FusionChartsDirective } from \"./src/fusioncharts.directive\";\nimport { FusionChartsPipe } from \"./src/fusioncharts.pipe\";\nimport {\n FusionChartsStatic,\n FusionChartsService,\n} from \"./src/fusioncharts.service\";\n\nexport {\n FusionChartsComponent,\n FusionChartsDirective,\n FusionChartsPipe,\n FusionChartsStatic,\n};\n\n@NgModule({\n declarations: [\n FusionChartsComponent,\n FusionChartsDirective,\n FusionChartsPipe,\n ],\n exports: [FusionChartsComponent, FusionChartsDirective, FusionChartsPipe],\n providers: [FusionChartsService, FusionChartsStatic],\n})\nexport class FusionChartsModule {\n // Keep this for backward compatible\n static forRoot(\n fcCore?: any,\n ...fcModules: any[]\n ): ModuleWithProviders {\n return {\n ngModule: FusionChartsModule,\n providers: [\n {\n provide: FusionChartsStatic,\n useValue: {\n core: fcCore,\n modules: fcModules,\n },\n },\n ],\n };\n }\n\n static fcRoot(fcCore?: any, ...fcModules: any[]) {\n FusionChartsService.setFCRoot({\n core: fcCore,\n modules: fcModules,\n });\n }\n}\n"]} -------------------------------------------------------------------------------- /src/app/fusioncharts/ex27/ex27.ts: -------------------------------------------------------------------------------- 1 | import { Component, NgZone } from '@angular/core'; 2 | 3 | import fcDemos from '../samplecode'; 4 | import SelectedSingleton from '../services/selected.singleton'; 5 | import * as FusionCharts from 'fusioncharts'; 6 | 7 | declare var Prism; 8 | 9 | @Component({ 10 | selector: 'chart', 11 | templateUrl: './ex27.html', 12 | styleUrls: ['../ex.css'], 13 | standalone: false 14 | }) 15 | export class Ex27 { 16 | demoId = 'ex27'; 17 | sampleCode = fcDemos; 18 | dataSource: any; 19 | type: string; 20 | width: string; 21 | height: string; 22 | constructor() { 23 | this.type = 'timeseries'; 24 | this.width = '100%'; 25 | this.height = '400'; 26 | // This is the dataSource of the chart 27 | this.dataSource = { 28 | // Initially data is set as null 29 | data: null, 30 | caption: { 31 | text: 'Sales Analysis' 32 | }, 33 | subcaption: { 34 | text: 'Grocery & Footwear' 35 | }, 36 | series: 'Type', 37 | yAxis: [ 38 | { 39 | plot: 'Sales Value', 40 | title: 'Sale Value', 41 | format: { 42 | prefix: '$' 43 | } 44 | } 45 | ] 46 | }; 47 | this.fetchData(); 48 | } 49 | 50 | // In this method we will create our DataStore and using that we will create a custom DataTable which takes two 51 | // parameters, one is data another is schema. 52 | fetchData() { 53 | var jsonify = res => res.json(); 54 | var dataFetch = fetch( 55 | 'https://s3.eu-central-1.amazonaws.com/fusion.store/ft/data/plotting-multiple-series-on-time-axis-data.json' 56 | ).then(jsonify); 57 | var schemaFetch = fetch( 58 | 'https://s3.eu-central-1.amazonaws.com/fusion.store/ft/schema/plotting-multiple-series-on-time-axis-schema.json' 59 | ).then(jsonify); 60 | 61 | Promise.all([dataFetch, schemaFetch]).then(res => { 62 | const data = res[0]; 63 | const schema = res[1]; 64 | // First we are creating a DataStore 65 | const fusionDataStore = new FusionCharts.DataStore(); 66 | // After that we are creating a DataTable by passing our data and schema as arguments 67 | const fusionTable = fusionDataStore.createDataTable(data, schema); 68 | // Afet that we simply mutated our timeseries datasource by attaching the above 69 | // DataTable into its data property. 70 | this.dataSource.data = fusionTable; 71 | }); 72 | } 73 | 74 | ngOnInit() { 75 | setTimeout(() => { 76 | SelectedSingleton.change(this.sampleCode['ex27'].title); 77 | }); 78 | } 79 | } 80 | -------------------------------------------------------------------------------- /src/app/fusioncharts/ex26/ex26.ts: -------------------------------------------------------------------------------- 1 | import { Component, NgZone } from '@angular/core'; 2 | 3 | import fcDemos from '../samplecode'; 4 | import SelectedSingleton from '../services/selected.singleton'; 5 | import * as FusionCharts from 'fusioncharts'; 6 | 7 | declare var Prism; 8 | 9 | @Component({ 10 | selector: 'chart', 11 | templateUrl: './ex26.html', 12 | styleUrls: ['../ex.css'], 13 | standalone: false 14 | }) 15 | export class Ex26 { 16 | demoId = 'ex26'; 17 | sampleCode = fcDemos; 18 | dataSource: any; 19 | type: string; 20 | width: string; 21 | height: string; 22 | constructor() { 23 | this.type = 'timeseries'; 24 | this.width = '100%'; 25 | this.height = '400'; 26 | // This is the dataSource of the chart 27 | this.dataSource = { 28 | // Initially data is set as null 29 | data: null, 30 | caption: { 31 | text: 'Sales Analysis' 32 | }, 33 | subcaption: { 34 | text: 'Grocery' 35 | }, 36 | yAxis: [ 37 | { 38 | plot: { 39 | value: 'Grocery Sales Value', 40 | type: 'line' 41 | }, 42 | format: { 43 | prefix: '$' 44 | }, 45 | title: 'Sale Value' 46 | } 47 | ] 48 | }; 49 | this.fetchData(); 50 | } 51 | 52 | // In this method we will create our DataStore and using that we will create a custom DataTable which takes two 53 | // parameters, one is data another is schema. 54 | fetchData() { 55 | var jsonify = res => res.json(); 56 | var dataFetch = fetch( 57 | 'https://s3.eu-central-1.amazonaws.com/fusion.store/ft/data/line-chart-with-time-axis-data.json' 58 | ).then(jsonify); 59 | var schemaFetch = fetch( 60 | 'https://s3.eu-central-1.amazonaws.com/fusion.store/ft/schema/line-chart-with-time-axis-schema.json' 61 | ).then(jsonify); 62 | 63 | Promise.all([dataFetch, schemaFetch]).then(res => { 64 | const data = res[0]; 65 | const schema = res[1]; 66 | // First we are creating a DataStore 67 | const fusionDataStore = new FusionCharts.DataStore(); 68 | // After that we are creating a DataTable by passing our data and schema as arguments 69 | const fusionTable = fusionDataStore.createDataTable(data, schema); 70 | // Afet that we simply mutated our timeseries datasource by attaching the above 71 | // DataTable into its data property. 72 | this.dataSource.data = fusionTable; 73 | }); 74 | } 75 | 76 | ngOnInit() { 77 | setTimeout(() => { 78 | SelectedSingleton.change(this.sampleCode['ex26'].title); 79 | }); 80 | } 81 | } 82 | -------------------------------------------------------------------------------- /src/app/fusioncharts/ex28/ex28.ts: -------------------------------------------------------------------------------- 1 | import { Component, NgZone } from '@angular/core'; 2 | 3 | import fcDemos from '../samplecode'; 4 | import SelectedSingleton from '../services/selected.singleton'; 5 | import * as FusionCharts from 'fusioncharts'; 6 | 7 | declare var Prism; 8 | 9 | @Component({ 10 | selector: 'chart', 11 | templateUrl: './ex28.html', 12 | styleUrls: ['../ex.css'], 13 | standalone: false 14 | }) 15 | export class Ex28 { 16 | demoId = 'ex28'; 17 | sampleCode = fcDemos; 18 | dataSource: any; 19 | type: string; 20 | width: string; 21 | height: string; 22 | constructor() { 23 | this.type = 'timeseries'; 24 | this.width = '100%'; 25 | this.height = '400'; 26 | // This is the dataSource of the chart 27 | this.dataSource = { 28 | // Initially data is set as null 29 | data: null, 30 | caption: { 31 | text: 'Web visits & downloads' 32 | }, 33 | subcaption: { 34 | text: 'since 2015' 35 | }, 36 | yAxis: [ 37 | { 38 | plot: [ 39 | { 40 | value: 'Downloads', 41 | type: 'column' 42 | }, 43 | { 44 | value: 'Web Visits', 45 | type: 'line' 46 | } 47 | ] 48 | } 49 | ] 50 | }; 51 | this.fetchData(); 52 | } 53 | 54 | // In this method we will create our DataStore and using that we will create a custom DataTable which takes two 55 | // parameters, one is data another is schema. 56 | fetchData() { 57 | var jsonify = res => res.json(); 58 | var dataFetch = fetch( 59 | 'https://s3.eu-central-1.amazonaws.com/fusion.store/ft/data/column-line-combination-data.json' 60 | ).then(jsonify); 61 | var schemaFetch = fetch( 62 | 'https://s3.eu-central-1.amazonaws.com/fusion.store/ft/schema/column-line-combination-schema.json' 63 | ).then(jsonify); 64 | 65 | Promise.all([dataFetch, schemaFetch]).then(res => { 66 | const data = res[0]; 67 | const schema = res[1]; 68 | // First we are creating a DataStore 69 | const fusionDataStore = new FusionCharts.DataStore(); 70 | // After that we are creating a DataTable by passing our data and schema as arguments 71 | const fusionTable = fusionDataStore.createDataTable(data, schema); 72 | // Afet that we simply mutated our timeseries datasource by attaching the above 73 | // DataTable into its data property. 74 | this.dataSource.data = fusionTable; 75 | }); 76 | } 77 | 78 | ngOnInit() { 79 | setTimeout(() => { 80 | SelectedSingleton.change(this.sampleCode['ex28'].title); 81 | }); 82 | } 83 | } 84 | -------------------------------------------------------------------------------- /src/app/fusioncharts/ex23/ex23.ts: -------------------------------------------------------------------------------- 1 | import { 2 | Component, 3 | NgZone 4 | } from '@angular/core'; 5 | 6 | import fcDemos from '../samplecode'; 7 | import SelectedSingleton from '../services/selected.singleton'; 8 | declare var Prism; 9 | 10 | @Component({ 11 | selector: 'chart', 12 | templateUrl: './ex23.html', 13 | styleUrls: [ 14 | '../ex.css' 15 | ], 16 | standalone: false 17 | }) 18 | export class Ex23 { 19 | demoId = 'ex23'; 20 | sampleCode = fcDemos; 21 | dataSource: any; 22 | temp_message:any = ''; 23 | message = 'You will see notifications here for the chart lifecycle events'; 24 | constructor(private zone: NgZone) { 25 | this.dataSource = { 26 | "chart": { 27 | "caption": "Countries With Most Oil Reserves [2017-18]", 28 | "subCaption": "In MMbbl = One Million barrels", 29 | "xAxisName": "Country", 30 | "yAxisName": "Reserves (MMbbl)", 31 | "numberSuffix": "K", 32 | "theme": "fusion" 33 | }, 34 | "data": [ 35 | { 36 | "label": "Venezuela", 37 | "value": "290" 38 | }, 39 | { 40 | "label": "Saudi", 41 | "value": "260" 42 | }, 43 | { 44 | "label": "Canada", 45 | "value": "180" 46 | }, 47 | { 48 | "label": "Iran", 49 | "value": "140" 50 | }, 51 | { 52 | "label": "Russia", 53 | "value": "115" 54 | }, 55 | { 56 | "label": "UAE", 57 | "value": "100" 58 | }, 59 | { 60 | "label": "US", 61 | "value": "30" 62 | }, 63 | { 64 | "label": "China", 65 | "value": "30" 66 | } 67 | ] 68 | }; 69 | 70 | } 71 | 72 | beforeDataUpdate($event){ 73 | this.zone.run(() => { 74 | this.message = 'Status: beforeDataUpdate'; 75 | }); 76 | } 77 | 78 | dataUpdated($event){ 79 | this.zone.run(() => { 80 | this.message += ', dataUpdated'; 81 | 82 | }) 83 | } 84 | 85 | drawComplete($event){ 86 | this.zone.run(() => { 87 | this.message += ', drawComplete'; 88 | }); 89 | } 90 | 91 | renderComplete($event){ 92 | this.zone.run(() => { 93 | this.message += ', renderComplete'; 94 | }) 95 | } 96 | 97 | ngOnInit() { 98 | setTimeout(() => { 99 | SelectedSingleton.change(this.sampleCode['ex23'].title); 100 | }) 101 | } 102 | } 103 | -------------------------------------------------------------------------------- /src/app/fusioncharts/ex9/ex9.ts: -------------------------------------------------------------------------------- 1 | import { Component, AfterViewInit, NgZone} from '@angular/core'; 2 | 3 | import fcDemos from '../samplecode'; 4 | import SelectedSingleton from '../services/selected.singleton'; 5 | declare var Prism; 6 | 7 | @Component({ 8 | selector: 'chart', 9 | templateUrl: 'ex9.html', 10 | standalone: false 11 | }) 12 | 13 | export class Ex9 { 14 | demoId = 'ex9'; 15 | sampleCode = fcDemos; 16 | 17 | logMessage = 'Hover on the plot to see the percentage of a column wrt total'; 18 | 19 | dataSource = { 20 | "chart": { 21 | "caption": "Countries With Most Oil Reserves [2017-18]", 22 | "subCaption": "In MMbbl = One Million barrels", 23 | "xAxisName": "Country", 24 | "yAxisName": "Reserves (MMbbl)", 25 | "numberSuffix": "K", 26 | "theme": "fusion", 27 | }, 28 | "data": [{ 29 | "label": "Venezuela", 30 | "value": "290" 31 | }, { 32 | "label": "Saudi", 33 | "value": "260" 34 | }, { 35 | "label": "Canada", 36 | "value": "180" 37 | }, { 38 | "label": "Iran", 39 | "value": "140" 40 | }, { 41 | "label": "Russia", 42 | "value": "115" 43 | }, { 44 | "label": "UAE", 45 | "value": "100" 46 | }, { 47 | "label": "US", 48 | "value": "30" 49 | }, { 50 | "label": "China", 51 | "value": "30" 52 | }] 53 | }; 54 | 55 | total: number; 56 | 57 | getPercentValue() { 58 | return (eve, arg) => { 59 | this.zone.run(() => { 60 | 61 | let value = (arg.value / this.total * 100).toFixed(2); 62 | this.logMessage = `${arg.categoryLabel} is ${value}% of the total` 63 | }) 64 | } 65 | } 66 | 67 | events = { 68 | dataPlotRollOver: this.getPercentValue() 69 | } 70 | 71 | ngOnInit(){ 72 | setTimeout(() => { 73 | SelectedSingleton.change(this.sampleCode['ex9'].title); 74 | }) 75 | } 76 | constructor (private zone:NgZone) { 77 | let myData = this.dataSource.data; 78 | 79 | this.total = 0; 80 | 81 | // Calculate the sum of all values 82 | for (let i = 0; i < myData.length; i++) { 83 | this.total += Number(myData[i].value); 84 | } 85 | 86 | } 87 | 88 | ngAfterViewInit() { 89 | Prism && Prism.highlightAll(); 90 | } 91 | } 92 | -------------------------------------------------------------------------------- /src/app/fusioncharts/ex36/ex36.ts: -------------------------------------------------------------------------------- 1 | import { Component, NgZone } from '@angular/core'; 2 | 3 | import fcDemos from '../samplecode'; 4 | import SelectedSingleton from '../services/selected.singleton'; 5 | import * as FusionCharts from 'fusioncharts'; 6 | 7 | declare var Prism; 8 | 9 | @Component({ 10 | selector: 'chart', 11 | templateUrl: './ex36.html', 12 | styleUrls: ['../ex.css'], 13 | standalone: false 14 | }) 15 | export class Ex36 { 16 | demoId = 'ex36'; 17 | sampleCode = fcDemos; 18 | dataSource: any; 19 | type: string; 20 | width: string; 21 | height: string; 22 | constructor() { 23 | this.type = 'timeseries'; 24 | this.width = '100%'; 25 | this.height = '400'; 26 | // This is the dataSource of the chart 27 | this.dataSource = { 28 | data: null, 29 | caption: { 30 | text: 'Temperature readings in Italy' 31 | }, 32 | yAxis: [ 33 | { 34 | plot: 'Temperature', 35 | title: 'Temperature', 36 | format: { 37 | suffix: '°C' 38 | }, 39 | style: { 40 | title: { 41 | 'font-size': '14px' 42 | } 43 | }, 44 | referenceLine: [ 45 | { 46 | label: 'Controlled Temperature', 47 | value: '10' 48 | } 49 | ] 50 | } 51 | ] 52 | }; 53 | this.fetchData(); 54 | } 55 | 56 | // In this method we will create our DataStore and using that we will create a custom DataTable which takes two 57 | // parameters, one is data another is schema. 58 | fetchData() { 59 | var jsonify = res => res.json(); 60 | var dataFetch = fetch( 61 | 'https://s3.eu-central-1.amazonaws.com/fusion.store/ft/data/adding-a-reference-line-data.json' 62 | ).then(jsonify); 63 | var schemaFetch = fetch( 64 | 'https://s3.eu-central-1.amazonaws.com/fusion.store/ft/schema/adding-a-reference-line-schema.json' 65 | ).then(jsonify); 66 | 67 | Promise.all([dataFetch, schemaFetch]).then(res => { 68 | const data = res[0]; 69 | const schema = res[1]; 70 | // First we are creating a DataStore 71 | const fusionDataStore = new FusionCharts.DataStore(); 72 | // After that we are creating a DataTable by passing our data and schema as arguments 73 | const fusionTable = fusionDataStore.createDataTable(data, schema); 74 | // Afet that we simply mutated our timeseries datasource by attaching the above 75 | // DataTable into its data property. 76 | this.dataSource.data = fusionTable; 77 | }); 78 | } 79 | 80 | ngOnInit() { 81 | setTimeout(() => { 82 | SelectedSingleton.change(this.sampleCode['ex36'].title); 83 | }); 84 | } 85 | } 86 | -------------------------------------------------------------------------------- /src/app/fusioncharts/ex29/ex29.ts: -------------------------------------------------------------------------------- 1 | import { Component, NgZone } from '@angular/core'; 2 | 3 | import fcDemos from '../samplecode'; 4 | import SelectedSingleton from '../services/selected.singleton'; 5 | import * as FusionCharts from 'fusioncharts'; 6 | 7 | declare var Prism; 8 | 9 | @Component({ 10 | selector: 'chart', 11 | templateUrl: './ex29.html', 12 | styleUrls: ['../ex.css'], 13 | standalone: false 14 | }) 15 | export class Ex29 { 16 | demoId = 'ex29'; 17 | sampleCode = fcDemos; 18 | dataSource: any; 19 | type: string; 20 | width: string; 21 | height: string; 22 | constructor() { 23 | this.type = 'timeseries'; 24 | this.width = '100%'; 25 | this.height = '400'; 26 | // This is the dataSource of the chart 27 | this.dataSource = { 28 | // Initially data is set as null 29 | data: null, 30 | caption: { 31 | text: 'Cariaco Basin Sampling' 32 | }, 33 | subcaption: { 34 | text: 'Analysis of O₂ Concentration and Surface Temperature' 35 | }, 36 | yAxis: [ 37 | { 38 | plot: 'O2 concentration', 39 | min: '3', 40 | max: '6', 41 | title: 'O₂ Concentration (mg/L)' 42 | }, 43 | { 44 | plot: 'Surface Temperature', 45 | min: '18', 46 | max: '30', 47 | title: 'Surface Temperature (°C)' 48 | } 49 | ] 50 | }; 51 | this.fetchData(); 52 | } 53 | 54 | // In this method we will create our DataStore and using that we will create a custom DataTable which takes two 55 | // parameters, one is data another is schema. 56 | fetchData() { 57 | var jsonify = res => res.json(); 58 | var dataFetch = fetch( 59 | 'https://s3.eu-central-1.amazonaws.com/fusion.store/ft/data/plotting-two-variable-measures-data.json' 60 | ).then(jsonify); 61 | var schemaFetch = fetch( 62 | 'https://s3.eu-central-1.amazonaws.com/fusion.store/ft/schema/plotting-two-variable-measures-schema.json' 63 | ).then(jsonify); 64 | 65 | Promise.all([dataFetch, schemaFetch]).then(res => { 66 | const data = res[0]; 67 | const schema = res[1]; 68 | // First we are creating a DataStore 69 | const fusionDataStore = new FusionCharts.DataStore(); 70 | // After that we are creating a DataTable by passing our data and schema as arguments 71 | const fusionTable = fusionDataStore.createDataTable(data, schema); 72 | // Afet that we simply mutated our timeseries datasource by attaching the above 73 | // DataTable into its data property. 74 | this.dataSource.data = fusionTable; 75 | }); 76 | } 77 | 78 | ngOnInit() { 79 | setTimeout(() => { 80 | SelectedSingleton.change(this.sampleCode['ex29'].title); 81 | }); 82 | } 83 | } 84 | -------------------------------------------------------------------------------- /src/app/fusioncharts/ex32/ex32.ts: -------------------------------------------------------------------------------- 1 | import { Component, NgZone } from '@angular/core'; 2 | 3 | import fcDemos from '../samplecode'; 4 | import SelectedSingleton from '../services/selected.singleton'; 5 | import * as FusionCharts from 'fusioncharts'; 6 | 7 | declare var Prism; 8 | 9 | @Component({ 10 | selector: 'chart', 11 | templateUrl: './ex32.html', 12 | styleUrls: ['../ex.css'], 13 | standalone: false 14 | }) 15 | export class Ex32 { 16 | demoId = 'ex32'; 17 | sampleCode = fcDemos; 18 | dataSource: any; 19 | type: string; 20 | width: string; 21 | height: string; 22 | constructor() { 23 | this.type = 'timeseries'; 24 | this.width = '100%'; 25 | this.height = '400'; 26 | // This is the dataSource of the chart 27 | this.dataSource = { 28 | // Initially data is set as null 29 | data: null, 30 | chart: {}, 31 | caption: { 32 | text: 'Apple Inc. Stock Price' 33 | }, 34 | subcaption: { 35 | text: 'Stock prices from January 1980 - November 2011' 36 | }, 37 | yaxis: [ 38 | { 39 | plot: { 40 | value: { 41 | open: 'Open', 42 | high: 'High', 43 | low: 'Low', 44 | close: 'Close' 45 | }, 46 | type: 'candlestick' 47 | }, 48 | format: { 49 | prefix: '$' 50 | }, 51 | title: 'Stock Value' 52 | } 53 | ] 54 | }; 55 | this.fetchData(); 56 | } 57 | 58 | // In this method we will create our DataStore and using that we will create a custom DataTable which takes two 59 | // parameters, one is data another is schema. 60 | fetchData() { 61 | var jsonify = res => res.json(); 62 | var dataFetch = fetch( 63 | 'https://s3.eu-central-1.amazonaws.com/fusion.store/ft/data/candlestick-chart-data.json' 64 | ).then(jsonify); 65 | var schemaFetch = fetch( 66 | 'https://s3.eu-central-1.amazonaws.com/fusion.store/ft/schema/candlestick-chart-schema.json' 67 | ).then(jsonify); 68 | 69 | Promise.all([dataFetch, schemaFetch]).then(res => { 70 | const data = res[0]; 71 | const schema = res[1]; 72 | // First we are creating a DataStore 73 | const fusionDataStore = new FusionCharts.DataStore(); 74 | // After that we are creating a DataTable by passing our data and schema as arguments 75 | const fusionTable = fusionDataStore.createDataTable(data, schema); 76 | // Afet that we simply mutated our timeseries datasource by attaching the above 77 | // DataTable into its data property. 78 | this.dataSource.data = fusionTable; 79 | }); 80 | } 81 | 82 | ngOnInit() { 83 | setTimeout(() => { 84 | SelectedSingleton.change(this.sampleCode['ex32'].title); 85 | }); 86 | } 87 | } 88 | -------------------------------------------------------------------------------- /dist/index.js: -------------------------------------------------------------------------------- 1 | import { NgModule } from "@angular/core"; 2 | import { FusionChartsComponent } from "./src/fusioncharts.component"; 3 | import { FusionChartsDirective } from "./src/fusioncharts.directive"; 4 | import { FusionChartsPipe } from "./src/fusioncharts.pipe"; 5 | import { FusionChartsStatic, FusionChartsService, } from "./src/fusioncharts.service"; 6 | import * as i0 from "@angular/core"; 7 | export { FusionChartsComponent, FusionChartsDirective, FusionChartsPipe, FusionChartsStatic, }; 8 | var FusionChartsModule = /** @class */ (function () { 9 | function FusionChartsModule() { 10 | } 11 | // Keep this for backward compatible 12 | FusionChartsModule.forRoot = function (fcCore) { 13 | var fcModules = []; 14 | for (var _i = 1; _i < arguments.length; _i++) { 15 | fcModules[_i - 1] = arguments[_i]; 16 | } 17 | return { 18 | ngModule: FusionChartsModule, 19 | providers: [ 20 | { 21 | provide: FusionChartsStatic, 22 | useValue: { 23 | core: fcCore, 24 | modules: fcModules, 25 | }, 26 | }, 27 | ], 28 | }; 29 | }; 30 | FusionChartsModule.fcRoot = function (fcCore) { 31 | var fcModules = []; 32 | for (var _i = 1; _i < arguments.length; _i++) { 33 | fcModules[_i - 1] = arguments[_i]; 34 | } 35 | FusionChartsService.setFCRoot({ 36 | core: fcCore, 37 | modules: fcModules, 38 | }); 39 | }; 40 | FusionChartsModule.ɵfac = function FusionChartsModule_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || FusionChartsModule)(); }; 41 | FusionChartsModule.ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: FusionChartsModule }); 42 | FusionChartsModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ providers: [FusionChartsService, FusionChartsStatic] }); 43 | return FusionChartsModule; 44 | }()); 45 | export { FusionChartsModule }; 46 | (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FusionChartsModule, [{ 47 | type: NgModule, 48 | args: [{ 49 | declarations: [ 50 | FusionChartsComponent, 51 | FusionChartsDirective, 52 | FusionChartsPipe, 53 | ], 54 | exports: [FusionChartsComponent, FusionChartsDirective, FusionChartsPipe], 55 | providers: [FusionChartsService, FusionChartsStatic], 56 | }] 57 | }], null, null); })(); 58 | (function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(FusionChartsModule, { declarations: [FusionChartsComponent, 59 | FusionChartsDirective, 60 | FusionChartsPipe], exports: [FusionChartsComponent, FusionChartsDirective, FusionChartsPipe] }); })(); 61 | //# sourceMappingURL=index.js.map -------------------------------------------------------------------------------- /examples/ng-app-17/angular.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json", 3 | "version": 1, 4 | "newProjectRoot": "projects", 5 | "projects": { 6 | "ng-app-17": { 7 | "projectType": "application", 8 | "schematics": {}, 9 | "root": "", 10 | "sourceRoot": "src", 11 | "prefix": "app", 12 | "architect": { 13 | "build": { 14 | "builder": "@angular-devkit/build-angular:application", 15 | "options": { 16 | "outputPath": "dist/ng-app-17", 17 | "index": "src/index.html", 18 | "browser": "src/main.ts", 19 | "polyfills": [ 20 | "zone.js" 21 | ], 22 | "tsConfig": "tsconfig.app.json", 23 | "assets": [ 24 | "src/favicon.ico", 25 | "src/assets" 26 | ], 27 | "styles": [ 28 | "src/styles.css" 29 | ], 30 | "scripts": [] 31 | }, 32 | "configurations": { 33 | "production": { 34 | "budgets": [ 35 | { 36 | "type": "initial", 37 | "maximumWarning": "500kb", 38 | "maximumError": "1mb" 39 | }, 40 | { 41 | "type": "anyComponentStyle", 42 | "maximumWarning": "2kb", 43 | "maximumError": "4kb" 44 | } 45 | ], 46 | "outputHashing": "all" 47 | }, 48 | "development": { 49 | "optimization": false, 50 | "extractLicenses": false, 51 | "sourceMap": true 52 | } 53 | }, 54 | "defaultConfiguration": "production" 55 | }, 56 | "serve": { 57 | "builder": "@angular-devkit/build-angular:dev-server", 58 | "configurations": { 59 | "production": { 60 | "buildTarget": "ng-app-17:build:production" 61 | }, 62 | "development": { 63 | "buildTarget": "ng-app-17:build:development" 64 | } 65 | }, 66 | "defaultConfiguration": "development" 67 | }, 68 | "extract-i18n": { 69 | "builder": "@angular-devkit/build-angular:extract-i18n", 70 | "options": { 71 | "buildTarget": "ng-app-17:build" 72 | } 73 | }, 74 | "test": { 75 | "builder": "@angular-devkit/build-angular:karma", 76 | "options": { 77 | "polyfills": [ 78 | "zone.js", 79 | "zone.js/testing" 80 | ], 81 | "tsConfig": "tsconfig.spec.json", 82 | "assets": [ 83 | "src/favicon.ico", 84 | "src/assets" 85 | ], 86 | "styles": [ 87 | "src/styles.css" 88 | ], 89 | "scripts": [] 90 | } 91 | } 92 | } 93 | } 94 | } 95 | } 96 | -------------------------------------------------------------------------------- /examples/ng-app-18/angular.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json", 3 | "version": 1, 4 | "newProjectRoot": "projects", 5 | "projects": { 6 | "ng-app-18": { 7 | "projectType": "application", 8 | "schematics": {}, 9 | "root": "", 10 | "sourceRoot": "src", 11 | "prefix": "app", 12 | "architect": { 13 | "build": { 14 | "builder": "@angular-devkit/build-angular:application", 15 | "options": { 16 | "outputPath": "dist/ng-app-18", 17 | "index": "src/index.html", 18 | "browser": "src/main.ts", 19 | "polyfills": [ 20 | "zone.js" 21 | ], 22 | "tsConfig": "tsconfig.app.json", 23 | "assets": [ 24 | { 25 | "glob": "**/*", 26 | "input": "public" 27 | } 28 | ], 29 | "styles": [ 30 | "src/styles.css" 31 | ], 32 | "scripts": [] 33 | }, 34 | "configurations": { 35 | "production": { 36 | "budgets": [ 37 | { 38 | "type": "initial", 39 | "maximumWarning": "500kB", 40 | "maximumError": "1MB" 41 | }, 42 | { 43 | "type": "anyComponentStyle", 44 | "maximumWarning": "2kB", 45 | "maximumError": "4kB" 46 | } 47 | ], 48 | "outputHashing": "all" 49 | }, 50 | "development": { 51 | "optimization": false, 52 | "extractLicenses": false, 53 | "sourceMap": true 54 | } 55 | }, 56 | "defaultConfiguration": "production" 57 | }, 58 | "serve": { 59 | "builder": "@angular-devkit/build-angular:dev-server", 60 | "configurations": { 61 | "production": { 62 | "buildTarget": "ng-app-18:build:production" 63 | }, 64 | "development": { 65 | "buildTarget": "ng-app-18:build:development" 66 | } 67 | }, 68 | "defaultConfiguration": "development" 69 | }, 70 | "extract-i18n": { 71 | "builder": "@angular-devkit/build-angular:extract-i18n" 72 | }, 73 | "test": { 74 | "builder": "@angular-devkit/build-angular:karma", 75 | "options": { 76 | "polyfills": [ 77 | "zone.js", 78 | "zone.js/testing" 79 | ], 80 | "tsConfig": "tsconfig.spec.json", 81 | "assets": [ 82 | { 83 | "glob": "**/*", 84 | "input": "public" 85 | } 86 | ], 87 | "styles": [ 88 | "src/styles.css" 89 | ], 90 | "scripts": [] 91 | } 92 | } 93 | } 94 | } 95 | } 96 | } 97 | -------------------------------------------------------------------------------- /src/app/observable/observable.component.ts: -------------------------------------------------------------------------------- 1 | 2 | import {share} from 'rxjs/operators'; 3 | import {Component} from '@angular/core'; 4 | import {Observable, Observer} from 'rxjs'; 5 | 6 | import * as FusionCharts from 'fusioncharts'; 7 | 8 | 9 | 10 | 11 | 12 | export class NavService { 13 | // Data store 14 | private dataStore: any; 15 | 16 | navChange$: Observable; 17 | private _observer: Observer; 18 | 19 | constructor() { 20 | this.navChange$ = new Observable(observer => this._observer = observer ).pipe(share()); 21 | this.dataStore = { 22 | name: "Rohit", 23 | lname: "Kumar" 24 | } 25 | // share() allows multiple subscribers 26 | } 27 | 28 | changeNav(number) { 29 | this.dataStore.name = number; 30 | 31 | this._observer.next(number); 32 | } 33 | 34 | navItem() { 35 | return this.dataStore; 36 | } 37 | } 38 | 39 | 40 | @Component({ 41 | selector: 'obs-comp', 42 | template: `obs component, item: {{item.name}}`, 43 | standalone: false 44 | }) 45 | export class ObservingComponent { 46 | item: any; 47 | subscription: any; 48 | constructor(private _navService: NavService) { 49 | 50 | } 51 | ngOnChanges() { 52 | console.log('changes obs'); 53 | } 54 | 55 | ngOnInit() { 56 | this.item = this._navService.navItem(); 57 | this.subscription = this._navService.navChange$.subscribe(item => this.selectedNavItem(item)); 58 | } 59 | selectedNavItem(item: Object) { 60 | this.item.name = '' + item; 61 | } 62 | ngOnDestroy() { 63 | this.subscription.unsubscribe(); 64 | } 65 | } 66 | 67 | 68 | @Component({ 69 | selector: 'my-nav', 70 | template: ` 71 |
nav 1 (Jhon)
72 |
nav 2 (Michael)
73 | `, 74 | standalone: false 75 | }) 76 | export class Navigation { 77 | item: { 78 | name: "Rohit" 79 | }; 80 | constructor(private _navService: NavService) { 81 | 82 | } 83 | ngOnChanges() { 84 | console.log('changes Nav'); 85 | } 86 | selectedNavItem(item: string) { 87 | console.log('selected nav item ' + item); 88 | this._navService.changeNav(item); 89 | } 90 | } 91 | 92 | 93 | @Component({ 94 | selector: 'my-app', 95 | template: `{{title}} 96 |

97 | 98 | 99 | @if (showObsComp) { 100 |

101 | 102 |
103 | } 104 | `, 105 | standalone: false 106 | }) 107 | export class MyAppComponent { 108 | title = "Angular 2 - event delegation"; 109 | showObsComp = true; 110 | ngOnChanges() { 111 | console.log('changes MyApp'); 112 | } 113 | constructor() { 114 | } 115 | } 116 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular-fusioncharts", 3 | "version": "4.2.0", 4 | "scripts": { 5 | "ng": "ng", 6 | "start": "ng serve", 7 | "start-prod": "ng serve --configuration production", 8 | "build": "rm -rf dist/ && npx ngc -p tsconfig-aot.json && rollup -c rollup.config.js && cp package-dist.json dist/package.json && cp README.md dist/ && cp LICENSE.md dist/ && npm run uglify", 9 | "docs": "ng build --configuration production && npm run build", 10 | "test": "ng test", 11 | "lint": "ng lint", 12 | "e2e": "ng e2e", 13 | "transpile": "ngc -p tsconfig-aot.json", 14 | "tsc": "tsc", 15 | "package": "rollup -c", 16 | "uglify": "uglifyjs dist/dist/index.js --compress --mangle --comments --output dist/dist/index.min.js" 17 | }, 18 | "repository": { 19 | "type": "git", 20 | "url": "https://github.com/fusioncharts/angular-fusioncharts" 21 | }, 22 | "author": { 23 | "name": "FusionCharts", 24 | "email": "support@fusioncharts.com" 25 | }, 26 | "contributors": [ 27 | { 28 | "name": "Meher Howji", 29 | "url": "https://github.com/meherhowji" 30 | } 31 | ], 32 | "keywords": [ 33 | "angular" 34 | ], 35 | "license": "MIT", 36 | "bugs": { 37 | "url": "https://github.com/fusioncharts/angular-fusioncharts/issues" 38 | }, 39 | "main": "./dist/index.js", 40 | "dependencies": { 41 | "@angular/animations": "20.1.0", 42 | "@angular/common": "20.1.0", 43 | "@angular/compiler": "20.1.0", 44 | "@angular/core": "20.1.0", 45 | "@angular/forms": "20.1.0", 46 | "@angular/platform-browser": "20.1.0", 47 | "@angular/platform-browser-dynamic": "20.1.0", 48 | "@angular/router": "20.1.0", 49 | "angularjs2-tabs": "0.0.1-beta.1", 50 | "bootstrap": "3.3.7 - 5.x", 51 | "core-js": "2.4.1 - 3.x", 52 | "https-proxy-agent": "2.2.4 - 5.x", 53 | "jasmine-core": "^5.8.0", 54 | "karma-cli": "^2.0.0", 55 | "mixin-deep": "1.3.2 - 2.x", 56 | "prismjs": "^1.6.0", 57 | "rxjs": "5.4.1 - 8.x", 58 | "rxjs-compat": "^6.0.0-rc.0", 59 | "tslib": "^2.0.0", 60 | "websocket-extensions": "^0.1.4", 61 | "ws": "3.3.3 - 8.x", 62 | "zone.js": "~0.15.1" 63 | }, 64 | "devDependencies": { 65 | "@angular-devkit/build-angular": "^20.1.0", 66 | "@angular/cli": "^20.1.0", 67 | "@angular/compiler-cli": "20.1.0", 68 | "@angular/language-service": "20.1.0", 69 | "@ctrl/ngx-codemirror": "^7.0.0", 70 | "@types/codemirror": "0.0.58 - 5.x", 71 | "@types/jasmine": "2.5.53 - 4.x", 72 | "@types/jasminewd2": "^2.0.10", 73 | "@types/node": "6.0.60 - 17.x", 74 | "codelyzer": "^6.0.0", 75 | "codemirror": "^5.65.10", 76 | "fusioncharts": "^3.20.0", 77 | "jasmine-spec-reporter": "4.1.0 - 7.x", 78 | "karma": "3.0.0 - 6.x", 79 | "karma-chrome-launcher": "2.1.1 - 3.x", 80 | "karma-coverage-istanbul-reporter": "1.2.1 - 3.x", 81 | "karma-jasmine": "1.1.0 - 5.x", 82 | "karma-jasmine-html-reporter": "0.2.2 - 1.x", 83 | "prismjs": "1.6.0 - 1.x", 84 | "protractor": "5.4.0 - 7.x", 85 | "rollup": "0.45.2 - 2.x", 86 | "ts-node": "3.0.4 - 10.x", 87 | "tslint": "5.3.2 - 6.x", 88 | "typescript": "5.8.3", 89 | "uglify-js": "^3.17.4" 90 | }, 91 | "engines": { 92 | "node": ">=4.4.1" 93 | } 94 | } 95 | -------------------------------------------------------------------------------- /tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "rulesDirectory": [ 3 | "node_modules/codelyzer" 4 | ], 5 | "rules": { 6 | "callable-types": true, 7 | "class-name": true, 8 | "comment-format": [ 9 | true, 10 | "check-space" 11 | ], 12 | "curly": true, 13 | "eofline": true, 14 | "forin": true, 15 | "deprecation": { 16 | "severity": "warning" 17 | }, 18 | "import-blacklist": [true, "rxjs"], 19 | "import-spacing": true, 20 | "indent": [ 21 | true, 22 | "spaces" 23 | ], 24 | "interface-over-type-literal": true, 25 | "label-position": true, 26 | "max-line-length": [ 27 | true, 28 | 140 29 | ], 30 | "member-access": false, 31 | "member-ordering": [ 32 | true, 33 | "static-before-instance", 34 | "variables-before-functions" 35 | ], 36 | "no-arg": true, 37 | "no-bitwise": true, 38 | "no-console": [ 39 | true, 40 | "debug", 41 | "info", 42 | "time", 43 | "timeEnd", 44 | "trace" 45 | ], 46 | "no-construct": true, 47 | "no-debugger": true, 48 | "no-duplicate-variable": true, 49 | "no-empty": false, 50 | "no-empty-interface": true, 51 | "no-eval": true, 52 | "no-inferrable-types": [true, "ignore-params"], 53 | "no-shadowed-variable": true, 54 | "no-string-literal": false, 55 | "no-string-throw": true, 56 | "no-switch-case-fall-through": true, 57 | "no-trailing-whitespace": true, 58 | "no-unused-expression": true, 59 | "no-var-keyword": true, 60 | "object-literal-sort-keys": false, 61 | "one-line": [ 62 | true, 63 | "check-open-brace", 64 | "check-catch", 65 | "check-else", 66 | "check-whitespace" 67 | ], 68 | "prefer-const": true, 69 | "quotemark": [ 70 | true, 71 | "single" 72 | ], 73 | "radix": true, 74 | "semicolon": [ 75 | "always" 76 | ], 77 | "triple-equals": [ 78 | true, 79 | "allow-null-check" 80 | ], 81 | "typedef-whitespace": [ 82 | true, 83 | { 84 | "call-signature": "nospace", 85 | "index-signature": "nospace", 86 | "parameter": "nospace", 87 | "property-declaration": "nospace", 88 | "variable-declaration": "nospace" 89 | } 90 | ], 91 | "typeof-compare": true, 92 | "unified-signatures": true, 93 | "variable-name": false, 94 | "whitespace": [ 95 | true, 96 | "check-branch", 97 | "check-decl", 98 | "check-operator", 99 | "check-separator", 100 | "check-type" 101 | ], 102 | 103 | "directive-selector": [true, "attribute", "app", "camelCase"], 104 | "component-selector": [false, "element", "app", "camel-case"], 105 | "no-inputs-metadata-property": true, 106 | "no-outputs-metadata-property": true, 107 | "no-host-metadata-property": true, 108 | "no-input-rename": true, 109 | "no-output-rename": true, 110 | "use-lifecycle-interface": true, 111 | "use-pipe-transform-interface": true, 112 | "component-class-suffix": true, 113 | "directive-class-suffix": true, 114 | "no-access-missing-member": true, 115 | "templates-use-public": true, 116 | "invoke-injectable": true 117 | } 118 | } 119 | -------------------------------------------------------------------------------- /src/app/fusioncharts/ex17/ex17.ts: -------------------------------------------------------------------------------- 1 | import { 2 | Component, 3 | NgZone 4 | } from '@angular/core'; 5 | 6 | import fcDemos from '../samplecode'; 7 | import SelectedSingleton from '../services/selected.singleton'; 8 | declare var Prism; 9 | 10 | @Component({ 11 | selector: 'chart', 12 | templateUrl: './ex17.html', 13 | styleUrls: [ 14 | '../ex.css' 15 | ], 16 | standalone: false 17 | }) 18 | export class Ex17 { 19 | demoId = 'ex17'; 20 | sampleCode = fcDemos; 21 | dataSource: any; 22 | message: string; 23 | chartObj: any; 24 | handler:any; 25 | initMessage:any; 26 | iMsg:string; 27 | clickPlotMsg:string; 28 | attached: boolean; 29 | constructor(private zone: NgZone) { 30 | this.iMsg = 'Click on Track Data Plot Clicks button to listen to dataplotclick event'; 31 | this.initMessage = this.iMsg; 32 | this.clickPlotMsg = 'Click on the plot to see the value along with the label'; 33 | this.message = this.clickPlotMsg; 34 | this.attached = false; 35 | this.dataSource = { 36 | "chart": { 37 | "caption": "Countries With Most Oil Reserves [2017-18]", 38 | "subCaption": "In MMbbl = One Million barrels", 39 | "xAxisName": "Country", 40 | "yAxisName": "Reserves (MMbbl)", 41 | "numberSuffix": "K", 42 | "theme": "fusion" 43 | }, 44 | "data": [ 45 | { 46 | "label": "Venezuela", 47 | "value": "290" 48 | }, 49 | { 50 | "label": "Saudi", 51 | "value": "260" 52 | }, 53 | { 54 | "label": "Canada", 55 | "value": "180" 56 | }, 57 | { 58 | "label": "Iran", 59 | "value": "140" 60 | }, 61 | { 62 | "label": "Russia", 63 | "value": "115" 64 | }, 65 | { 66 | "label": "UAE", 67 | "value": "100" 68 | }, 69 | { 70 | "label": "US", 71 | "value": "30" 72 | }, 73 | { 74 | "label": "China", 75 | "value": "30" 76 | } 77 | ] 78 | }; 79 | } 80 | 81 | getMessage(dataObj){ 82 | return `You have clicked on plot ${dataObj.categoryLabel} which has a value of ${dataObj.displayValue}` 83 | } 84 | 85 | dataplotClickHandler(eventObj, dataObj){ 86 | this.zone.run(() => { 87 | this.message = this.getMessage(dataObj); 88 | }); 89 | } 90 | 91 | initialized($event){ 92 | this.chartObj = $event.chart; 93 | } 94 | 95 | attachEvent(){ 96 | this.handler = this.dataplotClickHandler.bind(this); 97 | this.initMessage = ''; 98 | this.message = this.clickPlotMsg; 99 | this.attached = true; 100 | this.chartObj.addEventListener('dataplotClick',this.handler); 101 | } 102 | 103 | removeEvent(){ 104 | this.initMessage = this.iMsg; 105 | this.message = this.clickPlotMsg; 106 | this.attached = false; 107 | this.chartObj.removeEventListener('dataplotClick', this.handler); 108 | } 109 | 110 | ngOnInit() { 111 | setTimeout(() => { 112 | SelectedSingleton.change(this.sampleCode['ex17'].title); 113 | }) 114 | } 115 | } 116 | -------------------------------------------------------------------------------- /src/app/fusioncharts/ex21/ex21.html: -------------------------------------------------------------------------------- 1 | 81 |
82 |
83 |
84 | 85 | 86 |
87 | Select size: 88 |
89 |
90 | 92 | 93 |
94 |
95 | 97 | 98 |
99 |
100 | 102 | 103 |
104 | 105 |
106 |
107 |
108 |
109 |
110 | 111 | 112 | 113 | -------------------------------------------------------------------------------- /src/angular-fusioncharts/events/events.ts: -------------------------------------------------------------------------------- 1 | let eventList:Array = [ 2 | "beforeLinkedItemOpen", 3 | "linkedItemOpened", 4 | "beforeLinkedItemClose", 5 | "linkedItemClosed", 6 | "printReadyStateChange", 7 | "dataLoadRequestCompleted", 8 | "dataLoadError", 9 | "dataLoadCancelled", 10 | "dataLoadRequestCancelled", 11 | "dataUpdated", 12 | "dataUpdateCancelled", 13 | "dataLoadRequested", 14 | "beforeDataUpdate", 15 | "realTimeUpdateComplete", 16 | "chartCleared", 17 | "slicingEnd", 18 | "slicingStart", 19 | "entityRollOut", 20 | "entityRollOver", 21 | "entityClick", 22 | "connectorRollOver", 23 | "connectorRollOut", 24 | "connectorClick", 25 | "markerRollOver", 26 | "markerRollOut", 27 | "markerClick", 28 | "pageNavigated", 29 | "rotationEnd", 30 | "rotationStart", 31 | "centerLabelRollover", 32 | "centerLabelRollout", 33 | "centerLabelClick", 34 | "centerLabelChanged", 35 | "chartClick", 36 | "chartMouseMove", 37 | "chartRollOver", 38 | "chartRollOut", 39 | "backgroundLoaded", 40 | "backgroundLoadError", 41 | "legendItemClicked", 42 | "legendItemRollover", 43 | "legendItemRollout", 44 | "logoRollover", 45 | "logoRollout", 46 | "logoClick", 47 | "logoLoaded", 48 | "logoLoadError", 49 | "beforeExport", 50 | "exported", 51 | "exportCancelled", 52 | "beforePrint", 53 | "printComplete", 54 | "printCancelled", 55 | "dataLabelClick", 56 | "dataLabelRollOver", 57 | "dataLabelRollOut", 58 | "scrollStart", 59 | "scrollEnd", 60 | "onScroll", 61 | "zoomReset", 62 | "zoomedOut", 63 | "zoomedIn", 64 | "zoomed", 65 | "zoomModeChanged", 66 | "pinned", 67 | "dataRestored", 68 | "beforeDataSubmit", 69 | "dataSubmitError", 70 | "dataSubmitted", 71 | "dataSubmitCancelled", 72 | "chartUpdated", 73 | "nodeAdded", 74 | "nodeUpdated", 75 | "nodeDeleted", 76 | "connectorAdded", 77 | "connectorUpdated", 78 | "connectorDeleted", 79 | "labelAdded", 80 | "labelDeleted", 81 | "selectionRemoved", 82 | "selectionStart", 83 | "selectionEnd", 84 | "labelClick", 85 | "labelRollOver", 86 | "labelRollOut", 87 | "labelDragStart", 88 | "labelDragEnd", 89 | "dataplotDragStart", 90 | "dataplotDragEnd", 91 | "processClick", 92 | "processRollOver", 93 | "processRollOut", 94 | "categoryClick", 95 | "categoryRollOver", 96 | "categoryRollOut", 97 | "milestoneClick", 98 | "milestoneRollOver", 99 | "milestoneRollOut", 100 | "chartTypeChanged", 101 | "overlayButtonClick", 102 | "loaded", 103 | "rendered", 104 | "drawComplete", 105 | "renderComplete", 106 | "dataInvalid", 107 | "dataXMLInvalid", 108 | "dataLoaded", 109 | "noDataToDisplay", 110 | "legendPointerDragStart", 111 | "legendPointerDragStop", 112 | "legendRangeUpdated", 113 | "alertComplete", 114 | "realTimeUpdateError", 115 | "dataplotRollOver", 116 | "dataplotRollOut", 117 | "dataplotClick", 118 | "linkClicked", 119 | "beforeRender", 120 | "renderCancelled", 121 | "beforeResize", 122 | "resized", 123 | "resizeCancelled", 124 | "beforeDispose", 125 | "disposed", 126 | "disposeCancelled", 127 | "linkedChartInvoked", 128 | "beforeDrillDown", 129 | "drillDown", 130 | "beforeDrillUp", 131 | "drillUp", 132 | "drillDownCancelled", 133 | "drillUpCancelled", 134 | ]; 135 | 136 | export default eventList; 137 | -------------------------------------------------------------------------------- /src/app/fusioncharts/ex20/ex20.html: -------------------------------------------------------------------------------- 1 | 81 |
82 |
83 |
84 |
85 |
86 | 92 | 93 |
94 |
95 | 96 |
97 | Select size: 98 |
99 |
100 | 102 | 103 |
104 |
105 | 107 | 108 |
109 |
110 | 112 | 113 |
114 | 115 |
116 |
117 |
118 |
119 |
120 | 121 | 122 | 123 | -------------------------------------------------------------------------------- /dist/events/events.js: -------------------------------------------------------------------------------- 1 | var eventList = [ 2 | "beforeLinkedItemOpen", 3 | "linkedItemOpened", 4 | "beforeLinkedItemClose", 5 | "linkedItemClosed", 6 | "printReadyStateChange", 7 | "dataLoadRequestCompleted", 8 | "dataLoadError", 9 | "dataLoadCancelled", 10 | "dataLoadRequestCancelled", 11 | "dataUpdated", 12 | "dataUpdateCancelled", 13 | "dataLoadRequested", 14 | "beforeDataUpdate", 15 | "realTimeUpdateComplete", 16 | "chartCleared", 17 | "slicingEnd", 18 | "slicingStart", 19 | "entityRollOut", 20 | "entityRollOver", 21 | "entityClick", 22 | "connectorRollOver", 23 | "connectorRollOut", 24 | "connectorClick", 25 | "markerRollOver", 26 | "markerRollOut", 27 | "markerClick", 28 | "pageNavigated", 29 | "rotationEnd", 30 | "rotationStart", 31 | "centerLabelRollover", 32 | "centerLabelRollout", 33 | "centerLabelClick", 34 | "centerLabelChanged", 35 | "chartClick", 36 | "chartMouseMove", 37 | "chartRollOver", 38 | "chartRollOut", 39 | "backgroundLoaded", 40 | "backgroundLoadError", 41 | "legendItemClicked", 42 | "legendItemRollover", 43 | "legendItemRollout", 44 | "logoRollover", 45 | "logoRollout", 46 | "logoClick", 47 | "logoLoaded", 48 | "logoLoadError", 49 | "beforeExport", 50 | "exported", 51 | "exportCancelled", 52 | "beforePrint", 53 | "printComplete", 54 | "printCancelled", 55 | "dataLabelClick", 56 | "dataLabelRollOver", 57 | "dataLabelRollOut", 58 | "scrollStart", 59 | "scrollEnd", 60 | "onScroll", 61 | "zoomReset", 62 | "zoomedOut", 63 | "zoomedIn", 64 | "zoomed", 65 | "zoomModeChanged", 66 | "pinned", 67 | "dataRestored", 68 | "beforeDataSubmit", 69 | "dataSubmitError", 70 | "dataSubmitted", 71 | "dataSubmitCancelled", 72 | "chartUpdated", 73 | "nodeAdded", 74 | "nodeUpdated", 75 | "nodeDeleted", 76 | "connectorAdded", 77 | "connectorUpdated", 78 | "connectorDeleted", 79 | "labelAdded", 80 | "labelDeleted", 81 | "selectionRemoved", 82 | "selectionStart", 83 | "selectionEnd", 84 | "labelClick", 85 | "labelRollOver", 86 | "labelRollOut", 87 | "labelDragStart", 88 | "labelDragEnd", 89 | "dataplotDragStart", 90 | "dataplotDragEnd", 91 | "processClick", 92 | "processRollOver", 93 | "processRollOut", 94 | "categoryClick", 95 | "categoryRollOver", 96 | "categoryRollOut", 97 | "milestoneClick", 98 | "milestoneRollOver", 99 | "milestoneRollOut", 100 | "chartTypeChanged", 101 | "overlayButtonClick", 102 | "loaded", 103 | "rendered", 104 | "drawComplete", 105 | "renderComplete", 106 | "dataInvalid", 107 | "dataXMLInvalid", 108 | "dataLoaded", 109 | "noDataToDisplay", 110 | "legendPointerDragStart", 111 | "legendPointerDragStop", 112 | "legendRangeUpdated", 113 | "alertComplete", 114 | "realTimeUpdateError", 115 | "dataplotRollOver", 116 | "dataplotRollOut", 117 | "dataplotClick", 118 | "linkClicked", 119 | "beforeRender", 120 | "renderCancelled", 121 | "beforeResize", 122 | "resized", 123 | "resizeCancelled", 124 | "beforeDispose", 125 | "disposed", 126 | "disposeCancelled", 127 | "linkedChartInvoked", 128 | "beforeDrillDown", 129 | "drillDown", 130 | "beforeDrillUp", 131 | "drillUp", 132 | "drillDownCancelled", 133 | "drillUpCancelled", 134 | ]; 135 | export default eventList; 136 | //# sourceMappingURL=events.js.map -------------------------------------------------------------------------------- /dist/src/fusioncharts.service.js: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | import * as i0 from "@angular/core"; 3 | var FusionChartsStatic = /** @class */ (function () { 4 | function FusionChartsStatic() { 5 | } 6 | FusionChartsStatic.ɵfac = function FusionChartsStatic_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || FusionChartsStatic)(); }; 7 | FusionChartsStatic.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: FusionChartsStatic, factory: FusionChartsStatic.ɵfac }); 8 | return FusionChartsStatic; 9 | }()); 10 | export { FusionChartsStatic }; 11 | (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FusionChartsStatic, [{ 12 | type: Injectable 13 | }], null, null); })(); 14 | var FusionChartsService = /** @class */ (function () { 15 | function FusionChartsService(FCStatic) { 16 | var fcRoot; 17 | if (FusionChartsService.isFCRootSet()) { 18 | fcRoot = FusionChartsService.getFCRoot(); 19 | } 20 | else { 21 | fcRoot = { 22 | core: FCStatic.core, 23 | modules: FCStatic.modules 24 | }; 25 | } 26 | this.resolveFusionCharts(fcRoot.core, fcRoot.modules); 27 | } 28 | FusionChartsService.setFCRoot = function (fcRoot) { 29 | FusionChartsService._fcRoot = fcRoot; 30 | }; 31 | FusionChartsService.getFCRoot = function () { 32 | return FusionChartsService._fcRoot; 33 | }; 34 | FusionChartsService.isFCRootSet = function () { 35 | return !!FusionChartsService._fcRoot; 36 | }; 37 | FusionChartsService.prototype.resolveFusionCharts = function (core, modules) { 38 | if (core && core.id && core.id === 'FusionCharts') { 39 | this._fusionchartsStatice = core; 40 | } 41 | else { 42 | this._fusionchartsStatice = core(); 43 | } 44 | if (modules) { 45 | modules.forEach(function (FusionChartsModule) { 46 | // Handle both function and object-with-default (ESM interop) 47 | var moduleFn = FusionChartsModule; 48 | if (FusionChartsModule && typeof FusionChartsModule === 'object' && FusionChartsModule.default) { 49 | moduleFn = FusionChartsModule.default; 50 | } 51 | if ((moduleFn.getName && moduleFn.getType) || 52 | (moduleFn.name && moduleFn.type)) { 53 | core.addDep(moduleFn); 54 | } 55 | else if (typeof moduleFn === 'function') { 56 | moduleFn(core); 57 | } 58 | }); 59 | } 60 | }; 61 | FusionChartsService.prototype.getFusionChartsStatic = function () { 62 | return this._fusionchartsStatice; 63 | }; 64 | FusionChartsService.prototype.getNextItemCount = function () { 65 | FusionChartsService.itemCount++; 66 | return FusionChartsService.itemCount; 67 | }; 68 | FusionChartsService._fcRoot = null; 69 | FusionChartsService.itemCount = 0; 70 | FusionChartsService.ɵfac = function FusionChartsService_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || FusionChartsService)(i0.ɵɵinject(FusionChartsStatic)); }; 71 | FusionChartsService.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: FusionChartsService, factory: FusionChartsService.ɵfac }); 72 | return FusionChartsService; 73 | }()); 74 | export { FusionChartsService }; 75 | (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FusionChartsService, [{ 76 | type: Injectable 77 | }], function () { return [{ type: FusionChartsStatic }]; }, null); })(); 78 | //# sourceMappingURL=fusioncharts.service.js.map -------------------------------------------------------------------------------- /dist/src/fusioncharts.service.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"fusioncharts.service.js","sourceRoot":"","sources":["../../src/angular-fusioncharts/src/fusioncharts.service.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;;AAE3C;IAAA;KAIC;wHAHY,kBAAkB;4EAAlB,kBAAkB,WAAlB,kBAAkB;6BAH/B;CAMC,AAJD,IAIC;SAHY,kBAAkB;uFAAlB,kBAAkB;cAD9B,UAAU;;AAMX;IAkBE,6BAAY,QAA4B;QACtC,IAAI,MAAW,CAAC;QAChB,IAAI,mBAAmB,CAAC,WAAW,EAAE,EAAE,CAAC;YACtC,MAAM,GAAG,mBAAmB,CAAC,SAAS,EAAE,CAAC;QAC3C,CAAC;aAAM,CAAC;YACN,MAAM,GAAG;gBACP,IAAI,EAAE,QAAQ,CAAC,IAAI;gBACnB,OAAO,EAAE,QAAQ,CAAC,OAAO;aAC1B,CAAC;QACJ,CAAC;QACD,IAAI,CAAC,mBAAmB,CAAC,MAAM,CAAC,IAAI,EAAE,MAAM,CAAC,OAAO,CAAC,CAAC;IACxD,CAAC;IAvBM,6BAAS,GAAhB,UAAiB,MAAW;QAC1B,mBAAmB,CAAC,OAAO,GAAG,MAAM,CAAC;IACvC,CAAC;IAEM,6BAAS,GAAhB;QACE,OAAO,mBAAmB,CAAC,OAAO,CAAC;IACrC,CAAC;IAEM,+BAAW,GAAlB;QACE,OAAO,CAAC,CAAC,mBAAmB,CAAC,OAAO,CAAC;IACvC,CAAC;IAeD,iDAAmB,GAAnB,UAAoB,IAAS,EAAE,OAAc;QAC3C,IAAI,IAAI,IAAI,IAAI,CAAC,EAAE,IAAI,IAAI,CAAC,EAAE,KAAK,cAAc,EAAE,CAAC;YAClD,IAAI,CAAC,oBAAoB,GAAG,IAAI,CAAC;QACnC,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,oBAAoB,GAAG,IAAI,EAAE,CAAC;QACrC,CAAC;QAED,IAAI,OAAO,EAAE,CAAC;YACZ,OAAO,CAAC,OAAO,CAAC,UAAC,kBAAuB;gBACtC,6DAA6D;gBAC7D,IAAI,QAAQ,GAAG,kBAAkB,CAAC;gBAClC,IAAI,kBAAkB,IAAI,OAAO,kBAAkB,KAAK,QAAQ,IAAI,kBAAkB,CAAC,OAAO,EAAE,CAAC;oBAC/F,QAAQ,GAAG,kBAAkB,CAAC,OAAO,CAAC;gBACxC,CAAC;gBACD,IACE,CAAC,QAAQ,CAAC,OAAO,IAAI,QAAQ,CAAC,OAAO,CAAC;oBACtC,CAAC,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,IAAI,CAAC,EAChC,CAAC;oBACD,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;gBACxB,CAAC;qBAAM,IAAI,OAAO,QAAQ,KAAK,UAAU,EAAE,CAAC;oBAC1C,QAAQ,CAAC,IAAI,CAAC,CAAC;gBACjB,CAAC;YACH,CAAC,CAAC,CAAC;QACL,CAAC;IACH,CAAC;IAED,mDAAqB,GAArB;QACE,OAAO,IAAI,CAAC,oBAAoB,CAAC;IACnC,CAAC;IAED,8CAAgB,GAAhB;QACE,mBAAmB,CAAC,SAAS,EAAE,CAAC;QAChC,OAAO,mBAAmB,CAAC,SAAS,CAAC;IACvC,CAAC;IA9DM,2BAAO,GAAQ,IAAI,AAAZ,CAAa;IACpB,6BAAS,GAAQ,CAAC,AAAT,CAAU;0HAFf,mBAAmB;6EAAnB,mBAAmB,WAAnB,mBAAmB;8BAThC;CAyEC,AAjED,IAiEC;SAhEY,mBAAmB;uFAAnB,mBAAmB;cAD/B,UAAU","sourcesContent":["import { Injectable } from '@angular/core';\n\n@Injectable()\nexport class FusionChartsStatic {\n core: any;\n modules: Function[];\n}\n\n@Injectable()\nexport class FusionChartsService {\n static _fcRoot: any = null;\n static itemCount: any = 0;\n _fusionchartsStatice: FusionChartsStatic;\n\n static setFCRoot(fcRoot: any) {\n FusionChartsService._fcRoot = fcRoot;\n }\n\n static getFCRoot(): any {\n return FusionChartsService._fcRoot;\n }\n\n static isFCRootSet() {\n return !!FusionChartsService._fcRoot;\n }\n\n constructor(FCStatic: FusionChartsStatic) {\n let fcRoot: any;\n if (FusionChartsService.isFCRootSet()) {\n fcRoot = FusionChartsService.getFCRoot();\n } else {\n fcRoot = {\n core: FCStatic.core,\n modules: FCStatic.modules\n };\n }\n this.resolveFusionCharts(fcRoot.core, fcRoot.modules);\n }\n\n resolveFusionCharts(core: any, modules: any[]) {\n if (core && core.id && core.id === 'FusionCharts') {\n this._fusionchartsStatice = core;\n } else {\n this._fusionchartsStatice = core();\n }\n\n if (modules) {\n modules.forEach((FusionChartsModule: any) => {\n // Handle both function and object-with-default (ESM interop)\n let moduleFn = FusionChartsModule;\n if (FusionChartsModule && typeof FusionChartsModule === 'object' && FusionChartsModule.default) {\n moduleFn = FusionChartsModule.default;\n }\n if (\n (moduleFn.getName && moduleFn.getType) ||\n (moduleFn.name && moduleFn.type)\n ) {\n core.addDep(moduleFn);\n } else if (typeof moduleFn === 'function') {\n moduleFn(core);\n }\n });\n }\n }\n\n getFusionChartsStatic() {\n return this._fusionchartsStatice;\n }\n\n getNextItemCount() {\n FusionChartsService.itemCount++;\n return FusionChartsService.itemCount;\n }\n}\n"]} --------------------------------------------------------------------------------