From 5021ff2b7f615a5b566b4bab0faf70991f5a53db Mon Sep 17 00:00:00 2001 From: gevgeny Date: Sun, 30 Oct 2016 17:25:20 +0300 Subject: [PATCH 1/4] integrate with angular-highcharts --- app/app.component.ts | 46 ++++++++++++++++++++++++++++++++++++++++++-- app/app.module.ts | 6 ++++-- package.json | 6 ++---- systemjs.config.js | 16 +++++++++++++++ 4 files changed, 66 insertions(+), 8 deletions(-) diff --git a/app/app.component.ts b/app/app.component.ts index b6cad8701..6d9730e16 100644 --- a/app/app.component.ts +++ b/app/app.component.ts @@ -1,7 +1,49 @@ import { Component } from '@angular/core'; +// You can load Highcharts static if you need its API +const Highcharts = require('highcharts'); + +// If you want you can load any Highcharts module here: 'highcharts/highcharts-more', 'highcharts/modules/map' and etc. +// See the node_modules/highcharts folders to find a necessary module +const Highcharts3d = require('highcharts/highcharts-3d.src'); + +// Any Highcharts static API is available throw the Highcharts variable +Highcharts.setOptions({ + colors: ['#058DC7', '#50B432', '#ED561B'] +}); + +// Plug the highcharts-3d module +Highcharts3d(Highcharts); + @Component({ selector: 'my-app', - template: `

My First Angular App

` + template: ` +

My First Angular2-Highcharts App

+ + ` }) -export class AppComponent { } +export class AppComponent { + constructor() { + this.options = { + chart: { + type: 'column', + margin: 75, + options3d: { + enabled: true, + alpha: 15, + beta: 15, + depth: 50 + } + }, + plotOptions1: { + column: { + depth: 25 + } + }, + series: [{ + data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] + }] + }; + } + options: Object; +} diff --git a/app/app.module.ts b/app/app.module.ts index 357b003a5..c90784fac 100644 --- a/app/app.module.ts +++ b/app/app.module.ts @@ -1,11 +1,13 @@ import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; +import { ChartModule } from 'angular2-highcharts'; + import { AppComponent } from './app.component'; @NgModule({ - imports: [ BrowserModule ], + imports: [ BrowserModule, ChartModule ], declarations: [ AppComponent ], - bootstrap: [ AppComponent ] + bootstrap: [ AppComponent ] }) export class AppModule { } diff --git a/package.json b/package.json index 184a7f991..08adf89eb 100644 --- a/package.json +++ b/package.json @@ -34,19 +34,18 @@ "@angular/platform-browser-dynamic": "~2.1.2", "@angular/router": "~3.1.2", "@angular/upgrade": "~2.1.2", - "angular-in-memory-web-api": "~0.1.13", - "systemjs": "0.19.40", + "angular2-highcharts": "^0.4.0", "core-js": "^2.4.1", "reflect-metadata": "^0.1.8", "rxjs": "5.0.0-beta.12", + "systemjs": "0.19.40", "zone.js": "^0.6.26" }, "devDependencies": { "concurrently": "^3.1.0", "lite-server": "^2.2.2", "typescript": "^2.0.3", - "canonical-path": "0.0.2", "http-server": "^0.9.0", "tslint": "^3.15.1", @@ -61,7 +60,6 @@ "protractor": "4.0.9", "webdriver-manager": "10.2.5", "rimraf": "^2.5.4", - "@types/core-js": "^0.9.34", "@types/node": "^6.0.46", "@types/jasmine": "^2.5.36", diff --git a/systemjs.config.js b/systemjs.config.js index 457f040fc..3b21c6213 100644 --- a/systemjs.config.js +++ b/systemjs.config.js @@ -24,6 +24,11 @@ '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js', '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js', + 'angular2-highcharts': 'npm:angular2-highcharts', + + // This mapping is for loading Highcharts static API and Highcharts modules + 'highcharts': 'npm:highcharts', + // other libraries 'rxjs': 'npm:rxjs', 'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js' @@ -35,6 +40,17 @@ defaultExtension: 'js' }, rxjs: { + defaultExtension: 'js' + }, + 'angular2-highcharts': { + main: './index.js', + defaultExtension: 'js' + }, + 'highcharts': { + // NOTE: You should set './highcharts.src.js' here + // if you are not going to use Date: Sun, 30 Oct 2016 17:28:07 +0300 Subject: [PATCH 2/4] Update README.md --- README.md | 146 +----------------------------------------------------- 1 file changed, 1 insertion(+), 145 deletions(-) diff --git a/README.md b/README.md index d26f1edfb..ec379c722 100644 --- a/README.md +++ b/README.md @@ -1,145 +1 @@ -# Angular QuickStart Source -[![Build Status][travis-badge]][travis-badge-url] - -This repository holds the TypeScript source code of the [angular.io quickstart](https://angular.io/docs/ts/latest/quickstart.html), -the foundation for most of the documentation samples and potentially a good starting point for your application. - -It's been extended with testing support so you can start writing tests immediately. - -**This is not the perfect arrangement for your application. It is not designed for production. -It exists primarily to get you started quickly with learning and prototyping in Angular** - -We are unlikely to accept suggestions about how to grow this QuickStart into something it is not. -Please keep that in mind before posting issues and PRs. - -## Prerequisites - -Node.js and npm are essential to Angular development. - - -Get it now if it's not already installed on your machine. - -**Verify that you are running at least node `v4.x.x` and npm `3.x.x`** -by running `node -v` and `npm -v` in a terminal/console window. -Older versions produce errors. - -We recommend [nvm](https://github.com/creationix/nvm) for managing multiple versions of node and npm. - -## Create a new project based on the QuickStart - -Clone this repo into new project folder (e.g., `my-proj`). -```bash -git clone https://github.com/angular/quickstart my-proj -cd my-proj -``` - -We have no intention of updating the source on `angular/quickstart`. -Discard everything "git-like" by deleting the `.git` folder. -```bash -rm -rf .git # non-Windows -rd .git /S/Q # windows -``` - -### Create a new git repo -You could [start writing code](#start-development) now and throw it all away when you're done. -If you'd rather preserve your work under source control, consider taking the following steps. - -Initialize this project as a *local git repo* and make the first commit: -```bash -git init -git add . -git commit -m "Initial commit" -``` - -Create a *remote repository* for this project on the service of your choice. - -Grab its address (e.g. *`https://github.com//my-proj.git`*) and push the *local repo* to the *remote*. -```bash -git remote add origin -git push -u origin master -``` -## Install npm packages - -> See npm and nvm version notes above - -Install the npm packages described in the `package.json` and verify that it works: - -```bash -npm install -npm start -``` - -The `npm start` command first compiles the application, -then simultaneously re-compiles and runs the `lite-server`. -Both the compiler and the server watch for file changes. - -Shut it down manually with `Ctrl-C`. - -You're ready to write your application. - -### npm scripts - -We've captured many of the most useful commands in npm scripts defined in the `package.json`: - -* `npm start` - runs the compiler and a server at the same time, both in "watch mode". -* `npm run tsc` - runs the TypeScript compiler once. -* `npm run tsc:w` - runs the TypeScript compiler in watch mode; the process keeps running, awaiting changes to TypeScript files and re-compiling when it sees them. -* `npm run lite` - runs the [lite-server](https://www.npmjs.com/package/lite-server), a light-weight, static file server, written and maintained by -[John Papa](https://github.com/johnpapa) and -[Christopher Martin](https://github.com/cgmartin) -with excellent support for Angular apps that use routing. - -Here are the test related scripts: -* `npm test` - compiles, runs and watches the karma unit tests -* `npm run e2e` - run protractor e2e tests, written in JavaScript (*e2e-spec.js) - -## Testing - -The QuickStart documentation doesn't discuss testing. -This repo adds both karma/jasmine unit test and protractor end-to-end testing support. - -These tools are configured for specific conventions described below. - -*It is unwise and rarely possible to run the application, the unit tests, and the e2e tests at the same time. -We recommend that you shut down one before starting another.* - -### Unit Tests -TypeScript unit-tests are usually in the `app` folder. Their filenames must end in `.spec`. - -Look for the example `app/app.component.spec.ts`. -Add more `.spec.ts` files as you wish; we configured karma to find them. - -Run it with `npm test` - -That command first compiles the application, then simultaneously re-compiles and runs the karma test-runner. -Both the compiler and the karma watch for (different) file changes. - -Shut it down manually with `Ctrl-C`. - -Test-runner output appears in the terminal window. -We can update our app and our tests in real-time, keeping a weather eye on the console for broken tests. -Karma is occasionally confused and it is often necessary to shut down its browser or even shut the command down (`Ctrl-C`) and -restart it. No worries; it's pretty quick. - -### End-to-end (E2E) Tests - -E2E tests are in the `e2e` directory, side by side with the `app` folder. -Their filenames must end in `.e2e-spec.ts`. - -Look for the example `e2e/app.e2e-spec.ts`. -Add more `.e2e-spec.js` files as you wish (although one usually suffices for small projects); -we configured protractor to find them. - -Thereafter, run them with `npm run e2e`. - -That command first compiles, then simultaneously starts the Http-Server at `localhost:8080` -and launches protractor. - -The pass/fail test results appear at the bottom of the terminal window. -A custom reporter (see `protractor.config.js`) generates a `./_test-output/protractor-results.txt` file -which is easier to read; this file is excluded from source control. - -Shut it down manually with `Ctrl-C`. - -[travis-badge]: https://travis-ci.org/angular/quickstart.svg?branch=master -[travis-badge-url]: https://travis-ci.org/angular/quickstart +See this commit changes https://github.com/gevgeny/angular2-quickstart-and-angular2-highcharts/commit/5021ff2b7f615a5b566b4bab0faf70991f5a53db to understand how to use [angular2-highcharts)] (https://github.com/gevgeny/angular2-highcharts) in SystemJs env From 7c1bfeec1cc9f5ce91cb48355970b411289f9f97 Mon Sep 17 00:00:00 2001 From: Eugene Gluhotorenko Date: Sun, 30 Oct 2016 17:28:33 +0300 Subject: [PATCH 3/4] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index ec379c722..baef3566c 100644 --- a/README.md +++ b/README.md @@ -1 +1 @@ -See this commit changes https://github.com/gevgeny/angular2-quickstart-and-angular2-highcharts/commit/5021ff2b7f615a5b566b4bab0faf70991f5a53db to understand how to use [angular2-highcharts)] (https://github.com/gevgeny/angular2-highcharts) in SystemJs env +See this commit changes https://github.com/gevgeny/angular2-quickstart-and-angular2-highcharts/commit/5021ff2b7f615a5b566b4bab0faf70991f5a53db to understand how to use [angular2-highcharts] (https://github.com/gevgeny/angular2-highcharts) in SystemJs env From 2cf8b7c75a9e2ec5bc2eb1f5e71758763bdb3784 Mon Sep 17 00:00:00 2001 From: Eugene Gluhotorenko Date: Sun, 30 Oct 2016 23:21:14 +0300 Subject: [PATCH 4/4] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index baef3566c..31560404b 100644 --- a/README.md +++ b/README.md @@ -1 +1 @@ -See this commit changes https://github.com/gevgeny/angular2-quickstart-and-angular2-highcharts/commit/5021ff2b7f615a5b566b4bab0faf70991f5a53db to understand how to use [angular2-highcharts] (https://github.com/gevgeny/angular2-highcharts) in SystemJs env +See this commit changes https://github.com/gevgeny/angular2-quickstart-and-angular2-highcharts/commit/5021ff2b7f615a5b566b4bab0faf70991f5a53db to understand how to use [angular2-highcharts] (https://github.com/gevgeny/angular2-highcharts) in SystemJS env