I have a problem with vis timeline initialization. Timeline is visible but without any data. I've tried to pass items in different formats but it looks like in attached image. What is a problem with that? My react component:
import 'vis-timeline/styles/vis-timeline-graph2d.min.css';
import Timeline from 'react-vis-timeline'
const items = [{
id: 1,
start: new Date(2025, 7, 15),
end: new Date(2025, 8, 2),
content: 'Test 1',
},
{
id: 2,
start: new Date(2025, 7, 17),
end: new Date(2025, 8, 3),
content: 'Test 2',
}
];
const options = {
width: '100%',
height: '450px',
};
class Timeline2D extends React.Component {
render() {
return <Timeline options={options} initialItems={items} />;
}
}
export default Timeline2D;
Result
To fix this issue I need to set groups. See correct example:
import React from 'react';
import 'vis-timeline/styles/vis-timeline-graph2d.min.css';
import Timeline from 'react-vis-timeline'
const items = [{
id: 1,
group: 1,
start: '2014-04-20',
end: '2014-04-26',
content: 'Test 1',
},
{
id: 2,
group: 2,
start: '2014-04-22',
end: '2014-04-29',
content: 'Test 2',
}
];
const groups = [{
id: 1,
content: 'Group 1',
},
{
id: 2,
content: 'Group 2',
}
];
const options = {
width: '100%',
height: '450px',
};
class Timeline2D extends React.Component {
render() {
return <Timeline options={options} initialItems={items} initialGroups={groups}/>;
}
}
export default Timeline2D;
Related
I am trying to make a force directed graph with amcharts 5 where the nodes are images.
I was able to make images as nodes but was not really able to customize it. I want it to be rounded and has an onClick handler, which returns the node which is being clicked.
import React, { useLayoutEffect } from "react";
import "./App.css";
import * as am5 from "#amcharts/amcharts5";
import * as am5hierarchy from "#amcharts/amcharts5/hierarchy";
import am5themes_Animated from "#amcharts/amcharts5/themes/Animated";
function App(props) {
useLayoutEffect(() => {
let root = am5.Root.new("chartdiv");
root.setThemes([am5themes_Animated.new(root)]);
let chart = root.container.children.push(
am5.Container.new(root, {
width: am5.percent(100),
height: am5.percent(100),
layout: root.verticalLayout,
})
);
let series = chart.children.push(
am5hierarchy.ForceDirected.new(root, {
downDepth: 1,
initialDepth: 1,
topDepth: 0,
valueField: "value",
categoryField: "name",
childDataField: "children",
xField: "x",
yField: "y",
minRadius: 30,
manyBodyStrength: -40,
})
);
// series.circles.template.set("forceHidden", true);
// series.outerCircles.template.set("forceHidden", true);
series.circles.template.events.on("click", function (ev) {
console.log(ev);
console.log("Clicked on");
});
// Use template.setup function to prep up node with an image
series.nodes.template.setup = function (target) {
target.events.on("dataitemchanged", function (ev) {
target.children.push(
am5.Picture.new(root, {
width: 90,
height: 90,
centerX: am5.percent(50),
centerY: am5.percent(50),
src: ev.target.dataItem.dataContext.image,
})
);
});
};
series.bullets.push(function (root) {
return am5.Bullet.new(root, {
sprite: am5.Picture.new(root, {
radius: 4,
fill: series.get("fill"),
}),
});
});
series.data.setAll([
{
name: "Chrome",
value: 1,
image: "https://picsum.photos/202",
children: [
{ name: "Google", value: 1, image: "https://picsum.photos/203" },
{
name: "Firefox",
value: 1,
image: "https://picsum.photos/204",
},
{
name: "IE",
value: 1,
image: "https://picsum.photos/203",
},
{
name: "Safari",
value: 1,
image: "https://picsum.photos/205",
},
{
name: "Opera",
value: 1,
image: "https://picsum.photos/206",
},
],
},
]);
series.set("selectedDataItem", series.dataItems[0]);
return () => {
root.dispose();
};
}, []);
return <div id="chartdiv" style={{ width: "100%", height: "500px" }}></div>;
}
export default App;
I was able to find some workaround using pinBullets in amhcarts 4 but I'm trying to get it working on amcharts 5.
I use react-bootstrap-table-next. And want to use a toggle button which hide or show rows with a certain value. But the problem is that the table content doesn't change.
import BootstrapTable from 'react-bootstrap-table-next';
const products = [
{id: 0, name: 'item 0', price: 4},
{id: 1, name: 'item 1', price: 5},
{id: 2, name: 'item 2', price: 3},
{id: 3, name: 'item 3', price: 5},
]
const columns = [{
dataField: 'id',
text: 'Product ID'
}, {
dataField: 'name',
text: 'Product Name',
}, {
dataField: 'price',
text: 'Product Price',
}];
const handleClick = () => {
for (i=0; i> products.length; i++) {
if (products[i]["price"] === 5) {
products.slice(i, 1);
}
}
};
export default () => (
<div>
<button className="btn btn-lg btn-primary" onClick={ handleClick }>hide data </button>
<BootstrapTable keyField='id' data={ products } columns={ columns } />
</div>
);
The problem is that you are trying to update products, but on every re-render, it will reset to its initial value (Because it's defined outside the component's function). So, the value of products will always be the same.
One solution is to move products inside the component and create a state for it.
You can reshape your code like this:
import BootstrapTable from 'react-bootstrap-table-next';
import { useState } from 'react';
const columns = [{
dataField: 'id',
text: 'Product ID'
}, {
dataField: 'name',
text: 'Product Name',
}, {
dataField: 'price',
text: 'Product Price',
}];
const MyComponent = () => {
const [products, setProducts] = useState([
{ id: 0, name: 'item 0', price: 4 },
{ id: 1, name: 'item 1', price: 5 },
{ id: 2, name: 'item 2', price: 3 },
{ id: 3, name: 'item 3', price: 5 },
]);
const handleClick = () => {
let temp = products;
for (i = 0; i > temp.length; i++) {
if (temp[i]["price"] === 5) {
temp.slice(i, 1);
}
};
setProducts(temp);
};
return (
< div >
<button className="btn btn-lg btn-primary" onClick={handleClick}>hide data </button>
<BootstrapTable keyField='id' data={products} columns={columns} />
</div >
)
};
export default MyComponent;
When I try to update the state on the hover event, the actual state value is getting changed but the graph is not re-rendering.
in the console, I am able to see the node label is changed to sample. but the graph is not rerendering.
Here is my react function based component.
import React, { useEffect, useState } from 'react';
import Graph from 'react-graph-vis';
import './vis-network.css';
function RelationGraph1() {
const [graph, setGraph] = useState({
nodes: [
{
id: 1,
label: 'Node 1',
title: '',
},
{ id: 2, label: 'Node 2', title: '' },
{ id: 3, label: 'Node 3', title: '' },
{ id: 4, label: 'Node 4', title: '' },
{ id: 5, label: 'Node 5', title: '' },
],
edges: [
{ from: 1, to: 2 },
{ from: 1, to: 3 },
{ from: 2, to: 4 },
{ from: 2, to: 5 },
],
});
const options = {
layout: {
hierarchical: false,
},
edges: {
color: '#1D1D1D',
},
interaction: {
hover: true,
navigationButtons: true,
tooltipDelay: 0,
},
nodes: {
borderWidth: 0,
borderWidthSelected: 0,
color: '#0262C4',
shape: 'circle',
size: 1,
shadow: {
enabled: true,
color: 'rgba(0,0,0,0.5)',
size: 10,
x: 5,
y: 5,
},
font: {
color: '#fff',
size: 13,
bold: {
mod: 'bold',
},
},
},
};
const events = {
select: function (event) {
var { nodes, edges } = event;
console.log('Selected nodes:');
console.log(nodes);
console.log('Selected edges:');
console.log(edges);
},
showPopup: (id) => { // node id
const data = graph.nodes.map((el) => {
if (el.id === id) {
el.label = `sample node name`;
}
return el;
});
setGraph({ ...graph, nodes: data });
},
};
return (
<Graph
graph={graph}
options={options}
events={events}
style={{ height: '450px' }}
/>
);
}
export default RelationGraph1;
Really Appriciate for the help. Thanks !
I was able to update the label in hoverNode event like this:
hoverNode: (e) => {
const data = graph.nodes.map((el) => {
if (el.id === e.node) return { ...el, label: "sample node name" };
else return el;
});
const temp = { ...graph };
temp.nodes = data;
setGraph(temp);
},
Sample: https://codesandbox.io/s/long-bird-4h444?file=/src/App.js:1235-1501
I have a problem with ReactDataGrid component. I have already installed react-data-grid. The code is the same as in the reac grid's web:
const columns = [
{ key: 'id', name: 'ID' },
{ key: 'title', name: 'Title' },
{ key: 'count', name: 'Count' }];
const rows = [{ id: 0, title: 'row1', count: 20 }, { id: 1, title: 'row1', count: 40 }, { id: 2, title: 'row1', count: 60 }];
class App extends React.Component {
render() {
return (
<ReactDataGrid
columns={columns}
rowGetter={i => rows[i]}
rowsCount={3}
minHeight={150} />
)
}
}
export default App;
and i get:
Result
Thank you!
Import the CSS like so :
import 'react-data-grid/dist/react-data-grid.css';
It should be fine.
import React from "react";
import ReactDOM from "react-dom";
import ReactDataGrid from "react-data-grid";
const columns = [
{ key: "id", name: "ID", editable: true },
{ key: "title", name: "Title", editable: true },
{ key: "count", name: "Count", editable: true }
];
const rows = [
{ id: 0, title: "row1", count: 20 },
{ id: 1, title: "row1", count: 40 },
{ id: 2, title: "row1", count: 60 }
];
class App extends React.Component {
render() {
return (
<ReactDataGrid
columns={columns}
rowGetter={i => rows[i]}
rowsCount={3}
minHeight={150}
enableCellSelect={true}
/>
);
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
https://codesandbox.io/s/rdg-cell-editing-h8bnr
the answer is in the above code this above code is working
You don't really need to downgrade. The issue is that the css is not being imported.
If you can import css from node-modules, it'll work.
Workaround for me was I took the whole css and we are now self-maintaining the css, making changes when needed.
I couldn't load the css either, I got around this by including
import ReactDataGrid from 'react-data-grid/dist/react-data-grid.min.js';
instead of
import ReactDataGrid from 'react-data-grid';
I'm trying to use fullcalendar-react-wrapper-scheduler in my project.
The documentation shows an example of passing events into the FullCalendar component, however it does not show how to pass in resources.
I'm attempting to pass in "resources" by mimicking how "events" are being passed in. But that does not display any resources on the DOM.
Has anyone successfully used this package that can provide guidance for passing in resources?
Documentation:
https://www.npmjs.com/package/fullcalendar-reactwrapper-scheduler#examples
Here's a code snippet showing how I am passing in events (successfully) and resources (not successfully):
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { connect } from 'react-redux';
import Nav from '../../components/Nav/Nav';
import { USER_ACTIONS } from '../../redux/actions/userActions';
import { LOGIN_ACTIONS } from '../../redux/actions/loginActions';
//START CALENDAR LIBRARY IMPORTS//
import FullCalendar from 'fullcalendar-reactwrapper-scheduler';
import 'fullcalendar-reactwrapper-scheduler/dist/css/fullcalendar.min.css';
//END CALENDAR LIBRARY IMPORTS//
const mapStateToProps = state => ({
user: state.user,
});
class ExampleComponent extends Component {
constructor(props) {
super(props);
this.state = {
events: [
{
resourceId: 'a',
id: 1,
title: 'Shoot 1',
start: '2017-06-27T08:00:00',
end: '2017-06-27T09:00:00'
},
{
resourceId: 'b',
id: 2,
title: 'Shoot 2',
start: '2017-06-27T10:00:00',
end: '2017-06-27T11:00:00'
},
{
resourceId: 'a',
id: 3,
title: 'Shoot 3',
start: '2017-06-27T13:00:00',
end: '2017-06-27T14:00:00'
},
{
resourceId: 'c',
id: 4,
title: 'Shoot 4',
start: '2017-06-27T08:00:00',
end: '2017-06-27T09:00:00'
},
{
resourceId: 'd',
id: 5,
title: 'Shoot 5',
start: '2017-06-27T012:00:00',
end: '2017-06-27T13:00:00'
},
],
resources: [
{ id: 'a', title: 'Room A' },
{ id: 'b', title: 'Room B' },
{ id: 'c', title: 'Room C' },
{ id: 'd', title: 'Room D' },
]
}
}
componentDidMount() {
this.props.dispatch({
type: USER_ACTIONS.FETCH_USER
});
}
componentDidUpdate() {
if (!this.props.user.isLoading && this.props.user.userName === null) {
this.props.history.push('home');
}
}
logout = () => {
this.props.dispatch({
type: LOGIN_ACTIONS.LOGOUT
});
// this.props.history.push('home');
}
render() {
let content = null;
if (this.props.user.userName) {
content = (
<div id="example-component">
<FullCalendar
id="your-custom-ID"
header={{
left: 'prev,next today myCustomButton',
center: 'title',
right: 'month,basicWeek,basicDay'
}}
defaultDate={'2017-06-27'}
navLinks={true} // can click day/week names to navigate views
editable={true}
eventLimit={true} // allow "more" link when too many events
events={this.state.events}
resources={this.state.resources}
defaultView='agendaDay'
/>
</div>
);
}
return (
<div>
<Nav />
{content}
</div>
);
}
}
// this allows us to use <App /> in index.js
export default connect(mapStateToProps)(ExampleComponent);
Looking through the source code, it looks like fullcalendar-reactwrapper-scheduler doesn't support resources.
You have a couple of options. You can use another library that is specifically made for React, such as react-calendar. This is the best approach.
If for some reason you are absolutely set on using Fullcalendar, you can integrate jQuery with your React app and then use Fullcalendar directly without the wrapper. But using jQuery with React is just asking for trouble, so I strongly advise against this approach.