jsainsburyplc / react-timelines Goto Github PK
View Code? Open in Web Editor NEWReact Timelines Library
Home Page: https://jsainsburyplc.github.io/react-timelines/
License: MIT License
React Timelines Library
Home Page: https://jsainsburyplc.github.io/react-timelines/
License: MIT License
Really cool this is built! Thank you.
Is it possible to get some very basic documentation. The demo helps at least :)
I'm using this to create a timeline based on weeks and days:
I used the following code to create the cells:
export const buildWeekCells = () => {
const v = []
for (let i = 0; i < 52; i += 1) {
const week = moment().startOf('year').weekday(1).add(i, 'week')
v.push({
id: `w${i}`,
title: `W${i}`,
start: week.toDate(),
end: week.add(1, 'week').subtract(2, 'day').toDate(),
})
}
return v
}
export const buildDayCells = () => {
const v = []
for (let i = 0; i < 365; i += 1) {
const day = moment().startOf('year').weekday(7).add(i, 'day')
if (day.weekday() !== 6 && day.weekday() !== 0) {
v.push({
id: `d${i}`,
title: day.toString()[0],
start: day.toDate(),
end: day.add(1, 'day').toDate(),
})
}
}
return v
}
I couldn't find a way to hide specific columns (in my case the weekends). This could be very useful. Any ideas on how to implement this?
Sticky header scroll left/right performance is laggy in FF.
The demo currently uses Webpack 3 and has audit problems. It's build tooling should be upgraded.
Great repo!
Quick question, does the data get sent to any server or everything handled in the browser?
Thank you..
Can someone lease point me to documentation. Thanks.
Currently the project allows a developer to pass css classes to Timeline Elements via the 'classes' property of elements. This capability should be extended the grid cells as well for the use case of shading weekends / holidays.
Please have a demo page so we can see without having to clone
As it currently stands we are not prefixing our classNames e.g. we have .sidebar
which means consumers CSS is likely to leak into the timeline.
I suggest we prefix all our classNames with rt-
to avoid this.
Since the addition of the sticky header a rendering issue has surfaced when scrolling - it appears as though the paint is tearing.
Hey, this looks like a cool library, thanks for sharing.
I'm looking for a way to pass a prop to Timeline
that would allow for changing the formatting for the label of the NowMarker
and the PointerMarker
components.
Is this something you'd consider adding?
Cheers
Hi, I am trying to run the demo locally with npm. For some reason the page does not load.
Any idea why it won't work?
Currently if the end date isn't far enough future (for given scale) the timeline is displayed shorter than parent. We could stretch to fill space (would also have to listen to debounced window
resize
event).
Rewriting this library in TypeScript would help it remain bug free and easier for new maintainers, and bring it closer to other products.
We no longer use CircleCI as part of our standard tooling. We should migrate this library's testing and build pipeline to GitHub Actions, to colocate it with the repository.
We need to document the API. Will do this following the demo.
I'm not sure how accessible React Timelines is currently. Let's find out and fix as many issues as we can...
Sorry, been struggling to find time to document the library but we do have a basic demo running now https://jsainsburyplc.github.io/react-timelines/
How can we alter the width of each month cell column?
Add onclick support for elements e.g. "clickElement"
We should virtualise the timeline for significant performance gains.
How to display instead of month and month instead of quarter?
To bring click handlers to Elements and Tracks, these are passed in at the top level as clickElement
and (the proposed) clickTrack
. These are then manually passed through each layer, till they reach the Elements and Tracks.
It could be more appropriate to use context
to get these to the intended nested components, without having to pass them through each intermediary.
Proposal raised in #68
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.