Skip to content

Commit 4325bc3

Browse files
agoldenbaumagoldenbaum
authored
User Annotation Layer sample for React (#956)
1 parent f5c723f commit 4325bc3

File tree

11 files changed

+550
-0
lines changed

11 files changed

+550
-0
lines changed

‎samples/charts/data-chart/user-annotation-layer/.devcontainer/devcontainer.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"name": "Node.js",
3+
"image": "mcr.microsoft.com/devcontainers/javascript-node:22"
4+
}

‎samples/charts/data-chart/user-annotation-layer/.eslintrc.js‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
// https://www.robertcooper.me/using-eslint-and-prettier-in-a-typescript-project
2+
module.exports = {
3+
parser: "@typescript-eslint/parser", // Specifies the ESLint parser
4+
parserOptions: {
5+
ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features
6+
sourceType: "module", // Allows for the use of imports
7+
ecmaFeatures: {
8+
jsx: true // Allows for the parsing of JSX
9+
}
10+
},
11+
settings: {
12+
react: {
13+
version: "999.999.999" // Tells eslint-plugin-react to automatically detect the version of React to use
14+
}
15+
},
16+
extends: [
17+
"eslint:recommended",
18+
"plugin:react/recommended", // Uses the recommended rules from @eslint-plugin-react
19+
"plugin:@typescript-eslint/recommended" // Uses the recommended rules from @typescript-eslint/eslint-plugin
20+
],
21+
rules: {
22+
// Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
23+
"default-case": "off",
24+
"jsx-a11y/alt-text": "off",
25+
"jsx-a11y/iframe-has-title": "off",
26+
"no-undef": "off",
27+
"no-unused-vars": "off",
28+
"no-extend-native": "off",
29+
"no-throw-literal": "off",
30+
"no-useless-concat": "off",
31+
"no-mixed-operators": "off",
32+
"no-prototype-builtins": "off",
33+
"no-mixed-spaces-and-tabs": 0,
34+
"prefer-const": "off",
35+
"prefer-rest-params": "off",
36+
"@typescript-eslint/no-unused-vars": "off",
37+
"@typescript-eslint/no-explicit-any": "off",
38+
"@typescript-eslint/no-inferrable-types": "off",
39+
"@typescript-eslint/no-useless-constructor": "off",
40+
"@typescript-eslint/no-use-before-define": "off",
41+
"@typescript-eslint/no-non-null-assertion": "off",
42+
"@typescript-eslint/interface-name-prefix": "off",
43+
"@typescript-eslint/prefer-namespace-keyword": "off",
44+
"@typescript-eslint/explicit-function-return-type": "off",
45+
"@typescript-eslint/explicit-module-boundary-types": "off"
46+
},
47+
"overrides": [
48+
{
49+
"files": ["*.ts", "*.tsx"],
50+
"rules": {
51+
"default-case": "off",
52+
"jsx-a11y/alt-text": "off",
53+
"jsx-a11y/iframe-has-title": "off",
54+
"no-var": "off",
55+
"no-undef": "off",
56+
"no-unused-vars": "off",
57+
"no-extend-native": "off",
58+
"no-throw-literal": "off",
59+
"no-useless-concat": "off",
60+
"no-mixed-operators": "off",
61+
"no-mixed-spaces-and-tabs": 0,
62+
"no-prototype-builtins": "off",
63+
"prefer-const": "off",
64+
"prefer-rest-params": "off",
65+
"@typescript-eslint/no-unused-vars": "off",
66+
"@typescript-eslint/no-explicit-any": "off",
67+
"@typescript-eslint/no-inferrable-types": "off",
68+
"@typescript-eslint/no-useless-constructor": "off",
69+
"@typescript-eslint/no-use-before-define": "off",
70+
"@typescript-eslint/no-non-null-assertion": "off",
71+
"@typescript-eslint/interface-name-prefix": "off",
72+
"@typescript-eslint/prefer-namespace-keyword": "off",
73+
"@typescript-eslint/explicit-function-return-type": "off",
74+
"@typescript-eslint/explicit-module-boundary-types": "off"
75+
}
76+
}
77+
]
78+
};

‎samples/charts/data-chart/user-annotation-layer/ReadMe.md‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
<!-- NOTE: do not change this file because it's auto re-generated from template: -->
2+
<!-- https://github.com/IgniteUI/igniteui-react-examples/tree/vnext/templates/sample/ReadMe.md -->
3+
4+
This folder contains implementation of React application with example of Actions Built In Data Chart feature using [Toolbar](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component.
5+
6+
7+
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
8+
<body>
9+
<a target="_blank" href="https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html" rel="noopener noreferrer">
10+
<img height="40px" style="border-radius: 0rem" alt="View Docs" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-docs.png"/>
11+
</a>
12+
<a target="_blank" href="./src/index.tsx" rel="noopener noreferrer">
13+
<img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="View Code" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-code.png"/>
14+
</a>
15+
<a target="_blank" href="https://www.infragistics.com/react-demos/samples/charts/toolbar/actions-built-in-data-chart" rel="noopener noreferrer">
16+
<img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-run.png"/>
17+
</a>
18+
<a target="_blank" href="https://codesandbox.io/s/github/IgniteUI/igniteui-react-examples/tree/master/samples/charts/toolbar/actions-built-in-data-chart?fontsize=14&hidenavigation=1&theme=dark&view=preview&file=/src/index.tsx" rel="noopener noreferrer">
19+
<img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-sandbox.png"/>
20+
</a>
21+
</body>
22+
</html>
23+
24+
## Branches
25+
26+
> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-react-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-react-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
27+
28+
## Instructions
29+
30+
Follow these instructions to run this example:
31+
32+
33+
```
34+
git clone https://github.com/IgniteUI/igniteui-react-examples.git
35+
git checkout master
36+
cd ./igniteui-react-examples
37+
cd ./samples/charts/toolbar/actions-built-in-data-chart
38+
```
39+
40+
open above folder in VS Code or type:
41+
```
42+
code .
43+
```
44+
45+
In terminal window, run:
46+
```
47+
npm install --legacy-peer-deps
48+
npm run-script start
49+
```
50+
51+
Then open http://localhost:4200/ in your browser
52+
53+
54+
## Learn More
55+
56+
To learn more about **Ignite UI for React** components, check out the [React documentation](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html).

‎samples/charts/data-chart/user-annotation-layer/index.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<title>Sample | Ignite UI | React | infragistics</title>
5+
<link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/react.png" >
6+
<link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" />
7+
</head>
8+
<body>
9+
<div id="root"></div>
10+
<script type="module" src="/src/index.tsx"></script>
11+
</body>
12+
</html>

‎samples/charts/data-chart/user-annotation-layer/package.json‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
{
2+
"name": "example-ignite-ui-react",
3+
"description": "This project provides example of using Ignite UI for React components",
4+
"author": "Infragistics",
5+
"version": "1.4.0",
6+
"license": "",
7+
"homepage": ".",
8+
"private": true,
9+
"scripts": {
10+
"start": "vite --port 4200",
11+
"build": "tsc && node --max-old-space-size=4096 node_modules/vite/bin/vite build",
12+
"preview": "vite preview",
13+
"test": "vitest",
14+
"lint": "eslint ./src/**/*.{ts,tsx}"
15+
},
16+
"dependencies": {
17+
"igniteui-react": "^19.3.0",
18+
"igniteui-react-charts": "19.3.0-beta.0",
19+
"igniteui-react-core": "19.3.0-beta.0",
20+
"igniteui-react-inputs": "19.3.0-beta.0",
21+
"igniteui-react-layouts": "19.3.0-beta.0",
22+
"igniteui-webcomponents": "^6.3.0",
23+
"lit-html": "^3.2.0",
24+
"react": "^19.2.0",
25+
"react-dom": "^19.2.0",
26+
"tslib": "^2.4.0"
27+
},
28+
"devDependencies": {
29+
"@types/jest": "^29.2.0",
30+
"@types/node": "^24.7.1",
31+
"@types/react": "^18.0.24",
32+
"@types/react-dom": "^18.0.8",
33+
"@vitejs/plugin-react": "^5.0.4",
34+
"@vitest/browser": "^3.2.4",
35+
"eslint": "^8.33.0",
36+
"eslint-config-react": "^1.1.7",
37+
"eslint-plugin-react": "^7.20.0",
38+
"typescript": "^4.8.4",
39+
"vite": "^7.1.9",
40+
"vitest": "^3.2.4",
41+
"vitest-canvas-mock": "^0.3.3",
42+
"worker-loader": "^3.0.8"
43+
},
44+
"browserslist": [
45+
">0.2%",
46+
"not dead",
47+
"not ie <= 11",
48+
"not op_mini all"
49+
]
50+
}

‎samples/charts/data-chart/user-annotation-layer/sandbox.config.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"infiniteLoopProtection": false,
3+
"hardReloadOnChange": false,
4+
"view": "browser"
5+
}

‎samples/charts/data-chart/user-annotation-layer/src/CountryRenewableElectricity.ts‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
export class CountryRenewableElectricityItem {
2+
public constructor(init: Partial<CountryRenewableElectricityItem>) {
3+
Object.assign(this, init);
4+
}
5+
6+
public year: string;
7+
public europe: number;
8+
public china: number;
9+
public america: number;
10+
11+
}
12+
export class CountryRenewableElectricity extends Array<CountryRenewableElectricityItem> {
13+
public constructor(items: Array<CountryRenewableElectricityItem> | number = -1) {
14+
if (Array.isArray(items)) {
15+
super(...items);
16+
} else {
17+
const newItems = [
18+
new CountryRenewableElectricityItem({ year: `2009`, europe: 34, china: 21, america: 19 }),
19+
new CountryRenewableElectricityItem({ year: `2010`, europe: 43, china: 26, america: 24 }),
20+
new CountryRenewableElectricityItem({ year: `2011`, europe: 66, china: 29, america: 28 }),
21+
new CountryRenewableElectricityItem({ year: `2012`, europe: 69, china: 32, america: 26 }),
22+
new CountryRenewableElectricityItem({ year: `2013`, europe: 58, china: 47, america: 38 }),
23+
new CountryRenewableElectricityItem({ year: `2014`, europe: 40, china: 46, america: 31 }),
24+
new CountryRenewableElectricityItem({ year: `2015`, europe: 78, china: 50, america: 19 }),
25+
new CountryRenewableElectricityItem({ year: `2016`, europe: 13, china: 90, america: 52 }),
26+
new CountryRenewableElectricityItem({ year: `2017`, europe: 78, china: 132, america: 50 }),
27+
new CountryRenewableElectricityItem({ year: `2018`, europe: 40, china: 134, america: 34 }),
28+
new CountryRenewableElectricityItem({ year: `2018`, europe: 40, china: 134, america: 34 }),
29+
new CountryRenewableElectricityItem({ year: `2019`, europe: 80, china: 96, america: 38 }),
30+
];
31+
super(...newItems.slice(0));
32+
}
33+
}
34+
}

‎samples/charts/data-chart/user-annotation-layer/src/index.css‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
/* shared styles are loaded from: */
2+
/* https://static.infragistics.com/xplatform/css/samples */
3+
.aboveContentSplit {
4+
display: flex;
5+
flex-direction: row;
6+
}
7+
.aboveContentLeftContainer {
8+
margin-left: 1.25rem;
9+
display: flex;
10+
flex-grow: 1;
11+
justify-content: flex-start;
12+
align-items: flex-end;
13+
}
14+
.aboveContentRightContainer {
15+
margin-right: 1.25rem;
16+
display: flex;
17+
flex-grow: 1;
18+
justify-content: flex-end;
19+
align-items: flex-end;
20+
}
21+
22+
.annotationPopup {
23+
position: fixed;
24+
top: 50%;
25+
left: 50%;
26+
transform: translate(-50%, -50%);
27+
width: 20%;
28+
height: 350px;
29+
background-color: white;
30+
border: 1px black solid;
31+
display: none;
32+
border-radius: 5px;
33+
padding-left: 10px;
34+
padding-right: 10px;
35+
}

0 commit comments

Comments
 (0)