Changes from igniteui-xplat-examples-output+PRs_2023.11.20.1

samples/charts/category-chart/axis-locations/sandbox.config.json

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

samples/charts/category-chart/axis-locations/src/CountryRenewableElectricity.ts

@@ -0,0 +1,100 @@
+export class CountryRenewableElectricityItem {
+    public constructor(init: Partial<CountryRenewableElectricityItem>) {
+        Object.assign(this, init);
+    }
+
+    public year: string;
+    public europe: number;
+    public china: number;
+    public america: number;
+
+}
+export class CountryRenewableElectricity extends Array<CountryRenewableElectricityItem> {
+    public constructor() {
+        super();
+        this.push(new CountryRenewableElectricityItem(
+        {
+            year: `2009`,
+            europe: 34,
+            china: 21,
+            america: 19
+        }));
+        this.push(new CountryRenewableElectricityItem(
+        {
+            year: `2010`,
+            europe: 43,
+            china: 26,
+            america: 24
+        }));
+        this.push(new CountryRenewableElectricityItem(
+        {
+            year: `2011`,
+            europe: 66,
+            china: 29,
+            america: 28
+        }));
+        this.push(new CountryRenewableElectricityItem(
+        {
+            year: `2012`,
+            europe: 69,
+            china: 32,
+            america: 26
+        }));
+        this.push(new CountryRenewableElectricityItem(
+        {
+            year: `2013`,
+            europe: 58,
+            china: 47,
+            america: 38
+        }));
+        this.push(new CountryRenewableElectricityItem(
+        {
+            year: `2014`,
+            europe: 40,
+            china: 46,
+            america: 31
+        }));
+        this.push(new CountryRenewableElectricityItem(
+        {
+            year: `2015`,
+            europe: 78,
+            china: 50,
+            america: 19
+        }));
+        this.push(new CountryRenewableElectricityItem(
+        {
+            year: `2016`,
+            europe: 13,
+            china: 90,
+            america: 52
+        }));
+        this.push(new CountryRenewableElectricityItem(
+        {
+            year: `2017`,
+            europe: 78,
+            china: 132,
+            america: 50
+        }));
+        this.push(new CountryRenewableElectricityItem(
+        {
+            year: `2018`,
+            europe: 40,
+            china: 134,
+            america: 34
+        }));
+        this.push(new CountryRenewableElectricityItem(
+        {
+            year: `2018`,
+            europe: 40,
+            china: 134,
+            america: 34
+        }));
+        this.push(new CountryRenewableElectricityItem(
+        {
+            year: `2019`,
+            europe: 80,
+            china: 96,
+            america: 38
+        }));
+    }
+}

samples/charts/category-chart/axis-locations/src/app.component.html

@@ -0,0 +1,46 @@
+<div class="container vertical sample">
+  <div class="options vertical">
+      <igx-property-editor-panel
+      [componentRenderer]="renderer"
+      [target]="chart"
+      descriptionType="CategoryChart"
+      isHorizontal="true"
+      isWrappingEnabled="false"
+      name="propertyEditorPanel1"
+      #propertyEditorPanel1>
+          <igx-property-editor-property-description
+          propertyPath="YAxisLabelLocation"
+          name="YAxisLabelLocation"
+          #yAxisLabelLocation
+          label="Y Axis - Label Location"
+          primitiveValue="OutsideRight">
+          </igx-property-editor-property-description>
+      </igx-property-editor-panel>
+  </div>
+  <div class="legend-title">
+      Renewable Electricity Generated
+  </div>
+  <div class="legend">
+      <igx-legend
+      name="Legend"
+      #legend
+      orientation="Horizontal">
+      </igx-legend>
+  </div>
+  <div class="container fill">
+      <igx-category-chart
+      name="chart"
+      #chart
+      computedPlotAreaMarginMode="Series"
+      [dataSource]="countryRenewableElectricity"
+      includedProperties="year, europe, china, america"
+      [legend]="legend"
+      chartType="Line"
+      yAxisTitle="Labels Location"
+      isHorizontalZoomEnabled="false"
+      isVerticalZoomEnabled="false"
+      xAxisInterval="1"
+      yAxisLabelLocation="OutsideRight">
+      </igx-category-chart>
+  </div>
+</div>

samples/charts/category-chart/axis-locations/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/axis-locations/src/app.component.ts

@@ -0,0 +1,54 @@
+import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
+import { ComponentRenderer, PropertyEditorPanelDescriptionModule, LegendDescriptionModule, CategoryChartDescriptionModule } from 'igniteui-angular-core';
+import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity';
+import { IgxLegendComponent, IgxCategoryChartComponent } from 'igniteui-angular-charts';
+import { IgxPropertyEditorPanelComponent, IgxPropertyEditorPropertyDescriptionComponent } from 'igniteui-angular-layouts';
+
+import { defineAllComponents } from 'igniteui-webcomponents';
+
+defineAllComponents();
+
+@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: IgxLegendComponent
+    @ViewChild("propertyEditorPanel1", { static: true } )
+    private propertyEditorPanel1: IgxPropertyEditorPanelComponent
+    @ViewChild("yAxisLabelLocation", { static: true } )
+    private yAxisLabelLocation: IgxPropertyEditorPropertyDescriptionComponent
+    @ViewChild("chart", { static: true } )
+    private chart: IgxCategoryChartComponent
+
+    private _countryRenewableElectricity: CountryRenewableElectricity = null;
+    public get countryRenewableElectricity(): CountryRenewableElectricity {
+        if (this._countryRenewableElectricity == null)
+        {
+            this._countryRenewableElectricity = new CountryRenewableElectricity();
+        }
+        return this._countryRenewableElectricity;
+    }
+
+    private _componentRenderer: ComponentRenderer = null;
+    public get renderer(): ComponentRenderer {
+        if (this._componentRenderer == null) {
+            this._componentRenderer = new ComponentRenderer();
+            var context = this._componentRenderer.context;
+            PropertyEditorPanelDescriptionModule.register(context);
+            LegendDescriptionModule.register(context);
+            CategoryChartDescriptionModule.register(context);
+        }
+        return this._componentRenderer;
+    }
+
+}
+

samples/charts/category-chart/axis-locations/src/app.module.ts

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

samples/charts/category-chart/axis-locations/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));

samples/charts/category-chart/axis-locations/src/styles.scss

@@ -0,0 +1,9 @@
+/* autoprefixer grid: on */
+html,
+body {
+    height: 100%;
+    width: 100%;
+    overflow: hidden;
+    margin: 0;
+    box-sizing: border-box;
+}

samples/charts/category-chart/axis-locations/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"]
+  }
+}

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"