We Keep Coding

Problems integrating the Vis network with React

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.

When Using MUI Button: TypeError: Cannot read property 'borderRadius' of undefined

import React, { Component } from 'react';
import './App.css';
import Screen from './components/Screen/Screen';
import Button from './components/Button/Button';
import { MuiThemeProvider, createMuiTheme } from 'material-ui/styles';
import pink from '#material-ui/core/colors/pink';
const buttonTheme = createMuiTheme({
palette: {
primary: {
main: '#2dff46',
},
secondary: pink,
}
});
class App extends Component {
render() {
return (
<MuiThemeProvider theme={buttonTheme}>
<Screen>
<div>Hello</div>
<Button variant='contained' color='primary'>
GO
</Button>
</Screen>
</MuiThemeProvider>
);
}
}
export default App;
I am simply trying to create a button with some custom colors (theme). It will work without "theme={buttonTheme}" but of course it uses the default. I get the following error:
TypeError: Cannot read property 'borderRadius' of undefined
styles
node_modules/#material-ui/core/Button/Button.js:41
38 | minWidth: 64,
39 | minHeight: 36,
40 | padding: '8px 16px',
> 41 | borderRadius: theme.shape.borderRadius,
42 | color: theme.palette.text.primary,
43 | transition: theme.transitions.create(['background-color', 'box-shadow', 'border'], {
44 | duration: theme.transitions.duration.short
thanks!!

As mentioned in an earlier comment, the import statement was incorrect.
This:
import { MuiThemeProvider, createMuiTheme } from 'material-ui/styles';
Should be this:
import { MuiThemeProvider, createMuiTheme } from '#material-ui/core/styles';

In case anybody else has a similar issue. The above answer never fixed my problem but pointed me in the correct direction I had to add
shape: {
borderRadius: 16
}
To my material ui theme.

So this is a two step thing for you, I'm not across Material-ui, but the main issue is that the theme-shape isn't being provided to your button component.
The first thing i'd do is debug and log out the buttonTheme constant to confirm that it is matching the theme defined in https://material-ui.com/customization/default-theme/ with the addition of your overrides.
If you can see the the shape: border-radius: 4 portion then you know it is an issue with MuiProvider, but from looking at your code it seems to be correct.
Let me know what the theme looks like (Update your question) and we can work from there

HEREMaps react cannot read property of undefined

Currently trying to use react-here-maps but I have no luck using it.
import React, { Component } from 'react';
import HEREMap from 'react-here-maps';
import PropTypes from 'prop-types';
export default class Map extends Component {
render() {
return (
<HEREMap
appId="KEY"
appCode="KEY"
center={{ lat: 0, lng: 0 }}
zoom={14}
/>
)
}
}
When using this component in my app it gives the error
TypeError: Cannot read property 'object' of undefined
The first detailed error lines are this
55 | }
56 | // define the context types that are passed down from a <HEREMap> instance
57 | Circle.contextTypes = {
> 58 | map: React.PropTypes.object
59 | };
60 | Circle.defaultProps = {
61 | fillColor: "rgba(255, 255, 255, 0.5)",
I think it has something to do with proptypes but I have that installed already. Anyone knows how to fix this?

How to use vanilla javascript inside Reactjs component?

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

Using velocity.js UI pack animations with velocity-react

How do I use velocity.js UI pack effects in my react app?
With the following code thefadeOut animation is working, but slideRightIn is not.
import { VelocityTransitionGroup } from 'velocity-react';
import 'velocity-animate/velocity.ui';
class ShowForm extends React.Component {
[...]
render() {
return (
<div>
<VelocityTransitionGroup enter={{animation: "slideRightIn"}} leave={{animation: "fadeOut"}} duration="1">
{this.getActiveStep()}
</VelocityTransitionGroup>
</div>
);
}
}
The error in console is Velocity: First argument (slideRightIn) was not a property map, a known action, or a registered redirect

So the reason for this roblem was that animation name is transition.slideRightIn, not just slideRightIn.

I've been struggling with this issue for a few days...very frustrating...velocity 1.5...I've been upgrading to react 16.2. The following component code stopped working with the above mentioned error...the component is just a span wrapped in a ...Inside velocity the Velocity.Redirects[propertiesMap] only had fadeIn,fadeOut etc...not transition.xxx
import React from 'react';
import ReactDOM from 'react-dom';
import Velocity from 'velocity-animate';
import PropTypes from 'prop-types';
class StatusMessage extends React.Component {...
_animateText(text) {
var textNode = ReactDOM.findDOMNode(this.refs.textSpan),
that = this;
Velocity(textNode, "transition.shrinkIn", {
duration: 150,
delay: 50,
begin: function() {
that.setState({
text: text
});
that.animating = true;
},
complete: function() {
that.animating = false;
that.forceUpdate();
}
});
}
}
To fix it I added one import statement to my root App component...
import 'velocity-animate/velocity.ui';
class App extends React.Component { ...
I hope this helps someone else too.
Cheers!