Reactifyf scale Y

src/components/Timeline.jsx

@@ -13,6 +13,7 @@ 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) {
@@ -27,12 +28,15 @@ class Timeline extends React.Component {
         height_controls: 115,
         margin_left: 120        
       },
-      softTimeUpdate: 0
+      softTimeUpdate: 0,
+      scaleY: null
     };
   }
 
   componentDidMount() {
-    this.methods = Object.assign({}, this.props.methods, { onSoftUpdate: (toggle) => { this.setState({ softTimeUpdate: toggle }) }});
+    this.methods = Object.assign({}, this.props.methods, {
+      onSoftUpdate: (toggle) => { this.setState({ softTimeUpdate: toggle }) }
+    });
     this.timeline = new TimelineLogic(this.svgRef.current, this.props.ui, this.methods);
     this.timeline.update(this.props.domain.categories, this.props.app.timerange);
     this.computeDims();
@@ -42,9 +46,23 @@ class Timeline extends React.Component {
   componentWillReceiveProps(nextProps) {
     if (hash(nextProps) !== hash(this.props)) {
       this.timeline.update(nextProps.domain.categories, nextProps.app.timerange);
+
+      let groupYs = Array.apply(null, Array(nextProps.domain.categories.length));
+      groupYs = groupYs.map((g, i) => (i + 1) * 80 / groupYs.length);
+
+      this.setState({ scaleY: d3.scaleOrdinal().domain(nextProps.domain.categories).range(groupYs) });      
     }
   }
 
+    /**
+   * Get y height of eventPoint, considering the ordinal Y scale
+   * @param {object} eventPoint: regular eventPoint data
+   */
+  getEventY(eventPoint) {
+    return this.state.scaleY(eventPoint.category);
+  }
+
+
   onClickArrow() {
     this.setState((prevState, props) => {
       return {isFolded: !prevState.isFolded};
@@ -84,6 +102,10 @@ class Timeline extends React.Component {
         height={dims.height}
       >
         <TimelineClip dims={dims} />
+        <TimelineCategories 
+          timeline={this.timeline}       
+          categories={this.props.domain.categories}
+        />
         <TimelineHandles
           dims={dims}
           onMoveTime={(dir) => { this.onMoveTime(dir) }}
@@ -100,12 +122,12 @@ class Timeline extends React.Component {
         <TimelineMarkers
           selected={this.props.app.selected}
           getEventX={(e) => this.timeline.getEventX(e)}
-          getEventY={(e) => this.timeline.getEventY(e)}
+          getEventY={(e) => this.getEventY(e)/*this.timeline.getEventY(e)*/}
         />
         <TimelineEvents
           events={this.props.domain.events}
           getEventX={(e) => this.timeline.getEventX(e)}
-          getEventY={(e) => this.timeline.getEventY(e)}
+          getEventY={(e) => this.getEventY(e)/*this.timeline.getEventY(e)*/}
           getCategoryColor={this.props.methods.getCategoryColor}
           onSelect={this.props.methods.onSelect}
         />

src/components/TimelineCategories.jsx

@@ -0,0 +1,55 @@
+import React from 'react';
+
+class TimelineCategories extends React.Component {
+
+  constructor() {
+    super();
+    this.grabRef = React.createRef()
+    this.state = {
+      isInitialized: false
+    }
+  }
+
+  componentDidUpdate() {
+    if (!this.state.isInitialized && this.props.timeline) {
+      const drag = d3.drag()
+      .on('start', this.props.timeline.onDragStart)
+      .on('drag', this.props.timeline.onDrag)
+      .on('end', this.props.timeline.onDragEnd);
+
+      d3.select(this.grabRef.current)
+        .call(drag);
+
+        this.setState({ isInitialized: true });
+    }
+  }
+
+  getY(idx) {
+    return (idx + 1) * 80 / this.props.categories.length
+  }
+
+  renderCategory(category, idx) {
+    return (
+      <g class="tick" opacity="1" transform={`translate(0,${this.getY(idx)})`}>
+        <line stroke="currentColor" x1={120} x2={1026}></line>
+        <text fill="currentColor" x={120} dy="0.32em">{category.category}</text>
+      </g>
+    )
+  }
+
+  render () {
+    return (
+      <g
+        transform="translate(0, 0)" class="yAxis" fill="none"
+      >
+        {this.props.categories.map((cat, idx) => this.renderCategory(cat, idx))}
+        <rect
+          ref={this.grabRef}
+          class="drag-grabber" x="120" y="20" width="906" height="80"
+        ></rect>
+      </g>
+    );
+  }
+}
+
+export default TimelineCategories;