Skip to content

Commit dd81769

Browse files
InaGlushkovaInaGlushkova
committed
chore: add kendo-react-grid-performance app
1 parent 79d57a5 commit dd81769

File tree

25 files changed

+1475
-0
lines changed

25 files changed

+1475
-0
lines changed

‎examples/kendo-react-grid-performance/.gitignore‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/.pnp
6+
.pnp.js
7+
8+
# testing
9+
/coverage
10+
11+
# production
12+
/build
13+
14+
# misc
15+
.DS_Store
16+
.env.local
17+
.env.development.local
18+
.env.test.local
19+
.env.production.local
20+
**/kendo-ui-license**
21+
22+
npm-debug.log*
23+
yarn-debug.log*
24+
yarn-error.log*
25+
26+
# package-lock file
27+
package-lock.json

‎examples/kendo-react-grid-performance/README.md‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
The start the application locally follow these steps:
2+
3+
1. Clone or download the source code from GitHub.
4+
1. Install the required dependencies using `npm install --save`.
5+
1. Check and activate your license - https://www.telerik.com/kendo-react-ui/components/my-license/
6+
1. Run the application using `npm start`.
7+
1. To build it for production with the profiler active using the command `npm run build -- --profile`.
8+
1. Then serve the create production build with `serve -s build`.
9+
1. Observe the real performance results from the production build.

‎examples/kendo-react-grid-performance/package.json‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
{
2+
"name": "kendo-react-grid-performance",
3+
"version": "0.1.0",
4+
"private": true,
5+
"dependencies": {
6+
"@progress/kendo-react-grid": "7.1.0",
7+
"@progress/kendo-data-query": "1.7.0",
8+
"@progress/kendo-drawing": "1.19.0",
9+
"@progress/kendo-licensing": "1.3.5",
10+
"@progress/kendo-svg-icons": "2.1.0",
11+
"@progress/kendo-react-common": "7.1.0",
12+
"@progress/kendo-react-animation": "7.1.0",
13+
"@progress/kendo-popup-common": "1.9.2",
14+
"@progress/kendo-react-popup": "7.1.0",
15+
"@progress/kendo-react-buttons": "7.1.0",
16+
"@progress/kendo-date-math": "1.5.12",
17+
"@progress/kendo-intl": "3.1.2",
18+
"@progress/kendo-react-intl": "7.1.0",
19+
"@progress/kendo-react-labels": "7.1.0",
20+
"@progress/kendo-react-progressbars": "7.1.0",
21+
"@progress/kendo-react-layout": "7.1.0",
22+
"@progress/kendo-react-dateinputs": "7.1.0",
23+
"@progress/kendo-inputs-common": "3.1.0",
24+
"@progress/kendo-react-dialogs": "7.1.0",
25+
"@progress/kendo-react-form": "7.1.0",
26+
"@progress/kendo-react-inputs": "7.1.0",
27+
"@progress/kendo-react-treeview": "7.1.0",
28+
"@progress/kendo-react-dropdowns": "7.1.0",
29+
"@progress/kendo-react-data-tools": "7.1.0",
30+
"@progress/kendo-theme-default": "^7.2.0",
31+
"react": "^18.2.0",
32+
"react-dom": "^18.2.0",
33+
"react-scripts": "^5.0.1",
34+
"web-vitals": "^3.4.0"
35+
},
36+
"scripts": {
37+
"start": "react-scripts start",
38+
"build": "react-scripts build",
39+
"test": "react-scripts test",
40+
"eject": "react-scripts eject"
41+
},
42+
"eslintConfig": {
43+
"extends": [
44+
"react-app",
45+
"react-app/jest"
46+
]
47+
},
48+
"browserslist": {
49+
"production": [
50+
">0.2%",
51+
"not dead",
52+
"not op_mini all"
53+
],
54+
"development": [
55+
"last 1 chrome version",
56+
"last 1 firefox version",
57+
"last 1 safari version"
58+
]
59+
}
60+
}

‎examples/kendo-react-grid-performance/public/favicon.ico‎

3.78 KB
Binary file not shown.

‎examples/kendo-react-grid-performance/public/index.html‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1" />
7+
<meta name="theme-color" content="#000000" />
8+
<meta
9+
name="description"
10+
content="Web site created using create-react-app"
11+
/>
12+
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
13+
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
14+
<!--
15+
manifest.json provides metadata used when your web app is installed on a
16+
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
17+
-->
18+
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
19+
<!--
20+
Notice the use of %PUBLIC_URL% in the tags above.
21+
It will be replaced with the URL of the `public` folder during the build.
22+
Only files inside the `public` folder can be referenced from the HTML.
23+
24+
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
25+
work correctly both with client-side routing and a non-root public URL.
26+
Learn how to configure a non-root public URL by running `npm run build`.
27+
-->
28+
<title>React App</title>
29+
</head>
30+
<body>
31+
<noscript>You need to enable JavaScript to run this app.</noscript>
32+
<div id="root"></div>
33+
<!--
34+
This HTML file is a template.
35+
If you open it directly in the browser, you will see an empty page.
36+
37+
You can add webfonts, meta tags, or analytics to this file.
38+
The build step will place the bundled scripts into the <body> tag.
39+
40+
To begin the development, run `npm start` or `yarn start`.
41+
To create a production bundle, use `npm run build` or `yarn build`.
42+
-->
43+
</body>
44+
</html>

‎examples/kendo-react-grid-performance/public/logo192.png‎

5.22 KB
Loading

‎examples/kendo-react-grid-performance/public/logo512.png‎

9.44 KB
Loading

‎examples/kendo-react-grid-performance/public/manifest.json‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
{
2+
"short_name": "React App",
3+
"name": "Create React App Sample",
4+
"icons": [
5+
{
6+
"src": "favicon.ico",
7+
"sizes": "64x64 32x32 24x24 16x16",
8+
"type": "image/x-icon"
9+
},
10+
{
11+
"src": "logo192.png",
12+
"type": "image/png",
13+
"sizes": "192x192"
14+
},
15+
{
16+
"src": "logo512.png",
17+
"type": "image/png",
18+
"sizes": "512x512"
19+
}
20+
],
21+
"start_url": ".",
22+
"display": "standalone",
23+
"theme_color": "#000000",
24+
"background_color": "#ffffff"
25+
}

‎examples/kendo-react-grid-performance/public/robots.txt‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# https://www.robotstxt.org/robotstxt.html
2+
User-agent: *
3+
Disallow:

‎examples/kendo-react-grid-performance/src/App.css‎

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
/* You can add global styles to this file, and also import other style files */
2+
body {
3+
margin: 0;
4+
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
5+
font-size: 1rem;
6+
font-weight: 400;
7+
line-height: 1.5;
8+
color: #212529;
9+
text-align: left;
10+
background-color: #fff;
11+
}
12+
13+
.k-grid-table td {
14+
white-space: nowrap;
15+
text-overflow: ellipsis;
16+
overflow: hidden;
17+
}
18+
19+
.k-grid-table td.numeric {
20+
text-align: right;
21+
}
22+
23+
.k-grid-table .fintech-icons .k-icon {
24+
flex: 0 1 auto;
25+
font-size: 16px;
26+
width: 16px;
27+
height: 16px;
28+
margin-left: 4px;
29+
}
30+
31+
.k-grid-table .fintech-icons {
32+
display: flex;
33+
justify-content: flex-end;
34+
}
35+
36+
.k-grid-table .changePositive,
37+
.k-grid-table .changeNegative,
38+
.k-grid-table .strongPositive,
39+
.k-grid-table .strongNegative {
40+
color: #fff !important;
41+
padding: 2px 5px;
42+
}
43+
44+
.k-grid-table .positive {
45+
color: #4eb862 !important;
46+
}
47+
48+
.k-grid-table .positive.strongPositive {
49+
color: rgba(78, 184, 98, 0.8) !important;
50+
}
51+
52+
.k-grid-table .negative {
53+
color: #d31642 !important;
54+
}
55+
56+
.k-grid-table .negative.strongNegative {
57+
color: rgba(255, 19, 74, 0.8) !important;
58+
}
59+
60+
.k-grid-table .strongNegative {
61+
color: #fff;
62+
}
63+
64+
.k-grid-table .change .changePositive {
65+
border-right: 4px solid #335e3b;
66+
padding-right: 4px;
67+
}
68+
69+
.k-grid-table .change .changeNegative {
70+
border-right: 4px solid #7a1c32;
71+
padding-right: 4px;
72+
}
73+
74+
.k-grid-table .change .strongPositive {
75+
border-right: 4px solid #459a55;
76+
padding-right: 4px;
77+
}
78+
79+
.k-grid-table .change .strongNegative {
80+
border-right: 4px solid #d31642;
81+
padding-right: 4px;
82+
}
83+
84+
.controls-holder {
85+
display: flex;
86+
justify-content: space-between;
87+
align-items: center;
88+
flex-wrap: wrap;
89+
}
90+
91+
.switches {
92+
display: flex;
93+
justify-content: space-between;
94+
align-items: center;
95+
flex: 1 0 0%;
96+
padding-right: 20px;
97+
font-size: 0.9rem;
98+
margin-bottom: -20px;
99+
}
100+
101+
.control-item {
102+
padding-right: 20px;
103+
}
104+
105+
.k-slider {
106+
height: 24px;
107+
display: block;
108+
}
109+
110+
.fintech-slider {
111+
width: 40%;
112+
min-width: 145px;
113+
}
114+
115+
.fintech-play-controls {
116+
width: 45%;
117+
min-width: 500px;
118+
margin-top: 20px;
119+
}
120+
121+
.fintech-play-controls button {
122+
width: 200px;
123+
}
124+
125+
.sample-toolbar {
126+
height: 20px;
127+
font-size: 0.8rem;
128+
line-height: 20px;
129+
}

0 commit comments

Comments
 (0)