IgniteUI · HUSSAR-mtrela · Jun 3, 2024 · Jun 3, 2024
diff --git a/tests/donut/.stackblitzrc b/tests/donut/.stackblitzrc
@@ -0,0 +1 @@
+{"installDependencies":true,"startCommand":"turbo start","env":{"ENABLE_CJS_IMPORTS":true}}
diff --git a/tests/donut/ReadMe.md b/tests/donut/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 Legend feature using [DoughnutChart](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/charts/doughnut-chart-legend" 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/charts/doughnut-chart/legend?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/charts/doughnut-chart/legend
+```
+<!-- 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/tests/donut/angular.json b/tests/donut/angular.json
@@ -0,0 +1,106 @@
+{
+  "$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"
+    }
+  }
+}
diff --git a/tests/donut/package.json b/tests/donut/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",
+    "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": "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/tests/donut/sandbox.config.json b/tests/donut/sandbox.config.json
@@ -0,0 +1,5 @@
+{
+    "infiniteLoopProtection": false,
+    "hardReloadOnChange": false,
+    "view": "browser"
+}
diff --git a/tests/donut/src/EnergyGlobalDemand.ts b/tests/donut/src/EnergyGlobalDemand.ts
@@ -0,0 +1,51 @@
+export class EnergyGlobalDemandItem {
+    public constructor(init: Partial<EnergyGlobalDemandItem>) {
+        Object.assign(this, init);
+    }
+
+    public value: number;
+    public category: string;
+    public summary: string;
+
+}
+export class EnergyGlobalDemand extends Array<EnergyGlobalDemandItem> {
+    public constructor(items: Array<EnergyGlobalDemandItem> | number = -1) {
+        if (Array.isArray(items)) {
+            super(...items);
+        } else {
+            const newItems = [
+                new EnergyGlobalDemandItem(
+                {
+                    value: 37,
+                    category: `Cooling`,
+                    summary: `Cooling 37%`
+                }),
+                new EnergyGlobalDemandItem(
+                {
+                    value: 25,
+                    category: `Residential`,
+                    summary: `Residential 25%`
+                }),
+                new EnergyGlobalDemandItem(
+                {
+                    value: 12,
+                    category: `Heating`,
+                    summary: `Heating 12%`
+                }),
+                new EnergyGlobalDemandItem(
+                {
+                    value: 11,
+                    category: `Lighting`,
+                    summary: `Lighting 11%`
+                }),
+                new EnergyGlobalDemandItem(
+                {
+                    value: 15,
+                    category: `Other`,
+                    summary: `Other 15%`
+                }),
+            ];
+            super(...(newItems.slice(0, items)));
+        }
+    }
+}
diff --git a/tests/donut/src/app.component.html b/tests/donut/src/app.component.html
@@ -0,0 +1,33 @@
+<div class="container vertical sample">
+  <div class="legend-title">
+      Global Electricity Demand by Energy Use
+  </div>
+  <div class="legend">
+      <igx-item-legend
+      name="Legend"
+      #legend
+      orientation="Horizontal">
+      </igx-item-legend>
+  </div>
+  <div class="container fill">
+      <igx-doughnut-chart
+      name="chart"
+      #chart
+      allowSliceExplosion="true">
+          <igx-ring-series
+          name="series"
+          #series
+          labelMemberPath="summary"
+          labelsPosition="OutsideEnd"
+          labelExtent="30"
+          valueMemberPath="value"
+          legendLabelMemberPath="category"
+          outlines="white"
+          radiusFactor="0.6"
+          startAngle="30"
+          [dataSource]="energyGlobalDemand"
+          [legend]="legend">
+          </igx-ring-series>
+      </igx-doughnut-chart>
+  </div>
+</div>
diff --git a/tests/donut/src/app.component.scss b/tests/donut/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/tests/donut/src/app.component.ts b/tests/donut/src/app.component.ts
@@ -0,0 +1,39 @@
+import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
+import { EnergyGlobalDemandItem, EnergyGlobalDemand } from './EnergyGlobalDemand';
+import { IgxItemLegendComponent, IgxDoughnutChartComponent, IgxRingSeriesComponent } 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: IgxItemLegendComponent
+	@ViewChild("chart", { static: true } )
+	private chart: IgxDoughnutChartComponent
+	@ViewChild("series", { static: true } )
+	private series: IgxRingSeriesComponent
+    private _energyGlobalDemand: EnergyGlobalDemand = null;
+    public get energyGlobalDemand(): EnergyGlobalDemand {
+        if (this._energyGlobalDemand == null)
+        {
+            this._energyGlobalDemand = new EnergyGlobalDemand();
+        }
+        return this._energyGlobalDemand;
+    }
+
+	public constructor(private _detector: ChangeDetectorRef)
+	{
+	}
+
+	public ngAfterViewInit(): void
+	{
+	}
+
+}
+
diff --git a/tests/donut/src/app.module.ts b/tests/donut/src/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 { IgxItemLegendModule, IgxDoughnutChartModule } from 'igniteui-angular-charts';
+
+@NgModule({
+  bootstrap: [AppComponent],
+  declarations: [
+    AppComponent
+],
+  imports: [
+    BrowserModule,
+    BrowserAnimationsModule,
+    CommonModule,
+    FormsModule,
+    IgxItemLegendModule,
+    IgxDoughnutChartModule
+],
+  providers: [],
+  schemas: []
+})
+export class AppModule {}
diff --git a/tests/donut/src/config/tsconfig-es5.app.json b/tests/donut/src/config/tsconfig-es5.app.json
@@ -0,0 +1,6 @@
+{
+    "extends": "./tsconfig.app.json",
+    "compilerOptions": {
+        "target": "ES2022"
+    }
+   }
diff --git a/tests/donut/src/config/tsconfig.app.json b/tests/donut/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"
+  ]
+}