IgniteUI · azure-pipelines · Jan 31, 2025
diff --git a/samples/charts/dashboard-tile/gauge-dashboard/src/DashboardGaugeDataSource.ts b/samples/charts/dashboard-tile/gauge-dashboard/src/DashboardGaugeDataSource.ts
@@ -0,0 +1,23 @@
+export class DashboardGaugeDataSourceItem {
+    public constructor(init: Partial<DashboardGaugeDataSourceItem>) {
+        Object.assign(this, init);
+    }
+
+    public value: number;
+
+}
+export class DashboardGaugeDataSource extends Array<DashboardGaugeDataSourceItem> {
+    public constructor(items: Array<DashboardGaugeDataSourceItem> | number = -1) {
+        if (Array.isArray(items)) {
+            super(...items);
+        } else {
+            const newItems = [
+                new DashboardGaugeDataSourceItem(
+                {
+                    value: 40
+                }),
+            ];
+            super(...newItems.slice(0));
+        }
+    }
+}
diff --git a/samples/charts/dashboard-tile/gauge-dashboard/src/index.tsx b/samples/charts/dashboard-tile/gauge-dashboard/src/index.tsx
@@ -4,6 +4,7 @@ import './index.css';
 
 import { IgrDashboardTileModule, IgrDataChartDashboardTileModule, IgrGeographicMapDashboardTileModule, IgrLinearGaugeDashboardTileModule, IgrPieChartDashboardTileModule, IgrRadialGaugeDashboardTileModule } from 'igniteui-react-dashboards';
 import { IgrDashboardTile } from 'igniteui-react-dashboards';
+import { DashboardGaugeDataSourceItem, DashboardGaugeDataSource } from './DashboardGaugeDataSource';
 
 const mods: any[] = [
     IgrDashboardTileModule,
@@ -27,9 +28,6 @@ export default class Sample extends React.Component<any, any> {
 
         this.dashboardRef = this.dashboardRef.bind(this);
     }
-    public componentDidMount() {
-        this.dashboardTileGaugeOnInit();
-    }
 
     public render(): JSX.Element {
         return (
@@ -38,19 +36,21 @@ export default class Sample extends React.Component<any, any> {
             <div className="container fill">
                 <IgrDashboardTile
                     tileTitle="Sample Gauge"
-                    ref={this.dashboardRef}>
+                    ref={this.dashboardRef}
+                    dataSource={this.dashboardGaugeDataSource}>
                 </IgrDashboardTile>
             </div>
         </div>
         );
     }
 
-
-    public dashboardTileGaugeOnInit(): void {
-
-        var target = this.dashboard;
-
-        target.dataSource = 40;
+    private _dashboardGaugeDataSource: DashboardGaugeDataSource = null;
+    public get dashboardGaugeDataSource(): DashboardGaugeDataSource {
+        if (this._dashboardGaugeDataSource == null)
+        {
+            this._dashboardGaugeDataSource = new DashboardGaugeDataSource();
+        }
+        return this._dashboardGaugeDataSource;
     }
 
 }

diff --git a/samples/charts/data-chart/selection-matcher/.eslintrc.js b/samples/charts/data-chart/selection-matcher/.eslintrc.js
@@ -0,0 +1,78 @@
+// https://www.robertcooper.me/using-eslint-and-prettier-in-a-typescript-project
+module.exports = {
+    parser: "@typescript-eslint/parser", // Specifies the ESLint parser
+    parserOptions: {
+        ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features
+        sourceType: "module", // Allows for the use of imports
+        ecmaFeatures: {
+            jsx: true // Allows for the parsing of JSX
+        }
+    },
+    settings: {
+        react: {
+            version: "999.999.999" // Tells eslint-plugin-react to automatically detect the version of React to use
+        }
+    },
+    extends: [
+        "eslint:recommended",
+        "plugin:react/recommended", // Uses the recommended rules from @eslint-plugin-react
+        "plugin:@typescript-eslint/recommended" // Uses the recommended rules from @typescript-eslint/eslint-plugin
+    ],
+    rules: {
+      // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
+      "default-case": "off",
+      "jsx-a11y/alt-text": "off",
+      "jsx-a11y/iframe-has-title": "off",
+      "no-undef": "off",
+      "no-unused-vars": "off",
+      "no-extend-native": "off",
+      "no-throw-literal": "off",
+      "no-useless-concat": "off",
+      "no-mixed-operators": "off",
+      "no-prototype-builtins": "off",
+      "no-mixed-spaces-and-tabs": 0,
+      "prefer-const": "off",
+      "prefer-rest-params": "off",
+      "@typescript-eslint/no-unused-vars": "off",
+      "@typescript-eslint/no-explicit-any": "off",
+      "@typescript-eslint/no-inferrable-types": "off",
+      "@typescript-eslint/no-useless-constructor": "off",
+      "@typescript-eslint/no-use-before-define": "off",
+      "@typescript-eslint/no-non-null-assertion": "off",
+      "@typescript-eslint/interface-name-prefix": "off",
+      "@typescript-eslint/prefer-namespace-keyword": "off",
+      "@typescript-eslint/explicit-function-return-type": "off",
+      "@typescript-eslint/explicit-module-boundary-types": "off"
+    },
+    "overrides": [
+      {
+        "files": ["*.ts", "*.tsx"],
+        "rules": {
+            "default-case": "off",
+            "jsx-a11y/alt-text": "off",
+            "jsx-a11y/iframe-has-title": "off",
+            "no-var": "off",
+            "no-undef": "off",
+            "no-unused-vars": "off",
+            "no-extend-native": "off",
+            "no-throw-literal": "off",
+            "no-useless-concat": "off",
+            "no-mixed-operators": "off",
+	    "no-mixed-spaces-and-tabs": 0,
+            "no-prototype-builtins": "off",
+            "prefer-const": "off",
+            "prefer-rest-params": "off",
+            "@typescript-eslint/no-unused-vars": "off",
+            "@typescript-eslint/no-explicit-any": "off",
+            "@typescript-eslint/no-inferrable-types": "off",
+            "@typescript-eslint/no-useless-constructor": "off",
+            "@typescript-eslint/no-use-before-define": "off",
+            "@typescript-eslint/no-non-null-assertion": "off",
+            "@typescript-eslint/interface-name-prefix": "off",
+            "@typescript-eslint/prefer-namespace-keyword": "off",
+            "@typescript-eslint/explicit-function-return-type": "off",
+            "@typescript-eslint/explicit-module-boundary-types": "off"
+        }
+      }
+    ]
+  };
diff --git a/samples/charts/data-chart/selection-matcher/package.json b/samples/charts/data-chart/selection-matcher/package.json
@@ -0,0 +1,45 @@
+{
+  "name": "example-ignite-ui-react",
+  "description": "This project provides example of using Ignite UI for React components",
+  "author": "Infragistics",
+  "version": "1.4.0",
+  "license": "",
+  "homepage": ".",
+  "private": true,
+  "scripts": {
+    "start": "set PORT=4200 && react-scripts --max_old_space_size=10240 start",
+    "build": "react-scripts --max_old_space_size=10240 build ",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject",
+    "lint": "eslint ./src/**/*.{ts,tsx}"
+  },
+  "dependencies": {
+    "igniteui-react": "18.7.7",
+    "igniteui-react-charts": "18.7.7",
+    "igniteui-react-core": "18.7.7",
+    "igniteui-webcomponents": "5.2.1",
+    "lit-html": "^3.2.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-scripts": "^5.0.1",
+    "tslib": "^2.4.0"
+  },
+  "devDependencies": {
+    "@types/jest": "^29.2.0",
+    "@types/node": "^18.11.7",
+    "@types/react": "^18.0.24",
+    "@types/react-dom": "^18.0.8",
+    "eslint": "^8.33.0",
+    "eslint-config-react": "^1.1.7",
+    "eslint-plugin-react": "^7.20.0",
+    "react-app-rewired": "^2.2.1",
+    "typescript": "^4.8.4",
+    "worker-loader": "^3.0.8"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}
diff --git a/samples/charts/data-chart/selection-matcher/public/index.html b/samples/charts/data-chart/selection-matcher/public/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Sample | Ignite UI | React | infragistics</title>
+    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/react.png" >
+    <link rel="stylesheet"    href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" />
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>
diff --git a/samples/charts/data-chart/selection-matcher/sandbox.config.json b/samples/charts/data-chart/selection-matcher/sandbox.config.json
@@ -0,0 +1,5 @@
+{
+    "infiniteLoopProtection": false,
+    "hardReloadOnChange": false,
+    "view": "browser"
+}
diff --git a/samples/charts/data-chart/selection-matcher/src/EnergyRenewableConsumption.ts b/samples/charts/data-chart/selection-matcher/src/EnergyRenewableConsumption.ts
@@ -0,0 +1,69 @@
+export class EnergyRenewableConsumptionItem {
+    public constructor(init: Partial<EnergyRenewableConsumptionItem>) {
+        Object.assign(this, init);
+    }
+
+    public location: string;
+    public year: number;
+    public hydro: number;
+    public solar: number;
+    public wind: number;
+    public other: number;
+
+}
+export class EnergyRenewableConsumption extends Array<EnergyRenewableConsumptionItem> {
+    public constructor(items: Array<EnergyRenewableConsumptionItem> | number = -1) {
+        if (Array.isArray(items)) {
+            super(...items);
+        } else {
+            const newItems = [
+                new EnergyRenewableConsumptionItem(
+                {
+                    location: `China`,
+                    year: 2019,
+                    hydro: 1269.5,
+                    solar: 223,
+                    wind: 405.2,
+                    other: 102.8
+                }),
+                new EnergyRenewableConsumptionItem(
+                {
+                    location: `Europe`,
+                    year: 2019,
+                    hydro: 632.54,
+                    solar: 154,
+                    wind: 461.3,
+                    other: 220.3
+                }),
+                new EnergyRenewableConsumptionItem(
+                {
+                    location: `USA`,
+                    year: 2019,
+                    hydro: 271.16,
+                    solar: 108,
+                    wind: 303.4,
+                    other: 78.34
+                }),
+                new EnergyRenewableConsumptionItem(
+                {
+                    location: `Brazil`,
+                    year: 2019,
+                    hydro: 399.3,
+                    solar: 5.5,
+                    wind: 55.83,
+                    other: 56.25
+                }),
+                new EnergyRenewableConsumptionItem(
+                {
+                    location: `Canada`,
+                    year: 2019,
+                    hydro: 381.98,
+                    solar: 4.3,
+                    wind: 34.17,
+                    other: 10.81
+                }),
+            ];
+            super(...newItems.slice(0));
+        }
+    }
+}
diff --git a/samples/charts/data-chart/selection-matcher/src/index.css b/samples/charts/data-chart/selection-matcher/src/index.css
@@ -0,0 +1,2 @@
+/* shared styles are loaded from: */
+/* https://static.infragistics.com/xplatform/css/samples */
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		/* shared styles are loaded from: */
		/* https://static.infragistics.com/xplatform/css/samples */