Skip to content

Commit 4a84404

Browse files
maksymkaDmaksymkaD
committed
Added Nextjs project
1 parent ac58a08 commit 4a84404

File tree

27 files changed

+1798
-1
lines changed

27 files changed

+1798
-1
lines changed

‎typescript-next/.gitignore

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
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+
# next.js
12+
/.next/
13+
/out/
14+
15+
# production
16+
/build
17+
18+
# misc
19+
.DS_Store
20+
*.pem
21+
22+
# debug
23+
npm-debug.log*
24+
yarn-debug.log*
25+
yarn-error.log*
26+
27+
# local env files
28+
.env*.local
29+
30+
# vercel
31+
.vercel
32+
33+
# typescript
34+
*.tsbuildinfo
35+
next-env.d.ts

‎typescript-next/README.md

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
# Flexmonster Pivot Table & Charts integration with React + Next + TypeScript
2+
[![Flexmonster Pivot Table & Charts](https://cdn.flexmonster.com/landing.png)](http://flexmonster.com/?r=rm_react)
3+
Website: [www.flexmonster.com](https://www.flexmonster.com/?r=rm_react)
4+
5+
## Flexmonster Pivot Table & Charts
6+
7+
Flexmonster Pivot is a powerful JavaScript tool for interactive web reporting. It allows you to visualize and analyze data from JSON, CSV, SQL, NoSQL, Elasticsearch, and OLAP data sources quickly and conveniently. Flexmonster is designed to integrate seamlessly with any client-side framework and can be easily embedded into your application.
8+
9+
This repository holds the source code for a simple [React](https://reactjs.org/) + TypeScript application with Flexmonster Pivot:
10+
11+
- [Prerequisites](#prerequisites)
12+
- [Installation](#installation)
13+
- [Usage](#usage)
14+
15+
## Prerequisites
16+
17+
To run a simple application with the React pivot table, you will need Node.js and npm. [Get it here](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm) if it's not already installed on your machine.
18+
19+
## Installation
20+
21+
1. Download the `.zip` archive with the sample project or clone it from GitHub with the following command:
22+
23+
```bash
24+
git clone https://github.com/flexmonster/pivot-react.git && cd pivot-react/typescript
25+
```
26+
27+
2. Install the npm packages described in `package.json`:
28+
29+
```bash
30+
npm install
31+
```
32+
33+
3. Run the sample React + Next + TypeScript project:
34+
35+
```bash
36+
npm run dev
37+
```
38+
39+
To see the result, open `http://localhost:3000/` in your browser.
40+
41+
## Usage
42+
43+
For details on usage, refer to the [Flexmonster integration with React](http://www.flexmonster.com/doc/integration-with-react/?r=rm_react) tutorial.

‎typescript-next/next.config.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
/** @type {import('next').NextConfig} */
2+
const nextConfig = {}
3+
4+
module.exports = nextConfig

‎typescript-next/package.json

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
{
2+
"name": "react-typescript-next",
3+
"version": "1.0.0",
4+
"private": true,
5+
"scripts": {
6+
"dev": "next dev",
7+
"build": "next build",
8+
"start": "next start",
9+
"lint": "next lint"
10+
},
11+
"dependencies": {
12+
"@amcharts/amcharts4": "^4.10.36",
13+
"@amcharts/amcharts5": "^5.3.15",
14+
"@types/node": "20.2.5",
15+
"@types/react": "18.2.8",
16+
"@types/react-dom": "18.2.4",
17+
"@types/react-router-dom": "^5.3.3",
18+
"highcharts": "^11.1.0",
19+
"next": "13.4.4",
20+
"react": "18.2.0",
21+
"react-dom": "18.2.0",
22+
"react-flexmonster": "^2.9.52",
23+
"react-router-dom": "^5.2.0",
24+
"typescript": "5.1.3"
25+
}
26+
}

‎typescript-next/public/next.svg

Lines changed: 1 addition & 0 deletions
Loading

‎typescript-next/public/vercel.svg

Lines changed: 1 addition & 0 deletions
Loading

‎typescript-next/src/UIElements/LogsList.tsx

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import * as React from "react";
2+
3+
type Props = {
4+
logsList: {
5+
date: Date,
6+
event: string
7+
}[],
8+
title: string
9+
};
10+
11+
const LogsList = (props: Props) => {
12+
13+
const {logsList, title} = props;
14+
15+
const logsTemplate = logsList.map((logElement: {
16+
date: Date,
17+
event: string
18+
}, index: number) => {
19+
const docRef = `https://www.flexmonster.com/api/${logElement.event}/?r=rm_react`;
20+
return <div key = {index} className="log">
21+
<span className="log-label">[ Event ] { logElement.date.toLocaleTimeString()}: </span>
22+
{logElement.event + " "}
23+
[ <a className="log-link" rel="noopener noreferrer" target="_blank"
24+
href={docRef}>see details</a> ]
25+
</div>
26+
})
27+
return (
28+
<>
29+
<h3 className="title-4">{title}</h3>
30+
<div className="event-logs-wrapper fullwidth">
31+
<div className="content">
32+
{logsTemplate}
33+
</div>
34+
</div>
35+
</>
36+
);
37+
38+
}
39+
40+
export default LogsList;

‎typescript-next/src/UIElements/SideMenu.tsx

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
"use client"
2+
import React from "react";
3+
4+
export default class SideMenu extends React.Component {
5+
6+
render () {
7+
return (
8+
<div className="side-menu">
9+
<ol>
10+
<li className="tab-button">
11+
<a className="router-link-exact-active" href="/pivot-table-demo">PIVOT TABLE DEMO</a>
12+
</li>
13+
</ol>
14+
<div className="sub-title">API and Events</div>
15+
<ol>
16+
<li className="tab-button">
17+
<a className="router-link-exact-active" href="/handling-events">HANDLING EVENTS</a>
18+
</li>
19+
<li className="tab-button">
20+
<a className="router-link-exact-active" href="/using-api-calls">USING API CALLS</a>
21+
</li>
22+
<li className="tab-button">
23+
<a className="router-link-exact-active" href="/updating-data">UPDATING DATA</a>
24+
</li>
25+
</ol>
26+
<div className="sub-title">Customization</div>
27+
<ol>
28+
<li className="tab-button">
29+
<a className="router-link-exact-active" href="/customizing-toolbar">CUSTOMIZING THE TOOLBAR</a>
30+
</li>
31+
<li className="tab-button">
32+
<a className="router-link-exact-active" href="/customizing-grid">CUSTOMIZING THE GRID</a>
33+
</li>
34+
</ol>
35+
<div className="sub-title">Integration</div>
36+
<ol>
37+
<li className="tab-button">
38+
<a className="router-link-exact-active" href="/with-highcharts">WITH HIGHCHARTS</a>
39+
</li>
40+
<li className="tab-button">
41+
<a className="router-link-exact-active" href="/with-amcharts">WITH AMCHARTS</a>
42+
</li>
43+
</ol>
44+
</div>
45+
);
46+
}
47+
}

‎typescript-next/src/UIElements/ToggleButton.tsx

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
"use client"
2+
import React from "react";
3+
4+
interface IProps {
5+
labelChecked: string;
6+
labelUnChecked: string;
7+
triggerFunction: (state: boolean) => void;
8+
}
9+
10+
interface IState {
11+
isChecked: boolean;
12+
}
13+
14+
export default class ToggleButton extends React.Component<IProps, IState> {
15+
16+
labelChecked: string;
17+
labelUnChecked: string;
18+
19+
constructor(props: IProps) {
20+
super(props);
21+
22+
this.state = {
23+
isChecked: true
24+
};
25+
this.labelChecked = props.labelChecked;
26+
this.labelUnChecked = props.labelUnChecked;
27+
this.parentsComponentTriggerFunction = props.triggerFunction;
28+
}
29+
30+
parentsComponentTriggerFunction: (state: boolean) => void;
31+
32+
onToggleSwitchClicked = () => {
33+
const newState = !this.state.isChecked;
34+
this.parentsComponentTriggerFunction(newState);
35+
this.setState({
36+
isChecked: newState
37+
});
38+
}
39+
40+
render = () => {
41+
42+
return (
43+
<div className="toggle-button noselect" id="id" onClick={this.onToggleSwitchClicked}>
44+
<input className="button-checkbox" id="labelOn" type="checkbox" checked={this.state.isChecked} readOnly/>
45+
<label className="button-checkbox-label">
46+
<span className="on">{this.state.isChecked ? this.labelChecked: this.labelUnChecked}</span>
47+
</label>
48+
</div>
49+
);
50+
}
51+
52+
}

‎typescript-next/src/UIElements/ToggleSwitch.tsx

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
"use client"
2+
import React from "react";
3+
4+
interface IProps {
5+
labelChecked: string;
6+
labelUnChecked: string;
7+
triggerFunction: (state: boolean) => void;
8+
}
9+
10+
interface IState {
11+
isChecked: boolean;
12+
}
13+
14+
export default class ToggleButton extends React.Component<IProps, IState> {
15+
16+
labelChecked: string;
17+
labelUnChecked: string;
18+
19+
constructor(props: IProps) {
20+
super(props);
21+
22+
this.state = {
23+
isChecked: true
24+
};
25+
this.labelChecked = props.labelChecked;
26+
this.labelUnChecked = props.labelUnChecked;
27+
this.parentsComponentTriggerFunction = props.triggerFunction;
28+
}
29+
30+
parentsComponentTriggerFunction: (state: boolean) => void;
31+
32+
onToggleSwitchClicked = () => {
33+
const newState = !this.state.isChecked
34+
this.parentsComponentTriggerFunction(newState);
35+
this.setState({
36+
isChecked: newState
37+
});
38+
}
39+
40+
render = () => {
41+
42+
return (
43+
<div className="toggle-switch noselect" id="id" onClick={this.onToggleSwitchClicked}>
44+
<input className="button-checkbox" id="labelOn" type="checkbox" checked={this.state.isChecked} readOnly/>
45+
<label className="button-checkbox-label">
46+
<span className="on">{!this.state.isChecked ? this.labelUnChecked : this.labelChecked}</span>
47+
</label>
48+
</div>
49+
);
50+
}
51+
52+
}

0 commit comments

Comments
 (0)