tgk/README.md

## README.md

      
    Raw
  

              README.md
            
          
    A simple Riemann dashboard design with functionality similar to the grid layout from Riemanns built in dashboard.

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
 background-color: #dcdcc6;
}

</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>

var colors = { live:    "#76ee00",
               dead:    "#ff3030",
               unknown: "#aaaaaa"};

var width = 960,
    height = 300;

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

var col = svg.selectAll(".col");

var update = function(data){

  col = col.data(data, function(d) { return d[0].hostname; });

  col.enter()
    .append("g")
    .attr("class", "col")
    .attr("transform",
          function(d, i) {
            return "translate(" + ((i * 50) + 5) + ",5)";
    } );

  col
    .transition()
    .duration(1000)
    .attr("transform",
          function(d, i) {
            return "translate(" + ((i * 50) + 5) + ",5)";
    } );

  col.exit()
    .remove();

  var light = col.selectAll(".light").data(function(d) { return d; });

  light.enter()
    .append("rect")
    .attr("class", "light")
    .style("fill", function(d) { return colors[d.state]; })
    .attr("transform", function(d, i) {
            return "translate(0," + (i * 100) + ")";
    } )
    .style("fill-opacity", 0)
    .attr("height", 80)
    .attr("width", 40)
    .attr("rx", 5)
    .attr("ry", 5)
    .append("title")
    .text(function(d) { return d.hostname + " - " + d.service; });

  light
    .transition()
    .duration(1000)
    .attr("class", "light")
    .style("fill", function(d) { return colors[d.state]; })
    .style("fill-opacity", 1)
    .attr("transform", function(d, i) {
            return "translate(0," + (i * 100) + ")";
    } );

  light.exit()
    .transition()
    .duration(1000)
    .style("fill-opacity", 0)
    .each("end", function() { d3.select(this).remove(); });
};

var dataA = [[{hostname: "Windsor",
               service: "daily backup dump",
               state: "live",
               title: "Description"},
              {hostname: "Windsor",
               service: "daily backup upload",
               state: "dead",
               title: "Description"},
              {hostname: "Windsor",
               service: "etl",
               state: "unknown",
               title: "Description"}],
             [{hostname: "Amsterdam",
               service: "daily backup dump",
               state: "live",
               title: "Description"},
              {hostname: "Amsterdam",
               service: "daily backup upload",
               state: "live",
               title: "Description"}]];

var dataB = [[{hostname: "Windsor",
               service: "daily backup dump",
               state: "dead",
               title: "Description"},
              {hostname: "Windsor",
               service: "etl",
               state: "unknown",
               title: "Description"}],
             [{hostname: "Amsterdam",
               service: "daily backup dump",
               state: "live",
               title: "Description"},
              {hostname: "Amsterdam",
               service: "daily backup upload",
               state: "live",
               title: "Description"}]];

var datasets = [dataA, dataB];

var clickCount = 0;

svg.on("click", function() {
  var data = datasets[clickCount++ % datasets.length];
  update(data);
});

update(dataB);

d3.select(self.frameElement).style("height", height + "px");
</script>

</body>

</html>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	body {
	background-color: #dcdcc6;
	}

	</style>
	<body>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script>

	var colors = { live: "#76ee00",
	dead: "#ff3030",
	unknown: "#aaaaaa"};

	var width = 960,
	height = 300;

	var svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height);

	var col = svg.selectAll(".col");

	var update = function(data){

	col = col.data(data, function(d) { return d[0].hostname; });

	col.enter()
	.append("g")
	.attr("class", "col")
	.attr("transform",
	function(d, i) {
	return "translate(" + ((i * 50) + 5) + ",5)";
	} );

	col
	.transition()
	.duration(1000)
	.attr("transform",
	function(d, i) {
	return "translate(" + ((i * 50) + 5) + ",5)";
	} );

	col.exit()
	.remove();

	var light = col.selectAll(".light").data(function(d) { return d; });

	light.enter()
	.append("rect")
	.attr("class", "light")
	.style("fill", function(d) { return colors[d.state]; })
	.attr("transform", function(d, i) {
	return "translate(0," + (i * 100) + ")";
	} )
	.style("fill-opacity", 0)
	.attr("height", 80)
	.attr("width", 40)
	.attr("rx", 5)
	.attr("ry", 5)
	.append("title")
	.text(function(d) { return d.hostname + " - " + d.service; });

	light
	.transition()
	.duration(1000)
	.attr("class", "light")
	.style("fill", function(d) { return colors[d.state]; })
	.style("fill-opacity", 1)
	.attr("transform", function(d, i) {
	return "translate(0," + (i * 100) + ")";
	} );

	light.exit()
	.transition()
	.duration(1000)
	.style("fill-opacity", 0)
	.each("end", function() { d3.select(this).remove(); });
	};

	var dataA = [[{hostname: "Windsor",
	service: "daily backup dump",
	state: "live",
	title: "Description"},
	{hostname: "Windsor",
	service: "daily backup upload",
	state: "dead",
	title: "Description"},
	{hostname: "Windsor",
	service: "etl",
	state: "unknown",
	title: "Description"}],
	[{hostname: "Amsterdam",
	service: "daily backup dump",
	state: "live",
	title: "Description"},
	{hostname: "Amsterdam",
	service: "daily backup upload",
	state: "live",
	title: "Description"}]];

	var dataB = [[{hostname: "Windsor",
	service: "daily backup dump",
	state: "dead",
	title: "Description"},
	{hostname: "Windsor",
	service: "etl",
	state: "unknown",
	title: "Description"}],
	[{hostname: "Amsterdam",
	service: "daily backup dump",
	state: "live",
	title: "Description"},
	{hostname: "Amsterdam",
	service: "daily backup upload",
	state: "live",
	title: "Description"}]];

	var datasets = [dataA, dataB];

	var clickCount = 0;

	svg.on("click", function() {
	var data = datasets[clickCount++ % datasets.length];
	update(data);
	});

	update(dataB);

	d3.select(self.frameElement).style("height", height + "px");
	</script>

	</body>

	</html>