react-calendar-timeline - npm Package Compare versions

Comparing version 0.7.9 to 0.8.0

modules/lib/layout/Header.js

@@ -118,4 +118,6 @@ 'use strict';
         return time.format(width < 50 ? 'HH' : 'HH:00');
+      } else if (unit === 'minute') {
+        return time.format(width < 60 ? 'mm' : 'HH:mm');
       } else {
-        return time.get(unit === 'day' ? 'date' : unit);
+        return time.get(unit);
       }
@@ -184,2 +186,3 @@ }
       var minUnit = _props.minUnit;
+      var timeSteps = _props.timeSteps;
       var fixedHeader = _props.fixedHeader;
@@ -198,3 +201,3 @@ var headerLabelGroupHeight = _props.headerLabelGroupHeight;
 
-          (0, _utils.iterateTimes)(visibleTimeStart, visibleTimeEnd, nextUnit, function (time, nextTime) {
+          (0, _utils.iterateTimes)(visibleTimeStart, visibleTimeEnd, nextUnit, timeSteps, function (time, nextTime) {
             var startTime = Math.max(visibleTimeStart, time.valueOf());
@@ -227,3 +230,3 @@ var endTime = Math.min(visibleTimeEnd, nextTime.valueOf());
 
-      (0, _utils.iterateTimes)(canvasTimeStart, canvasTimeEnd, minUnit, function (time, nextTime) {
+      (0, _utils.iterateTimes)(canvasTimeStart, canvasTimeEnd, minUnit, timeSteps, function (time, nextTime) {
         var left = Math.round((time.valueOf() - canvasTimeStart) * ratio, -2);
@@ -306,2 +309,3 @@ var minUnitValue = time.get(minUnit === 'day' ? 'date' : minUnit);
   minUnit: _react2.default.PropTypes.string.isRequired,
+  timeSteps: _react2.default.PropTypes.object.isRequired,
   width: _react2.default.PropTypes.number.isRequired,
@@ -308,0 +312,0 @@ fixedHeader: _react2.default.PropTypes.oneOf(['fixed', 'absolute', 'none']),

modules/lib/lines/VerticalLines.js

@@ -35,3 +35,3 @@ 'use strict';
     value: function shouldComponentUpdate(nextProps, nextState) {
-      return !(nextProps.canvasTimeStart === this.props.canvasTimeStart && nextProps.canvasTimeEnd === this.props.canvasTimeEnd && nextProps.canvasWidth === this.props.canvasWidth && nextProps.lineHeight === this.props.lineHeight && nextProps.lineCount === this.props.lineCount && nextProps.minUnit === this.props.minUnit && nextProps.fixedHeader === this.props.fixedHeader && nextProps.height === this.props.height && nextProps.headerHeight === this.props.headerHeight);
+      return !(nextProps.canvasTimeStart === this.props.canvasTimeStart && nextProps.canvasTimeEnd === this.props.canvasTimeEnd && nextProps.canvasWidth === this.props.canvasWidth && nextProps.lineHeight === this.props.lineHeight && nextProps.lineCount === this.props.lineCount && nextProps.minUnit === this.props.minUnit && nextProps.timeSteps === this.props.timeSteps && nextProps.fixedHeader === this.props.fixedHeader && nextProps.height === this.props.height && nextProps.headerHeight === this.props.headerHeight);
     }
@@ -48,2 +48,3 @@ }, {
       var minUnit = _props.minUnit;
+      var timeSteps = _props.timeSteps;
       var height = _props.height;
@@ -56,3 +57,3 @@ var headerHeight = _props.headerHeight;
 
-      (0, _utils.iterateTimes)(canvasTimeStart, canvasTimeEnd, minUnit, function (time, nextTime) {
+      (0, _utils.iterateTimes)(canvasTimeStart, canvasTimeEnd, minUnit, timeSteps, function (time, nextTime) {
         var left = Math.round((time.valueOf() - canvasTimeStart) * ratio, -2);
@@ -98,2 +99,3 @@ var minUnitValue = time.get(minUnit === 'day' ? 'date' : minUnit);
   minUnit: _react2.default.PropTypes.string.isRequired,
+  timeSteps: _react2.default.PropTypes.object.isRequired,
   fixedHeader: _react2.default.PropTypes.string.isRequired
@@ -100,0 +102,0 @@ };

modules/lib/Timeline.js

@@ -71,2 +71,11 @@ 'use strict';
 
+var defaultTimeSteps = {
+  second: 1,
+  minute: 1,
+  hour: 1,
+  day: 1,
+  month: 1,
+  year: 1
+};
+
 var ReactCalendarTimeline = function (_Component) {
@@ -616,3 +625,3 @@ _inherits(ReactCalendarTimeline, _Component);
     key: 'verticalLines',
-    value: function verticalLines(canvasTimeStart, zoom, canvasTimeEnd, canvasWidth, minUnit, height, headerHeight) {
+    value: function verticalLines(canvasTimeStart, zoom, canvasTimeEnd, canvasWidth, minUnit, timeSteps, height, headerHeight) {
       return _react2.default.createElement(_VerticalLines2.default, { canvasTimeStart: canvasTimeStart,
@@ -624,2 +633,3 @@ canvasTimeEnd: canvasTimeEnd,
         minUnit: minUnit,
+        timeSteps: timeSteps,
         fixedHeader: this.props.fixedHeader,
@@ -687,3 +697,3 @@ height: height,
     key: 'header',
-    value: function header(canvasTimeStart, zoom, canvasTimeEnd, canvasWidth, minUnit, headerLabelGroupHeight, headerLabelHeight) {
+    value: function header(canvasTimeStart, zoom, canvasTimeEnd, canvasWidth, minUnit, timeSteps, headerLabelGroupHeight, headerLabelHeight) {
       return _react2.default.createElement(_Header2.default, { canvasTimeStart: canvasTimeStart,
@@ -694,2 +704,3 @@ canvasTimeEnd: canvasTimeEnd,
         minUnit: minUnit,
+        timeSteps: timeSteps,
         headerLabelGroupHeight: headerLabelGroupHeight,
@@ -836,2 +847,3 @@ headerLabelHeight: headerLabelHeight,
       var sidebarWidth = _props5.sidebarWidth;
+      var timeSteps = _props5.timeSteps;
       var _state5 = this.state;
@@ -854,3 +866,3 @@ var draggingItem = _state5.draggingItem;
       var canvasWidth = width * 3;
-      var minUnit = (0, _utils.getMinUnit)(zoom, width);
+      var minUnit = (0, _utils.getMinUnit)(zoom, width, timeSteps);
       var headerHeight = headerLabelGroupHeight + headerLabelHeight;
@@ -908,7 +920,7 @@
               this.items(canvasTimeStart, zoom, canvasTimeEnd, canvasWidth, minUnit, dimensionItems, groupHeights, groupTops),
-              this.verticalLines(canvasTimeStart, zoom, canvasTimeEnd, canvasWidth, minUnit, height, headerHeight),
+              this.verticalLines(canvasTimeStart, zoom, canvasTimeEnd, canvasWidth, minUnit, timeSteps, height, headerHeight),
               this.horizontalLines(canvasTimeStart, zoom, canvasTimeEnd, canvasWidth, groupHeights, headerHeight),
               this.todayLine(canvasTimeStart, zoom, canvasTimeEnd, canvasWidth, minUnit, height, headerHeight),
               this.infoLabel(),
-              this.header(canvasTimeStart, zoom, canvasTimeEnd, canvasWidth, minUnit, headerLabelGroupHeight, headerLabelHeight)
+              this.header(canvasTimeStart, zoom, canvasTimeEnd, canvasWidth, minUnit, timeSteps, headerLabelGroupHeight, headerLabelHeight)
             )
@@ -969,2 +981,4 @@ )
 
+  timeSteps: _react2.default.PropTypes.object,
+
   defaultTimeStart: _react2.default.PropTypes.object,
@@ -1022,2 +1036,3 @@ defaultTimeEnd: _react2.default.PropTypes.object,
   keys: defaultKeys,
+  timeSteps: defaultTimeSteps,
 
@@ -1024,0 +1039,0 @@ // if you pass in visibleTimeStart and visibleTimeEnd, you must also pass onTimeChange(visibleTimeStart, visibleTimeEnd),

modules/lib/utils.js

@@ -48,7 +48,12 @@ 'use strict';
 
-function iterateTimes(start, end, unit, callback) {
+function iterateTimes(start, end, unit, timeSteps, callback) {
   var time = (0, _moment2.default)(start).startOf(unit);
 
+  if (timeSteps[unit] && timeSteps[unit] > 1) {
+    var value = time.get(unit);
+    time.set(unit, value - value % timeSteps[unit]);
+  }
+
   while (time.valueOf() < end) {
-    var nextTime = (0, _moment2.default)(time).add(1, unit + 's');
+    var nextTime = (0, _moment2.default)(time).add(timeSteps[unit] || 1, unit + 's');
     callback(time, nextTime);
@@ -59,3 +64,3 @@ time = nextTime;
 
-function getMinUnit(zoom, width) {
+function getMinUnit(zoom, width, timeSteps) {
   var timeDividers = {
@@ -76,3 +81,6 @@ second: 1000,
     breakCount = breakCount / timeDividers[unit];
-    if (breakCount < width / minCellWidth) {
+    var cellCount = breakCount / timeSteps[unit];
+    var countNeeded = width / (timeSteps[unit] && timeSteps[unit] > 1 ? 3 * minCellWidth : minCellWidth);
+
+    if (cellCount < countNeeded) {
       minUnit = unit;
@@ -79,0 +87,0 @@ return true;

package.json

 {
   "name": "react-calendar-timeline",
-  "version": "0.7.9",
+  "version": "0.8.0",
   "description": "react calendar timeline",
@@ -5,0 +5,0 @@ "main": "modules/index.js",

README.md

@@ -157,2 +157,17 @@ # React Calendar Timeline
 
+### timeSteps
+With what step to display different units. E.g. `15` for `minute` means only minutes 0, 15, 30 and 45 will be shown.
+
+Default:
+```js
+{
+  second: 1,
+  minute: 1,
+  hour: 1,
+  day: 1,
+  month: 1,
+  year: 1
+}
+```
+
 ### onItemMove(itemId, dragTime, newGroupOrder)
@@ -159,0 +174,0 @@ Callback when an item is moved. Returns 1) the item's ID, 2) the new start time and 3) the index of the new group in the `groups` array.

src/lib/layout/Header.jsx

@@ -81,4 +81,6 @@ import React, { Component } from 'react'
       return time.format(width < 50 ? 'HH' : 'HH:00')
+    } else if (unit === 'minute') {
+      return time.format(width < 60 ? 'mm' : 'HH:mm')
     } else {
-      return time.get(unit === 'day' ? 'date' : unit)
+      return time.get(unit)
     }
@@ -131,3 +133,3 @@ }
       canvasTimeStart, canvasTimeEnd, canvasWidth, lineHeight,
-      visibleTimeStart, visibleTimeEnd, minUnit, fixedHeader,
+      visibleTimeStart, visibleTimeEnd, minUnit, timeSteps, fixedHeader,
       headerLabelGroupHeight, headerLabelHeight
@@ -145,3 +147,3 @@ } = this.props
 
-      iterateTimes(visibleTimeStart, visibleTimeEnd, nextUnit, (time, nextTime) => {
+      iterateTimes(visibleTimeStart, visibleTimeEnd, nextUnit, timeSteps, (time, nextTime) => {
         const startTime = Math.max(visibleTimeStart, time.valueOf())
@@ -173,3 +175,3 @@ const endTime = Math.min(visibleTimeEnd, nextTime.valueOf())
 
-    iterateTimes(canvasTimeStart, canvasTimeEnd, minUnit, (time, nextTime) => {
+    iterateTimes(canvasTimeStart, canvasTimeEnd, minUnit, timeSteps, (time, nextTime) => {
       const left = Math.round((time.valueOf() - canvasTimeStart) * ratio, -2)
@@ -245,2 +247,3 @@ const minUnitValue = time.get(minUnit === 'day' ? 'date' : minUnit)
   minUnit: React.PropTypes.string.isRequired,
+  timeSteps: React.PropTypes.object.isRequired,
   width: React.PropTypes.number.isRequired,
@@ -247,0 +250,0 @@ fixedHeader: React.PropTypes.oneOf(['fixed', 'absolute', 'none']),

src/lib/lines/VerticalLines.jsx

@@ -13,2 +13,3 @@ import React, { Component } from 'react'
              nextProps.minUnit === this.props.minUnit &&
+             nextProps.timeSteps === this.props.timeSteps &&
              nextProps.fixedHeader === this.props.fixedHeader &&
@@ -21,3 +22,3 @@ nextProps.height === this.props.height &&
   render () {
-    const { canvasTimeStart, canvasTimeEnd, canvasWidth, minUnit, height, headerHeight } = this.props
+    const { canvasTimeStart, canvasTimeEnd, canvasWidth, minUnit, timeSteps, height, headerHeight } = this.props
     const ratio = canvasWidth / (canvasTimeEnd - canvasTimeStart)
@@ -27,3 +28,3 @@
 
-    iterateTimes(canvasTimeStart, canvasTimeEnd, minUnit, (time, nextTime) => {
+    iterateTimes(canvasTimeStart, canvasTimeEnd, minUnit, timeSteps, (time, nextTime) => {
       const left = Math.round((time.valueOf() - canvasTimeStart) * ratio, -2)
@@ -66,2 +67,3 @@ const minUnitValue = time.get(minUnit === 'day' ? 'date' : minUnit)
   minUnit: React.PropTypes.string.isRequired,
+  timeSteps: React.PropTypes.object.isRequired,
   fixedHeader: React.PropTypes.string.isRequired
@@ -68,0 +70,0 @@ }

src/lib/Timeline.jsx

@@ -25,2 +25,11 @@ import React, { Component } from 'react'
 
+const defaultTimeSteps = {
+  second: 1,
+  minute: 1,
+  hour: 1,
+  day: 1,
+  month: 1,
+  year: 1
+}
+
 export default class ReactCalendarTimeline extends Component {
@@ -490,3 +499,3 @@ constructor (props) {
 
-  verticalLines (canvasTimeStart, zoom, canvasTimeEnd, canvasWidth, minUnit, height, headerHeight) {
+  verticalLines (canvasTimeStart, zoom, canvasTimeEnd, canvasWidth, minUnit, timeSteps, height, headerHeight) {
     return (
@@ -499,2 +508,3 @@ <VerticalLines canvasTimeStart={canvasTimeStart}
                      minUnit={minUnit}
+                     timeSteps={timeSteps}
                      fixedHeader={this.props.fixedHeader}
@@ -563,3 +573,3 @@ height={height}
 
-  header (canvasTimeStart, zoom, canvasTimeEnd, canvasWidth, minUnit, headerLabelGroupHeight, headerLabelHeight) {
+  header (canvasTimeStart, zoom, canvasTimeEnd, canvasWidth, minUnit, timeSteps, headerLabelGroupHeight, headerLabelHeight) {
     return (
@@ -571,2 +581,3 @@ <Header canvasTimeStart={canvasTimeStart}
               minUnit={minUnit}
+              timeSteps={timeSteps}
               headerLabelGroupHeight={headerLabelGroupHeight}
@@ -676,3 +687,3 @@ headerLabelHeight={headerLabelHeight}
   render () {
-    const { items, groups, headerLabelGroupHeight, headerLabelHeight, sidebarWidth } = this.props
+    const { items, groups, headerLabelGroupHeight, headerLabelHeight, sidebarWidth, timeSteps } = this.props
     const { draggingItem, resizingItem, isDragging, width, visibleTimeStart, visibleTimeEnd, canvasTimeStart } = this.state
@@ -683,3 +694,3 @@ let { dimensionItems, height, groupHeights, groupTops } = this.state
     const canvasWidth = width * 3
-    const minUnit = getMinUnit(zoom, width)
+    const minUnit = getMinUnit(zoom, width, timeSteps)
     const headerHeight = headerLabelGroupHeight + headerLabelHeight
@@ -730,3 +741,3 @@
               {this.items(canvasTimeStart, zoom, canvasTimeEnd, canvasWidth, minUnit, dimensionItems, groupHeights, groupTops)}
-              {this.verticalLines(canvasTimeStart, zoom, canvasTimeEnd, canvasWidth, minUnit, height, headerHeight)}
+              {this.verticalLines(canvasTimeStart, zoom, canvasTimeEnd, canvasWidth, minUnit, timeSteps, height, headerHeight)}
               {this.horizontalLines(canvasTimeStart, zoom, canvasTimeEnd, canvasWidth, groupHeights, headerHeight)}
@@ -741,2 +752,3 @@ {this.todayLine(canvasTimeStart, zoom, canvasTimeEnd, canvasWidth, minUnit, height, headerHeight)}
                 minUnit,
+                timeSteps,
                 headerLabelGroupHeight,
@@ -796,2 +808,4 @@ headerLabelHeight
 
+  timeSteps: React.PropTypes.object,
+
   defaultTimeStart: React.PropTypes.object,
@@ -849,2 +863,3 @@ defaultTimeEnd: React.PropTypes.object,
   keys: defaultKeys,
+  timeSteps: defaultTimeSteps,
 
@@ -851,0 +866,0 @@ // if you pass in visibleTimeStart and visibleTimeEnd, you must also pass onTimeChange(visibleTimeStart, visibleTimeEnd),

src/lib/utils.js

@@ -20,7 +20,12 @@ import moment from 'moment'
 
-export function iterateTimes (start, end, unit, callback) {
+export function iterateTimes (start, end, unit, timeSteps, callback) {
   let time = moment(start).startOf(unit)
 
+  if (timeSteps[unit] && timeSteps[unit] > 1) {
+    let value = time.get(unit)
+    time.set(unit, value - (value % timeSteps[unit]))
+  }
+
   while (time.valueOf() < end) {
-    let nextTime = moment(time).add(1, `${unit}s`)
+    let nextTime = moment(time).add(timeSteps[unit] || 1, `${unit}s`)
     callback(time, nextTime)
@@ -31,3 +36,3 @@ time = nextTime
 
-export function getMinUnit (zoom, width) {
+export function getMinUnit (zoom, width, timeSteps) {
   let timeDividers = {
@@ -48,3 +53,6 @@ second: 1000,
     breakCount = breakCount / timeDividers[unit]
-    if (breakCount < width / minCellWidth) {
+    const cellCount = breakCount / timeSteps[unit]
+    const countNeeded = width / (timeSteps[unit] && timeSteps[unit] > 1 ? 3 * minCellWidth : minCellWidth)
+
+    if (cellCount < countNeeded) {
       minUnit = unit
@@ -51,0 +59,0 @@ return true

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

3437260

increased by0.06%

Lines of code

7613

increased by0.65%

Number of lines in readme file

274

increased by5.79%

No dependency changes