0.1.16 • Published 6 months ago

react-canvas-timeline v0.1.16

Weekly downloads
179
License
to be done
Repository
github
Last release
6 months ago

react-canvas-timeline

a timeline based on canvas and react

histomania

Install

npm
npm install --save react-canvas-timeline

yarn
yarn add react-canvas-timeline

Github

https://github.com/peterrank/timeline

Examples

run storybook to see some examples.

yarn storybook

see usages in projects

https://histomania.com/
https://www.pixipoint.com/

Quick run

build some test data (testdatabuilder.js)

import {Resource, Task, LCal, Helper} from 'react-canvas-timeline';

var seed = 1;
const random = () => {
  var x = Math.sin(seed++) * 10000;
  return x - Math.floor(x);
}

const buildTestData = () => {
  seed = 1;
  const COLORS = ['FF005D', '0085B6', '0BB4C1', '00D49D', 'FEDF03', '233D4D', 'FE7F2D', 'FCCA46', 'A1C181', '579C87']
  let color = -1
  const nextColor = () => {
    color = (color + 1) % COLORS.length
    return COLORS[color]
  }

  let resources = [];
  for(let n=0; n<100; n++) {
    let res = new Resource(n, "Res "+String(n).padStart(3, '0'), "Techniker", false);
    resources.push(res);
  }

  let tasks = [];
  for(let n=0; n<1000; n++) {
    let now = new LCal().initNow();

    let start = now.clone().addDay(Math.round(n/10));
    let end = now.clone().addDay(Math.round(n/10) + 1 + random()*20);

    let task = new Task(n, start, end, Math.round(random()*100), "Task "+n, "Ein Vorgang", null);
    let barColor = "#"+nextColor();
    task.getDisplayData().setColor(barColor);
 
    let innerEvents = [];
    let innerStart = start.clone();
    let innerEnd = start.clone().addHour(5);
    let innerEvent = new Task(0, innerStart, innerEnd, 0, "", "", null);
    innerEvents.push(innerEvent);

    innerEnd = end.clone();
    innerStart = end.clone().addHour(-15);
    innerEvent = new Task(0, innerStart, innerEnd, 0, "", "", null);

    innerEvents.push(innerEvent);

    task.innerEvents = innerEvents;

    tasks.push(task);
  }
  return {
    resources,
    tasks
  }
}

and use it

import {ReactCanvasTimeline} from 'react-canvas-timeline';
import buildTestData from './testdatabuilder';

...

let testData = buildTestData();

...

<ReactCanvasTimeline
  resources={testData.resources}
  tasks={testData.tasks}
  width={1000}
  height={500}
/>
0.1.16

6 months ago

0.1.10

7 months ago

0.1.11

7 months ago

0.1.12

7 months ago

0.1.13

7 months ago

0.1.14

6 months ago

0.1.15

6 months ago

0.1.8

8 months ago

0.1.9

7 months ago

0.1.7

2 years ago

0.1.4

2 years ago

0.1.6

2 years ago

0.1.5

2 years ago

0.1.0

2 years ago

0.1.2

2 years ago

0.1.1

2 years ago

0.1.3

2 years ago

0.0.95

2 years ago

0.0.96

2 years ago

0.0.97

2 years ago

0.0.98

2 years ago

0.0.93

2 years ago

0.0.94

2 years ago

0.0.84

3 years ago

0.0.85

3 years ago

0.0.86

3 years ago

0.0.87

3 years ago

0.0.88

2 years ago

0.0.89

2 years ago

0.0.80

3 years ago

0.0.81

3 years ago

0.0.82

3 years ago

0.0.83

3 years ago

0.0.79

3 years ago

0.0.90

2 years ago

0.0.91

2 years ago

0.0.92

2 years ago

0.0.77

3 years ago

0.0.78

3 years ago

0.0.75

3 years ago

0.0.76

3 years ago

0.0.73

3 years ago

0.0.74

3 years ago

0.0.70

3 years ago

0.0.71

3 years ago

0.0.72

3 years ago

0.0.69

4 years ago

0.0.62

4 years ago

0.0.63

4 years ago

0.0.64

4 years ago

0.0.65

4 years ago

0.0.66

4 years ago

0.0.67

4 years ago

0.0.68

4 years ago

0.0.60

4 years ago

0.0.61

4 years ago

0.0.59

4 years ago

0.0.56

4 years ago

0.0.57

4 years ago

0.0.58

4 years ago

0.0.55

4 years ago

0.0.53

4 years ago

0.0.54

4 years ago

0.0.52

4 years ago

0.0.51

4 years ago

0.0.50

4 years ago

0.0.49

4 years ago

0.0.48

4 years ago

0.0.47

4 years ago

0.0.46

4 years ago

0.0.45

4 years ago

0.0.44

5 years ago

0.0.43

5 years ago

0.0.42

5 years ago

0.0.41

5 years ago

0.0.40

5 years ago

0.0.39

5 years ago

0.0.38

5 years ago

0.0.37

5 years ago

0.0.36

5 years ago

0.0.35

5 years ago

0.0.34

5 years ago

0.0.33

5 years ago

0.0.32

5 years ago

0.0.31

5 years ago

0.0.30

5 years ago

0.0.29

5 years ago

0.0.28

5 years ago

0.0.26

5 years ago

0.0.27

5 years ago

0.0.24

5 years ago

0.0.25

5 years ago

0.0.23

5 years ago

0.0.22

5 years ago

0.0.21

5 years ago

0.0.20

5 years ago

0.0.19

5 years ago

0.0.18

5 years ago

0.0.17

5 years ago

0.0.16

5 years ago

0.0.15

5 years ago

0.0.14

5 years ago

0.0.12

5 years ago

0.0.13

5 years ago

0.0.11

5 years ago

0.0.10

5 years ago

0.0.9

5 years ago

0.0.8

5 years ago

0.0.7

5 years ago

0.0.6

5 years ago

0.0.5

5 years ago

0.0.4

5 years ago

0.0.3

5 years ago

0.0.2

5 years ago

0.0.1

5 years ago