From 85f07e6748cd5f84c53c25761f8430fa1063799c Mon Sep 17 00:00:00 2001 From: David Schoonover Date: Wed, 20 Jun 2012 02:57:53 -0700 Subject: [PATCH] Adds d3-line test graph. --- data/graphs/d3-test.json | 1 + lib/chart/chart-type.co | 10 ++++++++++ lib/chart/type/d3/d3-line-chart-type.co | 2 ++ lib/chart/type/dygraphs.co | 9 --------- www/d3-test.jade | 27 ++++++++++++++++++++++----- 5 files changed, 35 insertions(+), 14 deletions(-) create mode 100644 data/graphs/d3-test.json diff --git a/data/graphs/d3-test.json b/data/graphs/d3-test.json new file mode 100644 index 0000000..f649f56 --- /dev/null +++ b/data/graphs/d3-test.json @@ -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 diff --git a/lib/chart/chart-type.co b/lib/chart/chart-type.co index b10a154..d66b435 100644 --- a/lib/chart/chart-type.co +++ b/lib/chart/chart-type.co @@ -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 } diff --git a/lib/chart/type/d3/d3-line-chart-type.co b/lib/chart/type/d3/d3-line-chart-type.co index ccf27a1..6446686 100644 --- a/lib/chart/type/d3/d3-line-chart-type.co +++ b/lib/chart/type/d3/d3-line-chart-type.co @@ -29,6 +29,8 @@ class LineChartType extends ChartType -> super ... + + transform: -> dataset = @model.dataset options = @model.getOptions() import @determineSize() diff --git a/lib/chart/type/dygraphs.co b/lib/chart/type/dygraphs.co index 7ae8e67..4d0113e 100644 --- a/lib/chart/type/dygraphs.co +++ b/lib/chart/type/dygraphs.co @@ -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. diff --git a/www/d3-test.jade b/www/d3-test.jade index 39fbc87..b9c1123 100644 --- a/www/d3-test.jade +++ b/www/d3-test.jade @@ -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) + + -- 1.7.0.4