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

Refactored the css of Timeline and Graph2d to have a `vis-` prefix everywhere. (Still a small issue in Graph2d)

flowchartTest
jos 9 years ago
parent
ef470ff0a6
commit
b3e3dccad7
40 changed files with 660 additions and 665 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +6
    -6
      docs/timeline.html
  2. +4
    -4
      examples/graph2d/04_rightAxis.html
  3. +7
    -8
      examples/graph2d/05_bothAxis.html
  4. +347
    -347
      examples/graph2d/09_external_legend.html
  5. +7
    -7
      examples/graph2d/16_bothAxis_titles.html
  6. +10
    -10
      examples/timeline/12_custom_styling.html
  7. +9
    -9
      examples/timeline/15_item_class_names.html
  8. +1
    -1
      examples/timeline/18_range_overflow.html
  9. +2
    -2
      examples/timeline/25_background_areas.html
  10. +3
    -3
      examples/timeline/30_subgroups.html
  11. +5
    -5
      examples/timeline/32_grid_styling.html
  12. +3
    -3
      lib/DOMutil.js
  13. +22
    -22
      lib/timeline/Core.js
  14. +1
    -1
      lib/timeline/component/CurrentTime.js
  15. +1
    -1
      lib/timeline/component/CustomTime.js
  16. +9
    -9
      lib/timeline/component/DataAxis.js
  17. +6
    -6
      lib/timeline/component/GraphGroup.js
  18. +10
    -10
      lib/timeline/component/Group.js
  19. +7
    -7
      lib/timeline/component/ItemSet.js
  20. +2
    -2
      lib/timeline/component/Legend.js
  21. +1
    -1
      lib/timeline/component/LineGraph.js
  22. +8
    -8
      lib/timeline/component/TimeAxis.js
  23. +5
    -5
      lib/timeline/component/css/animation.css
  24. +1
    -1
      lib/timeline/component/css/currenttime.css
  25. +1
    -1
      lib/timeline/component/css/customtime.css
  26. +75
    -77
      lib/timeline/component/css/dataaxis.css
  27. +16
    -16
      lib/timeline/component/css/item.css
  28. +6
    -6
      lib/timeline/component/css/itemset.css
  29. +6
    -6
      lib/timeline/component/css/labelset.css
  30. +18
    -29
      lib/timeline/component/css/panel.css
  31. +16
    -16
      lib/timeline/component/css/pathStyles.css
  32. +8
    -8
      lib/timeline/component/css/timeaxis.css
  33. +10
    -1
      lib/timeline/component/css/timeline.css
  34. +1
    -1
      lib/timeline/component/graph2d_types/bar.js
  35. +4
    -4
      lib/timeline/component/graph2d_types/line.js
  36. +3
    -3
      lib/timeline/component/item/BackgroundItem.js
  37. +7
    -7
      lib/timeline/component/item/BoxItem.js
  38. +2
    -2
      lib/timeline/component/item/Item.js
  39. +5
    -5
      lib/timeline/component/item/PointItem.js
  40. +5
    -5
      lib/timeline/component/item/RangeItem.js

+ 6
- 6
docs/timeline.html View File

@ -1373,7 +1373,7 @@ To load a locale into the Timeline not supported by default, one can add a new l
<p>For example, to change the border and background color of all items, include the <p>For example, to change the border and background color of all items, include the
following code inside the head of your html code or in a separate stylesheet.</p> following code inside the head of your html code or in a separate stylesheet.</p>
<pre class="prettyprint lang-html">&lt;style&gt; <pre class="prettyprint lang-html">&lt;style&gt;
.vis.timeline .item {
.vis-item {
border-color: orange; border-color: orange;
background-color: yellow; background-color: yellow;
} }
@ -1424,17 +1424,17 @@ To load a locale into the Timeline not supported by default, one can add a new l
<pre class="prettyprint lang-html">&lt;style&gt; <pre class="prettyprint lang-html">&lt;style&gt;
/* alternating column backgrounds */ /* alternating column backgrounds */
.vis.timeline .timeaxis .grid.odd {
.vis-time-axis .grid.odd {
background: #f5f5f5; background: #f5f5f5;
} }
/* gray background in weekends, white text color */ /* gray background in weekends, white text color */
.vis.timeline .timeaxis .grid.saturday,
.vis.timeline .timeaxis .grid.sunday {
.vis-time-axis .vis-grid.saturday,
.vis-time-axis .vis-grid.sunday {
background: gray; background: gray;
} }
.vis.timeline .timeaxis .text.saturday,
.vis.timeline .timeaxis .text.sunday {
.vis-time-axis .vis-text.saturday,
.vis-time-axis .vis-text.sunday {
color: white; color: white;
} }
&lt;/style&gt; &lt;/style&gt;

+ 4
- 4
examples/graph2d/04_rightAxis.html View File

@ -8,14 +8,14 @@
font-family: sans-serif; font-family: sans-serif;
} }
.customStyle1 {
.custom-style1 {
fill: #0df200; fill: #0df200;
fill-opacity:0; fill-opacity:0;
stroke-width:2px; stroke-width:2px;
stroke: #0df200; stroke: #0df200;
} }
.customStyle2 {
.custom-style2 {
fill: #f23303; fill: #f23303;
fill-opacity:0; fill-opacity:0;
stroke-width:2px; stroke-width:2px;
@ -47,7 +47,7 @@
groups.add({ groups.add({
id: 0, id: 0,
content: names[0], content: names[0],
className: 'customStyle1',
className: 'custom-style1',
options: { options: {
drawPoints: { drawPoints: {
style: 'square' // square, circle style: 'square' // square, circle
@ -60,7 +60,7 @@
groups.add({ groups.add({
id: 1, id: 1,
content: names[1], content: names[1],
className: 'customStyle2',
className: 'custom-style2',
options: { options: {
style:'bar', style:'bar',
drawPoints: {style: 'circle', drawPoints: {style: 'circle',

+ 7
- 8
examples/graph2d/05_bothAxis.html View File

@ -8,27 +8,26 @@
font-family: sans-serif; font-family: sans-serif;
} }
.customStyle1 {
.custom-style1 {
fill: #f2ea00; fill: #f2ea00;
fill-opacity:0; fill-opacity:0;
stroke-width:2px; stroke-width:2px;
stroke: #b3ab00; stroke: #b3ab00;
} }
.customStyle2 {
.custom-style2 {
fill: #00a0f2; fill: #00a0f2;
fill-opacity:0;
stroke-width:2px; stroke-width:2px;
stroke: #050092; stroke: #050092;
} }
.customStyle3 {
.custom-style3 {
fill: #00f201; fill: #00f201;
fill-opacity:0; fill-opacity:0;
stroke-width:2px; stroke-width:2px;
stroke: #029200; stroke: #029200;
} }
path.customStyle3.fill {
path.custom-style3.vis-fill {
fill-opacity:0.5 !important; fill-opacity:0.5 !important;
stroke: none; stroke: none;
} }
@ -57,7 +56,7 @@
groups.add({ groups.add({
id: 0, id: 0,
content: names[0], content: names[0],
className: 'customStyle1',
className: 'custom-style1',
options: { options: {
drawPoints: { drawPoints: {
style: 'square' // square, circle style: 'square' // square, circle
@ -70,7 +69,7 @@
groups.add({ groups.add({
id: 1, id: 1,
content: names[1], content: names[1],
className: 'customStyle2',
className: 'custom-style2',
options: { options: {
style:'bar', style:'bar',
drawPoints: {style: 'circle', drawPoints: {style: 'circle',
@ -90,7 +89,7 @@
groups.add({ groups.add({
id: 3, id: 3,
content: names[3], content: names[3],
className: 'customStyle3',
className: 'custom-style3',
options: { options: {
yAxisOrientation: 'right', // right, left yAxisOrientation: 'right', // right, left
drawPoints: { drawPoints: {

+ 347
- 347
examples/graph2d/09_external_legend.html View File

@ -1,366 +1,366 @@
<!DOCTYPE HTML> <!DOCTYPE HTML>
<html> <html>
<head> <head>
<title>Graph2d | External legend Example</title>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body, html {
font-family: sans-serif;
}
.customStyle1 {
fill: #f2ea00;
fill-opacity:0;
stroke-width:2px;
stroke: #b3ab00;
}
.customStyle2 {
fill: #00a0f2;
fill-opacity:0;
stroke-width:2px;
stroke: #050092;
}
.customStyle3 {
fill: #00f201;
fill-opacity:0;
stroke-width:2px;
stroke: #029200;
}
path.customStyle3.fill {
fill-opacity:0.5 !important;
stroke: none;
}
.graphGroup0 {
fill:#4f81bd;
fill-opacity:0;
stroke-width:2px;
stroke: #4f81bd;
}
.graphGroup1 {
fill:#f79646;
fill-opacity:0;
stroke-width:2px;
stroke: #f79646;
}
.graphGroup2 {
fill: #8c51cf;
fill-opacity:0;
stroke-width:2px;
stroke: #8c51cf;
}
.graphGroup3 {
fill: #75c841;
fill-opacity:0;
stroke-width:2px;
stroke: #75c841;
}
.graphGroup4 {
fill: #ff0100;
fill-opacity:0;
stroke-width:2px;
stroke: #ff0100;
}
.graphGroup5 {
fill: #37d8e6;
fill-opacity:0;
stroke-width:2px;
stroke: #37d8e6;
}
.graphGroup6 {
fill: #042662;
fill-opacity:0;
stroke-width:2px;
stroke: #042662;
}
.graphGroup7 {
fill:#00ff26;
fill-opacity:0;
stroke-width:2px;
stroke: #00ff26;
}
.graphGroup8 {
fill:#ff00ff;
fill-opacity:0;
stroke-width:2px;
stroke: #ff00ff;
}
.graphGroup9 {
fill: #8f3938;
fill-opacity:0;
stroke-width:2px;
stroke: #8f3938;
}
.fill {
fill-opacity:0.1;
stroke: none;
}
.bar {
fill-opacity:0.5;
stroke-width:1px;
}
.point {
stroke-width:2px;
fill-opacity:1.0;
}
.legendBackground {
stroke-width:1px;
fill-opacity:0.9;
fill: #ffffff;
stroke: #c2c2c2;
}
.outline {
stroke-width:1px;
fill-opacity:1;
fill: #ffffff;
stroke: #e5e5e5;
}
.iconFill {
fill-opacity:0.3;
stroke: none;
}
div.descriptionContainer {
float:left;
height:30px;
width:160px;
padding-left:5px;
padding-right:5px;
line-height: 30px;
}
div.iconContainer {
float:left;
}
div.legendElementContainer {
display:inline-block;
width:200px;
height:30px;
border-style:solid;
border-width:1px;
border-color: #e0e0e0;
background-color: #ffffff;
margin:4px;
padding:4px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor:pointer;
}
div.legendElementContainer.hidden {
background-color: #d3e6ff;
}
svg.legendIcon {
width:30px;
height:30px;
}
div.externalLegend {
position:relative;
margin-left: -5px;
width: 900px;
}
</style>
<script src="../../dist/vis.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>
<title>Graph2d | External legend Example</title>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body, html {
font-family: sans-serif;
}
.custom-style1 {
fill: #f2ea00;
fill-opacity:0;
stroke-width:2px;
stroke: #b3ab00;
}
.custom-style2 {
fill: #00a0f2;
fill-opacity:0;
stroke-width:2px;
stroke: #050092;
}
.custom-style3 {
fill: #00f201;
fill-opacity:0;
stroke-width:2px;
stroke: #029200;
}
path.custom-style3.fill {
fill-opacity:0.5 !important;
stroke: none;
}
.vis-graph-group0 {
fill:#4f81bd;
fill-opacity:0;
stroke-width:2px;
stroke: #4f81bd;
}
.vis-graph-group1 {
fill:#f79646;
fill-opacity:0;
stroke-width:2px;
stroke: #f79646;
}
.vis-graph-group2 {
fill: #8c51cf;
fill-opacity:0;
stroke-width:2px;
stroke: #8c51cf;
}
.vis-graph-group3 {
fill: #75c841;
fill-opacity:0;
stroke-width:2px;
stroke: #75c841;
}
.vis-graph-group4 {
fill: #ff0100;
fill-opacity:0;
stroke-width:2px;
stroke: #ff0100;
}
.vis-graph-group5 {
fill: #37d8e6;
fill-opacity:0;
stroke-width:2px;
stroke: #37d8e6;
}
.vis-graph-group6 {
fill: #042662;
fill-opacity:0;
stroke-width:2px;
stroke: #042662;
}
.vis-graph-group7 {
fill:#00ff26;
fill-opacity:0;
stroke-width:2px;
stroke: #00ff26;
}
.vis-graph-group8 {
fill:#ff00ff;
fill-opacity:0;
stroke-width:2px;
stroke: #ff00ff;
}
.vis-graph-group9 {
fill: #8f3938;
fill-opacity:0;
stroke-width:2px;
stroke: #8f3938;
}
.vis-fill {
fill-opacity:0.1;
stroke: none;
}
.vis-bar {
fill-opacity:0.5;
stroke-width:1px;
}
.vis-point {
stroke-width:2px;
fill-opacity:1.0;
}
.vis-legend-background {
stroke-width:1px;
fill-opacity:0.9;
fill: #ffffff;
stroke: #c2c2c2;
}
.vis-outline {
stroke-width:1px;
fill-opacity:1;
fill: #ffffff;
stroke: #e5e5e5;
}
.vis-icon-fill {
fill-opacity:0.3;
stroke: none;
}
div.description-container {
float:left;
height:30px;
width:160px;
padding-left:5px;
padding-right:5px;
line-height: 30px;
}
div.icon-container {
float:left;
}
div.legend-element-container {
display:inline-block;
width:200px;
height:30px;
border-style:solid;
border-width:1px;
border-color: #e0e0e0;
background-color: #ffffff;
margin:4px;
padding:4px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor:pointer;
}
div.legend-element-container.hidden {
background-color: #d3e6ff;
}
svg.legend-icon {
width:30px;
height:30px;
}
div.external-legend {
position:relative;
margin-left: -5px;
width: 900px;
}
</style>
<script src="../../dist/vis.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>
<body> <body>
<h2>Graph2d | External custom legend</h2> <h2>Graph2d | External custom legend</h2>
<div style="width:800px; font-size:14px; text-align: justify;"> <div style="width:800px; font-size:14px; text-align: justify;">
This example shows how to create an external custom legend using the getLegend function. We use normal JavaScript to show and hide the
groups by updating the dataset.
This example shows how to create an external custom legend using the getLegend function. We use normal JavaScript to show and hide the
groups by updating the dataset.
</div> </div>
<br /> <br />
<div id="Legend" class="externalLegend"></div>
<div id="Legend" class="external-legend"></div>
<div id="visualization"></div> <div id="visualization"></div>
<script type="text/javascript"> <script type="text/javascript">
// create a dataSet with groups
var names = ['SquareShaded', 'Bargraph', 'Blank', 'CircleShaded'];
var groups = new vis.DataSet();
groups.add({
id: 0,
content: names[0],
className: 'customStyle1',
options: {
drawPoints: {
style: 'square' // square, circle
},
shaded: {
orientation: 'bottom' // top, bottom
}
}});
groups.add({
id: 1,
content: names[1],
className: 'customStyle2',
options: {
style:'bar',
drawPoints: {style: 'circle',
size: 10
}
}});
groups.add({
id: 2,
content: names[2],
options: {
yAxisOrientation: 'right', // right, left
drawPoints: false
}
});
groups.add({
id: 3,
content: names[3],
className: 'customStyle3',
options: {
yAxisOrientation: 'right', // right, left
drawPoints: {
style: 'circle' // square, circle
},
shaded: {
orientation: 'top' // top, bottom
}
}});
var container = document.getElementById('visualization');
var items = [
{x: '2014-06-12', y: 0 , group: 0},
{x: '2014-06-13', y: 30, group: 0},
{x: '2014-06-14', y: 10, group: 0},
{x: '2014-06-15', y: 15, group: 1},
{x: '2014-06-16', y: 30, group: 1},
{x: '2014-06-17', y: 10, group: 1},
{x: '2014-06-18', y: 15, group: 1},
{x: '2014-06-19', y: 52, group: 1},
{x: '2014-06-20', y: 10, group: 1},
{x: '2014-06-21', y: 20, group: 2},
{x: '2014-06-22', y: 600, group: 2},
{x: '2014-06-23', y: 100, group: 2},
{x: '2014-06-24', y: 250, group: 2},
{x: '2014-06-25', y: 300, group: 2},
{x: '2014-06-26', y: 200, group: 3},
{x: '2014-06-27', y: 600, group: 3},
{x: '2014-06-28', y: 1000, group: 3},
{x: '2014-06-29', y: 250, group: 3},
{x: '2014-06-30', y: 300, group: 3}
];
var dataset = new vis.DataSet(items);
var options = {
dataAxis: {showMinorLabels: false},
start: '2014-06-09',
end: '2014-07-03'
};
var graph2d = new vis.Graph2d(container, items, groups, options);
/**
* this function fills the external legend with content using the getLegend() function.
*/
function populateExternalLegend() {
var groupsData = groups.get();
var legendDiv = document.getElementById("Legend");
legendDiv.innerHTML = "";
// get for all groups:
for (var i = 0; i < groupsData.length; i++) {
// create divs
var containerDiv = document.createElement("div");
var iconDiv = document.createElement("div");
var descriptionDiv = document.createElement("div");
// give divs classes and Ids where necessary
containerDiv.className = 'legendElementContainer';
containerDiv.id = groupsData[i].id + "_legendContainer"
iconDiv.className = "iconContainer";
descriptionDiv.className = "descriptionContainer";
// get the legend for this group.
var legend = graph2d.getLegend(groupsData[i].id,30,30);
// append class to icon. All styling classes from the vis.css have been copied over into the head here to be able to style the
// icons with the same classes if they are using the default ones.
legend.icon.setAttributeNS(null, "class", "legendIcon");
// append the legend to the corresponding divs
iconDiv.appendChild(legend.icon);
descriptionDiv.innerHTML = legend.label;
// determine the order for left and right orientation
if (legend.orientation == 'left') {
descriptionDiv.style.textAlign = "left";
containerDiv.appendChild(iconDiv);
containerDiv.appendChild(descriptionDiv);
}
else {
descriptionDiv.style.textAlign = "right";
containerDiv.appendChild(descriptionDiv);
containerDiv.appendChild(iconDiv);
}
// append to the legend container div
legendDiv.appendChild(containerDiv);
// bind click event to this legend element.
containerDiv.onclick = toggleGraph.bind(this,groupsData[i].id);
}
// create a dataSet with groups
var names = ['SquareShaded', 'Bargraph', 'Blank', 'CircleShaded'];
var groups = new vis.DataSet();
groups.add({
id: 0,
content: names[0],
className: 'custom-style1',
options: {
drawPoints: {
style: 'square' // square, circle
},
shaded: {
orientation: 'bottom' // top, bottom
}
}});
groups.add({
id: 1,
content: names[1],
className: 'custom-style2',
options: {
style:'bar',
drawPoints: {style: 'circle',
size: 10
}
}});
groups.add({
id: 2,
content: names[2],
options: {
yAxisOrientation: 'right', // right, left
drawPoints: false
} }
/**
* This function switchs the visible option of the selected group on an off.
* @param groupId
*/
function toggleGraph(groupId) {
// get the container that was clicked on.
var container = document.getElementById(groupId + "_legendContainer")
// if visible, hide
if (graph2d.isGroupVisible(groupId) == true) {
groups.update({id:groupId, visible:false});
container.className = container.className + " hidden";
}
else { // if invisible, show
groups.update({id:groupId, visible:true});
container.className = container.className.replace("hidden","");
}
});
groups.add({
id: 3,
content: names[3],
className: 'custom-style3',
options: {
yAxisOrientation: 'right', // right, left
drawPoints: {
style: 'circle' // square, circle
},
shaded: {
orientation: 'top' // top, bottom
}
}});
var container = document.getElementById('visualization');
var items = [
{x: '2014-06-12', y: 0 , group: 0},
{x: '2014-06-13', y: 30, group: 0},
{x: '2014-06-14', y: 10, group: 0},
{x: '2014-06-15', y: 15, group: 1},
{x: '2014-06-16', y: 30, group: 1},
{x: '2014-06-17', y: 10, group: 1},
{x: '2014-06-18', y: 15, group: 1},
{x: '2014-06-19', y: 52, group: 1},
{x: '2014-06-20', y: 10, group: 1},
{x: '2014-06-21', y: 20, group: 2},
{x: '2014-06-22', y: 600, group: 2},
{x: '2014-06-23', y: 100, group: 2},
{x: '2014-06-24', y: 250, group: 2},
{x: '2014-06-25', y: 300, group: 2},
{x: '2014-06-26', y: 200, group: 3},
{x: '2014-06-27', y: 600, group: 3},
{x: '2014-06-28', y: 1000, group: 3},
{x: '2014-06-29', y: 250, group: 3},
{x: '2014-06-30', y: 300, group: 3}
];
var dataset = new vis.DataSet(items);
var options = {
dataAxis: {showMinorLabels: false},
start: '2014-06-09',
end: '2014-07-03'
};
var graph2d = new vis.Graph2d(container, items, groups, options);
/**
* this function fills the external legend with content using the getLegend() function.
*/
function populateExternalLegend() {
var groupsData = groups.get();
var legendDiv = document.getElementById("Legend");
legendDiv.innerHTML = "";
// get for all groups:
for (var i = 0; i < groupsData.length; i++) {
// create divs
var containerDiv = document.createElement("div");
var iconDiv = document.createElement("div");
var descriptionDiv = document.createElement("div");
// give divs classes and Ids where necessary
containerDiv.className = 'legend-element-container';
containerDiv.id = groupsData[i].id + "_legendContainer"
iconDiv.className = "icon-container";
descriptionDiv.className = "description-container";
// get the legend for this group.
var legend = graph2d.getLegend(groupsData[i].id,30,30);
// append class to icon. All styling classes from the vis.css have been copied over into the head here to be able to style the
// icons with the same classes if they are using the default ones.
legend.icon.setAttributeNS(null, "class", "legend-icon");
// append the legend to the corresponding divs
iconDiv.appendChild(legend.icon);
descriptionDiv.innerHTML = legend.label;
// determine the order for left and right orientation
if (legend.orientation == 'left') {
descriptionDiv.style.textAlign = "left";
containerDiv.appendChild(iconDiv);
containerDiv.appendChild(descriptionDiv);
}
else {
descriptionDiv.style.textAlign = "right";
containerDiv.appendChild(descriptionDiv);
containerDiv.appendChild(iconDiv);
}
// append to the legend container div
legendDiv.appendChild(containerDiv);
// bind click event to this legend element.
containerDiv.onclick = toggleGraph.bind(this,groupsData[i].id);
}
}
/**
* This function switchs the visible option of the selected group on an off.
* @param groupId
*/
function toggleGraph(groupId) {
// get the container that was clicked on.
var container = document.getElementById(groupId + "_legendContainer")
// if visible, hide
if (graph2d.isGroupVisible(groupId) == true) {
groups.update({id:groupId, visible:false});
container.className = container.className + " hidden";
}
else { // if invisible, show
groups.update({id:groupId, visible:true});
container.className = container.className.replace("hidden","");
} }
}
populateExternalLegend()
populateExternalLegend()
</script> </script>
</body> </body>

+ 7
- 7
examples/graph2d/16_bothAxis_titles.html View File

@ -8,27 +8,27 @@
font-family: sans-serif; font-family: sans-serif;
} }
.customStyle1 {
.custom-style1 {
fill: #f2ea00; fill: #f2ea00;
fill-opacity:0; fill-opacity:0;
stroke-width:2px; stroke-width:2px;
stroke: #b3ab00; stroke: #b3ab00;
} }
.customStyle2 {
.custom-style2 {
fill: #00a0f2; fill: #00a0f2;
fill-opacity:0; fill-opacity:0;
stroke-width:2px; stroke-width:2px;
stroke: #050092; stroke: #050092;
} }
.customStyle3 {
.custom-style3 {
fill: #00f201; fill: #00f201;
fill-opacity:0; fill-opacity:0;
stroke-width:2px; stroke-width:2px;
stroke: #029200; stroke: #029200;
} }
path.customStyle3.fill {
path.custom-style3.vis-fill {
fill-opacity:0.5 !important; fill-opacity:0.5 !important;
stroke: none; stroke: none;
} }
@ -88,7 +88,7 @@
groups.add({ groups.add({
id: 0, id: 0,
content: names[0], content: names[0],
className: 'customStyle1',
className: 'custom-style1',
options: { options: {
drawPoints: { drawPoints: {
style: 'square' // square, circle style: 'square' // square, circle
@ -101,7 +101,7 @@
groups.add({ groups.add({
id: 1, id: 1,
content: names[1], content: names[1],
className: 'customStyle2',
className: 'custom-style2',
options: { options: {
style:'bar', style:'bar',
drawPoints: {style: 'circle', drawPoints: {style: 'circle',
@ -121,7 +121,7 @@
groups.add({ groups.add({
id: 3, id: 3,
content: names[3], content: names[3],
className: 'customStyle3',
className: 'custom-style3',
options: { options: {
yAxisOrientation: 'right', // right, left yAxisOrientation: 'right', // right, left
drawPoints: { drawPoints: {

+ 10
- 10
examples/timeline/12_custom_styling.html View File

@ -7,14 +7,14 @@
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" /> <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<style type="text/css"> <style type="text/css">
.vis.timeline.root {
.vis-timeline {
border: 2px solid purple; border: 2px solid purple;
font-family: purisa, 'comic sans', cursive; font-family: purisa, 'comic sans', cursive;
font-size: 12pt; font-size: 12pt;
background: #ffecea; background: #ffecea;
} }
.vis.timeline .item {
.vis-item {
border-color: #F991A3; border-color: #F991A3;
background-color: pink; background-color: pink;
font-size: 15pt; font-size: 15pt;
@ -22,37 +22,37 @@
box-shadow: 5px 5px 20px rgba(128,128,128, 0.5); box-shadow: 5px 5px 20px rgba(128,128,128, 0.5);
} }
.vis.timeline .item,
.vis.timeline .item.line {
.vis-item,
.vis-item.vis-line {
border-width: 3px; border-width: 3px;
} }
.vis.timeline .item.dot {
.vis-item.vis-dot {
border-width: 10px; border-width: 10px;
border-radius: 10px; border-radius: 10px;
} }
.vis.timeline .item.selected {
.vis-item.vis-selected {
border-color: green; border-color: green;
background-color: lightgreen; background-color: lightgreen;
} }
.vis.timeline .timeaxis .text {
.vis-time-axis .vis-text {
color: purple; color: purple;
padding-top: 10px; padding-top: 10px;
padding-left: 10px; padding-left: 10px;
} }
.vis.timeline .timeaxis .text.major {
.vis-time-axis .vis-text.vis-major {
font-weight: bold; font-weight: bold;
} }
.vis.timeline .timeaxis .grid.minor {
.vis-time-axis .vis-grid.vis-minor {
border-width: 2px; border-width: 2px;
border-color: pink; border-color: pink;
} }
.vis.timeline .timeaxis .grid.major {
.vis-time-axis .vis-grid.vis-major {
border-width: 2px; border-width: 2px;
border-color: #F991A3; border-color: #F991A3;
} }

+ 9
- 9
examples/timeline/15_item_class_names.html View File

@ -12,44 +12,44 @@
/* custom styles for individual items, load this after vis.css */ /* custom styles for individual items, load this after vis.css */
.vis.timeline .item.green {
.vis-item.green {
background-color: greenyellow; background-color: greenyellow;
border-color: green; border-color: green;
} }
/* create a custom sized dot at the bottom of the red item */ /* create a custom sized dot at the bottom of the red item */
.vis.timeline .item.red {
.vis-item.red {
background-color: red; background-color: red;
border-color: darkred; border-color: darkred;
color: white; color: white;
font-family: monospace; font-family: monospace;
box-shadow: 0 0 10px gray; box-shadow: 0 0 10px gray;
} }
.vis.timeline .item.dot.red {
.vis-item.vis-dot.red {
border-radius: 10px; border-radius: 10px;
border-width: 10px; border-width: 10px;
} }
.vis.timeline .item.line.red {
.vis-item.vis-line.red {
border-width: 5px; border-width: 5px;
} }
.vis.timeline .item.box.red {
.vis-item.vis-box.red {
border-radius: 0; border-radius: 0;
border-width: 2px; border-width: 2px;
font-size: 24pt; font-size: 24pt;
font-weight: bold; font-weight: bold;
} }
.vis.timeline .item.orange {
.vis-item.orange {
background-color: gold; background-color: gold;
border-color: orange; border-color: orange;
} }
.vis.timeline .item.orange.selected {
.vis-item.vis-selected.orange {
/* custom colors for selected orange items */ /* custom colors for selected orange items */
background-color: orange; background-color: orange;
border-color: orangered; border-color: orangered;
} }
.vis.timeline .item.magenta {
.vis-item.magenta {
background-color: magenta; background-color: magenta;
border-color: purple; border-color: purple;
color: white; color: white;
@ -57,7 +57,7 @@
/* our custom classes overrule the styles for selected events, /* our custom classes overrule the styles for selected events,
so lets define a new style for the selected events */ so lets define a new style for the selected events */
.vis.timeline .item.selected {
.vis-item.vis-selected {
background-color: white; background-color: white;
border-color: black; border-color: black;
color: black; color: black;

+ 1
- 1
examples/timeline/18_range_overflow.html View File

@ -11,7 +11,7 @@
font-family: sans-serif; font-family: sans-serif;
} }
.vis.timeline .item.range {
.vis-item.vis-range {
overflow: visible; overflow: visible;
} }
</style> </style>

+ 2
- 2
examples/timeline/25_background_areas.html View File

@ -9,10 +9,10 @@
font-size: 11pt; font-size: 11pt;
} }
.vis.timeline .item.background.negative {
.vis-item.vis-background.negative {
background-color: rgba(255, 0, 0, 0.2); background-color: rgba(255, 0, 0, 0.2);
} }
.vis.timeline .item.background.marker {
.vis-item.vis-background.marker {
border-left: 2px solid green; border-left: 2px solid green;
} }
</style> </style>

+ 3
- 3
examples/timeline/30_subgroups.html View File

@ -9,13 +9,13 @@
font-size: 11pt; font-size: 11pt;
} }
.vis.timeline .item.background.negative {
.vis-item.vis-background.negative {
background-color: rgba(255, 0, 0, 0.2); background-color: rgba(255, 0, 0, 0.2);
} }
.vis.timeline .item.background.positive {
.vis-item.vis-background.positive {
background-color: rgba(105, 255, 98, 0.20); background-color: rgba(105, 255, 98, 0.20);
} }
.vis.timeline .item.background.marker {
.vis-item.vis-background.marker {
border-left: 2px solid green; border-left: 2px solid green;
} }
</style> </style>

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

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

+ 3
- 3
lib/DOMutil.js View File

@ -150,9 +150,9 @@ exports.drawPoint = function(x, y, group, JSONcontainer, svgContainer, labelObj)
} }
if(group.options.drawPoints.styles !== undefined) { if(group.options.drawPoints.styles !== undefined) {
point.setAttributeNS(null, "style", group.group.options.drawPoints.styles);
point.setAttributeNS(null, "style", 'vis-' + group.group.options.drawPoints.styles);
} }
point.setAttributeNS(null, "class", group.className + " point");
point.setAttributeNS(null, "class", group.className + " vis-point");
//handle label //handle label
var label = exports.getSVGElement('text',JSONcontainer,svgContainer); var label = exports.getSVGElement('text',JSONcontainer,svgContainer);
if (labelObj){ if (labelObj){
@ -168,7 +168,7 @@ exports.drawPoint = function(x, y, group, JSONcontainer, svgContainer, labelObj)
} }
if (labelObj.className) { if (labelObj.className) {
label.setAttributeNS(null, "class", labelObj.className + " label");
label.setAttributeNS(null, "class", labelObj.className + " vis-label");
} }

+ 22
- 22
lib/timeline/Core.js View File

@ -51,24 +51,24 @@ Core.prototype._create = function (container) {
this.dom.shadowTopRight = document.createElement('div'); this.dom.shadowTopRight = document.createElement('div');
this.dom.shadowBottomRight = document.createElement('div'); this.dom.shadowBottomRight = document.createElement('div');
this.dom.root.className = 'vis timeline root';
this.dom.background.className = 'vispanel background';
this.dom.backgroundVertical.className = 'vispanel background vertical';
this.dom.backgroundHorizontal.className = 'vispanel background horizontal';
this.dom.centerContainer.className = 'vispanel center';
this.dom.leftContainer.className = 'vispanel left';
this.dom.rightContainer.className = 'vispanel right';
this.dom.top.className = 'vispanel top';
this.dom.bottom.className = 'vispanel bottom';
this.dom.left.className = 'content';
this.dom.center.className = 'content';
this.dom.right.className = 'content';
this.dom.shadowTop.className = 'shadow top';
this.dom.shadowBottom.className = 'shadow bottom';
this.dom.shadowTopLeft.className = 'shadow top';
this.dom.shadowBottomLeft.className = 'shadow bottom';
this.dom.shadowTopRight.className = 'shadow top';
this.dom.shadowBottomRight.className = 'shadow bottom';
this.dom.root.className = 'vis-timeline';
this.dom.background.className = 'vis-panel vis-background';
this.dom.backgroundVertical.className = 'vis-panel vis-background vis-vertical';
this.dom.backgroundHorizontal.className = 'vis-panel vis-background vis-horizontal';
this.dom.centerContainer.className = 'vis-panel vis-center';
this.dom.leftContainer.className = 'vis-panel vis-left';
this.dom.rightContainer.className = 'vis-panel vis-right';
this.dom.top.className = 'vis-panel vis-top';
this.dom.bottom.className = 'vis-panel vis-bottom';
this.dom.left.className = 'vis-content';
this.dom.center.className = 'vis-content';
this.dom.right.className = 'vis-content';
this.dom.shadowTop.className = 'vis-shadow vis-top';
this.dom.shadowBottom.className = 'vis-shadow vis-bottom';
this.dom.shadowTopLeft.className = 'vis-shadow vis-top';
this.dom.shadowBottomLeft.className = 'vis-shadow vis-bottom';
this.dom.shadowTopRight.className = 'vis-shadow vis-top';
this.dom.shadowBottomRight.className = 'vis-shadow vis-bottom';
this.dom.root.appendChild(this.dom.background); this.dom.root.appendChild(this.dom.background);
this.dom.root.appendChild(this.dom.backgroundVertical); this.dom.root.appendChild(this.dom.backgroundVertical);
@ -587,12 +587,12 @@ Core.prototype._redraw = function() {
// update class names // update class names
if (options.orientation == 'top') { if (options.orientation == 'top') {
util.addClassName(dom.root, 'top');
util.removeClassName(dom.root, 'bottom');
util.addClassName(dom.root, 'vis-top');
util.removeClassName(dom.root, 'vis-bottom');
} }
else { else {
util.removeClassName(dom.root, 'top');
util.addClassName(dom.root, 'bottom');
util.removeClassName(dom.root, 'vis-top');
util.addClassName(dom.root, 'vis-bottom');
} }
// update root width and height options // update root width and height options

+ 1
- 1
lib/timeline/component/CurrentTime.js View File

@ -37,7 +37,7 @@ CurrentTime.prototype = new Component();
*/ */
CurrentTime.prototype._create = function() { CurrentTime.prototype._create = function() {
var bar = document.createElement('div'); var bar = document.createElement('div');
bar.className = 'currenttime';
bar.className = 'vis-current-time';
bar.style.position = 'absolute'; bar.style.position = 'absolute';
bar.style.top = '0px'; bar.style.top = '0px';
bar.style.height = '100%'; bar.style.height = '100%';

+ 1
- 1
lib/timeline/component/CustomTime.js View File

@ -64,7 +64,7 @@ CustomTime.prototype.setOptions = function(options) {
*/ */
CustomTime.prototype._create = function() { CustomTime.prototype._create = function() {
var bar = document.createElement('div'); var bar = document.createElement('div');
bar.className = 'customtime';
bar.className = 'vis-custom-time';
bar.style.position = 'absolute'; bar.style.position = 'absolute';
bar.style.top = '0px'; bar.style.top = '0px';
bar.style.height = '100%'; bar.style.height = '100%';

+ 9
- 9
lib/timeline/component/DataAxis.js View File

@ -285,7 +285,7 @@ DataAxis.prototype.redraw = function () {
var frame = this.dom.frame; var frame = this.dom.frame;
// update classname // update classname
frame.className = 'dataaxis';
frame.className = 'vis-data-axis';
// calculate character width and height // calculate character width and height
this._calculateCharSize(); this._calculateCharSize();
@ -416,18 +416,18 @@ DataAxis.prototype._redrawLabels = function () {
var isMajor = step.isMajor(); var isMajor = step.isMajor();
if (this.options['showMinorLabels'] && isMajor == false || this.master == false && this.options['showMinorLabels'] == true) { if (this.options['showMinorLabels'] && isMajor == false || this.master == false && this.options['showMinorLabels'] == true) {
this._redrawLabel(y - 2, step.getCurrent(decimals), orientation, 'yAxis minor', this.props.minorCharHeight);
this._redrawLabel(y - 2, step.getCurrent(decimals), orientation, 'vis-y-axis vis-minor', this.props.minorCharHeight);
} }
if (isMajor && this.options['showMajorLabels'] && this.master == true || if (isMajor && this.options['showMajorLabels'] && this.master == true ||
this.options['showMinorLabels'] == false && this.master == false && isMajor == true) { this.options['showMinorLabels'] == false && this.master == false && isMajor == true) {
if (y >= 0) { if (y >= 0) {
this._redrawLabel(y - 2, step.getCurrent(decimals), orientation, 'yAxis major', this.props.majorCharHeight);
this._redrawLabel(y - 2, step.getCurrent(decimals), orientation, 'vis-y-axis vis-major', this.props.majorCharHeight);
} }
this._redrawLine(y, orientation, 'grid horizontal major', this.options.majorLinesOffset, this.props.majorLineWidth);
this._redrawLine(y, orientation, 'vis-grid vis-horizontal vis-major', this.options.majorLinesOffset, this.props.majorLineWidth);
} }
else { else {
this._redrawLine(y, orientation, 'grid horizontal minor', this.options.minorLinesOffset, this.props.minorLineWidth);
this._redrawLine(y, orientation, 'vis-grid vis-horizontal vis-minor', this.options.minorLinesOffset, this.props.minorLineWidth);
} }
if (this.master == true && step.current == 0) { if (this.master == true && step.current == 0) {
@ -554,7 +554,7 @@ DataAxis.prototype._redrawTitle = function (orientation) {
// Check if the title is defined for this axes // Check if the title is defined for this axes
if (this.options.title[orientation] !== undefined && this.options.title[orientation].text !== undefined) { if (this.options.title[orientation] !== undefined && this.options.title[orientation].text !== undefined) {
var title = DOMutil.getDOMElement('div', this.DOMelements.title, this.dom.frame); var title = DOMutil.getDOMElement('div', this.DOMelements.title, this.dom.frame);
title.className = 'yAxis title ' + orientation;
title.className = 'vis-y-axis vis-title vis-' + orientation;
title.innerHTML = this.options.title[orientation].text; title.innerHTML = this.options.title[orientation].text;
// Add style - if provided // Add style - if provided
@ -589,7 +589,7 @@ DataAxis.prototype._calculateCharSize = function () {
if (!('minorCharHeight' in this.props)) { if (!('minorCharHeight' in this.props)) {
var textMinor = document.createTextNode('0'); var textMinor = document.createTextNode('0');
var measureCharMinor = document.createElement('div'); var measureCharMinor = document.createElement('div');
measureCharMinor.className = 'yAxis minor measure';
measureCharMinor.className = 'vis-y-axis vis-minor vis-measure';
measureCharMinor.appendChild(textMinor); measureCharMinor.appendChild(textMinor);
this.dom.frame.appendChild(measureCharMinor); this.dom.frame.appendChild(measureCharMinor);
@ -602,7 +602,7 @@ DataAxis.prototype._calculateCharSize = function () {
if (!('majorCharHeight' in this.props)) { if (!('majorCharHeight' in this.props)) {
var textMajor = document.createTextNode('0'); var textMajor = document.createTextNode('0');
var measureCharMajor = document.createElement('div'); var measureCharMajor = document.createElement('div');
measureCharMajor.className = 'yAxis major measure';
measureCharMajor.className = 'vis-y-axis vis-major vis-measure';
measureCharMajor.appendChild(textMajor); measureCharMajor.appendChild(textMajor);
this.dom.frame.appendChild(measureCharMajor); this.dom.frame.appendChild(measureCharMajor);
@ -615,7 +615,7 @@ DataAxis.prototype._calculateCharSize = function () {
if (!('titleCharHeight' in this.props)) { if (!('titleCharHeight' in this.props)) {
var textTitle = document.createTextNode('0'); var textTitle = document.createTextNode('0');
var measureCharTitle = document.createElement('div'); var measureCharTitle = document.createElement('div');
measureCharTitle.className = 'yAxis title measure';
measureCharTitle.className = 'vis-y-axis vis-title vis-measure';
measureCharTitle.appendChild(textTitle); measureCharTitle.appendChild(textTitle);
this.dom.frame.appendChild(measureCharTitle); this.dom.frame.appendChild(measureCharTitle);

+ 6
- 6
lib/timeline/component/GraphGroup.js View File

@ -106,7 +106,7 @@ GraphGroup.prototype.setOptions = function(options) {
GraphGroup.prototype.update = function(group) { GraphGroup.prototype.update = function(group) {
this.group = group; this.group = group;
this.content = group.content || 'graph'; this.content = group.content || 'graph';
this.className = group.className || this.className || "graphGroup" + this.groupsUsingDefaultStyles[0] % 10;
this.className = group.className || this.className || 'vis-graph-group' + this.groupsUsingDefaultStyles[0] % 10;
this.visible = group.visible === undefined ? true : group.visible; this.visible = group.visible === undefined ? true : group.visible;
this.style = group.style; this.style = group.style;
this.setOptions(group.options); this.setOptions(group.options);
@ -132,13 +132,13 @@ GraphGroup.prototype.drawIcon = function(x, y, JSONcontainer, SVGcontainer, icon
outline.setAttributeNS(null, "y", y - fillHeight); outline.setAttributeNS(null, "y", y - fillHeight);
outline.setAttributeNS(null, "width", iconWidth); outline.setAttributeNS(null, "width", iconWidth);
outline.setAttributeNS(null, "height", 2*fillHeight); outline.setAttributeNS(null, "height", 2*fillHeight);
outline.setAttributeNS(null, "class", "outline");
outline.setAttributeNS(null, "class", "vis-outline");
if (this.options.style == 'line') { if (this.options.style == 'line') {
path = DOMutil.getSVGElement("path", JSONcontainer, SVGcontainer); path = DOMutil.getSVGElement("path", JSONcontainer, SVGcontainer);
path.setAttributeNS(null, "class", this.className); path.setAttributeNS(null, "class", this.className);
if(this.style !== undefined) { if(this.style !== undefined) {
path.setAttributeNS(null, "style", this.style);
path.setAttributeNS(null, "style", 'vis-' + this.style);
} }
path.setAttributeNS(null, "d", "M" + x + ","+y+" L" + (x + iconWidth) + ","+y+""); path.setAttributeNS(null, "d", "M" + x + ","+y+" L" + (x + iconWidth) + ","+y+"");
@ -154,7 +154,7 @@ GraphGroup.prototype.drawIcon = function(x, y, JSONcontainer, SVGcontainer, icon
"L"+ (x + iconWidth) + "," + (y + fillHeight) + "L"+ (x + iconWidth) + "," + (y + fillHeight) +
"L"+ (x + iconWidth) + ","+y); "L"+ (x + iconWidth) + ","+y);
} }
fillPath.setAttributeNS(null, "class", this.className + " iconFill");
fillPath.setAttributeNS(null, "class", this.className + " vis-icon-fill");
} }
if (this.options.drawPoints.enabled == true) { if (this.options.drawPoints.enabled == true) {
@ -168,8 +168,8 @@ GraphGroup.prototype.drawIcon = function(x, y, JSONcontainer, SVGcontainer, icon
var offset = Math.round((iconWidth - (2 * barWidth))/3); var offset = Math.round((iconWidth - (2 * barWidth))/3);
DOMutil.drawBar(x + 0.5*barWidth + offset , y + fillHeight - bar1Height - 1, barWidth, bar1Height, this.className + ' bar', JSONcontainer, SVGcontainer);
DOMutil.drawBar(x + 1.5*barWidth + offset + 2, y + fillHeight - bar2Height - 1, barWidth, bar2Height, this.className + ' bar', JSONcontainer, SVGcontainer);
DOMutil.drawBar(x + 0.5*barWidth + offset , y + fillHeight - bar1Height - 1, barWidth, bar1Height, this.className + ' vis-bar', JSONcontainer, SVGcontainer);
DOMutil.drawBar(x + 1.5*barWidth + offset + 2, y + fillHeight - bar2Height - 1, barWidth, bar2Height, this.className + ' vis-bar', JSONcontainer, SVGcontainer);
} }
}; };

+ 10
- 10
lib/timeline/component/Group.js View File

@ -47,30 +47,30 @@ function Group (groupId, data, itemSet) {
*/ */
Group.prototype._create = function() { Group.prototype._create = function() {
var label = document.createElement('div'); var label = document.createElement('div');
label.className = 'vlabel';
label.className = 'vis-label';
this.dom.label = label; this.dom.label = label;
var inner = document.createElement('div'); var inner = document.createElement('div');
inner.className = 'inner';
inner.className = 'vis-inner';
label.appendChild(inner); label.appendChild(inner);
this.dom.inner = inner; this.dom.inner = inner;
var foreground = document.createElement('div'); var foreground = document.createElement('div');
foreground.className = 'group';
foreground.className = 'vis-group';
foreground['timeline-group'] = this; foreground['timeline-group'] = this;
this.dom.foreground = foreground; this.dom.foreground = foreground;
this.dom.background = document.createElement('div'); this.dom.background = document.createElement('div');
this.dom.background.className = 'group';
this.dom.background.className = 'vis-group';
this.dom.axis = document.createElement('div'); this.dom.axis = document.createElement('div');
this.dom.axis.className = 'group';
this.dom.axis.className = 'vis-group';
// create a hidden marker to detect when the Timelines container is attached // create a hidden marker to detect when the Timelines container is attached
// to the DOM, or the style of a parent of the Timeline is changed from // to the DOM, or the style of a parent of the Timeline is changed from
// display:none is changed to visible. // display:none is changed to visible.
this.dom.marker = document.createElement('div'); this.dom.marker = document.createElement('div');
this.dom.marker.style.visibility = 'hidden'; // TODO: ask jos why this is not none?
this.dom.marker.style.visibility = 'hidden';
this.dom.marker.innerHTML = '?'; this.dom.marker.innerHTML = '?';
this.dom.background.appendChild(this.dom.marker); this.dom.background.appendChild(this.dom.marker);
}; };
@ -96,10 +96,10 @@ Group.prototype.setData = function(data) {
this.dom.label.title = data && data.title || ''; this.dom.label.title = data && data.title || '';
if (!this.dom.inner.firstChild) { if (!this.dom.inner.firstChild) {
util.addClassName(this.dom.inner, 'hidden');
util.addClassName(this.dom.inner, 'vis-hidden');
} }
else { else {
util.removeClassName(this.dom.inner, 'hidden');
util.removeClassName(this.dom.inner, 'vis-hidden');
} }
// update className // update className
@ -120,11 +120,11 @@ Group.prototype.setData = function(data) {
// update style // update style
if (this.style) { if (this.style) {
util.removeCssText(this.dom.label, this.style);
util.removeCssText(this.dom.label, 'vis-' + this.style);
this.style = null; this.style = null;
} }
if (data && data.style) { if (data && data.style) {
util.addCssText(this.dom.label, data.style);
util.addCssText(this.dom.label, 'vis-' + data.style);
this.style = data.style; this.style = data.style;
} }
}; };

+ 7
- 7
lib/timeline/component/ItemSet.js View File

@ -146,30 +146,30 @@ ItemSet.types = {
*/ */
ItemSet.prototype._create = function(){ ItemSet.prototype._create = function(){
var frame = document.createElement('div'); var frame = document.createElement('div');
frame.className = 'itemset';
frame.className = 'vis-itemset';
frame['timeline-itemset'] = this; frame['timeline-itemset'] = this;
this.dom.frame = frame; this.dom.frame = frame;
// create background panel // create background panel
var background = document.createElement('div'); var background = document.createElement('div');
background.className = 'background';
background.className = 'vis-background';
frame.appendChild(background); frame.appendChild(background);
this.dom.background = background; this.dom.background = background;
// create foreground panel // create foreground panel
var foreground = document.createElement('div'); var foreground = document.createElement('div');
foreground.className = 'foreground';
foreground.className = 'vis-foreground';
frame.appendChild(foreground); frame.appendChild(foreground);
this.dom.foreground = foreground; this.dom.foreground = foreground;
// create axis panel // create axis panel
var axis = document.createElement('div'); var axis = document.createElement('div');
axis.className = 'axis';
axis.className = 'vis-axis';
this.dom.axis = axis; this.dom.axis = axis;
// create labelset // create labelset
var labelSet = document.createElement('div'); var labelSet = document.createElement('div');
labelSet.className = 'labelset';
labelSet.className = 'vis-labelset';
this.dom.labelSet = labelSet; this.dom.labelSet = labelSet;
// create ungrouped Group // create ungrouped Group
@ -504,7 +504,7 @@ ItemSet.prototype.redraw = function() {
this.props.left = this.body.domProps.left.width + this.body.domProps.border.left; this.props.left = this.body.domProps.left.width + this.body.domProps.border.left;
// update class name // update class name
frame.className = 'itemset' + (editable ? ' editable' : '');
frame.className = 'vis-itemset' + (editable ? ' vis-editable' : '');
// reorder the groups (if needed) // reorder the groups (if needed)
resized = this._orderGroups() || resized; resized = this._orderGroups() || resized;
@ -829,7 +829,7 @@ ItemSet.prototype._onUpdate = function(ids) {
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
throw new TypeError('Item type "rangeoverflow" is deprecated. Use css styling instead: ' + throw new TypeError('Item type "rangeoverflow" is deprecated. Use css styling instead: ' +
'.vis.timeline .item.range .content {overflow: visible;}');
'.vis-item.vis-range .vis-item-content {overflow: visible;}');
} }
else { else {
throw new TypeError('Unknown item type "' + type + '"'); throw new TypeError('Unknown item type "' + type + '"');

+ 2
- 2
lib/timeline/component/Legend.js View File

@ -62,13 +62,13 @@ Legend.prototype.removeGroup = function(label) {
Legend.prototype._create = function() { Legend.prototype._create = function() {
this.dom.frame = document.createElement('div'); this.dom.frame = document.createElement('div');
this.dom.frame.className = 'legend';
this.dom.frame.className = 'vis-legend';
this.dom.frame.style.position = "absolute"; this.dom.frame.style.position = "absolute";
this.dom.frame.style.top = "10px"; this.dom.frame.style.top = "10px";
this.dom.frame.style.display = "block"; this.dom.frame.style.display = "block";
this.dom.textArea = document.createElement('div'); this.dom.textArea = document.createElement('div');
this.dom.textArea.className = 'legendText';
this.dom.textArea.className = 'vis-legend-text';
this.dom.textArea.style.position = "relative"; this.dom.textArea.style.position = "relative";
this.dom.textArea.style.top = "0px"; this.dom.textArea.style.top = "0px";

+ 1
- 1
lib/timeline/component/LineGraph.js View File

@ -160,7 +160,7 @@ LineGraph.prototype = new Component();
*/ */
LineGraph.prototype._create = function(){ LineGraph.prototype._create = function(){
var frame = document.createElement('div'); var frame = document.createElement('div');
frame.className = 'LineGraph';
frame.className = 'vis-line-graph';
this.dom.frame = frame; this.dom.frame = frame;
// create svg element for graph drawing. // create svg element for graph drawing.

+ 8
- 8
lib/timeline/component/TimeAxis.js View File

@ -94,8 +94,8 @@ TimeAxis.prototype._create = function() {
this.dom.foreground = document.createElement('div'); this.dom.foreground = document.createElement('div');
this.dom.background = document.createElement('div'); this.dom.background = document.createElement('div');
this.dom.foreground.className = 'timeaxis foreground';
this.dom.background.className = 'timeaxis background';
this.dom.foreground.className = 'vis-time-axis vis-foreground';
this.dom.background.className = 'vis-time-axis vis-background';
}; };
/** /**
@ -300,7 +300,7 @@ TimeAxis.prototype._repaintMinorText = function (x, text, orientation, className
label.style.top = (orientation == 'top') ? (this.props.majorLabelHeight + 'px') : '0'; label.style.top = (orientation == 'top') ? (this.props.majorLabelHeight + 'px') : '0';
label.style.left = x + 'px'; label.style.left = x + 'px';
label.className = 'text minor ' + className;
label.className = 'vis-text vis-minor ' + className;
//label.title = title; // TODO: this is a heavy operation //label.title = title; // TODO: this is a heavy operation
}; };
@ -326,7 +326,7 @@ TimeAxis.prototype._repaintMajorText = function (x, text, orientation, className
this.dom.majorTexts.push(label); this.dom.majorTexts.push(label);
label.childNodes[0].nodeValue = text; label.childNodes[0].nodeValue = text;
label.className = 'text major ' + className;
label.className = 'vis-text vis-major ' + className;
//label.title = title; // TODO: this is a heavy operation //label.title = title; // TODO: this is a heavy operation
label.style.top = (orientation == 'top') ? '0' : (this.props.minorLabelHeight + 'px'); label.style.top = (orientation == 'top') ? '0' : (this.props.minorLabelHeight + 'px');
@ -361,7 +361,7 @@ TimeAxis.prototype._repaintMinorLine = function (x, orientation, className) {
line.style.height = props.minorLineHeight + 'px'; line.style.height = props.minorLineHeight + 'px';
line.style.left = (x - props.minorLineWidth / 2) + 'px'; line.style.left = (x - props.minorLineWidth / 2) + 'px';
line.className = 'grid vertical minor ' + className;
line.className = 'vis-grid vis-vertical vis-minor ' + className;
return line; return line;
}; };
@ -394,7 +394,7 @@ TimeAxis.prototype._repaintMajorLine = function (x, orientation, className) {
line.style.left = (x - props.majorLineWidth / 2) + 'px'; line.style.left = (x - props.majorLineWidth / 2) + 'px';
line.style.height = props.majorLineHeight + 'px'; line.style.height = props.majorLineHeight + 'px';
line.className = 'grid vertical major ' + className;
line.className = 'vis-grid vis-vertical vis-major ' + className;
return line; return line;
}; };
@ -411,7 +411,7 @@ TimeAxis.prototype._calculateCharSize = function () {
// determine the char width and height on the minor axis // determine the char width and height on the minor axis
if (!this.dom.measureCharMinor) { if (!this.dom.measureCharMinor) {
this.dom.measureCharMinor = document.createElement('DIV'); this.dom.measureCharMinor = document.createElement('DIV');
this.dom.measureCharMinor.className = 'text minor measure';
this.dom.measureCharMinor.className = 'vis-text vis-minor vis-measure';
this.dom.measureCharMinor.style.position = 'absolute'; this.dom.measureCharMinor.style.position = 'absolute';
this.dom.measureCharMinor.appendChild(document.createTextNode('0')); this.dom.measureCharMinor.appendChild(document.createTextNode('0'));
@ -423,7 +423,7 @@ TimeAxis.prototype._calculateCharSize = function () {
// determine the char width and height on the major axis // determine the char width and height on the major axis
if (!this.dom.measureCharMajor) { if (!this.dom.measureCharMajor) {
this.dom.measureCharMajor = document.createElement('DIV'); this.dom.measureCharMajor = document.createElement('DIV');
this.dom.measureCharMajor.className = 'text major measure';
this.dom.measureCharMajor.className = 'vis-text vis-major vis-measure';
this.dom.measureCharMajor.style.position = 'absolute'; this.dom.measureCharMajor.style.position = 'absolute';
this.dom.measureCharMajor.appendChild(document.createTextNode('0')); this.dom.measureCharMajor.appendChild(document.createTextNode('0'));

+ 5
- 5
lib/timeline/component/css/animation.css View File

@ -1,18 +1,18 @@
.vis.timeline.root {
.vis-timeline {
/* /*
-webkit-transition: height .4s ease-in-out; -webkit-transition: height .4s ease-in-out;
transition: height .4s ease-in-out; transition: height .4s ease-in-out;
*/ */
} }
.vis.timeline .vispanel {
.vis-panel {
/* /*
-webkit-transition: height .4s ease-in-out, top .4s ease-in-out; -webkit-transition: height .4s ease-in-out, top .4s ease-in-out;
transition: height .4s ease-in-out, top .4s ease-in-out; transition: height .4s ease-in-out, top .4s ease-in-out;
*/ */
} }
.vis.timeline .axis {
.vis-axis {
/* /*
-webkit-transition: top .4s ease-in-out; -webkit-transition: top .4s ease-in-out;
transition: top .4s ease-in-out; transition: top .4s ease-in-out;
@ -21,12 +21,12 @@
/* TODO: get animation working nicely /* TODO: get animation working nicely
.vis.timeline .item {
.vis-item {
-webkit-transition: top .4s ease-in-out; -webkit-transition: top .4s ease-in-out;
transition: top .4s ease-in-out; transition: top .4s ease-in-out;
} }
.vis.timeline .item.line {
.vis-item.line {
-webkit-transition: height .4s ease-in-out, top .4s ease-in-out; -webkit-transition: height .4s ease-in-out, top .4s ease-in-out;
transition: height .4s ease-in-out, top .4s ease-in-out; transition: height .4s ease-in-out, top .4s ease-in-out;
} }

+ 1
- 1
lib/timeline/component/css/currenttime.css View File

@ -1,4 +1,4 @@
.vis.timeline .currenttime {
.vis-current-time {
background-color: #FF7F6E; background-color: #FF7F6E;
width: 2px; width: 2px;
z-index: 1; z-index: 1;

+ 1
- 1
lib/timeline/component/css/customtime.css View File

@ -1,4 +1,4 @@
.vis.timeline .customtime {
.vis-custom-time {
background-color: #6E94FF; background-color: #6E94FF;
width: 2px; width: 2px;
cursor: move; cursor: move;

+ 75
- 77
lib/timeline/component/css/dataaxis.css View File

@ -1,105 +1,103 @@
.vis.timeline .vispanel.background.horizontal .grid.horizontal {
position: absolute;
width: 100%;
height: 0;
border-bottom: 1px solid;
.vis-panel.vis-background.vis-horizontal .vis-grid.vis-horizontal {
position: absolute;
width: 100%;
height: 0;
border-bottom: 1px solid;
} }
.vis.timeline .vispanel.background.horizontal .grid.minor {
border-color: #e5e5e5;
.vis-panel.vis-background.vis-horizontal .vis-grid.vis-minor {
border-color: #e5e5e5;
} }
.vis.timeline .vispanel.background.horizontal .grid.major {
border-color: #bfbfbf;
.vis-panel.vis-background.vis-horizontal .vis-grid.vis-major {
border-color: #bfbfbf;
} }
.vis.timeline .dataaxis .yAxis.major {
width: 100%;
position: absolute;
color: #4d4d4d;
white-space: nowrap;
.vis-data-axis .vis-y-axis.vis-major {
width: 100%;
position: absolute;
color: #4d4d4d;
white-space: nowrap;
} }
.vis.timeline .dataaxis .yAxis.major.measure{
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
border: 0px;
visibility: hidden;
width: auto;
.vis-data-axis .vis-y-axis.vis-major.vis-measure {
padding: 0;
margin: 0;
border: 0;
visibility: hidden;
width: auto;
} }
.vis.timeline .dataaxis .yAxis.minor{
position: absolute;
width: 100%;
color: #bebebe;
white-space: nowrap;
.vis-data-axis .vis-y-axis.vis-minor {
position: absolute;
width: 100%;
color: #bebebe;
white-space: nowrap;
} }
.vis.timeline .dataaxis .yAxis.minor.measure{
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
border: 0px;
visibility: hidden;
width: auto;
.vis-data-axis .vis-y-axis.vis-minor.vis-measure {
padding: 0;
margin: 0;
border: 0;
visibility: hidden;
width: auto;
} }
.vis.timeline .dataaxis .yAxis.title{
position: absolute;
color: #4d4d4d;
white-space: nowrap;
bottom: 20px;
text-align: center;
.vis-data-axis .vis-y-axis.vis-title {
position: absolute;
color: #4d4d4d;
white-space: nowrap;
bottom: 20px;
text-align: center;
} }
.vis.timeline .dataaxis .yAxis.title.measure{
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
visibility: hidden;
width: auto;
.vis-data-axis .vis-y-axis.vis-title.vis-measure {
padding: 0;
margin: 0;
visibility: hidden;
width: auto;
} }
.vis.timeline .dataaxis .yAxis.title.left {
bottom: 0px;
-webkit-transform-origin: left top;
-moz-transform-origin: left top;
-ms-transform-origin: left top;
-o-transform-origin: left top;
transform-origin: left bottom;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
.vis-data-axis .vis-y-axis.vis-title.vis-left {
bottom: 0;
-webkit-transform-origin: left top;
-moz-transform-origin: left top;
-ms-transform-origin: left top;
-o-transform-origin: left top;
transform-origin: left bottom;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
} }
.vis.timeline .dataaxis .yAxis.title.right {
bottom: 0px;
-webkit-transform-origin: right bottom;
-moz-transform-origin: right bottom;
-ms-transform-origin: right bottom;
-o-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
.vis-data-axis .vis-y-axis.vis-title.vis-right {
bottom: 0;
-webkit-transform-origin: right bottom;
-moz-transform-origin: right bottom;
-ms-transform-origin: right bottom;
-o-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
} }
.vis.timeline .legend {
background-color: rgba(247, 252, 255, 0.65);
padding: 5px;
border-color: #b3b3b3;
border-style:solid;
border-width: 1px;
box-shadow: 2px 2px 10px rgba(154, 154, 154, 0.55);
.vis-legend {
background-color: rgba(247, 252, 255, 0.65);
padding: 5px;
border: 1px solid #b3b3b3;
box-shadow: 2px 2px 10px rgba(154, 154, 154, 0.55);
} }
.vis.timeline .legendText {
/*font-size: 10px;*/
white-space: nowrap;
display: inline-block
.vis-legend-text {
/*font-size: 10px;*/
white-space: nowrap;
display: inline-block
} }

+ 16
- 16
lib/timeline/component/css/item.css View File

@ -1,5 +1,5 @@
.vis.timeline .item {
.vis-item {
position: absolute; position: absolute;
color: #1A1A1A; color: #1A1A1A;
border-color: #97B0F8; border-color: #97B0F8;
@ -9,7 +9,7 @@
overflow: hidden; overflow: hidden;
} }
.vis.timeline .item.selected {
.vis-item.vis-selected {
border-color: #FFC200; border-color: #FFC200;
background-color: #FFF785; background-color: #FFF785;
@ -17,25 +17,25 @@
z-index: 2; z-index: 2;
} }
.vis.timeline .editable .item.selected {
.vis-editable .vis-item.vis-selected {
cursor: move; cursor: move;
} }
.vis.timeline .item.point.selected {
.vis-item.vis-point.vis-selected {
background-color: #FFF785; background-color: #FFF785;
} }
.vis.timeline .item.box {
.vis-item.vis-box {
text-align: center; text-align: center;
border-style: solid; border-style: solid;
border-radius: 2px; border-radius: 2px;
} }
.vis.timeline .item.point {
.vis-item.vis-point {
background: none; background: none;
} }
.vis.timeline .item.dot {
.vis-item.vis-dot {
position: absolute; position: absolute;
padding: 0; padding: 0;
border-width: 4px; border-width: 4px;
@ -43,13 +43,13 @@
border-radius: 4px; border-radius: 4px;
} }
.vis.timeline .item.range {
.vis-item.vis-range {
border-style: solid; border-style: solid;
border-radius: 2px; border-radius: 2px;
box-sizing: border-box; box-sizing: border-box;
} }
.vis.timeline .item.background {
.vis-item.background {
border: none; border: none;
background-color: rgba(213, 221, 246, 0.4); background-color: rgba(213, 221, 246, 0.4);
box-sizing: border-box; box-sizing: border-box;
@ -57,20 +57,20 @@
margin: 0; margin: 0;
} }
.vis.timeline .item.range .content {
.vis-item.vis-range .vis-item-content {
position: relative; position: relative;
display: inline-block; display: inline-block;
max-width: 100%; max-width: 100%;
} }
.vis.timeline .item.background .content {
.vis-item.background .vis-item-content {
position: absolute; position: absolute;
display: inline-block; display: inline-block;
max-width: 100%; max-width: 100%;
margin: 5px; margin: 5px;
} }
.vis.timeline .item.line {
.vis-item.vis-line {
padding: 0; padding: 0;
position: absolute; position: absolute;
width: 0; width: 0;
@ -78,13 +78,13 @@
border-left-style: solid; border-left-style: solid;
} }
.vis.timeline .item .content {
.vis-item .vis-item-content {
white-space: nowrap; white-space: nowrap;
box-sizing: border-box; box-sizing: border-box;
padding: 5px; padding: 5px;
} }
.vis.timeline .item .delete {
.vis-item .vis-delete {
background: url('img/timeline/delete.png') no-repeat top center; background: url('img/timeline/delete.png') no-repeat top center;
position: absolute; position: absolute;
width: 24px; width: 24px;
@ -94,7 +94,7 @@
cursor: pointer; cursor: pointer;
} }
.vis.timeline .item.range .drag-left {
.vis-item.vis-range .vis-drag-left {
position: absolute; position: absolute;
width: 24px; width: 24px;
height: 100%; height: 100%;
@ -104,7 +104,7 @@
cursor: w-resize; cursor: w-resize;
} }
.vis.timeline .item.range .drag-right {
.vis-item.vis-range .vis-drag-right {
position: absolute; position: absolute;
width: 24px; width: 24px;
height: 100%; height: 100%;

+ 6
- 6
lib/timeline/component/css/itemset.css View File

@ -1,5 +1,5 @@
.vis.timeline .itemset {
.vis-itemset {
position: relative; position: relative;
padding: 0; padding: 0;
margin: 0; margin: 0;
@ -7,15 +7,15 @@
box-sizing: border-box; box-sizing: border-box;
} }
.vis.timeline .itemset .background,
.vis.timeline .itemset .foreground {
.vis-itemset .vis-background,
.vis-itemset .vis-foreground {
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: visible; overflow: visible;
} }
.vis.timeline .axis {
.vis-axis {
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 0; height: 0;
@ -23,12 +23,12 @@
z-index: 1; z-index: 1;
} }
.vis.timeline .foreground .group {
.vis-foreground .vis-group {
position: relative; position: relative;
box-sizing: border-box; box-sizing: border-box;
border-bottom: 1px solid #bfbfbf; border-bottom: 1px solid #bfbfbf;
} }
.vis.timeline .foreground .group:last-child {
.vis-foreground .vis-group:last-child {
border-bottom: none; border-bottom: none;
} }

+ 6
- 6
lib/timeline/component/css/labelset.css View File

@ -1,5 +1,5 @@
.vis.timeline .labelset {
.vis-labelset {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
@ -7,7 +7,7 @@
box-sizing: border-box; box-sizing: border-box;
} }
.vis.timeline .labelset .vlabel {
.vis-labelset .vis-label {
position: relative; position: relative;
left: 0; left: 0;
top: 0; top: 0;
@ -17,19 +17,19 @@
box-sizing: border-box; box-sizing: border-box;
} }
.vis.timeline .labelset .vlabel {
.vis-labelset .vis-label {
border-bottom: 1px solid #bfbfbf; border-bottom: 1px solid #bfbfbf;
} }
.vis.timeline .labelset .vlabel:last-child {
.vis-labelset .vis-label:last-child {
border-bottom: none; border-bottom: none;
} }
.vis.timeline .labelset .vlabel .inner {
.vis-labelset .vis-label .vis-inner {
display: inline-block; display: inline-block;
padding: 5px; padding: 5px;
} }
.vis.timeline .labelset .vlabel .inner.hidden {
.vis-labelset .vis-label .vis-inner.vis-hidden {
padding: 0; padding: 0;
} }

+ 18
- 29
lib/timeline/component/css/panel.css View File

@ -1,16 +1,5 @@
.vis.timeline.root {
position: relative;
border: 1px solid #bfbfbf;
overflow: hidden;
padding: 0;
margin: 0;
box-sizing: border-box;
}
.vis.timeline .vispanel {
.vis-panel {
position: absolute; position: absolute;
padding: 0; padding: 0;
@ -19,53 +8,53 @@
box-sizing: border-box; box-sizing: border-box;
} }
.vis.timeline .vispanel.center,
.vis.timeline .vispanel.left,
.vis.timeline .vispanel.right,
.vis.timeline .vispanel.top,
.vis.timeline .vispanel.bottom {
.vis-panel.vis-center,
.vis-panel.vis-left,
.vis-panel.vis-right,
.vis-panel.vis-top,
.vis-panel.vis-bottom {
border: 1px #bfbfbf; border: 1px #bfbfbf;
} }
.vis.timeline .vispanel.center,
.vis.timeline .vispanel.left,
.vis.timeline .vispanel.right {
.vis-panel.vis-center,
.vis-panel.vis-left,
.vis-panel.vis-right {
border-top-style: solid; border-top-style: solid;
border-bottom-style: solid; border-bottom-style: solid;
overflow: hidden; overflow: hidden;
} }
.vis.timeline .vispanel.center,
.vis.timeline .vispanel.top,
.vis.timeline .vispanel.bottom {
.vis-panel.vis-center,
.vis-panel.vis-top,
.vis-panel.vis-bottom {
border-left-style: solid; border-left-style: solid;
border-right-style: solid; border-right-style: solid;
} }
.vis.timeline .background {
.vis-background {
overflow: hidden; overflow: hidden;
} }
.vis.timeline .vispanel > .content {
.vis-panel > .vis-content {
position: relative; position: relative;
} }
.vis.timeline .vispanel .shadow {
.vis-panel .vis-shadow {
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 1px; height: 1px;
box-shadow: 0 0 10px rgba(0,0,0,0.8); box-shadow: 0 0 10px rgba(0,0,0,0.8);
/* TODO: find a nice way to ensure shadows are drawn on top of items
/* TODO: find a nice way to ensure vis-shadows are drawn on top of items
z-index: 1; z-index: 1;
*/ */
} }
.vis.timeline .vispanel .shadow.top {
.vis-panel .vis-shadow.vis-top {
top: -1px; top: -1px;
left: 0; left: 0;
} }
.vis.timeline .vispanel .shadow.bottom {
.vis-panel .vis-shadow.vis-bottom {
bottom: -1px; bottom: -1px;
left: 0; left: 0;
} }

+ 16
- 16
lib/timeline/component/css/pathStyles.css View File

@ -1,91 +1,91 @@
.vis.timeline .graphGroup0 {
.vis-graph-group0 {
fill:#4f81bd; fill:#4f81bd;
fill-opacity:0; fill-opacity:0;
stroke-width:2px; stroke-width:2px;
stroke: #4f81bd; stroke: #4f81bd;
} }
.vis.timeline .graphGroup1 {
.vis-graph-group1 {
fill:#f79646; fill:#f79646;
fill-opacity:0; fill-opacity:0;
stroke-width:2px; stroke-width:2px;
stroke: #f79646; stroke: #f79646;
} }
.vis.timeline .graphGroup2 {
.vis-graph-group2 {
fill: #8c51cf; fill: #8c51cf;
fill-opacity:0; fill-opacity:0;
stroke-width:2px; stroke-width:2px;
stroke: #8c51cf; stroke: #8c51cf;
} }
.vis.timeline .graphGroup3 {
.vis-graph-group3 {
fill: #75c841; fill: #75c841;
fill-opacity:0; fill-opacity:0;
stroke-width:2px; stroke-width:2px;
stroke: #75c841; stroke: #75c841;
} }
.vis.timeline .graphGroup4 {
.vis-graph-group4 {
fill: #ff0100; fill: #ff0100;
fill-opacity:0; fill-opacity:0;
stroke-width:2px; stroke-width:2px;
stroke: #ff0100; stroke: #ff0100;
} }
.vis.timeline .graphGroup5 {
.vis-graph-group5 {
fill: #37d8e6; fill: #37d8e6;
fill-opacity:0; fill-opacity:0;
stroke-width:2px; stroke-width:2px;
stroke: #37d8e6; stroke: #37d8e6;
} }
.vis.timeline .graphGroup6 {
.vis-graph-group6 {
fill: #042662; fill: #042662;
fill-opacity:0; fill-opacity:0;
stroke-width:2px; stroke-width:2px;
stroke: #042662; stroke: #042662;
} }
.vis.timeline .graphGroup7 {
.vis-graph-group7 {
fill:#00ff26; fill:#00ff26;
fill-opacity:0; fill-opacity:0;
stroke-width:2px; stroke-width:2px;
stroke: #00ff26; stroke: #00ff26;
} }
.vis.timeline .graphGroup8 {
.vis-graph-group8 {
fill:#ff00ff; fill:#ff00ff;
fill-opacity:0; fill-opacity:0;
stroke-width:2px; stroke-width:2px;
stroke: #ff00ff; stroke: #ff00ff;
} }
.vis.timeline .graphGroup9 {
.vis-graph-group9 {
fill: #8f3938; fill: #8f3938;
fill-opacity:0; fill-opacity:0;
stroke-width:2px; stroke-width:2px;
stroke: #8f3938; stroke: #8f3938;
} }
.vis.timeline .fill {
.vis-fill {
fill-opacity:0.1; fill-opacity:0.1;
stroke: none; stroke: none;
} }
.vis.timeline .bar {
.vis-bar {
fill-opacity:0.5; fill-opacity:0.5;
stroke-width:1px; stroke-width:1px;
} }
.vis.timeline .point {
.vis-point {
stroke-width:2px; stroke-width:2px;
fill-opacity:1.0; fill-opacity:1.0;
} }
.vis.timeline .legendBackground {
.vis-legend-background {
stroke-width:1px; stroke-width:1px;
fill-opacity:0.9; fill-opacity:0.9;
fill: #ffffff; fill: #ffffff;
@ -93,14 +93,14 @@
} }
.vis.timeline .outline {
.vis-outline {
stroke-width:1px; stroke-width:1px;
fill-opacity:1; fill-opacity:1;
fill: #ffffff; fill: #ffffff;
stroke: #e5e5e5; stroke: #e5e5e5;
} }
.vis.timeline .iconFill {
.vis-icon-fill {
fill-opacity:0.3; fill-opacity:0.3;
stroke: none; stroke: none;
} }

+ 8
- 8
lib/timeline/component/css/timeaxis.css View File

@ -1,15 +1,15 @@
.vis.timeline .timeaxis {
.vis-time-axis {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
} }
.vis.timeline .timeaxis.foreground {
.vis-time-axis.vis-foreground {
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
} }
.vis.timeline .timeaxis.background {
.vis-time-axis.vis-background {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
@ -17,14 +17,14 @@
height: 100%; height: 100%;
} }
.vis.timeline .timeaxis .text {
.vis-time-axis .vis-text {
position: absolute; position: absolute;
color: #4d4d4d; color: #4d4d4d;
padding: 3px; padding: 3px;
white-space: nowrap; white-space: nowrap;
} }
.vis.timeline .timeaxis .text.measure {
.vis-time-axis .vis-text.vis-measure {
position: absolute; position: absolute;
padding-left: 0; padding-left: 0;
padding-right: 0; padding-right: 0;
@ -33,15 +33,15 @@
visibility: hidden; visibility: hidden;
} }
.vis.timeline .timeaxis .grid.vertical {
.vis-time-axis .vis-grid.vis-vertical {
position: absolute; position: absolute;
border-left: 1px solid; border-left: 1px solid;
} }
.vis.timeline .timeaxis .grid.minor {
.vis-time-axis .vis-grid.vis-minor {
border-color: #e5e5e5; border-color: #e5e5e5;
} }
.vis.timeline .timeaxis .grid.major {
.vis-time-axis .vis-grid.vis-major {
border-color: #bfbfbf; border-color: #bfbfbf;
} }

+ 10
- 1
lib/timeline/component/css/timeline.css View File

@ -1,2 +1,11 @@
.vis.timeline {
.vis-timeline {
position: relative;
border: 1px solid #bfbfbf;
overflow: hidden;
padding: 0;
margin: 0;
box-sizing: border-box;
} }

+ 1
- 1
lib/timeline/component/graph2d_types/bar.js View File

@ -109,7 +109,7 @@ Bargraph.draw = function (groupIds, processedGroupData, framework) {
else if (group.options.barChart.align == 'right') {drawData.offset += 0.5*drawData.width;} else if (group.options.barChart.align == 'right') {drawData.offset += 0.5*drawData.width;}
} }
} }
DOMutil.drawBar(combinedData[i].x + drawData.offset, combinedData[i].y - heightOffset, drawData.width, group.zeroPosition - combinedData[i].y, group.className + ' bar', framework.svgElements, framework.svg);
DOMutil.drawBar(combinedData[i].x + drawData.offset, combinedData[i].y - heightOffset, drawData.width, group.zeroPosition - combinedData[i].y, group.className + ' vis-bar', framework.svgElements, framework.svg);
// draw points // draw points
if (group.options.drawPoints.enabled == true) { if (group.options.drawPoints.enabled == true) {
Points.draw([combinedData[i]], group, framework, drawData.offset); Points.draw([combinedData[i]], group, framework, drawData.offset);

+ 4
- 4
lib/timeline/component/graph2d_types/line.js View File

@ -31,7 +31,7 @@ Line.prototype.draw = function (dataset, group, framework) {
path = DOMutil.getSVGElement('path', framework.svgElements, framework.svg); path = DOMutil.getSVGElement('path', framework.svgElements, framework.svg);
path.setAttributeNS(null, "class", group.className); path.setAttributeNS(null, "class", group.className);
if(group.style !== undefined) { if(group.style !== undefined) {
path.setAttributeNS(null, "style", group.style);
path.setAttributeNS(null, "style", 'vis-' + group.style);
} }
// construct path from dataset // construct path from dataset
@ -52,11 +52,11 @@ Line.prototype.draw = function (dataset, group, framework) {
else { else {
dFill = 'M' + dataset[0].x + ',' + svgHeight + ' ' + d + 'L' + dataset[dataset.length - 1].x + ',' + svgHeight; dFill = 'M' + dataset[0].x + ',' + svgHeight + ' ' + d + 'L' + dataset[dataset.length - 1].x + ',' + svgHeight;
} }
fillPath.setAttributeNS(null, "class", group.className + " fill");
fillPath.setAttributeNS(null, 'class', group.className + ' vis-fill');
if(group.options.shaded.style !== undefined) { if(group.options.shaded.style !== undefined) {
fillPath.setAttributeNS(null, "style", group.options.shaded.style);
fillPath.setAttributeNS(null, 'style', group.options.shaded.style);
} }
fillPath.setAttributeNS(null, "d", dFill);
fillPath.setAttributeNS(null, 'd', dFill);
} }
// copy properties to path for drawing. // copy properties to path for drawing.
path.setAttributeNS(null, 'd', 'M' + d); path.setAttributeNS(null, 'd', 'M' + d);

+ 3
- 3
lib/timeline/component/item/BackgroundItem.js View File

@ -39,7 +39,7 @@ function BackgroundItem (data, conversion, options) {
BackgroundItem.prototype = new Item (null, null, null); BackgroundItem.prototype = new Item (null, null, null);
BackgroundItem.prototype.baseClassName = 'item background';
BackgroundItem.prototype.baseClassName = 'vis-item vis-background';
BackgroundItem.prototype.stack = false; BackgroundItem.prototype.stack = false;
/** /**
@ -68,7 +68,7 @@ BackgroundItem.prototype.redraw = function() {
// contents box // contents box
dom.content = document.createElement('div'); dom.content = document.createElement('div');
dom.content.className = 'content';
dom.content.className = 'vis-item-content';
dom.box.appendChild(dom.content); dom.box.appendChild(dom.content);
// Note: we do NOT attach this item as attribute to the DOM, // Note: we do NOT attach this item as attribute to the DOM,
@ -103,7 +103,7 @@ BackgroundItem.prototype.redraw = function() {
// update class // update class
var className = (this.data.className ? (' ' + this.data.className) : '') + var className = (this.data.className ? (' ' + this.data.className) : '') +
(this.selected ? ' selected' : '');
(this.selected ? ' vis-selected' : '');
dom.box.className = this.baseClassName + className; dom.box.className = this.baseClassName + className;
// determine from css whether this box has overflow // determine from css whether this box has overflow

+ 7
- 7
lib/timeline/component/item/BoxItem.js View File

@ -62,16 +62,16 @@ BoxItem.prototype.redraw = function() {
// contents box (inside the background box). used for making margins // contents box (inside the background box). used for making margins
dom.content = document.createElement('DIV'); dom.content = document.createElement('DIV');
dom.content.className = 'content';
dom.content.className = 'vis-item-content';
dom.box.appendChild(dom.content); dom.box.appendChild(dom.content);
// line to axis // line to axis
dom.line = document.createElement('DIV'); dom.line = document.createElement('DIV');
dom.line.className = 'line';
dom.line.className = 'vis-line';
// dot on axis // dot on axis
dom.dot = document.createElement('DIV'); dom.dot = document.createElement('DIV');
dom.dot.className = 'dot';
dom.dot.className = 'vis-dot';
// attach this item as attribute // attach this item as attribute
dom.box['timeline-item'] = this; dom.box['timeline-item'] = this;
@ -112,10 +112,10 @@ BoxItem.prototype.redraw = function() {
// update class // update class
var className = (this.data.className? ' ' + this.data.className : '') + var className = (this.data.className? ' ' + this.data.className : '') +
(this.selected ? ' selected' : '');
dom.box.className = 'item box' + className;
dom.line.className = 'item line' + className;
dom.dot.className = 'item dot' + className;
(this.selected ? ' vis-selected' : '');
dom.box.className = 'vis-item vis-box' + className;
dom.line.className = 'vis-item vis-line' + className;
dom.dot.className = 'vis-item vis-dot' + className;
// recalculate size // recalculate size
this.props.dot.height = dom.dot.offsetHeight; this.props.dot.height = dom.dot.offsetHeight;

+ 2
- 2
lib/timeline/component/item/Item.js View File

@ -134,7 +134,7 @@ Item.prototype._repaintDeleteButton = function (anchor) {
var me = this; var me = this;
var deleteButton = document.createElement('div'); var deleteButton = document.createElement('div');
deleteButton.className = 'delete';
deleteButton.className = 'vis-delete';
deleteButton.title = 'Delete this item'; deleteButton.title = 'Delete this item';
// TODO: be able to destroy the delete button // TODO: be able to destroy the delete button
@ -199,7 +199,7 @@ Item.prototype._updateTitle = function (element) {
element.title = this.data.title || ''; element.title = this.data.title || '';
} }
else { else {
element.removeAttribute('title');
element.removeAttribute('vis-title');
} }
}; };

+ 5
- 5
lib/timeline/component/item/PointItem.js View File

@ -63,7 +63,7 @@ PointItem.prototype.redraw = function() {
// contents box, right from the dot // contents box, right from the dot
dom.content = document.createElement('div'); dom.content = document.createElement('div');
dom.content.className = 'content';
dom.content.className = 'vis-item-content';
dom.point.appendChild(dom.content); dom.point.appendChild(dom.content);
// dot at start // dot at start
@ -100,10 +100,10 @@ PointItem.prototype.redraw = function() {
this._updateStyle(this.dom.point); this._updateStyle(this.dom.point);
// update class // update class
var className = (this.data.className? ' ' + this.data.className : '') +
(this.selected ? ' selected' : '');
dom.point.className = 'item point' + className;
dom.dot.className = 'item dot' + className;
var className = (this.data.className ? ' ' + this.data.className : '') +
(this.selected ? ' vis-selected' : '');
dom.point.className = 'vis-item vis-point' + className;
dom.dot.className = 'vis-item vis-dot' + className;
// recalculate size // recalculate size
this.width = dom.point.offsetWidth; this.width = dom.point.offsetWidth;

+ 5
- 5
lib/timeline/component/item/RangeItem.js View File

@ -34,7 +34,7 @@ function RangeItem (data, conversion, options) {
RangeItem.prototype = new Item (null, null, null); RangeItem.prototype = new Item (null, null, null);
RangeItem.prototype.baseClassName = 'item range';
RangeItem.prototype.baseClassName = 'vis-item vis-range';
/** /**
* Check whether this item is visible inside given range * Check whether this item is visible inside given range
@ -62,7 +62,7 @@ RangeItem.prototype.redraw = function() {
// contents box // contents box
dom.content = document.createElement('div'); dom.content = document.createElement('div');
dom.content.className = 'content';
dom.content.className = 'vis-item-content';
dom.box.appendChild(dom.content); dom.box.appendChild(dom.content);
// attach this item as attribute // attach this item as attribute
@ -96,7 +96,7 @@ RangeItem.prototype.redraw = function() {
// update class // update class
var className = (this.data.className ? (' ' + this.data.className) : '') + var className = (this.data.className ? (' ' + this.data.className) : '') +
(this.selected ? ' selected' : '');
(this.selected ? ' vis-selected' : '');
dom.box.className = this.baseClassName + className; dom.box.className = this.baseClassName + className;
// determine from css whether this box has overflow // determine from css whether this box has overflow
@ -246,7 +246,7 @@ RangeItem.prototype._repaintDragLeft = function () {
if (this.selected && this.options.editable.updateTime && !this.dom.dragLeft) { if (this.selected && this.options.editable.updateTime && !this.dom.dragLeft) {
// create and show drag area // create and show drag area
var dragLeft = document.createElement('div'); var dragLeft = document.createElement('div');
dragLeft.className = 'drag-left';
dragLeft.className = 'vis-drag-left';
dragLeft.dragLeftItem = this; dragLeft.dragLeftItem = this;
this.dom.box.appendChild(dragLeft); this.dom.box.appendChild(dragLeft);
@ -269,7 +269,7 @@ RangeItem.prototype._repaintDragRight = function () {
if (this.selected && this.options.editable.updateTime && !this.dom.dragRight) { if (this.selected && this.options.editable.updateTime && !this.dom.dragRight) {
// create and show drag area // create and show drag area
var dragRight = document.createElement('div'); var dragRight = document.createElement('div');
dragRight.className = 'drag-right';
dragRight.className = 'vis-drag-right';
dragRight.dragRightItem = this; dragRight.dragRightItem = this;
this.dom.box.appendChild(dragRight); this.dom.box.appendChild(dragRight);

Write Preview
Loading…
Cancel
Save