diff --git a/README.md b/README.md index 7fa0fe2..1a25883 100644 --- a/README.md +++ b/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,7 +189,7 @@ _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**: @@ -197,7 +197,7 @@ As core you could load **Highcharts**, **Highstock**, **Highmaps** or **Highchar 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) diff --git a/angular.json b/angular.json index 3d7ac5b..2283112 100644 --- a/angular.json +++ b/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" diff --git a/e2e/tsconfig.e2e.json b/e2e/tsconfig.e2e.json index aa1d31d..ac7a373 100644 --- a/e2e/tsconfig.e2e.json +++ b/e2e/tsconfig.e2e.json @@ -1,5 +1,5 @@ { - "extends": "../tsconfig.base.json", + "extends": "../tsconfig.json", "compilerOptions": { "outDir": "../out-tsc/e2e", "module": "commonjs", diff --git a/highcharts-angular/tsconfig.lib.json b/highcharts-angular/tsconfig.lib.json index ee7b49f..3d10349 100644 --- a/highcharts-angular/tsconfig.lib.json +++ b/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", diff --git a/highcharts-angular/tsconfig.lib.prod.json b/highcharts-angular/tsconfig.lib.prod.json index b1d501a..2617a83 100644 --- a/highcharts-angular/tsconfig.lib.prod.json +++ b/highcharts-angular/tsconfig.lib.prod.json @@ -1,5 +1,8 @@ { "extends": "./tsconfig.lib.json", + "compilerOptions": { + "declarationMap": false + }, "angularCompilerOptions": { "enableIvy": false } diff --git a/highcharts-angular/tsconfig.spec.json b/highcharts-angular/tsconfig.spec.json index 03683bd..a8d18be 100644 --- a/highcharts-angular/tsconfig.spec.json +++ b/highcharts-angular/tsconfig.spec.json @@ -1,5 +1,5 @@ { - "extends": "../tsconfig.base.json", + "extends": "../tsconfig.json", "compilerOptions": { "outDir": "../out-tsc/spec", "types": [ diff --git a/package.json b/package.json index 985aa92..00f799e 100644 --- a/package.json +++ b/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" } } diff --git a/src/app/tests/line-test/line-test.component.spec.ts b/src/app/tests/line-test/line-test.component.spec.ts index 5db0182..65687fc 100644 --- a/src/app/tests/line-test/line-test.component.spec.ts +++ b/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; - beforeEach(async(() => { + beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ HighchartsChartModule ], declarations: [ LineTestComponent ] diff --git a/tsconfig.app.json b/tsconfig.app.json index b3a6913..a481e2a 100644 --- a/tsconfig.app.json +++ b/tsconfig.app.json @@ -1,5 +1,5 @@ { - "extends": "./tsconfig.base.json", + "extends": "./tsconfig.json", "compilerOptions": { "outDir": "../out-tsc/app", "baseUrl": "tsconfig.app", diff --git a/tsconfig.base.json b/tsconfig.base.json deleted file mode 100644 index a911e25..0000000 --- a/tsconfig.base.json +++ /dev/null @@ -1,29 +0,0 @@ -{ - "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 - } -} diff --git a/tsconfig.json b/tsconfig.json index 08612bb..a911e25 100644 --- a/tsconfig.json +++ b/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 + } } diff --git a/tsconfig.spec.json b/tsconfig.spec.json index e394858..b04b2ef 100644 --- a/tsconfig.spec.json +++ b/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"],