From 0082826d8d98e3050b5c78dd9b0e59063a392ebb Mon Sep 17 00:00:00 2001 From: mddifilippo89 Date: Thu, 28 Mar 2024 12:26:29 -0400 Subject: [PATCH] mdd-optical-scaling mdd-optical-scaling --- .../optical-scaling/.stackblitzrc | 1 + .../radial-gauge/optical-scaling/ReadMe.md | 58 ++++++++++ .../radial-gauge/optical-scaling/angular.json | 109 ++++++++++++++++++ .../radial-gauge/optical-scaling/package.json | 44 +++++++ .../optical-scaling/sandbox.config.json | 5 + .../src/app/app.component.html | 19 +++ .../src/app/app.component.scss | 3 + .../optical-scaling/src/app/app.component.ts | 39 +++++++ .../optical-scaling/src/app/app.module.ts | 26 +++++ .../src/config/tsconfig-es5.app.json | 6 + .../src/config/tsconfig.app.json | 12 ++ .../src/config/tsconfig.base.json | 24 ++++ .../src/config/tsconfig.spec.json | 19 +++ .../src/config/tsconfig.worker.json | 14 +++ .../src/environments/environment.prod.ts | 3 + .../src/environments/environment.ts | 16 +++ .../optical-scaling/src/index.html | 22 ++++ .../radial-gauge/optical-scaling/src/main.ts | 15 +++ .../optical-scaling/src/polyfills.ts | 65 +++++++++++ .../optical-scaling/src/styles.scss | 9 ++ .../optical-scaling/src/typings.d.ts | 5 + .../optical-scaling/tsconfig.json | 21 ++++ 22 files changed, 535 insertions(+) create mode 100644 samples/gauges/radial-gauge/optical-scaling/.stackblitzrc create mode 100644 samples/gauges/radial-gauge/optical-scaling/ReadMe.md create mode 100644 samples/gauges/radial-gauge/optical-scaling/angular.json create mode 100644 samples/gauges/radial-gauge/optical-scaling/package.json create mode 100644 samples/gauges/radial-gauge/optical-scaling/sandbox.config.json create mode 100644 samples/gauges/radial-gauge/optical-scaling/src/app/app.component.html create mode 100644 samples/gauges/radial-gauge/optical-scaling/src/app/app.component.scss create mode 100644 samples/gauges/radial-gauge/optical-scaling/src/app/app.component.ts create mode 100644 samples/gauges/radial-gauge/optical-scaling/src/app/app.module.ts create mode 100644 samples/gauges/radial-gauge/optical-scaling/src/config/tsconfig-es5.app.json create mode 100644 samples/gauges/radial-gauge/optical-scaling/src/config/tsconfig.app.json create mode 100644 samples/gauges/radial-gauge/optical-scaling/src/config/tsconfig.base.json create mode 100644 samples/gauges/radial-gauge/optical-scaling/src/config/tsconfig.spec.json create mode 100644 samples/gauges/radial-gauge/optical-scaling/src/config/tsconfig.worker.json create mode 100644 samples/gauges/radial-gauge/optical-scaling/src/environments/environment.prod.ts create mode 100644 samples/gauges/radial-gauge/optical-scaling/src/environments/environment.ts create mode 100644 samples/gauges/radial-gauge/optical-scaling/src/index.html create mode 100644 samples/gauges/radial-gauge/optical-scaling/src/main.ts create mode 100644 samples/gauges/radial-gauge/optical-scaling/src/polyfills.ts create mode 100644 samples/gauges/radial-gauge/optical-scaling/src/styles.scss create mode 100644 samples/gauges/radial-gauge/optical-scaling/src/typings.d.ts create mode 100644 samples/gauges/radial-gauge/optical-scaling/tsconfig.json diff --git a/samples/gauges/radial-gauge/optical-scaling/.stackblitzrc b/samples/gauges/radial-gauge/optical-scaling/.stackblitzrc new file mode 100644 index 000000000..65efbb4fd --- /dev/null +++ b/samples/gauges/radial-gauge/optical-scaling/.stackblitzrc @@ -0,0 +1 @@ +{"installDependencies":true,"startCommand":"turbo start","env":{"ENABLE_CJS_IMPORTS":true}} \ No newline at end of file diff --git a/samples/gauges/radial-gauge/optical-scaling/ReadMe.md b/samples/gauges/radial-gauge/optical-scaling/ReadMe.md new file mode 100644 index 000000000..fdb669f58 --- /dev/null +++ b/samples/gauges/radial-gauge/optical-scaling/ReadMe.md @@ -0,0 +1,58 @@ + + + +This folder contains Angular application with example of Labels feature using [RadialGauge](https://www.infragistics.com/products/ignite-ui-angular/angular/components/general-getting-started.html) component. + + + + + + View Docs + + + View Code + + + Run Sample + + + Run Sample + + + + +## Branches + +> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository. + +## Instructions + +Follow these instructions to run this example: + + +- clone and navigate to this sample in terminal window + +``` +git clone https://github.com/IgniteUI/igniteui-angular-examples.git +git checkout master +cd ../samples/gauges/radial-gauge/labels +``` + + +- open above folder in VS Code or type: +``` +code . +``` + +- In terminal window, run: +``` +npm install --legacy-peer-deps +npm run-script start +``` + +- open http://localhost:4200/ in your browser + + +## Learn More + +To learn more about **Ignite UI for Angular** components, check out the [Angular documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/general-getting-started.html). diff --git a/samples/gauges/radial-gauge/optical-scaling/angular.json b/samples/gauges/radial-gauge/optical-scaling/angular.json new file mode 100644 index 000000000..0e17c5c1f --- /dev/null +++ b/samples/gauges/radial-gauge/optical-scaling/angular.json @@ -0,0 +1,109 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "demo": { + "root": "", + "sourceRoot": "src", + "projectType": "application", + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist/demo", + "index": "src/index.html", + "main": "src/main.ts", + "polyfills": [ + "zone.js", + "hammerjs" + ], + "tsConfig": "src/config/tsconfig.app.json", + "assets": [ + "src/assets" + ], + "styles": [ + "src/styles.scss" + ], + "scripts": [] + }, + "configurations": { + "production": { + "fileReplacements": [ + { + "replace": "src/environments/environment.ts", + "with": "src/environments/environment.prod.ts" + } + ], + "optimization": true, + "outputHashing": "all", + "sourceMap": false, + "namedChunks": false, + "aot": true, + "extractLicenses": true, + "vendorChunk": false, + "buildOptimizer": true + } + } + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "options": { + "buildTarget": "demo:build" + }, + "configurations": { + "production": { + "buildTarget": "demo:build:production" + } + } + }, + "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": "src/config/tsconfig.spec.json", + "karmaConfig": "src/config/karma.conf.js", + "styles": [ + "styles.css" + ], + "scripts": [], + "assets": [ + "src/assets" + ] + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": [ + "src/config/tsconfig.app.json", + "src/config/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] + } + } + } + } + }, + "schematics": { + "@schematics/angular:component": { + "prefix": "app", + "style": "scss" + }, + "@schematics/angular:directive": { + "prefix": "app" + } + }, + "cli": { + "analytics": false + } +} diff --git a/samples/gauges/radial-gauge/optical-scaling/package.json b/samples/gauges/radial-gauge/optical-scaling/package.json new file mode 100644 index 000000000..3091bc2ec --- /dev/null +++ b/samples/gauges/radial-gauge/optical-scaling/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.0.0", + "@angular/common": "17.0.0", + "@angular/compiler": "17.0.0", + "@angular/core": "17.0.0", + "@angular/forms": "17.0.0", + "@angular/platform-browser": "17.0.0", + "@angular/platform-browser-dynamic": "17.0.0", + "@types/hammerjs": "2.0.39", + "classlist.js": "1.1.20150312", + "core-js": "3.21.0", + "hammerjs": "2.0.8", + "@infragistics/igniteui-angular-core": "23.2.174", + "@infragistics/igniteui-angular-gauges": "23.2.174", + "intl": "1.2.5", + "jszip": "3.8.0", + "rxjs": "6.6.7", + "tslib": "2.3.1", + "web-animations-js": "2.3.2", + "zone.js": "~0.14.1" + }, + "devDependencies": { + "@angular-devkit/build-angular": "17.0.0", + "@angular/cli": "17.0.0", + "@angular/compiler-cli": "17.0.0", + "@angular/language-service": "17.0.0", + "@types/node": "14.14.28", + "codelyzer": "6.0.2", + "jasmine-core": "3.7.1", + "jasmine-spec-reporter": "~4.2.1", + "sass.js": "0.11.1", + "ts-node": "9.1.1", + "tslint": "~6.1.3", + "typescript": "5.2.2" + } +} diff --git a/samples/gauges/radial-gauge/optical-scaling/sandbox.config.json b/samples/gauges/radial-gauge/optical-scaling/sandbox.config.json new file mode 100644 index 000000000..00acba0c1 --- /dev/null +++ b/samples/gauges/radial-gauge/optical-scaling/sandbox.config.json @@ -0,0 +1,5 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser" +} \ No newline at end of file diff --git a/samples/gauges/radial-gauge/optical-scaling/src/app/app.component.html b/samples/gauges/radial-gauge/optical-scaling/src/app/app.component.html new file mode 100644 index 000000000..e01224849 --- /dev/null +++ b/samples/gauges/radial-gauge/optical-scaling/src/app/app.component.html @@ -0,0 +1,19 @@ +
+
+ + + +
+ + + +
diff --git a/samples/gauges/radial-gauge/optical-scaling/src/app/app.component.scss b/samples/gauges/radial-gauge/optical-scaling/src/app/app.component.scss new file mode 100644 index 000000000..cbff781da --- /dev/null +++ b/samples/gauges/radial-gauge/optical-scaling/src/app/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/gauges/radial-gauge/optical-scaling/src/app/app.component.ts b/samples/gauges/radial-gauge/optical-scaling/src/app/app.component.ts new file mode 100644 index 000000000..0bf6e36a3 --- /dev/null +++ b/samples/gauges/radial-gauge/optical-scaling/src/app/app.component.ts @@ -0,0 +1,39 @@ +import { Component, OnInit, ViewChild } from "@angular/core"; +// radial gauge imports +import { IgxRadialGaugeComponent } from "igniteui-angular-gauges"; + +@Component({ + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html" +}) +export class AppComponent implements OnInit { + + @ViewChild("radialGauge", { static: true }) + public radialGauge: IgxRadialGaugeComponent; + + public ngOnInit(): void { + + // changing defaults to highlight current feature + this.radialGauge.scaleBrush = "#e8e8e8"; + } + + public onOpticalScalingChanged = (e: any) => { + const isEnabled = e.target.checked; + this.radialGauge.opticalScalingEnabled = isEnabled; + + if (isEnabled) { + this.radialGauge.opticalScalingEnabled = true; + } + else { + this.radialGauge.opticalScalingEnabled = false; + } + } + + public onGaugeSizeChanged = (e: any) => { + + let num: number = parseInt(e.target.value); + this.radialGauge.width = num.toString() + "%"; + this.radialGauge.height = num.toString() + "%"; + } +} diff --git a/samples/gauges/radial-gauge/optical-scaling/src/app/app.module.ts b/samples/gauges/radial-gauge/optical-scaling/src/app/app.module.ts new file mode 100644 index 000000000..475cc318f --- /dev/null +++ b/samples/gauges/radial-gauge/optical-scaling/src/app/app.module.ts @@ -0,0 +1,26 @@ +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 { IgxRadialGaugeModule } from "igniteui-angular-gauges"; + + +@NgModule({ + bootstrap: [AppComponent], + declarations: [ + AppComponent, + +], + imports: [ + BrowserModule, + BrowserAnimationsModule, + CommonModule, + FormsModule, + IgxRadialGaugeModule +], + providers: [], + schemas: [] +}) +export class AppModule {} diff --git a/samples/gauges/radial-gauge/optical-scaling/src/config/tsconfig-es5.app.json b/samples/gauges/radial-gauge/optical-scaling/src/config/tsconfig-es5.app.json new file mode 100644 index 000000000..7e8983eb4 --- /dev/null +++ b/samples/gauges/radial-gauge/optical-scaling/src/config/tsconfig-es5.app.json @@ -0,0 +1,6 @@ +{ + "extends": "./tsconfig.app.json", + "compilerOptions": { + "target": "ES2022" + } + } diff --git a/samples/gauges/radial-gauge/optical-scaling/src/config/tsconfig.app.json b/samples/gauges/radial-gauge/optical-scaling/src/config/tsconfig.app.json new file mode 100644 index 000000000..f722e3fe4 --- /dev/null +++ b/samples/gauges/radial-gauge/optical-scaling/src/config/tsconfig.app.json @@ -0,0 +1,12 @@ +{ + "extends": "./tsconfig.base.json", + "compilerOptions": { + "outDir": "../../out-tsc/app", + "baseUrl": "./", + "types": [] + }, + "files": [ + "../main.ts", + "../polyfills.ts" + ] +} diff --git a/samples/gauges/radial-gauge/optical-scaling/src/config/tsconfig.base.json b/samples/gauges/radial-gauge/optical-scaling/src/config/tsconfig.base.json new file mode 100644 index 000000000..5574be5e5 --- /dev/null +++ b/samples/gauges/radial-gauge/optical-scaling/src/config/tsconfig.base.json @@ -0,0 +1,24 @@ +{ + "compileOnSave": false, + "compilerOptions": { + "importHelpers": true, + "module": "ES2022", + "outDir": "../../dist/out-tsc", + "sourceMap": false, + "declaration": false, + "moduleResolution": "node", + "experimentalDecorators": true, + "resolveJsonModule": true, + "esModuleInterop": true, + "downlevelIteration": true, // required for excel library + "target": "ES2022", + "typeRoots": [ + "../../node_modules/@types" + ], + "lib": [ + "ES2022", + "dom" + ], + "useDefineForClassFields": false + } +} diff --git a/samples/gauges/radial-gauge/optical-scaling/src/config/tsconfig.spec.json b/samples/gauges/radial-gauge/optical-scaling/src/config/tsconfig.spec.json new file mode 100644 index 000000000..6eb8c055c --- /dev/null +++ b/samples/gauges/radial-gauge/optical-scaling/src/config/tsconfig.spec.json @@ -0,0 +1,19 @@ +{ + "extends": "./tsconfig.base.json", + "compilerOptions": { + "outDir": "../../out-tsc/spec", + "baseUrl": "./", + "types": [ + "jasmine", + "node" + ] + }, + "files": [ + "../test.ts", + "../polyfills.ts" + ], + "include": [ + "../**/*.spec.ts", + "../**/*.d.ts" + ] +} diff --git a/samples/gauges/radial-gauge/optical-scaling/src/config/tsconfig.worker.json b/samples/gauges/radial-gauge/optical-scaling/src/config/tsconfig.worker.json new file mode 100644 index 000000000..4867b1275 --- /dev/null +++ b/samples/gauges/radial-gauge/optical-scaling/src/config/tsconfig.worker.json @@ -0,0 +1,14 @@ +{ + "extends": "./tsconfig.base.json", + "compilerOptions": { + "outDir": "../../out-tsc/worker", + "lib": [ + "ES2022", + "DOM" + ], + "types": [] + }, + "include": [ + "../**/*Worker.ts" + ] +} diff --git a/samples/gauges/radial-gauge/optical-scaling/src/environments/environment.prod.ts b/samples/gauges/radial-gauge/optical-scaling/src/environments/environment.prod.ts new file mode 100644 index 000000000..3612073bc --- /dev/null +++ b/samples/gauges/radial-gauge/optical-scaling/src/environments/environment.prod.ts @@ -0,0 +1,3 @@ +export const environment = { + production: true +}; diff --git a/samples/gauges/radial-gauge/optical-scaling/src/environments/environment.ts b/samples/gauges/radial-gauge/optical-scaling/src/environments/environment.ts new file mode 100644 index 000000000..7b4f817ad --- /dev/null +++ b/samples/gauges/radial-gauge/optical-scaling/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/gauges/radial-gauge/optical-scaling/src/index.html b/samples/gauges/radial-gauge/optical-scaling/src/index.html new file mode 100644 index 000000000..67a35017e --- /dev/null +++ b/samples/gauges/radial-gauge/optical-scaling/src/index.html @@ -0,0 +1,22 @@ + + + + + + IgniteUI for Angular | Example | infragistics + + + + + + + + + + + + + + + + diff --git a/samples/gauges/radial-gauge/optical-scaling/src/main.ts b/samples/gauges/radial-gauge/optical-scaling/src/main.ts new file mode 100644 index 000000000..8b0ce4164 --- /dev/null +++ b/samples/gauges/radial-gauge/optical-scaling/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/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/gauges/radial-gauge/optical-scaling/src/polyfills.ts b/samples/gauges/radial-gauge/optical-scaling/src/polyfills.ts new file mode 100644 index 000000000..d583cff9c --- /dev/null +++ b/samples/gauges/radial-gauge/optical-scaling/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/gauges/radial-gauge/optical-scaling/src/styles.scss b/samples/gauges/radial-gauge/optical-scaling/src/styles.scss new file mode 100644 index 000000000..9b431e92d --- /dev/null +++ b/samples/gauges/radial-gauge/optical-scaling/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/gauges/radial-gauge/optical-scaling/src/typings.d.ts b/samples/gauges/radial-gauge/optical-scaling/src/typings.d.ts new file mode 100644 index 000000000..ef5c7bd62 --- /dev/null +++ b/samples/gauges/radial-gauge/optical-scaling/src/typings.d.ts @@ -0,0 +1,5 @@ +/* SystemJS module definition */ +declare var module: NodeModule; +interface NodeModule { + id: string; +} diff --git a/samples/gauges/radial-gauge/optical-scaling/tsconfig.json b/samples/gauges/radial-gauge/optical-scaling/tsconfig.json new file mode 100644 index 000000000..1aaac63d3 --- /dev/null +++ b/samples/gauges/radial-gauge/optical-scaling/tsconfig.json @@ -0,0 +1,21 @@ +/* + This is a "Solution Style" tsconfig.json file, and is used by editors and TypeScript’s language server to improve development experience. + It is not intended to be used to perform a compilation. + + To learn more about this file see: https://angular.io/config/solution-tsconfig. +*/ +{ + "useDefineForClassFields": false, + "files": [], + "references": [ + { + "path": "./src/config/tsconfig.app.json" + }, + { + "path": "./src/config/tsconfig.worker.json" + }, + { + "path": "./src/config/tsconfig.spec.json" + } + ] +} \ No newline at end of file