Reactify scale of time

src/components/TimelineCategories.jsx

@@ -13,9 +13,9 @@ class TimelineCategories extends React.Component {
   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);
+      .on('start', this.props.onDragStart)
+      .on('drag', this.props.onDrag)
+      .on('end', this.props.onDragEnd);
 
       d3.select(this.grabRef.current)
         .call(drag);
@@ -25,27 +25,33 @@ class TimelineCategories extends React.Component {
   }
 
   getY(idx) {
-    return (idx + 1) * 80 / this.props.categories.length
+    return (idx + 1) * this.props.dims.trackHeight / 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>
+        <line stroke="currentColor" x1={this.props.dims.margin_left} x2={1026}></line>
+        <text fill="currentColor" x={this.props.dims.margin_left} dy="0.32em">{category.category}</text>
       </g>
     )
   }
 
   render () {
+    const dims = this.props.dims;
+
     return (
       <g
-        transform="translate(0, 0)" class="yAxis" fill="none"
+        class="yAxis"
       >
         {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"
+          class="drag-grabber"
+          x={dims.margin_left}
+          y="20"
+          width={dims.width - dims.margin_left}
+          height={dims.trackHeight}
         ></rect>
       </g>
     );