7 ms·
Timesheet.js
- junto 12y agoI was recently looking for JS gannt style project diagrams. This would have been useful at the time.
- jpkeisala 12y agoDid you find anything that hasn't mention on this thread?
- confiscate 12y agoLooks 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.?
- wingerlang 12y agoNeat! 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
- hmottestad 12y ago1: 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 12y agoIs the source available?
- onion2k 12y agoThe example has text overflowing to the right, but there's no scroll mechanism. Seems like a problem..
- juhq 12y ago+1 This is the reason I came back to comment.
- deleted 12y ago[deleted]
- GordyMD 12y agoI 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 12y agoTimesheet.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/47871522dc9477f519b612a51a8f58b41c4f037c https://github.com/sbstjn/timesheet.js/commit/47871522dc9477... and later removed https://github.com/sbstjn/timesheet.js/commit/40a964d32ec04d287bcf6515855d1078e25ff0ef https://github.com/sbstjn/timesheet.js/commit/40a964d32ec04d...
- homarp 12y agoBottom of the page now has "Timesheet.js is licensed under MIT License Cheers to Cheeaun and Ilya"
- tracker1 12y agoIt's funny, but I wrote something similar back around 1999, built for the dhtml v4 browser days... I am so glad to be doing web development today vs the bad old days.. abstracting box drawing between Ie4 and NN4 browsers for stack diagrams and gantt charts was no fun at all... neither was masking while drawing because of NN4.x's bad flicker, or dealing with the various overflows, or bugginess all around... IE's broken 5.0 release (included with Office 2000), fixed in 5.0.1, and various other quirky behavior at the time. (end of rant)
- flixic 12y agoAfter 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 12y agoThis looks great, have you ever thought about open sourcing it?
- flixic 12y agoCSS 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 12y agoPlease, 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 12y agoI 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 12y agoI 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.
- wodenokoto 12y agoIt's really cool, but why are there hover over effect, and curser change when it is not clickable anywhere?
- gildas 12y agoThe code is potentially vulnerable to XSS injections[1]. [1] https://github.com/sbstjn/timesheet.js/blob/master/source/javascripts/timesheet.js#L39-L41 https://github.com/sbstjn/timesheet.js/blob/master/source/ja... 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!"
- Erwin 12y agoWell, it's a client side library. By that reasoning, jQuery can be said to be vulnerable to XSS if you call .html() with untrusted user input. It seems reasonable to me that the label of each bubble can contain HTML code, it's up to the user to ensure any user input is escaped.
- gildas 12y agoThen, I think it should be documented.
- rpedroso 12y agoAgreed. In fact, to build on 'Erwin's example, jquery makes note of the potential for XSS when calling .html(), .append(), .after(), etc.[1] > Do not use these methods to insert strings obtained from untrusted sources such as URL query parameters, cookies, or form inputs. Doing so can introduce cross-site-scripting (XSS) vulnerabilities. Remove or escape any user input before adding content to the document. [1] http://api.jquery.com/html/ http://api.jquery.com/html/
- sukilot 12y agoWhy doesn't jquery have taint-checking/tagging, at least for data brought in through jquery's methods that read from URLs, etc.
- d23 12y ago
- firefoxNX11 12y agoThis indeed is very useful. Won't the name Gantt chart or similar be more suitable?
- sebastianconcpt 12y agoI would say no unless you have all the basic Gantt features
- jjguy 12y agoI'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 12y agohttps://square.github.io/cubism/ https://square.github.io/cubism/
- jjguy 12y agoThanks 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.
- synx508 12y agoQuite 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 12y agoExactly my thought. I would just go with real date objects instead of a string representation at all.
- dangoldin 12y agoPretty 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.
- baby 12y agoYou 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 12y agoIn 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."
- bikeshack 12y agoDoes github.io have auth cookies? XSS is a bit redundant if so
- hirokio 12y agoSince 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.
- nicolaskruchten 12y agoI 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 12y agoI 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. :)
- encoderer 12y agoPlease use standard date formats. This is needlessly confusing: 2002-09/2002
- zxcvgm 12y agoi 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
- antimora 12y agohttp://www.simile-widgets.org/timeline/ http://www.simile-widgets.org/timeline/ (Web Widget by MIT for Visualizing Temporal Data)