Merge pull request #257 from highcharts/2.9.0-version

2.9.0 version

README.md

@@ -13,7 +13,7 @@ Official minimal Highcharts wrapper for Angular
     1. [Core](#core)
     2. [To load a module](#to-load-a-module)
     3. [To load a plugin](#to-load-a-plugin)
-    4. [To load a map for Highmaps](#to-load-a-map-for-highmaps)
+    4. [To load a map for Highcharts Maps](#to-load-a-map-for-Highcharts-Maps)
     5. [To load a wrapper](#to-load-a-wrapper)
     6. [To use setOptions](#to-use-setoptions)
 5. [Demo app](#demo-app)
@@ -189,15 +189,15 @@ _Notice:_ The Highcharts instance is shared through components in an Angular app
 
 ### Core
 
-As core you could load **Highcharts**, **Highstock**, **Highmaps** or **Highcharts Gantt** (v. 6.2.0+).
+As core you could load **Highcharts**, **Highcharts Stock**, **Highcharts Maps** or **Highcharts Gantt** (v. 6.2.0+).
 
 * For **Highcharts**:
 
 ```ts
 import * as Highcharts from 'highcharts';
 ```
 
-* For **Highstock**:
+* For **Highcharts Stock**:
 
 ```ts
 import * as Highcharts from 'highcharts/highstock';
@@ -209,7 +209,7 @@ import HC_stock from 'highcharts/modules/stock';
 HC_stock(Highcharts);
 ```
 
-* For **Highmaps**:
+* For **Highcharts Maps**:
 
 ```ts
 import * as Highcharts from 'highcharts/highmaps';
@@ -235,7 +235,7 @@ HC_gantt(Highcharts);
 
 ### To load a module
 
-A module is a Highcharts official addon - including Highstock [Technical Indicators](https://www.highcharts.com/docs/stock/technical-indicator-series), style [themes](https://www.highcharts.com/docs/chart-design-and-style/themes), specialized series types (e.g. [Bullet](https://www.highcharts.com/docs/chart-and-series-types/bullet-chart), [Venn](https://www.highcharts.com/docs/chart-and-series-types/venn-series)). After Highcharts is imported using Highcharts, Highstock or Highmaps use `import` and initialize each module on the Highcharts variable.
+A module is a Highcharts official addon - including Highcharts Stock [Technical Indicators](https://www.highcharts.com/docs/stock/technical-indicator-series), style [themes](https://www.highcharts.com/docs/chart-design-and-style/themes), specialized series types (e.g. [Bullet](https://www.highcharts.com/docs/chart-and-series-types/bullet-chart), [Venn](https://www.highcharts.com/docs/chart-and-series-types/venn-series)). After Highcharts is imported using Highcharts, Highcharts Stock or Highcharts Maps use `import` and initialize each module on the Highcharts variable.
 
 ```ts
 import * as Highcharts from 'highcharts';
@@ -264,7 +264,7 @@ If a plugin doesn't support loading through NPM you could treat it as a wrapper
 
 If a lack of TypeScirpt definitions `d.ts` is showing as an error - see [Solving problems](https://www.highcharts.com/docs/advanced-chart-features/highcharts-typescript-beta#solving-problems) section of Highcharts documentation for Typescript usage.
 
-### To load a map for Highmaps
+### To load a map for Highcharts Maps
 
 Official map collection is published and [here](https://www.npmjs.com/package/@highcharts/map-collection#install-from-npm) are basic instructions for loading a map.
 An example can also be found in the [demo app](#demo-app).
@@ -375,10 +375,12 @@ Contains the chart component that creates Highcharts chart.
 * Stock + indicators: [https://stackblitz.com/edit/highcharts-angular-stock-indicators](https://stackblitz.com/edit/highcharts-angular-stock-indicators)
 * Stock + GUI: [https://stackblitz.com/edit/highcharts-angular-stock-gui](https://stackblitz.com/edit/highcharts-angular-stock-gui)
 * Map: [https://stackblitz.com/edit/highcharts-angular-map](https://stackblitz.com/edit/highcharts-angular-map)
+* Map + proj4: [https://stackblitz.com/edit/highcharts-angular-map-proj4](https://stackblitz.com/edit/highcharts-angular-map-proj4)
 * Optimal way to update: [https://stackblitz.com/edit/highcharts-angular-optimal-way-to-update](https://stackblitz.com/edit/highcharts-angular-optimal-way-to-update)
 * Data from the service: [https://stackblitz.com/edit/highcharts-angular-data-from-service-2](https://stackblitz.com/edit/highcharts-angular-data-from-service-2)
 * Applying a custom plugin/wrap: [https://stackblitz.com/edit/highcharts-angular-custom-plugin](https://stackblitz.com/edit/highcharts-angular-custom-plugin)
-
+* Property `XXX` does not exist on type `YYY`: [https://stackblitz.com/edit/highcharts-angular-property-xxx-doesnt-exist-on-type-yyy](https://stackblitz.com/edit/highcharts-angular-property-xxx-doesnt-exist-on-type-yyy)
+* Using portals to render an angular component within a chart: [https://stackblitz.com/edit/highcharts-angular-portal-usage](https://stackblitz.com/edit/highcharts-angular-portal-usage)
 
 ## Changing the Component
 
@@ -429,4 +431,17 @@ The correct repository to report such issues is [main Highcharts repository](htt
 #### Synchronized Charts Angular demo
 
 Based on original Highcharts demo for [Synchronized charts](https://www.highcharts.com/demo/synchronized-charts).
+
 Additionally added class based sync between charts - [demo](https://codesandbox.io/s/5wwz8qy1l4).
+
+#### Property `XXX` does not exist on type `YYY`
+
+It is happening when you are trying to use non-existing property or one of our internal properties that are not publicly available for example `axis.dataMin`. To fix that you need to create your own type that will extend the default Highcharts one with the new properties. Then all you need to do is to cast the selected option / to the extended type - [demo](https://stackblitz.com/edit/highcharts-angular-property-xxx-doesnt-exist-on-type-yyy).
+
+#### How to use Highcharts Maps with the proj4?
+
+Install the `proj4` library and its types `@types/proj4`. Then pass it to `chartOptions.chart.proj4` property. See the [demo app](#demo-app) in this repository or [live demo](https://stackblitz.com/edit/highcharts-angular-map-proj4) example.
+
+#### I want to render angular component in the tooltip/axis formatter
+
+To render angular component within the chart you can use the angular [portals](https://material.angular.io/cdk/portal/overview) - [demo](https://stackblitz.com/edit/highcharts-angular-portal-usage)

angular.json

@@ -11,6 +11,10 @@
           "builder": "@angular-devkit/build-angular:browser",
           "options": {
             "aot": false,
+            "allowedCommonJsDependencies": [
+              "highcharts",
+              "highcharts-custom-events"
+            ],
             "outputPath": "dist",
             "index": "src/index.html",
             "main": "src/main.ts",
@@ -34,7 +38,6 @@
               "optimization": true,
               "outputHashing": "all",
               "sourceMap": false,
-              "extractCss": true,
               "namedChunks": false,
               "aot": true,
               "extractLicenses": true,
@@ -123,7 +126,7 @@
       "prefix": "highcharts",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-ng-packagr:build",
+          "builder": "@angular-devkit/build-angular:ng-packagr",
           "options": {
             "tsConfig": "highcharts-angular/tsconfig.lib.json",
             "project": "highcharts-angular/ng-package.json"

e2e/tsconfig.e2e.json

@@ -1,5 +1,5 @@
 {
-  "extends": "../tsconfig.base.json",
+  "extends": "../tsconfig.json",
   "compilerOptions": {
     "outDir": "../out-tsc/e2e",
     "module": "commonjs",

highcharts-angular/tsconfig.lib.json

@@ -1,8 +1,9 @@
 {
-  "extends": "../tsconfig.base.json",
+  "extends": "../tsconfig.json",
   "compilerOptions": {
     "baseUrl": ".",
     "outDir": "../out-tsc/lib",
+    "declarationMap": true,
     "target": "es2015",
     "module": "es2015",
     "moduleResolution": "node",

highcharts-angular/tsconfig.lib.prod.json

@@ -1,5 +1,8 @@
 {
   "extends": "./tsconfig.lib.json",
+  "compilerOptions": {
+    "declarationMap": false
+  },
   "angularCompilerOptions": {
     "enableIvy": false
   }

highcharts-angular/tsconfig.spec.json

@@ -1,5 +1,5 @@
 {
-  "extends": "../tsconfig.base.json",
+  "extends": "../tsconfig.json",
   "compilerOptions": {
     "outDir": "../out-tsc/spec",
     "types": [

package.json

@@ -15,46 +15,45 @@
     "e2e": "ng e2e"
   },
   "dependencies": {
-    "@angular/animations": "10.0.8",
-    "@angular/common": "10.0.8",
-    "@angular/compiler": "10.0.8",
-    "@angular/core": "10.0.8",
-    "@angular/forms": "10.0.8",
-    "@angular/platform-browser": "10.0.8",
-    "@angular/platform-browser-dynamic": "10.0.8",
-    "@angular/router": "10.0.8",
+    "@angular/animations": "11.0.5",
+    "@angular/common": "11.0.5",
+    "@angular/compiler": "11.0.5",
+    "@angular/core": "11.0.5",
+    "@angular/forms": "11.0.5",
+    "@angular/platform-browser": "11.0.5",
+    "@angular/platform-browser-dynamic": "11.0.5",
+    "@angular/router": "11.0.5",
     "@highcharts/map-collection": "^1.1.3",
-    "core-js": "^3.6.4",
+    "core-js": "^3.8.1",
     "highcharts": "^8.2.2",
-    "highcharts-custom-events": "^3.0.2",
+    "highcharts-custom-events": "^3.0.10",
     "jquery": "^3.5.0",
-    "proj4": "^2.6.0",
+    "proj4": "^2.6.3",
     "rxjs": "^6.5.4",
     "tslib": "^2.0.0",
     "zone.js": "~0.10.2"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.1000.5",
-    "@angular-devkit/build-ng-packagr": "~0.1000.5",
-    "@angular/cli": "10.0.5",
-    "@angular/compiler-cli": "10.0.8",
+    "@angular-devkit/build-angular": "~0.1100.5",
+    "@angular/cli": "11.0.5",
+    "@angular/compiler-cli": "11.0.5",
     "@types/jasmine": "2.8.8",
     "@types/jasminewd2": "2.0.3",
-    "@types/node": "^12.11.1",
+    "@types/node": "^12.19.9",
     "codelyzer": "^6.0.0",
     "jasmine-core": "~3.5.0",
     "jasmine-spec-reporter": "~5.0.0",
-    "karma": "~5.0.0",
+    "karma": "~5.1.1",
     "karma-chrome-launcher": "~3.1.0",
     "karma-coverage-istanbul-reporter": "~3.0.2",
-    "karma-jasmine": "~3.3.0",
+    "karma-jasmine": "~4.0.0",
     "karma-jasmine-html-reporter": "^1.5.0",
-    "ng-packagr": "^10.0.0",
+    "ng-packagr": "^11.0.3",
     "node-sass": "^4.12.0",
     "protractor": "~7.0.0",
     "standard-version": "^8.0.1",
     "ts-node": "^8.6.2",
     "tslint": "~6.1.0",
-    "typescript": "3.9.7"
+    "typescript": "4.0.5"
   }
 }

src/app/tests/line-test/line-test.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { BrowserModule } from '@angular/platform-browser';
 import { LineTestComponent } from './line-test.component';
 import { HighchartsChartModule } from '../../../../highcharts-angular/src/lib/highcharts-chart.module'
@@ -8,7 +8,7 @@ describe('LineTestComponent', () => {
   let component: LineTestComponent;
   let fixture: ComponentFixture<LineTestComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports:      [ HighchartsChartModule ],
       declarations: [ LineTestComponent ]

tsconfig.app.json

@@ -1,5 +1,5 @@
 {
-  "extends": "./tsconfig.base.json",
+  "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "../out-tsc/app",
     "baseUrl": "tsconfig.app",

tsconfig.json

@@ -1,23 +1,29 @@
-/*
-  This is a "Solution Style" tsconfig.json file, and is used by editors and TypeScript’s language server to improve development experience.
-  It is not intended to be used to perform a compilation.
-
-  To learn more about this file see: https://angular.io/config/solution-tsconfig.
-*/
 {
-  "files": [],
-  "references": [
-    {
-      "path": "./tsconfig.app.json"
-    },
-    {
-      "path": "./tsconfig.spec.json"
-    },
-    {
-      "path": "./highcharts-angular/tsconfig.lib.json"
-    },
-    {
-      "path": "./highcharts-angular/tsconfig.spec.json"
-    }
-  ]
+  "compileOnSave": false,
+  "compilerOptions": {
+    "allowSyntheticDefaultImports": true,
+    "baseUrl": "./",
+    "downlevelIteration": true,
+    "outDir": "./dist/out-tsc",
+    "sourceMap": true,
+    "declaration": false,
+    "module": "es2020",
+    "moduleResolution": "node",
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "importHelpers": true,
+    "resolveJsonModule": true,
+    "target": "es2015",
+    "typeRoots": [
+      "node_modules/@types"
+    ],
+    "lib": [
+      "es2018",
+      "dom"
+    ]
+  },
+  "angularCompilerOptions": {
+    "fullTemplateTypeCheck": true,
+    "enableIvy": false
+  }
 }

tsconfig.spec.json

@@ -1,6 +1,6 @@
 /* To learn more about this file see: https://angular.io/config/tsconfig. */
 {
-  "extends": "./tsconfig.base.json",
+  "extends": "./tsconfig.json",
   "compilerOptions": {
     "paths": {
       "highcharts-angular": ["../dist/highcharts-angular"],