Author: smaisonneuve Date: 2015-04-24 09:05:45 +0000 (Fri, 24 Apr 2015) New Revision: 1249 Url: http://forge.nuiton.org/projects/sandbox/repository/revisions/1249 Log: [Wit] - Add user activity monitoring : set an hour bound Modified: wit/css/userActivity.less wit/js/components/Timeline.js Modified: wit/css/userActivity.less =================================================================== --- wit/css/userActivity.less 2015-04-23 16:01:40 UTC (rev 1248) +++ wit/css/userActivity.less 2015-04-24 09:05:45 UTC (rev 1249) @@ -3,7 +3,7 @@ flex-direction: column; justify-content: center; - height: 100%; + height: 350px; width: 100%; h1 { Modified: wit/js/components/Timeline.js =================================================================== --- wit/js/components/Timeline.js 2015-04-23 16:01:40 UTC (rev 1248) +++ wit/js/components/Timeline.js 2015-04-24 09:05:45 UTC (rev 1249) @@ -17,7 +17,7 @@ _refreshSessions: function () { // Retrieve window focus activity - var startDate = moment().subtract(1, "m"), + var startDate = moment().subtract(1, "h"), endDate = moment(); var sessions = user.getSessions(startDate, endDate); @@ -30,22 +30,32 @@ }, render: function() { - var startDate = this.state.startDate; - var endDate = this.state.endDate; + var startDate = this.state.startDate, + endDate = this.state.endDate, + sessions = this.state.sessions; // Build timeline - var items = this.state.sessions.map(function(session) { - var style = { - background: session.color, - width: session.duration ? (session.duration / endDate.diff(startDate) * 100 ) +"%":"initial", - flexGrow: !session.duration ? "1":"0" - }; - var title = session.name; - return ( - <div className="slice" style={style} title={title}>{title}</div> - ); - }); + var style = { + width: (sessions[0].startDate.diff(startDate) / endDate.diff(startDate) * 100 ) +"%", + }; + var items = [( + + <div className="slice" style={style}></div> + + )].concat( + sessions.map(function(session) { + style = { + background: session.color, + width: (session.duration / endDate.diff(startDate) * 100 || 0) +"%", + flexGrow: !session.duration ? "1":"0" + }; + var title = session.name; + return ( + <div className="slice" style={style} title={title}>{title}</div> + ); + }) + ); return ( <div className="timeline">