diff --git a/samples/charts/data-chart/range-bar-chart/.devcontainer/devcontainer.json b/samples/charts/data-chart/range-bar-chart/.devcontainer/devcontainer.json new file mode 100644 index 0000000000..e0b8e9c925 --- /dev/null +++ b/samples/charts/data-chart/range-bar-chart/.devcontainer/devcontainer.json @@ -0,0 +1,4 @@ +{ + "name": "Node.js", + "image": "mcr.microsoft.com/devcontainers/javascript-node:22" +} \ No newline at end of file diff --git a/samples/charts/data-chart/range-bar-chart/.eslintrc.js b/samples/charts/data-chart/range-bar-chart/.eslintrc.js new file mode 100644 index 0000000000..7168b71441 --- /dev/null +++ b/samples/charts/data-chart/range-bar-chart/.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/data-chart/range-bar-chart/index.html b/samples/charts/data-chart/range-bar-chart/index.html new file mode 100644 index 0000000000..7ccd41dace --- /dev/null +++ b/samples/charts/data-chart/range-bar-chart/index.html @@ -0,0 +1,12 @@ + + + + Sample | Ignite UI | React | infragistics + + + + +
+ + + \ No newline at end of file diff --git a/samples/charts/data-chart/range-bar-chart/package.json b/samples/charts/data-chart/range-bar-chart/package.json new file mode 100644 index 0000000000..2818488cf6 --- /dev/null +++ b/samples/charts/data-chart/range-bar-chart/package.json @@ -0,0 +1,48 @@ +{ + "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": "vite --port 4200", + "build": "tsc && node --max-old-space-size=4096 node_modules/vite/bin/vite build", + "preview": "vite preview", + "test": "vitest", + "lint": "eslint ./src/**/*.{ts,tsx}" + }, + "dependencies": { + "igniteui-react": "^19.6.2", + "igniteui-react-charts": "19.6.0-beta.2", + "igniteui-react-core": "19.6.0-beta.2", + "igniteui-webcomponents": "^7.0.0", + "lit-html": "^3.2.0", + "react": "^19.2.0", + "react-dom": "^19.2.0", + "tslib": "^2.4.0" + }, + "devDependencies": { + "@types/jest": "^29.2.0", + "@types/node": "^24.7.1", + "@types/react": "^18.0.24", + "@types/react-dom": "^18.0.8", + "@vitejs/plugin-react": "^5.0.4", + "@vitest/browser": "^3.2.4", + "eslint": "^8.33.0", + "eslint-config-react": "^1.1.7", + "eslint-plugin-react": "^7.20.0", + "typescript": "^4.8.4", + "vite": "^7.1.9", + "vitest": "^3.2.4", + "vitest-canvas-mock": "^0.3.3", + "worker-loader": "^3.0.8" + }, + "browserslist": [ + ">0.2%", + "not dead", + "not ie <= 11", + "not op_mini all" + ] +} diff --git a/samples/charts/data-chart/range-bar-chart/sandbox.config.json b/samples/charts/data-chart/range-bar-chart/sandbox.config.json new file mode 100644 index 0000000000..07f53508eb --- /dev/null +++ b/samples/charts/data-chart/range-bar-chart/sandbox.config.json @@ -0,0 +1,5 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser" +} \ No newline at end of file diff --git a/samples/charts/data-chart/range-bar-chart/src/TemperatureRangeData.ts b/samples/charts/data-chart/range-bar-chart/src/TemperatureRangeData.ts new file mode 100644 index 0000000000..03846d1526 --- /dev/null +++ b/samples/charts/data-chart/range-bar-chart/src/TemperatureRangeData.ts @@ -0,0 +1,35 @@ +export class TemperatureRangeDataItem { + public constructor(init: Partial) { + Object.assign(this, init); + } + + public month: string; + public highNY: number; + public lowNY: number; + public highLA: number; + public lowLA: number; + +} +export class TemperatureRangeData extends Array { + public constructor(items: Array | number = -1) { + if (Array.isArray(items)) { + super(...items); + } else { + const newItems = [ + new TemperatureRangeDataItem({ month: `Jan`, highNY: 10.6, lowNY: -6.6, highLA: 28.3, lowLA: 7.8 }), + new TemperatureRangeDataItem({ month: `Feb`, highNY: 7.8, lowNY: -9.9, highLA: 31.1, lowLA: 5.6 }), + new TemperatureRangeDataItem({ month: `Mar`, highNY: 12.2, lowNY: -3.8, highLA: 27.8, lowLA: 8.3 }), + new TemperatureRangeDataItem({ month: `Apr`, highNY: 11.7, lowNY: 2.2, highLA: 33.9, lowLA: 10.6 }), + new TemperatureRangeDataItem({ month: `May`, highNY: 19.4, lowNY: 1.1, highLA: 35, lowLA: 13.9 }), + new TemperatureRangeDataItem({ month: `Jun`, highNY: 23.3, lowNY: 10.6, highLA: 36.7, lowLA: 16.1 }), + new TemperatureRangeDataItem({ month: `Jul`, highNY: 27.2, lowNY: 19.4, highLA: 33.3, lowLA: 15.6 }), + new TemperatureRangeDataItem({ month: `Aug`, highNY: 25.6, lowNY: 16.7, highLA: 36.7, lowLA: 15.6 }), + new TemperatureRangeDataItem({ month: `Sep`, highNY: 22.8, lowNY: 8.9, highLA: 43.9, lowLA: 16.1 }), + new TemperatureRangeDataItem({ month: `Oct`, highNY: 17.8, lowNY: 0, highLA: 38.3, lowLA: 11.1 }), + new TemperatureRangeDataItem({ month: `Nov`, highNY: 17.8, lowNY: -1, highLA: 32.8, lowLA: 6.7 }), + new TemperatureRangeDataItem({ month: `Dec`, highNY: 8.3, lowNY: -6.6, highLA: 28.9, lowLA: 5.6 }), + ]; + super(...newItems.slice(0)); + } + } +} diff --git a/samples/charts/data-chart/range-bar-chart/src/index.css b/samples/charts/data-chart/range-bar-chart/src/index.css new file mode 100644 index 0000000000..7eb1c7c38e --- /dev/null +++ b/samples/charts/data-chart/range-bar-chart/src/index.css @@ -0,0 +1,2 @@ +/* shared styles are loaded from: */ +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ diff --git a/samples/charts/data-chart/range-bar-chart/src/index.tsx b/samples/charts/data-chart/range-bar-chart/src/index.tsx new file mode 100644 index 0000000000..e0250ebd87 --- /dev/null +++ b/samples/charts/data-chart/range-bar-chart/src/index.tsx @@ -0,0 +1,117 @@ +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import './index.css'; + +import { IgrDataChartCoreModule, IgrDataChartCategoryModule, IgrDataChartInteractivityModule, IgrDataChartAnnotationModule, IgrLegendModule } from 'igniteui-react-charts'; +import { IgrLegend, IgrDataChart, IgrCategoryYAxis, IgrNumericXAxis, IgrRangeBarSeries, IgrDataToolTipLayer } from 'igniteui-react-charts'; +import { TemperatureRangeDataItem, TemperatureRangeData } from './TemperatureRangeData'; + +const mods: any[] = [ + IgrDataChartCoreModule, + IgrDataChartCategoryModule, + IgrDataChartInteractivityModule, + IgrDataChartAnnotationModule, + IgrLegendModule +]; +mods.forEach((m) => m.register()); + +export default class Sample extends React.Component { + private legend: IgrLegend + private legendRef(r: IgrLegend) { + this.legend = r; + this.setState({}); + } + private chart: IgrDataChart + private chartRef(r: IgrDataChart) { + this.chart = r; + this.setState({}); + } + private yAxis: IgrCategoryYAxis + private xAxis: IgrNumericXAxis + private rangeBarSeries1: IgrRangeBarSeries + private rangeBarSeries2: IgrRangeBarSeries + private dataToolTipLayer: IgrDataToolTipLayer + + constructor(props: any) { + super(props); + + this.legendRef = this.legendRef.bind(this); + this.chartRef = this.chartRef.bind(this); + } + + public render(): JSX.Element { + return ( +
+ +
+ Monthly Temperature Range in LA and NYC +
+ +
+ + +
+ +
+ + + + + + + + + + + + +
+
+ ); + } + + private _temperatureRangeData: TemperatureRangeData = null; + public get temperatureRangeData(): TemperatureRangeData { + if (this._temperatureRangeData == null) + { + this._temperatureRangeData = new TemperatureRangeData(); + } + return this._temperatureRangeData; + } + +} + +// 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/data-chart/range-bar-chart/tsconfig.json b/samples/charts/data-chart/range-bar-chart/tsconfig.json new file mode 100644 index 0000000000..8c0d146f95 --- /dev/null +++ b/samples/charts/data-chart/range-bar-chart/tsconfig.json @@ -0,0 +1,44 @@ +{ + "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, + "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/data-chart/range-bar-chart/vite.config.js b/samples/charts/data-chart/range-bar-chart/vite.config.js new file mode 100644 index 0000000000..1744dbc719 --- /dev/null +++ b/samples/charts/data-chart/range-bar-chart/vite.config.js @@ -0,0 +1,12 @@ +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; + +export default defineConfig({ + plugins: [react()], + build: { + outDir: 'build' + }, + server: { + open: false + }, +}); \ No newline at end of file