@ -1,366 +1,366 @@ | |||
<!DOCTYPE HTML> | |||
<html> | |||
<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> | |||
<h2>Graph2d | External custom legend</h2> | |||
<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> | |||
<br /> | |||
<div id="Legend" class="externalLegend"></div> | |||
<div id="Legend" class="external-legend"></div> | |||
<div id="visualization"></div> | |||
<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> | |||
</body> |
@ -1,174 +1,175 @@ | |||
div.vis-network-colorPicker-frame { | |||
position:absolute; | |||
margin-top:-140px; | |||
margin-left:30px; | |||
width:293px; | |||
height:425px; | |||
padding: 10px; | |||
border-radius:15px; | |||
background-color:#ffffff; | |||
display:none; | |||
box-shadow: rgba(0,0,0,0.5) 0px 0px 10px 0px; | |||
} | |||
div.vis-network-colorPicker-arrowDiv { | |||
position: absolute; | |||
top:147px; | |||
left:5px; | |||
} | |||
div.vis-network-colorPicker-arrowDiv:after, .vis-network-colorPicker-arrowDiv:before { | |||
right: 100%; | |||
top: 50%; | |||
border: solid transparent; | |||
content: " "; | |||
height: 0; | |||
width: 0; | |||
position: absolute; | |||
pointer-events: none; | |||
} | |||
div.vis-network-colorPicker-arrowDiv:after { | |||
border-color: rgba(255, 255, 255, 0); | |||
border-right-color: #ffffff; | |||
border-width: 30px; | |||
margin-top: -30px; | |||
div.vis-color-picker { | |||
position:absolute; | |||
margin-top:-140px; | |||
margin-left:30px; | |||
width:293px; | |||
height:425px; | |||
padding: 10px; | |||
border-radius:15px; | |||
background-color:#ffffff; | |||
display:none; | |||
box-shadow: rgba(0,0,0,0.5) 0px 0px 10px 0px; | |||
} | |||
div.vis-color-picker div.vis-arrow { | |||
position: absolute; | |||
top:147px; | |||
left:5px; | |||
} | |||
div.vis-color-picker div.vis-arrow:after, | |||
div.vis-color-picker div.vis-arrow:before { | |||
right: 100%; | |||
top: 50%; | |||
border: solid transparent; | |||
content: " "; | |||
height: 0; | |||
width: 0; | |||
position: absolute; | |||
pointer-events: none; | |||
} | |||
div.vis-color-picker div.vis-arrow:after { | |||
border-color: rgba(255, 255, 255, 0); | |||
border-right-color: #ffffff; | |||
border-width: 30px; | |||
margin-top: -30px; | |||
} | |||
div.vis-color-picker div.vis-color { | |||
position:absolute; | |||
width: 289px; | |||
height: 289px; | |||
cursor: pointer; | |||
} | |||
div.vis-color-picker div.vis-brightness { | |||
position: absolute; | |||
top:313px; | |||
} | |||
div.vis-color-picker div.vis-opacity { | |||
position:absolute; | |||
top:350px; | |||
} | |||
div.vis-color-picker div.vis-selector { | |||
position:absolute; | |||
top:137px; | |||
left:137px; | |||
width:15px; | |||
height:15px; | |||
border-radius:15px; | |||
border:1px solid #ffffff; | |||
background: #4c4c4c; /* Old browsers */ | |||
background: -moz-linear-gradient(top, #4c4c4c 0%, #595959 12%, #666666 25%, #474747 39%, #2c2c2c 50%, #000000 51%, #111111 60%, #2b2b2b 76%, #1c1c1c 91%, #131313 100%); /* FF3.6+ */ | |||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4c4c4c), color-stop(12%,#595959), color-stop(25%,#666666), color-stop(39%,#474747), color-stop(50%,#2c2c2c), color-stop(51%,#000000), color-stop(60%,#111111), color-stop(76%,#2b2b2b), color-stop(91%,#1c1c1c), color-stop(100%,#131313)); /* Chrome,Safari4+ */ | |||
background: -webkit-linear-gradient(top, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* Chrome10+,Safari5.1+ */ | |||
background: -o-linear-gradient(top, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* Opera 11.10+ */ | |||
background: -ms-linear-gradient(top, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* IE10+ */ | |||
background: linear-gradient(to bottom, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* W3C */ | |||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0 ); /* IE6-9 */ | |||
} | |||
div.vis-network-colorPicker-color { | |||
position:absolute; | |||
width: 289px; | |||
height: 289px; | |||
cursor: pointer; | |||
} | |||
div.vis-network-colorPicker-brightness { | |||
position: absolute; | |||
top:313px; | |||
} | |||
div.vis-network-colorPicker-opacity { | |||
position:absolute; | |||
top:350px; | |||
} | |||
div.vis-network-colorPicker-selector{ | |||
position:absolute; | |||
top:137px; | |||
left:137px; | |||
width:15px; | |||
height:15px; | |||
border-radius:15px; | |||
border:1px solid #ffffff; | |||
background: #4c4c4c; /* Old browsers */ | |||
background: -moz-linear-gradient(top, #4c4c4c 0%, #595959 12%, #666666 25%, #474747 39%, #2c2c2c 50%, #000000 51%, #111111 60%, #2b2b2b 76%, #1c1c1c 91%, #131313 100%); /* FF3.6+ */ | |||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4c4c4c), color-stop(12%,#595959), color-stop(25%,#666666), color-stop(39%,#474747), color-stop(50%,#2c2c2c), color-stop(51%,#000000), color-stop(60%,#111111), color-stop(76%,#2b2b2b), color-stop(91%,#1c1c1c), color-stop(100%,#131313)); /* Chrome,Safari4+ */ | |||
background: -webkit-linear-gradient(top, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* Chrome10+,Safari5.1+ */ | |||
background: -o-linear-gradient(top, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* Opera 11.10+ */ | |||
background: -ms-linear-gradient(top, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* IE10+ */ | |||
background: linear-gradient(to bottom, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* W3C */ | |||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0 ); /* IE6-9 */ | |||
} | |||
div.vis-network-colorPicker-newColor { | |||
position:absolute; | |||
width:140px; | |||
height:20px; | |||
border:1px solid rgba(0,0,0,0.1); | |||
border-radius:5px; | |||
top:380px; | |||
left:159px; | |||
text-align:right; | |||
padding-right:2px; | |||
font-size:10px; | |||
color:rgba(0,0,0,0.4); | |||
vertical-align:middle; | |||
line-height:20px; | |||
div.vis-color-picker div.vis-new-color { | |||
position:absolute; | |||
width:140px; | |||
height:20px; | |||
border:1px solid rgba(0,0,0,0.1); | |||
border-radius:5px; | |||
top:380px; | |||
left:159px; | |||
text-align:right; | |||
padding-right:2px; | |||
font-size:10px; | |||
color:rgba(0,0,0,0.4); | |||
vertical-align:middle; | |||
line-height:20px; | |||
} | |||
div.vis-network-colorPicker-initialColor { | |||
position:absolute; | |||
width:140px; | |||
height:20px; | |||
border:1px solid rgba(0,0,0,0.1); | |||
border-radius:5px; | |||
top:380px; | |||
left:10px; | |||
text-align:left; | |||
padding-left:2px; | |||
font-size:10px; | |||
color:rgba(0,0,0,0.4); | |||
vertical-align:middle; | |||
line-height:20px; | |||
div.vis-color-picker div.vis-initial-color { | |||
position:absolute; | |||
width:140px; | |||
height:20px; | |||
border:1px solid rgba(0,0,0,0.1); | |||
border-radius:5px; | |||
top:380px; | |||
left:10px; | |||
text-align:left; | |||
padding-left:2px; | |||
font-size:10px; | |||
color:rgba(0,0,0,0.4); | |||
vertical-align:middle; | |||
line-height:20px; | |||
} | |||
div.vis-network-colorPicker-label { | |||
position:absolute; | |||
width:300px; | |||
left:10px; | |||
div.vis-color-picker div.vis-label { | |||
position:absolute; | |||
width:300px; | |||
left:10px; | |||
} | |||
div.vis-network-colorPicker-label.brightness { | |||
top:300px; | |||
div.vis-color-picker div.vis-label.vis-brightness { | |||
top:300px; | |||
} | |||
div.vis-network-colorPicker-label.opacity { | |||
top:338px; | |||
div.vis-color-picker div.vis-label.vis-opacity { | |||
top:338px; | |||
} | |||
div.vis-network-colorPicker-button { | |||
position:absolute; | |||
width:68px; | |||
height:25px; | |||
border-radius:10px; | |||
vertical-align: middle; | |||
text-align:center; | |||
line-height: 25px; | |||
top:410px; | |||
border:2px solid #d9d9d9; | |||
background-color: #f7f7f7; | |||
cursor:pointer; | |||
div.vis-color-picker div.vis-button { | |||
position:absolute; | |||
width:68px; | |||
height:25px; | |||
border-radius:10px; | |||
vertical-align: middle; | |||
text-align:center; | |||
line-height: 25px; | |||
top:410px; | |||
border:2px solid #d9d9d9; | |||
background-color: #f7f7f7; | |||
cursor:pointer; | |||
} | |||
div.vis-network-colorPicker-button.cancel { | |||
/*border:2px solid #ff4e33;*/ | |||
/*background-color: #ff7761;*/ | |||
left:5px; | |||
div.vis-color-picker div.vis-button.vis-cancel { | |||
/*border:2px solid #ff4e33;*/ | |||
/*background-color: #ff7761;*/ | |||
left:5px; | |||
} | |||
div.vis-network-colorPicker-button.load { | |||
/*border:2px solid #a153e6;*/ | |||
/*background-color: #cb8dff;*/ | |||
left:82px; | |||
div.vis-color-picker div.vis-button.vis-load { | |||
/*border:2px solid #a153e6;*/ | |||
/*background-color: #cb8dff;*/ | |||
left:82px; | |||
} | |||
div.vis-network-colorPicker-button.apply { | |||
/*border:2px solid #4588e6;*/ | |||
/*background-color: #82b6ff;*/ | |||
left:159px; | |||
div.vis-color-picker div.vis-button.vis-apply { | |||
/*border:2px solid #4588e6;*/ | |||
/*background-color: #82b6ff;*/ | |||
left:159px; | |||
} | |||
div.vis-network-colorPicker-button.save { | |||
/*border:2px solid #45e655;*/ | |||
/*background-color: #6dff7c;*/ | |||
left:236px; | |||
} | |||
div.vis-color-picker div.vis-button.vis-save { | |||
/*border:2px solid #45e655;*/ | |||
/*background-color: #6dff7c;*/ | |||
left:236px; | |||
} | |||
input.vis-network-configuration.range.colorPicker{ | |||
width: 290px; | |||
height:20px; | |||
div.vis-color-picker input.vis-range { | |||
width: 290px; | |||
height:20px; | |||
} | |||
input.vis-network-brightnessRange { | |||
width: 289px !important; | |||
/* TODO: is this redundant? | |||
div.vis-color-picker input.vis-range-brightness { | |||
width: 289px !important; | |||
} | |||
input.vis-network-saturationRange { | |||
width: 289px !important; | |||
} | |||
div.vis-color-picker input.vis-saturation-range { | |||
width: 289px !important; | |||
}*/ |
@ -1,13 +1,18 @@ | |||
div.network-tooltip { | |||
div.vis-network-tooltip { | |||
position: absolute; | |||
visibility: hidden; | |||
padding: 5px; | |||
white-space: nowrap; | |||
font-family: verdana; | |||
font-size:14px; | |||
font-color:#000000; | |||
background-color: #f5f4ed; | |||
-moz-border-radius: 3px; | |||
-webkit-border-radius: 3px; | |||
border-radius: 3px; | |||
border: 1px solid; | |||
border: 1px solid #808074; | |||
box-shadow: 3px 3px 10px rgba(128, 128, 128, 0.5); | |||
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2); | |||
} |
@ -1,6 +1,3 @@ | |||
/** | |||
* Created by Alex on 3/18/2015. | |||
*/ | |||
'use strict'; | |||
import CircleImageBase from '../util/CircleImageBase' |
@ -1,6 +1,3 @@ | |||
/** | |||
* Created by Alex on 3/18/2015. | |||
*/ | |||
'use strict'; | |||
@ -1,6 +1,3 @@ | |||
/** | |||
* Created by Alex on 3/18/2015. | |||
*/ | |||
'use strict'; | |||
import ShapeBase from '../util/ShapeBase' |
@ -1,6 +1,3 @@ | |||
/** | |||
* Created by Alex on 3/18/2015. | |||
*/ | |||
'use strict'; | |||
import NodeBase from '../util/NodeBase' |
@ -1,6 +1,3 @@ | |||
/** | |||
* Created by Alex on 3/18/2015. | |||
*/ | |||
'use strict'; | |||
import CircleImageBase from '../util/CircleImageBase' |
@ -1,6 +1,3 @@ | |||
/** | |||
* Created by Alex on 3/18/2015. | |||
*/ | |||
'use strict'; | |||
import ShapeBase from '../util/ShapeBase' |
@ -1,6 +1,3 @@ | |||
/** | |||
* Created by Alex on 3/18/2015. | |||
*/ | |||
'use strict'; | |||
import ShapeBase from '../util/ShapeBase' |
@ -1,6 +1,3 @@ | |||
/** | |||
* Created by Alex on 3/18/2015. | |||
*/ | |||
'use strict'; | |||
import ShapeBase from '../util/ShapeBase' |
@ -1,4 +1,4 @@ | |||
.vis.timeline .currenttime { | |||
.vis-current-time { | |||
background-color: #FF7F6E; | |||
width: 2px; | |||
z-index: 1; |
@ -1,4 +1,4 @@ | |||
.vis.timeline .customtime { | |||
.vis-custom-time { | |||
background-color: #6E94FF; | |||
width: 2px; | |||
cursor: move; | |||
@ -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 | |||
} |
@ -1,2 +1,11 @@ | |||
.vis.timeline { | |||
.vis-timeline { | |||
position: relative; | |||
border: 1px solid #bfbfbf; | |||
overflow: hidden; | |||
padding: 0; | |||
margin: 0; | |||
box-sizing: border-box; | |||
} |