From 7b2bfbd333c693fae089cb95046511b31dc89713 Mon Sep 17 00:00:00 2001 From: David Schoonover Date: Wed, 6 Jun 2012 22:08:32 -0700 Subject: [PATCH] Updates callout style. --- data/graphs/test.json | 220 ++++++++++++++++---------------- docs/framework.md | 57 --------- docs/internals/framework.md | 57 +++++++++ lib/graph/graph-view.co | 7 - lib/server/controllers/graph.co | 4 +- lib/template/graph/graph-display.jade | 6 +- www/css/graph-display.styl | 15 ++- www/css/graph.styl | 11 +- 8 files changed, 186 insertions(+), 191 deletions(-) delete mode 100644 docs/framework.md create mode 100644 docs/internals/framework.md diff --git a/data/graphs/test.json b/data/graphs/test.json index 560e988..3d00020 100644 --- a/data/graphs/test.json +++ b/data/graphs/test.json @@ -1,110 +1,110 @@ { "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, + "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", + "#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": 3, - "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, + ], + "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": 3, + "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": "Number of Editors" - }, + }, - "slug": "test", - "id": "active_editors", + "slug": "test", + "id": "active_editors", "name": "Active Wikimedia Editors for All Wikimedia Projects (5+ edits per month)", - "desc": "Aug 2010: Editors on Commons are no longer included in overall total, on the assumption that most also edit on one or more other projects. More precise detection of double counts between any projects and languages is in development (using Single User Login registration).", + "desc": "Aug 2010: Editors on Commons are no longer included in overall total, on the assumption that most also edit on one or more other projects. More precise detection of double counts between any projects and languages is in development (using Single User Login registration).", "notes": "", "height": 250, - "width": "auto", + "width": "auto", "parents": ["root"], "data": { @@ -116,8 +116,8 @@ "index": 0, "source_id": "rc_active_editors_count", "source_col": 1, - "label": "Total", - "color": "#E62F74", + "label": "Total!", + "color": "#E62F74", "type": "int", "timespan": { "start": null, @@ -135,8 +135,8 @@ "index": 0, "source_id": "rc_active_editors_count", "source_col": 2, - "label": "English", - "color": "#E62F74", + "label": "English", + "color": "#E62F74", "type": "int", "timespan": { "start": null, @@ -154,8 +154,8 @@ "index": 0, "source_id": "rc_active_editors_count", "source_col": 3, - "label": "Commons", - "color": "#E62F74", + "label": "Commons", + "color": "#E62F74", "type": "int", "timespan": { "start": null, @@ -173,8 +173,8 @@ "index": 0, "source_id": "rc_active_editors_count", "source_col": 4, - "label": "French", - "color": "#E62F74", + "label": "French", + "color": "#E62F74", "type": "int", "timespan": { "start": null, @@ -192,8 +192,8 @@ "index": 0, "source_id": "rc_active_editors_count", "source_col": 5, - "label": "German", - "color": "#E62F74", + "label": "German", + "color": "#E62F74", "type": "int", "timespan": { "start": null, @@ -211,8 +211,8 @@ "index": 0, "source_id": "rc_active_editors_count", "source_col": 6, - "label": "Russian", - "color": "#E62F74", + "label": "Russian", + "color": "#E62F74", "type": "int", "timespan": { "start": null, diff --git a/docs/framework.md b/docs/framework.md deleted file mode 100644 index 88ba7d5..0000000 --- a/docs/framework.md +++ /dev/null @@ -1,57 +0,0 @@ -# UI Base Framework - -Notes from working with Backbone, Bootstrap, and other friends. - - -## Bootstrap Enhancements - -### CSS Classes -- Apple-style tokens/tags -- Table styles for "active", "error", etc -- Table highlights (like stickies in a book) -- Container Shadow Lines (horizontal & vertical) -- Lion-style scrollbars - - -### Components -- Better Isotope integration -- Tear-away / Pop-out containers -- Facebook-style Thing Selector, with filtering, a drag-n-drop hopper, etc -- On-hover Components (like changing to a button, expanding, etc); also, +HoverIntent - - -## Backbone Base - -- Nested Models are a huge painpoint -- A more coherent "loading" event model is needed -- How can we unify a view's root DOM element with the view? - - Free event bubbling between views - - Eliminate the "I heard an event, what view handles it?" dance - - Reduces need for some boilerplate views - - Data properties to create "anonymous inner views": - - `
` - - ...then need some sort of IOC-style wiring to hand out objects - - Requires rich events with nested properties that can be used for filtering on subscribe -- A View has many `ViewField`s, mapping to the model's attributes. - - Implicitly created for simple fields (text, form elements) - - Handles data-binding: - - Serialization for presentation formatting - - Deserialization back into typed value - - Fires element-specific `change` events - - Subclasses for: - - Rich widgets (datepicker, colorpicker, etc) - - Dependent and derived fields - - Or declarative config and event binding -- `CollectionView`, when the view holds a `Backbone.Collection`, not a `Backbone.Model` - - Comes with CRUD for .add(model)/remove(model), creating the needed subview, attaching it, etc - - Subclasses with specialized support for `ListView`, `DictView` - - Mixins for further subclasses for: - - `TableView` (and all manner of stupid subclasses) - - `Form{List,Dict}View` - - `TabPane{List,Dict}View` -- All Views should have a `StateMachine` (also supporting the `EventEmitter` API) to ease coordinating event flows - - Significantly simplifies "loading" and "waiting" states - - Trivial to "disable" elements - - Easy modal UIs - - diff --git a/docs/internals/framework.md b/docs/internals/framework.md new file mode 100644 index 0000000..88ba7d5 --- /dev/null +++ b/docs/internals/framework.md @@ -0,0 +1,57 @@ +# UI Base Framework + +Notes from working with Backbone, Bootstrap, and other friends. + + +## Bootstrap Enhancements + +### CSS Classes +- Apple-style tokens/tags +- Table styles for "active", "error", etc +- Table highlights (like stickies in a book) +- Container Shadow Lines (horizontal & vertical) +- Lion-style scrollbars + + +### Components +- Better Isotope integration +- Tear-away / Pop-out containers +- Facebook-style Thing Selector, with filtering, a drag-n-drop hopper, etc +- On-hover Components (like changing to a button, expanding, etc); also, +HoverIntent + + +## Backbone Base + +- Nested Models are a huge painpoint +- A more coherent "loading" event model is needed +- How can we unify a view's root DOM element with the view? + - Free event bubbling between views + - Eliminate the "I heard an event, what view handles it?" dance + - Reduces need for some boilerplate views + - Data properties to create "anonymous inner views": + - `
` + - ...then need some sort of IOC-style wiring to hand out objects + - Requires rich events with nested properties that can be used for filtering on subscribe +- A View has many `ViewField`s, mapping to the model's attributes. + - Implicitly created for simple fields (text, form elements) + - Handles data-binding: + - Serialization for presentation formatting + - Deserialization back into typed value + - Fires element-specific `change` events + - Subclasses for: + - Rich widgets (datepicker, colorpicker, etc) + - Dependent and derived fields + - Or declarative config and event binding +- `CollectionView`, when the view holds a `Backbone.Collection`, not a `Backbone.Model` + - Comes with CRUD for .add(model)/remove(model), creating the needed subview, attaching it, etc + - Subclasses with specialized support for `ListView`, `DictView` + - Mixins for further subclasses for: + - `TableView` (and all manner of stupid subclasses) + - `Form{List,Dict}View` + - `TabPane{List,Dict}View` +- All Views should have a `StateMachine` (also supporting the `EventEmitter` API) to ease coordinating event flows + - Significantly simplifies "loading" and "waiting" states + - Trivial to "disable" elements + - Easy modal UIs + + diff --git a/lib/graph/graph-view.co b/lib/graph/graph-view.co index 3a4617e..322438a 100644 --- a/lib/graph/graph-view.co +++ b/lib/graph/graph-view.co @@ -173,13 +173,6 @@ GraphView = exports.GraphView = BaseView.extend do # {{{ this /** - * Render the callout element. - */ - renderCallout: -> - - this - - /** * Render the chart and other Graph-derived view components. */ render: -> diff --git a/lib/server/controllers/graph.co b/lib/server/controllers/graph.co index 50a11bb..c7f2462 100644 --- a/lib/server/controllers/graph.co +++ b/lib/server/controllers/graph.co @@ -65,7 +65,7 @@ class GraphController extends Controller catch err console.error "GraphController.autoload(#id, #{typeof cb}) -->\nerr" cb err - + # GET /graphs.:format? index: (req, res) -> # if format is json, then return the graph JSON @@ -79,7 +79,7 @@ class GraphController extends Controller .seq (graphs) -> res.send _.values graphs default res.render 'graph/index' - + # GET /graphs/:graph show: (req, res) -> if req.format is 'json' diff --git a/lib/template/graph/graph-display.jade b/lib/template/graph/graph-display.jade index d957a66..fa4a612 100644 --- a/lib/template/graph/graph-display.jade +++ b/lib/template/graph/graph-display.jade @@ -2,9 +2,7 @@ include ../browser-helpers - var graph_id = view.id section.graph-display.graph(id=graph_id) - .graph-name-row.page-header.row-fluid - h2.graph-name - a(id="graph-title", href="#{model.toLink()}", data-bind='name') #{name} + .graph-name-row.row-fluid .callout .latest-metric(data-bind='callout.latest') #{callout.latest} .metric-change.year-over-year @@ -13,6 +11,8 @@ section.graph-display.graph(id=graph_id) .metric-change.month-over-month span.dates(data-bind='callout.month.dates') #{callout.month.dates} span.value(data-bind='callout.month.value') #{callout.month.value} + h2.graph-name + a(id="graph-title", href="#{model.toLink()}", data-bind='name') #{name} .graph-viewport-row.row-fluid .viewport diff --git a/www/css/graph-display.styl b/www/css/graph-display.styl index 07f9e66..b7c50ea 100644 --- a/www/css/graph-display.styl +++ b/www/css/graph-display.styl @@ -9,14 +9,16 @@ section.graph-display.graph * position relative + .graph-name-row + clearfix() + /* * * * Chart & Viewport * * * {{{ */ .callout - absolute top 0 right 1em + float right z-index 100 width 200px - padding 0 0 2em 4em + padding 0 1em 0 0 font 11px/1.5 "helvetica neue", helvetica, arial, sans-serif - border-radius 5px background-color white text-align right @@ -27,10 +29,13 @@ section.graph-display.graph // line-height 24px span display inline-block - width 100px + &.dates + width 140px + &.value + width 60px .graph-legend - absolute top 2em right 1em + absolute top 1em right 1em z-index 100 width 200px diff --git a/www/css/graph.styl b/www/css/graph.styl index f29d9d1..9ccff5d 100644 --- a/www/css/graph.styl +++ b/www/css/graph.styl @@ -27,12 +27,11 @@ section.graph overflow hidden .callout - absolute top 0 right 1em + float right z-index 100 width 200px - padding 0 0 2em 4em - font 12px/1.5 "helvetica neue", helvetica, arial, sans-serif - border-radius 5px + padding 0 1em 0 0 + font 11px/1.5 "helvetica neue", helvetica, arial, sans-serif background-color white text-align right @@ -40,13 +39,12 @@ section.graph font-size 18px line-height 36px .metric-change - // line-height 24px span display inline-block width 100px .graph-legend - absolute top 2em right 1em + absolute top 1em right 1em z-index 100 width 200px @@ -77,7 +75,6 @@ section.graph /* * * * Graph Details & Info Pane * * * {{{ */ .graph-name-row // Accommodate the callout box - padding-right 272px margin 0 0 1em min-height 38px -- 1.7.0.4