https://github.com/anishmprasad/react-circular-graph
A react component to render knowledge circular rotational graph
https://github.com/anishmprasad/react-circular-graph
animated circular nodes react-redux reactjs redux
Last synced: about 2 months ago
JSON representation
A react component to render knowledge circular rotational graph
- Host: GitHub
- URL: https://github.com/anishmprasad/react-circular-graph
- Owner: anishmprasad
- License: mit
- Created: 2018-10-29T17:08:58.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-10T18:32:06.000Z (over 3 years ago)
- Last Synced: 2025-02-01T09:03:44.902Z (over 1 year ago)
- Topics: animated, circular, nodes, react-redux, reactjs, redux
- Homepage:
- Size: 42 KB
- Stars: 1
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-circular-graph
A react component to render animated circular rotational knowledge graph
## API
1. `selectedNode` returns selected node details
2. `selectedProjectChanged` returns a flag for selected project status
Example selected node object
```json
{
"data" : {
"id": "tensorflow",
"name": "TensorFlow",
"summary": "TensorFlow is a fast, flexible, and scalable open source machine learning library for research and production",
"iconUrlSmall": "https://www.gstatic.com/opensource/project-images/tensorflow/logo.png?rs=AGWjSYQ1HC13sEyluXwZoYWC2w2i9qsPjQ&sqp=-oaymwEICEwQTCAAUAEIttCMygU",
"iconUrlMedium": "https://www.gstatic.com/opensource/project-images/tensorflow/logo.png?rs=AGWjSYQ7IXg35u8B_D41kSCIRrHjJYcfng&sqp=-oaymwEKCIwBEIwBIABQAQi20IzKBQ",
"primaryColor": "#E26026",
"startsWith": "t",
"fallbackColor": "#34A853",
"RGB": {
"r": 226,
"g": 96,
"b": 38
}
},
...
}
```
## Usage
`index.scss`
```css
.react-cirular-graph{
position:relative
}
```
`circularTemplate.scss`
```css
.explore-projects{
opacity:0;
padding:0 0 80px 0;
transition:opacity .5s ease-out;
position: relative;
}
.explore-projects.loaded{opacity:1}
.error h5{margin-top:60px}
.explore-container{position:relative}
canvas{
display:block;
margin:0 auto;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none
}
.selected-project{
-webkit-animation:none;
animation:none;
background:hsla(0,0%,100%,0);
border-radius:50%;
height:340px;
left:50%;
margin:-170px 0 0 -170px;
opacity:0;
overflow:hidden;
position:absolute;
text-align:center;
top:50%;
width:340px
}
.selected-project a{opacity:0}
.selected-project.active,
.selected-project.active a {
-webkit-animation:fade-in .4s ease-in-out forwards;
animation:fade-in .4s ease-in-out forwards;
cursor:pointer
}
.selected-project .project-summary{height:260px}
.selected-project .project-summary img{width : 60px;height:60px}
.selected-project a,.selected-project h5,.selected-project p{margin:0 15px 15px 15px}
.selected-project .icon{max-height:60px}
.selected-project img{margin:30px auto 0 auto}
.selected-project p{font-size:14px;line-height:18px;max-height:145px;overflow:hidden}
.page{
-webkit-animation:fade-in 2s ease-in-out 1s forwards;
animation:fade-in 2s ease-in-out 1s forwards;
// background:url(/assets/images/chevron-dark.svg) 0 0 no-repeat;
cursor:pointer;
height:15px;
left:10px;
margin:-15px 0 0 0;
opacity:0;
overflow:hidden;
position:absolute;
text-indent:-9999px;
top:50%;
-webkit-transform:rotate(90deg);
transform:rotate(90deg);
-webkit-transform-origin:center;
transform-origin:center;
transition:-webkit-transform .1s ease-in;
transition:transform .1s ease-in;
transition:transform .1s ease-in,-webkit-transform .1s ease-in;
width:20px
}
.page.next{left:auto;right:10px;-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}
.page:hover{-webkit-transform:rotate(90deg) scale(1.4);transform:rotate(90deg) scale(1.4)}
.page.next:hover{
-webkit-transform:rotate(-90deg) scale(1.4);transform:rotate(-90deg) scale(1.4)
}
@-webkit-keyframes fade-in{
0%{opacity:0}
50%{opacity:0}
to{opacity:1}
}
@keyframes fade-in{
0%{opacity:0}
50%{opacity:0}
to{opacity:1}
}
```
`CircularTemplate.js`
```jsx
import React,{ Fragment } from 'react';
import { connect } from "react-redux";
import './CircularTemplate.scss'
class CircularTemplate extends Component{
render(){
if (this.props.canvas){
return(
)
}else{
return null
}
}
}
function mapStateToProps(state) {
return {
canvas: state.Canvas && state.Canvas.data,
selectedProjectChanged: state.Canvas && state.Canvas.isProjectChanged
}
}
export default connect(mapStateToProps, null)(CircularTemplate);
```
```jsx
import React,{ Fragment } from 'react';
import ReactCircularGraph from 'react-circular-graph';
import CircularTemplate from './CircularTemplate';
var config = {
"ENABLE_ERROR_REPORTING": true,
"LIST_PAGE_SIZE": 48,
"EXPLORE_PAGE_SIZE": 80,
"MOBILE_WIDTH": 720,
"COLORS": {
"GREEN": "#34A853",
"RED": "#EA4335",
"BLUE": "#4285F4",
"YELLOW": "#FBBC05"
}
}
var data = [
{
"id": "tensorflow",
"name": "TensorFlow",
"summary": "TensorFlow is a fast, flexible, and scalable open source machine learning library for research and production",
"iconUrlSmall": "https://www.gstatic.com/opensource/project-images/tensorflow/logo.png?rs=AGWjSYQ1HC13sEyluXwZoYWC2w2i9qsPjQ&sqp=-oaymwEICEwQTCAAUAEIttCMygU",
"iconUrlMedium": "https://www.gstatic.com/opensource/project-images/tensorflow/logo.png?rs=AGWjSYQ7IXg35u8B_D41kSCIRrHjJYcfng&sqp=-oaymwEKCIwBEIwBIABQAQi20IzKBQ",
"primaryColor": "#E26026",
"startsWith": "t",
"fallbackColor": "#34A853",
"RGB": {
"r": 226,
"g": 96,
"b": 38
}
},
]
React.render(
console.log(node)}
selectedProjectChanged={(object) => { this.selectedProjectChanged(object) }}
/>
, document.body);
```
### Screenshot
![Preview][screenshot]
[screenshot]: https://github.com/Anishmprasad/circular-knowledge-graph/raw/master/src/public/images/screenshot.png "Preview screenshot"
## Built With
* [React](https://https://reactjs.org/) - A JavaScript library
## Author
- Anish M Prasad (anishmprasad@gmail.com)
## License
This project is licensed under the MIT License - see the [LICENSE.md](https://github.com/Anishmprasad/circular-knowledge-graph/blob/master/README.md) file for details
**In the words of Martin Luther King Junior:**
> Hate cannot drive out hate; only love can do that.