diff --git a/samples/charts/category-chart/annotations-all/src/app.component.html b/samples/charts/category-chart/annotations-all/src/app.component.html index 5a4376e04..200d2841b 100644 --- a/samples/charts/category-chart/annotations-all/src/app.component.html +++ b/samples/charts/category-chart/annotations-all/src/app.component.html @@ -23,7 +23,7 @@ primitiveValue="BrightenSpecific"> diff --git a/samples/charts/category-chart/annotations-custom/.stackblitzrc b/samples/charts/category-chart/annotations-custom/.stackblitzrc new file mode 100644 index 000000000..65efbb4fd --- /dev/null +++ b/samples/charts/category-chart/annotations-custom/.stackblitzrc @@ -0,0 +1 @@ +{"installDependencies":true,"startCommand":"turbo start","env":{"ENABLE_CJS_IMPORTS":true}} \ No newline at end of file diff --git a/samples/charts/category-chart/annotations-custom/angular.json b/samples/charts/category-chart/annotations-custom/angular.json new file mode 100644 index 000000000..9ec584c70 --- /dev/null +++ b/samples/charts/category-chart/annotations-custom/angular.json @@ -0,0 +1,103 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "demo": { + "root": "", + "sourceRoot": "src", + "projectType": "application", + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist/demo", + "index": "src/index.html", + "main": "src/main.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/config/tsconfig.app.json", + "assets": [ + "src/assets" + ], + "styles": [ + "src/styles.scss" + ], + "scripts": [] + }, + "configurations": { + "production": { + "fileReplacements": [ + { + "replace": "src/environments/environment.ts", + "with": "src/environments/environment.prod.ts" + } + ], + "optimization": true, + "outputHashing": "all", + "sourceMap": false, + "namedChunks": false, + "aot": true, + "extractLicenses": true, + "vendorChunk": false, + "buildOptimizer": true + } + } + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "options": { + "browserTarget": "demo:build" + }, + "configurations": { + "production": { + "browserTarget": "demo:build:production" + } + } + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "browserTarget": "demo:build" + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "main": "src/test.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/config/tsconfig.spec.json", + "karmaConfig": "src/config/karma.conf.js", + "styles": [ + "styles.css" + ], + "scripts": [], + "assets": [ + "src/assets" + ] + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": [ + "src/config/tsconfig.app.json", + "src/config/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] + } + } + } + } + }, + "schematics": { + "@schematics/angular:component": { + "prefix": "app", + "styleext": "scss" + }, + "@schematics/angular:directive": { + "prefix": "app" + } + } +} diff --git a/samples/charts/category-chart/annotations-custom/package.json b/samples/charts/category-chart/annotations-custom/package.json new file mode 100644 index 000000000..25a657367 --- /dev/null +++ b/samples/charts/category-chart/annotations-custom/package.json @@ -0,0 +1,47 @@ +{ + "scripts": { + "ng": "ng", + "update": "ng update", + "start": "node --max_old_space_size=12192 node_modules/@angular/cli/bin/ng serve -o", + "build": "node --max_old_space_size=12192 node_modules/@angular/cli/bin/ng build --configuration production", + "lint": "ng lint" + }, + "dependencies": { + "@angular/animations": "16.0.1", + "@angular/common": "16.0.1", + "@angular/compiler": "16.0.1", + "@angular/core": "16.0.1", + "@angular/forms": "16.0.1", + "@angular/platform-browser": "16.0.1", + "@angular/platform-browser-dynamic": "16.0.1", + "@types/hammerjs": "2.0.39", + "classlist.js": "1.1.20150312", + "core-js": "3.21.0", + "hammerjs": "2.0.8", + "igniteui-angular-core": "16.1.0", + "igniteui-angular-charts": "16.1.0", + "igniteui-angular-layouts": "16.1.0", + "igniteui-angular-inputs": "16.1.0", + "igniteui-webcomponents": "4.3.0-beta.0", + "intl": "1.2.5", + "jszip": "3.7.1", + "rxjs": "6.6.7", + "tslib": "2.3.1", + "web-animations-js": "2.3.2", + "zone.js": "0.13.0" + }, + "devDependencies": { + "@angular-devkit/build-angular": "16.0.1", + "@angular/cli": "16.0.1", + "@angular/compiler-cli": "16.0.1", + "@angular/language-service": "16.0.1", + "@types/node": "14.14.28", + "codelyzer": "6.0.2", + "jasmine-core": "3.7.1", + "jasmine-spec-reporter": "~4.2.1", + "sass.js": "0.11.1", + "ts-node": "9.1.1", + "tslint": "~6.1.3", + "typescript": "5.0.4" + } +} diff --git a/samples/charts/category-chart/annotations-custom/sandbox.config.json b/samples/charts/category-chart/annotations-custom/sandbox.config.json new file mode 100644 index 000000000..07f53508e --- /dev/null +++ b/samples/charts/category-chart/annotations-custom/sandbox.config.json @@ -0,0 +1,5 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser" +} \ No newline at end of file diff --git a/samples/charts/category-chart/annotations-custom/src/TemperatureAnnotatedData.ts b/samples/charts/category-chart/annotations-custom/src/TemperatureAnnotatedData.ts new file mode 100644 index 000000000..593935daf --- /dev/null +++ b/samples/charts/category-chart/annotations-custom/src/TemperatureAnnotatedData.ts @@ -0,0 +1,100 @@ +export class TemperatureAnnotatedDataItem { + public constructor(init: Partial) { + Object.assign(this, init); + } + + public index: number; + public tempInfo: string; + public temperature: number; + public month: string; + +} +export class TemperatureAnnotatedData extends Array { + public constructor() { + super(); + this.push(new TemperatureAnnotatedDataItem( + { + index: 0, + tempInfo: `27°C`, + temperature: 27, + month: `Jan` + })); + this.push(new TemperatureAnnotatedDataItem( + { + index: 1, + tempInfo: `25°C`, + temperature: 25, + month: `Feb` + })); + this.push(new TemperatureAnnotatedDataItem( + { + index: 2, + tempInfo: `21°C`, + temperature: 21, + month: `Mar` + })); + this.push(new TemperatureAnnotatedDataItem( + { + index: 3, + tempInfo: `19°C`, + temperature: 19, + month: `Apr` + })); + this.push(new TemperatureAnnotatedDataItem( + { + index: 4, + tempInfo: `16°C`, + temperature: 16, + month: `May` + })); + this.push(new TemperatureAnnotatedDataItem( + { + index: 5, + tempInfo: `13°C`, + temperature: 13, + month: `Jun` + })); + this.push(new TemperatureAnnotatedDataItem( + { + index: 6, + tempInfo: `14°C`, + temperature: 14, + month: `Jul` + })); + this.push(new TemperatureAnnotatedDataItem( + { + index: 7, + tempInfo: `15°C`, + temperature: 15, + month: `Aug` + })); + this.push(new TemperatureAnnotatedDataItem( + { + index: 8, + tempInfo: `19°C`, + temperature: 19, + month: `Sep` + })); + this.push(new TemperatureAnnotatedDataItem( + { + index: 9, + tempInfo: `22°C`, + temperature: 22, + month: `Oct` + })); + this.push(new TemperatureAnnotatedDataItem( + { + index: 10, + tempInfo: `26°C`, + temperature: 26, + month: `Nov` + })); + this.push(new TemperatureAnnotatedDataItem( + { + index: 11, + tempInfo: `30°C`, + temperature: 30, + month: `Dec` + })); + } +} diff --git a/samples/charts/category-chart/annotations-custom/src/app.component.html b/samples/charts/category-chart/annotations-custom/src/app.component.html new file mode 100644 index 000000000..5b578c01e --- /dev/null +++ b/samples/charts/category-chart/annotations-custom/src/app.component.html @@ -0,0 +1,44 @@ +
+
+ + + + +
+
+ Average Temperature in Sydney +
+
+ + +
+
diff --git a/samples/charts/category-chart/annotations-custom/src/app.component.scss b/samples/charts/category-chart/annotations-custom/src/app.component.scss new file mode 100644 index 000000000..cbff781da --- /dev/null +++ b/samples/charts/category-chart/annotations-custom/src/app.component.scss @@ -0,0 +1,3 @@ +/* styles are loaded the Shared CSS file located at: +https://static.infragistics.com/xplatform/css/samples/ +*/ diff --git a/samples/charts/category-chart/annotations-custom/src/app.component.ts b/samples/charts/category-chart/annotations-custom/src/app.component.ts new file mode 100644 index 000000000..b78b38db8 --- /dev/null +++ b/samples/charts/category-chart/annotations-custom/src/app.component.ts @@ -0,0 +1,51 @@ +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { ComponentRenderer, PropertyEditorPanelDescriptionModule, CategoryChartDescriptionModule } from 'igniteui-angular-core'; +import { TemperatureAnnotatedDataItem, TemperatureAnnotatedData } from './TemperatureAnnotatedData'; +import { IgxPropertyEditorPanelComponent, IgxPropertyEditorPropertyDescriptionComponent } from 'igniteui-angular-layouts'; +import { IgxCategoryChartComponent } from 'igniteui-angular-charts'; + +import { defineAllComponents } from 'igniteui-webcomponents'; + +defineAllComponents(); + +@Component({ + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) +export class AppComponent { + + public constructor(private _detector: ChangeDetectorRef) { + + } + + @ViewChild("propertyEditor", { static: true } ) + private propertyEditor: IgxPropertyEditorPanelComponent + @ViewChild("calloutsVisibleEditor", { static: true } ) + private calloutsVisibleEditor: IgxPropertyEditorPropertyDescriptionComponent + @ViewChild("chart", { static: true } ) + private chart: IgxCategoryChartComponent + + private _temperatureAnnotatedData: TemperatureAnnotatedData = null; + public get temperatureAnnotatedData(): TemperatureAnnotatedData { + if (this._temperatureAnnotatedData == null) + { + this._temperatureAnnotatedData = new TemperatureAnnotatedData(); + } + return this._temperatureAnnotatedData; + } + + private _componentRenderer: ComponentRenderer = null; + public get renderer(): ComponentRenderer { + if (this._componentRenderer == null) { + this._componentRenderer = new ComponentRenderer(); + var context = this._componentRenderer.context; + PropertyEditorPanelDescriptionModule.register(context); + CategoryChartDescriptionModule.register(context); + } + return this._componentRenderer; + } + +} + diff --git a/samples/charts/category-chart/annotations-custom/src/app.module.ts b/samples/charts/category-chart/annotations-custom/src/app.module.ts new file mode 100644 index 000000000..d18a18115 --- /dev/null +++ b/samples/charts/category-chart/annotations-custom/src/app.module.ts @@ -0,0 +1,28 @@ +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxPropertyEditorPanelModule } from 'igniteui-angular-layouts'; +import { IgxCategoryChartModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent, +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxPropertyEditorPanelModule, + IgxCategoryChartModule +], + providers: [], + entryComponents: [], + schemas: [] +}) +export class AppModule {} diff --git a/samples/charts/category-chart/annotations-custom/src/config/tsconfig-es5.app.json b/samples/charts/category-chart/annotations-custom/src/config/tsconfig-es5.app.json new file mode 100644 index 000000000..7e5d23397 --- /dev/null +++ b/samples/charts/category-chart/annotations-custom/src/config/tsconfig-es5.app.json @@ -0,0 +1,6 @@ +{ + "extends": "./tsconfig.app.json", + "compilerOptions": { + "target": "es2015" + } + } diff --git a/samples/charts/category-chart/annotations-custom/src/config/tsconfig.app.json b/samples/charts/category-chart/annotations-custom/src/config/tsconfig.app.json new file mode 100644 index 000000000..f722e3fe4 --- /dev/null +++ b/samples/charts/category-chart/annotations-custom/src/config/tsconfig.app.json @@ -0,0 +1,12 @@ +{ + "extends": "./tsconfig.base.json", + "compilerOptions": { + "outDir": "../../out-tsc/app", + "baseUrl": "./", + "types": [] + }, + "files": [ + "../main.ts", + "../polyfills.ts" + ] +} diff --git a/samples/charts/category-chart/annotations-custom/src/config/tsconfig.base.json b/samples/charts/category-chart/annotations-custom/src/config/tsconfig.base.json new file mode 100644 index 000000000..f5ad4b8b7 --- /dev/null +++ b/samples/charts/category-chart/annotations-custom/src/config/tsconfig.base.json @@ -0,0 +1,23 @@ +{ + "compileOnSave": false, + "compilerOptions": { + "importHelpers": true, + "module": "es2020", + "outDir": "../../dist/out-tsc", + "sourceMap": false, + "declaration": false, + "moduleResolution": "node", + "experimentalDecorators": true, + "resolveJsonModule": true, + "esModuleInterop": true, + "downlevelIteration": true, // required for excel library + "target": "es2015", + "typeRoots": [ + "../../node_modules/@types" + ], + "lib": [ + "es2017", + "dom" + ] + } +} diff --git a/samples/charts/category-chart/annotations-custom/src/config/tsconfig.spec.json b/samples/charts/category-chart/annotations-custom/src/config/tsconfig.spec.json new file mode 100644 index 000000000..6eb8c055c --- /dev/null +++ b/samples/charts/category-chart/annotations-custom/src/config/tsconfig.spec.json @@ -0,0 +1,19 @@ +{ + "extends": "./tsconfig.base.json", + "compilerOptions": { + "outDir": "../../out-tsc/spec", + "baseUrl": "./", + "types": [ + "jasmine", + "node" + ] + }, + "files": [ + "../test.ts", + "../polyfills.ts" + ], + "include": [ + "../**/*.spec.ts", + "../**/*.d.ts" + ] +} diff --git a/samples/charts/category-chart/annotations-custom/src/config/tsconfig.worker.json b/samples/charts/category-chart/annotations-custom/src/config/tsconfig.worker.json new file mode 100644 index 000000000..bc0e98f11 --- /dev/null +++ b/samples/charts/category-chart/annotations-custom/src/config/tsconfig.worker.json @@ -0,0 +1,14 @@ +{ + "extends": "./tsconfig.base.json", + "compilerOptions": { + "outDir": "../../out-tsc/worker", + "lib": [ + "es2018", + "DOM" + ], + "types": [] + }, + "include": [ + "../**/*Worker.ts" + ] +} diff --git a/samples/charts/category-chart/annotations-custom/src/environments/environment.prod.ts b/samples/charts/category-chart/annotations-custom/src/environments/environment.prod.ts new file mode 100644 index 000000000..3612073bc --- /dev/null +++ b/samples/charts/category-chart/annotations-custom/src/environments/environment.prod.ts @@ -0,0 +1,3 @@ +export const environment = { + production: true +}; diff --git a/samples/charts/category-chart/annotations-custom/src/environments/environment.ts b/samples/charts/category-chart/annotations-custom/src/environments/environment.ts new file mode 100644 index 000000000..7b4f817ad --- /dev/null +++ b/samples/charts/category-chart/annotations-custom/src/environments/environment.ts @@ -0,0 +1,16 @@ +// This file can be replaced during build by using the `fileReplacements` array. +// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`. +// The list of file replacements can be found in `angular.json`. + +export const environment = { + production: false +}; + +/* + * For easier debugging in development mode, you can import the following file + * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. + * + * This import should be commented out in production mode because it will have a negative impact + * on performance if an error is thrown. + */ +// import 'zone.js/dist/zone-error'; // Included with Angular CLI. diff --git a/samples/charts/category-chart/annotations-custom/src/index.html b/samples/charts/category-chart/annotations-custom/src/index.html new file mode 100644 index 000000000..7650dfb64 --- /dev/null +++ b/samples/charts/category-chart/annotations-custom/src/index.html @@ -0,0 +1,23 @@ + + + + + + IgniteUI for Angular | Example | infragistics + + + + + + + + + + + + + + + + + diff --git a/samples/charts/category-chart/annotations-custom/src/main.ts b/samples/charts/category-chart/annotations-custom/src/main.ts new file mode 100644 index 000000000..ec9adcd4a --- /dev/null +++ b/samples/charts/category-chart/annotations-custom/src/main.ts @@ -0,0 +1,15 @@ +// tslint:disable:no-string-literal +import "./polyfills"; +import { enableProdMode } from "@angular/core"; +import { platformBrowserDynamic } from "@angular/platform-browser-dynamic"; +import { AppModule } from "./app.module"; + +platformBrowserDynamic().bootstrapModule(AppModule).then(ref => { + // ensure Angular destroys itself on hot reloads. + if (window["ngRef"]) { + window["ngRef"].destroy(); + } + window["ngRef"] = ref; + + // otherwise, log the boot error +}).catch(err => console.error(err)); diff --git a/samples/charts/category-chart/annotations-custom/src/polyfills.ts b/samples/charts/category-chart/annotations-custom/src/polyfills.ts new file mode 100644 index 000000000..6c0321de4 --- /dev/null +++ b/samples/charts/category-chart/annotations-custom/src/polyfills.ts @@ -0,0 +1,65 @@ +/** + * This file includes polyfills needed by Angular and is loaded before the app. + * You can add your own extra polyfills to this file. + * + * This file is divided into 2 sections: + * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. + * 2. Application imports. Files imported after ZoneJS that should be loaded before your main + * file. + * + * The current setup is for so-called "evergreen" browsers; the last versions of browsers that + * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), + * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. + * + * Learn more in https://angular.io/guide/browser-support + */ + +/*************************************************************************************************** +* BROWSER POLYFILLS +*/ + +// import "core-js/es7/object"; + +/** IE10 and IE11 requires the following for NgClass support on SVG elements */ +import "classlist.js"; // run `npm install --save classlist.js`. + +/** IE10 and IE11 requires the following for the Reflect API. */ +// import "core-js/es6/reflect"; + +/* Evergreen browsers require these. */ +// used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove. +// import "core-js/es7/reflect"; + +/* + * Required to support Web Animations `@angular/platform-browser/animations`. + * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation + */ +import "web-animations-js"; // run `npm install --save web-animations-js`. + +/*************************************************************************************************** + * Zone JS is required by Angular itself. + */ +import "hammerjs/hammer"; +import "zone.js/dist/zone"; // included with Angular CLI. + +/*************************************************************************************************** + * @angular/animations polyfill + */ +if (!Element.prototype.matches) { + Element.prototype.matches = (Element.prototype as any).msMatchesSelector; +} + +/*************************************************************************************************** + * APPLICATION IMPORTS + */ + +/** + * Date, currency, decimal and percent pipes. + * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10 + */ +// import "intl"; // Run `npm install --save intl`. +// import "intl/locale-data/jsonp/de"; +/** + * Need to import at least one locale-data with intl. + */ +// import "intl/locale-data/jsonp/en"; diff --git a/samples/charts/category-chart/annotations-custom/src/styles.scss b/samples/charts/category-chart/annotations-custom/src/styles.scss new file mode 100644 index 000000000..9b431e92d --- /dev/null +++ b/samples/charts/category-chart/annotations-custom/src/styles.scss @@ -0,0 +1,9 @@ +/* autoprefixer grid: on */ +html, +body { + height: 100%; + width: 100%; + overflow: hidden; + margin: 0; + box-sizing: border-box; +} diff --git a/samples/charts/category-chart/annotations-custom/src/typings.d.ts b/samples/charts/category-chart/annotations-custom/src/typings.d.ts new file mode 100644 index 000000000..ef5c7bd62 --- /dev/null +++ b/samples/charts/category-chart/annotations-custom/src/typings.d.ts @@ -0,0 +1,5 @@ +/* SystemJS module definition */ +declare var module: NodeModule; +interface NodeModule { + id: string; +} diff --git a/samples/charts/category-chart/annotations-custom/tsconfig.json b/samples/charts/category-chart/annotations-custom/tsconfig.json new file mode 100644 index 000000000..6a01bab30 --- /dev/null +++ b/samples/charts/category-chart/annotations-custom/tsconfig.json @@ -0,0 +1,20 @@ +/* + 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": "./src/config/tsconfig.app.json" + }, + { + "path": "./src/config/tsconfig.worker.json" + }, + { + "path": "./src/config/tsconfig.spec.json" + } + ] +} \ No newline at end of file diff --git a/samples/charts/category-chart/annotations-custom/tslint.json b/samples/charts/category-chart/annotations-custom/tslint.json new file mode 100644 index 000000000..5a3f18e0c --- /dev/null +++ b/samples/charts/category-chart/annotations-custom/tslint.json @@ -0,0 +1,27 @@ +{ + "extends": "tslint:latest", + "rules": { + "deprecation": { + "severity": "warning" + }, + "indent": [true, "spaces"], + "variable-name": [true, "allow-leading-underscore"], + "interface-name": [true, "always-prefix"], + "trailing-comma": [true, {"multiline": "never", "singleline": "never"}], + "no-empty": false, + "no-bitwise": false, + "no-object-literal-type-assertion": false, + "no-string-literal": false, + "no-duplicate-imports": false, + "no-trailing-whitespace": false, + "no-implicit-dependencies": false, + "no-submodule-imports": [false], + "max-classes-per-file": false, + "prefer-object-spread": false, + "no-console": false, + "prefer-conditional-expression": false, + "prefer-for-of": false, + "arrow-parens": false, + "object-literal-sort-keys": false + } +} diff --git a/samples/charts/category-chart/data-aggregations/src/app.component.html b/samples/charts/category-chart/data-aggregations/src/app.component.html index 46e21b866..d713c7f69 100644 --- a/samples/charts/category-chart/data-aggregations/src/app.component.html +++ b/samples/charts/category-chart/data-aggregations/src/app.component.html @@ -26,7 +26,7 @@ label="Initial Summaries" valueType="EnumValue" shouldOverrideDefaultEditor="true" - dropDownNames="Sum(Sales) as Sales, Avg(Sales) as Sales, Min(Sales) as Sales, Max(Sales) as Sales, Count(Sales) as Sales" + dropDownNames="Sum(Sales), Avg(Sales), Min(Sales), Max(Sales), Count(Sales)" dropDownValues="Sum(Sales) as Sales, Avg(Sales) as Sales, Min(Sales) as Sales, Max(Sales) as Sales, Count(Sales) as Sales" primitiveValue="Sum(Sales) as Sales"> diff --git a/samples/charts/data-chart/annotations-custom/.stackblitzrc b/samples/charts/data-chart/annotations-custom/.stackblitzrc new file mode 100644 index 000000000..65efbb4fd --- /dev/null +++ b/samples/charts/data-chart/annotations-custom/.stackblitzrc @@ -0,0 +1 @@ +{"installDependencies":true,"startCommand":"turbo start","env":{"ENABLE_CJS_IMPORTS":true}} \ No newline at end of file diff --git a/samples/charts/data-chart/annotations-custom/angular.json b/samples/charts/data-chart/annotations-custom/angular.json new file mode 100644 index 000000000..9ec584c70 --- /dev/null +++ b/samples/charts/data-chart/annotations-custom/angular.json @@ -0,0 +1,103 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "demo": { + "root": "", + "sourceRoot": "src", + "projectType": "application", + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist/demo", + "index": "src/index.html", + "main": "src/main.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/config/tsconfig.app.json", + "assets": [ + "src/assets" + ], + "styles": [ + "src/styles.scss" + ], + "scripts": [] + }, + "configurations": { + "production": { + "fileReplacements": [ + { + "replace": "src/environments/environment.ts", + "with": "src/environments/environment.prod.ts" + } + ], + "optimization": true, + "outputHashing": "all", + "sourceMap": false, + "namedChunks": false, + "aot": true, + "extractLicenses": true, + "vendorChunk": false, + "buildOptimizer": true + } + } + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "options": { + "browserTarget": "demo:build" + }, + "configurations": { + "production": { + "browserTarget": "demo:build:production" + } + } + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "browserTarget": "demo:build" + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "main": "src/test.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/config/tsconfig.spec.json", + "karmaConfig": "src/config/karma.conf.js", + "styles": [ + "styles.css" + ], + "scripts": [], + "assets": [ + "src/assets" + ] + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": [ + "src/config/tsconfig.app.json", + "src/config/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] + } + } + } + } + }, + "schematics": { + "@schematics/angular:component": { + "prefix": "app", + "styleext": "scss" + }, + "@schematics/angular:directive": { + "prefix": "app" + } + } +} diff --git a/samples/charts/data-chart/annotations-custom/package.json b/samples/charts/data-chart/annotations-custom/package.json new file mode 100644 index 000000000..07e12d1ce --- /dev/null +++ b/samples/charts/data-chart/annotations-custom/package.json @@ -0,0 +1,44 @@ +{ + "scripts": { + "ng": "ng", + "update": "ng update", + "start": "node --max_old_space_size=12192 node_modules/@angular/cli/bin/ng serve -o", + "build": "node --max_old_space_size=12192 node_modules/@angular/cli/bin/ng build --configuration production", + "lint": "ng lint" + }, + "dependencies": { + "@angular/animations": "16.0.1", + "@angular/common": "16.0.1", + "@angular/compiler": "16.0.1", + "@angular/core": "16.0.1", + "@angular/forms": "16.0.1", + "@angular/platform-browser": "16.0.1", + "@angular/platform-browser-dynamic": "16.0.1", + "@types/hammerjs": "2.0.39", + "classlist.js": "1.1.20150312", + "core-js": "3.21.0", + "hammerjs": "2.0.8", + "igniteui-angular-core": "16.1.0", + "igniteui-angular-charts": "16.1.0", + "intl": "1.2.5", + "jszip": "3.7.1", + "rxjs": "6.6.7", + "tslib": "2.3.1", + "web-animations-js": "2.3.2", + "zone.js": "0.13.0" + }, + "devDependencies": { + "@angular-devkit/build-angular": "16.0.1", + "@angular/cli": "16.0.1", + "@angular/compiler-cli": "16.0.1", + "@angular/language-service": "16.0.1", + "@types/node": "14.14.28", + "codelyzer": "6.0.2", + "jasmine-core": "3.7.1", + "jasmine-spec-reporter": "~4.2.1", + "sass.js": "0.11.1", + "ts-node": "9.1.1", + "tslint": "~6.1.3", + "typescript": "5.0.4" + } +} diff --git a/samples/charts/data-chart/annotations-custom/sandbox.config.json b/samples/charts/data-chart/annotations-custom/sandbox.config.json new file mode 100644 index 000000000..07f53508e --- /dev/null +++ b/samples/charts/data-chart/annotations-custom/sandbox.config.json @@ -0,0 +1,5 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser" +} \ No newline at end of file diff --git a/samples/charts/data-chart/axis-annotations-corner-radius/src/CountryRenewableCallouts.ts b/samples/charts/data-chart/annotations-custom/src/CountryRenewableCallouts.ts similarity index 100% rename from samples/charts/data-chart/axis-annotations-corner-radius/src/CountryRenewableCallouts.ts rename to samples/charts/data-chart/annotations-custom/src/CountryRenewableCallouts.ts diff --git a/samples/charts/data-chart/annotations-custom/src/CountryRenewableElectricity.ts b/samples/charts/data-chart/annotations-custom/src/CountryRenewableElectricity.ts new file mode 100644 index 000000000..4849f0cff --- /dev/null +++ b/samples/charts/data-chart/annotations-custom/src/CountryRenewableElectricity.ts @@ -0,0 +1,100 @@ +export class CountryRenewableElectricityItem { + public constructor(init: Partial) { + Object.assign(this, init); + } + + public year: string; + public europe: number; + public china: number; + public america: number; + +} +export class CountryRenewableElectricity extends Array { + public constructor() { + super(); + this.push(new CountryRenewableElectricityItem( + { + year: `2009`, + europe: 34, + china: 21, + america: 19 + })); + this.push(new CountryRenewableElectricityItem( + { + year: `2010`, + europe: 43, + china: 26, + america: 24 + })); + this.push(new CountryRenewableElectricityItem( + { + year: `2011`, + europe: 66, + china: 29, + america: 28 + })); + this.push(new CountryRenewableElectricityItem( + { + year: `2012`, + europe: 69, + china: 32, + america: 26 + })); + this.push(new CountryRenewableElectricityItem( + { + year: `2013`, + europe: 58, + china: 47, + america: 38 + })); + this.push(new CountryRenewableElectricityItem( + { + year: `2014`, + europe: 40, + china: 46, + america: 31 + })); + this.push(new CountryRenewableElectricityItem( + { + year: `2015`, + europe: 78, + china: 50, + america: 19 + })); + this.push(new CountryRenewableElectricityItem( + { + year: `2016`, + europe: 13, + china: 90, + america: 52 + })); + this.push(new CountryRenewableElectricityItem( + { + year: `2017`, + europe: 78, + china: 132, + america: 50 + })); + this.push(new CountryRenewableElectricityItem( + { + year: `2018`, + europe: 40, + china: 134, + america: 34 + })); + this.push(new CountryRenewableElectricityItem( + { + year: `2018`, + europe: 40, + china: 134, + america: 34 + })); + this.push(new CountryRenewableElectricityItem( + { + year: `2019`, + europe: 80, + china: 96, + america: 38 + })); + } +} diff --git a/samples/charts/data-chart/annotations-custom/src/app.component.html b/samples/charts/data-chart/annotations-custom/src/app.component.html new file mode 100644 index 000000000..ff0127ed9 --- /dev/null +++ b/samples/charts/data-chart/annotations-custom/src/app.component.html @@ -0,0 +1,64 @@ +
+
+ Renewable Electricity Generated +
+
+ + + + + + + + + + + + + + + + +
+
diff --git a/samples/charts/data-chart/annotations-custom/src/app.component.scss b/samples/charts/data-chart/annotations-custom/src/app.component.scss new file mode 100644 index 000000000..cbff781da --- /dev/null +++ b/samples/charts/data-chart/annotations-custom/src/app.component.scss @@ -0,0 +1,3 @@ +/* styles are loaded the Shared CSS file located at: +https://static.infragistics.com/xplatform/css/samples/ +*/ diff --git a/samples/charts/data-chart/annotations-custom/src/app.component.ts b/samples/charts/data-chart/annotations-custom/src/app.component.ts new file mode 100644 index 000000000..3f14afa0d --- /dev/null +++ b/samples/charts/data-chart/annotations-custom/src/app.component.ts @@ -0,0 +1,54 @@ +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity'; +import { CountryRenewableCalloutsItem, CountryRenewableCallouts } from './CountryRenewableCallouts'; +import { IgxDataChartComponent, IgxCategoryXAxisComponent, IgxNumericYAxisComponent, IgxLineSeriesComponent, IgxCalloutLayerComponent, IgxFinalValueLayerComponent, IgxCrosshairLayerComponent, IgxDataToolTipLayerComponent } from 'igniteui-angular-charts'; + +@Component({ + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) +export class AppComponent { + + public constructor(private _detector: ChangeDetectorRef) { + + } + + @ViewChild("chart", { static: true } ) + private chart: IgxDataChartComponent + @ViewChild("xAxis", { static: true } ) + private xAxis: IgxCategoryXAxisComponent + @ViewChild("yAxis", { static: true } ) + private yAxis: IgxNumericYAxisComponent + @ViewChild("lineSeries1", { static: true } ) + private lineSeries1: IgxLineSeriesComponent + @ViewChild("calloutLayer1", { static: true } ) + private calloutLayer1: IgxCalloutLayerComponent + @ViewChild("finalValueLayer", { static: true } ) + private finalValueLayer: IgxFinalValueLayerComponent + @ViewChild("crosshairLayer", { static: true } ) + private crosshairLayer: IgxCrosshairLayerComponent + @ViewChild("tooltips", { static: true } ) + private tooltips: IgxDataToolTipLayerComponent + + private _countryRenewableElectricity: CountryRenewableElectricity = null; + public get countryRenewableElectricity(): CountryRenewableElectricity { + if (this._countryRenewableElectricity == null) + { + this._countryRenewableElectricity = new CountryRenewableElectricity(); + } + return this._countryRenewableElectricity; + } + + private _countryRenewableCallouts: CountryRenewableCallouts = null; + public get countryRenewableCallouts(): CountryRenewableCallouts { + if (this._countryRenewableCallouts == null) + { + this._countryRenewableCallouts = new CountryRenewableCallouts(); + } + return this._countryRenewableCallouts; + } + +} + diff --git a/samples/charts/data-chart/annotations-custom/src/app.module.ts b/samples/charts/data-chart/annotations-custom/src/app.module.ts new file mode 100644 index 000000000..22997cd0f --- /dev/null +++ b/samples/charts/data-chart/annotations-custom/src/app.module.ts @@ -0,0 +1,30 @@ +import { NgModule } from "@angular/core"; +import { FormsModule } from "@angular/forms"; +import { CommonModule } from "@angular/common"; +import { BrowserModule } from "@angular/platform-browser"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; +import { AppComponent } from "./app.component"; + +import { IgxDataChartCoreModule, IgxDataChartCategoryModule, IgxDataChartAnnotationModule, IgxDataChartInteractivityModule, IgxAnnotationLayerProxyModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent, +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxDataChartCoreModule, + IgxDataChartCategoryModule, + IgxDataChartAnnotationModule, + IgxDataChartInteractivityModule, + IgxAnnotationLayerProxyModule +], + providers: [], + entryComponents: [], + schemas: [] +}) +export class AppModule {} diff --git a/samples/charts/data-chart/annotations-custom/src/config/tsconfig-es5.app.json b/samples/charts/data-chart/annotations-custom/src/config/tsconfig-es5.app.json new file mode 100644 index 000000000..7e5d23397 --- /dev/null +++ b/samples/charts/data-chart/annotations-custom/src/config/tsconfig-es5.app.json @@ -0,0 +1,6 @@ +{ + "extends": "./tsconfig.app.json", + "compilerOptions": { + "target": "es2015" + } + } diff --git a/samples/charts/data-chart/annotations-custom/src/config/tsconfig.app.json b/samples/charts/data-chart/annotations-custom/src/config/tsconfig.app.json new file mode 100644 index 000000000..f722e3fe4 --- /dev/null +++ b/samples/charts/data-chart/annotations-custom/src/config/tsconfig.app.json @@ -0,0 +1,12 @@ +{ + "extends": "./tsconfig.base.json", + "compilerOptions": { + "outDir": "../../out-tsc/app", + "baseUrl": "./", + "types": [] + }, + "files": [ + "../main.ts", + "../polyfills.ts" + ] +} diff --git a/samples/charts/data-chart/annotations-custom/src/config/tsconfig.base.json b/samples/charts/data-chart/annotations-custom/src/config/tsconfig.base.json new file mode 100644 index 000000000..f5ad4b8b7 --- /dev/null +++ b/samples/charts/data-chart/annotations-custom/src/config/tsconfig.base.json @@ -0,0 +1,23 @@ +{ + "compileOnSave": false, + "compilerOptions": { + "importHelpers": true, + "module": "es2020", + "outDir": "../../dist/out-tsc", + "sourceMap": false, + "declaration": false, + "moduleResolution": "node", + "experimentalDecorators": true, + "resolveJsonModule": true, + "esModuleInterop": true, + "downlevelIteration": true, // required for excel library + "target": "es2015", + "typeRoots": [ + "../../node_modules/@types" + ], + "lib": [ + "es2017", + "dom" + ] + } +} diff --git a/samples/charts/data-chart/annotations-custom/src/config/tsconfig.spec.json b/samples/charts/data-chart/annotations-custom/src/config/tsconfig.spec.json new file mode 100644 index 000000000..6eb8c055c --- /dev/null +++ b/samples/charts/data-chart/annotations-custom/src/config/tsconfig.spec.json @@ -0,0 +1,19 @@ +{ + "extends": "./tsconfig.base.json", + "compilerOptions": { + "outDir": "../../out-tsc/spec", + "baseUrl": "./", + "types": [ + "jasmine", + "node" + ] + }, + "files": [ + "../test.ts", + "../polyfills.ts" + ], + "include": [ + "../**/*.spec.ts", + "../**/*.d.ts" + ] +} diff --git a/samples/charts/data-chart/annotations-custom/src/config/tsconfig.worker.json b/samples/charts/data-chart/annotations-custom/src/config/tsconfig.worker.json new file mode 100644 index 000000000..bc0e98f11 --- /dev/null +++ b/samples/charts/data-chart/annotations-custom/src/config/tsconfig.worker.json @@ -0,0 +1,14 @@ +{ + "extends": "./tsconfig.base.json", + "compilerOptions": { + "outDir": "../../out-tsc/worker", + "lib": [ + "es2018", + "DOM" + ], + "types": [] + }, + "include": [ + "../**/*Worker.ts" + ] +} diff --git a/samples/charts/data-chart/annotations-custom/src/environments/environment.prod.ts b/samples/charts/data-chart/annotations-custom/src/environments/environment.prod.ts new file mode 100644 index 000000000..3612073bc --- /dev/null +++ b/samples/charts/data-chart/annotations-custom/src/environments/environment.prod.ts @@ -0,0 +1,3 @@ +export const environment = { + production: true +}; diff --git a/samples/charts/data-chart/annotations-custom/src/environments/environment.ts b/samples/charts/data-chart/annotations-custom/src/environments/environment.ts new file mode 100644 index 000000000..7b4f817ad --- /dev/null +++ b/samples/charts/data-chart/annotations-custom/src/environments/environment.ts @@ -0,0 +1,16 @@ +// This file can be replaced during build by using the `fileReplacements` array. +// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`. +// The list of file replacements can be found in `angular.json`. + +export const environment = { + production: false +}; + +/* + * For easier debugging in development mode, you can import the following file + * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. + * + * This import should be commented out in production mode because it will have a negative impact + * on performance if an error is thrown. + */ +// import 'zone.js/dist/zone-error'; // Included with Angular CLI. diff --git a/samples/charts/data-chart/annotations-custom/src/index.html b/samples/charts/data-chart/annotations-custom/src/index.html new file mode 100644 index 000000000..7650dfb64 --- /dev/null +++ b/samples/charts/data-chart/annotations-custom/src/index.html @@ -0,0 +1,23 @@ + + + + + + IgniteUI for Angular | Example | infragistics + + + + + + + + + + + + + + + + + diff --git a/samples/charts/data-chart/annotations-custom/src/main.ts b/samples/charts/data-chart/annotations-custom/src/main.ts new file mode 100644 index 000000000..ec9adcd4a --- /dev/null +++ b/samples/charts/data-chart/annotations-custom/src/main.ts @@ -0,0 +1,15 @@ +// tslint:disable:no-string-literal +import "./polyfills"; +import { enableProdMode } from "@angular/core"; +import { platformBrowserDynamic } from "@angular/platform-browser-dynamic"; +import { AppModule } from "./app.module"; + +platformBrowserDynamic().bootstrapModule(AppModule).then(ref => { + // ensure Angular destroys itself on hot reloads. + if (window["ngRef"]) { + window["ngRef"].destroy(); + } + window["ngRef"] = ref; + + // otherwise, log the boot error +}).catch(err => console.error(err)); diff --git a/samples/charts/data-chart/annotations-custom/src/polyfills.ts b/samples/charts/data-chart/annotations-custom/src/polyfills.ts new file mode 100644 index 000000000..6c0321de4 --- /dev/null +++ b/samples/charts/data-chart/annotations-custom/src/polyfills.ts @@ -0,0 +1,65 @@ +/** + * This file includes polyfills needed by Angular and is loaded before the app. + * You can add your own extra polyfills to this file. + * + * This file is divided into 2 sections: + * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. + * 2. Application imports. Files imported after ZoneJS that should be loaded before your main + * file. + * + * The current setup is for so-called "evergreen" browsers; the last versions of browsers that + * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), + * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. + * + * Learn more in https://angular.io/guide/browser-support + */ + +/*************************************************************************************************** +* BROWSER POLYFILLS +*/ + +// import "core-js/es7/object"; + +/** IE10 and IE11 requires the following for NgClass support on SVG elements */ +import "classlist.js"; // run `npm install --save classlist.js`. + +/** IE10 and IE11 requires the following for the Reflect API. */ +// import "core-js/es6/reflect"; + +/* Evergreen browsers require these. */ +// used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove. +// import "core-js/es7/reflect"; + +/* + * Required to support Web Animations `@angular/platform-browser/animations`. + * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation + */ +import "web-animations-js"; // run `npm install --save web-animations-js`. + +/*************************************************************************************************** + * Zone JS is required by Angular itself. + */ +import "hammerjs/hammer"; +import "zone.js/dist/zone"; // included with Angular CLI. + +/*************************************************************************************************** + * @angular/animations polyfill + */ +if (!Element.prototype.matches) { + Element.prototype.matches = (Element.prototype as any).msMatchesSelector; +} + +/*************************************************************************************************** + * APPLICATION IMPORTS + */ + +/** + * Date, currency, decimal and percent pipes. + * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10 + */ +// import "intl"; // Run `npm install --save intl`. +// import "intl/locale-data/jsonp/de"; +/** + * Need to import at least one locale-data with intl. + */ +// import "intl/locale-data/jsonp/en"; diff --git a/samples/charts/data-chart/annotations-custom/src/styles.scss b/samples/charts/data-chart/annotations-custom/src/styles.scss new file mode 100644 index 000000000..9b431e92d --- /dev/null +++ b/samples/charts/data-chart/annotations-custom/src/styles.scss @@ -0,0 +1,9 @@ +/* autoprefixer grid: on */ +html, +body { + height: 100%; + width: 100%; + overflow: hidden; + margin: 0; + box-sizing: border-box; +} diff --git a/samples/charts/data-chart/annotations-custom/src/typings.d.ts b/samples/charts/data-chart/annotations-custom/src/typings.d.ts new file mode 100644 index 000000000..ef5c7bd62 --- /dev/null +++ b/samples/charts/data-chart/annotations-custom/src/typings.d.ts @@ -0,0 +1,5 @@ +/* SystemJS module definition */ +declare var module: NodeModule; +interface NodeModule { + id: string; +} diff --git a/samples/charts/data-chart/annotations-custom/tsconfig.json b/samples/charts/data-chart/annotations-custom/tsconfig.json new file mode 100644 index 000000000..6a01bab30 --- /dev/null +++ b/samples/charts/data-chart/annotations-custom/tsconfig.json @@ -0,0 +1,20 @@ +/* + 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": "./src/config/tsconfig.app.json" + }, + { + "path": "./src/config/tsconfig.worker.json" + }, + { + "path": "./src/config/tsconfig.spec.json" + } + ] +} \ No newline at end of file diff --git a/samples/charts/data-chart/annotations-custom/tslint.json b/samples/charts/data-chart/annotations-custom/tslint.json new file mode 100644 index 000000000..5a3f18e0c --- /dev/null +++ b/samples/charts/data-chart/annotations-custom/tslint.json @@ -0,0 +1,27 @@ +{ + "extends": "tslint:latest", + "rules": { + "deprecation": { + "severity": "warning" + }, + "indent": [true, "spaces"], + "variable-name": [true, "allow-leading-underscore"], + "interface-name": [true, "always-prefix"], + "trailing-comma": [true, {"multiline": "never", "singleline": "never"}], + "no-empty": false, + "no-bitwise": false, + "no-object-literal-type-assertion": false, + "no-string-literal": false, + "no-duplicate-imports": false, + "no-trailing-whitespace": false, + "no-implicit-dependencies": false, + "no-submodule-imports": [false], + "max-classes-per-file": false, + "prefer-object-spread": false, + "no-console": false, + "prefer-conditional-expression": false, + "prefer-for-of": false, + "arrow-parens": false, + "object-literal-sort-keys": false + } +} diff --git a/samples/charts/data-chart/axis-annotations-corner-radius/src/app.component.html b/samples/charts/data-chart/axis-annotations-corner-radius/src/app.component.html index 97a3c3110..abc0481ac 100644 --- a/samples/charts/data-chart/axis-annotations-corner-radius/src/app.component.html +++ b/samples/charts/data-chart/axis-annotations-corner-radius/src/app.component.html @@ -29,10 +29,7 @@ + isHighlightingEnabled="true" + markerType="Hidden"> + isHighlightingEnabled="true" + markerType="Hidden"> + areaFillOpacity="0.5" + markerType="Hidden"> ) { - Object.assign(this, init); - } - - public index: number; - public label: string; - public value: number; - -} -export class CountryRenewableCallouts extends Array { - public constructor() { - super(); - this.push(new CountryRenewableCalloutsItem( - { - index: 0, - label: `19 TWh`, - value: 19 - })); - this.push(new CountryRenewableCalloutsItem( - { - index: 1, - label: `24 TWh`, - value: 24 - })); - this.push(new CountryRenewableCalloutsItem( - { - index: 2, - label: `28 TWh`, - value: 28 - })); - this.push(new CountryRenewableCalloutsItem( - { - index: 3, - label: `26 TWh`, - value: 26 - })); - this.push(new CountryRenewableCalloutsItem( - { - index: 4, - label: `38 TWh`, - value: 38 - })); - this.push(new CountryRenewableCalloutsItem( - { - index: 5, - label: `31 TWh`, - value: 31 - })); - this.push(new CountryRenewableCalloutsItem( - { - index: 6, - label: `19 TWh`, - value: 19 - })); - this.push(new CountryRenewableCalloutsItem( - { - index: 7, - label: `52 TWh`, - value: 52 - })); - this.push(new CountryRenewableCalloutsItem( - { - index: 8, - label: `50 TWh`, - value: 50 - })); - this.push(new CountryRenewableCalloutsItem( - { - index: 9, - label: `34 TWh`, - value: 34 - })); - this.push(new CountryRenewableCalloutsItem( - { - index: 10, - label: `38 TWh`, - value: 34 - })); - this.push(new CountryRenewableCalloutsItem( - { - index: 11, - label: `38 TWh`, - value: 38 - })); - } -} diff --git a/samples/charts/data-chart/callout-layer-styling/src/app.component.html b/samples/charts/data-chart/callout-layer-styling/src/app.component.html index 480ba550c..5111f2a4f 100644 --- a/samples/charts/data-chart/callout-layer-styling/src/app.component.html +++ b/samples/charts/data-chart/callout-layer-styling/src/app.component.html @@ -26,20 +26,21 @@ [xAxis]="xAxis" [yAxis]="yAxis" [dataSource]="countryRenewableElectricity" - valueMemberPath="america"> + valueMemberPath="america" + brush="rgba(137, 97, 169, 1)" + markerOutline="rgba(137, 97, 169, 1)" + shouldHideAutoCallouts="false"> + isAutoCalloutBehaviorEnabled="true" + calloutLeaderBrush="rgba(137, 97, 169, 1)" + calloutOutline="rgba(137, 97, 169, 1)" + calloutBackground="white" + calloutTextColor="rgba(137, 97, 169, 1)" + calloutStrokeThickness="1" + calloutCollisionMode="Greedy"> diff --git a/samples/charts/data-chart/callout-layer-styling/src/app.component.ts b/samples/charts/data-chart/callout-layer-styling/src/app.component.ts index 08c049153..416884c5b 100644 --- a/samples/charts/data-chart/callout-layer-styling/src/app.component.ts +++ b/samples/charts/data-chart/callout-layer-styling/src/app.component.ts @@ -1,6 +1,5 @@ import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity'; -import { CountryRenewableCalloutsItem, CountryRenewableCallouts } from './CountryRenewableCallouts'; import { IgxDataChartComponent, IgxCategoryXAxisComponent, IgxNumericYAxisComponent, IgxLineSeriesComponent, IgxCalloutLayerComponent } from 'igniteui-angular-charts'; @Component({ @@ -35,14 +34,5 @@ export class AppComponent { return this._countryRenewableElectricity; } - private _countryRenewableCallouts: CountryRenewableCallouts = null; - public get countryRenewableCallouts(): CountryRenewableCallouts { - if (this._countryRenewableCallouts == null) - { - this._countryRenewableCallouts = new CountryRenewableCallouts(); - } - return this._countryRenewableCallouts; - } - } diff --git a/samples/charts/toolbar/actions-built-in-category-chart/src/app.component.html b/samples/charts/toolbar/actions-built-in-category-chart/src/app.component.html index 36d82b052..5fb53ffab 100644 --- a/samples/charts/toolbar/actions-built-in-category-chart/src/app.component.html +++ b/samples/charts/toolbar/actions-built-in-category-chart/src/app.component.html @@ -33,6 +33,7 @@ yAxisTitleLeftMargin="10" yAxisTitleRightMargin="5" yAxisLabelLeftMargin="0" + yAxisLabelLocation="OutsideRight" isTransitionInEnabled="true">