lighthouse-io / react-visjs-timeline Goto Github PK
View Code? Open in Web Editor NEWReact component for the vis.js timeline module
License: MIT License
React component for the vis.js timeline module
License: MIT License
Hello,
I'm trying to format my items with a start of "00:00". This time represents (Hour:Minutes). Why is this not working?
Is safari support available for this library?
This is the first time I've ever seen a new npm version without the changes being reflected in the git repo. Does the npm url link to the wrong git repo? I want to review the changelog before updating.
npm (v1.6.0 updated 4 sept 2019):
https://www.npmjs.com/package/react-visjs-timeline
Git repo (v1.5.0 updated "last year"):
https://github.com/Lighthouse-io/react-visjs-timeline
Are there any plans to make this compatible with timeline-plus? As Vis.js is being split out into separate projects and timeline-plus is the project for the timeline part of it, it would be good if we could use timeline-plus as this is still being maintained.
It would be nice to be able to specify item content with a JSX object instead of a String:
const items = [{start: ...., content: <div>Hello!</div>}];
When you specify a start value in options and use it on a timeline in which groups are assigned (this triggers the timeline to rerender on a pan of the timeline) and pan on the timeline it will forcibly go back to the specified start value.
You can reproduce this by simply adding a start value on the groupsExample (on /examples) and pan the timeline.
Hey! Having an issue that just popped up. Was working fine.
now getting this issue
ERROR in ./~/vis/dist/vis.css Module parse failed: /Users/eamonpenland/Desktop/thingtech/dispatch/dispatch/node_modules/vis/dist/vis.css Unexpected token (1:0) You may need an appropriate loader to handle this file type. | .vis .overlay { | position: absolute; | top: 0; @ ./~/react-visjs-timeline/build/index.js 13:0-27
Thanks!
react-visjs-timeline is using a deprecated version of vis-timeline
This build has been deprecated
vis-timeline-graph2d.min.js
In case you are importing this through a URL it will result in a 404 eventually.
In case you are importing this through Node it will be replaced by the peer build eventually.Please use the peer or standalone build instead.
Peer: https://visjs.github.io/vis-timeline/examples/timeline/peer-build.html
Standalone: https://visjs.github.io/vis-timeline/examples/timeline/standalone-build.html
"react-visjs-timeline": "^1.6.0",
"vis-timeline": "^7.1.0"
If I understand correctly, instead of importing vis-timeline-graph2d.min.js
, react-visjs-timeline should import like this (peer build):
import { DataSet } from "vis-data";
import { Timeline } from "vis-timeline/peer";
or this (standalone build)
import { DataSet, Timeline } from "vis-timeline/standalone";
Hi! Is it possible to prevent vertical scrolling to top on component rerender?
I use ReactDOM.render to render the timeline.
ReactDOM.render(<Timeline options={options} items={items} groups={groups} clickHandler={clickHandler} rangechangeHandler={rangeChangeHandler} />, document.getElementById('timeline'));
But I don't understand how to reach the timeline in my js code. I tried Timeline.getVisibleItems() but it throw me a not a function error
So, here is my use case: I'm using react-router, and have several pages. On the first page, no timeline is being rendered. I switch to the second page where a timeline should be rendered, but it is not visible. I can inspect it, and see that the element is there, but it has an inline style on the .vis-timeline
element which sets it to hidden.
I can change the visibility using css or in code, but then it's only visible and you cannot scroll or use the timeline.
The solution I found was to get the timeline in my componentDidMount
function, and then set the styles on .vis-timeline
to an empty string. For example:
componentDidMount() {
let timeline = document
.getElementById("uniqueId")
.getElementsByClassName('vis-timeline')[0];
timeline.style = "";
}
This was the only way I could get it to initialize correctly. This may be related to #38 as well.
Documentation specifically mentions that functions in the react wrapper are in Camel case - as per React standard. Yet, you need to pass 'rangechangedHandler' and not 'rangeChangedHandler' and
'rangechangeHandler' and not 'rangeChangeHandler'.
react-visjs-timeline:
vis version:
Add step by step guide to reproduce issue
Add relevant code snippet here
Any issue which is related to this issue
Handlers are only initialized in componentDidMount, so it does handler changes based on state changes do not result in an updated hander.
react-visas-timeline: 1.4.0
vis version: 4.21.0
Create a timeline with a clickHandler that depends on the state.
Change that part of the state.
Click the item.
The original handler is called.
const MyComponent = ({items}}} => (
<VisTimeline items={items}
clickHandler={() => console.log('click', items)
/>);
Add additional elements to so that items changes from its initial value. After items is updated, clicking on an item prints the original value of items.
How do you get this up and running? I've downloaded the files and ran the npm install of react-visjs-timeline but doing an npm start wont work and opening it with live-server shows nothing.
I can't find a way to make the timeline zoom into a specific level of zoom. I looked over the source code, and I've thought of creating a method like
setWindow = (start, end ) => {
timeline.setWindow(start, end);
}
But, I can't think of a way to expose an internal method of a component that could be accessed when importing the component. Need some help on this if anyone has any ideas.
I am wanting to restrict the timeline to a specific time range for use with a video player is there anyway to do this? Declaring a start and end time does not limit the range.
Hi,
First, thank you so much for this useful plugin.
But I'm facing this problem since I started using it.
Describe the bug
Rendering the timeline while being (scrolled) down on the page makes me appear on top of it and it makes me unavailable to modify items at de bottom of the calendar.
Please tell me if this comes from a mistake from me, or a known bug, or even if anyone already faced this problem.
To Reproduce
My code is really to complexe to be put on a sandbox but steps are easy to reproduce :
render
Expected behavior
Normal render
behavior.
What actually happen
The page scrolls up instantly to the top.
Desktop
I'm using the last version of the lib, and I use Chrome 69.0.3497.100 (up to date) on Windows 10
Hello, I would like to pass this component in french but it seems that the local custom is ignored
` const options = {
locales: {
// create a new locale (text strings should be replaced with localized strings)
mylocale: {
current: 'current',
time: 'time',
months: 'janvier_février_mars_avril_mai_juin_juillet_août_septembre_octobre_novembre_décembre'.split('_'),
monthsShort: 'janv._févr._mars_avr._mai_juin_juil._août_sept._oct._nov._déc.'.split('_'),
monthsParseExact: true,
weekdays: 'dimanche_lundi_mardi_mercredi_jeudi_vendredi_samedi'.split('_'),
weekdaysShort: 'dim._lun._mar._mer._jeu._ven._sam.'.split('_'),
weekdaysMin: 'di_lu_ma_me_je_ve_sa'.split('_'),
}
},
// use the new locale
locale: 'mylocale',
width: '100%',
orientation: 'top',
maxMinorChars: 3,
zoomable: true,
horizontalScroll: true,
editable: true,
start: this.state.startDate,
end: this.state.endDate,
stack: false,
showMajorLabels: true,
showCurrentTime: true,
zoomMin: 1000000,
type: 'range'
}`
Hi,
I have created a very simple React app here which is basically a (visjs setup-wise) clone of the Basic demo available on visjs documentation site.
However for some reason, the items are not displayed in the React app. I compared the DOM and noticed that there are differences in the vis-group and vis-content nodes - Both are empty in the React app while they contain child nodes in the demo page.
The "Basic demo" looks like this -
And the React test app looks like this -
Any ideas?
I created this small app as a testbed to isolate rendering issues we faced while integrating react-visjs-timeline component in a larger React app.
Note that both the React app and the Basic demo use the same version of visjs library (4.18.0).
Thanks
I have noticed that the mouseDown / mouseUp events are missing from the events props, I needed to use them in order to drag specific items.
I noticed it's a bit tricky to use it along with other events, but I think it still might be needed.
I will create a PR in case it is OK to add them :)
react-visjs-timeline: 1.5.0
vis version:
const events = [
'currentTimeTick',
'click',
'contextmenu',
'doubleClick',
'groupDragged',
'changed',
'rangechange',
'rangechanged',
'select',
'timechange',
'timechanged',
'mouseOver',
'mouseMove',
'itemover',
'itemout',
]
PR #36 added some missing events ( but not these two )
I've noticed that any change to the value of the items on the timeline or even deletion of the items don't actually effect the state. Deleted items are still present in the "items" array within the state and remain unchanged if they were changed in the timeline. I was wondering if this would be supported later, or if anyone has a solution.
"react-visjs-timeline": "^1.4.0",
"react": "^16.2.0",
I'am trying to adapt the drag n' drop exemple within react-vis-js-timeline.
Is this possible?
How I can do this?
I cant find how to set the onDrop event. I tried this
<Timeline onDragOver={this.handleDragOver} onDrop={this.handleDrop} options={options} />
https://github.com/Lighthouse-io/react-visjs-timeline/blob/master/src/index.js#L1
This import includes a built vis.js bundle, with its own moment.js included. This increases output size and, most importantly, causes issues with moment.js locale configuration (because vis.js dist bundle uses its own copy of moment).
react-visjs-timeline: 1.5.0
vis version: 4.21.0
This is easily fixed by changing import from vis/dist/vis-timeline-graph2d.min
to vis/index-timeline-graph2d.js
.
Currently I'm using a workaround via a webpack alias:
{
resolve: {
alias: {
'vis/dist/vis-timeline-graph2d.min': 'vis/index-timeline-graph2d.js'
}
}
}
This solves my issue with moment.js locales.
From the vis documentation shows that React components can be used as templates for Items and Groups. However, I can't seem to get anything to send data out - ie clicking an item to trigger a Redux action. Is the React component only able to function as normal when used as an Item by specifying the template function like in the examples:
template: function (item, element) {
if (!item) { return }
ReactDOM.unmountComponentAtNode(element);
return ReactDOM.render(<Item item={item} />, element);
},
Item looks like this
class Item extends React.Component {
constructor(props) {
super(props);
this.onClick = this.onClick.bind(this);
}
onClick(event) {
console.log("click");
// this.props.dispatch()
}
render() {
return (
<div style={{width:'20px', height:'20px'}}>
<button style={{width:'70px', height:'50px'}} onClick={this.onClick} type="button">Click</button>
</div>
);
}
}
The strange thing is, the onClick handler never executes when clicking on the button, but does trigger when the item is dragged on the timeline
http://visjs.org/docs/timeline/#Methods
The component currently does not pass a ref for me to call these methods on.
How do I specify an onUpdate handler ? It did not help adding onUpdate as a function (taking item, callback as arguments) in options passed to Timeline.
The timeline vertical scroll is very slow when opened on Firefox.
When i try to use the scroll bar it does nothing, i can only scroll by dragging the mouse up and down inside the timeline or inside the group column.
The Firefox version i am using is 59.0.2.
react-visjs-timeline: 1.5.0
vis version: 4.21.0
react: 16.3.1
Hello,
How can I set the timeline to show yesterday, today and tomorrow only?
Thanks
As mention in title, I'd need to update the dataset in onAdd, Remove, Update. As these functions are defined in the option I don't find how to do that...
Any clue... Or alternative solution?
Everything is 1 month early !!
I am encountering a weird problem that my items always get pulled by one month! for eg. if i specify '2017/02/01'
the item appears in the month of Jan !
I am initialising the start/end dates for each event in this format:
{
start: new Date('2018/01/01'),
end: new Date('2018/10/01'),
}
Year in time axis
Whenever I specify min/max or start/stop in my options, the year displayed at the start is displayed incorrectly.
After update react to version 16 my timeline get style visibility: hidden; , when manualy change it to visible timeline is not work fine - i cant drag , zoom in etc.
touch-action: pan-y; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); visibility: hidden; height: 205px;
"react": "^16.0.0",
"react-dom": "^16.0.0",
"react-visjs-timeline": "^1.3.4-beta",
"vis": "^4.20.1",
Hi!
Very nice work! Is it possible to use timeline groups with this wrapper?
Thanks!!
Items are in the wrong position. Only when zooming in the position shifts to the correct on.
Initially I though this was due to a bug in the 1.20 version of visjs however downgrading did not solve the issue.
react-visjs-timeline:7.3.4
vis version:4.19.1
const createGanttItems = () =>{
let items = []
let groups = []
props.project.gates.forEach(gate=>{
groups.push({id:gate["gate"],content:`Gate ${gate["gate"]+1}`});
items.push({
id:`planned_${gate.gate}`,
start: Date.parse(gate["planned_start"]),
group:gate["gate"],
title: `Gate ${gate["gate"]+1} Planned`,
content: `Gate ${gate["gate"]+1} Planned`
})
if(gate["real_start"]){
let item = {
id:`real_${gate.gate}`,
start:gate["real_start"],
content: `Gate ${gate["gate"]+1} Real`,
group: gate["gate"],
title:`Gate ${gate["gate"]} Real`
}
if (gate["real_end"]){
//item["end"] = gate["real_end"]
}
items.push(item)
}
})
setItems(items);
setGroups(groups);
console.log(items);
}
<Grid item xs={12}>
<Timeline
items={items}
groups={groups}
/>
</Grid>
Any issue which is related to this issue
I'm trying to set options = { height: "100%" } but it doesn't work cause the div element added inside your component (whose wrap the class="vis-timeline ...") needs a "height: 100%;" css property. I added by my css. i would like sugest you put it on that div.
react-visjs-timeline: 1.6.0
vis version: 6.3.5
My options obj:
const options = {
width: "100%",
height: "100%",
stack: false,
showMajorLabels: true,
showCurrentTime: true,
zoomMin: 1000000,
//type: 'background',
format: {
minorLabels: {
minute: "h:mma",
hour: "ha"
}
}
};
In my browser looks like this...
... and, when i add this height it fixes !
Thanks for read this!
Hello Guys,
im not sure if im right here or if this is just a webpack config issue.
i cant load the module.
this is my error:
ERROR in css-loader?sourceMap&modules&importLoaders=1&localIdentName=[name][local]_[hash:base64:5]!./~/vis/dist/vis.css
Page scroll on top on setState if groups are defined
https://codesandbox.io/embed/damp-night-r92m5?fontsize=14&hidenavigation=1&theme=dark
How to prevent this this scroll?
Hello.
How to move the window such that given time is centered on screen ?
I mean is it possible to use moveTo or do you have another way to set active some day or time in timeline ?
Thank you.
When I attempt to import react-visjs-timeline
and then transform my source with browserify
, it says "Error runing browserify Unexpected token undefined".
react-visjs-timeline: 1.4.0
vis version: 4.21.0
browserify version: 13.3.0
npm install
npm install -g gulp
if not already installedgulp
$ gulp
[15:14:01] Using gulpfile ~/test/gulp/gulpfile.js
[15:14:01] Starting 'default'...
[15:14:01] Starting 'browserify'...
[15:14:01] Finished 'browserify' after 1.2 ms
[15:14:01] Finished 'default' after 2.39 ms
events.js:163
throw er; // Unhandled 'error' event
^
SyntaxError: Unexpected token
If I remove the require(... .css)
line from node_modules/react-visjs-timeline/build/index.js
, then the output is what I expect.
$ gulp
[15:16:38] Using gulpfile ~/test/gulp/gulpfile.js
[15:16:38] Starting 'default'...
[15:16:38] Starting 'browserify'...
[15:16:38] Finished 'browserify' after 1.23 ms
[15:16:38] Finished 'default' after 2.19 ms
Ran browserify and wrote output
I am using browserify-css
which seems like it should handle the import of css, but it is clearly not doing that.
I don't think toggling nested groups works. I forked the repository to see if I can figure it out but I'm running into trouble running this locally.
Changing import Timeline from 'react-vjsjs-timeline' in examples/src/App.js to import Timeline from '../../build' causes a bunch of dependency issues. Are there any instructions on how to test my changes?
Failed to compile.
Error in ../build/index.js
Module not found: 'style' in ~/react-visjs-timeline/build
@ ../build/index.js 13:0-27
using Timeline displays a warning about deprecated PropTypes usage:
Warning: Accessing PropTypes via the main React package is deprecated, and will be removed in React v16.0. Use the latest available v15.* prop-types package from npm instead. For info on usage, compatibility, migration and more, see https://fb.me/prop-types-docs
https://facebook.github.io/react/warnings/dont-call-proptypes.html
Handle editing items
I have integrated with reactjs app, I need to update item in state or make a call to method using onMove event but it does not allow.
Uncaught TypeError: this.handleMove is not a function
react-visjs-timeline: 1.5.0
vis version: 4.12.0
options = {
onMove: function(item, callback){
//this.handleMove();
}
}
Add d.ts for TypeScript users
what do you say?
Library doesn't load in Meteor.js framework.
Hello. Does anybody have any idea what this error might be?
Using the same package versions as the example.
react-visjs-timeline: 1.4.0
vis version: 4.20.1
Original source file. Typical setup. The issue is probably related to assumptions about the build pipeline.
import React, { Component } from 'react';
import Timeline from 'react-visjs-timeline';
import moment from 'moment';
// http://visjs.org/docs/timeline/#Configuration_Options
const options = {
width: '100%',
height: '60px',
stack: false,
showMajorLabels: true,
showCurrentTime: true,
zoomMin: 1000000,
type: 'background',
format: {
minorLabels: {
minute: 'h:mma',
hour: 'ha'
}
}
}
const items = [{
start: new Date(2010, 7, 15),
end: new Date(2010, 8, 2), // end is optional
content: 'Trajectory A',
}]
export class TimelineSidescrollPage extends React.Component {
constructor(props) {
super(props);
}
render(){
return(
<div id="horizontalTimeline">
{/* <Timeline options={options} /> */}
</div>
);
}
}
Warning: Timeline.componentWillMount(): Assigning directly to this.state is deprecated (except inside a component's constructor). Use setState instead.
I'm completly noob in react. I'm trying to use a react object to set the items
var Items = createReactClass({
render: function() {
return new vis.DataSet();
}
})
After in my ReactDOM.render
ReactDOM.render(<Timeline options={options} items=<Items/> />, document.getElementById('timeline'));
I'm getting this error.
Warning: Failed prop type: Invalid prop `items` of type `object` supplied to `Timeline`, expected `array`.
in Timeline
How Can I pass my items to the ReactDOM.render()?
Importing produces the following error
Module not found: Can't resolve 'vis/dist/vis-timeline-graph2d.min' in '#############/node_modules/react-visjs-timeline/build'
react-visjs-timeline: 1.4.0
vis version: 4.21.0
import {Timelines as TL} from 'react-visjs-timeline';
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.