closes w3c#7 - chart titling and description are in the main moz_char…

…t thing now. Everything handled in the init step. We may need to separate the init step since it is pretty generic.
shikhar-scs · May 8, 2014 · 0e5835d · 0e5835d
1 parent d2429e7
commit 0e5835d
Show file tree

Hide file tree

Showing 4 changed files with 197 additions and 8 deletions.
diff --git a/css/style.css b/css/style.css
@@ -1,3 +1,142 @@
+
+.popover {
+  position: absolute;
+  top: 0;
+  left: 0;
+  font-size:12px;
+  z-index: 1010;
+  display: none;
+  max-width: 276px;
+  padding: 1px;
+  text-align: left;
+  white-space: normal;
+  background-color: #ffffff;
+  border: 1px solid #cccccc;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  border-radius: 6px;
+  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
+          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
+  background-clip: padding-box;
+}
+
+.popover.top {
+  margin-top: -10px;
+}
+
+.popover.right {
+  margin-left: 10px;
+}
+
+.popover.bottom {
+  margin-top: 10px;
+}
+
+.popover.left {
+  margin-left: -10px;
+}
+
+.popover-title {
+  padding: 8px 14px;
+  margin: 0;
+  font-size: 14px;
+  font-weight: normal;
+  line-height: 18px;
+  background-color: #f7f7f7;
+  border-bottom: 1px solid #ebebeb;
+  border-radius: 5px 5px 0 0;
+}
+
+.popover-content {
+  padding: 9px 14px;
+}
+
+.popover .arrow,
+.popover .arrow:after {
+  position: absolute;
+  display: block;
+  width: 0;
+  height: 0;
+  border-color: transparent;
+  border-style: solid;
+}
+
+.popover .arrow {
+  border-width: 11px;
+}
+
+.popover .arrow:after {
+  border-width: 10px;
+  content: "";
+}
+
+.popover.top .arrow {
+  bottom: -11px;
+  left: 50%;
+  margin-left: -11px;
+  border-top-color: #999999;
+  border-top-color: rgba(0, 0, 0, 0.25);
+  border-bottom-width: 0;
+}
+
+.popover.top .arrow:after {
+  bottom: 1px;
+  margin-left: -10px;
+  border-top-color: #ffffff;
+  border-bottom-width: 0;
+  content: " ";
+}
+
+.popover.right .arrow {
+  top: 50%;
+  left: -11px;
+  margin-top: -11px;
+  border-right-color: #999999;
+  border-right-color: rgba(0, 0, 0, 0.25);
+  border-left-width: 0;
+}
+
+.popover.right .arrow:after {
+  bottom: -10px;
+  left: 1px;
+  border-right-color: #ffffff;
+  border-left-width: 0;
+  content: " ";
+}
+
+.popover.bottom .arrow {
+  top: -11px;
+  left: 50%;
+  margin-left: -11px;
+  border-bottom-color: #999999;
+  border-bottom-color: rgba(0, 0, 0, 0.25);
+  border-top-width: 0;
+}
+
+.popover.bottom .arrow:after {
+  top: 1px;
+  margin-left: -10px;
+  border-bottom-color: #ffffff;
+  border-top-width: 0;
+  content: " ";
+}
+
+.popover.left .arrow {
+  top: 50%;
+  right: -11px;
+  margin-top: -11px;
+  border-left-color: #999999;
+  border-left-color: rgba(0, 0, 0, 0.25);
+  border-right-width: 0;
+}
+
+.popover.left .arrow:after {
+  right: 1px;
+  bottom: -10px;
+  border-left-color: #ffffff;
+  border-right-width: 0;
+  content: " ";
+}
+
 .area1-color {
     fill: #0000ff;
 }
@@ -74,11 +213,17 @@ circle {
     font-weight: 400;
 }
 
-h2 {
+h2.chart_title {
     font-weight: 400;
     margin-bottom: 0;
 }
 
+h2.chart_title span {
+    font-size:.5em;
+    color:darkgray;
+    font-weight:800;
+}
+
 #head {
     margin-bottom: 20px;
 }

diff --git a/index.html b/index.html
@@ -7,12 +7,13 @@
         rel='stylesheet' type='text/css'>
     <link href='http://fonts.googleapis.com/css?family=PT+Serif:400,700,400italic' 
         rel='stylesheet' type='text/css'>
-    
+
     <link href="css/style.css" rel="stylesheet" type="text/css">
 
     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
     <script src='js/underscore-min.js'></script>
     <script src='js/d3.min.js'></script>
+    <script src='js/bootstrap.min.js'></script>
     <script src='js/metrics_graphics.js'></script>
 
     <script src='js/main.js'></script>
@@ -26,6 +27,7 @@ <h1>Metrics Graphics</h1>
             </div>
 
             <div id='description'>
+
                 <p>Here is a collection, and something of a set of visual tests, of 
                 graphics we will be using. The point of this repository is to ensure 
                 that everything under js/metrics_graphics.js works properly, so we 

diff --git a/js/main.js b/js/main.js
@@ -1,9 +1,16 @@
 $(document).ready(function() {
     //sample chart 1
-    var fake_baselines = [{value:150000000, label:"first baseline"},{value:15000000, label:"second baseline"}]
     d3.json('data/fake_users1.json', function(data) {
-        $('#fake_users1').append('<h2>Unique fake users</h2>')
+        var fake_baselines = [{value:160000000, label:'a baseline'}]
+
+        // chart_title({
+
+        // });
+
+
         moz_chart({
+            title:"Fake Users",
+            description: "This is a simple line chart. You can remove the area portion by adding area: false to the arguments list.",
             data: data,
             width: 600,
             height: 250,
@@ -17,8 +24,16 @@ $(document).ready(function() {
 
     //sample chart 2
     d3.json('data/fake_users2.json', function(data) {
-        $('#fake_users2').append('<h2>Unique fake users</h2>')
+
+        // chart_title({
+        //     target:"#fake_users2", 
+        //     title:"More Fake Users",
+        //     description: "This line chart contains multiple lines. We're still working out the style details."
+        // });
+
         moz_chart({
+            title:"More Fake Users",
+            description: "This line chart contains multiple lines. We're still working out the style details.",
             data: data,
             width: 600,
             height: 250,
@@ -39,8 +54,14 @@ $(document).ready(function() {
             'label': '2nd Milestone'
         }, ]
 
-        $('#percentage').append('<h2>Some percentage</h2>')
+        // chart_title({
+        //     target:"#percentage", 
+        //     title:"Some Percentages",
+        //     description: "Here is an example with the area turned off, and using the percentage format instead."
+        // });
         moz_chart({
+            title:"Some Percentages",
+            description: "Here is an example with the area turned off, and using the percentage format instead.",
             data: data,
             width: 600,
             height: 250,

diff --git a/js/metrics_graphics.js b/js/metrics_graphics.js
@@ -57,6 +57,25 @@ function moz_chart() {
     charts.line(args).markers().mainPlot().rollover();
 }
 
+function chart_title(args){
+    var defaults = {
+        target: null,
+        title: null,
+        description: null
+    };
+    var args = arguments[0];
+    if (!args) { args = {}; }
+    args = _.defaults(args, defaults);
+    if (args.target && args.title){
+        $(args.target).append('<h2 class="chart_title">' + args.title + ' <span>(?)</span></h2>');
+        if (args.description){
+            $(args.target + ' h2.chart_title').popover({'content': args.description, 'trigger':'hover', 'placement': 'top'});        
+        }
+
+    }
+
+}
+
 function xAxis(args) {
     var svg = d3.select(args.target + ' svg');
     var g;
@@ -166,7 +185,7 @@ function yAxis(args) {
 
     min_y = args.min_y ? args.min_y : min_y;
     max_y = args.max_y ? args.max_y : max_y;
-    
+
     //todo get ymax from all lines if multiple lines, currently getting it from first line
     args.scales.Y = d3.scale.linear()
         .domain([0, max_y * args.inflator])
@@ -298,7 +317,9 @@ charts.line = function(args) {
                 return d;
             });
         }
-
+
+        chart_title(args);
+
         d3.select(args.target)
             .append('svg')
                 .attr('width', args.width)