batsd-dash 0.3.1 → 0.5.0

data/lib/batsd-dash/params.rb

@@ -1,6 +1,10 @@
 # helpers for processing params and validating input
-module BatsdDash
+module Batsd::Dash
   module ParamsHelper
+    ##
+    # Parse params and return stats hash
+    #
+    # @return [Hash] stats hash
     def parse_statistics
       Hash.new { |hash,key| hash[key] = [] }.tap do |stats|
         %w[ counters gauges timers ].each do |datatype|
@@ -9,11 +13,15 @@ module BatsdDash
           list = [list] unless Array === list
           list.reject! { |m| m.nil? || m.empty? }
 
-					stats[datatype] = list unless list.empty?
+          stats[datatype] = list unless list.empty?
         end
       end
     end
 
+    ##
+    # Parse time range from params
+    #
+    # @return [Array] an array with 2 elements (start and stop)
     def parse_time_range
       start, stop = params[:start], params[:stop]
 

data/lib/{public → batsd-dash/public}/css/d3.css

@@ -1,6 +1,6 @@
 
 /********************
- * HTML CSS 
+ * HTML CSS
  */
 
 
@@ -10,14 +10,9 @@
   overflow: hidden;
 }
 
-.nvd3.background {
-  fill: none;
-  pointer-events: none;
-}
-
 
 /********************
- * TOOLTIP CSS 
+ * TOOLTIP CSS
  */
 
 .nvtooltip {
@@ -72,9 +67,14 @@
   margin: 2px 0;
 }
 
+.nvtooltip-pending-removal {
+  position: absolute;
+  pointer-events: none;
+}
+
 
 /********************
- * SVG CSS 
+ * SVG CSS
  */
 
 
@@ -88,24 +88,36 @@ svg {
   /* Trying to get SVG to act like a greedy block in all browsers */
   display: block;
   width:100%;
+  height:100%;
 }
 
 
 svg text {
-  font: 12px sans-serif;
-  fill:#FFF;
+  font: normal 12px sans-serif;
 }
 
 svg .title {
  font: bold 14px Arial;
 }
 
+.nvd3 .nv-background {
+  fill: none;
+  /*
+  pointer-events: none;
+  */
+}
+
+.nvd3.nv-noData {
+  font-size: 18px;
+  font-weight: bolf;
+}
+
+
 /**********
 *  Brush
 */
 
-.brush .extent {
-  stroke: #666;
+.nv-brush .extent {
   fill-opacity: .125;
   shape-rendering: crispEdges;
 }
@@ -116,11 +128,11 @@ svg .title {
 *  Legend
 */
 
-.nvd3 .legend .series {
+.nvd3 .nv-legend .nv-series {
   cursor: pointer;
 }
 
-.nvd3 .legend .disabled circle {
+.nvd3 .nv-legend .disabled circle {
   fill-opacity: 0;
 }
 
@@ -130,29 +142,29 @@ svg .title {
 *  Axes
 */
 
-.nvd3 .axis path {
+.nvd3 .nv-axis path {
   fill: none;
-  stroke: #FFF;
+  stroke: #000;
   stroke-opacity: .75;
   shape-rendering: crispEdges;
 }
 
-.nvd3 .axis path.domain {
+.nvd3 .nv-axis path.domain {
   stroke-opacity: .75;
 }
 
-.nvd3 .axis line {
+.nvd3 .nv-axis line {
   fill: none;
-  stroke: #FFF;
+  stroke: #000;
   stroke-opacity: .25;
   shape-rendering: crispEdges;
 }
 
-.nvd3 .axis line.zero {
+.nvd3 .nv-axis line.zero {
   stroke-opacity: .75;
 }
 
-.nvd3 .axis .axisMaxMin text {
+.nvd3 .nv-axis .nv-axisMaxMin text {
   font-weight: bold;
 }
 
@@ -161,7 +173,7 @@ svg .title {
 *  Brush
 */
 
-.brush .resize path {
+.nv-brush .resize path {
   fill: #eee;
   stroke: #666;
 }
@@ -172,12 +184,12 @@ svg .title {
 *  Bars
 */
 
-.nvd3 .bars .negative rect {
+.nvd3 .nv-bars .negative rect {
     zfill: brown;
     cursor: pointer;
 }
 
-.nvd3 .bars rect {
+.nvd3 .nv-bars rect {
   zfill: steelblue;
   cursor: pointer;
   fill-opacity: .75;
@@ -187,25 +199,23 @@ svg .title {
   -webkit-transition: fill-opacity 250ms linear;
 }
 
-.nvd3 .bars rect:hover {
+.nvd3 .nv-bars rect:hover {
   fill-opacity: 1;
 }
 
-.nvd3 .bars .hover rect {
+.nvd3 .nv-bars .hover rect {
   fill: lightblue;
 }
 
-.nvd3 .bars text {
-  /*fill: rgba(0,0,0,0);*/
-  fill: rgba(255,255,255,0);
+.nvd3 .nv-bars text {
+  fill: rgba(0,0,0,0);
 }
 
-.nvd3 .bars .hover text {
-  /*fill: rgba(0,0,0,1);*/
-  fill: rgba(255,255,255,1);
+.nvd3 .nv-bars .hover text {
+  fill: rgba(0,0,0,1);
 }
 
-.nvd3 .x.axis text {
+.nvd3 .nv-x.nv-axis text {
   transform: rotate(90);
 }
 
@@ -214,9 +224,9 @@ svg .title {
 *  Bars
 */
 
-.nvd3 .multibar .groups rect,
-.nvd3 .multibarHorizontal .groups rect,
-.nvd3 .discretebar .groups rect {
+.nvd3 .nv-multibar .nv-groups rect,
+.nvd3 .nv-multibarHorizontal .nv-groups rect,
+.nvd3 .nv-discretebar .nv-groups rect {
   stroke-opacity: 0;
 
   transition: fill-opacity 250ms linear;
@@ -224,14 +234,14 @@ svg .title {
   -webkit-transition: fill-opacity 250ms linear;
 }
 
-.nvd3 .multibar .groups rect:hover,
-.nvd3 .multibarHorizontal .groups rect:hover,
-.nvd3 .discretebar .groups rect:hover {
+.nvd3 .nv-multibar .nv-groups rect:hover,
+.nvd3 .nv-multibarHorizontal .nv-groups rect:hover,
+.nvd3 .nv-discretebar .nv-groups rect:hover {
   fill-opacity: 1;
 }
 
-.nvd3 .discretebar .groups text,
-.nvd3 .multibarHorizontal .groups text {
+.nvd3 .nv-discretebar .nv-groups text,
+.nvd3 .nv-multibarHorizontal .nv-groups text {
   font-weight: bold;
   fill: rgba(0,0,0,1);
   stroke: rgba(0,0,0,0);
@@ -241,7 +251,7 @@ svg .title {
 *  Pie Chart
 */
 
-.nvd3 .pie path {
+.nvd3.nv-pie path {
   stroke-opacity: 0;
 
   transition: fill-opacity 250ms linear, stroke-width 250ms linear, stroke-opacity 250ms linear;
@@ -250,18 +260,18 @@ svg .title {
 
 }
 
-.nvd3 .pie .slice text {
+.nvd3.nv-pie .nv-slice text {
   stroke: #000;
   stroke-width: 0;
 }
 
-.nvd3 .pie path {
+.nvd3.nv-pie path {
   stroke: #fff;
   stroke-width: 1px;
   stroke-opacity: 1;
 }
 
-.nvd3 .pie .hover path {
+.nvd3.nv-pie .hover path {
   fill-opacity: .7;
 /*
   stroke-width: 6px;
@@ -269,11 +279,16 @@ svg .title {
 */
 }
 
+.nvd3.nv-pie .nv-label rect {
+  fill-opacity: 0;
+  stroke-opacity: 0;
+}
+
 /**********
-* Lines 
+* Lines
 */
 
-.nvd3 .groups path.line {
+.nvd3 .nv-groups path.nv-line {
   fill: none;
   stroke-width: 2.5px;
   stroke-linecap: round;
@@ -290,7 +305,24 @@ svg .title {
   */
 }
 
-.nvd3 .line.hover path {
+.nvd3 .nv-groups path.nv-area {
+  stroke: none;
+  stroke-linecap: round;
+  shape-rendering: geometricPrecision;
+
+  /*
+  stroke-width: 2.5px;
+  transition: stroke-width 250ms linear;
+  -moz-transition: stroke-width 250ms linear;
+  -webkit-transition: stroke-width 250ms linear;
+
+  transition-delay: 250ms
+  -moz-transition-delay: 250ms;
+  -webkit-transition-delay: 250ms;
+  */
+}
+
+.nvd3 .nv-line.hover path {
   stroke-width: 6px;
 }
 
@@ -301,27 +333,32 @@ svg .title {
 }
   */
 
-.nvd3.line .nvd3.scatter .groups .point {
+.nvd3.nv-line .nvd3.nv-scatter .nv-groups .nv-point {
   fill-opacity: 0;
   stroke-opacity: 0;
 }
 
+.nvd3.nv-scatter.nv-single-point .nv-groups .nv-point {
+  fill-opacity: .5;
+  stroke-opacity: .5;
+}
+
 
-.nvd3 .groups .point {
+.nvd3 .nv-groups .nv-point {
   transition: stroke-width 250ms linear, stroke-opacity 250ms linear;
   -moz-transition: stroke-width 250ms linear, stroke-opacity 250ms linear;
   -webkit-transition: stroke-width 250ms linear, stroke-opacity 250ms linear;
 }
 
-.nvd3.scatter .groups .point.hover,
-.nvd3 .groups .point.hover {
+.nvd3.nv-scatter .nv-groups .nv-point.hover,
+.nvd3 .nv-groups .nv-point.hover {
   stroke-width: 20px;
   fill-opacity: .5 !important;
   stroke-opacity: .5 !important;
 }
 
 
-.nvd3 .point-paths path {
+.nvd3 .nv-point-paths path {
   stroke: #aaa;
   stroke-opacity: 0;
   fill: #eee;
@@ -330,36 +367,40 @@ svg .title {
 
 
 
-.nvd3 .indexLine {
+.nvd3 .nv-indexLine {
   cursor: ew-resize;
 }
 
 
 /**********
-* Distribution 
+* Distribution
 */
 
-.nvd3 .distribution {
+.nvd3 .nv-distribution {
   pointer-events: none;
 }
 
 
 
 /**********
-*  Scatter 
+*  Scatter
 */
 
-.nvd3 .groups .point.hover {
+.nvd3 .nv-groups .nv-point {
+  pointer-events: none;
+}
+
+.nvd3 .nv-groups .nv-point.hover {
   stroke-width: 20px;
   stroke-opacity: .5;
 }
 
-.nvd3 .scatter .point.hover {
+.nvd3 .nv-scatter .nv-point.hover {
   fill-opacity: 1;
 }
 
 /*
-.group.hover .point {
+.nv-group.hover .nv-point {
   fill-opacity: 1;
 }
 */
@@ -369,7 +410,7 @@ svg .title {
 *  Stacked Area
 */
 
-.nvd3 .stackedarea path.area {
+.nvd3.nv-stackedarea path.nv-area {
   fill-opacity: .7;
   /*
   stroke-opacity: .65;
@@ -389,7 +430,7 @@ svg .title {
 
 }
 
-.nvd3 .stackedarea path.area.hover {
+.nvd3.nv-stackedarea path.nv-area.hover {
   fill-opacity: .9;
   /*
   stroke-opacity: .85;
@@ -403,12 +444,12 @@ svg .title {
 
 
 
-.nvd3.stackedarea .groups .point {
+.nvd3.nv-stackedarea .nv-groups .nv-point {
   stroke-opacity: 0;
   fill-opacity: 0;
 }
 
-.nvd3.stackedarea .groups .point.hover {
+.nvd3.nv-stackedarea .nv-groups .nv-point.hover {
   stroke-width: 20px;
   stroke-opacity: .75;
   fill-opacity: 1;
@@ -420,11 +461,11 @@ svg .title {
 *  Line Plus Bar
 */
 
-.nvd3 .linePlusBar .bar rect {
+.nvd3.nv-linePlusBar .nv-bar rect {
   fill-opacity: .75;
 }
 
-.nvd3 .linePlusBar .bar rect:hover {
+.nvd3.nv-linePlusBar .nv-bar rect:hover {
   fill-opacity: 1;
 }
 
@@ -433,90 +474,148 @@ svg .title {
 *  Bullet
 */
 
-.nvd3.bullet { font: 10px sans-serif; cursor: pointer; }
-.nvd3.bullet rect { fill-opacity: .6; }
-.nvd3.bullet rect:hover { fill-opacity: 1; }
-.nvd3.bullet .marker { stroke: #000; stroke-width: 2px; }
-.nvd3.bullet .markerTriangle { stroke: #000; fill: #fff; stroke-width: 1.5px; }
-.nvd3.bullet .tick line { stroke: #666; stroke-width: .5px; }
-.nvd3.bullet .range.s0 { fill: #eee; }
-.nvd3.bullet .range.s1 { fill: #ddd; }
-.nvd3.bullet .range.s2 { fill: #ccc; }
-.nvd3.bullet .measure.s0 { fill: steelblue; }
-.nvd3.bullet .measure.s1 { fill: darkblue; }
-.nvd3.bullet .title { font-size: 14px; font-weight: bold; }
-.nvd3.bullet .subtitle { fill: #999; }
+.nvd3.nv-bullet { font: 10px sans-serif; cursor: pointer; }
+.nvd3.nv-bullet rect { fill-opacity: .6; }
+.nvd3.nv-bullet rect:hover { fill-opacity: 1; }
+.nvd3.nv-bullet .nv-marker { stroke: #000; stroke-width: 2px; }
+.nvd3.nv-bullet .nv-markerTriangle { stroke: #000; fill: #fff; stroke-width: 1.5px; }
+.nvd3.nv-bullet .nv-tick line { stroke: #666; stroke-width: .5px; }
+.nvd3.nv-bullet .nv-range.nv-s0 { fill: #eee; }
+.nvd3.nv-bullet .nv-range.nv-s1 { fill: #ddd; }
+.nvd3.nv-bullet .nv-range.nv-s2 { fill: #ccc; }
+.nvd3.nv-bullet .nv-measure.nv-s0 { fill: steelblue; }
+.nvd3.nv-bullet .nv-measure.nv-s1 { fill: darkblue; }
+.nvd3.nv-bullet .nv-title { font-size: 14px; font-weight: bold; }
+.nvd3.nv-bullet .nv-subtitle { fill: #999; }
 
 
 
 
 /**********
-* Sparkline plus 
+* Sparkline
 */
 
-.nvd3 .sparklineplus .hoverValue line {
+.nvd3.nv-sparkline path {
+  fill: none;
+}
+
+.nvd3.nv-sparklineplus g.nv-hoverValue {
+  pointer-events: none;
+}
+
+.nvd3.nv-sparklineplus .nv-hoverValue line {
   stroke: #f44;
   stroke-width: 1.5px;
  }
 
-.nvd3 .sparklineplus,
-.nvd3 .sparklineplus g {
+.nvd3.nv-sparklineplus,
+.nvd3.nv-sparklineplus g {
   pointer-events: all;
 }
 
-.nvd3 .hoverArea {
+.nvd3 .nv-hoverArea {
   fill-opacity: 0;
   stroke-opacity: 0;
 }
 
-.nvd3 .sparklineplus .xValue,
-.nvd3 .sparklineplus .yValue {
+.nvd3.nv-sparklineplus .nv-xValue,
+.nvd3.nv-sparklineplus .nv-yValue {
   stroke: #666;
   font-size: .5em;
   font-weight: normal;
 }
 
-.nvd3 .sparklineplus .yValue {
+.nvd3.nv-sparklineplus .nv-yValue {
   stroke: #f66;
 }
 
 
+/**********
+* historical stock
+*/
+
+.nvd3.nv-ohlcBar .nv-ticks .nv-tick {
+  stroke-width: 2px;
+}
+
+.nvd3.nv-ohlcBar .nv-ticks .nv-tick.hover {
+  stroke-width: 4px;
+}
+
+.nvd3.nv-ohlcBar .nv-ticks .nv-tick.positive {
+ stroke: #2ca02c;
+}
+
+.nvd3.nv-ohlcBar .nv-ticks .nv-tick.negative {
+ stroke: #d62728;
+}
+
+.nvd3.nv-historicalStockChart .nv-axis .nv-axislabel {
+  font-weight: bold;
+}
+
+.nvd3.nv-historicalStockChart .nv-dragTarget {
+  fill-opacity: 0;
+  stroke: none;
+  cursor: move;
+}
+
+.nvd3 .nv-brush .extent {
+  /*
+  cursor: ew-resize !important;
+  */
+  fill-opacity: 0 !important;
+}
+
+.nvd3 .nv-brushBackground rect {
+  stroke: #000;
+  stroke-width: .4;
+  fill: #fff;
+  fill-opacity: .7;
+}
+
+
 
 /**********
 * Indented Tree
 */
 
 
-.indentedtree .name {
+/**
+ * TODO: the following 3 selectors are based on classes used in the example.  I should either make them standard and leave them here, or move to a CSS file not included in the library
+ */
+.nvd3.nv-indentedtree .name {
   margin-left: 5px;
 }
 
-.indentedtree .childrenCount {
+.nvd3.nv-indentedtree .clickable {
+  color: #08C;
+  cursor: pointer;
+}
+
+.nvd3.nv-indentedtree span.clickable:hover {
+  color: #005580;
+  text-decoration: underline;
+}
+
+
+.nvd3.nv-indentedtree .nv-childrenCount {
   display: inline-block;
   margin-left: 5px;
 }
 
-.indentedtree .treeicon {
+.nvd3.nv-indentedtree .nv-treeicon {
   cursor: pointer;
   /*
   cursor: n-resize;
   */
 }
 
-.indentedtree .treeicon.folded {
+.nvd3.nv-indentedtree .nv-treeicon.nv-folded {
   cursor: pointer;
   /*
   cursor: s-resize;
   */
 }
 
-.nvd3.indentedtree .clickable {
-  color: #08C;
-  cursor: pointer;
-}
-
-.nvd3.indentedtree span.clickable:hover {
-  color: #005580;
-  text-decoration: underline;
-}