[CalendarServer-changes] [12754] CalendarServer/trunk/calendarserver/webadmin/work.xhtml
source_changes at macosforge.org
source_changes at macosforge.org
Tue Feb 25 18:23:34 PST 2014
Revision: 12754
http://trac.calendarserver.org//changeset/12754
Author: wsanchez at 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-d3 */
-
}
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>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <https://lists.macosforge.org/pipermail/calendarserver-changes/attachments/20140225/80ca52e1/attachment-0001.html>
More information about the calendarserver-changes
mailing list