Axis and value formatting.
authordsc <dsc@wikimedia.org>
Thu, 29 Mar 2012 16:23:06 +0000 (09:23 -0700)
committerdsc <dsc@wikimedia.org>
Thu, 29 Mar 2012 16:23:06 +0000 (09:23 -0700)
lib/graph/graph-edit-view.co
lib/util/underscore/string.co
www/misc/numbers.co
www/misc/numbers.jade
www/modules.yaml
www/presets/root.yaml

index 0050f50..734bc03 100644 (file)
@@ -1,5 +1,7 @@
 root = do -> this
 
+moment = require 'moment'
+
 _ = require 'kraken/util/underscore'
 { BaseView,
 } = require 'kraken/base'
@@ -25,7 +27,6 @@ GraphEditView = exports.GraphEditView = BaseView.extend do # {{{
     ]>
     __bind__  : <[ 
         render renderAll resizeViewport
-        formatter axisFormatter
         onReady onSync
         onModelChange onScaffoldChange onFirstClickRenderOptionsTab
     ]>
@@ -189,8 +190,14 @@ GraphEditView = exports.GraphEditView = BaseView.extend do # {{{
         options = @chartOptions() #import size
         options import do
             labelsDiv          : @$el.find '.graph-label' .0
-            # axisLabelFormatter : @axisFormatter
-            # valueFormatter     : @formatter
+            valueFormatter     : @numberFormatter
+            axes:
+                x:
+                    axisLabelFormatter : @axisDateFormatter
+                    valueFormatter     : @dateFormatter
+                y:
+                    axisLabelFormatter : @axisFormatter @numberFormatter
+                    valueFormatter     : @numberFormatter
         
         # console.log "#this.render!", dataset
         _.dump options, 'options'
@@ -237,19 +244,25 @@ GraphEditView = exports.GraphEditView = BaseView.extend do # {{{
     
     ### Formatters {{{
     
-    axisFormatter: (n, granularity, opts, g) ->
-        @formatter n, opts, g
-    
-    formatter: (n, opts, g) ->
-        return n if n instanceof Date
-        sigFigs = opts 'sigFigs'
-        maxW    = opts 'maxNumberWidth'
-        digits  = opts 'digitsAfterDecimal'
-        v = Dygraph.round_ n, digits
-        # Dygraph.floatFormat n, sigFigs
-        # console.log n, "->", v, "?= %#{maxW}.#{digits}g (sigFigs=#sigFigs)"
-        v
-    
+    axisFormatter: (fmttr) ->
+        (n, granularity, opts, g) -> fmttr n, opts, g
+    
+    axisDateFormatter: (n, granularity, opts, g) ->
+        moment(n).format 'MM/YYYY'
+    
+    dateFormatter: (n, opts, g) ->
+        moment(n).format 'DD MMM YYYY'
+    
+    numberFormatter: (n, opts, g) ->
+        digits = opts('digitsAfterDecimal') ? 2
+        for [suffix, d] of [['B', 1000000000], ['M', 1000000], ['K', 1000], ['', NaN]]
+            if n >= d
+                n = n / d
+                break
+        s = n.toFixed(digits) + suffix
+        parts = s.split '.'
+        parts[0] = _.rchop parts[0], 3 .join ','
+        parts.join '.'
     
     ### }}}
     ### Event Handlers {{{
index d83013e..9b1ee6e 100644 (file)
@@ -3,6 +3,23 @@ _str = require 'underscore.string'
 
 _string = do
     
+    
+    
+    /**
+     * As _.str.chop but from the right.
+     */
+    rchop : (s, step) ->
+        s    = String s
+        i    = s.length
+        step = Number step
+        out  = []
+        return [s] if step <= 0
+        while i > 0
+            out.unshift s.slice Math.max(0, i-step), i
+            i -= step
+        out
+    
+    
     drop : (s, ...parts) ->
         do
             starting = s
index 77c62a9..d04237b 100644 (file)
@@ -2,6 +2,31 @@ _ = require 'kraken/util/underscore'
 
 config = tbody = null
 
+Number::fmtFixed = (digits=2) ->
+    n = this
+    pairs = [['B', 1000000000], ['M', 1000000], ['K', 1000]].filter -> n >= it[1]
+    for [suffix, d] of pairs
+        s = ( n / d ).toFixed(digits) + suffix
+        break
+    else
+        s = n.toFixed digits
+    parts = s.split '.'
+    parts[0] = _.rchop parts[0], 3 .join ','
+    parts.join '.'
+
+Number::fmtPre = (digits=2) ->
+    n = this
+    pairs = [['B', 1000000000], ['M', 1000000], ['K', 1000]].filter -> n >= it[1]
+    for [suffix, d] of pairs
+        s = ( n / d ).toPrecision(digits) + suffix
+        break
+    else
+        s = n.toPrecision digits
+    parts = s.split '.'
+    parts[0] = _.rchop parts[0], 3 .join ','
+    parts.join '.'
+
+
 render = (n, settings={}) ->
     n = Number n
     unless typeof n is 'number' and not isNaN n
@@ -9,7 +34,7 @@ render = (n, settings={}) ->
         return false
     
     values = [n].concat do
-        <[ toFixed toPrecision toExponential ]>.map -> n[it] settings[it]
+        <[ toFixed fmtFixed toPrecision fmtPre ]>.map -> n[it] settings[it]
     # _.dump values, 'values'
     row = $ "<tr>#{ values.map -> "<td>#it</td>" }</tr>" .prependTo tbody
     # console.log 'row:', row
@@ -32,9 +57,14 @@ $ ->
         false
     
     settings = { fixed:3 }
+    render 1234567890123.456,  settings
+    render 1234567.89012,  settings
+    render 12345.678,  settings
     render 1234.5,  settings
     render 123.45,  settings
     render 12.345,  settings
     render 1.2345,  settings
     render 0.12345, settings
+    render 0.012345, settings
+    render 0.0012345, settings
     config.trigger 'submit'
index 88b5ec4..d6e630a 100644 (file)
@@ -17,29 +17,39 @@ block content
         .control-group
             label.control-label(for="n") Numbers
             .controls
-                input#n(name="n", type="text", value="54321.09876")
+                input#n(name="n", type="text", value="98754321.09876123")
                 p.help-block You can separate multiple numbers with whitespace.
         
         .options
             .control-group
                 label.control-label(for="toFixed") .toFixed
-                .controls: input#toFixed.span1(type="text", name="toFixed", value="3")
+                .controls: input#toFixed.span1(type="text", name="toFixed", value="2")
             
             .control-group
                 label.control-label(for="toPrecision") .toPrecision
-                .controls: input#toPrecision.span1(type="text", name="toPrecision", value="")
+                .controls: input#toPrecision.span1(type="text", name="toPrecision", value="2")
             
             .control-group
-                label.control-label(for="toExponential") .toExponential
-                .controls: input#toExponential.span1(type="text", name="toExponential", value="")
+                label.control-label(for="fmtFixed") .fmtFixed
+                .controls: input#fmtFixed.span1(type="text", name="fmtFixed", value="2")
+            
+            .control-group
+                label.control-label(for="fmtPre") .fmtPre
+                .controls: input#fmtPre.span1(type="text", name="fmtPre", value="2")
+            
+            //- 
+                .control-group
+                    label.control-label(for="toExponential") .toExponential
+                    .controls: input#toExponential.span1(type="text", name="toExponential", value="")
         
     
     table#results.table.table-striped.table-bordered.table-condensed
         thead: tr
             th n
             th toFixed
+            th fmtFixed
             th toPre
-            th toExp
+            th fmtPre
         tbody
     
 
@@ -49,9 +59,10 @@ block scripts
     script(src="/vendor/bootstrap.min.js")
     script(src="/vendor/underscore.mod.js")
     script(src="/vendor/underscore.string.mod.js")
-    script(src="/js/kraken/underscore/array.mod.js")
-    script(src="/js/kraken/underscore/object.mod.js")
-    script(src="/js/kraken/underscore/string.mod.js")
-    script(src="/js/kraken/underscore/index.mod.js")
+    script(src="/js/kraken/util/underscore/array.mod.js")
+    script(src="/js/kraken/util/underscore/object.mod.js")
+    script(src="/js/kraken/util/underscore/kv.mod.js")
+    script(src="/js/kraken/util/underscore/string.mod.js")
+    script(src="/js/kraken/util/underscore/index.mod.js")
     script(src="numbers.js")
 
index 6172dfc..53669a3 100644 (file)
@@ -37,7 +37,7 @@ dev:
         
         - showdown.mod.min
         - jade.runtime.min
-        
+        - moment.mod.min
         - dygraph
 
 -   suffix: .mod.js
index e324d29..61776ef 100644 (file)
@@ -25,7 +25,7 @@ options   :
     customBars                      : false
     dateWindow                      : null
     delimiter                       : ","
-    digitsAfterDecimal              : 3
+    digitsAfterDecimal              : 2
     displayAnnotations              : false
     drawPoints                      : false
     drawXAxis                       : true
@@ -40,7 +40,7 @@ options   :
     gridLineColor                   : "#D8D8D8"
     gridLineWidth                   : 0.3
     hideOverlayOnMouseOut           : true
-    highlightCircleSize             : 3
+    highlightCircleSize             : 4
     includeZero                     : false
     interactionModel                : null
     isZoomedIgnoreProgrammaticZoom  : false
@@ -53,7 +53,7 @@ options   :
     labelsSeparateLines             : true
     labelsShowZeroValues            : true
     legend                          : always
-    logscale                        : false
+    logscale                        : true
     maxNumberWidth                  : 30
     panEdgeFraction                 : null
     pixelsPerLabel                  : null
@@ -73,7 +73,7 @@ options   :
     stackedGraph                    : false
     stepPlot                        : false
     strokePattern                   : null
-    strokeWidth                     : 1
+    strokeWidth                     : 2
     ticker                          : null
     timingName                      : null
     title                           : null
@@ -84,7 +84,7 @@ options   :
     wilsonInterval                  : true
     xAxisHeight                     : null
     xAxisLabelFormatter             : null
-    xAxisLabelWidth                 : 50
+    xAxisLabelWidth                 : 55
     xLabelHeight                    : 18
     xValueFormatter                 : null
     xValueParser                    : null