-
Notifications
You must be signed in to change notification settings - Fork 0
/
index-test.html
121 lines (102 loc) · 3.5 KB
/
index-test.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Home Dashboard</title>
<script src="./d3.js"></script>
<script src="./bullet.js"></script>
<!-- <script src="http://dimplejs.org/dist/dimple.v2.2.0.min.js"></script> -->
<style>
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
margin: auto;
padding-top: 40px;
position: relative;
width: 720px;
}
.bullet { font: 10px sans-serif; }
.bullet .marker { stroke: #000; stroke-width: 2px; }
.bullet .tick line { stroke: #666; stroke-width: .5px; }
.bullet .range.s0 { fill: #e66; }
.bullet .range.s1 { fill: #ee6; }
.bullet .range.s2 { fill: #6e6; }
.bullet .measure.s0 { fill: lightsteelblue; }
.bullet .measure.s1 { fill: steelblue; }
.bullet .title { font-size: 14px; font-weight: bold; }
.bullet .subtitle { fill: #999; }
</style>
</head>
<body>
<div id="chartContainer"></div>
<script>
var margin = {top: 5, right: 40, bottom: 20, left: 120},
width = 720 - margin.left - margin.right,
height = 50 - margin.top - margin.bottom;
var chart = d3.bullet()
.width(width)
.height(height);
d3.json("http://localhost:8080", function (err, data) {
if (err) throw err;
data = formatBulletData(data);
var svg = d3.select("body").selectAll("svg")
.data(data)
.enter().append("svg")
.attr("class", "bullet")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
.call(chart);
var title = svg.append("g")
.style("text-anchor", "end")
.attr("transform", "translate(-6," + height / 2 + ")");
title.append("text")
.attr("class", "title")
.text(function(d) { return d.title; });
title.append("text")
.attr("class", "subtitle")
.attr("dy", "1.2em")
.text(function(d) { return d.subtitle; });
});
function gbpToNumber(value) {
return Number(value.replace('£', '').replace(',', ''));
}
function formatBulletData(data) {
var formattedData = [];
data.forEach(function(item) {
if (item.fixed) {
return;
}
var spend = gbpToNumber(item.spend);
var budget = gbpToNumber(item.budget);
var midBudget = budget * 0.5;
var highBudget = budget * 0.8;
var maxBudget = budget;
var daysInMonth = 31;
var currentDay = 8;
var projectedSpend = (spend / currentDay) * daysInMonth;
var lastMonthSpend = budget * (1 + Math.random());
formattedData.push({
title: item.category,
subtitle: "GBP£",
ranges: [midBudget, highBudget, maxBudget],
measures: [spend, projectedSpend],
markers: [lastMonthSpend]
})
});
return formattedData;
}
// var svg = dimple.newSvg("#chartContainer", 590, 400);
// d3.json("http://localhost:8080", function (data) {
// console.log(data);
// var myChart = new dimple.chart(svg, data);
// myChart.setBounds(20, 20, 460, 360)
// myChart.addMeasureAxis("p", "spend");
// var ring = myChart.addSeries("category", dimple.plot.pie);
// ring.innerRadius = "50%";
// myChart.addLegend(500, 20, 90, 300, "left");
// myChart.draw();
// });
</script>
</body>
</html>