From 3a3083fd69b8106447ebb43566f660603c3e292b Mon Sep 17 00:00:00 2001 From: Mark Silverberg Date: Sat, 9 Jan 2016 16:11:27 -0500 Subject: [PATCH 01/16] potential fix for #104 --- src/scripts/views/table.js | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/src/scripts/views/table.js b/src/scripts/views/table.js index cc5e7cb..d873882 100644 --- a/src/scripts/views/table.js +++ b/src/scripts/views/table.js @@ -70,6 +70,7 @@ module.exports = Card.extend({ ajax: function (data, callback, settings) { self.collection.search = data.search.value ? data.search.value : null + self.collection.getRecordCount().done(function (recordCount) { self.recordsTotal = self.recordsTotal || recordCount self.collection.offset = data.start || 0 @@ -77,8 +78,19 @@ module.exports = Card.extend({ self.collection.order = data.columns[data.order[0].column].data + ' ' + data.order[0].dir self.collection.fetch({ success: function (collection, response, options) { + tableData = _.map(collection.toJSON(), function(item){ + item = _.each(item, function(v,k){ + if(typeof v === 'object'){ + console.log(v) + item[k] = JSON.stringify(v) + } + }) + console.log(item) + return item + }) + callback({ - data: collection.toJSON(), + data: tableData, recordsTotal: self.recordsTotal, recordsFiltered: recordCount }) From d15710230849b85b64fbc906e94b165bd77d9229 Mon Sep 17 00:00:00 2001 From: Mark Silverberg Date: Sat, 9 Jan 2016 16:17:13 -0500 Subject: [PATCH 02/16] remove logging related to #104 --- src/scripts/views/table.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/scripts/views/table.js b/src/scripts/views/table.js index d873882..2a6a32a 100644 --- a/src/scripts/views/table.js +++ b/src/scripts/views/table.js @@ -81,11 +81,9 @@ module.exports = Card.extend({ tableData = _.map(collection.toJSON(), function(item){ item = _.each(item, function(v,k){ if(typeof v === 'object'){ - console.log(v) item[k] = JSON.stringify(v) } }) - console.log(item) return item }) From b203f4cddd2a32b9ee69d6b454d7a5ec4ac4ce67 Mon Sep 17 00:00:00 2001 From: Mark Silverberg Date: Sun, 17 Jan 2016 21:54:55 -0500 Subject: [PATCH 03/16] WIP first pass at hiding full/total (unfiltered) dataset --- src/scripts/templates/card.html | 3 +++ src/scripts/views/bar.js | 16 +++++++++++++++- 2 files changed, 18 insertions(+), 1 deletion(-) diff --git a/src/scripts/templates/card.html b/src/scripts/templates/card.html index a21d39d..9d7f4d5 100644 --- a/src/scripts/templates/card.html +++ b/src/scripts/templates/card.html @@ -10,6 +10,9 @@
+ <% if(data.chartType == 'bar') { %> + + <% } %>
diff --git a/src/scripts/views/bar.js b/src/scripts/views/bar.js index 31b433e..f2d96a8 100644 --- a/src/scripts/views/bar.js +++ b/src/scripts/views/bar.js @@ -107,7 +107,8 @@ module.exports = BaseChart.extend({ _.bindAll(this, 'onClickCursor', 'onClickBar', 'onClickLabel', 'onHover', 'onClickScroll', 'zoomToBeginning') }, events: { - 'click .scroll a': 'onClickScroll' + 'click .scroll a': 'onClickScroll', + 'click .zoom-link': 'onClickZoomLink' }, render: function () { BaseChart.prototype.render.apply(this, arguments) @@ -191,5 +192,18 @@ module.exports = BaseChart.extend({ } }) } + }, + onClickZoomLink: function (e) { + if(this.chart.graphs.length == 2){ + var target = $(e.target) + if(target.hasClass("fa-search-plus")){ + this.chart.hideGraph(this.chart.graphs[0]) + } else { + this.chart.showGraph(this.chart.graphs[0]) + } + target.toggleClass("fa-search-plus") + target.toggleClass("fa-search-minus") + } + e.preventDefault() } }) From 5798e00837cdf02e4af96fa7f22ba5911df5babe Mon Sep 17 00:00:00 2001 From: Mark Silverberg Date: Mon, 18 Jan 2016 12:00:58 -0500 Subject: [PATCH 04/16] #150 for toggle base collection (for bar charts only) --- src/scripts/templates/card.html | 10 +++++++--- src/scripts/views/bar.js | 33 ++++++++++++++++++++++----------- 2 files changed, 29 insertions(+), 14 deletions(-) diff --git a/src/scripts/templates/card.html b/src/scripts/templates/card.html index 9d7f4d5..93c2df8 100644 --- a/src/scripts/templates/card.html +++ b/src/scripts/templates/card.html @@ -10,9 +10,6 @@
- <% if(data.chartType == 'bar') { %> - - <% } %>
@@ -24,6 +21,13 @@
  • Export (CSV)
    • + +
    diff --git a/src/scripts/views/bar.js b/src/scripts/views/bar.js index f2d96a8..a55146c 100644 --- a/src/scripts/views/bar.js +++ b/src/scripts/views/bar.js @@ -108,7 +108,7 @@ module.exports = BaseChart.extend({ }, events: { 'click .scroll a': 'onClickScroll', - 'click .zoom-link': 'onClickZoomLink' + 'click .toggle-base-collection-link': 'onClickToggleBaseCollectionLink' }, render: function () { BaseChart.prototype.render.apply(this, arguments) @@ -136,6 +136,13 @@ module.exports = BaseChart.extend({ if (this.chart.endIndex - this.chart.startIndex < this.collection.length) { this.$('.scroll').removeClass('hidden') } + + // If there are filters, show the toggle for base collection + if(_.isEmpty(this.filteredCollection.getFilters())){ + this.$('.toggle-base-collection').hide() + } else { + this.$('.toggle-base-collection').show() + } }, zoomToBeginning: function () { if (this.collection.length > this.chart.maxSelectedSeries) { @@ -193,17 +200,21 @@ module.exports = BaseChart.extend({ }) } }, - onClickZoomLink: function (e) { - if(this.chart.graphs.length == 2){ - var target = $(e.target) - if(target.hasClass("fa-search-plus")){ - this.chart.hideGraph(this.chart.graphs[0]) - } else { - this.chart.showGraph(this.chart.graphs[0]) - } - target.toggleClass("fa-search-plus") - target.toggleClass("fa-search-minus") + onClickToggleBaseCollectionLink: function (e) { + var target = $(e.target) + // If target was the text, change target to the icon + if(!target.hasClass('toggle-base-collection-icon')){ + target = target.children('.toggle-base-collection-icon') + } + // If the toggle is currently on, hide the first graph (base collection) + if(target.hasClass("fa-toggle-on")){ + this.chart.hideGraph(this.chart.graphs[0]) + } else { + this.chart.showGraph(this.chart.graphs[0]) } + // No matter what, toggle the icons classes to show the other one + target.filter('span.fa').toggleClass("fa-toggle-on") + target.filter('span.fa').toggleClass("fa-toggle-off") e.preventDefault() } }) From 220ecbc0622f5ea83597128b3436007ad7411369 Mon Sep 17 00:00:00 2001 From: Mark Silverberg Date: Mon, 18 Jan 2016 12:44:25 -0500 Subject: [PATCH 05/16] #150 add the "zoom" way --- src/scripts/templates/card.html | 6 ++++++ src/scripts/views/bar.js | 35 +++++++++++++++++++++++++++++++-- 2 files changed, 39 insertions(+), 2 deletions(-) diff --git a/src/scripts/templates/card.html b/src/scripts/templates/card.html index 93c2df8..840adfb 100644 --- a/src/scripts/templates/card.html +++ b/src/scripts/templates/card.html @@ -27,6 +27,12 @@ Toggle base collection +
    diff --git a/src/scripts/views/bar.js b/src/scripts/views/bar.js index a55146c..3466294 100644 --- a/src/scripts/views/bar.js +++ b/src/scripts/views/bar.js @@ -108,7 +108,8 @@ module.exports = BaseChart.extend({ }, events: { 'click .scroll a': 'onClickScroll', - 'click .toggle-base-collection-link': 'onClickToggleBaseCollectionLink' + 'click .toggle-base-collection-link': 'onClickToggleBaseCollectionLink', + 'click .zoom-to-filtered-collection-link': 'onClickZoomToFilteredCollectionLink' }, render: function () { BaseChart.prototype.render.apply(this, arguments) @@ -137,11 +138,13 @@ module.exports = BaseChart.extend({ this.$('.scroll').removeClass('hidden') } - // If there are filters, show the toggle for base collection + // If there are filters, show the toggle for base collection and zoom filter collection buttons if(_.isEmpty(this.filteredCollection.getFilters())){ this.$('.toggle-base-collection').hide() + this.$('.zoom-to-filtered-collection').hide() } else { this.$('.toggle-base-collection').show() + this.$('.zoom-to-filtered-collection').show() } }, zoomToBeginning: function () { @@ -216,5 +219,33 @@ module.exports = BaseChart.extend({ target.filter('span.fa').toggleClass("fa-toggle-on") target.filter('span.fa').toggleClass("fa-toggle-off") e.preventDefault() + }, + onClickZoomToFilteredCollectionLink: function (e) { + var target = $(e.target) + // If target was the text, change target to the icon + if(!target.hasClass('zoom-to-filtered-collection-icon')){ + target = target.children('.zoom-to-filtered-collection-icon') + } + + // If the toggle is currently on, hide the first graph (base collection) + if(target.hasClass("fa-search-plus")){ // zoom in + var filteredCollectionValues = _.map(this.filteredCollection.models, function(o){return parseInt(o.attributes.value)}) + var filteredCollectionMaxValue = _.max(filteredCollectionValues) * 1.15 // include some top padding + this.chart.valueAxes[0].maximum = filteredCollectionMaxValue + this.chart.validateNow() + } else { // zoom out + var collectionValues = _.map(this.collection.models, function(o){return parseInt(o.attributes.value)}) + var collectionMaxValue = _.max(collectionValues) * 1.15 // include some top padding + this.chart.valueAxes[0].maximum = collectionMaxValue + this.chart.validateNow() + } + + // No matter what, toggle the icons classes to show the other one + target.filter('span.fa').toggleClass("fa-search-plus") + target.filter('span.fa').toggleClass("fa-search-minus") + e.preventDefault() } + + + }) From 0e175ea7eaff0742830a2e732082065ceffc85f7 Mon Sep 17 00:00:00 2001 From: Mark Silverberg Date: Mon, 18 Jan 2016 15:22:46 -0500 Subject: [PATCH 06/16] #151 show % of filter in balloon of bar chart --- src/scripts/views/bar.js | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/src/scripts/views/bar.js b/src/scripts/views/bar.js index 89fd3c4..4669036 100644 --- a/src/scripts/views/bar.js +++ b/src/scripts/views/bar.js @@ -23,9 +23,18 @@ module.exports = BaseChart.extend({ clustered: false, lineColor: '#97bbcd', balloonFunction: function (item, graph) { - return '' + item.category + + var baloonHtml = '' + item.category + '
    Total: ' + (+item.dataContext.value).toLocaleString() + - '
    Filtered Amount: ' + (+item.dataContext.filteredValue).toLocaleString() + '
    Filtered Amount: ' + (item.dataContext.filteredValue).toLocaleString() + try{ + var percentOfTotal = (parseFloat(item.dataContext.filteredValue)/parseFloat(item.dataContext.value)*100).toFixed(2) + if(percentOfTotal != "NaN"){ // NaN becomes "NaN" when converted to Fixed + baloonHtml += ' (' + percentOfTotal + '%)' + } + } catch(err){ + console.log(err) + } + return baloonHtml } } ], From 4f9b469cb8913804451972c15035c016c58d5648 Mon Sep 17 00:00:00 2001 From: Mark Silverberg Date: Mon, 18 Jan 2016 16:21:02 -0500 Subject: [PATCH 07/16] #66 first pass at adding tooltips is quite a hack.. need to understand where to put the code added to socrata-fields.js --- src/scripts/collections/socrata-fields.js | 5 +++-- src/scripts/views/table.js | 7 +++++++ 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/src/scripts/collections/socrata-fields.js b/src/scripts/collections/socrata-fields.js index d7d4c63..5f4d360 100644 --- a/src/scripts/collections/socrata-fields.js +++ b/src/scripts/collections/socrata-fields.js @@ -30,9 +30,10 @@ module.exports = Backbone.Collection.extend({ return response.columns.map(function (row, key) { return { data: row.fieldName, - title: row.name, + title: row.name + ' ', type: this.typeMap[row.renderTypeName] || this.typeMap.default, - defaultContent: '' + defaultContent: '', + description: row.description } }, this) } diff --git a/src/scripts/views/table.js b/src/scripts/views/table.js index 6f41a15..da542f5 100644 --- a/src/scripts/views/table.js +++ b/src/scripts/views/table.js @@ -4,6 +4,7 @@ var LoaderOn = require('../util/loader').on var LoaderOff = require('../util/loader').off require('datatables') require('datatables/media/js/dataTables.bootstrap') +require('bootstrap/js/tooltip') module.exports = Card.extend({ initialize: function (options) { @@ -99,6 +100,12 @@ module.exports = Card.extend({ } }) } + + // Initialize bootstrap-powered tooltips + jQuery('.dataTables_scrollHeadInner th span[data-toggle="tooltip"]').tooltip({ + container : 'body' + }); + }, // When another chart is filtered, filter this collection onFilter: function (data) { From 4fcbddc6f187bf4885c50ecbacde96ac12dffbae Mon Sep 17 00:00:00 2001 From: Mark Silverberg Date: Mon, 18 Jan 2016 16:24:16 -0500 Subject: [PATCH 08/16] #66 add check for blank description --- src/scripts/collections/socrata-fields.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/scripts/collections/socrata-fields.js b/src/scripts/collections/socrata-fields.js index 5f4d360..c8aa185 100644 --- a/src/scripts/collections/socrata-fields.js +++ b/src/scripts/collections/socrata-fields.js @@ -28,9 +28,13 @@ module.exports = Backbone.Collection.extend({ }, parse: function (response) { return response.columns.map(function (row, key) { + var titleForRow = row.name + if(!_.isEmpty(row.description)){ + titleForRow += ' ' + } return { data: row.fieldName, - title: row.name + ' ', + title: titleForRow, type: this.typeMap[row.renderTypeName] || this.typeMap.default, defaultContent: '', description: row.description From bf0112b019fcc97fa2c21bdc8d249475742e1f1b Mon Sep 17 00:00:00 2001 From: Mark Silverberg Date: Mon, 18 Jan 2016 18:33:55 -0500 Subject: [PATCH 09/16] #152 allow support of "IS NOT" and "IS" --- src/scripts/collections/baseprovider.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/scripts/collections/baseprovider.js b/src/scripts/collections/baseprovider.js index d3d6904..2844c55 100644 --- a/src/scripts/collections/baseprovider.js +++ b/src/scripts/collections/baseprovider.js @@ -55,6 +55,12 @@ module.exports = Backbone.Collection.extend({ expression.type, '(' + expression.value.map(enclose).join(', ') + ')' ].join(' ') + } else if(expression.type === 'is not' || expression.type == 'is'){ + return [ + field, + expression.type, + expression.value + ].join(' ') } else { return [ field, From 6a8094b4ab3a777434744a4e86cee91cb88787ba Mon Sep 17 00:00:00 2001 From: Mark Silverberg Date: Mon, 18 Jan 2016 20:34:16 -0500 Subject: [PATCH 10/16] change min period to days instead of months --- src/scripts/views/datetime.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/scripts/views/datetime.js b/src/scripts/views/datetime.js index d628bd4..b5aaebf 100644 --- a/src/scripts/views/datetime.js +++ b/src/scripts/views/datetime.js @@ -61,7 +61,7 @@ module.exports = BaseChart.extend({ categoryAxis: { autoWrap: true, parseDates: true, - minPeriod: 'MM', + minPeriod: 'DD', gridAlpha: 0, guides: [{ lineThickness: 2, @@ -79,7 +79,7 @@ module.exports = BaseChart.extend({ dataDateFormat: 'YYYY-MM-DDT00:00:00.000', // "2015-04-07T16:21:00.000" creditsPosition: 'top-right', chartCursor: { - categoryBalloonDateFormat: 'MMM YYYY', + categoryBalloonDateFormat: 'DD MMM YYYY', cursorPosition: 'mouse', selectWithoutZooming: true, oneBalloonOnly: true, From 8e7a4f8ee638fdb275097779471249cf3968fd1d Mon Sep 17 00:00:00 2001 From: Mark Silverberg Date: Mon, 18 Jan 2016 21:05:17 -0500 Subject: [PATCH 11/16] header cosmetics --- src/scripts/templates/header.html | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/src/scripts/templates/header.html b/src/scripts/templates/header.html index 5aea48d..10e6581 100644 --- a/src/scripts/templates/header.html +++ b/src/scripts/templates/header.html @@ -1,5 +1,5 @@
    -
    +

    <%= data.title %>

    @@ -8,18 +8,23 @@

    <%= data.title %>

    <% } %>
    -
    +
    - - Feedback <% if(data.navigation && data.navigation.length) { %> + Quick links <% } %> + + + +
    This page was built with VizWit, an interactive data visualization tool, by Tim Wisniewski, the Chief Data Officer for the City of Philadelphia. VizWit uses open source technology and Socrata Open Data APIs to do awesome things.
    +
    From cfd66f2969f45b3c913ba747468c033a33c49839 Mon Sep 17 00:00:00 2001 From: Mark Silverberg Date: Mon, 18 Jan 2016 21:11:16 -0500 Subject: [PATCH 12/16] #150 add zoom functionality to datetime pure copy and paste job, refactoring should come later --- src/scripts/views/datetime.js | 56 +++++++++++++++++++++++++++++++++++ 1 file changed, 56 insertions(+) diff --git a/src/scripts/views/datetime.js b/src/scripts/views/datetime.js index 6b6a648..85a75d9 100644 --- a/src/scripts/views/datetime.js +++ b/src/scripts/views/datetime.js @@ -1,3 +1,4 @@ +var $ = require('jquery') var _ = require('underscore') var BaseChart = require('./basechart') var numberFormatter = require('../util/number-formatter') @@ -89,11 +90,24 @@ module.exports = BaseChart.extend({ _.bindAll(this, 'onClick') }, + events: { + 'click .toggle-base-collection-link': 'onClickToggleBaseCollectionLink', + 'click .zoom-to-filtered-collection-link': 'onClickZoomToFilteredCollectionLink' + }, render: function () { BaseChart.prototype.render.apply(this, arguments) // Listen to when the user selects a range this.chart.chartCursor.addListener('selected', this.onClick) + + if(_.isEmpty(this.filteredCollection.getFilters())){ + this.$('.toggle-base-collection').hide() + this.$('.zoom-to-filtered-collection').hide() + } else { + this.$('.toggle-base-collection').show() + this.$('.zoom-to-filtered-collection').show() + } + }, // When the user clicks on a bar in this chart onClick: function (e) { @@ -127,5 +141,47 @@ module.exports = BaseChart.extend({ ] } }) + }, + onClickToggleBaseCollectionLink: function (e) { + var target = $(e.target) + // If target was the text, change target to the icon + if(!target.hasClass('toggle-base-collection-icon')){ + target = target.children('.toggle-base-collection-icon') + } + // If the toggle is currently on, hide the first graph (base collection) + if(target.hasClass("fa-toggle-on")){ + this.chart.hideGraph(this.chart.graphs[0]) + } else { + this.chart.showGraph(this.chart.graphs[0]) + } + // No matter what, toggle the icons classes to show the other one + target.filter('span.fa').toggleClass("fa-toggle-on") + target.filter('span.fa').toggleClass("fa-toggle-off") + e.preventDefault() + }, + onClickZoomToFilteredCollectionLink: function (e) { + var target = $(e.target) + // If target was the text, change target to the icon + if(!target.hasClass('zoom-to-filtered-collection-icon')){ + target = target.children('.zoom-to-filtered-collection-icon') + } + + // If the toggle is currently on, hide the first graph (base collection) + if(target.hasClass("fa-search-plus")){ // zoom in + var filteredCollectionValues = _.map(this.filteredCollection.models, function(o){return parseInt(o.attributes.value)}) + var filteredCollectionMaxValue = _.max(filteredCollectionValues) * 1.15 // include some top padding + this.chart.valueAxes[0].maximum = filteredCollectionMaxValue + this.chart.validateNow() + } else { // zoom out + var collectionValues = _.map(this.collection.models, function(o){return parseInt(o.attributes.value)}) + var collectionMaxValue = _.max(collectionValues) * 1.15 // include some top padding + this.chart.valueAxes[0].maximum = collectionMaxValue + this.chart.validateNow() + } + + // No matter what, toggle the icons classes to show the other one + target.filter('span.fa').toggleClass("fa-search-plus") + target.filter('span.fa').toggleClass("fa-search-minus") + e.preventDefault() } }) From 2b19061b1f635a31102364c546a0e53fc8c6d47f Mon Sep 17 00:00:00 2001 From: Mark Silverberg Date: Wed, 20 Jan 2016 15:59:10 -0500 Subject: [PATCH 13/16] buggy and feature incomplete expand option --- src/scripts/templates/card.html | 7 ++++++- src/scripts/views/card.js | 20 +++++++++++++++++++- 2 files changed, 25 insertions(+), 2 deletions(-) diff --git a/src/scripts/templates/card.html b/src/scripts/templates/card.html index 840adfb..1078225 100644 --- a/src/scripts/templates/card.html +++ b/src/scripts/templates/card.html @@ -33,7 +33,12 @@ Zoom to filtered collection - +
  • + + + Expand this card + +
    • diff --git a/src/scripts/views/card.js b/src/scripts/views/card.js index 641ff1d..254777f 100644 --- a/src/scripts/views/card.js +++ b/src/scripts/views/card.js @@ -28,7 +28,8 @@ module.exports = Backbone.View.extend({ // Delegate event here so as not to have it overriden by child classes' events properties this.events = _.extend({ 'click .remove-filter': 'onClickRemoveFilter', - 'click .embed-link': 'onClickEmbedLink' + 'click .embed-link': 'onClickEmbedLink', + 'click .expand-card': 'onClickExpandLink' }, this.events || {}) this.delegateEvents() @@ -103,5 +104,22 @@ module.exports = Backbone.View.extend({ var exportView = new EmbedHelperView({model: new Backbone.Model(this.config)}) this.$el.after(exportView.render().el) e.preventDefault() + }, + onClickExpandLink: function (e) { + var card_el = this.$el + if(card_el.attr("data-expanded") == "true"){ + var originalClasses = card_el.attr("data-original-classes") + card_el.addClass("col-sm-12") + card_el.attr("data-original-classes","") + card_el.attr("class",originalClasses) + card_el.attr("data-expanded","false") + } else { + var originalClasses = card_el.attr("class") + card_el.attr("data-original-classes",originalClasses) + card_el.removeClass(originalClasses) + card_el.addClass("col-sm-12") + card_el.attr("data-expanded","true") + } + e.preventDefault() } }) From cf14c39c805fe7c7c83b880e120019df17dbaab7 Mon Sep 17 00:00:00 2001 From: Mark Silverberg Date: Wed, 20 Jan 2016 18:15:22 -0500 Subject: [PATCH 14/16] #151 fix bug I introduced when working on this feature --- src/scripts/views/bar.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/scripts/views/bar.js b/src/scripts/views/bar.js index 4669036..767e520 100644 --- a/src/scripts/views/bar.js +++ b/src/scripts/views/bar.js @@ -25,7 +25,7 @@ module.exports = BaseChart.extend({ balloonFunction: function (item, graph) { var baloonHtml = '' + item.category + '
    Total: ' + (+item.dataContext.value).toLocaleString() + - '
    Filtered Amount: ' + (item.dataContext.filteredValue).toLocaleString() + '
    Filtered Amount: ' + (+item.dataContext.filteredValue).toLocaleString() try{ var percentOfTotal = (parseFloat(item.dataContext.filteredValue)/parseFloat(item.dataContext.value)*100).toFixed(2) if(percentOfTotal != "NaN"){ // NaN becomes "NaN" when converted to Fixed From 1b2b940ac82daf02c3268327a1f4b421bacf06a9 Mon Sep 17 00:00:00 2001 From: Mark Silverberg Date: Fri, 22 Jan 2016 17:55:08 -0500 Subject: [PATCH 15/16] more work on expanding and contracting cards --- src/scripts/views/card.js | 22 ++++++++++++++++++++-- 1 file changed, 20 insertions(+), 2 deletions(-) diff --git a/src/scripts/views/card.js b/src/scripts/views/card.js index 254777f..ee9b5f7 100644 --- a/src/scripts/views/card.js +++ b/src/scripts/views/card.js @@ -106,20 +106,38 @@ module.exports = Backbone.View.extend({ e.preventDefault() }, onClickExpandLink: function (e) { + console.log(this) var card_el = this.$el - if(card_el.attr("data-expanded") == "true"){ + if (card_el.attr("data-expanded") == "true") { + // Contract card width var originalClasses = card_el.attr("data-original-classes") card_el.addClass("col-sm-12") card_el.attr("data-original-classes","") card_el.attr("class",originalClasses) + // Contract card height + var originalSetHeight = parseInt(card_el.css("min-height")) + card_el.css("height",(originalSetHeight)+"px") + // Set state as not expanded card_el.attr("data-expanded","false") - } else { + } else { + // Expand width var originalClasses = card_el.attr("class") card_el.attr("data-original-classes",originalClasses) card_el.removeClass(originalClasses) card_el.addClass("col-sm-12") + // Expand height + var originalInlineStyles = card_el.attr("style") + card_el.attr("data-original-styles",originalInlineStyles) + var originalSetHeight = parseInt(card_el.css("min-height")) + card_el.css("height",(originalSetHeight*1.5)+"px") + // Set state as expanded card_el.attr("data-expanded","true") } + this.setHeight() + if (this.config.chartType == "choropleth") { + // Leaflet maps need to be refreshed upon container size change + this.map.invalidateSize() + } e.preventDefault() } }) From 22f73afa0d6902678dd1ddde9aa7f2d0a5c12981 Mon Sep 17 00:00:00 2001 From: Mark Silverberg Date: Fri, 22 Jan 2016 18:35:38 -0500 Subject: [PATCH 16/16] tweaks for expand a card functionality --- src/scripts/views/card.js | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/scripts/views/card.js b/src/scripts/views/card.js index ee9b5f7..b5a2cf6 100644 --- a/src/scripts/views/card.js +++ b/src/scripts/views/card.js @@ -106,17 +106,17 @@ module.exports = Backbone.View.extend({ e.preventDefault() }, onClickExpandLink: function (e) { - console.log(this) var card_el = this.$el if (card_el.attr("data-expanded") == "true") { + // Contract card height + card_el.attr("style",card_el.attr("data-original-styles")) + card_el.css("min-height",card_el.attr("data-original-min-height")) + card_el.height(card_el.attr("data-original-height")-15) // not sure why I need to make this smaller than it was // Contract card width var originalClasses = card_el.attr("data-original-classes") card_el.addClass("col-sm-12") card_el.attr("data-original-classes","") card_el.attr("class",originalClasses) - // Contract card height - var originalSetHeight = parseInt(card_el.css("min-height")) - card_el.css("height",(originalSetHeight)+"px") // Set state as not expanded card_el.attr("data-expanded","false") } else { @@ -126,10 +126,10 @@ module.exports = Backbone.View.extend({ card_el.removeClass(originalClasses) card_el.addClass("col-sm-12") // Expand height - var originalInlineStyles = card_el.attr("style") - card_el.attr("data-original-styles",originalInlineStyles) - var originalSetHeight = parseInt(card_el.css("min-height")) - card_el.css("height",(originalSetHeight*1.5)+"px") + card_el.attr("data-original-styles",card_el.attr("style")) + card_el.attr("data-original-height",card_el.height()) + card_el.attr("data-original-min-height",card_el.css("min-height")) + card_el.css("min-height",parseInt(card_el.css("min-height")*1.5)+"px") // Set state as expanded card_el.attr("data-expanded","true") }