Does anyone here use or have used Vis.js in any project? I'm trying to integrate Vis-network with React, and I even managed to, but I can't manipulate it in any way.
In the examples provided by Vis.js itself, they use the javascript code within the same html page to generate the canvas. As I'm in React, I created a VisNetwork component, and called it in App.js to test it. I even managed to generate the image, it really appeared, but I can't manipulate it.
For example, the canvas area of the example is being 600x400 (example link), but the canvas area generated by React is being 500x150. Through App.css I was able to change the width that used 100% before, but the height could not be manipulated. Anyway, I'll leave the code here.
network.js
import React, { Component, createRef } from "react";
import { DataSet, Network } from 'vis-network/standalone/umd/vis-network.min';
// Create an array with nodes
const nodes = new DataSet([
{id: 1, label: 'Node 1'},
{id: 2, label: 'Node 2'},
{id: 3, label: 'Node 3'},
{id: 4, label: 'Node 4'},
{id: 5, label: 'Node 5'}
]);
// Create an array with edges
const edges = new DataSet([
{from: 1, to: 3},
{from: 1, to: 2},
{from: 2, to: 4},
{from: 2, to: 5}
]);
// Provide the data in the vis format
const data = {
nodes: nodes,
edges: edges
};
const options = {
autoResize: true,
height: '100%',
width: '100%'
};
// Initialize your network!
class VisNetwork extends Component {
constructor() {
super();
this.network = {};
this.appRef = createRef();
}
componentDidMount() {
this.network = new Network(this.appRef.current, data, options);
}
render() {
return (
<div ref={this.appRef} />
);
}
}
export default VisNetwork;
In App.js, I imported VisNetwork and called it inside the div:
import React from 'react';
import './App.css';
import VisNetwork from './network';
function App() {
return (
<div className="App">
<VisNetwork />
</div>
);
}
export default App;
App.css
.App {
text-align: center;
width:500px;
height:500px;
border:solid;
background-color:white;
}
Please do not negative this post without responding. It harm rather than helps. Thanks.
I suggest the reason that set option width and height 100% not working is that the network is attaching on a div which height and width is not defined, so you could try the code below:
const options = {
autoResize: ture,
height: '100%',
width: '100%'
};
// Initialize your network!
class VisNetwork extends Component {
constructor() {
super();
this.network = {};
this.appRef = createRef();
}
componentDidMount() {
this.network = new Network(this.appRef.current, data, options);
}
render() {
let containerStyle = { //define container width and height.
width:"500px",
height:"500px",
}
return (
<div style={containerStyle} ref={this.appRef} />
);
}
}
export default VisNetwork;
If code above doesn't work , I would suggest use this.network.setSize(width, height) to force the canvas to change.
Another way to solve this is create a constant that takes the height size of the DOM and set the constant to the height of options.
const myHeight = Math.round(parseInt(window.innerHeight) * 0.7) + 'px';
const options = {
autoResize: true,
height: myHeight
};
Thus, it is possible to control the percentage.
Related
I have a javascript class that is in my react project.
Basically, i wanted to add a sunburst pie chart to my UI. So I put the code for it in my react project. At compile time (i.e. when i run npm start) I get the error
error Do not use findDOMNode react/no-find-dom-node
I read online but I still don't completely understand this error (or what findDOMNode does, for that matter).
I simply need to fix the code for findDOMNode to whatever it needs to be, as for now I am just disabling the rule.
import React from "react";
import ReactDOM from "react-dom";
import Sunburst from "sunburst-chart";
/* eslint-disable react/no-find-dom-node */
/* eslint-disable no-console */
const data = {
name: "main",
color: "magenta",
children: [
{
name: "a",
color: "yellow",
size: 1
},
{
name: "b",
color: "red",
children: [
{
name: "ba",
color: "orange",
size: 1
},
{
name: "bb",
color: "blue",
children: [
{
name: "bba",
color: "green",
size: 1
},
{
name: "bbb",
color: "pink",
size: 1
}
]
}
]
}
]
};
class SunburstChart extends React.Component {
constructor() {
super();
this.state = {
myChart: Sunburst().data(data)
};
}
componentDidMount() {
// set el height and width etc.
this.state.myChart(ReactDOM.findDOMNode(this));
}
onSelect(event) {
console.log(event);
}
render() {
return <div id="chart" />;
}
}
export default SunburstChart;
Facebook will eventually deprecate findDOMNode as it blocks certain improvements in React in the future.
It is recommended to use callback refs instead. See Dan Abramov comments and examples here:
https://github.com/jsx-eslint/eslint-plugin-react/issues/678#issue-165177220
source: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-find-dom-node.md
I was able to work it out after reviewing the github links
componentDidMount() {
// set el height and width etc.
this.state.myChart(this.node);
}
onSelect(event) {
console.log(event);
}
render() {
return <div id="chart" ref={node => this.node = node}/>;
}
I have an object:
import React, {Component} from 'react';
import ProgressBar from "./ProgressBar";
class Languages extends Component {
state = {
languages: [
{id: 1, value: "XXX", xp: 1.5},
{id: 2, value: "CCC", xp: 1},
{id: 3, value: "AAA", xp: 2}
]
}
render() {
let {languages} = this.state;
const levels = ['Test', 'Bad', 'Sorry']
return (
<div className="languages">
<ProgressBar
programming={languages}
className="languagesDisplay"
levels={levels}
title="Languages"
/>
</div>
);
}
}
export default Languages;
import React from 'react';
const ProgressBar = (props) => {
return (
<div className={props.className}>
<h3>{props.title}</h3>
<div className="years">
<span>Experiences</span>
props.levels.map((level) => {
<span>level</span>
})
</div>
<span>level</span> return props.levels.map((level) =>level)
how can i display the const ['Test', 'Bad', 'Sorry'] from Languages.js in a <span> in a different React file?
Edit after seeing your response above: If the issue is just that the above code isn't working, here are a couple of things to check.
Inside of ProgressBar you've got a couple of errors in your JSX. First, you need curly braces around your JavaScript interpolation and secondly, you're not returning anything in your .map() function. If you were using parentheses it would be an implicit return, but with the curly braces you need a return statement. Try this instead:
import React from 'react';
const ProgressBar = (props) => {
return ( <div className={props.className}>
<h3> {props.title} </h3>
<div className ="years">
<span> Experiences </span>
{props.levels.map((level) => {
return (<span>{level}</span>)
})
} </div>
)};
My initial answer, which still may be helpful for understanding what's going on:
It's not entirely clear what you want to do, but here are a couple of things that might be helpful.
What's happening in your code above is that the levels variable, which is an array of strings, is being passed down from the parent component Languages into the child component ProgressBar via the props object.
When ProgressBar is called inside of Languages, it's properties (or props) are set (programming, className, levels, title).
The levels={levels} part means that the prop levels on ProgressBar is being set to the variable levels (the array of strings).
Inside of ProgressBar all of those properties are accessible in the props object that's passed as an argument. That's why you're able to access that array of strings with props.levels.map() which will map the array of strings however you tell it to (in this case by printing each individual item within a <span> tag).
So, with that understanding of what's happening here, here are a couple of things you could do to access the levels variable elsewhere in another file.
If levels is a constant that you want to access in multiple places, you could move it outside of the body of your Languages component and export it to use it in other places.
That could look like:
import React, {
Component
} from 'react';
import ProgressBar from "./ProgressBar";
export const levels = ['Test', 'Bad', 'Sorry']
class Languages extends Component {
state = {
languages: [{
id: 1,
value: "XXX",
xp: 1.5
},
{
id: 2,
value: "CCC",
xp: 1
},
{
id: 3,
value: "AAA",
xp: 2
}
]
}
render() {
let {
languages
} = this.state;
return ( <
div className = "languages" >
<
ProgressBar programming = {
languages
}
className = "languagesDisplay"
levels = {
levels
}
title = "Languages" /
>
<
/div>
);
}
}
export default Languages;
By exporting it from the top level, you could import it in another file exactly as it is.
import { levels } from '/insert-first-file-location-here'
Another option is to pass the levels variable into another component as a prop. This way if levels gets changed at the top level, those changes will drill down into subsequent components.
import React, {Component} from 'react';
import ProgressBar from "./ProgressBar";
class Languages extends Component {
state = {
languages: [
{id: 1, value: "XXX", xp: 1.5},
{id: 2, value: "CCC", xp: 1},
{id: 3, value: "AAA", xp: 2}
]
}
render() {
let {languages} = this.state;
const levels = ['Test', 'Bad', 'Sorry']
return (
<>
<div className="languages">
<ProgressBar
programming={languages}
className="languagesDisplay"
levels={levels}
title="Languages"
/>
</div>
<AnotherComponentThatUsesLevels
levels={levels} />
</>
);
}
}
export default Languages;
And then
import React from 'react'
export const AnotherComponentThatUsesLevels (props) => {
return (
<>
{/* do something with levels here, maybe map them like before*/}
{props.levels.map((level) => (<span>{level}</span>)}
</>
)
}
Does that help understand what's happening in the example and give you a couple of ways you could use that variable in another location?
You need to export that certain constant from your file like that:
import React, {
Component
} from 'react';
import ProgressBar from "./ProgressBar";
export const levels = ['Test', 'Bad', 'Sorry']
class Languages extends Component {
state = {
languages: [{
id: 1,
value: "XXX",
xp: 1.5
},
{
id: 2,
value: "CCC",
xp: 1
},
{
id: 3,
value: "AAA",
xp: 2
}
]
}
render() {
let {
languages
} = this.state;
return (
<div className="languages">
<ProgressBar
programming={languages}
className="languagesDisplay"
levels={levels}
title="Languages"
/>
</div>
);
}
}
export default Languages;
After it, you need to import it in the file where you want to access it:
import {levels} from '/path/to/file';
Naker.Back Documentations
I came across an article that uses Naker.back to make interactive backgrounds so I decided to give it a try in my portfolio website that I plan on using MERN stack to build. I was planning to use my interactive background created and embed it into my React component.
This is the file structure for my home page now
This is the code for Background.js that I copied and edited the value based on the documentation provided and will be exported into Home.js as JSX
import React, { Component } from 'react';
import styles from './Background.module.css'
const script = document.createElement("script");
script.src = "https://d23jutsnau9x47.cloudfront.net/back/v1.0.9/viewer.js";
script.async = true;
document.body.appendChild(script);
class Background extends Component {
componentDidMount() {
window.nakerback.render({
container: document.getElementById('container'),
particle: {
direction1: {x: 0,y: 0,z: 0},
direction2: {x: 0,y: -100,z: -100},
life: 5,
power: 0.02,
texture: "https://res.cloudinary.com/naker-io/image/upload/v1566560053/flare_01.png",
number: 2000,
colorStart: [251,251,251,0],
colorEnd: [4,72,132,0.52],
sizeStart: 1.15,
sizeEnd: 2.3
},
environment: {
gradient: 'horizontol',
sensitivity: 0.8,
backgroundTop: [40,4,107,1],
backgroundBottom: [1,18,51,1]
}
});
}
render(){
return <div className={styles.background} id="container"></div>
};
}
export default Background;
Home.js code that will be exported into App.js as component for the route:
import React from 'react';
import Background from '../components/Background'
const Home = () => {
return(
<div>
<Background/>
<h1>Home</h1>
</div>
)
};
export default Home;
Error Message was thrown back:
TypeError: Cannot read property 'render' of undefined
9 | class Background extends Component {
10 |
11 | componentDidMount() {
> 12 | window.nakerback.render({
13 | container: document.getElementById('container'),
14 | particle: {
15 | direction1: {x: 0,y: 0,z: 0},
I want to use Vis.js in a React based project. Since none of the Vis Network implementations work for me I have to use the plain library.
This is my test React component
import { DataSet, Network } from 'vis';
import React, { Component, createRef } from "react";
class VisNetwork extends Component {
constructor() {
super();
this.network = {};
this.appRef = createRef();
this.nodes = new DataSet([
{ id: 1, label: 'Node 1' },
{ id: 2, label: 'Node 2' },
{ id: 3, label: 'Node 3' },
{ id: 4, label: 'Node 4' },
{ id: 5, label: 'Node 5' }
]);
this.edges = new DataSet([
{ from: 1, to: 3 },
{ from: 1, to: 2 },
{ from: 2, to: 4 },
{ from: 2, to: 5 }
]);
this.data = {
nodes: this.nodes,
edges: this.edges
};
this.options ={};
}
componentDidMount() {
this.network = new Network(this.appRef.current, this.data, this.options);
}
render() {
return (
<div ref={this.appRef} />
);
}
}
export default VisNetwork;
It's the only component mounted so far
ReactDOM.render(<VisNetwork />,document.getElementById('mynetwork'));
My question is how I can access the properties of the network, for example, to get or delete a node.
node = nodes.get(nodeId);
I read about React Ref and tried something like
() =>{ console.log(document.getElementsByClassName('vis-network')) as callback of ReactDOM.render()but that doesn't help.
Another question is why isn't the ref not set and it's just <div>.
Because I thought that this.appRef = createRef(); in the constructor of the component and ref={this.appRef} in render() would lead to a ref.
I hope you can give me a hint.
Actually the flow should be the other way round, define the nodes outside of the component, then pass them in. For that define the constructor as:
constructor(props) {
super(props);
this.nodes = props.nodes;
//...
}
Then construct it as:
const nodes = new DataSet([/*...*/]);
ReactDOM.render(<VisNetwork nodes={nodes} />,document.getElementById('mynetwork'));
Note that you should put anything stateful into this.state and use setState to mutate it.
I am using chartist.js and I am using the chartist within reactjs component.
I am referring this http://gionkunz.github.io/chartist-js/examples.html#simple-pie-chart
chartist.js:
var Chartist = {
version:'0.9.5'
}
(function (window, document, Chartist) {
var options = {
labelInterpolationFnc: function(value) {
return value[0]
}
};
var responsiveOptions = [
['screen and (min-width: 640px)', {
chartPadding: 30,
labelOffset: 100,
labelDirection: 'explode',
labelInterpolationFnc: function(value) {
return value;
}
}],
['screen and (min-width: 1024px)', {
labelOffset: 80,
chartPadding: 20
}]
];
})();
Reactjs component:
import React, { Component } from 'react';
var data = {
labels: ['Bananas', 'Apples', 'Grapes'],
series: [20, 15, 40]
};
showPieChart(data){
new Chartist.Pie('.ct-chart', data, options, responsiveOptions);
}
class Chart extends Component {
render(){
return(
<div>
<div className="center">
{showPieChart}
</div>
</div>
)}
}
export default Chart;
Nothing is displayed on web page. How can I access vanilla javascript inside react component.
Your question is a little bit misleading, and can be interpreted in two ways.
#1. If you're asking how to integrate Chartist library with React, here's how you can do it:
There's a wrapper library, that already did it for us: https://www.npmjs.com/package/react-chartist
You can use it as follow (example taken from their repo):
import React from 'react';
import ReactDOM from 'react-dom';
import ChartistGraph from 'react-chartist';
class Pie extends React.Component {
render() {
var data = {
labels: ['W1', 'W2', 'W3', 'W4', 'W5', 'W6', 'W7', 'W8', 'W9', 'W10'],
series: [
[1, 2, 4, 8, 6, -2, -1, -4, -6, -2]
]
};
var options = {
high: 10,
low: -10,
axisX: {
labelInterpolationFnc: function(value, index) {
return index % 2 === 0 ? value : null;
}
}
};
var type = 'Bar'
return (
<div>
<ChartistGraph data={data} options={options} type={type} />
</div>
)
}
}
ReactDOM.render(<Pie />, document.body)
#2. If you generally asking how to integrate other libraries into React, then I recommend you to check the official React docs, because there's a really good tutorial about the topic - Integrating with Other Libraries
So, if you don't want to use the wrapper library (react-chartist), then you can check its main component too. It's a great starting point (that follows React recommendations) to understand how to create your own wrapper: https://github.com/fraserxu/react-chartist/blob/master/index.js