export new samples

samples/charts/category-chart/custom-selection/.stackblitzrc

@@ -0,0 +1 @@
+{"installDependencies":true,"startCommand":"turbo start","env":{"ENABLE_CJS_IMPORTS":true}}

samples/charts/category-chart/custom-selection/angular.json

@@ -0,0 +1,103 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "demo": {
+      "root": "",
+      "sourceRoot": "src",
+      "projectType": "application",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist/demo",
+            "index": "src/index.html",
+            "main": "src/main.ts",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "src/config/tsconfig.app.json",
+            "assets": [
+              "src/assets"
+            ],
+            "styles": [
+              "src/styles.scss"
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ],
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "namedChunks": false,
+              "aot": true,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true
+            }
+          }
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "options": {
+            "browserTarget": "demo:build"
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "demo:build:production"
+            }
+          }
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "demo:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "src/test.ts",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "src/config/tsconfig.spec.json",
+            "karmaConfig": "src/config/karma.conf.js",
+            "styles": [
+              "styles.css"
+            ],
+            "scripts": [],
+            "assets": [
+              "src/assets"
+            ]
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "src/config/tsconfig.app.json",
+              "src/config/tsconfig.spec.json"
+            ],
+            "exclude": [
+              "**/node_modules/**"
+            ]
+          }
+        }
+      }
+    }
+  },
+  "schematics": {
+    "@schematics/angular:component": {
+      "prefix": "app",
+      "styleext": "scss"
+    },
+    "@schematics/angular:directive": {
+      "prefix": "app"
+    }
+  }
+}

samples/charts/category-chart/custom-selection/package.json

@@ -0,0 +1,44 @@
+{
+  "scripts": {
+    "ng": "ng",
+    "update": "ng update",
+    "start": "node --max_old_space_size=12192 node_modules/@angular/cli/bin/ng serve -o",
+    "build": "node --max_old_space_size=12192 node_modules/@angular/cli/bin/ng build --configuration production",
+    "lint": "ng lint"
+  },
+  "dependencies": {
+    "@angular/animations": "16.0.1",
+    "@angular/common": "16.0.1",
+    "@angular/compiler": "16.0.1",
+    "@angular/core": "16.0.1",
+    "@angular/forms": "16.0.1",
+    "@angular/platform-browser": "16.0.1",
+    "@angular/platform-browser-dynamic": "16.0.1",
+    "@types/hammerjs": "2.0.39",
+    "classlist.js": "1.1.20150312",
+    "core-js": "3.21.0",
+    "hammerjs": "2.0.8",
+    "igniteui-angular-charts": "16.1.2-beta.0",
+    "igniteui-angular-core": "16.1.2-beta.0",
+    "intl": "1.2.5",
+    "jszip": "3.7.1",
+    "rxjs": "6.6.7",
+    "tslib": "2.3.1",
+    "web-animations-js": "2.3.2",
+    "zone.js": "0.13.0"
+  },
+  "devDependencies": {
+    "@angular/cli": "16.0.1",
+    "@angular/compiler-cli": "16.0.1",
+    "@angular/language-service": "16.0.1",
+    "@angular-devkit/build-angular": "16.0.1",
+    "@types/node": "14.14.28",
+    "codelyzer": "6.0.2",
+    "jasmine-core": "3.7.1",
+    "jasmine-spec-reporter": "~4.2.1",
+    "sass.js": "0.11.1",
+    "tslint": "~6.1.3",
+    "ts-node": "9.1.1",
+    "typescript": "5.0.4"
+  }
+}

samples/charts/category-chart/custom-selection/sandbox.config.json

@@ -0,0 +1,5 @@
+{
+    "infiniteLoopProtection": false,
+    "hardReloadOnChange": false,
+    "view": "browser"
+}

samples/charts/category-chart/custom-selection/src/SelectableData.ts

@@ -0,0 +1,111 @@
+export class SelectableDataItem {
+    public constructor(init: Partial<SelectableDataItem>) {
+        Object.assign(this, init);
+    }
+
+    public category: string;
+    public dataValue: number;
+    public selectedValue: number;
+
+}
+export class SelectableData extends Array<SelectableDataItem> {
+    public constructor() {
+        super();
+        this.push(new SelectableDataItem(
+        {
+            category: `2010`,
+            dataValue: 20,
+            selectedValue: 20
+        }));
+        this.push(new SelectableDataItem(
+        {
+            category: `2011`,
+            dataValue: 40,
+            selectedValue: null
+        }));
+        this.push(new SelectableDataItem(
+        {
+            category: `2012`,
+            dataValue: 35,
+            selectedValue: null
+        }));
+        this.push(new SelectableDataItem(
+        {
+            category: `2013`,
+            dataValue: 50,
+            selectedValue: 50
+        }));
+        this.push(new SelectableDataItem(
+        {
+            category: `2014`,
+            dataValue: 45,
+            selectedValue: null
+        }));
+        this.push(new SelectableDataItem(
+        {
+            category: `2015`,
+            dataValue: 60,
+            selectedValue: 60
+        }));
+        this.push(new SelectableDataItem(
+        {
+            category: `2016`,
+            dataValue: 35,
+            selectedValue: null
+        }));
+        this.push(new SelectableDataItem(
+        {
+            category: `2017`,
+            dataValue: 40,
+            selectedValue: null
+        }));
+        this.push(new SelectableDataItem(
+        {
+            category: `2018`,
+            dataValue: 50,
+            selectedValue: 50
+        }));
+        this.push(new SelectableDataItem(
+        {
+            category: `2019`,
+            dataValue: 75,
+            selectedValue: 75
+        }));
+        this.push(new SelectableDataItem(
+        {
+            category: `2020`,
+            dataValue: 65,
+            selectedValue: null
+        }));
+        this.push(new SelectableDataItem(
+        {
+            category: `2021`,
+            dataValue: 40,
+            selectedValue: null
+        }));
+        this.push(new SelectableDataItem(
+        {
+            category: `2022`,
+            dataValue: 50,
+            selectedValue: null
+        }));
+        this.push(new SelectableDataItem(
+        {
+            category: `2023`,
+            dataValue: 65,
+            selectedValue: 65
+        }));
+        this.push(new SelectableDataItem(
+        {
+            category: `2024`,
+            dataValue: 70,
+            selectedValue: 70
+        }));
+        this.push(new SelectableDataItem(
+        {
+            category: `2025`,
+            dataValue: 85,
+            selectedValue: null
+        }));
+    }
+}

samples/charts/category-chart/custom-selection/src/app.component.html

@@ -0,0 +1,32 @@
+<div class="container vertical sample">
+  <div class="legend-title">
+      Chart with Multiple Selectable Data Columns
+  </div>
+  <div class="legend">
+      <igx-data-legend
+      name="Legend"
+      #legend
+      summaryType="None"
+      valueFormatMaxFractions="0"
+      [target]="chart">
+      </igx-data-legend>
+  </div>
+  <div class="container fill">
+      <igx-category-chart
+      name="chart"
+      #chart
+      [dataSource]="selectableData"
+      chartType="Column"
+      xAxisOverlap="1"
+      yAxisMinimumValue="0"
+      isHorizontalZoomEnabled="false"
+      isVerticalZoomEnabled="false"
+      isSeriesHighlightingEnabled="true"
+      finalValueAnnotationsVisible="false"
+      crosshairsAnnotationEnabled="false"
+      dataToolTipSummaryType="None"
+      dataToolTipValueFormatMaxFractions="0"
+      (seriesPointerDown)="this.categoryChartCustomSelectionPointerDown($event)">
+      </igx-category-chart>
+  </div>
+</div>

samples/charts/category-chart/custom-selection/src/app.component.scss

@@ -0,0 +1,3 @@
+/* styles are loaded the Shared CSS file located at:
+https://static.infragistics.com/xplatform/css/samples/
+*/

samples/charts/category-chart/custom-selection/src/app.component.ts

@@ -0,0 +1,61 @@
+import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
+import { SelectableDataItem, SelectableData } from './SelectableData';
+import { IgxDataLegendComponent, IgxCategoryChartComponent } from 'igniteui-angular-charts';
+
+@Component({
+    selector: "app-root",
+    styleUrls: ["./app.component.scss"],
+    templateUrl: "./app.component.html",
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class AppComponent {
+
+    public constructor(private _detector: ChangeDetectorRef) {
+
+    }
+
+    @ViewChild("legend", { static: true } )
+    private legend: IgxDataLegendComponent
+    @ViewChild("chart", { static: true } )
+    private chart: IgxCategoryChartComponent
+
+    private _selectableData: SelectableData = null;
+    public get selectableData(): SelectableData {
+        if (this._selectableData == null)
+        {
+            this._selectableData = new SelectableData();
+        }
+        return this._selectableData;
+    }
+
+
+    public categoryChartCustomSelectionPointerDown(e: any): void {
+
+        let oldItem = e.args.item as SelectableDataItem;
+
+        if (oldItem === null) return;
+
+        let newItem: SelectableDataItem = new SelectableDataItem({
+            category: oldItem.category,
+            dataValue: oldItem.dataValue,
+            selectedValue: oldItem.selectedValue
+        });
+
+        var selectedIndex = -1;
+        for (var i = 0; i < this.selectableData.length; i++) {
+            if (oldItem.category === this.selectableData[i].category) {
+                selectedIndex = i;
+                break;
+            }
+        }
+
+        if (oldItem.selectedValue === oldItem.dataValue)
+            newItem.selectedValue = null;
+        else
+            newItem.selectedValue = newItem.dataValue;
+
+        this.chart.notifySetItem(this.selectableData, selectedIndex, oldItem, newItem);
+    }
+
+}
+

samples/charts/category-chart/custom-selection/src/app.module.ts

@@ -0,0 +1,27 @@
+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 { IgxDataLegendModule, IgxCategoryChartModule, IgxDataChartInteractivityModule } from 'igniteui-angular-charts';
+
+@NgModule({
+  bootstrap: [AppComponent],
+  declarations: [
+    AppComponent
+],
+  imports: [
+    BrowserModule,
+    BrowserAnimationsModule,
+    CommonModule,
+    FormsModule,
+    IgxDataLegendModule,
+    IgxCategoryChartModule,
+    IgxDataChartInteractivityModule
+],
+  providers: [],
+  schemas: []
+})
+export class AppModule {}