From e2becd360f0ac342e783d115d10656e3fb43a4b1 Mon Sep 17 00:00:00 2001 From: Brian Weiner Date: Mon, 11 Jun 2018 11:24:28 -0400 Subject: [PATCH 1/2] scalingFactor, renderPopUpDetails, and resize behavior changed --- src/GanttPopup.js | 20 ++++++++++++++------ src/GanttRow.js | 13 ++++++++----- src/GanttTimeline.js | 15 +++++++++++---- src/index.js | 12 +++++++----- 4 files changed, 40 insertions(+), 20 deletions(-) diff --git a/src/GanttPopup.js b/src/GanttPopup.js index c208a7a..67805be 100644 --- a/src/GanttPopup.js +++ b/src/GanttPopup.js @@ -8,7 +8,8 @@ export default class GanttPopup extends Component { markerTime: PropTypes.object.isRequired, activeStep: PropTypes.object.isRequired, title: PropTypes.string.isRequired, - titleStyle: PropTypes.string + titleStyle: PropTypes.string, + renderPopupDetails: PropTypes.func }; static contextTypes = { dateFormat: PropTypes.string.isRequired @@ -19,19 +20,26 @@ export default class GanttPopup extends Component { marginBottom: '10px', fontWeight: 'bold', borderBottom: '1px solid #cfcfcf' + }, + renderPopupDetails: (stepName, markerTime) => { + return ( + + { markerTime } +
+ { stepName } + + ); } }; render() { - const { title, style, markerTime, activeStep, titleStyle } = this.props; + const { title, style, markerTime, activeStep, titleStyle, renderPopupDetails } = this.props; const { dateFormat } = this.context; return (
{title} - {moment(markerTime).format(dateFormat)} -
- {activeStep.name} + {renderPopupDetails(activeStep.name, moment(markerTime).format(dateFormat)) }
); } -} +} \ No newline at end of file diff --git a/src/GanttRow.js b/src/GanttRow.js index d7a8256..4b16b21 100644 --- a/src/GanttRow.js +++ b/src/GanttRow.js @@ -14,7 +14,8 @@ export default class GanttRow extends Component { markerStyle: PropTypes.object, steps: PropTypes.array.isRequired, templateName: PropTypes.string, - title: PropTypes.string + title: PropTypes.string, + renderPopupDetails: PropTypes.func }; static contextTypes = { templates: PropTypes.object.isRequired, @@ -22,7 +23,8 @@ export default class GanttRow extends Component { leftBound: PropTypes.object.isRequired, rightBound: PropTypes.object.isRequired, timelineWidth: PropTypes.number.isRequired, - debug: PropTypes.bool.isRequired + debug: PropTypes.bool.isRequired, + renderPopupDetails: PropTypes.func }; static defaultProps = { barStyle: { @@ -42,7 +44,8 @@ export default class GanttRow extends Component { opacity: 0.5 }, templateName: 'default', - title: '' + title: '', + renderPopupDetails: () => {} }; state = { @@ -158,9 +161,8 @@ export default class GanttRow extends Component { } renderPopup() { - const { popupStyle, title } = this.props; + const { popupStyle, title, renderPopupDetails } = this.props; const { activeStep, markerTime, active } = this.state; - if (_.isEmpty(activeStep)) return
; return (
); diff --git a/src/GanttTimeline.js b/src/GanttTimeline.js index a96cf34..b2e033a 100644 --- a/src/GanttTimeline.js +++ b/src/GanttTimeline.js @@ -5,8 +5,14 @@ import PropTypes from 'prop-types'; export default class GanttTimeline extends Component { static propTypes = { - style: PropTypes.object.isRequired + style: PropTypes.object.isRequired, + scalingFactor: PropTypes.number }; + + static defaultProps = { + scalingFactor: 1.0 + } + static contextTypes = { dateFormat: PropTypes.string.isRequired, timeFormat: PropTypes.string, @@ -23,13 +29,13 @@ export default class GanttTimeline extends Component { }; getTick(unit, timelineDuration) { - const { style } = this.props; + const { style, scalingFactor } = this.props; const { leftBound, rightBound, timelineWidth } = this.context; if (!unit) { timelineDuration = moment(rightBound).diff(moment(leftBound), 'seconds'); unit = this.getTimespanUnit(timelineDuration); } - const tickCount = Math.ceil(timelineDuration / this.units[unit]); + const tickCount = Math.ceil(timelineDuration / this.units[unit]) * scalingFactor; const maxTicks = Math.ceil(timelineWidth / parseInt(style.minWidth, 10)); if (tickCount > maxTicks) { const unitKeys = _.keys(this.units); @@ -87,9 +93,10 @@ export default class GanttTimeline extends Component { durationToWidth(duration) { const { leftBound, rightBound, timelineWidth } = this.context; + const { scalingFactor } = this.props; const timelineDuration = moment(rightBound).diff(leftBound, 'seconds'); const percentage = duration > 0 ? duration / timelineDuration : 0; - return timelineWidth * percentage; + return timelineWidth * percentage / scalingFactor; } widthToDuration(width) { diff --git a/src/index.js b/src/index.js index 1df2972..faabd30 100644 --- a/src/index.js +++ b/src/index.js @@ -22,7 +22,8 @@ export default class ReactGantt extends Component { timeFormat: PropTypes.string, timelineStyle: PropTypes.object, weekFormat: PropTypes.string, - yearFormat: PropTypes.string + yearFormat: PropTypes.string, + scalingFactor: PropTypes.number }; static childContextTypes = { dateFormat: PropTypes.string.isRequired, @@ -55,7 +56,8 @@ export default class ReactGantt extends Component { timeFormat: 'YY-MM-DD HH:MM', timelineStyle: { minWidth: '60px' }, weekFormat: 'YY-MM-DD', - yearFormat: 'YY-MM-DD' + yearFormat: 'YY-MM-DD', + scalingFactor: 1.0 }; state = { @@ -96,8 +98,7 @@ export default class ReactGantt extends Component { } handleResize() { - this.setState({ timelineWidth: 0 }); - this.setState({ timelineWidth: this.refs.timeline.offsetWidth }); + this.setState({ timelineWidth: this.timeline.offsetWidth }); } render() { @@ -114,7 +115,7 @@ export default class ReactGantt extends Component { }} /> { this.timeline = c }} style={{ ...thStyle, width: '100%' @@ -122,6 +123,7 @@ export default class ReactGantt extends Component { > From 3aa24557dfdceee0e24c6755939ddbb55eb499bf Mon Sep 17 00:00:00 2001 From: Brian Weiner Date: Mon, 11 Jun 2018 12:27:22 -0400 Subject: [PATCH 2/2] rough documentation of props for all components, needs defaults or examples --- README.md | 58 ++++++++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 57 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index b3581b7..48f5fbb 100644 --- a/README.md +++ b/README.md @@ -85,7 +85,63 @@ class Demo extends Component { } ``` - +## Props + +#### ReactGantt + +| Prop Name | Type | Behavior | +|---------------|-----------|--------------------| +| children | GanttRow | Gantt Rows initialized by you| +| dateFormat | String | String format to display dates | +| dayFormat | String | Format used when timeline is in 'day' window | +| debug | Boolean | Includes extra detailed outputs to show calculated values | +| hourFormat | String | Format used when timeline is in 'hourly' window | +| leftBound | Object | Date representation of the chart 'beginning' (left-most) date | +| minuteFormat | String | Format used when timeline is in 'minute' window | +| monthFormat | String | Format used when timeline is in 'monthly' window | +| rightBound | Object | Date representation of chart's ending (right-most) date | +| secondFormat | String | Format used when timeline is in 'seconds' window | +| style | Object | CSS object for chart customization | +| templates | Object | Object with keys representing potential states and values for state title and style | +| timeFormat | String | Is this used? | +| timelineStyle | Object | Object for styles to be used in timeline component, namely the allowed width between ticks | +| weekFormat | String | Format used when timeline is in 'weekly' window | +| yearFormat | String | Format used when timeline is in 'yearly' window | + +#### GanttTimeline + +| Prop Name | Type | Behavior | +|---------------|-----------|--------------------| +| style | Object | Customize the calculated appearance of the timeline. In pixels: tickWidth, paddingLeft, minWidth | +| rows | Array | The parent's GanttRows (is this deprecated?) | +| scalingFactor | Number | Allows customization of the calculated # of ticks | + +#### GanttRow + +| Prop Name | Type | Behavior | +|---------------|-----------|--------------------| +| barStyle | Object | Style object for gantt bar | +| popupStyle | Object | Style object for popup modal | +| markerStyle | Object | Style object for cursor | +| steps | Array | Array of steps that bar passes through (needs to exceed the templates steps by 1? Why?) | +| templateName | String | Template name to load style and step titles | +| title | String | Title to be displayed alongside bar | + +#### GanttBar +| Prop Name | Type | Behavior | +|---------------|-----------|--------------------| +| style | Object | CSS object for bar styles | +| steps | Array | Array of steps that bar passes through (needs to exceed the templates steps by 1? Why?) | +| templateName | String | Template name to load style and step titles | + +#### GanttPopup +| Prop Name | Type | Behavior | +|---------------|-----------|--------------------| +| style | Object | CSS Object for popup style | +| markerTime | Object | Time object represnting cursor position on parent GanttBar | +| activeStep | Object | Object representing current step cursor is hovering on parent GanttBar | +| title | String | Title (same as parent Gantt bar) | +| titleStyle | Object | Style for title displayed on pop up | ## Support Submit an [issue](https://github.com/codejamninja/react-gantt/issues/new)