search

robertrouse / theographic-web

A linked encyclopedia of biblical people, places, periods, and passages
http://bit.ly/about-theographic
GNU General Public License v3.0
28 stars 6 forks source link

Create timeline component #45

Open robertrouse opened 5 years ago

robertrouse commented 5 years ago

Small, one-line thing with dots for single years or lines for events of some duration. Example below. image

Consider Semiotic library, a React implementation of D3. https://github.com/emeeks/Semiotic

nomoney4me commented 5 years ago

We could probably custom build it rather than using a big o' library.

What other functions are expected of the timeline? Hover? Clickable? What information is displayed when clicked/hover?

robertrouse commented 5 years ago

We could probably custom build it rather than using a big o' library.

What other functions are expected of the timeline? Hover? Clickable? What information is displayed when clicked/hover?

Version 1 may have circles adjusted to indicate number of events in a given year. Hover would show event names in that year. Clicks would scroll to a page anchor.

Future iterations may include gantt charts on some pages. Network diagrams may also come down the road. See issue #26 for more. So, it's a good idea to have a system that's flexible enough to add complexity in future iterations. Bespoke solutions have their tradeoffs.

nomoney4me commented 5 years ago

I think this is more fitting and lightweight, http://visjs.org/examples/timeline/basicUsage.html There is a React component for it here: https://github.com/Lighthouse-io/react-visjs-timeline

Regarding gantt charts, there's this one which I think is pretty easy to use: https://www.npmjs.com/package/react-calendar-timeline