IgniteUI · HUSSAR-mtrela · Mar 28, 2024 · Mar 28, 2024
diff --git a/samples/gauges/radial-gauge/optical-scaling/.stackblitzrc b/samples/gauges/radial-gauge/optical-scaling/.stackblitzrc
@@ -0,0 +1 @@
+{"installDependencies":true,"startCommand":"turbo start","env":{"ENABLE_CJS_IMPORTS":true}}
diff --git a/samples/gauges/radial-gauge/optical-scaling/ReadMe.md b/samples/gauges/radial-gauge/optical-scaling/ReadMe.md
@@ -0,0 +1,58 @@
+<!-- NOTE: do not change this file because it's auto re-generated from template: -->
+<!-- https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext/samples/templates/ReadMe.md -->
+
+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.
+
+
+<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
+    <body>
+        <a target="_blank" href="https://www.infragistics.com/products/ignite-ui-angular/angular/components/general-getting-started.html" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem" alt="View Docs" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-docs.png"/>
+        </a>
+        <a target="_blank" href="./src/app/app.component.html" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="View Code" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-code.png"/>
+        </a>
+        <a target="_blank" href="https://infragistics.com/angular-demos-dv/samples/gauges/radial-gauge-labels" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-run.png"/>
+        </a>
+        <a target="_blank" href="https://codesandbox.io/s/github/IgniteUI/igniteui-angular-examples/tree/master/samples/gauges/radial-gauge/labels?fontsize=14&hidenavigation=1&theme=dark&view=preview&file=/src/app.component.html" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-sandbox.png"/>
+        </a>
+    </body>
+</html>
+
+## 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
+```
+<!-- cd ./igniteui-angular-examples -->
+
+- 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
@@ -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
@@ -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
@@ -0,0 +1,5 @@
+{
+    "infiniteLoopProtection": false,
+    "hardReloadOnChange": false,
+    "view": "browser"
+} 
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
@@ -0,0 +1,19 @@
+<div class="container vertical"    >
+    <div class="options horizontal">
+        <label class="options-label">Optical Scaling: </label>
+        <label class="options-label"><input type="checkbox" id="checkbox1" checked="true" (change)="onOpticalScalingChanged($event)"/> Resize Gauge: </label>
+        <input class="options-slider" id="slider" type="range" min="20" max="100" step="10" value="100" (input)="onGaugeSizeChanged($event)"/>
+    </div>   
+
+    <igx-radial-gauge #radialGauge
+        titleDisplaysValue="true"
+        titleExtent="0.5"
+        subtitleText="MPH"
+        subtitleExtent="0.65"
+        height="100%" width="100%%"
+        minimumValue=0 value=50
+        maximumValue=80 interval=10 
+        opticalScalingEnabled="true"
+        opticalScalingSize="500" >
+    </igx-radial-gauge>
+</div>
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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -0,0 +1,3 @@
+export const environment = {
+  production: true
+};
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		{"installDependencies":true,"startCommand":"turbo start","env":{"ENABLE_CJS_IMPORTS":true}}