jsainsburyplc / react-timelines Goto Github PK

View Code? Open in Web Editor NEW

252.0 84.0 118.0 2.72 MB

React Timelines Library

Home Page: https://jsainsburyplc.github.io/react-timelines/

License: MIT License

JavaScript 85.72% CSS 14.28%

react library luna sass scss timeline gantt visualization

react-timelines's Introduction

React Timelines

Demo

Install

# with npm
npm install react-timelines

# or with Yarn
yarn add react-timelines

Use

import Timeline from 'react-timelines'

const MyWidget = () => <Timeline {...props} />

export default MyWidget

Styling

Using Webpack

Using Webpack with CSS loader, add the following:

import 'react-timelines/lib/css/style.css'

Using Sass (SCSS)

Using Sass you can configure the timeline with variables:

$react-timelines-font-family: MaryAnn;
$react-timelines-sidebar-width: 320px;

@import '~/react-timelines/src/scss/style';

Without build tools

Create a CSS file with the contents of react-timelines/lib/css/style.css and include it in <head>

Development

npm install
npm run watch

This library is developed using VSCode - opening it in VSCode will recommend extensions, and enable linting and auto-formatting of code.

react-timelines's People

Contributors

Stargazers

Watchers

Forkers

alaev kakura yamayamasan crazybydefault sebastienminne rajsrai shy2850 rabbitkevin ttitoo yorickreum hdosurrego makn3tiza henryhaizhu gallyamow whmxsc 23 xeolabs camilafarelo nommuna ghareshshinde awtmarriott ninjadrupal remolloy1010 worawutboy mindhiveoy lsbrillant nurikabe isofianos-thelist-app kuldeep-srivastava africademy rachdaup93 peterplloyd mastercbhw crux-coder skp7111994 quangvo09 nhinq2 dfq666 byterev ahanusek caowenjin2 kimamov dmuczynski atsreejith ianpranasinghe gabriel-giovani 5seconds-info conflictingtheories on2air gintian ashalogic vunamhung hivemind9000 tonny008 snikeron aungkyawkyawsoe mikeg1977 hyperplane-org inderpreet-forks jano314159 kannndev arbsantos nanzm devfss rexizam pjc0247 vskachkov pizziboy zhouzhiqing1987 ssugimoto hoangansu9 faisal-piecyfer hamzapiecyfer fujiback ridwansodiq thanasinb bassamhabash bassamihabash gjiashuai sophyphreak haoygit vijityannapon brianestadimas zlspitaya prasanthlalapeta mohaimenh brandonramsey huyjs9 codiini vamsy-reddy nalimonti arilhr uniqueweb1 pkmuru miroku-y nicholasgriffintn indika-wijesinghe zevans0808 hr-hsugiyama yqwoe

react-timelines's Issues

Use HTML lists for sidebar tracks

We're currently using <div> elements when we should really be using lists to be semantically correct.

TypeScript Support

Rewriting this library in TypeScript would help it remain bug free and easier for new maintainers, and bring it closer to other products.

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).

Tracker tearing when scrolling

Since the addition of the sticky header a rendering issue has surfaced when scrolling - it appears as though the paint is tearing.

Documentation

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/

Localization

Hello! Is it possible to somehow translate months into another language? I changed title property in month cell on my language but I still see English titles then I put my mouse in top of the timeline.

Thank you for this lib, it's cool!

Upgrade Demo build tools

The demo currently uses Webpack 3 and has audit problems. It's build tooling should be upgraded.

Click Element Support

Add onclick support for elements e.g. "clickElement"

Feature/Help needed: Hide specific columns

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?

Use context for time helper instead of passing props

Demo link

Please have a demo page so we can see without having to clone

Vertical time lines

Not sure how to implement cleanly but something like:

Accessibility

I'm not sure how accessible React Timelines is currently. Let's find out and fix as many issues as we can...

Unable to run demo locally

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?

Add class name prefixes to fix potential style leaks

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.

Question/ Data handling

Great repo!

Quick question, does the data get sent to any server or everything handled in the browser?

Thank you..

Firefox performance

Sticky header scroll left/right performance is laggy in FF.

Needs Documentation

Really cool this is built! Thank you.

Is it possible to get some very basic documentation. The demo helps at least :)

Support for mouse drag

Feature: Pass css classes to Grid Cells

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.

Use context to pass click* handlers to tracks and elements

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

Feature Request: Override Marker Labels

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

https://storybooks.js.org/