Adds d3-line test graph.
authorDavid Schoonover <dsc@wikimedia.org>
Wed, 20 Jun 2012 09:57:53 +0000 (02:57 -0700)
committerDavid Schoonover <dsc@wikimedia.org>
Wed, 20 Jun 2012 09:57:53 +0000 (02:57 -0700)
data/graphs/d3-test.json [new file with mode: 0644]
lib/chart/chart-type.co
lib/chart/type/d3/d3-line-chart-type.co
lib/chart/type/dygraphs.co
www/d3-test.jade

diff --git a/data/graphs/d3-test.json b/data/graphs/d3-test.json
new file mode 100644 (file)
index 0000000..f649f56
--- /dev/null
@@ -0,0 +1 @@
+{"options":{"animatedZooms":true,"avoidMinZero":false,"axis":null,"axisLabelColor":"#666666","axisLabelFontSize":11,"axisLabelFormatter":null,"axisLabelWidth":50,"axisLineColor":"#AAAAAA","axisLineWidth":0.3,"axisTickSize":3,"colorSaturation":1,"colorValue":0.5,"colors":["#FF0097","#EF8158","#83BB32","#182B53","#4596FF","#553DC9","#AD3238","#00FFBC","#F1D950"],"connectSeparatedPoints":false,"customBars":false,"dateWindow":null,"delimiter":",","digitsAfterDecimal":2,"displayAnnotations":false,"drawPoints":true,"drawXAxis":true,"drawXGrid":true,"drawYAxis":true,"drawYGrid":true,"errorBars":false,"file":null,"fillAlpha":0.15,"fillGraph":false,"fractions":false,"gridLineColor":"#D8D8D8","gridLineWidth":0.3,"hideOverlayOnMouseOut":false,"highlightCircleSize":4,"includeZero":false,"interactionModel":null,"isZoomedIgnoreProgrammaticZoom":false,"labels":null,"labelsDiv":null,"labelsDivStyles":null,"labelsDivWidth":250,"labelsKMB":true,"labelsKMG2":false,"labelsSeparateLines":true,"labelsShowZeroValues":true,"legend":"always","logscale":true,"maxNumberWidth":30,"panEdgeFraction":null,"pixelsPerLabel":null,"pixelsPerXLabel":null,"pixelsPerYLabel":null,"pointSize":1,"rangeSelectorHeight":40,"rangeSelectorPlotFillColor":"#A7B1C4","rangeSelectorPlotStrokeColor":"#808FAB","rightGap":20,"rollPeriod":1,"showLabelsOnHighlight":true,"showRangeSelector":false,"showRoller":false,"sigFigs":null,"sigma":2,"stackedGraph":false,"stepPlot":false,"strokePattern":null,"strokeWidth":4,"ticker":null,"title":null,"titleHeight":18,"valueFormatter":null,"valueRange":null,"visibility":null,"wilsonInterval":true,"xAxisHeight":null,"xAxisLabelFormatter":null,"xAxisLabelWidth":55,"xLabelHeight":18,"xValueFormatter":null,"xValueParser":null,"xlabel":null,"y2label":null,"yAxisLabelFormatter":null,"yAxisLabelWidth":50,"yLabelWidth":18,"yValueFormatter":null,"ylabel":null},"slug":"d3-test","name":"","desc":"","notes":"","width":"auto","height":320,"parents":["root"],"data":{"palette":null,"lines":[],"metrics":[{"index":0,"label":"","type":"int","timespan":{"start":null,"end":null,"step":null},"disabled":false,"source_id":"rc_active_editors_count","source_col":1,"color":"#00b2ff","visible":true,"format_value":null,"format_axis":null,"transforms":[],"scale":1},{"index":1,"label":"","type":"int","timespan":{"start":null,"end":null,"step":null},"disabled":false,"source_id":"rc_new_article_count","source_col":1,"color":"rgb(213,62,79)","visible":true,"format_value":null,"format_axis":null,"transforms":[],"scale":1}]},"callout":{"enabled":true,"metric_idx":0,"label":""},"chartType":"dygraphs","id":"d3-test"}
\ No newline at end of file
index b10a154..d66b435 100644 (file)
@@ -351,6 +351,16 @@ class exports.ChartType extends ReadyEmitter
         @pluck 'default'
     
     
+    
+    
+    /**
+     * Resizes the HTML viewport. Override to disable, etc.
+     */
+    resizeViewport: ->
+        size = @determineSize()
+        @getElementsForRole 'viewport' .css size
+        size
+    
     /**
      * Determines chart viewport size.
      * @return { width, height }
index ccf27a1..6446686 100644 (file)
@@ -29,6 +29,8 @@ class LineChartType extends ChartType
     
     -> super ...
     
+    
+    
     transform: ->
         dataset = @model.dataset
         options = @model.getOptions() import @determineSize()
index 7ae8e67..4d0113e 100644 (file)
@@ -91,15 +91,6 @@ class exports.DygraphsChartType extends ChartType
     
     
     /**
-     * Resizes the HTML viewport.
-     */
-    resizeViewport: ->
-        size = @determineSize()
-        @getElementsForRole 'viewport' .css size
-        size
-    
-    
-    /**
      * Transforms the domain objects into a hash of derived values using
      *  chart-type-specific keys.
      * @returns {Object} The derived chart options.
index 39fbc87..b9c1123 100644 (file)
@@ -7,17 +7,34 @@ append styles
     mixin css('/vendor/bootstrap-colorpicker/css/colorpicker.css')
     mixin css('/vendor/bootstrap-datepicker/css/datepicker.css')
     mixin css('graph.css')
+    // new for SVG
     mixin css('chart.css')
     mixin css('data.css')
     mixin css('isotope.css')
 
 block main-scripts
     script
-        d3 = require('d3')
+        root = this
+        
+        // import all the things, ugly JS-style
+        d3            = require('d3')
+        Seq           = require('seq')
+        Backbone      = require('backbone')
+        util          = require('kraken/util'); _ = util._; op = util.op
+        AppView       = require('kraken/app').AppView
+        base          = require('kraken/base'); BaseView = base.BaseView; BaseModel = base.BaseModel; BaseList = base.BaseList
+        ChartType     = require('kraken/chart').ChartType
+        data          = require('kraken/data'); DataSource = data.DataSource; DataSourceList = data.DataSourceList
+        _graph        = require('kraken/graph'); Graph = _graph.Graph; GraphList = _graph.GraphList; GraphEditView = _graph.GraphEditView
         LineChartType = require('kraken/chart/type/d3/d3-line-chart-type')
+        
+        // run on DOM-ready
         jQuery(function(){
-            setTimeout(function(){
-                ct = view.chartType = graph.chartType = new LineChartType(graph, view); 
-            }, 100);
+            root.app = new AppView(function(){
+                this.model = root.graph = new Graph({ id:'d3-test' }, { parse:true })
+                this.view  = root.view  = new GraphEditView({ model:this.model })
+                this.view.chartType = this.model.chartType = new LineChartType(this.model, this.view);
+            });
         });
-    script(src="/js/kraken/main-edit.js?"+version)
+    
+