Browse Source
Implementation of a week scale feature (#3009)
* Add Gitter badge (#2179) * do not generate source-maps in distribution version * add 'dist' folder for deployment * added Badges * added codeclimate badge * added @Tooa to the support team * added badges from isitmaintained.com (#2517) * do not ignore dist and test folders in master * generated dist files for v4.18.0 * generated dist files for v4.18.1 * Cheap fix for bug #2795 * Update to PR #2826 to use newline format * changed to v4.18.1-SNAPSHOT * chore(docs): general improvements (#2652) * removed NOTICE file * updated license date range to include 2017 * chore(docs): updated support team members * chore: updated dependencies and devDependencies (#2649) * Fixes instanceof Object statements for objects from other windows and iFrames. (#2631) * Replaces instanceof Object checks with typeof to prevent cross tab issues. * Adds missing space. * chore: removed google-analytics from all examples (#2670) * chore(docs): Add note that PRs should be submitted against the `develop` branch (#2623) Related to: https://github.com/almende/vis/pull/2618 Related to: https://github.com/almende/vis/pull/2620 * feat(timeline): Change setCustomTimeTitle title parameter to be a string or a function (#2611) * change setCustomTimeTitle title parameter, Now could be an string or a function * Fixed indent and spacing * feat(timeline): refactor tooltip to only use one dom-element (#2662) * feat(network): Allow for image nodes to have a selected or broken image (#2601) * feat(tests): run mocha tests in travis ci (#2687) * Added showX(YZ)Axis options to Graph3d (#2686) * Added showX(YZ)Axis to Graph3d * Added show_Axis options to docs and playground example * Resolved merge conflict * Added show_Axis options to docs and playground example * fix(build): use babel version compatible with webpack@1.14 (#2693) fixes #2685 * feat(docs): use babel preset2015 for custom builds (#2678) * add link to a mentioned example (#2709) * chore(lint): added support for eslint (#2695) * Trivial typo fix in how_to_help doc. (#2714) * fix(timeline): #2598 Flickering onUpdateTimeTooltip (#2702) * Fix redraw order * Fix error when option is not defined * Allow template labels * Add .travis.yml file * Add experiment travis code * Fix react example * Add animation to onUpdateTooltip * fix(timeline): #778 Tooltip does not work with background items in timeline (#2703) * Fix redraw order * Fix error when option is not defined * Allow template labels * Add .travis.yml file * Add experiment travis code * Fix react example * Make items z-index default to 1 * Add initial tests for Timeline PointItem (#2716) * fix(timeline): #2679 TypeError: Cannot read property 'hasOwnProperty' of null (#2735) * Fix redraw order * Fix error when option is not defined * Allow template labels * Add .travis.yml file * Add experiment travis code * Fix react example * Fix bug in item editable * feat(timeline): #2647 Dynamic rolling mode option (#2705) * Fix redraw order * Fix error when option is not defined * Allow template labels * Add .travis.yml file * Add experiment travis code * Fix react example * Add toggleRollingMode option * Update docs with toggleRollingMode option * fixes timestep next issue (#2732) * feat(timeline): added new locales for french and espanol (#2723) * Fix eslint problem on Travis. (#2744) * fix: Range.js "event" is undeclared (#2749) * fix(timeline): #2720 Problems with option editable (#2743) Clean up and centralise edit status for Timeline Items. * feat(network): Improve the performance of the network layout engine (#2729) * Improve the performance of the network layout engine Short-cut the execution of a number of methods in LayoutEngine to make them handle highly-connected graphs better. * Demonstrations of layouts of large networks * Added support to supply an end to bar charts to have them scale (#2760) * Added support to supply an X2 to bar charts to have them scale * Fixed graph2d stacking issue. It no longer takes into account hidden items * Changed x2 to end per recommendation and added this to the docs * Initial tests for timeline ItemSet. (#2750) Somewhat more complicated setup, associated with the need for a real window. * [Timeline] Modify redraw logic to treat scroll as needing restack. (#2774) This addresses #1982 and #1417. It possibly reduces performance, but correctness seems better. * fix(timeline): #2672 Item events original event (#2704) * Fix redraw order * Fix error when option is not defined * Allow template labels * Add .travis.yml file * Add experiment travis code * Fix react example * Fix events returned from mouse events * Fix example * Rename censor to stringifyObject in example * [timeline] Update examples to use ISOString format. (#2791) Resolves #2790 * [timeline] Update serialization example to use ISOString dates. (#2789) Resolves #2696 * added github templates for issues and pull-requests (#2787) fixes #2418 * feat(timeline): Add item data as argument to the template function (#2799) * Fix regression introduced in #2743. (#2796) * Fix for issue #2536 (#2803) * Fix for issue #2536 * Adjusted documentation for fix. * Adjustments due to review * Grrrrr whitespace * Fixed Travis issue * Cheap fix for bug #2795 * Update to PR #2826 to use newline format * Update to gitignore to reflect changes on remote * clean dist folder * Local gitignore update * Just a first example file for the week scale feature * Allowing sourcemap creation * Initial (non-functional) commit to ensure we insert code at the right places (check TODOs) * Functional, not bug-free version which works with locale aware week numbers. * Locale-aware implementation and simplified major labels to a full year * Trying to make the major labels show the correct start date * Working implementation of week numbers using localization. * removing development leftovers * Updated package.json * Reintagrate package.json from accidental deletion * Updates for package.json * Fixing package.json * Integrate the week numbers feature in the documentation. * Reverting local changes to .gitignore * Reverting local changes * Extending examples to cover the case when 1st day of week and 1st day of month align; Fixing display bug so that week numbers are not repeated in minorLabels * Putting the examples into a loopgemini
Marco Schnüriger
7 years ago
committed by
yotamberk
yotamberk
5 changed files with 187 additions and 8 deletions
Unified View
Diff Options
-
+11 -2docs/timeline/index.html
-
+111 -0examples/timeline/styling/weekStyling.html
-
+55 -4lib/timeline/TimeStep.js
-
+5 -1lib/timeline/component/TimeAxis.js
-
+5 -1lib/timeline/optionsTimeline.js
+ 11
- 2
docs/timeline/index.html
View File
+ 111
- 0
examples/timeline/styling/weekStyling.html
View File
| @ -0,0 +1,111 @@ | |||||
| <!DOCTYPE HTML> | |||||
| <html> | |||||
| <head> | |||||
| <title>Timeline | Grid styling</title> | |||||
| <script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment-with-locales.min.js"></script> | |||||
| <script src="../../../dist/vis.js"></script> | |||||
| <link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css"/> | |||||
| <style type="text/css"> | |||||
| body, html { | |||||
| font-family: sans-serif; | |||||
| } | |||||
| /* alternating column backgrounds */ | |||||
| .vis-time-axis .vis-grid.vis-odd { | |||||
| background: #f5f5f5; | |||||
| } | |||||
| </style> | |||||
| </head> | |||||
| <body> | |||||
| <p> | |||||
| Week numbers are calculated based on locales. For this to properly work, the timeline must be loaded with a version | |||||
| of moment.js including locales.</p> | |||||
| <p>To set a locale for the timeline, specify the option | |||||
| <code>{locale: STRING}</code>.</p> | |||||
| <p>To set the scale to use week numbers, use for example <code>{scale: 'week', step: 1}</code>.</p> | |||||
| <p>The following timeline is initialized with the 'de' locale and items are added with locally localized moment.js | |||||
| objects. The timeline locale can be switched to another locale at runtime. If you choose the 'en' locale, the week | |||||
| numbers will be calculated according to the US week calendar numbering scheme.</p> | |||||
| <p> | |||||
| <label for="locale">Select a locale:</label> | |||||
| <select id="locale"> | |||||
| <option value="en">en</option> | |||||
| <option value="it">it</option> | |||||
| <option value="nl">nl</option> | |||||
| <option value="de" selected>de</option> | |||||
| </select> | |||||
| </p> | |||||
| <div id="visualization"></div> | |||||
| <script type="text/javascript"> | |||||
| var itemCount = 26; | |||||
| // DOM element where the Timeline will be attached | |||||
| var container = document.getElementById('visualization'); | |||||
| // just a group for the effects | |||||
| var groups = new vis.DataSet(); | |||||
| groups.add([{id: 1, content: "ISO Weeks"}, {id: 2, content: "US Weeks"}]); | |||||
| // Create a DataSet (allows two way data-binding) | |||||
| var items = new vis.DataSet(); | |||||
| // create a localized moment object based on the current date | |||||
| var USdate = moment().locale('en').hours(0).minutes(0).seconds(0).milliseconds(0); | |||||
| // use the locale-aware weekday function to move to the begin of the current week | |||||
| USdate.weekday(0); | |||||
| // Iterate and just add a week to use it again in the next iteration | |||||
| for (var i = 0; i < itemCount; i++) { | |||||
| var USweekNumber = USdate.format('w'); | |||||
| var USweekStart = USdate.format(); | |||||
| var USweekEnd = USdate.add(1, 'week').format(); | |||||
| items.add({ | |||||
| id: i, | |||||
| group: 2, | |||||
| content: 'US week ' + USweekNumber, | |||||
| start: USweekStart, | |||||
| end: USweekEnd | |||||
| }); | |||||
| } | |||||
| // create another localized moment object - the 'de' locale works according to the ISO8601 leap week calendar system | |||||
| var DEdate = moment().locale('de').hours(0).minutes(0).seconds(0).milliseconds(0); | |||||
| DEdate.weekday(0); | |||||
| for (var j = 0; j < itemCount; j++) { | |||||
| var DEweekNumber = DEdate.format('w'); | |||||
| var DEweekStart = DEdate.format(); | |||||
| var DEweekEnd = DEdate.add(1, 'week').format(); | |||||
| items.add({ | |||||
| id: itemCount + j, | |||||
| group: 1, | |||||
| content: 'ISO week ' + DEweekNumber, | |||||
| start: DEweekStart, | |||||
| end: DEweekEnd | |||||
| }); | |||||
| } | |||||
| // Configuration for the Timeline | |||||
| var options = {timeAxis: {scale: 'week', step: 1}, locale: 'de'}; | |||||
| // Create a Timeline | |||||
| var timeline = new vis.Timeline(container, items, groups, options); | |||||
| // update the locale when changing the select box value | |||||
| var select = document.getElementById('locale'); | |||||
| select.onchange = function () { | |||||
| timeline.setOptions({ | |||||
| locale: this.value | |||||
| }); | |||||
| }; | |||||
| select.onchange(); | |||||
| </script> | |||||
| </body> | |||||
| </html> | |||||