jrtechs
/
jrtechs-vis
mirror of https://github.com/jrtechs/vis.git
1
0
Fork 0
Code Issues 0 Releases 82 Wiki Activity
Browse Source

Merge remote-tracking branch 'origin/v4' into v4 

Conflicts:
	dist/vis.js
flowchartTest
Alex de Mulder 9 years ago
parent
c3883970e4 4b47dc54b9
commit
f22a096b12
34 changed files with 108 additions and 89 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +1
    -0
      HISTORY.md
  2. +1
    -1
      dist/vis.map
  3. +23
    -18
      dist/vis.min.js
  4. +1
    -1
      docs/dataset.html
  5. +1
    -1
      docs/dataview.html
  6. +0
    -0
      docs/graph2d/index.html
  7. +1
    -1
      docs/graph3d.html
  8. +1
    -1
      docs/index.html
  9. +0
    -0
      docs/old/lib/prettify/lang-apollo.js
  10. +0
    -0
      docs/old/lib/prettify/lang-css.js
  11. +0
    -0
      docs/old/lib/prettify/lang-hs.js
  12. +0
    -0
      docs/old/lib/prettify/lang-lisp.js
  13. +0
    -0
      docs/old/lib/prettify/lang-lua.js
  14. +0
    -0
      docs/old/lib/prettify/lang-ml.js
  15. +0
    -0
      docs/old/lib/prettify/lang-proto.js
  16. +0
    -0
      docs/old/lib/prettify/lang-scala.js
  17. +0
    -0
      docs/old/lib/prettify/lang-sql.js
  18. +0
    -0
      docs/old/lib/prettify/lang-vb.js
  19. +0
    -0
      docs/old/lib/prettify/lang-vhdl.js
  20. +0
    -0
      docs/old/lib/prettify/lang-wiki.js
  21. +0
    -0
      docs/old/lib/prettify/lang-yaml.js
  22. +0
    -0
      docs/old/lib/prettify/prettify.css
  23. +0
    -0
      docs/old/lib/prettify/prettify.js
  24. +10
    -10
      docs/old/old_graph2d.html
  25. +3
    -3
      docs/old/old_network.html
  26. +4
    -4
      docs/old/old_timeline.html
  27. +13
    -13
      docs/timeline/index.html
  28. +5
    -5
      examples/timeline/32_grid_styling.html
  29. +6
    -6
      lib/timeline/Graph2d.js
  30. +1
    -1
      lib/timeline/Range.js
  31. +12
    -12
      lib/timeline/TimeStep.js
  32. +6
    -6
      lib/timeline/Timeline.js
  33. +11
    -5
      lib/timeline/component/ItemSet.js
  34. +8
    -1
      test/timeline_groups.html

+ 1
- 0
HISTORY.md View File

@ -27,6 +27,7 @@ http://visjs.org
- Deprecated event `finishedRedraw` as it's redundant. - Deprecated event `finishedRedraw` as it's redundant.
- Renamed option `animate` to `animation`, and changed it to be either a boolean - Renamed option `animate` to `animation`, and changed it to be either a boolean
or an object `{duration: number, easingFunction: string}`. or an object `{duration: number, easingFunction: string}`.
- Fixed #831: items losing selection when their type changed.
### Graph2d ### Graph2d

+ 1
- 1
dist/vis.map
File diff suppressed because it is too large
View File


+ 23
- 18
dist/vis.min.js
File diff suppressed because it is too large
View File


+ 1
- 1
docs/dataset.html View File

@ -7,7 +7,7 @@
<link href="css/prettify.css" type="text/css" rel="stylesheet" /> <link href="css/prettify.css" type="text/css" rel="stylesheet" />
<link href='css/style.css' type='text/css' rel='stylesheet'> <link href='css/style.css' type='text/css' rel='stylesheet'>
<script type="text/javascript" src="lib/prettify/prettify.js"></script>
<script type="text/javascript" src="js/prettify/prettify.js"></script>
<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head> <script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
<body onload="prettyPrint();"> <body onload="prettyPrint();">

+ 1
- 1
docs/dataview.html View File

@ -7,7 +7,7 @@
<link href="css/prettify.css" type="text/css" rel="stylesheet" /> <link href="css/prettify.css" type="text/css" rel="stylesheet" />
<link href='css/style.css' type='text/css' rel='stylesheet'> <link href='css/style.css' type='text/css' rel='stylesheet'>
<script type="text/javascript" src="lib/prettify/prettify.js"></script>
<script type="text/javascript" src="js/prettify/prettify.js"></script>
<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head> <script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
<body onload="prettyPrint();"> <body onload="prettyPrint();">

docs/graph2d/graph2d.html → docs/graph2d/index.html View File


+ 1
- 1
docs/graph3d.html View File

@ -6,7 +6,7 @@
<link href='css/prettify.css' type='text/css' rel='stylesheet'> <link href='css/prettify.css' type='text/css' rel='stylesheet'>
<link href='css/style.css' type='text/css' rel='stylesheet'> <link href='css/style.css' type='text/css' rel='stylesheet'>
<script type="text/javascript" src="lib/prettify/prettify.js"></script>
<script type="text/javascript" src="js/prettify/prettify.js"></script>
<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head> <script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
<body onload="prettyPrint();"> <body onload="prettyPrint();">

+ 1
- 1
docs/index.html View File

@ -7,7 +7,7 @@
<link href="css/prettify.css" type="text/css" rel="stylesheet" /> <link href="css/prettify.css" type="text/css" rel="stylesheet" />
<link href='css/style.css' type='text/css' rel='stylesheet'> <link href='css/style.css' type='text/css' rel='stylesheet'>
<script type="text/javascript" src="lib/prettify/prettify.js"></script>
<script type="text/javascript" src="js/prettify/prettify.js"></script>
<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head> <script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
<body onload="prettyPrint();"> <body onload="prettyPrint();">

docs/lib/prettify/lang-apollo.js → docs/old/lib/prettify/lang-apollo.js View File


docs/lib/prettify/lang-css.js → docs/old/lib/prettify/lang-css.js View File


docs/lib/prettify/lang-hs.js → docs/old/lib/prettify/lang-hs.js View File


docs/lib/prettify/lang-lisp.js → docs/old/lib/prettify/lang-lisp.js View File


docs/lib/prettify/lang-lua.js → docs/old/lib/prettify/lang-lua.js View File


docs/lib/prettify/lang-ml.js → docs/old/lib/prettify/lang-ml.js View File


docs/lib/prettify/lang-proto.js → docs/old/lib/prettify/lang-proto.js View File


docs/lib/prettify/lang-scala.js → docs/old/lib/prettify/lang-scala.js View File


docs/lib/prettify/lang-sql.js → docs/old/lib/prettify/lang-sql.js View File


docs/lib/prettify/lang-vb.js → docs/old/lib/prettify/lang-vb.js View File


docs/lib/prettify/lang-vhdl.js → docs/old/lib/prettify/lang-vhdl.js View File


docs/lib/prettify/lang-wiki.js → docs/old/lib/prettify/lang-wiki.js View File


docs/lib/prettify/lang-yaml.js → docs/old/lib/prettify/lang-yaml.js View File


docs/lib/prettify/prettify.css → docs/old/lib/prettify/prettify.css View File


docs/lib/prettify/prettify.js → docs/old/lib/prettify/prettify.js View File


docs/old_graph2d.html → docs/old/old_graph2d.html View File

@ -7,8 +7,8 @@
background-color: #c9ffc7; background-color: #c9ffc7;
} }
</style> </style>
<link href='css/prettify.css' type='text/css' rel='stylesheet'>
<link href='css/style.css' type='text/css' rel='stylesheet'>
<link href='../css/prettify.css' type='text/css' rel='stylesheet'>
<link href='../css/style.css' type='text/css' rel='stylesheet'>
<script type="text/javascript" src="lib/prettify/prettify.js"></script> <script type="text/javascript" src="lib/prettify/prettify.js"></script>
<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head> <script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
@ -55,7 +55,7 @@
<h2 id="Example">Example</h2> <h2 id="Example">Example</h2>
<p> <p>
The following code shows how to create a Graph2d and provide it with data. The following code shows how to create a Graph2d and provide it with data.
More examples can be found in the <a href="../examples">examples</a> directory.
More examples can be found in the <a href="../../examples">examples</a> directory.
</p> </p>
<pre class="prettyprint lang-html"> <pre class="prettyprint lang-html">
@ -275,7 +275,7 @@ The options colored in green can also be used as options for the groups. All opt
<td class="greenField">yAxisOrientation</td> <td class="greenField">yAxisOrientation</td>
<td>String</td> <td>String</td>
<td>'left'</td> <td>'left'</td>
<td>This defines with which axis, left or right, the graph is coupled. <a href="../examples/graph2d/05_bothAxis.html">Example 5</a> shows groups with different Y axis. If no groups are coupled
<td>This defines with which axis, left or right, the graph is coupled. <a href="../../examples/graph2d/05_bothAxis.html">Example 5</a> shows groups with different Y axis. If no groups are coupled
with an axis, it will not be shown.</td> with an axis, it will not be shown.</td>
</tr> </tr>
<tr> <tr>
@ -354,8 +354,8 @@ The options colored in green can also be used as options for the groups. All opt
<td>'overlap'</td> <td>'overlap'</td>
<td>You can choose how graph2d handles the case where barcharts are occupying the same datapoint. The possible options are: <td>You can choose how graph2d handles the case where barcharts are occupying the same datapoint. The possible options are:
<code>overlap, sideBySide, stack</code>. <code>overlap, sideBySide, stack</code>.
See <a href="../examples/graph2d/10_barsSideBySide.html">example 10</a> for more information.
When using groups, see <a href="../examples/graph2d/11_barsSideBySideGroups.html">example 11</a>.
See <a href="../../examples/graph2d/10_barsSideBySide.html">example 10</a> for more information.
When using groups, see <a href="../../examples/graph2d/11_barsSideBySideGroups.html">example 11</a>.
</td> </td>
</tr> </tr>
<tr> <tr>
@ -374,7 +374,7 @@ The options colored in green can also be used as options for the groups. All opt
<td class="greenField">catmullRom.parametrization</td> <td class="greenField">catmullRom.parametrization</td>
<td>String</td> <td>String</td>
<td>'centripetal'</td> <td>'centripetal'</td>
<td>Define the type of parametrizaion. <a href="../examples/graph2d/07_scrollingAndSorting.html">Example 7</a> shows the different methods. The options are 'centripetal' (best results), 'chordal' and 'uniform'. Uniform is the computationally cheapest variant.
<td>Define the type of parametrizaion. <a href="../../examples/graph2d/07_scrollingAndSorting.html">Example 7</a> shows the different methods. The options are 'centripetal' (best results), 'chordal' and 'uniform'. Uniform is the computationally cheapest variant.
If catmullRom is disabled, linear interpolation is used.</td> If catmullRom is disabled, linear interpolation is used.</td>
</tr> </tr>
<tr> <tr>
@ -507,7 +507,7 @@ The options colored in green can also be used as options for the groups. All opt
<td>Object</td> <td>Object</td>
<td></td> <td></td>
<td>You can use this to toggle the visibility of groups per graph2D instance. This is different from setting the visibility flag of the groups since <td>You can use this to toggle the visibility of groups per graph2D instance. This is different from setting the visibility flag of the groups since
this is not communicated across instances of graph2d. Take a look at <a href="../examples/graph2d/14_toggleGroups.html">Example 14</a>
this is not communicated across instances of graph2d. Take a look at <a href="../../examples/graph2d/14_toggleGroups.html">Example 14</a>
for more explanation. for more explanation.
</td> </td>
</tr> </tr>
@ -1150,8 +1150,8 @@ Graph2d comes with support for the following locales:
</p> </p>
<p> <p>
Additionally, Graph2d has 10 preset styles for graphs, which are cycled through when loading groups. These styles can be overwritten Additionally, Graph2d has 10 preset styles for graphs, which are cycled through when loading groups. These styles can be overwritten
as well, along with defining your own classes to style the graphs! <a href="../examples/graph2d/04_rightAxis.html">Example 4</a> and
<a href="../examples/graph2d/05_bothAxis.html">example 5</a> show the usage of custom styles.
as well, along with defining your own classes to style the graphs! <a href="../../examples/graph2d/04_rightAxis.html">Example 4</a> and
<a href="../../examples/graph2d/05_bothAxis.html">example 5</a> show the usage of custom styles.
</p> </p>
<h2 id="Data_Policy">Data Policy</h2> <h2 id="Data_Policy">Data Policy</h2>

docs/old_network.html → docs/old/old_network.html View File

@ -4,8 +4,8 @@
<head> <head>
<title>vis.js | network documentation</title> <title>vis.js | network documentation</title>
<link href="css/prettify.css" type="text/css" rel="stylesheet" />
<link href='css/style.css' type='text/css' rel='stylesheet'>
<link href="../css/prettify.css" type="text/css" rel="stylesheet" />
<link href='../css/style.css' type='text/css' rel='stylesheet'>
<style>td.greenField { <style>td.greenField {
background-color: #c9ffc7; background-color: #c9ffc7;
}</style> }</style>
@ -90,7 +90,7 @@
<p> <p>
More examples can be found in the More examples can be found in the
<a href="../examples" target="_blank">examples directory</a>.
<a href="../../examples" target="_blank">examples directory</a>.
</p> </p>
<pre class="prettyprint lang-html">&lt;!doctype html&gt; <pre class="prettyprint lang-html">&lt;!doctype html&gt;

docs/old_timeline.html → docs/old/old_timeline.html View File

@ -3,8 +3,8 @@
<head> <head>
<title>vis.js | timeline documentation</title> <title>vis.js | timeline documentation</title>
<link href='css/prettify.css' type='text/css' rel='stylesheet'>
<link href='css/style.css' type='text/css' rel='stylesheet'>
<link href='../css/prettify.css' type='text/css' rel='stylesheet'>
<link href='../css/style.css' type='text/css' rel='stylesheet'>
<script type="text/javascript" src="lib/prettify/prettify.js"></script> <script type="text/javascript" src="lib/prettify/prettify.js"></script>
<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head> <script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
@ -52,7 +52,7 @@
<h2 id="Example">Example</h2> <h2 id="Example">Example</h2>
<p> <p>
The following code shows how to create a Timeline and provide it with data. The following code shows how to create a Timeline and provide it with data.
More examples can be found in the <a href="../examples">examples</a> directory.
More examples can be found in the <a href="../../examples">examples</a> directory.
</p> </p>
<pre class="prettyprint lang-html">&lt;!DOCTYPE HTML&gt; <pre class="prettyprint lang-html">&lt;!DOCTYPE HTML&gt;
@ -1286,7 +1286,7 @@ var options = {
}; };
</pre> </pre>
A full example is available here: <a href="../examples/timeline/08_manipulation_callbacks.html">08_edit_items.html</a>.
A full example is available here: <a href="../../examples/timeline/08_manipulation_callbacks.html">08_edit_items.html</a>.
<h2 id="Templates">Templates</h2> <h2 id="Templates">Templates</h2>

+ 13
- 13
docs/timeline/index.html View File

@ -1522,28 +1522,28 @@ var options = {
<td>Description</td><td>values</td> <td>Description</td><td>values</td>
</tr> </tr>
<tr> <tr>
<td>Alternating columns</td><td class="mid"><code>even</code>, <code>odd</code></td>
<td>Alternating columns</td><td class="mid"><code>vis-even</code>, <code>vis-odd</code></td>
</tr> </tr>
<tr> <tr>
<td>Current date</td><td class="mid"><code>today</code>, <code>tomorrow</code>, <code>yesterday</code>, <code>current-week</code>, <code>current-month</code>, <code>current-year</code></td>
<td>Current date</td><td class="mid"><code>vis-today</code>, <code>vis-tomorrow</code>, <code>vis-yesterday</code>, <code>vis-current-week</code>, <code>vis-current-month</code>, <code>vis-current-year</code></td>
</tr> </tr>
<tr> <tr>
<td>Hours</td><td class="mid"><code>h0</code>, <code>h1</code>, ..., <code>h23</code></td>
<td>Hours</td><td class="mid"><code>vis-h0</code>, <code>vis-h1</code>, ..., <code>vis-h23</code></td>
</tr> </tr>
<tr> <tr>
<td>Grouped hours</td><td class="mid"><code>h0-h4</code> to <code>h20-h24</code></td>
<td>Grouped hours</td><td class="mid"><code>vis-h0-h4</code> to <code>vis-h20-h24</code></td>
</tr> </tr>
<tr> <tr>
<td>Weekday</td><td class="mid"><code>monday</code>, <code>tuesday</code>, <code>wednesday</code>, <code>thursday</code>, <code>friday</code>, <code>saturday</code>, <code>sunday</code></td>
<td>Weekday</td><td class="mid"><code>vis-monday</code>, <code>vis-tuesday</code>, <code>vis-wednesday</code>, <code>vis-thursday</code>, <code>vis-friday</code>, <code>vis-saturday</code>, <code>vis-sunday</code></td>
</tr> </tr>
<tr> <tr>
<td>Days</td><td class="mid"><code>date1</code>, <code>date2</code>, ..., <code>date31</code></td>
<td>Days</td><td class="mid"><code>vis-date1</code>, <code>vis-date2</code>, ..., <code>vis-date31</code></td>
</tr> </tr>
<tr> <tr>
<td>Months</td><td class="mid"><code>januari</code>, <code>februari</code>, <code>march</code>, <code>april</code>, <code>may</code>, <code>june</code>, <code>july</code>, <code>august</code>, <code>september</code>, <code>october</code>, <code>november</code>, <code>december</code></td>
<td>Months</td><td class="mid"><code>vis-januari</code>, <code>vis-februari</code>, <code>vis-march</code>, <code>vis-april</code>, <code>vis-may</code>, <code>vis-june</code>, <code>vis-july</code>, <code>vis-august</code>, <code>vis-september</code>, <code>vis-october</code>, <code>vis-november</code>, <code>vis-december</code></td>
</tr> </tr>
<tr> <tr>
<td>Years</td><td class="mid"><code>year2014</code>, <code>year2015</code>, ...</td>
<td>Years</td><td class="mid"><code>vis-year2014</code>, <code>vis-year2015</code>, ...</td>
</tr> </tr>
</table> </table>
@ -1551,17 +1551,17 @@ var options = {
<pre class="prettyprint lang-html">&lt;style&gt; <pre class="prettyprint lang-html">&lt;style&gt;
/* alternating column backgrounds */ /* alternating column backgrounds */
.vis-time-axis .grid.odd {
.vis-time-axis .grid.vis-odd {
background: #f5f5f5; background: #f5f5f5;
} }
/* gray background in weekends, white text color */ /* gray background in weekends, white text color */
.vis-time-axis .vis-grid.saturday,
.vis-time-axis .vis-grid.sunday {
.vis-time-axis .vis-grid.vis-saturday,
.vis-time-axis .vis-grid.vis-sunday {
background: gray; background: gray;
} }
.vis-time-axis .vis-text.saturday,
.vis-time-axis .vis-text.sunday {
.vis-time-axis .vis-text.vis-saturday,
.vis-time-axis .vis-text.vis-sunday {
color: white; color: white;
} }
&lt;/style&gt; &lt;/style&gt;

+ 5
- 5
examples/timeline/32_grid_styling.html View File

@ -12,17 +12,17 @@
} }
/* alternating column backgrounds */ /* alternating column backgrounds */
.vis-time-axis .vis-grid.odd {
.vis-time-axis .vis-grid.vis-odd {
background: #f5f5f5; background: #f5f5f5;
} }
/* gray background in weekends, white text color */ /* gray background in weekends, white text color */
.vis-time-axis .vis-grid.saturday,
.vis-time-axis .vis-grid.sunday {
.vis-time-axis .vis-grid.vis-saturday,
.vis-time-axis .vis-grid.vis-sunday {
background: gray; background: gray;
} }
.vis-time-axis .vis-text.saturday,
.vis-time-axis .vis-text.sunday {
.vis-time-axis .vis-text.vis-saturday,
.vis-time-axis .vis-text.vis-sunday {
color: white; color: white;
} }
</style> </style>

+ 6
- 6
lib/timeline/Graph2d.js View File

@ -266,10 +266,10 @@ Graph2d.prototype.getItemRange = function() {
* The event happened, whether clicked on an item, etc. * The event happened, whether clicked on an item, etc.
*/ */
Graph2d.prototype.getEventProperties = function (event) { Graph2d.prototype.getEventProperties = function (event) {
var pageX = event.center ? event.center.x : event.pageX;
var pageY = event.center ? event.center.y : event.pageY;
var x = pageX - util.getAbsoluteLeft(this.dom.centerContainer);
var y = pageY - util.getAbsoluteTop(this.dom.centerContainer);
var clientX = event.center ? event.center.x : event.clientX;
var clientY = event.center ? event.center.y : event.clientY;
var x = clientX - util.getAbsoluteLeft(this.dom.centerContainer);
var y = clientY - util.getAbsoluteTop(this.dom.centerContainer);
var time = this._toTime(x); var time = this._toTime(x);
var customTime = CustomTime.customTimeFromTarget(event); var customTime = CustomTime.customTimeFromTarget(event);
@ -299,8 +299,8 @@ Graph2d.prototype.getEventProperties = function (event) {
return { return {
event: event, event: event,
what: what, what: what,
pageX: pageX,
pageY: pageY,
pageX: event.srcEvent ? event.srcEvent.pageX : event.pageX,
pageY: event.srcEvent ? event.srcEvent.pageY : event.pageY,
x: x, x: x,
y: y, y: y,
time: time, time: time,

+ 1
- 1
lib/timeline/Range.js View File

@ -491,7 +491,7 @@ Range.prototype._onMouseWheel = function(event) {
} }
// calculate center, the date to zoom around // calculate center, the date to zoom around
var pointer = getPointer({x: event.pageX, y: event.pageY}, this.body.dom.center);
var pointer = getPointer({x: event.clientX, y: event.clientY}, this.body.dom.center);
var pointerDate = this._pointerToDate(pointer); var pointerDate = this._pointerToDate(pointer);
this.zoom(scale, pointerDate, delta); this.zoom(scale, pointerDate, delta);

+ 12
- 12
lib/timeline/TimeStep.js View File

@ -535,32 +535,32 @@ TimeStep.prototype.getClassName = function() {
var step = this.step; var step = this.step;
function even(value) { function even(value) {
return (value / step % 2 == 0) ? ' even' : ' odd';
return (value / step % 2 == 0) ? ' vis-even' : ' vis-odd';
} }
function today(date) { function today(date) {
if (date.isSame(new Date(), 'day')) { if (date.isSame(new Date(), 'day')) {
return ' today';
return ' vis-today';
} }
if (date.isSame(moment().add(1, 'day'), 'day')) { if (date.isSame(moment().add(1, 'day'), 'day')) {
return ' tomorrow';
return ' vis-tomorrow';
} }
if (date.isSame(moment().add(-1, 'day'), 'day')) { if (date.isSame(moment().add(-1, 'day'), 'day')) {
return ' yesterday';
return ' vis-yesterday';
} }
return ''; return '';
} }
function currentWeek(date) { function currentWeek(date) {
return date.isSame(new Date(), 'week') ? ' current-week' : '';
return date.isSame(new Date(), 'week') ? ' vis-current-week' : '';
} }
function currentMonth(date) { function currentMonth(date) {
return date.isSame(new Date(), 'month') ? ' current-month' : '';
return date.isSame(new Date(), 'month') ? ' vis-current-month' : '';
} }
function currentYear(date) { function currentYear(date) {
return date.isSame(new Date(), 'year') ? ' current-year' : '';
return date.isSame(new Date(), 'year') ? ' vis-current-year' : '';
} }
switch (this.scale) { switch (this.scale) {
@ -578,24 +578,24 @@ TimeStep.prototype.getClassName = function() {
if (this.step == 4) { if (this.step == 4) {
hours = hours + '-h' + (hours + 4); hours = hours + '-h' + (hours + 4);
} }
return 'h' + hours + today(date) + even(date.hours());
return 'vis-h' + hours + today(date) + even(date.hours());
case 'weekday': case 'weekday':
return date.format('dddd').toLowerCase() +
return 'vis-' + date.format('dddd').toLowerCase() +
today(date) + currentWeek(date) + even(date.date()); today(date) + currentWeek(date) + even(date.date());
case 'day': case 'day':
var day = date.date(); var day = date.date();
var month = date.format('MMMM').toLowerCase(); var month = date.format('MMMM').toLowerCase();
return 'day' + day + ' ' + month + currentMonth(date) + even(day - 1);
return 'vis-day' + day + ' vis-' + month + currentMonth(date) + even(day - 1);
case 'month': case 'month':
return date.format('MMMM').toLowerCase() +
return 'vis-' + date.format('MMMM').toLowerCase() +
currentMonth(date) + even(date.month()); currentMonth(date) + even(date.month());
case 'year': case 'year':
var year = date.year(); var year = date.year();
return 'year' + year + currentYear(date)+ even(year);
return 'vis-year' + year + currentYear(date)+ even(year);
default: default:
return ''; return '';

+ 6
- 6
lib/timeline/Timeline.js View File

@ -389,10 +389,10 @@ Timeline.prototype.getItemRange = function() {
* The event happened, whether clicked on an item, etc. * The event happened, whether clicked on an item, etc.
*/ */
Timeline.prototype.getEventProperties = function (event) { Timeline.prototype.getEventProperties = function (event) {
var pageX = event.center ? event.center.x : event.pageX;
var pageY = event.center ? event.center.y : event.pageY;
var x = pageX - util.getAbsoluteLeft(this.dom.centerContainer);
var y = pageY - util.getAbsoluteTop(this.dom.centerContainer);
var clientX = event.center ? event.center.x : event.clientX;
var clientY = event.center ? event.center.y : event.clientY;
var x = clientX - util.getAbsoluteLeft(this.dom.centerContainer);
var y = clientY - util.getAbsoluteTop(this.dom.centerContainer);
var item = this.itemSet.itemFromTarget(event); var item = this.itemSet.itemFromTarget(event);
var group = this.itemSet.groupFromTarget(event); var group = this.itemSet.groupFromTarget(event);
@ -419,8 +419,8 @@ Timeline.prototype.getEventProperties = function (event) {
item: item ? item.id : null, item: item ? item.id : null,
group: group ? group.groupId : null, group: group ? group.groupId : null,
what: what, what: what,
pageX: pageX,
pageY: pageY,
pageX: event.srcEvent ? event.srcEvent.pageX : event.pageX,
pageY: event.srcEvent ? event.srcEvent.pageY : event.pageY,
x: x, x: x,
y: y, y: y,
time: time, time: time,

+ 11
- 5
lib/timeline/component/ItemSet.js View File

@ -818,11 +818,13 @@ ItemSet.prototype._onUpdate = function(ids) {
var type = me._getType(itemData); var type = me._getType(itemData);
var constructor = ItemSet.types[type]; var constructor = ItemSet.types[type];
var selected;
if (item) { if (item) {
// update item // update item
if (!constructor || !(item instanceof constructor)) { if (!constructor || !(item instanceof constructor)) {
// item type has changed, delete the item and recreate it // item type has changed, delete the item and recreate it
selected = item.selected; // preserve selection of this item
me._removeItem(item); me._removeItem(item);
item = null; item = null;
} }
@ -837,6 +839,10 @@ ItemSet.prototype._onUpdate = function(ids) {
item = new constructor(itemData, me.conversion, me.options); item = new constructor(itemData, me.conversion, me.options);
item.id = id; // TODO: not so nice setting id afterwards item.id = id; // TODO: not so nice setting id afterwards
me._addItem(item); me._addItem(item);
if (selected) {
this.selection.push(id);
item.select();
}
} }
else if (type == 'rangeoverflow') { else if (type == 'rangeoverflow') {
// TODO: deprecated since version 2.1.0 (or 3.0.0?). cleanup some day // TODO: deprecated since version 2.1.0 (or 3.0.0?). cleanup some day
@ -847,7 +853,7 @@ ItemSet.prototype._onUpdate = function(ids) {
throw new TypeError('Unknown item type "' + type + '"'); throw new TypeError('Unknown item type "' + type + '"');
} }
} }
});
}.bind(this));
this._order(); this._order();
this.stackDirty = true; // force re-stacking of all items next redraw this.stackDirty = true; // force re-stacking of all items next redraw
@ -1585,23 +1591,23 @@ ItemSet.prototype.itemFromTarget = function(event) {
* @return {Group | null} group * @return {Group | null} group
*/ */
ItemSet.prototype.groupFromTarget = function(event) { ItemSet.prototype.groupFromTarget = function(event) {
var pageY = event.center ? event.center.y : event.pageY;
var clientY = event.center ? event.center.y : event.clientY;
for (var i = 0; i < this.groupIds.length; i++) { for (var i = 0; i < this.groupIds.length; i++) {
var groupId = this.groupIds[i]; var groupId = this.groupIds[i];
var group = this.groups[groupId]; var group = this.groups[groupId];
var foreground = group.dom.foreground; var foreground = group.dom.foreground;
var top = util.getAbsoluteTop(foreground); var top = util.getAbsoluteTop(foreground);
if (pageY > top && pageY < top + foreground.offsetHeight) {
if (clientY > top && clientY < top + foreground.offsetHeight) {
return group; return group;
} }
if (this.options.orientation.item === 'top') { if (this.options.orientation.item === 'top') {
if (i === this.groupIds.length - 1 && pageY > top) {
if (i === this.groupIds.length - 1 && clientY > top) {
return group; return group;
} }
} }
else { else {
if (i === 0 && pageY < top + foreground.offset) {
if (i === 0 && clientY < top + foreground.offset) {
return group; return group;
} }
} }

+ 8
- 1
test/timeline_groups.html View File

@ -28,6 +28,8 @@
</style> </style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
<script src="../dist/vis.js"></script> <script src="../dist/vis.js"></script>
<link href="../dist/vis.css" rel="stylesheet" type="text/css" /> <link href="../dist/vis.css" rel="stylesheet" type="text/css" />
<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head> <script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
@ -52,6 +54,7 @@
<br> <br>
<div id="visualization"></div> <div id="visualization"></div>
<div style="height: 1000px;"></div><!-- for testing vertical scroll on touch devices-->
<script> <script>
var moment = vis.moment; var moment = vis.moment;
@ -189,11 +192,15 @@
console.log('rangechanged', range); console.log('rangechanged', range);
}); });
*/ */
//
timeline.on('click', function (props) { timeline.on('click', function (props) {
console.log('click', props); console.log('click', props);
}); });
$(container).click(function (event) {
console.log('click jquery', timeline.getEventProperties(event));
});
timeline.on('doubleClick', function (props) { timeline.on('doubleClick', function (props) {
console.log('doubleClick', props); console.log('doubleClick', props);
}); });

Write Preview
Loading…
Cancel
Save