diff --git a/samples/charts/data-chart/bar-chart-styling/src/app.component.html b/samples/charts/data-chart/bar-chart-styling/src/app.component.html index 17bf7fbef..c5d646373 100644 --- a/samples/charts/data-chart/bar-chart-styling/src/app.component.html +++ b/samples/charts/data-chart/bar-chart-styling/src/app.component.html @@ -38,7 +38,7 @@ showDefaultTooltip="true" isTransitionInEnabled="true" isHighlightingEnabled="true" - brush="rgba(134, 6, 138, 0.647058823529412)" + brush="rgba(134, 6, 138, 0.6470588235294118)" outline="rgba(133, 6, 138, 1)" thickness="2" areaFillOpacity="0.5" diff --git a/samples/charts/data-chart/data-legend-grouping-and-highlighting/.codesandbox/Dockerfile b/samples/charts/data-chart/data-legend-grouping-and-highlighting/.codesandbox/Dockerfile new file mode 100644 index 000000000..adf04bd95 --- /dev/null +++ b/samples/charts/data-chart/data-legend-grouping-and-highlighting/.codesandbox/Dockerfile @@ -0,0 +1 @@ +FROM node:18 \ No newline at end of file diff --git a/samples/charts/data-chart/data-legend-grouping-and-highlighting/.codesandbox/tasks.json b/samples/charts/data-chart/data-legend-grouping-and-highlighting/.codesandbox/tasks.json new file mode 100644 index 000000000..8d92a54cd --- /dev/null +++ b/samples/charts/data-chart/data-legend-grouping-and-highlighting/.codesandbox/tasks.json @@ -0,0 +1,17 @@ +{ + // These tasks will run in order when initializing your CodeSandbox project. + "setupTasks": [ + { + "name": "Install Dependencies", + "command": "yarn install" + } + ], + // These tasks can be run from CodeSandbox. Running one will open a log in the app. + "tasks": { + "node node_modules/@angular/cli/bin/ng serve -o --disable-host-check": { + "name": "Start Project", + "command": "node node_modules/@angular/cli/bin/ng serve -o --disable-host-check", + "runAtStart": true + } + } +} \ No newline at end of file diff --git a/samples/charts/data-chart/data-legend-grouping-and-highlighting/.stackblitzrc b/samples/charts/data-chart/data-legend-grouping-and-highlighting/.stackblitzrc new file mode 100644 index 000000000..dd44ea00f --- /dev/null +++ b/samples/charts/data-chart/data-legend-grouping-and-highlighting/.stackblitzrc @@ -0,0 +1 @@ +{"installDependencies":true, "startCommand":"npm start"} \ No newline at end of file diff --git a/samples/charts/data-chart/data-legend-grouping-and-highlighting/angular.json b/samples/charts/data-chart/data-legend-grouping-and-highlighting/angular.json new file mode 100644 index 000000000..ff6803cf7 --- /dev/null +++ b/samples/charts/data-chart/data-legend-grouping-and-highlighting/angular.json @@ -0,0 +1,120 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "demo": { + "schematics": { + "@schematics/angular:component": { + "style": "scss" + }, + "@schematics/angular:application": { + "strict": true + } + }, + "root": "", + "sourceRoot": "src", + "prefix": "app", + "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": "tsconfig.app.json", + "inlineStyleLanguage": "scss", + "assets": [ + "src/assets" + ], + "styles": [ + "src/styles.scss" + ], + "scripts": [], + "stylePreprocessorOptions": { + "includePaths": ["node_modules/"] + } + }, + "configurations": { + "production": { + "fileReplacements": [ + { + "replace": "src/environments/environment.ts", + "with": "src/environments/environment.prod.ts" + } + ], + "outputHashing": "all", + "budgets": [ + { + "type": "initial", + "maximumWarning": "500kb", + "maximumError": "1mb" + }, + { + "type": "anyComponentStyle", + "maximumWarning": "2kb", + "maximumError": "4kb" + } + ] + }, + "development": { + "buildOptimizer": false, + "optimization": false, + "vendorChunk": true, + "extractLicenses": false, + "sourceMap": true, + "namedChunks": true + } + }, + "defaultConfiguration": "production" + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "configurations": { + "production": { + "buildTarget": "demo:build:production" + }, + "development": { + "buildTarget": "demo:build:development" + } + }, + "defaultConfiguration": "development" + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "buildTarget": "demo:build" + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "main": "src/test.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "tsconfig.spec.json", + "karmaConfig": "karma.conf.js", + "styles": [ + "src/styles.scss" + ], + "scripts": [], + "assets": [ + "src/assets" + ], + "inlineStyleLanguage": "scss", + "stylePreprocessorOptions": { + "includePaths": ["node_modules/"] + } + } + } + } + } + }, + "defaultProject": "demo", + "cli": { + "analytics": false + } +} diff --git a/samples/charts/data-chart/data-legend-grouping-and-highlighting/package.json b/samples/charts/data-chart/data-legend-grouping-and-highlighting/package.json new file mode 100644 index 000000000..35620b319 --- /dev/null +++ b/samples/charts/data-chart/data-legend-grouping-and-highlighting/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": "^17.2.1", + "@angular/common": "^17.2.1", + "@angular/compiler": "^17.2.1", + "@angular/core": "^17.2.1", + "@angular/forms": "^17.2.1", + "@angular/platform-browser": "^17.2.1", + "@angular/platform-browser-dynamic": "^17.2.1", + "@types/hammerjs": "2.0.39", + "classlist.js": "1.1.20150312", + "core-js": "3.21.0", + "hammerjs": "^2.0.8", + "igniteui-angular-charts": "17.3.1-alpha.0", + "igniteui-angular-core": "17.3.1-alpha.0", + "intl": "1.2.5", + "jszip": "3.8.0", + "rxjs": "^7.8.1", + "tslib": "^2.6.1", + "web-animations-js": "2.3.2", + "zone.js": "~0.14.4" + }, + "devDependencies": { + "@angular/cli": "17.2.0", + "@angular/compiler-cli": "17.2.1", + "@angular/language-service": "17.2.1", + "@angular-devkit/build-angular": "17.2.0", + "@types/node": "18.17.0", + "codelyzer": "6.0.2", + "jasmine-core": "5.1.1", + "jasmine-spec-reporter": "~4.2.1", + "sass.js": "0.11.1", + "tslint": "~6.1.3", + "ts-node": "10.9.1", + "typescript": "5.3.3" + } +} diff --git a/samples/charts/data-chart/data-legend-grouping-and-highlighting/src/OlympicMedalsTopCountriesWithTotals.ts b/samples/charts/data-chart/data-legend-grouping-and-highlighting/src/OlympicMedalsTopCountriesWithTotals.ts new file mode 100644 index 000000000..63183e6f0 --- /dev/null +++ b/samples/charts/data-chart/data-legend-grouping-and-highlighting/src/OlympicMedalsTopCountriesWithTotals.ts @@ -0,0 +1,92 @@ +export class OlympicMedalsTopCountriesWithTotalsItem { + public constructor(init: Partial) { + Object.assign(this, init); + } + + public year: string; + public america: number; + public americaGold: number; + public china: number; + public chinaGold: number; + public russia: number; + public russiaGold: number; + public total: number; + +} +export class OlympicMedalsTopCountriesWithTotals extends Array { + public constructor(items: Array | number = -1) { + if (Array.isArray(items)) { + super(...items); + } else { + const newItems = [ + new OlympicMedalsTopCountriesWithTotalsItem( + { + year: `1996`, + america: 148, + americaGold: 50, + china: 110, + chinaGold: 40, + russia: 95, + russiaGold: 20, + total: 353 + }), + new OlympicMedalsTopCountriesWithTotalsItem( + { + year: `2000`, + america: 142, + americaGold: 40, + china: 115, + chinaGold: 45, + russia: 91, + russiaGold: 40, + total: 348 + }), + new OlympicMedalsTopCountriesWithTotalsItem( + { + year: `2004`, + america: 134, + americaGold: 35, + china: 121, + chinaGold: 55, + russia: 86, + russiaGold: 25, + total: 341 + }), + new OlympicMedalsTopCountriesWithTotalsItem( + { + year: `2008`, + america: 131, + americaGold: 20, + china: 129, + chinaGold: 35, + russia: 65, + russiaGold: 35, + total: 325 + }), + new OlympicMedalsTopCountriesWithTotalsItem( + { + year: `2012`, + america: 135, + americaGold: 25, + china: 115, + chinaGold: 50, + russia: 77, + russiaGold: 15, + total: 327 + }), + new OlympicMedalsTopCountriesWithTotalsItem( + { + year: `2016`, + america: 146, + americaGold: 45, + china: 112, + chinaGold: 45, + russia: 88, + russiaGold: 30, + total: 346 + }), + ]; + super(...(newItems.slice(0, items))); + } + } +} diff --git a/samples/charts/data-chart/data-legend-grouping-and-highlighting/src/app.component.html b/samples/charts/data-chart/data-legend-grouping-and-highlighting/src/app.component.html new file mode 100644 index 000000000..cefd8cb52 --- /dev/null +++ b/samples/charts/data-chart/data-legend-grouping-and-highlighting/src/app.component.html @@ -0,0 +1,68 @@ +
+
+ + +
+
+ + + + + + + + + + + + +
+
diff --git a/samples/charts/data-chart/data-legend-grouping-and-highlighting/src/app.component.scss b/samples/charts/data-chart/data-legend-grouping-and-highlighting/src/app.component.scss new file mode 100644 index 000000000..cbff781da --- /dev/null +++ b/samples/charts/data-chart/data-legend-grouping-and-highlighting/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/data-legend-grouping-and-highlighting/src/app.component.ts b/samples/charts/data-chart/data-legend-grouping-and-highlighting/src/app.component.ts new file mode 100644 index 000000000..92a707fb1 --- /dev/null +++ b/samples/charts/data-chart/data-legend-grouping-and-highlighting/src/app.component.ts @@ -0,0 +1,64 @@ +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { ComponentRenderer, LegendDescriptionModule, NumberAbbreviatorDescriptionModule, DataChartCoreDescriptionModule, DataChartCategoryDescriptionModule, DataChartInteractivityDescriptionModule, DataLegendDescriptionModule, DataChartAnnotationDescriptionModule } from 'igniteui-angular-core'; +import { OlympicMedalsTopCountriesWithTotalsItem, OlympicMedalsTopCountriesWithTotals } from './OlympicMedalsTopCountriesWithTotals'; +import { IgxDataLegendComponent, IgxDataChartComponent, IgxCategoryXAxisComponent, IgxNumericYAxisComponent, IgxColumnSeriesComponent } from 'igniteui-angular-charts'; + +@Component({ + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("legend", { static: true } ) + private legend: IgxDataLegendComponent + @ViewChild("chart", { static: true } ) + private chart: IgxDataChartComponent + @ViewChild("xAxis", { static: true } ) + private xAxis: IgxCategoryXAxisComponent + @ViewChild("yAxis", { static: true } ) + private yAxis: IgxNumericYAxisComponent + @ViewChild("columnSeries1", { static: true } ) + private columnSeries1: IgxColumnSeriesComponent + @ViewChild("columnSeries2", { static: true } ) + private columnSeries2: IgxColumnSeriesComponent + @ViewChild("columnSeries3", { static: true } ) + private columnSeries3: IgxColumnSeriesComponent + private _olympicMedalsTopCountriesWithTotals: OlympicMedalsTopCountriesWithTotals = null; + public get olympicMedalsTopCountriesWithTotals(): OlympicMedalsTopCountriesWithTotals { + if (this._olympicMedalsTopCountriesWithTotals == null) + { + this._olympicMedalsTopCountriesWithTotals = new OlympicMedalsTopCountriesWithTotals(); + } + return this._olympicMedalsTopCountriesWithTotals; + } + + private _componentRenderer: ComponentRenderer = null; + public get renderer(): ComponentRenderer { + if (this._componentRenderer == null) { + this._componentRenderer = new ComponentRenderer(); + var context = this._componentRenderer.context; + LegendDescriptionModule.register(context); + NumberAbbreviatorDescriptionModule.register(context); + DataChartCoreDescriptionModule.register(context); + DataChartCategoryDescriptionModule.register(context); + DataChartInteractivityDescriptionModule.register(context); + DataLegendDescriptionModule.register(context); + DataChartAnnotationDescriptionModule.register(context); + } + return this._componentRenderer; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} + diff --git a/samples/charts/data-chart/data-legend-grouping-and-highlighting/src/app.module.ts b/samples/charts/data-chart/data-legend-grouping-and-highlighting/src/app.module.ts new file mode 100644 index 000000000..4014dfdbf --- /dev/null +++ b/samples/charts/data-chart/data-legend-grouping-and-highlighting/src/app.module.ts @@ -0,0 +1,31 @@ +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 { IgxLegendModule, IgxNumberAbbreviatorModule, IgxDataChartCoreModule, IgxDataChartCategoryModule, IgxDataChartInteractivityModule, IgxDataLegendModule, IgxDataChartAnnotationModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxLegendModule, + IgxNumberAbbreviatorModule, + IgxDataChartCoreModule, + IgxDataChartCategoryModule, + IgxDataChartInteractivityModule, + IgxDataLegendModule, + IgxDataChartAnnotationModule +], + providers: [], + schemas: [] +}) +export class AppModule {} diff --git a/samples/charts/data-chart/data-legend-grouping-and-highlighting/src/environments/environment.prod.ts b/samples/charts/data-chart/data-legend-grouping-and-highlighting/src/environments/environment.prod.ts new file mode 100644 index 000000000..3612073bc --- /dev/null +++ b/samples/charts/data-chart/data-legend-grouping-and-highlighting/src/environments/environment.prod.ts @@ -0,0 +1,3 @@ +export const environment = { + production: true +}; diff --git a/samples/charts/data-chart/data-legend-grouping-and-highlighting/src/environments/environment.ts b/samples/charts/data-chart/data-legend-grouping-and-highlighting/src/environments/environment.ts new file mode 100644 index 000000000..7b4f817ad --- /dev/null +++ b/samples/charts/data-chart/data-legend-grouping-and-highlighting/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/data-legend-grouping-and-highlighting/src/index.html b/samples/charts/data-chart/data-legend-grouping-and-highlighting/src/index.html new file mode 100644 index 000000000..7650dfb64 --- /dev/null +++ b/samples/charts/data-chart/data-legend-grouping-and-highlighting/src/index.html @@ -0,0 +1,23 @@ + + + + + + IgniteUI for Angular | Example | infragistics + + + + + + + + + + + + + + + + + diff --git a/samples/charts/data-chart/data-legend-grouping-and-highlighting/src/main.ts b/samples/charts/data-chart/data-legend-grouping-and-highlighting/src/main.ts new file mode 100644 index 000000000..ec9adcd4a --- /dev/null +++ b/samples/charts/data-chart/data-legend-grouping-and-highlighting/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/data-legend-grouping-and-highlighting/src/polyfills.ts b/samples/charts/data-chart/data-legend-grouping-and-highlighting/src/polyfills.ts new file mode 100644 index 000000000..d583cff9c --- /dev/null +++ b/samples/charts/data-chart/data-legend-grouping-and-highlighting/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"; // 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/data-legend-grouping-and-highlighting/src/styles.scss b/samples/charts/data-chart/data-legend-grouping-and-highlighting/src/styles.scss new file mode 100644 index 000000000..9b431e92d --- /dev/null +++ b/samples/charts/data-chart/data-legend-grouping-and-highlighting/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/data-legend-grouping-and-highlighting/src/typings.d.ts b/samples/charts/data-chart/data-legend-grouping-and-highlighting/src/typings.d.ts new file mode 100644 index 000000000..ef5c7bd62 --- /dev/null +++ b/samples/charts/data-chart/data-legend-grouping-and-highlighting/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/data-legend-grouping-and-highlighting/tsconfig.app.json b/samples/charts/data-chart/data-legend-grouping-and-highlighting/tsconfig.app.json new file mode 100644 index 000000000..ff396d4ce --- /dev/null +++ b/samples/charts/data-chart/data-legend-grouping-and-highlighting/tsconfig.app.json @@ -0,0 +1,10 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "./out-tsc/app", + "types": [] + }, + "files": ["src/main.ts", "src/polyfills.ts"], + "include": ["src/**/*.d.ts"] +} diff --git a/samples/charts/data-chart/data-legend-grouping-and-highlighting/tsconfig.json b/samples/charts/data-chart/data-legend-grouping-and-highlighting/tsconfig.json new file mode 100644 index 000000000..22d546ab3 --- /dev/null +++ b/samples/charts/data-chart/data-legend-grouping-and-highlighting/tsconfig.json @@ -0,0 +1,27 @@ +{ + "compileOnSave": false, + "compilerOptions": { + "importHelpers": true, + "module": "esnext", + "baseUrl": "./", + "outDir": "./dist/out-tsc", + "sourceMap": false, + "declaration": false, + "moduleResolution": "node", + "experimentalDecorators": true, + "resolveJsonModule": true, + "esModuleInterop": true, + "downlevelIteration": true, + "target": "es2015", + "typeRoots": [ + "node_modules/@types" + ], + "lib": [ + "es2018", + "dom" + ] + }, + "angularCompilerOptions": { + "enableIvy": true + } +} \ No newline at end of file diff --git a/samples/charts/data-chart/data-legend-grouping-and-highlighting/tslint.json b/samples/charts/data-chart/data-legend-grouping-and-highlighting/tslint.json new file mode 100644 index 000000000..777c777d9 --- /dev/null +++ b/samples/charts/data-chart/data-legend-grouping-and-highlighting/tslint.json @@ -0,0 +1,31 @@ +{ + "extends": "tslint:latest", + "rules": { + "deprecation": { + "severity": "warning" + }, + "arrow-parens": false, + "indent": [true, "spaces"], + "interface-name": [true, "always-prefix"], + "max-classes-per-file": false, + "no-bitwise": false, + "no-console": false, + "no-empty": false, + "no-duplicate-imports": false, + "no-implicit-dependencies": false, + "no-object-literal-type-assertion": false, + "no-submodule-imports": [false], + "no-string-literal": false, + "no-trailing-whitespace": false, + "no-var-keyword": false, + "object-literal-sort-keys": false, + "only-arrow-functions": false, + "prefer-conditional-expression": false, + "prefer-const": false, + "prefer-for-of": false, + "prefer-object-spread": false, + "space-within-parens": false, + "trailing-comma": [true, {"multiline": "never", "singleline": "never"}], + "variable-name": [true, "allow-leading-underscore"] + } +} diff --git a/samples/charts/data-chart/data-legend-grouping/.codesandbox/Dockerfile b/samples/charts/data-chart/data-legend-grouping/.codesandbox/Dockerfile new file mode 100644 index 000000000..adf04bd95 --- /dev/null +++ b/samples/charts/data-chart/data-legend-grouping/.codesandbox/Dockerfile @@ -0,0 +1 @@ +FROM node:18 \ No newline at end of file diff --git a/samples/charts/data-chart/data-legend-grouping/.codesandbox/tasks.json b/samples/charts/data-chart/data-legend-grouping/.codesandbox/tasks.json new file mode 100644 index 000000000..8d92a54cd --- /dev/null +++ b/samples/charts/data-chart/data-legend-grouping/.codesandbox/tasks.json @@ -0,0 +1,17 @@ +{ + // These tasks will run in order when initializing your CodeSandbox project. + "setupTasks": [ + { + "name": "Install Dependencies", + "command": "yarn install" + } + ], + // These tasks can be run from CodeSandbox. Running one will open a log in the app. + "tasks": { + "node node_modules/@angular/cli/bin/ng serve -o --disable-host-check": { + "name": "Start Project", + "command": "node node_modules/@angular/cli/bin/ng serve -o --disable-host-check", + "runAtStart": true + } + } +} \ No newline at end of file diff --git a/samples/charts/data-chart/data-legend-grouping/.stackblitzrc b/samples/charts/data-chart/data-legend-grouping/.stackblitzrc new file mode 100644 index 000000000..dd44ea00f --- /dev/null +++ b/samples/charts/data-chart/data-legend-grouping/.stackblitzrc @@ -0,0 +1 @@ +{"installDependencies":true, "startCommand":"npm start"} \ No newline at end of file diff --git a/samples/charts/data-chart/data-legend-grouping/angular.json b/samples/charts/data-chart/data-legend-grouping/angular.json new file mode 100644 index 000000000..ff6803cf7 --- /dev/null +++ b/samples/charts/data-chart/data-legend-grouping/angular.json @@ -0,0 +1,120 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "demo": { + "schematics": { + "@schematics/angular:component": { + "style": "scss" + }, + "@schematics/angular:application": { + "strict": true + } + }, + "root": "", + "sourceRoot": "src", + "prefix": "app", + "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": "tsconfig.app.json", + "inlineStyleLanguage": "scss", + "assets": [ + "src/assets" + ], + "styles": [ + "src/styles.scss" + ], + "scripts": [], + "stylePreprocessorOptions": { + "includePaths": ["node_modules/"] + } + }, + "configurations": { + "production": { + "fileReplacements": [ + { + "replace": "src/environments/environment.ts", + "with": "src/environments/environment.prod.ts" + } + ], + "outputHashing": "all", + "budgets": [ + { + "type": "initial", + "maximumWarning": "500kb", + "maximumError": "1mb" + }, + { + "type": "anyComponentStyle", + "maximumWarning": "2kb", + "maximumError": "4kb" + } + ] + }, + "development": { + "buildOptimizer": false, + "optimization": false, + "vendorChunk": true, + "extractLicenses": false, + "sourceMap": true, + "namedChunks": true + } + }, + "defaultConfiguration": "production" + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "configurations": { + "production": { + "buildTarget": "demo:build:production" + }, + "development": { + "buildTarget": "demo:build:development" + } + }, + "defaultConfiguration": "development" + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "buildTarget": "demo:build" + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "main": "src/test.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "tsconfig.spec.json", + "karmaConfig": "karma.conf.js", + "styles": [ + "src/styles.scss" + ], + "scripts": [], + "assets": [ + "src/assets" + ], + "inlineStyleLanguage": "scss", + "stylePreprocessorOptions": { + "includePaths": ["node_modules/"] + } + } + } + } + } + }, + "defaultProject": "demo", + "cli": { + "analytics": false + } +} diff --git a/samples/charts/data-chart/data-legend-grouping/package.json b/samples/charts/data-chart/data-legend-grouping/package.json new file mode 100644 index 000000000..35620b319 --- /dev/null +++ b/samples/charts/data-chart/data-legend-grouping/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": "^17.2.1", + "@angular/common": "^17.2.1", + "@angular/compiler": "^17.2.1", + "@angular/core": "^17.2.1", + "@angular/forms": "^17.2.1", + "@angular/platform-browser": "^17.2.1", + "@angular/platform-browser-dynamic": "^17.2.1", + "@types/hammerjs": "2.0.39", + "classlist.js": "1.1.20150312", + "core-js": "3.21.0", + "hammerjs": "^2.0.8", + "igniteui-angular-charts": "17.3.1-alpha.0", + "igniteui-angular-core": "17.3.1-alpha.0", + "intl": "1.2.5", + "jszip": "3.8.0", + "rxjs": "^7.8.1", + "tslib": "^2.6.1", + "web-animations-js": "2.3.2", + "zone.js": "~0.14.4" + }, + "devDependencies": { + "@angular/cli": "17.2.0", + "@angular/compiler-cli": "17.2.1", + "@angular/language-service": "17.2.1", + "@angular-devkit/build-angular": "17.2.0", + "@types/node": "18.17.0", + "codelyzer": "6.0.2", + "jasmine-core": "5.1.1", + "jasmine-spec-reporter": "~4.2.1", + "sass.js": "0.11.1", + "tslint": "~6.1.3", + "ts-node": "10.9.1", + "typescript": "5.3.3" + } +} diff --git a/samples/charts/data-chart/data-legend-grouping/src/OlympicMedalsTopCountriesWithTotals.ts b/samples/charts/data-chart/data-legend-grouping/src/OlympicMedalsTopCountriesWithTotals.ts new file mode 100644 index 000000000..63183e6f0 --- /dev/null +++ b/samples/charts/data-chart/data-legend-grouping/src/OlympicMedalsTopCountriesWithTotals.ts @@ -0,0 +1,92 @@ +export class OlympicMedalsTopCountriesWithTotalsItem { + public constructor(init: Partial) { + Object.assign(this, init); + } + + public year: string; + public america: number; + public americaGold: number; + public china: number; + public chinaGold: number; + public russia: number; + public russiaGold: number; + public total: number; + +} +export class OlympicMedalsTopCountriesWithTotals extends Array { + public constructor(items: Array | number = -1) { + if (Array.isArray(items)) { + super(...items); + } else { + const newItems = [ + new OlympicMedalsTopCountriesWithTotalsItem( + { + year: `1996`, + america: 148, + americaGold: 50, + china: 110, + chinaGold: 40, + russia: 95, + russiaGold: 20, + total: 353 + }), + new OlympicMedalsTopCountriesWithTotalsItem( + { + year: `2000`, + america: 142, + americaGold: 40, + china: 115, + chinaGold: 45, + russia: 91, + russiaGold: 40, + total: 348 + }), + new OlympicMedalsTopCountriesWithTotalsItem( + { + year: `2004`, + america: 134, + americaGold: 35, + china: 121, + chinaGold: 55, + russia: 86, + russiaGold: 25, + total: 341 + }), + new OlympicMedalsTopCountriesWithTotalsItem( + { + year: `2008`, + america: 131, + americaGold: 20, + china: 129, + chinaGold: 35, + russia: 65, + russiaGold: 35, + total: 325 + }), + new OlympicMedalsTopCountriesWithTotalsItem( + { + year: `2012`, + america: 135, + americaGold: 25, + china: 115, + chinaGold: 50, + russia: 77, + russiaGold: 15, + total: 327 + }), + new OlympicMedalsTopCountriesWithTotalsItem( + { + year: `2016`, + america: 146, + americaGold: 45, + china: 112, + chinaGold: 45, + russia: 88, + russiaGold: 30, + total: 346 + }), + ]; + super(...(newItems.slice(0, items))); + } + } +} diff --git a/samples/charts/data-chart/data-legend-grouping/src/app.component.html b/samples/charts/data-chart/data-legend-grouping/src/app.component.html new file mode 100644 index 000000000..cea9e8230 --- /dev/null +++ b/samples/charts/data-chart/data-legend-grouping/src/app.component.html @@ -0,0 +1,56 @@ +
+
+ + +
+
+ + + + + + + + + + + + +
+
diff --git a/samples/charts/data-chart/data-legend-grouping/src/app.component.scss b/samples/charts/data-chart/data-legend-grouping/src/app.component.scss new file mode 100644 index 000000000..cbff781da --- /dev/null +++ b/samples/charts/data-chart/data-legend-grouping/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/data-legend-grouping/src/app.component.ts b/samples/charts/data-chart/data-legend-grouping/src/app.component.ts new file mode 100644 index 000000000..92a707fb1 --- /dev/null +++ b/samples/charts/data-chart/data-legend-grouping/src/app.component.ts @@ -0,0 +1,64 @@ +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { ComponentRenderer, LegendDescriptionModule, NumberAbbreviatorDescriptionModule, DataChartCoreDescriptionModule, DataChartCategoryDescriptionModule, DataChartInteractivityDescriptionModule, DataLegendDescriptionModule, DataChartAnnotationDescriptionModule } from 'igniteui-angular-core'; +import { OlympicMedalsTopCountriesWithTotalsItem, OlympicMedalsTopCountriesWithTotals } from './OlympicMedalsTopCountriesWithTotals'; +import { IgxDataLegendComponent, IgxDataChartComponent, IgxCategoryXAxisComponent, IgxNumericYAxisComponent, IgxColumnSeriesComponent } from 'igniteui-angular-charts'; + +@Component({ + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("legend", { static: true } ) + private legend: IgxDataLegendComponent + @ViewChild("chart", { static: true } ) + private chart: IgxDataChartComponent + @ViewChild("xAxis", { static: true } ) + private xAxis: IgxCategoryXAxisComponent + @ViewChild("yAxis", { static: true } ) + private yAxis: IgxNumericYAxisComponent + @ViewChild("columnSeries1", { static: true } ) + private columnSeries1: IgxColumnSeriesComponent + @ViewChild("columnSeries2", { static: true } ) + private columnSeries2: IgxColumnSeriesComponent + @ViewChild("columnSeries3", { static: true } ) + private columnSeries3: IgxColumnSeriesComponent + private _olympicMedalsTopCountriesWithTotals: OlympicMedalsTopCountriesWithTotals = null; + public get olympicMedalsTopCountriesWithTotals(): OlympicMedalsTopCountriesWithTotals { + if (this._olympicMedalsTopCountriesWithTotals == null) + { + this._olympicMedalsTopCountriesWithTotals = new OlympicMedalsTopCountriesWithTotals(); + } + return this._olympicMedalsTopCountriesWithTotals; + } + + private _componentRenderer: ComponentRenderer = null; + public get renderer(): ComponentRenderer { + if (this._componentRenderer == null) { + this._componentRenderer = new ComponentRenderer(); + var context = this._componentRenderer.context; + LegendDescriptionModule.register(context); + NumberAbbreviatorDescriptionModule.register(context); + DataChartCoreDescriptionModule.register(context); + DataChartCategoryDescriptionModule.register(context); + DataChartInteractivityDescriptionModule.register(context); + DataLegendDescriptionModule.register(context); + DataChartAnnotationDescriptionModule.register(context); + } + return this._componentRenderer; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} + diff --git a/samples/charts/data-chart/data-legend-grouping/src/app.module.ts b/samples/charts/data-chart/data-legend-grouping/src/app.module.ts new file mode 100644 index 000000000..4014dfdbf --- /dev/null +++ b/samples/charts/data-chart/data-legend-grouping/src/app.module.ts @@ -0,0 +1,31 @@ +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 { IgxLegendModule, IgxNumberAbbreviatorModule, IgxDataChartCoreModule, IgxDataChartCategoryModule, IgxDataChartInteractivityModule, IgxDataLegendModule, IgxDataChartAnnotationModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxLegendModule, + IgxNumberAbbreviatorModule, + IgxDataChartCoreModule, + IgxDataChartCategoryModule, + IgxDataChartInteractivityModule, + IgxDataLegendModule, + IgxDataChartAnnotationModule +], + providers: [], + schemas: [] +}) +export class AppModule {} diff --git a/samples/charts/data-chart/data-legend-grouping/src/environments/environment.prod.ts b/samples/charts/data-chart/data-legend-grouping/src/environments/environment.prod.ts new file mode 100644 index 000000000..3612073bc --- /dev/null +++ b/samples/charts/data-chart/data-legend-grouping/src/environments/environment.prod.ts @@ -0,0 +1,3 @@ +export const environment = { + production: true +}; diff --git a/samples/charts/data-chart/data-legend-grouping/src/environments/environment.ts b/samples/charts/data-chart/data-legend-grouping/src/environments/environment.ts new file mode 100644 index 000000000..7b4f817ad --- /dev/null +++ b/samples/charts/data-chart/data-legend-grouping/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/data-legend-grouping/src/index.html b/samples/charts/data-chart/data-legend-grouping/src/index.html new file mode 100644 index 000000000..7650dfb64 --- /dev/null +++ b/samples/charts/data-chart/data-legend-grouping/src/index.html @@ -0,0 +1,23 @@ + + + + + + IgniteUI for Angular | Example | infragistics + + + + + + + + + + + + + + + + + diff --git a/samples/charts/data-chart/data-legend-grouping/src/main.ts b/samples/charts/data-chart/data-legend-grouping/src/main.ts new file mode 100644 index 000000000..ec9adcd4a --- /dev/null +++ b/samples/charts/data-chart/data-legend-grouping/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/data-legend-grouping/src/polyfills.ts b/samples/charts/data-chart/data-legend-grouping/src/polyfills.ts new file mode 100644 index 000000000..d583cff9c --- /dev/null +++ b/samples/charts/data-chart/data-legend-grouping/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"; // 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/data-legend-grouping/src/styles.scss b/samples/charts/data-chart/data-legend-grouping/src/styles.scss new file mode 100644 index 000000000..9b431e92d --- /dev/null +++ b/samples/charts/data-chart/data-legend-grouping/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/data-legend-grouping/src/typings.d.ts b/samples/charts/data-chart/data-legend-grouping/src/typings.d.ts new file mode 100644 index 000000000..ef5c7bd62 --- /dev/null +++ b/samples/charts/data-chart/data-legend-grouping/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/data-legend-grouping/tsconfig.app.json b/samples/charts/data-chart/data-legend-grouping/tsconfig.app.json new file mode 100644 index 000000000..ff396d4ce --- /dev/null +++ b/samples/charts/data-chart/data-legend-grouping/tsconfig.app.json @@ -0,0 +1,10 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "./out-tsc/app", + "types": [] + }, + "files": ["src/main.ts", "src/polyfills.ts"], + "include": ["src/**/*.d.ts"] +} diff --git a/samples/charts/data-chart/data-legend-grouping/tsconfig.json b/samples/charts/data-chart/data-legend-grouping/tsconfig.json new file mode 100644 index 000000000..22d546ab3 --- /dev/null +++ b/samples/charts/data-chart/data-legend-grouping/tsconfig.json @@ -0,0 +1,27 @@ +{ + "compileOnSave": false, + "compilerOptions": { + "importHelpers": true, + "module": "esnext", + "baseUrl": "./", + "outDir": "./dist/out-tsc", + "sourceMap": false, + "declaration": false, + "moduleResolution": "node", + "experimentalDecorators": true, + "resolveJsonModule": true, + "esModuleInterop": true, + "downlevelIteration": true, + "target": "es2015", + "typeRoots": [ + "node_modules/@types" + ], + "lib": [ + "es2018", + "dom" + ] + }, + "angularCompilerOptions": { + "enableIvy": true + } +} \ No newline at end of file diff --git a/samples/charts/data-chart/data-legend-grouping/tslint.json b/samples/charts/data-chart/data-legend-grouping/tslint.json new file mode 100644 index 000000000..777c777d9 --- /dev/null +++ b/samples/charts/data-chart/data-legend-grouping/tslint.json @@ -0,0 +1,31 @@ +{ + "extends": "tslint:latest", + "rules": { + "deprecation": { + "severity": "warning" + }, + "arrow-parens": false, + "indent": [true, "spaces"], + "interface-name": [true, "always-prefix"], + "max-classes-per-file": false, + "no-bitwise": false, + "no-console": false, + "no-empty": false, + "no-duplicate-imports": false, + "no-implicit-dependencies": false, + "no-object-literal-type-assertion": false, + "no-submodule-imports": [false], + "no-string-literal": false, + "no-trailing-whitespace": false, + "no-var-keyword": false, + "object-literal-sort-keys": false, + "only-arrow-functions": false, + "prefer-conditional-expression": false, + "prefer-const": false, + "prefer-for-of": false, + "prefer-object-spread": false, + "space-within-parens": false, + "trailing-comma": [true, {"multiline": "never", "singleline": "never"}], + "variable-name": [true, "allow-leading-underscore"] + } +} diff --git a/samples/charts/data-chart/data-legend-styling/.codesandbox/Dockerfile b/samples/charts/data-chart/data-legend-styling/.codesandbox/Dockerfile new file mode 100644 index 000000000..adf04bd95 --- /dev/null +++ b/samples/charts/data-chart/data-legend-styling/.codesandbox/Dockerfile @@ -0,0 +1 @@ +FROM node:18 \ No newline at end of file diff --git a/samples/charts/data-chart/data-legend-styling/.codesandbox/tasks.json b/samples/charts/data-chart/data-legend-styling/.codesandbox/tasks.json new file mode 100644 index 000000000..8d92a54cd --- /dev/null +++ b/samples/charts/data-chart/data-legend-styling/.codesandbox/tasks.json @@ -0,0 +1,17 @@ +{ + // These tasks will run in order when initializing your CodeSandbox project. + "setupTasks": [ + { + "name": "Install Dependencies", + "command": "yarn install" + } + ], + // These tasks can be run from CodeSandbox. Running one will open a log in the app. + "tasks": { + "node node_modules/@angular/cli/bin/ng serve -o --disable-host-check": { + "name": "Start Project", + "command": "node node_modules/@angular/cli/bin/ng serve -o --disable-host-check", + "runAtStart": true + } + } +} \ No newline at end of file diff --git a/samples/charts/data-chart/data-legend-styling/.stackblitzrc b/samples/charts/data-chart/data-legend-styling/.stackblitzrc new file mode 100644 index 000000000..dd44ea00f --- /dev/null +++ b/samples/charts/data-chart/data-legend-styling/.stackblitzrc @@ -0,0 +1 @@ +{"installDependencies":true, "startCommand":"npm start"} \ No newline at end of file diff --git a/samples/charts/data-chart/data-legend-styling/angular.json b/samples/charts/data-chart/data-legend-styling/angular.json new file mode 100644 index 000000000..ff6803cf7 --- /dev/null +++ b/samples/charts/data-chart/data-legend-styling/angular.json @@ -0,0 +1,120 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "demo": { + "schematics": { + "@schematics/angular:component": { + "style": "scss" + }, + "@schematics/angular:application": { + "strict": true + } + }, + "root": "", + "sourceRoot": "src", + "prefix": "app", + "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": "tsconfig.app.json", + "inlineStyleLanguage": "scss", + "assets": [ + "src/assets" + ], + "styles": [ + "src/styles.scss" + ], + "scripts": [], + "stylePreprocessorOptions": { + "includePaths": ["node_modules/"] + } + }, + "configurations": { + "production": { + "fileReplacements": [ + { + "replace": "src/environments/environment.ts", + "with": "src/environments/environment.prod.ts" + } + ], + "outputHashing": "all", + "budgets": [ + { + "type": "initial", + "maximumWarning": "500kb", + "maximumError": "1mb" + }, + { + "type": "anyComponentStyle", + "maximumWarning": "2kb", + "maximumError": "4kb" + } + ] + }, + "development": { + "buildOptimizer": false, + "optimization": false, + "vendorChunk": true, + "extractLicenses": false, + "sourceMap": true, + "namedChunks": true + } + }, + "defaultConfiguration": "production" + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "configurations": { + "production": { + "buildTarget": "demo:build:production" + }, + "development": { + "buildTarget": "demo:build:development" + } + }, + "defaultConfiguration": "development" + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "buildTarget": "demo:build" + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "main": "src/test.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "tsconfig.spec.json", + "karmaConfig": "karma.conf.js", + "styles": [ + "src/styles.scss" + ], + "scripts": [], + "assets": [ + "src/assets" + ], + "inlineStyleLanguage": "scss", + "stylePreprocessorOptions": { + "includePaths": ["node_modules/"] + } + } + } + } + } + }, + "defaultProject": "demo", + "cli": { + "analytics": false + } +} diff --git a/samples/charts/data-chart/data-legend-styling/package.json b/samples/charts/data-chart/data-legend-styling/package.json new file mode 100644 index 000000000..35620b319 --- /dev/null +++ b/samples/charts/data-chart/data-legend-styling/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": "^17.2.1", + "@angular/common": "^17.2.1", + "@angular/compiler": "^17.2.1", + "@angular/core": "^17.2.1", + "@angular/forms": "^17.2.1", + "@angular/platform-browser": "^17.2.1", + "@angular/platform-browser-dynamic": "^17.2.1", + "@types/hammerjs": "2.0.39", + "classlist.js": "1.1.20150312", + "core-js": "3.21.0", + "hammerjs": "^2.0.8", + "igniteui-angular-charts": "17.3.1-alpha.0", + "igniteui-angular-core": "17.3.1-alpha.0", + "intl": "1.2.5", + "jszip": "3.8.0", + "rxjs": "^7.8.1", + "tslib": "^2.6.1", + "web-animations-js": "2.3.2", + "zone.js": "~0.14.4" + }, + "devDependencies": { + "@angular/cli": "17.2.0", + "@angular/compiler-cli": "17.2.1", + "@angular/language-service": "17.2.1", + "@angular-devkit/build-angular": "17.2.0", + "@types/node": "18.17.0", + "codelyzer": "6.0.2", + "jasmine-core": "5.1.1", + "jasmine-spec-reporter": "~4.2.1", + "sass.js": "0.11.1", + "tslint": "~6.1.3", + "ts-node": "10.9.1", + "typescript": "5.3.3" + } +} diff --git a/samples/charts/data-chart/data-legend-styling/src/OlympicMedalsTopCountriesWithTotals.ts b/samples/charts/data-chart/data-legend-styling/src/OlympicMedalsTopCountriesWithTotals.ts new file mode 100644 index 000000000..63183e6f0 --- /dev/null +++ b/samples/charts/data-chart/data-legend-styling/src/OlympicMedalsTopCountriesWithTotals.ts @@ -0,0 +1,92 @@ +export class OlympicMedalsTopCountriesWithTotalsItem { + public constructor(init: Partial) { + Object.assign(this, init); + } + + public year: string; + public america: number; + public americaGold: number; + public china: number; + public chinaGold: number; + public russia: number; + public russiaGold: number; + public total: number; + +} +export class OlympicMedalsTopCountriesWithTotals extends Array { + public constructor(items: Array | number = -1) { + if (Array.isArray(items)) { + super(...items); + } else { + const newItems = [ + new OlympicMedalsTopCountriesWithTotalsItem( + { + year: `1996`, + america: 148, + americaGold: 50, + china: 110, + chinaGold: 40, + russia: 95, + russiaGold: 20, + total: 353 + }), + new OlympicMedalsTopCountriesWithTotalsItem( + { + year: `2000`, + america: 142, + americaGold: 40, + china: 115, + chinaGold: 45, + russia: 91, + russiaGold: 40, + total: 348 + }), + new OlympicMedalsTopCountriesWithTotalsItem( + { + year: `2004`, + america: 134, + americaGold: 35, + china: 121, + chinaGold: 55, + russia: 86, + russiaGold: 25, + total: 341 + }), + new OlympicMedalsTopCountriesWithTotalsItem( + { + year: `2008`, + america: 131, + americaGold: 20, + china: 129, + chinaGold: 35, + russia: 65, + russiaGold: 35, + total: 325 + }), + new OlympicMedalsTopCountriesWithTotalsItem( + { + year: `2012`, + america: 135, + americaGold: 25, + china: 115, + chinaGold: 50, + russia: 77, + russiaGold: 15, + total: 327 + }), + new OlympicMedalsTopCountriesWithTotalsItem( + { + year: `2016`, + america: 146, + americaGold: 45, + china: 112, + chinaGold: 45, + russia: 88, + russiaGold: 30, + total: 346 + }), + ]; + super(...(newItems.slice(0, items))); + } + } +} diff --git a/samples/charts/data-chart/data-legend-styling/src/app.component.html b/samples/charts/data-chart/data-legend-styling/src/app.component.html new file mode 100644 index 000000000..dc9c7a2e2 --- /dev/null +++ b/samples/charts/data-chart/data-legend-styling/src/app.component.html @@ -0,0 +1,50 @@ +
+
+ + +
+
+ + + + + + + + + + +
+
diff --git a/samples/charts/data-chart/data-legend-styling/src/app.component.scss b/samples/charts/data-chart/data-legend-styling/src/app.component.scss new file mode 100644 index 000000000..cbff781da --- /dev/null +++ b/samples/charts/data-chart/data-legend-styling/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/data-legend-styling/src/app.component.ts b/samples/charts/data-chart/data-legend-styling/src/app.component.ts new file mode 100644 index 000000000..868110677 --- /dev/null +++ b/samples/charts/data-chart/data-legend-styling/src/app.component.ts @@ -0,0 +1,62 @@ +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { ComponentRenderer, LegendDescriptionModule, NumberAbbreviatorDescriptionModule, DataChartCoreDescriptionModule, DataChartCategoryDescriptionModule, DataChartInteractivityDescriptionModule, DataLegendDescriptionModule, DataChartAnnotationDescriptionModule } from 'igniteui-angular-core'; +import { OlympicMedalsTopCountriesWithTotalsItem, OlympicMedalsTopCountriesWithTotals } from './OlympicMedalsTopCountriesWithTotals'; +import { IgxDataLegendComponent, IgxDataChartComponent, IgxCategoryXAxisComponent, IgxNumericYAxisComponent, IgxColumnSeriesComponent, IgxDataToolTipLayerComponent } from 'igniteui-angular-charts'; + +@Component({ + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("legend", { static: true } ) + private legend: IgxDataLegendComponent + @ViewChild("chart", { static: true } ) + private chart: IgxDataChartComponent + @ViewChild("xAxis", { static: true } ) + private xAxis: IgxCategoryXAxisComponent + @ViewChild("yAxis", { static: true } ) + private yAxis: IgxNumericYAxisComponent + @ViewChild("columnSeries1", { static: true } ) + private columnSeries1: IgxColumnSeriesComponent + @ViewChild("dataToolTipLayer", { static: true } ) + private dataToolTipLayer: IgxDataToolTipLayerComponent + private _olympicMedalsTopCountriesWithTotals: OlympicMedalsTopCountriesWithTotals = null; + public get olympicMedalsTopCountriesWithTotals(): OlympicMedalsTopCountriesWithTotals { + if (this._olympicMedalsTopCountriesWithTotals == null) + { + this._olympicMedalsTopCountriesWithTotals = new OlympicMedalsTopCountriesWithTotals(); + } + return this._olympicMedalsTopCountriesWithTotals; + } + + private _componentRenderer: ComponentRenderer = null; + public get renderer(): ComponentRenderer { + if (this._componentRenderer == null) { + this._componentRenderer = new ComponentRenderer(); + var context = this._componentRenderer.context; + LegendDescriptionModule.register(context); + NumberAbbreviatorDescriptionModule.register(context); + DataChartCoreDescriptionModule.register(context); + DataChartCategoryDescriptionModule.register(context); + DataChartInteractivityDescriptionModule.register(context); + DataLegendDescriptionModule.register(context); + DataChartAnnotationDescriptionModule.register(context); + } + return this._componentRenderer; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} + diff --git a/samples/charts/data-chart/data-legend-styling/src/app.module.ts b/samples/charts/data-chart/data-legend-styling/src/app.module.ts new file mode 100644 index 000000000..4014dfdbf --- /dev/null +++ b/samples/charts/data-chart/data-legend-styling/src/app.module.ts @@ -0,0 +1,31 @@ +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 { IgxLegendModule, IgxNumberAbbreviatorModule, IgxDataChartCoreModule, IgxDataChartCategoryModule, IgxDataChartInteractivityModule, IgxDataLegendModule, IgxDataChartAnnotationModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxLegendModule, + IgxNumberAbbreviatorModule, + IgxDataChartCoreModule, + IgxDataChartCategoryModule, + IgxDataChartInteractivityModule, + IgxDataLegendModule, + IgxDataChartAnnotationModule +], + providers: [], + schemas: [] +}) +export class AppModule {} diff --git a/samples/charts/data-chart/data-legend-styling/src/environments/environment.prod.ts b/samples/charts/data-chart/data-legend-styling/src/environments/environment.prod.ts new file mode 100644 index 000000000..3612073bc --- /dev/null +++ b/samples/charts/data-chart/data-legend-styling/src/environments/environment.prod.ts @@ -0,0 +1,3 @@ +export const environment = { + production: true +}; diff --git a/samples/charts/data-chart/data-legend-styling/src/environments/environment.ts b/samples/charts/data-chart/data-legend-styling/src/environments/environment.ts new file mode 100644 index 000000000..7b4f817ad --- /dev/null +++ b/samples/charts/data-chart/data-legend-styling/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/data-legend-styling/src/index.html b/samples/charts/data-chart/data-legend-styling/src/index.html new file mode 100644 index 000000000..7650dfb64 --- /dev/null +++ b/samples/charts/data-chart/data-legend-styling/src/index.html @@ -0,0 +1,23 @@ + + + + + + IgniteUI for Angular | Example | infragistics + + + + + + + + + + + + + + + + + diff --git a/samples/charts/data-chart/data-legend-styling/src/main.ts b/samples/charts/data-chart/data-legend-styling/src/main.ts new file mode 100644 index 000000000..ec9adcd4a --- /dev/null +++ b/samples/charts/data-chart/data-legend-styling/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/data-legend-styling/src/polyfills.ts b/samples/charts/data-chart/data-legend-styling/src/polyfills.ts new file mode 100644 index 000000000..d583cff9c --- /dev/null +++ b/samples/charts/data-chart/data-legend-styling/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"; // 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/data-legend-styling/src/styles.scss b/samples/charts/data-chart/data-legend-styling/src/styles.scss new file mode 100644 index 000000000..9b431e92d --- /dev/null +++ b/samples/charts/data-chart/data-legend-styling/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/data-legend-styling/src/typings.d.ts b/samples/charts/data-chart/data-legend-styling/src/typings.d.ts new file mode 100644 index 000000000..ef5c7bd62 --- /dev/null +++ b/samples/charts/data-chart/data-legend-styling/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/data-legend-styling/tsconfig.app.json b/samples/charts/data-chart/data-legend-styling/tsconfig.app.json new file mode 100644 index 000000000..ff396d4ce --- /dev/null +++ b/samples/charts/data-chart/data-legend-styling/tsconfig.app.json @@ -0,0 +1,10 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "./out-tsc/app", + "types": [] + }, + "files": ["src/main.ts", "src/polyfills.ts"], + "include": ["src/**/*.d.ts"] +} diff --git a/samples/charts/data-chart/data-legend-styling/tsconfig.json b/samples/charts/data-chart/data-legend-styling/tsconfig.json new file mode 100644 index 000000000..22d546ab3 --- /dev/null +++ b/samples/charts/data-chart/data-legend-styling/tsconfig.json @@ -0,0 +1,27 @@ +{ + "compileOnSave": false, + "compilerOptions": { + "importHelpers": true, + "module": "esnext", + "baseUrl": "./", + "outDir": "./dist/out-tsc", + "sourceMap": false, + "declaration": false, + "moduleResolution": "node", + "experimentalDecorators": true, + "resolveJsonModule": true, + "esModuleInterop": true, + "downlevelIteration": true, + "target": "es2015", + "typeRoots": [ + "node_modules/@types" + ], + "lib": [ + "es2018", + "dom" + ] + }, + "angularCompilerOptions": { + "enableIvy": true + } +} \ No newline at end of file diff --git a/samples/charts/data-chart/data-legend-styling/tslint.json b/samples/charts/data-chart/data-legend-styling/tslint.json new file mode 100644 index 000000000..777c777d9 --- /dev/null +++ b/samples/charts/data-chart/data-legend-styling/tslint.json @@ -0,0 +1,31 @@ +{ + "extends": "tslint:latest", + "rules": { + "deprecation": { + "severity": "warning" + }, + "arrow-parens": false, + "indent": [true, "spaces"], + "interface-name": [true, "always-prefix"], + "max-classes-per-file": false, + "no-bitwise": false, + "no-console": false, + "no-empty": false, + "no-duplicate-imports": false, + "no-implicit-dependencies": false, + "no-object-literal-type-assertion": false, + "no-submodule-imports": [false], + "no-string-literal": false, + "no-trailing-whitespace": false, + "no-var-keyword": false, + "object-literal-sort-keys": false, + "only-arrow-functions": false, + "prefer-conditional-expression": false, + "prefer-const": false, + "prefer-for-of": false, + "prefer-object-spread": false, + "space-within-parens": false, + "trailing-comma": [true, {"multiline": "never", "singleline": "never"}], + "variable-name": [true, "allow-leading-underscore"] + } +} diff --git a/samples/charts/data-chart/data-tooltip-grouping-and-highlighting/.codesandbox/Dockerfile b/samples/charts/data-chart/data-tooltip-grouping-and-highlighting/.codesandbox/Dockerfile new file mode 100644 index 000000000..adf04bd95 --- /dev/null +++ b/samples/charts/data-chart/data-tooltip-grouping-and-highlighting/.codesandbox/Dockerfile @@ -0,0 +1 @@ +FROM node:18 \ No newline at end of file diff --git a/samples/charts/data-chart/data-tooltip-grouping-and-highlighting/.codesandbox/tasks.json b/samples/charts/data-chart/data-tooltip-grouping-and-highlighting/.codesandbox/tasks.json new file mode 100644 index 000000000..8d92a54cd --- /dev/null +++ b/samples/charts/data-chart/data-tooltip-grouping-and-highlighting/.codesandbox/tasks.json @@ -0,0 +1,17 @@ +{ + // These tasks will run in order when initializing your CodeSandbox project. + "setupTasks": [ + { + "name": "Install Dependencies", + "command": "yarn install" + } + ], + // These tasks can be run from CodeSandbox. Running one will open a log in the app. + "tasks": { + "node node_modules/@angular/cli/bin/ng serve -o --disable-host-check": { + "name": "Start Project", + "command": "node node_modules/@angular/cli/bin/ng serve -o --disable-host-check", + "runAtStart": true + } + } +} \ No newline at end of file diff --git a/samples/charts/data-chart/data-tooltip-grouping-and-highlighting/.stackblitzrc b/samples/charts/data-chart/data-tooltip-grouping-and-highlighting/.stackblitzrc new file mode 100644 index 000000000..dd44ea00f --- /dev/null +++ b/samples/charts/data-chart/data-tooltip-grouping-and-highlighting/.stackblitzrc @@ -0,0 +1 @@ +{"installDependencies":true, "startCommand":"npm start"} \ No newline at end of file diff --git a/samples/charts/data-chart/data-tooltip-grouping-and-highlighting/angular.json b/samples/charts/data-chart/data-tooltip-grouping-and-highlighting/angular.json new file mode 100644 index 000000000..ff6803cf7 --- /dev/null +++ b/samples/charts/data-chart/data-tooltip-grouping-and-highlighting/angular.json @@ -0,0 +1,120 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "demo": { + "schematics": { + "@schematics/angular:component": { + "style": "scss" + }, + "@schematics/angular:application": { + "strict": true + } + }, + "root": "", + "sourceRoot": "src", + "prefix": "app", + "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": "tsconfig.app.json", + "inlineStyleLanguage": "scss", + "assets": [ + "src/assets" + ], + "styles": [ + "src/styles.scss" + ], + "scripts": [], + "stylePreprocessorOptions": { + "includePaths": ["node_modules/"] + } + }, + "configurations": { + "production": { + "fileReplacements": [ + { + "replace": "src/environments/environment.ts", + "with": "src/environments/environment.prod.ts" + } + ], + "outputHashing": "all", + "budgets": [ + { + "type": "initial", + "maximumWarning": "500kb", + "maximumError": "1mb" + }, + { + "type": "anyComponentStyle", + "maximumWarning": "2kb", + "maximumError": "4kb" + } + ] + }, + "development": { + "buildOptimizer": false, + "optimization": false, + "vendorChunk": true, + "extractLicenses": false, + "sourceMap": true, + "namedChunks": true + } + }, + "defaultConfiguration": "production" + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "configurations": { + "production": { + "buildTarget": "demo:build:production" + }, + "development": { + "buildTarget": "demo:build:development" + } + }, + "defaultConfiguration": "development" + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "buildTarget": "demo:build" + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "main": "src/test.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "tsconfig.spec.json", + "karmaConfig": "karma.conf.js", + "styles": [ + "src/styles.scss" + ], + "scripts": [], + "assets": [ + "src/assets" + ], + "inlineStyleLanguage": "scss", + "stylePreprocessorOptions": { + "includePaths": ["node_modules/"] + } + } + } + } + } + }, + "defaultProject": "demo", + "cli": { + "analytics": false + } +} diff --git a/samples/charts/data-chart/data-tooltip-grouping-and-highlighting/package.json b/samples/charts/data-chart/data-tooltip-grouping-and-highlighting/package.json new file mode 100644 index 000000000..b18743c2c --- /dev/null +++ b/samples/charts/data-chart/data-tooltip-grouping-and-highlighting/package.json @@ -0,0 +1,46 @@ +{ + "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": "^17.2.1", + "@angular/common": "^17.2.1", + "@angular/compiler": "^17.2.1", + "@angular/core": "^17.2.1", + "@angular/forms": "^17.2.1", + "@angular/platform-browser": "^17.2.1", + "@angular/platform-browser-dynamic": "^17.2.1", + "@types/hammerjs": "2.0.39", + "classlist.js": "1.1.20150312", + "core-js": "3.21.0", + "hammerjs": "^2.0.8", + "igniteui-angular-charts": "17.3.1-alpha.0", + "igniteui-angular-core": "17.3.1-alpha.0", + "igniteui-angular-inputs": "17.3.1-alpha.0", + "igniteui-angular-layouts": "17.3.1-alpha.0", + "intl": "1.2.5", + "jszip": "3.8.0", + "rxjs": "^7.8.1", + "tslib": "^2.6.1", + "web-animations-js": "2.3.2", + "zone.js": "~0.14.4" + }, + "devDependencies": { + "@angular/cli": "17.2.0", + "@angular/compiler-cli": "17.2.1", + "@angular/language-service": "17.2.1", + "@angular-devkit/build-angular": "17.2.0", + "@types/node": "18.17.0", + "codelyzer": "6.0.2", + "jasmine-core": "5.1.1", + "jasmine-spec-reporter": "~4.2.1", + "sass.js": "0.11.1", + "tslint": "~6.1.3", + "ts-node": "10.9.1", + "typescript": "5.3.3" + } +} diff --git a/samples/charts/data-chart/data-tooltip-grouping-and-highlighting/src/OlympicMedalsTopCountriesWithTotals.ts b/samples/charts/data-chart/data-tooltip-grouping-and-highlighting/src/OlympicMedalsTopCountriesWithTotals.ts new file mode 100644 index 000000000..63183e6f0 --- /dev/null +++ b/samples/charts/data-chart/data-tooltip-grouping-and-highlighting/src/OlympicMedalsTopCountriesWithTotals.ts @@ -0,0 +1,92 @@ +export class OlympicMedalsTopCountriesWithTotalsItem { + public constructor(init: Partial) { + Object.assign(this, init); + } + + public year: string; + public america: number; + public americaGold: number; + public china: number; + public chinaGold: number; + public russia: number; + public russiaGold: number; + public total: number; + +} +export class OlympicMedalsTopCountriesWithTotals extends Array { + public constructor(items: Array | number = -1) { + if (Array.isArray(items)) { + super(...items); + } else { + const newItems = [ + new OlympicMedalsTopCountriesWithTotalsItem( + { + year: `1996`, + america: 148, + americaGold: 50, + china: 110, + chinaGold: 40, + russia: 95, + russiaGold: 20, + total: 353 + }), + new OlympicMedalsTopCountriesWithTotalsItem( + { + year: `2000`, + america: 142, + americaGold: 40, + china: 115, + chinaGold: 45, + russia: 91, + russiaGold: 40, + total: 348 + }), + new OlympicMedalsTopCountriesWithTotalsItem( + { + year: `2004`, + america: 134, + americaGold: 35, + china: 121, + chinaGold: 55, + russia: 86, + russiaGold: 25, + total: 341 + }), + new OlympicMedalsTopCountriesWithTotalsItem( + { + year: `2008`, + america: 131, + americaGold: 20, + china: 129, + chinaGold: 35, + russia: 65, + russiaGold: 35, + total: 325 + }), + new OlympicMedalsTopCountriesWithTotalsItem( + { + year: `2012`, + america: 135, + americaGold: 25, + china: 115, + chinaGold: 50, + russia: 77, + russiaGold: 15, + total: 327 + }), + new OlympicMedalsTopCountriesWithTotalsItem( + { + year: `2016`, + america: 146, + americaGold: 45, + china: 112, + chinaGold: 45, + russia: 88, + russiaGold: 30, + total: 346 + }), + ]; + super(...(newItems.slice(0, items))); + } + } +} diff --git a/samples/charts/data-chart/data-tooltip-grouping-and-highlighting/src/app.component.html b/samples/charts/data-chart/data-tooltip-grouping-and-highlighting/src/app.component.html new file mode 100644 index 000000000..7e21a56ee --- /dev/null +++ b/samples/charts/data-chart/data-tooltip-grouping-and-highlighting/src/app.component.html @@ -0,0 +1,66 @@ +
+
+ + + + + + + + + + + + + + +
+
diff --git a/samples/charts/data-chart/data-tooltip-grouping-and-highlighting/src/app.component.scss b/samples/charts/data-chart/data-tooltip-grouping-and-highlighting/src/app.component.scss new file mode 100644 index 000000000..cbff781da --- /dev/null +++ b/samples/charts/data-chart/data-tooltip-grouping-and-highlighting/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/data-tooltip-grouping-and-highlighting/src/app.component.ts b/samples/charts/data-chart/data-tooltip-grouping-and-highlighting/src/app.component.ts new file mode 100644 index 000000000..883055c04 --- /dev/null +++ b/samples/charts/data-chart/data-tooltip-grouping-and-highlighting/src/app.component.ts @@ -0,0 +1,62 @@ +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { ComponentRenderer, PropertyEditorPanelDescriptionModule, DataChartCoreDescriptionModule, DataChartCategoryDescriptionModule, DataChartInteractivityDescriptionModule, DataChartAnnotationDescriptionModule } from 'igniteui-angular-core'; +import { OlympicMedalsTopCountriesWithTotalsItem, OlympicMedalsTopCountriesWithTotals } from './OlympicMedalsTopCountriesWithTotals'; +import { IgxDataChartComponent, IgxCategoryXAxisComponent, IgxNumericYAxisComponent, IgxColumnSeriesComponent, IgxDataToolTipLayerComponent } from 'igniteui-angular-charts'; + +@Component({ + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("chart", { static: true } ) + private chart: IgxDataChartComponent + @ViewChild("xAxis", { static: true } ) + private xAxis: IgxCategoryXAxisComponent + @ViewChild("yAxis", { static: true } ) + private yAxis: IgxNumericYAxisComponent + @ViewChild("columnSeries1", { static: true } ) + private columnSeries1: IgxColumnSeriesComponent + @ViewChild("columnSeries2", { static: true } ) + private columnSeries2: IgxColumnSeriesComponent + @ViewChild("columnSeries3", { static: true } ) + private columnSeries3: IgxColumnSeriesComponent + @ViewChild("dataToolTipLayer", { static: true } ) + private dataToolTipLayer: IgxDataToolTipLayerComponent + private _olympicMedalsTopCountriesWithTotals: OlympicMedalsTopCountriesWithTotals = null; + public get olympicMedalsTopCountriesWithTotals(): OlympicMedalsTopCountriesWithTotals { + if (this._olympicMedalsTopCountriesWithTotals == null) + { + this._olympicMedalsTopCountriesWithTotals = new OlympicMedalsTopCountriesWithTotals(); + } + return this._olympicMedalsTopCountriesWithTotals; + } + + private _componentRenderer: ComponentRenderer = null; + public get renderer(): ComponentRenderer { + if (this._componentRenderer == null) { + this._componentRenderer = new ComponentRenderer(); + var context = this._componentRenderer.context; + PropertyEditorPanelDescriptionModule.register(context); + DataChartCoreDescriptionModule.register(context); + DataChartCategoryDescriptionModule.register(context); + DataChartInteractivityDescriptionModule.register(context); + DataChartAnnotationDescriptionModule.register(context); + } + return this._componentRenderer; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} + diff --git a/samples/charts/data-chart/data-tooltip-grouping-and-highlighting/src/app.module.ts b/samples/charts/data-chart/data-tooltip-grouping-and-highlighting/src/app.module.ts new file mode 100644 index 000000000..f2aa4328f --- /dev/null +++ b/samples/charts/data-chart/data-tooltip-grouping-and-highlighting/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 { IgxPropertyEditorPanelModule } from 'igniteui-angular-layouts'; +import { IgxDataChartCoreModule, IgxDataChartCategoryModule, IgxDataChartInteractivityModule, IgxDataChartAnnotationModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxPropertyEditorPanelModule, + IgxDataChartCoreModule, + IgxDataChartCategoryModule, + IgxDataChartInteractivityModule, + IgxDataChartAnnotationModule +], + providers: [], + schemas: [] +}) +export class AppModule {} diff --git a/samples/charts/data-chart/data-tooltip-grouping-and-highlighting/src/environments/environment.prod.ts b/samples/charts/data-chart/data-tooltip-grouping-and-highlighting/src/environments/environment.prod.ts new file mode 100644 index 000000000..3612073bc --- /dev/null +++ b/samples/charts/data-chart/data-tooltip-grouping-and-highlighting/src/environments/environment.prod.ts @@ -0,0 +1,3 @@ +export const environment = { + production: true +}; diff --git a/samples/charts/data-chart/data-tooltip-grouping-and-highlighting/src/environments/environment.ts b/samples/charts/data-chart/data-tooltip-grouping-and-highlighting/src/environments/environment.ts new file mode 100644 index 000000000..7b4f817ad --- /dev/null +++ b/samples/charts/data-chart/data-tooltip-grouping-and-highlighting/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/data-tooltip-grouping-and-highlighting/src/index.html b/samples/charts/data-chart/data-tooltip-grouping-and-highlighting/src/index.html new file mode 100644 index 000000000..7650dfb64 --- /dev/null +++ b/samples/charts/data-chart/data-tooltip-grouping-and-highlighting/src/index.html @@ -0,0 +1,23 @@ + + + + + + IgniteUI for Angular | Example | infragistics + + + + + + + + + + + + + + + + + diff --git a/samples/charts/data-chart/data-tooltip-grouping-and-highlighting/src/main.ts b/samples/charts/data-chart/data-tooltip-grouping-and-highlighting/src/main.ts new file mode 100644 index 000000000..ec9adcd4a --- /dev/null +++ b/samples/charts/data-chart/data-tooltip-grouping-and-highlighting/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/data-tooltip-grouping-and-highlighting/src/polyfills.ts b/samples/charts/data-chart/data-tooltip-grouping-and-highlighting/src/polyfills.ts new file mode 100644 index 000000000..d583cff9c --- /dev/null +++ b/samples/charts/data-chart/data-tooltip-grouping-and-highlighting/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"; // 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/data-tooltip-grouping-and-highlighting/src/styles.scss b/samples/charts/data-chart/data-tooltip-grouping-and-highlighting/src/styles.scss new file mode 100644 index 000000000..9b431e92d --- /dev/null +++ b/samples/charts/data-chart/data-tooltip-grouping-and-highlighting/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/data-tooltip-grouping-and-highlighting/src/typings.d.ts b/samples/charts/data-chart/data-tooltip-grouping-and-highlighting/src/typings.d.ts new file mode 100644 index 000000000..ef5c7bd62 --- /dev/null +++ b/samples/charts/data-chart/data-tooltip-grouping-and-highlighting/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/data-tooltip-grouping-and-highlighting/tsconfig.app.json b/samples/charts/data-chart/data-tooltip-grouping-and-highlighting/tsconfig.app.json new file mode 100644 index 000000000..ff396d4ce --- /dev/null +++ b/samples/charts/data-chart/data-tooltip-grouping-and-highlighting/tsconfig.app.json @@ -0,0 +1,10 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "./out-tsc/app", + "types": [] + }, + "files": ["src/main.ts", "src/polyfills.ts"], + "include": ["src/**/*.d.ts"] +} diff --git a/samples/charts/data-chart/data-tooltip-grouping-and-highlighting/tsconfig.json b/samples/charts/data-chart/data-tooltip-grouping-and-highlighting/tsconfig.json new file mode 100644 index 000000000..22d546ab3 --- /dev/null +++ b/samples/charts/data-chart/data-tooltip-grouping-and-highlighting/tsconfig.json @@ -0,0 +1,27 @@ +{ + "compileOnSave": false, + "compilerOptions": { + "importHelpers": true, + "module": "esnext", + "baseUrl": "./", + "outDir": "./dist/out-tsc", + "sourceMap": false, + "declaration": false, + "moduleResolution": "node", + "experimentalDecorators": true, + "resolveJsonModule": true, + "esModuleInterop": true, + "downlevelIteration": true, + "target": "es2015", + "typeRoots": [ + "node_modules/@types" + ], + "lib": [ + "es2018", + "dom" + ] + }, + "angularCompilerOptions": { + "enableIvy": true + } +} \ No newline at end of file diff --git a/samples/charts/data-chart/data-tooltip-grouping-and-highlighting/tslint.json b/samples/charts/data-chart/data-tooltip-grouping-and-highlighting/tslint.json new file mode 100644 index 000000000..777c777d9 --- /dev/null +++ b/samples/charts/data-chart/data-tooltip-grouping-and-highlighting/tslint.json @@ -0,0 +1,31 @@ +{ + "extends": "tslint:latest", + "rules": { + "deprecation": { + "severity": "warning" + }, + "arrow-parens": false, + "indent": [true, "spaces"], + "interface-name": [true, "always-prefix"], + "max-classes-per-file": false, + "no-bitwise": false, + "no-console": false, + "no-empty": false, + "no-duplicate-imports": false, + "no-implicit-dependencies": false, + "no-object-literal-type-assertion": false, + "no-submodule-imports": [false], + "no-string-literal": false, + "no-trailing-whitespace": false, + "no-var-keyword": false, + "object-literal-sort-keys": false, + "only-arrow-functions": false, + "prefer-conditional-expression": false, + "prefer-const": false, + "prefer-for-of": false, + "prefer-object-spread": false, + "space-within-parens": false, + "trailing-comma": [true, {"multiline": "never", "singleline": "never"}], + "variable-name": [true, "allow-leading-underscore"] + } +} diff --git a/samples/charts/data-chart/data-tooltip-grouping/.codesandbox/Dockerfile b/samples/charts/data-chart/data-tooltip-grouping/.codesandbox/Dockerfile new file mode 100644 index 000000000..adf04bd95 --- /dev/null +++ b/samples/charts/data-chart/data-tooltip-grouping/.codesandbox/Dockerfile @@ -0,0 +1 @@ +FROM node:18 \ No newline at end of file diff --git a/samples/charts/data-chart/data-tooltip-grouping/.codesandbox/tasks.json b/samples/charts/data-chart/data-tooltip-grouping/.codesandbox/tasks.json new file mode 100644 index 000000000..8d92a54cd --- /dev/null +++ b/samples/charts/data-chart/data-tooltip-grouping/.codesandbox/tasks.json @@ -0,0 +1,17 @@ +{ + // These tasks will run in order when initializing your CodeSandbox project. + "setupTasks": [ + { + "name": "Install Dependencies", + "command": "yarn install" + } + ], + // These tasks can be run from CodeSandbox. Running one will open a log in the app. + "tasks": { + "node node_modules/@angular/cli/bin/ng serve -o --disable-host-check": { + "name": "Start Project", + "command": "node node_modules/@angular/cli/bin/ng serve -o --disable-host-check", + "runAtStart": true + } + } +} \ No newline at end of file diff --git a/samples/charts/data-chart/data-tooltip-grouping/.stackblitzrc b/samples/charts/data-chart/data-tooltip-grouping/.stackblitzrc new file mode 100644 index 000000000..dd44ea00f --- /dev/null +++ b/samples/charts/data-chart/data-tooltip-grouping/.stackblitzrc @@ -0,0 +1 @@ +{"installDependencies":true, "startCommand":"npm start"} \ No newline at end of file diff --git a/samples/charts/data-chart/data-tooltip-grouping/angular.json b/samples/charts/data-chart/data-tooltip-grouping/angular.json new file mode 100644 index 000000000..ff6803cf7 --- /dev/null +++ b/samples/charts/data-chart/data-tooltip-grouping/angular.json @@ -0,0 +1,120 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "demo": { + "schematics": { + "@schematics/angular:component": { + "style": "scss" + }, + "@schematics/angular:application": { + "strict": true + } + }, + "root": "", + "sourceRoot": "src", + "prefix": "app", + "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": "tsconfig.app.json", + "inlineStyleLanguage": "scss", + "assets": [ + "src/assets" + ], + "styles": [ + "src/styles.scss" + ], + "scripts": [], + "stylePreprocessorOptions": { + "includePaths": ["node_modules/"] + } + }, + "configurations": { + "production": { + "fileReplacements": [ + { + "replace": "src/environments/environment.ts", + "with": "src/environments/environment.prod.ts" + } + ], + "outputHashing": "all", + "budgets": [ + { + "type": "initial", + "maximumWarning": "500kb", + "maximumError": "1mb" + }, + { + "type": "anyComponentStyle", + "maximumWarning": "2kb", + "maximumError": "4kb" + } + ] + }, + "development": { + "buildOptimizer": false, + "optimization": false, + "vendorChunk": true, + "extractLicenses": false, + "sourceMap": true, + "namedChunks": true + } + }, + "defaultConfiguration": "production" + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "configurations": { + "production": { + "buildTarget": "demo:build:production" + }, + "development": { + "buildTarget": "demo:build:development" + } + }, + "defaultConfiguration": "development" + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "buildTarget": "demo:build" + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "main": "src/test.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "tsconfig.spec.json", + "karmaConfig": "karma.conf.js", + "styles": [ + "src/styles.scss" + ], + "scripts": [], + "assets": [ + "src/assets" + ], + "inlineStyleLanguage": "scss", + "stylePreprocessorOptions": { + "includePaths": ["node_modules/"] + } + } + } + } + } + }, + "defaultProject": "demo", + "cli": { + "analytics": false + } +} diff --git a/samples/charts/data-chart/data-tooltip-grouping/package.json b/samples/charts/data-chart/data-tooltip-grouping/package.json new file mode 100644 index 000000000..b18743c2c --- /dev/null +++ b/samples/charts/data-chart/data-tooltip-grouping/package.json @@ -0,0 +1,46 @@ +{ + "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": "^17.2.1", + "@angular/common": "^17.2.1", + "@angular/compiler": "^17.2.1", + "@angular/core": "^17.2.1", + "@angular/forms": "^17.2.1", + "@angular/platform-browser": "^17.2.1", + "@angular/platform-browser-dynamic": "^17.2.1", + "@types/hammerjs": "2.0.39", + "classlist.js": "1.1.20150312", + "core-js": "3.21.0", + "hammerjs": "^2.0.8", + "igniteui-angular-charts": "17.3.1-alpha.0", + "igniteui-angular-core": "17.3.1-alpha.0", + "igniteui-angular-inputs": "17.3.1-alpha.0", + "igniteui-angular-layouts": "17.3.1-alpha.0", + "intl": "1.2.5", + "jszip": "3.8.0", + "rxjs": "^7.8.1", + "tslib": "^2.6.1", + "web-animations-js": "2.3.2", + "zone.js": "~0.14.4" + }, + "devDependencies": { + "@angular/cli": "17.2.0", + "@angular/compiler-cli": "17.2.1", + "@angular/language-service": "17.2.1", + "@angular-devkit/build-angular": "17.2.0", + "@types/node": "18.17.0", + "codelyzer": "6.0.2", + "jasmine-core": "5.1.1", + "jasmine-spec-reporter": "~4.2.1", + "sass.js": "0.11.1", + "tslint": "~6.1.3", + "ts-node": "10.9.1", + "typescript": "5.3.3" + } +} diff --git a/samples/charts/data-chart/data-tooltip-grouping/src/OlympicMedalsTopCountriesWithTotals.ts b/samples/charts/data-chart/data-tooltip-grouping/src/OlympicMedalsTopCountriesWithTotals.ts new file mode 100644 index 000000000..63183e6f0 --- /dev/null +++ b/samples/charts/data-chart/data-tooltip-grouping/src/OlympicMedalsTopCountriesWithTotals.ts @@ -0,0 +1,92 @@ +export class OlympicMedalsTopCountriesWithTotalsItem { + public constructor(init: Partial) { + Object.assign(this, init); + } + + public year: string; + public america: number; + public americaGold: number; + public china: number; + public chinaGold: number; + public russia: number; + public russiaGold: number; + public total: number; + +} +export class OlympicMedalsTopCountriesWithTotals extends Array { + public constructor(items: Array | number = -1) { + if (Array.isArray(items)) { + super(...items); + } else { + const newItems = [ + new OlympicMedalsTopCountriesWithTotalsItem( + { + year: `1996`, + america: 148, + americaGold: 50, + china: 110, + chinaGold: 40, + russia: 95, + russiaGold: 20, + total: 353 + }), + new OlympicMedalsTopCountriesWithTotalsItem( + { + year: `2000`, + america: 142, + americaGold: 40, + china: 115, + chinaGold: 45, + russia: 91, + russiaGold: 40, + total: 348 + }), + new OlympicMedalsTopCountriesWithTotalsItem( + { + year: `2004`, + america: 134, + americaGold: 35, + china: 121, + chinaGold: 55, + russia: 86, + russiaGold: 25, + total: 341 + }), + new OlympicMedalsTopCountriesWithTotalsItem( + { + year: `2008`, + america: 131, + americaGold: 20, + china: 129, + chinaGold: 35, + russia: 65, + russiaGold: 35, + total: 325 + }), + new OlympicMedalsTopCountriesWithTotalsItem( + { + year: `2012`, + america: 135, + americaGold: 25, + china: 115, + chinaGold: 50, + russia: 77, + russiaGold: 15, + total: 327 + }), + new OlympicMedalsTopCountriesWithTotalsItem( + { + year: `2016`, + america: 146, + americaGold: 45, + china: 112, + chinaGold: 45, + russia: 88, + russiaGold: 30, + total: 346 + }), + ]; + super(...(newItems.slice(0, items))); + } + } +} diff --git a/samples/charts/data-chart/data-tooltip-grouping/src/app.component.html b/samples/charts/data-chart/data-tooltip-grouping/src/app.component.html new file mode 100644 index 000000000..7522afd73 --- /dev/null +++ b/samples/charts/data-chart/data-tooltip-grouping/src/app.component.html @@ -0,0 +1,56 @@ +
+
+ + + + + + + + + + + + + + +
+
diff --git a/samples/charts/data-chart/data-tooltip-grouping/src/app.component.scss b/samples/charts/data-chart/data-tooltip-grouping/src/app.component.scss new file mode 100644 index 000000000..cbff781da --- /dev/null +++ b/samples/charts/data-chart/data-tooltip-grouping/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/data-tooltip-grouping/src/app.component.ts b/samples/charts/data-chart/data-tooltip-grouping/src/app.component.ts new file mode 100644 index 000000000..883055c04 --- /dev/null +++ b/samples/charts/data-chart/data-tooltip-grouping/src/app.component.ts @@ -0,0 +1,62 @@ +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { ComponentRenderer, PropertyEditorPanelDescriptionModule, DataChartCoreDescriptionModule, DataChartCategoryDescriptionModule, DataChartInteractivityDescriptionModule, DataChartAnnotationDescriptionModule } from 'igniteui-angular-core'; +import { OlympicMedalsTopCountriesWithTotalsItem, OlympicMedalsTopCountriesWithTotals } from './OlympicMedalsTopCountriesWithTotals'; +import { IgxDataChartComponent, IgxCategoryXAxisComponent, IgxNumericYAxisComponent, IgxColumnSeriesComponent, IgxDataToolTipLayerComponent } from 'igniteui-angular-charts'; + +@Component({ + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("chart", { static: true } ) + private chart: IgxDataChartComponent + @ViewChild("xAxis", { static: true } ) + private xAxis: IgxCategoryXAxisComponent + @ViewChild("yAxis", { static: true } ) + private yAxis: IgxNumericYAxisComponent + @ViewChild("columnSeries1", { static: true } ) + private columnSeries1: IgxColumnSeriesComponent + @ViewChild("columnSeries2", { static: true } ) + private columnSeries2: IgxColumnSeriesComponent + @ViewChild("columnSeries3", { static: true } ) + private columnSeries3: IgxColumnSeriesComponent + @ViewChild("dataToolTipLayer", { static: true } ) + private dataToolTipLayer: IgxDataToolTipLayerComponent + private _olympicMedalsTopCountriesWithTotals: OlympicMedalsTopCountriesWithTotals = null; + public get olympicMedalsTopCountriesWithTotals(): OlympicMedalsTopCountriesWithTotals { + if (this._olympicMedalsTopCountriesWithTotals == null) + { + this._olympicMedalsTopCountriesWithTotals = new OlympicMedalsTopCountriesWithTotals(); + } + return this._olympicMedalsTopCountriesWithTotals; + } + + private _componentRenderer: ComponentRenderer = null; + public get renderer(): ComponentRenderer { + if (this._componentRenderer == null) { + this._componentRenderer = new ComponentRenderer(); + var context = this._componentRenderer.context; + PropertyEditorPanelDescriptionModule.register(context); + DataChartCoreDescriptionModule.register(context); + DataChartCategoryDescriptionModule.register(context); + DataChartInteractivityDescriptionModule.register(context); + DataChartAnnotationDescriptionModule.register(context); + } + return this._componentRenderer; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} + diff --git a/samples/charts/data-chart/data-tooltip-grouping/src/app.module.ts b/samples/charts/data-chart/data-tooltip-grouping/src/app.module.ts new file mode 100644 index 000000000..f2aa4328f --- /dev/null +++ b/samples/charts/data-chart/data-tooltip-grouping/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 { IgxPropertyEditorPanelModule } from 'igniteui-angular-layouts'; +import { IgxDataChartCoreModule, IgxDataChartCategoryModule, IgxDataChartInteractivityModule, IgxDataChartAnnotationModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxPropertyEditorPanelModule, + IgxDataChartCoreModule, + IgxDataChartCategoryModule, + IgxDataChartInteractivityModule, + IgxDataChartAnnotationModule +], + providers: [], + schemas: [] +}) +export class AppModule {} diff --git a/samples/charts/data-chart/data-tooltip-grouping/src/environments/environment.prod.ts b/samples/charts/data-chart/data-tooltip-grouping/src/environments/environment.prod.ts new file mode 100644 index 000000000..3612073bc --- /dev/null +++ b/samples/charts/data-chart/data-tooltip-grouping/src/environments/environment.prod.ts @@ -0,0 +1,3 @@ +export const environment = { + production: true +}; diff --git a/samples/charts/data-chart/data-tooltip-grouping/src/environments/environment.ts b/samples/charts/data-chart/data-tooltip-grouping/src/environments/environment.ts new file mode 100644 index 000000000..7b4f817ad --- /dev/null +++ b/samples/charts/data-chart/data-tooltip-grouping/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/data-tooltip-grouping/src/index.html b/samples/charts/data-chart/data-tooltip-grouping/src/index.html new file mode 100644 index 000000000..7650dfb64 --- /dev/null +++ b/samples/charts/data-chart/data-tooltip-grouping/src/index.html @@ -0,0 +1,23 @@ + + + + + + IgniteUI for Angular | Example | infragistics + + + + + + + + + + + + + + + + + diff --git a/samples/charts/data-chart/data-tooltip-grouping/src/main.ts b/samples/charts/data-chart/data-tooltip-grouping/src/main.ts new file mode 100644 index 000000000..ec9adcd4a --- /dev/null +++ b/samples/charts/data-chart/data-tooltip-grouping/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/data-tooltip-grouping/src/polyfills.ts b/samples/charts/data-chart/data-tooltip-grouping/src/polyfills.ts new file mode 100644 index 000000000..d583cff9c --- /dev/null +++ b/samples/charts/data-chart/data-tooltip-grouping/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"; // 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/data-tooltip-grouping/src/styles.scss b/samples/charts/data-chart/data-tooltip-grouping/src/styles.scss new file mode 100644 index 000000000..9b431e92d --- /dev/null +++ b/samples/charts/data-chart/data-tooltip-grouping/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/data-tooltip-grouping/src/typings.d.ts b/samples/charts/data-chart/data-tooltip-grouping/src/typings.d.ts new file mode 100644 index 000000000..ef5c7bd62 --- /dev/null +++ b/samples/charts/data-chart/data-tooltip-grouping/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/data-tooltip-grouping/tsconfig.app.json b/samples/charts/data-chart/data-tooltip-grouping/tsconfig.app.json new file mode 100644 index 000000000..ff396d4ce --- /dev/null +++ b/samples/charts/data-chart/data-tooltip-grouping/tsconfig.app.json @@ -0,0 +1,10 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "./out-tsc/app", + "types": [] + }, + "files": ["src/main.ts", "src/polyfills.ts"], + "include": ["src/**/*.d.ts"] +} diff --git a/samples/charts/data-chart/data-tooltip-grouping/tsconfig.json b/samples/charts/data-chart/data-tooltip-grouping/tsconfig.json new file mode 100644 index 000000000..22d546ab3 --- /dev/null +++ b/samples/charts/data-chart/data-tooltip-grouping/tsconfig.json @@ -0,0 +1,27 @@ +{ + "compileOnSave": false, + "compilerOptions": { + "importHelpers": true, + "module": "esnext", + "baseUrl": "./", + "outDir": "./dist/out-tsc", + "sourceMap": false, + "declaration": false, + "moduleResolution": "node", + "experimentalDecorators": true, + "resolveJsonModule": true, + "esModuleInterop": true, + "downlevelIteration": true, + "target": "es2015", + "typeRoots": [ + "node_modules/@types" + ], + "lib": [ + "es2018", + "dom" + ] + }, + "angularCompilerOptions": { + "enableIvy": true + } +} \ No newline at end of file diff --git a/samples/charts/data-chart/data-tooltip-grouping/tslint.json b/samples/charts/data-chart/data-tooltip-grouping/tslint.json new file mode 100644 index 000000000..777c777d9 --- /dev/null +++ b/samples/charts/data-chart/data-tooltip-grouping/tslint.json @@ -0,0 +1,31 @@ +{ + "extends": "tslint:latest", + "rules": { + "deprecation": { + "severity": "warning" + }, + "arrow-parens": false, + "indent": [true, "spaces"], + "interface-name": [true, "always-prefix"], + "max-classes-per-file": false, + "no-bitwise": false, + "no-console": false, + "no-empty": false, + "no-duplicate-imports": false, + "no-implicit-dependencies": false, + "no-object-literal-type-assertion": false, + "no-submodule-imports": [false], + "no-string-literal": false, + "no-trailing-whitespace": false, + "no-var-keyword": false, + "object-literal-sort-keys": false, + "only-arrow-functions": false, + "prefer-conditional-expression": false, + "prefer-const": false, + "prefer-for-of": false, + "prefer-object-spread": false, + "space-within-parens": false, + "trailing-comma": [true, {"multiline": "never", "singleline": "never"}], + "variable-name": [true, "allow-leading-underscore"] + } +} diff --git a/samples/charts/data-chart/data-tooltip-styling/.codesandbox/Dockerfile b/samples/charts/data-chart/data-tooltip-styling/.codesandbox/Dockerfile new file mode 100644 index 000000000..adf04bd95 --- /dev/null +++ b/samples/charts/data-chart/data-tooltip-styling/.codesandbox/Dockerfile @@ -0,0 +1 @@ +FROM node:18 \ No newline at end of file diff --git a/samples/charts/data-chart/data-tooltip-styling/.codesandbox/tasks.json b/samples/charts/data-chart/data-tooltip-styling/.codesandbox/tasks.json new file mode 100644 index 000000000..8d92a54cd --- /dev/null +++ b/samples/charts/data-chart/data-tooltip-styling/.codesandbox/tasks.json @@ -0,0 +1,17 @@ +{ + // These tasks will run in order when initializing your CodeSandbox project. + "setupTasks": [ + { + "name": "Install Dependencies", + "command": "yarn install" + } + ], + // These tasks can be run from CodeSandbox. Running one will open a log in the app. + "tasks": { + "node node_modules/@angular/cli/bin/ng serve -o --disable-host-check": { + "name": "Start Project", + "command": "node node_modules/@angular/cli/bin/ng serve -o --disable-host-check", + "runAtStart": true + } + } +} \ No newline at end of file diff --git a/samples/charts/data-chart/data-tooltip-styling/.stackblitzrc b/samples/charts/data-chart/data-tooltip-styling/.stackblitzrc new file mode 100644 index 000000000..dd44ea00f --- /dev/null +++ b/samples/charts/data-chart/data-tooltip-styling/.stackblitzrc @@ -0,0 +1 @@ +{"installDependencies":true, "startCommand":"npm start"} \ No newline at end of file diff --git a/samples/charts/data-chart/data-tooltip-styling/angular.json b/samples/charts/data-chart/data-tooltip-styling/angular.json new file mode 100644 index 000000000..ff6803cf7 --- /dev/null +++ b/samples/charts/data-chart/data-tooltip-styling/angular.json @@ -0,0 +1,120 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "demo": { + "schematics": { + "@schematics/angular:component": { + "style": "scss" + }, + "@schematics/angular:application": { + "strict": true + } + }, + "root": "", + "sourceRoot": "src", + "prefix": "app", + "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": "tsconfig.app.json", + "inlineStyleLanguage": "scss", + "assets": [ + "src/assets" + ], + "styles": [ + "src/styles.scss" + ], + "scripts": [], + "stylePreprocessorOptions": { + "includePaths": ["node_modules/"] + } + }, + "configurations": { + "production": { + "fileReplacements": [ + { + "replace": "src/environments/environment.ts", + "with": "src/environments/environment.prod.ts" + } + ], + "outputHashing": "all", + "budgets": [ + { + "type": "initial", + "maximumWarning": "500kb", + "maximumError": "1mb" + }, + { + "type": "anyComponentStyle", + "maximumWarning": "2kb", + "maximumError": "4kb" + } + ] + }, + "development": { + "buildOptimizer": false, + "optimization": false, + "vendorChunk": true, + "extractLicenses": false, + "sourceMap": true, + "namedChunks": true + } + }, + "defaultConfiguration": "production" + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "configurations": { + "production": { + "buildTarget": "demo:build:production" + }, + "development": { + "buildTarget": "demo:build:development" + } + }, + "defaultConfiguration": "development" + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "buildTarget": "demo:build" + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "main": "src/test.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "tsconfig.spec.json", + "karmaConfig": "karma.conf.js", + "styles": [ + "src/styles.scss" + ], + "scripts": [], + "assets": [ + "src/assets" + ], + "inlineStyleLanguage": "scss", + "stylePreprocessorOptions": { + "includePaths": ["node_modules/"] + } + } + } + } + } + }, + "defaultProject": "demo", + "cli": { + "analytics": false + } +} diff --git a/samples/charts/data-chart/data-tooltip-styling/package.json b/samples/charts/data-chart/data-tooltip-styling/package.json new file mode 100644 index 000000000..b18743c2c --- /dev/null +++ b/samples/charts/data-chart/data-tooltip-styling/package.json @@ -0,0 +1,46 @@ +{ + "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": "^17.2.1", + "@angular/common": "^17.2.1", + "@angular/compiler": "^17.2.1", + "@angular/core": "^17.2.1", + "@angular/forms": "^17.2.1", + "@angular/platform-browser": "^17.2.1", + "@angular/platform-browser-dynamic": "^17.2.1", + "@types/hammerjs": "2.0.39", + "classlist.js": "1.1.20150312", + "core-js": "3.21.0", + "hammerjs": "^2.0.8", + "igniteui-angular-charts": "17.3.1-alpha.0", + "igniteui-angular-core": "17.3.1-alpha.0", + "igniteui-angular-inputs": "17.3.1-alpha.0", + "igniteui-angular-layouts": "17.3.1-alpha.0", + "intl": "1.2.5", + "jszip": "3.8.0", + "rxjs": "^7.8.1", + "tslib": "^2.6.1", + "web-animations-js": "2.3.2", + "zone.js": "~0.14.4" + }, + "devDependencies": { + "@angular/cli": "17.2.0", + "@angular/compiler-cli": "17.2.1", + "@angular/language-service": "17.2.1", + "@angular-devkit/build-angular": "17.2.0", + "@types/node": "18.17.0", + "codelyzer": "6.0.2", + "jasmine-core": "5.1.1", + "jasmine-spec-reporter": "~4.2.1", + "sass.js": "0.11.1", + "tslint": "~6.1.3", + "ts-node": "10.9.1", + "typescript": "5.3.3" + } +} diff --git a/samples/charts/data-chart/data-tooltip-styling/src/OlympicMedalsTopCountriesWithTotals.ts b/samples/charts/data-chart/data-tooltip-styling/src/OlympicMedalsTopCountriesWithTotals.ts new file mode 100644 index 000000000..63183e6f0 --- /dev/null +++ b/samples/charts/data-chart/data-tooltip-styling/src/OlympicMedalsTopCountriesWithTotals.ts @@ -0,0 +1,92 @@ +export class OlympicMedalsTopCountriesWithTotalsItem { + public constructor(init: Partial) { + Object.assign(this, init); + } + + public year: string; + public america: number; + public americaGold: number; + public china: number; + public chinaGold: number; + public russia: number; + public russiaGold: number; + public total: number; + +} +export class OlympicMedalsTopCountriesWithTotals extends Array { + public constructor(items: Array | number = -1) { + if (Array.isArray(items)) { + super(...items); + } else { + const newItems = [ + new OlympicMedalsTopCountriesWithTotalsItem( + { + year: `1996`, + america: 148, + americaGold: 50, + china: 110, + chinaGold: 40, + russia: 95, + russiaGold: 20, + total: 353 + }), + new OlympicMedalsTopCountriesWithTotalsItem( + { + year: `2000`, + america: 142, + americaGold: 40, + china: 115, + chinaGold: 45, + russia: 91, + russiaGold: 40, + total: 348 + }), + new OlympicMedalsTopCountriesWithTotalsItem( + { + year: `2004`, + america: 134, + americaGold: 35, + china: 121, + chinaGold: 55, + russia: 86, + russiaGold: 25, + total: 341 + }), + new OlympicMedalsTopCountriesWithTotalsItem( + { + year: `2008`, + america: 131, + americaGold: 20, + china: 129, + chinaGold: 35, + russia: 65, + russiaGold: 35, + total: 325 + }), + new OlympicMedalsTopCountriesWithTotalsItem( + { + year: `2012`, + america: 135, + americaGold: 25, + china: 115, + chinaGold: 50, + russia: 77, + russiaGold: 15, + total: 327 + }), + new OlympicMedalsTopCountriesWithTotalsItem( + { + year: `2016`, + america: 146, + americaGold: 45, + china: 112, + chinaGold: 45, + russia: 88, + russiaGold: 30, + total: 346 + }), + ]; + super(...(newItems.slice(0, items))); + } + } +} diff --git a/samples/charts/data-chart/data-tooltip-styling/src/app.component.html b/samples/charts/data-chart/data-tooltip-styling/src/app.component.html new file mode 100644 index 000000000..7df3aecb4 --- /dev/null +++ b/samples/charts/data-chart/data-tooltip-styling/src/app.component.html @@ -0,0 +1,42 @@ +
+
+ + + + + + + + + + +
+
diff --git a/samples/charts/data-chart/data-tooltip-styling/src/app.component.scss b/samples/charts/data-chart/data-tooltip-styling/src/app.component.scss new file mode 100644 index 000000000..cbff781da --- /dev/null +++ b/samples/charts/data-chart/data-tooltip-styling/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/data-tooltip-styling/src/app.component.ts b/samples/charts/data-chart/data-tooltip-styling/src/app.component.ts new file mode 100644 index 000000000..c898f34f9 --- /dev/null +++ b/samples/charts/data-chart/data-tooltip-styling/src/app.component.ts @@ -0,0 +1,58 @@ +import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; +import { ComponentRenderer, PropertyEditorPanelDescriptionModule, DataChartCoreDescriptionModule, DataChartCategoryDescriptionModule, DataChartInteractivityDescriptionModule, DataChartAnnotationDescriptionModule } from 'igniteui-angular-core'; +import { OlympicMedalsTopCountriesWithTotalsItem, OlympicMedalsTopCountriesWithTotals } from './OlympicMedalsTopCountriesWithTotals'; +import { IgxDataChartComponent, IgxCategoryXAxisComponent, IgxNumericYAxisComponent, IgxColumnSeriesComponent, IgxDataToolTipLayerComponent } from 'igniteui-angular-charts'; + +@Component({ + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) + +export class AppComponent implements AfterViewInit +{ + + @ViewChild("chart", { static: true } ) + private chart: IgxDataChartComponent + @ViewChild("xAxis", { static: true } ) + private xAxis: IgxCategoryXAxisComponent + @ViewChild("yAxis", { static: true } ) + private yAxis: IgxNumericYAxisComponent + @ViewChild("columnSeries1", { static: true } ) + private columnSeries1: IgxColumnSeriesComponent + @ViewChild("dataToolTipLayer", { static: true } ) + private dataToolTipLayer: IgxDataToolTipLayerComponent + private _olympicMedalsTopCountriesWithTotals: OlympicMedalsTopCountriesWithTotals = null; + public get olympicMedalsTopCountriesWithTotals(): OlympicMedalsTopCountriesWithTotals { + if (this._olympicMedalsTopCountriesWithTotals == null) + { + this._olympicMedalsTopCountriesWithTotals = new OlympicMedalsTopCountriesWithTotals(); + } + return this._olympicMedalsTopCountriesWithTotals; + } + + private _componentRenderer: ComponentRenderer = null; + public get renderer(): ComponentRenderer { + if (this._componentRenderer == null) { + this._componentRenderer = new ComponentRenderer(); + var context = this._componentRenderer.context; + PropertyEditorPanelDescriptionModule.register(context); + DataChartCoreDescriptionModule.register(context); + DataChartCategoryDescriptionModule.register(context); + DataChartInteractivityDescriptionModule.register(context); + DataChartAnnotationDescriptionModule.register(context); + } + return this._componentRenderer; + } + + public constructor(private _detector: ChangeDetectorRef) + { + } + + public ngAfterViewInit(): void + { + } + +} + diff --git a/samples/charts/data-chart/data-tooltip-styling/src/app.module.ts b/samples/charts/data-chart/data-tooltip-styling/src/app.module.ts new file mode 100644 index 000000000..f2aa4328f --- /dev/null +++ b/samples/charts/data-chart/data-tooltip-styling/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 { IgxPropertyEditorPanelModule } from 'igniteui-angular-layouts'; +import { IgxDataChartCoreModule, IgxDataChartCategoryModule, IgxDataChartInteractivityModule, IgxDataChartAnnotationModule } from 'igniteui-angular-charts'; + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxPropertyEditorPanelModule, + IgxDataChartCoreModule, + IgxDataChartCategoryModule, + IgxDataChartInteractivityModule, + IgxDataChartAnnotationModule +], + providers: [], + schemas: [] +}) +export class AppModule {} diff --git a/samples/charts/data-chart/data-tooltip-styling/src/environments/environment.prod.ts b/samples/charts/data-chart/data-tooltip-styling/src/environments/environment.prod.ts new file mode 100644 index 000000000..3612073bc --- /dev/null +++ b/samples/charts/data-chart/data-tooltip-styling/src/environments/environment.prod.ts @@ -0,0 +1,3 @@ +export const environment = { + production: true +}; diff --git a/samples/charts/data-chart/data-tooltip-styling/src/environments/environment.ts b/samples/charts/data-chart/data-tooltip-styling/src/environments/environment.ts new file mode 100644 index 000000000..7b4f817ad --- /dev/null +++ b/samples/charts/data-chart/data-tooltip-styling/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/data-tooltip-styling/src/index.html b/samples/charts/data-chart/data-tooltip-styling/src/index.html new file mode 100644 index 000000000..7650dfb64 --- /dev/null +++ b/samples/charts/data-chart/data-tooltip-styling/src/index.html @@ -0,0 +1,23 @@ + + + + + + IgniteUI for Angular | Example | infragistics + + + + + + + + + + + + + + + + + diff --git a/samples/charts/data-chart/data-tooltip-styling/src/main.ts b/samples/charts/data-chart/data-tooltip-styling/src/main.ts new file mode 100644 index 000000000..ec9adcd4a --- /dev/null +++ b/samples/charts/data-chart/data-tooltip-styling/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/data-tooltip-styling/src/polyfills.ts b/samples/charts/data-chart/data-tooltip-styling/src/polyfills.ts new file mode 100644 index 000000000..d583cff9c --- /dev/null +++ b/samples/charts/data-chart/data-tooltip-styling/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"; // 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/data-tooltip-styling/src/styles.scss b/samples/charts/data-chart/data-tooltip-styling/src/styles.scss new file mode 100644 index 000000000..9b431e92d --- /dev/null +++ b/samples/charts/data-chart/data-tooltip-styling/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/data-tooltip-styling/src/typings.d.ts b/samples/charts/data-chart/data-tooltip-styling/src/typings.d.ts new file mode 100644 index 000000000..ef5c7bd62 --- /dev/null +++ b/samples/charts/data-chart/data-tooltip-styling/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/data-tooltip-styling/tsconfig.app.json b/samples/charts/data-chart/data-tooltip-styling/tsconfig.app.json new file mode 100644 index 000000000..ff396d4ce --- /dev/null +++ b/samples/charts/data-chart/data-tooltip-styling/tsconfig.app.json @@ -0,0 +1,10 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "./out-tsc/app", + "types": [] + }, + "files": ["src/main.ts", "src/polyfills.ts"], + "include": ["src/**/*.d.ts"] +} diff --git a/samples/charts/data-chart/data-tooltip-styling/tsconfig.json b/samples/charts/data-chart/data-tooltip-styling/tsconfig.json new file mode 100644 index 000000000..22d546ab3 --- /dev/null +++ b/samples/charts/data-chart/data-tooltip-styling/tsconfig.json @@ -0,0 +1,27 @@ +{ + "compileOnSave": false, + "compilerOptions": { + "importHelpers": true, + "module": "esnext", + "baseUrl": "./", + "outDir": "./dist/out-tsc", + "sourceMap": false, + "declaration": false, + "moduleResolution": "node", + "experimentalDecorators": true, + "resolveJsonModule": true, + "esModuleInterop": true, + "downlevelIteration": true, + "target": "es2015", + "typeRoots": [ + "node_modules/@types" + ], + "lib": [ + "es2018", + "dom" + ] + }, + "angularCompilerOptions": { + "enableIvy": true + } +} \ No newline at end of file diff --git a/samples/charts/data-chart/data-tooltip-styling/tslint.json b/samples/charts/data-chart/data-tooltip-styling/tslint.json new file mode 100644 index 000000000..777c777d9 --- /dev/null +++ b/samples/charts/data-chart/data-tooltip-styling/tslint.json @@ -0,0 +1,31 @@ +{ + "extends": "tslint:latest", + "rules": { + "deprecation": { + "severity": "warning" + }, + "arrow-parens": false, + "indent": [true, "spaces"], + "interface-name": [true, "always-prefix"], + "max-classes-per-file": false, + "no-bitwise": false, + "no-console": false, + "no-empty": false, + "no-duplicate-imports": false, + "no-implicit-dependencies": false, + "no-object-literal-type-assertion": false, + "no-submodule-imports": [false], + "no-string-literal": false, + "no-trailing-whitespace": false, + "no-var-keyword": false, + "object-literal-sort-keys": false, + "only-arrow-functions": false, + "prefer-conditional-expression": false, + "prefer-const": false, + "prefer-for-of": false, + "prefer-object-spread": false, + "space-within-parens": false, + "trailing-comma": [true, {"multiline": "never", "singleline": "never"}], + "variable-name": [true, "allow-leading-underscore"] + } +}