From 0c9ea786f7663760dc8533d7425b39e6a2ee96ae Mon Sep 17 00:00:00 2001 From: tfsbuild Date: Tue, 17 Dec 2024 15:28:57 +0200 Subject: [PATCH] Adding changes from build igniteui-xplat-examples-output+PRs_2024.12.17.3 --- .../financial-dashboard/.eslintrc.js | 78 +++++++++++++ .../financial-dashboard/package.json | 52 +++++++++ .../financial-dashboard/public/index.html | 11 ++ .../financial-dashboard/sandbox.config.json | 5 + .../financial-dashboard/src/MultipleStocks.ts | 107 ++++++++++++++++++ .../financial-dashboard/src/index.css | 2 + .../financial-dashboard/src/index.tsx | 61 ++++++++++ .../src/react-app-env.d.ts | 1 + .../financial-dashboard/tsconfig.json | 45 ++++++++ .../color-editor-support/src/index.tsx | 2 - .../grids/pivot-grid/features/src/index.tsx | 8 +- .../color-editor/overview/src/index.tsx | 2 +- 12 files changed, 367 insertions(+), 7 deletions(-) create mode 100644 samples/charts/dashboard-tile/financial-dashboard/.eslintrc.js create mode 100644 samples/charts/dashboard-tile/financial-dashboard/package.json create mode 100644 samples/charts/dashboard-tile/financial-dashboard/public/index.html create mode 100644 samples/charts/dashboard-tile/financial-dashboard/sandbox.config.json create mode 100644 samples/charts/dashboard-tile/financial-dashboard/src/MultipleStocks.ts create mode 100644 samples/charts/dashboard-tile/financial-dashboard/src/index.css create mode 100644 samples/charts/dashboard-tile/financial-dashboard/src/index.tsx create mode 100644 samples/charts/dashboard-tile/financial-dashboard/src/react-app-env.d.ts create mode 100644 samples/charts/dashboard-tile/financial-dashboard/tsconfig.json diff --git a/samples/charts/dashboard-tile/financial-dashboard/.eslintrc.js b/samples/charts/dashboard-tile/financial-dashboard/.eslintrc.js new file mode 100644 index 0000000000..7168b71441 --- /dev/null +++ b/samples/charts/dashboard-tile/financial-dashboard/.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" + } + } + ] + }; \ No newline at end of file diff --git a/samples/charts/dashboard-tile/financial-dashboard/package.json b/samples/charts/dashboard-tile/financial-dashboard/package.json new file mode 100644 index 0000000000..2f5c0e6f4e --- /dev/null +++ b/samples/charts/dashboard-tile/financial-dashboard/package.json @@ -0,0 +1,52 @@ +{ + "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.4", + "igniteui-react-charts": "18.7.5-beta.1", + "igniteui-react-core": "18.7.5-beta.1", + "igniteui-react-dashboards": "18.7.5-beta.1", + "igniteui-react-datasources": "18.7.5-beta.1", + "igniteui-react-gauges": "18.7.5-beta.1", + "igniteui-react-grids": "18.7.5-beta.1", + "igniteui-react-inputs": "18.7.5-beta.1", + "igniteui-react-layouts": "18.7.5-beta.1", + "igniteui-react-maps": "18.7.5-beta.1", + "igniteui-webcomponents": "5.1.2", + "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/dashboard-tile/financial-dashboard/public/index.html b/samples/charts/dashboard-tile/financial-dashboard/public/index.html new file mode 100644 index 0000000000..e2d3265576 --- /dev/null +++ b/samples/charts/dashboard-tile/financial-dashboard/public/index.html @@ -0,0 +1,11 @@ + + + + Sample | Ignite UI | React | infragistics + + + + +
+ + \ No newline at end of file diff --git a/samples/charts/dashboard-tile/financial-dashboard/sandbox.config.json b/samples/charts/dashboard-tile/financial-dashboard/sandbox.config.json new file mode 100644 index 0000000000..07f53508eb --- /dev/null +++ b/samples/charts/dashboard-tile/financial-dashboard/sandbox.config.json @@ -0,0 +1,5 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser" +} \ No newline at end of file diff --git a/samples/charts/dashboard-tile/financial-dashboard/src/MultipleStocks.ts b/samples/charts/dashboard-tile/financial-dashboard/src/MultipleStocks.ts new file mode 100644 index 0000000000..3688676b43 --- /dev/null +++ b/samples/charts/dashboard-tile/financial-dashboard/src/MultipleStocks.ts @@ -0,0 +1,107 @@ +//begin async data +export class MultipleStocks extends Array> { + public static async fetch(): Promise { + const dataSources: any[] = [ + //await this.getAmazonStock(), + await this.getGoogleStock(), + await this.getAmazonStock(), + //await this.getTeslaStock() + ]; + return new Promise((resolve, reject) => { + resolve(dataSources); + }); + } + + /** gets Amazon stock OHLC prices from a .JSON file */ + public static async getAmazonStock(): Promise { + let url = "https://static.infragistics.com/xplatform/data/stocks/stockAmazon.json"; + let response = await fetch(url); + let jsonData = await response.json(); + let stockData = this.convertData(jsonData); + // setting data intent for Series Title, e.g. FinancialChart usage + (stockData as any).__dataIntents = { + close: ["SeriesTitle/Amazon"] + }; + // console.log("fetchAmazonStock: ", stockData.length); + + return new Promise((resolve, reject) => { + resolve(stockData); + }); + } + + /** gets Tesla stock OHLC prices from a .JSON file */ + public static async getTeslaStock(): Promise { + let url = "https://static.infragistics.com/xplatform/data/stocks/stockTesla.json"; + let response = await fetch(url); + let jsonData = await response.json(); + let stockData = this.convertData(jsonData); + // setting data intent for Series Title, e.g. FinancialChart usage + (stockData as any).__dataIntents = { + close: ["SeriesTitle/Tesla"] + }; + return new Promise((resolve, reject) => { + resolve(stockData); + }); + } + + /** gets Microsoft stock OHLC prices from a .JSON file */ + public static async getMicrosoftStock(): Promise { + let url = "https://static.infragistics.com/xplatform/data/stocks/stockMicrosoft.json"; + let response = await fetch(url); + let jsonData = await response.json(); + let stockData = this.convertData(jsonData); + // setting data intent for Series Title, e.g. FinancialChart usage + (stockData as any).__dataIntents = { + close: ["SeriesTitle/Microsoft"] + }; + return new Promise((resolve, reject) => { + resolve(stockData); + }); + } + + /** gets Google stock OHLC prices from a .JSON file */ + public static async getGoogleStock(): Promise { + let url = "https://static.infragistics.com/xplatform/data/stocks/stockGoogle.json"; + let response = await fetch(url); + let jsonData = await response.json(); + let stockData = this.convertData(jsonData); + // setting data intent for Series Title, e.g. FinancialChart usage + (stockData as any).__dataIntents = { + close: ["SeriesTitle/Google"] + }; + return new Promise((resolve, reject) => { + resolve(stockData); + }); + } + + public static convertData(jsonData: any[]): StockItem[] { + let stockItems: StockItem[] = []; + + for (let json of jsonData) { + let parts = json.date.split("-"); // "2020-01-01" + let item = new StockItem(); + item.date = new Date(parts[0], parts[1], parts[2]); + item.open = json.open; + item.high = json.high; + item.low = json.low; + item.close = json.close; + item.volume = json.volume; + stockItems.push(item); + + } + + return stockItems; + } + } + + export class StockItem { + public open?: number; + public close?: number; + public high?: number; + public low?: number; + public volume?: number; + + public date?: Date; + + } +//end async data \ No newline at end of file diff --git a/samples/charts/dashboard-tile/financial-dashboard/src/index.css b/samples/charts/dashboard-tile/financial-dashboard/src/index.css new file mode 100644 index 0000000000..98682b8543 --- /dev/null +++ b/samples/charts/dashboard-tile/financial-dashboard/src/index.css @@ -0,0 +1,2 @@ +/* shared styles are loaded from: */ +/* https://static.infragistics.com/xplatform/css/samples */ diff --git a/samples/charts/dashboard-tile/financial-dashboard/src/index.tsx b/samples/charts/dashboard-tile/financial-dashboard/src/index.tsx new file mode 100644 index 0000000000..3c4096863a --- /dev/null +++ b/samples/charts/dashboard-tile/financial-dashboard/src/index.tsx @@ -0,0 +1,61 @@ +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import './index.css'; + +import { IgrDashboardTileModule, IgrDataChartDashboardTileModule, IgrGeographicMapDashboardTileModule, IgrLinearGaugeDashboardTileModule, IgrPieChartDashboardTileModule, IgrRadialGaugeDashboardTileModule } from 'igniteui-react-dashboards'; +import { IgrDashboardTile } from 'igniteui-react-dashboards'; +import { MultipleStocks } from './MultipleStocks'; + +const mods: any[] = [ + IgrDashboardTileModule, + IgrDataChartDashboardTileModule, + IgrGeographicMapDashboardTileModule, + IgrLinearGaugeDashboardTileModule, + IgrPieChartDashboardTileModule, + IgrRadialGaugeDashboardTileModule +]; +mods.forEach((m) => m.register()); + +export default class Sample extends React.Component { + private dashboard: IgrDashboardTile + private dashboardRef(r: IgrDashboardTile) { + this.dashboard = r; + this.setState({}); + } + + constructor(props: any) { + super(props); + + this.dashboardRef = this.dashboardRef.bind(this); + } + + public render(): JSX.Element { + return ( +
+ +
+ + +
+
+ ); + } + + private _multipleStocks: MultipleStocks = null; + private _isFetching: boolean = false; + public get multipleStocks(): MultipleStocks { + if (this._multipleStocks == null && !this._isFetching) + { + this._isFetching = true; + ( async () => { this._multipleStocks = await (await MultipleStocks.fetch()); this.setState({}); })(); + } + return this._multipleStocks; + } + +} + +// rendering above component in the React DOM +const root = ReactDOM.createRoot(document.getElementById('root')); +root.render(); \ No newline at end of file diff --git a/samples/charts/dashboard-tile/financial-dashboard/src/react-app-env.d.ts b/samples/charts/dashboard-tile/financial-dashboard/src/react-app-env.d.ts new file mode 100644 index 0000000000..6431bc5fc6 --- /dev/null +++ b/samples/charts/dashboard-tile/financial-dashboard/src/react-app-env.d.ts @@ -0,0 +1 @@ +/// diff --git a/samples/charts/dashboard-tile/financial-dashboard/tsconfig.json b/samples/charts/dashboard-tile/financial-dashboard/tsconfig.json new file mode 100644 index 0000000000..42c6ace1da --- /dev/null +++ b/samples/charts/dashboard-tile/financial-dashboard/tsconfig.json @@ -0,0 +1,45 @@ +{ + "compilerOptions": { + "resolveJsonModule": true, + "esModuleInterop": true, + "baseUrl": ".", + "outDir": "build/dist", + "module": "esnext", + "target": "es5", + "lib": [ + "es6", + "dom" + ], + "sourceMap": true, + "allowJs": true, + "jsx": "react-jsx", + "moduleResolution": "node", + "rootDir": "src", + "forceConsistentCasingInFileNames": true, + "noImplicitReturns": true, + "noImplicitThis": true, + "noImplicitAny": true, + "noUnusedLocals": false, + "importHelpers": true, + "suppressImplicitAnyIndexErrors": true, + "allowSyntheticDefaultImports": true, + "skipLibCheck": true, + "strict": false, + "isolatedModules": true, + "noEmit": true + }, + "exclude": [ + "node_modules", + "build", + "scripts", + "acceptance-tests", + "webpack", + "jest", + "src/setupTests.ts", + "**/odatajs-4.0.0.js", + "config-overrides.js" + ], + "include": [ + "src" + ] +} diff --git a/samples/charts/toolbar/color-editor-support/src/index.tsx b/samples/charts/toolbar/color-editor-support/src/index.tsx index fefd379365..59bad996b5 100644 --- a/samples/charts/toolbar/color-editor-support/src/index.tsx +++ b/samples/charts/toolbar/color-editor-support/src/index.tsx @@ -2,7 +2,6 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; -import { IgrXIconModule } from 'igniteui-react-inputs'; import { IgrToolbarModule, IgrToolActionComboModule, IgrToolActionColorEditorModule } from 'igniteui-react-layouts'; import { IgrDataChartToolbarModule, IgrDataLegendModule, IgrNumberAbbreviatorModule, IgrDataChartCategoryModule, IgrDataChartCoreModule, IgrDataChartAnnotationModule, IgrDataChartInteractivityModule } from 'igniteui-react-charts'; import { IgrToolbar, IgrToolActionColorEditor } from 'igniteui-react-layouts'; @@ -12,7 +11,6 @@ import { IgrToolCommandEventArgs } from 'igniteui-react-layouts'; import { IgrSeries } from 'igniteui-react-charts'; const mods: any[] = [ - IgrXIconModule, IgrToolbarModule, IgrToolActionComboModule, IgrToolActionColorEditorModule, diff --git a/samples/grids/pivot-grid/features/src/index.tsx b/samples/grids/pivot-grid/features/src/index.tsx index 5c59f9d0c4..8da3538fc5 100644 --- a/samples/grids/pivot-grid/features/src/index.tsx +++ b/samples/grids/pivot-grid/features/src/index.tsx @@ -3,7 +3,7 @@ import ReactDOM from 'react-dom/client'; import './index.css'; import { IgrPivotGridModule } from 'igniteui-react-grids'; -import { IgrPivotGrid, IgrPivotConfiguration, IgrPivotDateDimension, IgrPivotDimension, IgrPivotDateDimensionOptions, SortingDirection, IgrPivotValue, IgrPivotAggregator, PivotAggregationType } from 'igniteui-react-grids'; +import { IgrPivotGrid, IgrPivotConfiguration, IgrPivotDateDimension, IgrPivotDimension, IgrPivotDateDimensionOptions, SortingDirection, IgrPivotValue, IgrPivotAggregator } from 'igniteui-react-grids'; import { PivotDataFlatItem, PivotDataFlat } from './PivotDataFlat'; import 'igniteui-react-grids/grids/combined'; @@ -66,18 +66,18 @@ export default class Sample extends React.Component { SumOfSale.key = "SUM"; SumOfSale.label = "Sum of Sale"; SumOfSale.aggregator = this.pivotDataFlatAggregateSumSale; - SumOfSale.aggregatorName = PivotAggregationType.SUM; + SumOfSale.aggregatorName = "SUM"; var MinOfSale = new IgrPivotAggregator(); MinOfSale.key = "MIN"; MinOfSale.label = "Minimum of Sale"; MinOfSale.aggregator = this.pivotDataFlatAggregateMinSale; - MinOfSale.aggregatorName = PivotAggregationType.MIN; + MinOfSale.aggregatorName = "MIN"; var MaxOfSale = new IgrPivotAggregator(); MaxOfSale.key = "MAX"; MaxOfSale.label = "Maximum of Sale"; - MaxOfSale.aggregatorName = PivotAggregationType.MAX; + MaxOfSale.aggregatorName = "MAX"; MaxOfSale.aggregator = this.pivotDataFlatAggregateMaxSale; igrPivotValue1.aggregateList = [SumOfSale,MinOfSale,MaxOfSale]; diff --git a/samples/inputs/color-editor/overview/src/index.tsx b/samples/inputs/color-editor/overview/src/index.tsx index cb5bd3db5a..907002da50 100644 --- a/samples/inputs/color-editor/overview/src/index.tsx +++ b/samples/inputs/color-editor/overview/src/index.tsx @@ -3,7 +3,7 @@ import ReactDOM from 'react-dom/client'; import './index.css'; import { IgrColorEditorModule } from 'igniteui-react-inputs'; -import { IgrColorEditor } from 'igniteui-react-inputs'; +import { IgrColorEditor } from 'igniteui-react-dashboards'; const mods: any[] = [ IgrColorEditorModule