Revision: 12754 http://trac.calendarserver.org//changeset/12754 Author: wsanchez@apple.com Date: 2014-02-25 18:23:34 -0800 (Tue, 25 Feb 2014) Log Message: ----------- SVG Modified Paths: -------------- CalendarServer/trunk/calendarserver/webadmin/work.xhtml Modified: CalendarServer/trunk/calendarserver/webadmin/work.xhtml =================================================================== --- CalendarServer/trunk/calendarserver/webadmin/work.xhtml 2014-02-26 02:23:01 UTC (rev 12753) +++ CalendarServer/trunk/calendarserver/webadmin/work.xhtml 2014-02-26 02:23:34 UTC (rev 12754) @@ -1,60 +1,67 @@ <!DOCTYPE html> -<html xmlns:t="http://twistedmatrix.com/ns/twisted.web.template/0.1" t:render="main"> +<html + xmlns:t="http://twistedmatrix.com/ns/twisted.web.template/0.1" + t:render="main" +> <head> + <title><t:slot name="title" /></title> - <!-- <link t:render="stylesheet" /> --> + <link t:render="stylesheet" /> <style> - #work_queues_chart div { - font-size: 0.5em; - font-family: sans-serif; - color: white; - background-color: steelblue; + #work_queues_chart rect { + fill: steelblue; + } - text-align: right; - padding: 0.5em; - margin: 0.2em; - } + #work_queues_chart text { + fill: white; + font: 10px sans-serif; + text-anchor: end; + } + </style> - <script src="http://d3js.org/d3.v3.min.js" charset="utf-8" /> - <script type="text/javascript"> + <script src="http://d3js.org/d3.v3.min.js"></script> + <script> function init() { - var data = [0, 0, 0, 0, 0, 0]; + var data = [4, 8, 15, 16, 23, 42]; - /* scale is a function that normalizes a value in data into the range 0-98 */ - var scale = d3.scale.linear() - .domain([0, 200]) - .range([0, 98]); + var width = 600; + var barHeight = 20; - var chart = d3.select("#work_queues_chart") - .selectAll("div") - .data(data); + var scaledWidth = + d3.scale.linear() + .domain([0, d3.max(data)]) + .range([0, width]); - var bars = chart.enter().append("div"); + var chart = + d3.select("#work_queues_chart") + .attr("width", width) + .attr("height", barHeight * data.length); - bars.style("width", function(d) { return scale(d) + "%"; }) - bars.text(function(d) { return d; }); + var bar = + chart.selectAll("g") + .data(data) + .enter().append("g") + .attr( + "transform", + function(d, i) { return "translate(0," + i * barHeight + ")"; } + ); - } + bar.append("rect") + .attr("width", scaledWidth) + .attr("height", barHeight - 1); - function update() { + bar.append("text") + .attr("x", function(d) { return scaledWidth(d) - 3; }) + .attr("y", barHeight / 2) + .attr("dy", "0.35em") + .text(function(d) { return d; }); - var data = [4, 8, 15, 16, 23, 42]; - - var chart = d3.select("#work_queues_chart") - .selectAll("div") - .data(data); - - chart.enter(); - chart.exit().remove(); - - /* http://stackoverflow.com/questions/14958825/dynamically-update-chart-data-in... */ - } window.onload = init; @@ -67,10 +74,9 @@ <h1><t:slot name="title" /></h1> - <div id="work_queues_chart" /> + <svg id="work_queues_chart" /> - <button onclick="update()">Update</button> - </body> + </html>