Reactify events and categories

src/components/Timeline.jsx

@@ -11,6 +11,8 @@ import TimelineZoomControls from './TimelineZoomControls.jsx';
 import TimelineLogic from '../js/timeline/timeline.js';
 import TimelineLabels from './TimelineLabels.jsx';
 import TimelineMarkers from './TimelineMarkers.jsx'
+import TimelineEvents from './TimelineEvents.jsx';
+import TimelineCategories from './TimelineCategories.jsx';
 
 class Timeline extends React.Component {
   constructor(props) {
@@ -59,14 +61,14 @@ class Timeline extends React.Component {
     if (this.timeline) {
       return this.timeline.moveTime(dir);
     }
-    return '';
+    return null;
   }
 
   onApplyZoom(zoom) {
     if (this.timeline) {
       return this.timeline.applyZoom(zoom);
     }
-    return '';
+    return null;
   }  
 
   renderSVG() {
@@ -84,7 +86,15 @@ class Timeline extends React.Component {
         <TimelineHandles dims={dims} onMoveTime={(dir) => { this.onMoveTime(dir) }} />
         <TimelineZoomControls zoomLevels={this.props.app.zoomLevels} dims={dims} onApplyZoom={(zoom) => { this.onApplyZoom(zoom); }} />
         <TimelineLabels dims={dims} timelabels={this.props.app.timerange} />
+        <TimelineCategories categories={this.props.domain.categories} />
         <TimelineMarkers selected={this.props.app.selected} getEventX={(e) => this.timeline.getEventX(e)} getEventY={(e) => this.timeline.getEventY(e)} />
+        <TimelineEvents
+          events={this.props.domain.events}
+          getEventX={(e) => this.timeline.getEventX(e)}
+          getEventY={(e) => this.timeline.getEventY(e)}
+          getCategoryColor={this.props.methods.getCategoryColor}
+          onSelect={this.props.methods.onSelect}
+        />
       </svg>
     ); 
   }

src/components/TimelineCategories.jsx

@@ -0,0 +1,31 @@
+import React from 'react';
+
+class TimelineCategories extends React.Component {
+
+  getY(idx) {
+    const h = 76;
+    console.log((idx + 1) * h / this.props.categories.length)
+    return (idx + 1) * h / this.props.categories.length;
+  }
+
+  renderCategory(cat, idx) {
+    return (
+      <g class="tick" opacity="1" transform={`translate(0,${this.getY(idx)})`}>
+        <line stroke="red" x2="-720"></line>
+        <text fill="blue" x="-723" dy="0.32em">{cat.category}</text>
+      </g>
+    );
+  }
+
+  render () {
+    console.log(this.props.categories)
+    return (
+      <g transform="translate(840, 0)" class="yAxis" fill="none" font-size="10" font-family="sans-serif" text-anchor="end">
+        <path class="domain" stroke="currentColor" d="M-720,38.5H0.5V76.5H-720"></path>
+        {this.props.categories.map((cat, idx) => { return this.renderCategory(cat, idx); })}
+      </g>    
+    );        
+  }
+}
+
+export default TimelineCategories;

src/components/TimelineEvents.jsx

@@ -0,0 +1,41 @@
+import React from 'react';
+
+class TimelineEvents extends React.Component {
+
+  getAllEventsAtOnce(eventPoint) {
+    const timestamp = eventPoint.timestamp;
+    const category = eventPoint.category;
+    return this.props.events
+      .filter(event => (event.timestamp === timestamp && category === event.category))
+  }
+
+  renderEvent(event) {
+    return (
+      <circle
+        className="event"
+        cx={0}
+        cy={0}
+        style={{
+          'transform': `translate(${this.props.getEventX(event)}px, ${this.props.getEventY(event)}px)`,
+          'transition': 'transform 0.5s ease'
+        }}
+        r={5}        
+        fill={this.props.getCategoryColor(event.category)}
+        onClick={() => {this.props.onSelect(this.getAllEventsAtOnce(event))}}
+      >
+      </circle>
+    )
+  }
+
+  render () {
+    return (
+      <g
+        clipPath={"url(#clip)"}
+      >
+        {this.props.events.map(event => this.renderEvent(event))}
+      </g>
+    );
+  }
+}
+
+export default TimelineEvents;