

Timesheet.js - mparramon
http://sbstjn.github.io/timesheet.js/

======
gildas
The code is potentially vulnerable to XSS injections[1].

[1]
[https://github.com/sbstjn/timesheet.js/blob/master/source/ja...](https://github.com/sbstjn/timesheet.js/blob/master/source/javascripts/timesheet.js#L39-L41)

edit: Thanks for the downvotes, lesson learned! Never talk about
vulnerabilities of a code which is #1 on HN and people will blindly put in
production.

edit 2: So here is my new comment: "Awesome library! The fact that users can
easily enhance its behaviour by using <script> tags in labels is a great
feature!"

~~~
tptacek
You're going to be happier and your comments more persuasive if you just
ignore downvotes. Like, completely. Your comment was inevitably going to be
bolted to the top of the thread regardless of the randos who downvoted you.

I upvoted you because good catch, but winced when I did it because of the
downvote whining. :)

~~~
gildas
Thanks for the advice, I was just a bit disappointed when I saw the downvotes.
I promise I won't whine anymore. ;)

------
synx508
Quite pretty but I can't figure out why anyone would invent their own non-ISO
date format and then have to write a parser for it. Is it _really_ so hard to
start with the year?

~~~
jontro
Exactly my thought. I would just go with real date objects instead of a string
representation at all.

------
flixic
After we were acquired, I designed an extensive timeline of our company
history, people and apps released. It sometimes looks bad on mobile, but in
general works pretty well, loading data from JSON.

[http://lemonlabs.co/timeline.html](http://lemonlabs.co/timeline.html)

~~~
steve_b
This looks great, have you ever thought about open sourcing it?

~~~
flixic
CSS and JS layout is a mess full of hacks, but I thought about cleaning up and
open-sourcing for more general uses. One day (:

~~~
vog
Please, don't go that route. Rather, make this reusable for others right now
(by making it Free Software), and accept help from outside for the cleanup.

To put this in Eric S. Raymond's words:

Release early, release often!

~~~
flixic
I hereby declare all original code on
[http://lemonlabs.co/timeline.html](http://lemonlabs.co/timeline.html) as
licenced under MIT, (c) Jonas Lekevicius.

...it's just that code there is compiled from CoffeeScript, concatenated,
uglified and so on. Others will have very hard time exploring it.

~~~
vog
I doubt this is of any help for anyone, without having access to the actual
source code (and having _that_ licensed as FOSS).

Nevertheless, thanks for trying.

~~~
flixic
You are completely right. But doing more requires more time, and that I only
can promise One Day™.

------
hmottestad
1: I made this: [http://imgur.com/pPMYqAB](http://imgur.com/pPMYqAB)

Angularjs + SVG.

2: And this: [http://imgur.com/JfNBd2o](http://imgur.com/JfNBd2o)

Also Angularjs + SVG.

My first solution is a Gantt style graph where I input tasks I need to do and
estimate how long they take. Then I click start on a task, and track the time
I spend on it. My job needs me to track in high detail what I work on, so I
made this system after getting bored of pen and paper.

The second solution I made was a real Gantt diagram, I used the same knowledge
I had from the pervious solution, angularjs and svg, but this time I
implemented dependencies between the activities. For the first solution I
implemented a very simple scheduler based on the fact that I can't possibly be
working on two things at the same time (unless I work during a meeting), but
for this second solution I didn't make a scheduler so instead I just specify a
start and duration for a task.

~~~
iso8859-1
Is the source available?

------
GordyMD
I found a similar solution few weeks back which is beautiful and scrolls
horizontally.

Believe it is vanilla JS.

[http://cheeaun.github.io/life/](http://cheeaun.github.io/life/)

~~~
cheeaun
Timesheet.js is indirectly inspired by my work. I tweeted it last year
[https://twitter.com/cheeaun/status/502308306732343298](https://twitter.com/cheeaun/status/502308306732343298)

Attribution was added
[https://github.com/sbstjn/timesheet.js/commit/47871522dc9477...](https://github.com/sbstjn/timesheet.js/commit/47871522dc9477f519b612a51a8f58b41c4f037c)
and later removed
[https://github.com/sbstjn/timesheet.js/commit/40a964d32ec04d...](https://github.com/sbstjn/timesheet.js/commit/40a964d32ec04d287bcf6515855d1078e25ff0ef)

~~~
homarp
Bottom of the page now has "Timesheet.js is licensed under MIT License Cheers
to Cheeaun and Ilya"

------
hirokio
Since you seem to care about good Javascript practices given you're linting
your code, I'm going to point out that all your modules are exposed in the
global scope, which isn't the best practice. I'll suggest using something like
browserify (as opposed to require.js due to the smaller overhead) to "require"
smaller modules within closures to expose one final Timesheet constructor.

------
baby
You should put the .css and .js on the frontpage (some people don't know how
to use github). Also some basics explanation on how to use it would be nice as
well. I'm using right now and I just see the background no event get
displayed.

Also Haml is cool but it makes your project hard to understand if you do not
use haml (like me).

edit:fixed halm->haml, thx :)

~~~
vosper
In case anyone else is confused, like I was (and I imagine spellcheck is to
blame): I'm pretty sure the parent means "Haml", not "Halm".

According to haml.info:

"Haml is a markup language that’s used to cleanly and simply describe the HTML
of any web document without the use of inline code. Haml functions as a
replacement for inline page templating systems such as PHP, ASP, and ERB, the
templating language used in most Ruby on Rails applications. However, Haml
avoids the need for explicitly coding HTML into the template, because it
itself is a description of the HTML, with some code to generate dynamic
content."

------
dangoldin
Pretty cool - there's a similar library at
[http://timeline.knightlab.com/](http://timeline.knightlab.com/) that
approaches the problem in a slightly different way. Rather than having an axis
per event they try to present multiple events on the same axis.

------
wodenokoto
It's really cool, but why are there hover over effect, and curser change when
it is not clickable anywhere?

------
nicolaskruchten
I once made a declarative, pure XML XSL-T system like this, no Javascript at
all:
[http://nicolas.kruchten.com/content/2010/09/context/](http://nicolas.kruchten.com/content/2010/09/context/)

~~~
jpkeisala
I think XSLT is great for templating, I don't see it often in HN. Sadly so
many bashing it. But perhaps some day someone makes it cool again. :)

------
jjguy
I've been doing a lazy search (i.e., passively watching) for a library like
this with per-second resolution vs the per-month resolution in both
timesheet.js and Chee Aun's Life.

Anyone have a recommendation?

~~~
csu
[https://square.github.io/cubism/](https://square.github.io/cubism/)

~~~
jjguy
Thanks for the reply. I put cubism in the bucket of time series data, where
the x-axis is time and the y-axis a single continuous scalar with definable
magnitude. What makes these timeline views unique is multiple y-axis values,
each with no magnitude, just metadata. (Or perhaps the metadata is more
important than the magnitude)

Cubism is hawt for time series data, but there are lots of good options. It's
a popular ask.

------
confiscate
Looks pretty cool man. Thanks for sharing!

Just curious. What are some examples of the most interesting uses you've seen
from users? Are they mostly using it for tracking work hours during the week
etc.?

------
firefoxNX11
This indeed is very useful. Won't the name Gantt chart or similar be more
suitable?

~~~
sebastianconcpt
I would say no unless you have all the basic Gantt features

------
encoderer
Please use standard date formats. This is needlessly confusing: 2002-09/2002

------
wingerlang
Neat! I did something pretty much "identical" some time ago but I lost
interest. It had different zoom levels.

Prints [http://imgur.com/a/eOI39](http://imgur.com/a/eOI39)

------
antimora
[http://www.simile-widgets.org/timeline/](http://www.simile-
widgets.org/timeline/) (Web Widget by MIT for Visualizing Temporal Data)

------
onion2k
The example has text overflowing to the right, but there's no scroll
mechanism. Seems like a problem..

~~~
juhq
+1

This is the reason I came back to comment.

------
junto
I was recently looking for JS gannt style project diagrams. This would have
been useful at the time.

~~~
jpkeisala
Did you find anything that hasn't mention on this thread?

------
zxcvgm
i quite like the interactive timeline component [1] at vis.js. it's zoomable,
scrollable, highly customizable and even editable.

[1]
[http://visjs.org/timeline_examples.html](http://visjs.org/timeline_examples.html)

