From 0c1aef2648bb8d261ec51a192b8b34e5231fb24d Mon Sep 17 00:00:00 2001 From: Kyungmin Kim Date: Mon, 9 Jun 2014 16:54:49 -0700 Subject: [PATCH 01/34] Add graph --- Gruntfile.js | 8 +- app/components/chart.js | 115 ++++++++++++++++++++++++ app/models/transaction.js | 23 +++++ app/templates/activity/transactions.hbs | 2 + bower.json | 2 +- static/less/scaffolding.less | 4 + 6 files changed, 151 insertions(+), 3 deletions(-) create mode 100644 app/components/chart.js diff --git a/Gruntfile.js b/Gruntfile.js index b7ca5aea4..6010d6e74 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -103,7 +103,9 @@ module.exports = function(grunt) { 'static/javascripts/jquery-csv/src/jquery.csv.js', 'static/javascripts/moment/moment.js', 'static/lib/daterangepicker.js', - 'static/javascripts/timepicker/jquery.timepicker.js' + 'static/javascripts/timepicker/jquery.timepicker.js', + 'static/javascripts/d3/d3.min.js', + 'static/javascripts/nvd3/nv.d3.min.js' ], dest: 'build/js/lib-dev.js' }, @@ -129,7 +131,9 @@ module.exports = function(grunt) { 'static/javascripts/jquery-csv/src/jquery.csv.js', 'static/javascripts/moment/min/moment.min.js', 'static/lib/daterangepicker.js', - 'static/javascripts/timepicker/jquery.timepicker.min.js' + 'static/javascripts/timepicker/jquery.timepicker.min.js', + 'static/javascripts/d3/d3.min.js', + 'static/javascripts/nvd3/nv.d3.min.js' ], dest: 'build/js/lib-prod.js' }, diff --git a/app/components/chart.js b/app/components/chart.js new file mode 100644 index 000000000..260c5fc92 --- /dev/null +++ b/app/components/chart.js @@ -0,0 +1,115 @@ +Balanced.ChartComponent = Ember.Component.extend({ + tagName: 'svg', + classNames: ['chart-container'], + + chartData: null, + _chart: null, + _chartModel: null, + + x: null, + y: null, + + chartModel: function() { + return nv.models[this.get('_chartModel')](); + }.property("_chartModel"), + + margin: function() { + return { + top: 0, + bottom: 0, + left: 0, + right: 0 + } + }.property(), + + options: function() { + var self = this; + + return { + showXAxis: true, + showYAxis: true, + showControls: true, + showLegend: false + }; + }.property('showControls', 'showLegend'), + + chart: function() { + var self = this; + var chart = self.get('_chart'); + + if (!chart) { + chart = self.get('chartModel'); + } + + chart.useInteractiveGuideline(true); + + chart.xAxis + .axisLabel('Time (ms)') + .tickFormat(d3.format(',r')); + + chart.yAxis + .axisLabel('Voltage (v)') + .tickFormat(d3.format('.02f')); + + chart.margin(self.get('margin')) + .options(self.get('options')); + + return chart; + }.property('chartModel', 'margin', 'options'), + + didInsertElement: function() { + var self = this; + var $el = self.$(); + var el = $el.get(0); + nv.addGraph(function() { + return self.get('chart'); + }); + }, + + updateChart: function() { + var self = this; + var el = self.get('element'); + var chartData = self.get('chartData'); + var chart = self.get('chart'); + + d3.select(el) + .datum(chartData) + .transition() + .duration(250) + .call(chart); + + self.set('_chart', chart); + nv.utils.windowResize(chart.update); + + }.observes('chartData','chart').on('didInsertElement') +}); + + +Balanced.LineChart = Balanced.ChartComponent.extend({ + _chartModel: "lineChart", + + chartData: function() { + var sin = [], + cos = []; + + for (var i = 0; i < 100; i++) { + sin.push({x: i, y: Math.sin(i/10)}); + cos.push({x: i, y: .5 * Math.cos(i/10)}); + } + + return [ + { + values: sin, + key: 'Sine Wave', + color: '#ff7f0e' + }, + { + values: cos, + key: 'Cosine Wave', + color: '#2ca02c' + } + ]; + }.property() +}); + +Ember.Handlebars.helper('line-chart', Balanced.LineChart); diff --git a/app/models/transaction.js b/app/models/transaction.js index fdfc11d2f..444422ba3 100644 --- a/app/models/transaction.js +++ b/app/models/transaction.js @@ -8,6 +8,29 @@ var Computed = { Balanced.Transaction = Balanced.Model.extend( Balanced.MetaArrayMixin, { + // chartData: function() { + // var sin = [], + // cos = []; + + // for (var i = 0; i < 100; i++) { + // sin.push({x: i, y: Math.sin(i/10)}); + // cos.push({x: i, y: .5 * Math.cos(i/10)}); + // } + + // return [ + // { + // values: sin, + // key: 'Sine Wave', + // color: '#ff7f0e' + // }, + // { + // values: cos, + // key: 'Cosine Wave', + // color: '#2ca02c' + // } + // ]; + // }.property(), + customer: Balanced.Model.belongsTo('customer', 'Balanced.Customer'), events: Balanced.Model.hasMany('events', 'Balanced.Event'), diff --git a/app/templates/activity/transactions.hbs b/app/templates/activity/transactions.hbs index eb3dd7163..e81e50712 100644 --- a/app/templates/activity/transactions.hbs +++ b/app/templates/activity/transactions.hbs @@ -1,3 +1,5 @@ +{{line-chart}} +
diff --git a/bower.json b/bower.json index 912121589..e4f209319 100644 --- a/bower.json +++ b/bower.json @@ -15,7 +15,7 @@ "jquery.cookie": "1.3.1", "strftime": "https://raw.github.com/mjallday/strftime/master/strftime.js", "jquery-csv": "", - "strapped": "0.1.57", + "strapped": "kyungmin/strapped#nvd3", "sinon": "http://sinonjs.org/releases/sinon-1.9.0.js", "qunit": "1.14.0", "moment": "2.6.0", diff --git a/static/less/scaffolding.less b/static/less/scaffolding.less index 00eb6b1e9..ca4cfd6be 100644 --- a/static/less/scaffolding.less +++ b/static/less/scaffolding.less @@ -131,3 +131,7 @@ .hidden { display: none; } + +.chart-container { + height: 300px; +} From 4eccc2aa12bab311e71f86edc7b8b251beafadb1 Mon Sep 17 00:00:00 2001 From: Kyungmin Kim Date: Mon, 9 Jun 2014 18:06:40 -0700 Subject: [PATCH 02/34] Add more properties --- app/components/chart.js | 40 +++++++++++++++++++++--------------- static/less/base.less | 4 +++- static/less/scaffolding.less | 4 ---- 3 files changed, 27 insertions(+), 21 deletions(-) diff --git a/app/components/chart.js b/app/components/chart.js index 260c5fc92..333fc3364 100644 --- a/app/components/chart.js +++ b/app/components/chart.js @@ -15,23 +15,25 @@ Balanced.ChartComponent = Ember.Component.extend({ margin: function() { return { - top: 0, - bottom: 0, - left: 0, - right: 0 + top: 30, + bottom: 50, + left: 60, + right: 20 } }.property(), + width: 500, + height: 300, + xAxisLabel: 'Date', + yAxisLabel: 'Volume', + options: function() { var self = this; - return { - showXAxis: true, - showYAxis: true, - showControls: true, - showLegend: false + width: self.get('width'), + height: self.get('height') }; - }.property('showControls', 'showLegend'), + }.property('width', 'height'), chart: function() { var self = this; @@ -41,18 +43,24 @@ Balanced.ChartComponent = Ember.Component.extend({ chart = self.get('chartModel'); } + chart.showXAxis(true); + chart.showYAxis(true); + chart.showLegend(true); + chart.rightAlignYAxis(false); chart.useInteractiveGuideline(true); + chart.noData('No data available.'); + chart.tooltips(true); chart.xAxis - .axisLabel('Time (ms)') - .tickFormat(d3.format(',r')); + .axisLabel(self.get('xAxisLabel')) + .tickFormat(d3.format(',r')) + .tickPadding(7); chart.yAxis - .axisLabel('Voltage (v)') - .tickFormat(d3.format('.02f')); + .axisLabel(self.get('yAxisLabel')) + .tickFormat(d3.format('.02f')); - chart.margin(self.get('margin')) - .options(self.get('options')); + chart.options(self.get('options')); return chart; }.property('chartModel', 'margin', 'options'), diff --git a/static/less/base.less b/static/less/base.less index feee372a7..5b5cb4b4b 100644 --- a/static/less/base.less +++ b/static/less/base.less @@ -1,5 +1,7 @@ @import "/static/less/bootstrap.less"; +@import "/static/javascripts/nvd3/nv.d3.min.css"; @import "/static/javascripts/strapped/static/less/strapped.less"; + /* * base.less * @@ -15,7 +17,7 @@ html, body { #balanced-app, #balanced-app > div.ember-view { height: 100%; - + #main { height: calc(~"100% - 50px"); } diff --git a/static/less/scaffolding.less b/static/less/scaffolding.less index ca4cfd6be..00eb6b1e9 100644 --- a/static/less/scaffolding.less +++ b/static/less/scaffolding.less @@ -131,7 +131,3 @@ .hidden { display: none; } - -.chart-container { - height: 300px; -} From b18fc6271e2ccdb10b64dd11f4c38883482f456b Mon Sep 17 00:00:00 2001 From: Kyungmin Kim Date: Thu, 12 Jun 2014 11:22:32 -0700 Subject: [PATCH 03/34] Change ChartComponent to ChartView --- app/templates/activity/transactions.hbs | 2 +- app/{components => views}/chart.js | 7 +++---- 2 files changed, 4 insertions(+), 5 deletions(-) rename app/{components => views}/chart.js (92%) diff --git a/app/templates/activity/transactions.hbs b/app/templates/activity/transactions.hbs index e81e50712..00088b1fa 100644 --- a/app/templates/activity/transactions.hbs +++ b/app/templates/activity/transactions.hbs @@ -1,4 +1,4 @@ -{{line-chart}} +{{view Balanced.LineChartView}}
diff --git a/app/components/chart.js b/app/views/chart.js similarity index 92% rename from app/components/chart.js rename to app/views/chart.js index 333fc3364..0a31215fd 100644 --- a/app/components/chart.js +++ b/app/views/chart.js @@ -1,4 +1,4 @@ -Balanced.ChartComponent = Ember.Component.extend({ +Balanced.ChartView = Ember.View.extend({ tagName: 'svg', classNames: ['chart-container'], @@ -23,7 +23,7 @@ Balanced.ChartComponent = Ember.Component.extend({ }.property(), width: 500, - height: 300, + height: 500, xAxisLabel: 'Date', yAxisLabel: 'Volume', @@ -93,7 +93,7 @@ Balanced.ChartComponent = Ember.Component.extend({ }); -Balanced.LineChart = Balanced.ChartComponent.extend({ +Balanced.LineChartView = Balanced.ChartView.extend({ _chartModel: "lineChart", chartData: function() { @@ -120,4 +120,3 @@ Balanced.LineChart = Balanced.ChartComponent.extend({ }.property() }); -Ember.Handlebars.helper('line-chart', Balanced.LineChart); From 125489bea1784b3afe4f0bce94e04ce74569a3dc Mon Sep 17 00:00:00 2001 From: Kyungmin Kim Date: Thu, 12 Jun 2014 12:30:52 -0700 Subject: [PATCH 04/34] Add bar chart --- app/templates/activity/transactions.hbs | 1 + app/views/chart.js | 126 +++++++++++++++--------- 2 files changed, 78 insertions(+), 49 deletions(-) diff --git a/app/templates/activity/transactions.hbs b/app/templates/activity/transactions.hbs index 00088b1fa..ee25dc0c7 100644 --- a/app/templates/activity/transactions.hbs +++ b/app/templates/activity/transactions.hbs @@ -1,4 +1,5 @@ {{view Balanced.LineChartView}} +{{view Balanced.BarChartView}}
diff --git a/app/views/chart.js b/app/views/chart.js index 0a31215fd..d8bd4d267 100644 --- a/app/views/chart.js +++ b/app/views/chart.js @@ -2,39 +2,23 @@ Balanced.ChartView = Ember.View.extend({ tagName: 'svg', classNames: ['chart-container'], - chartData: null, - _chart: null, - _chartModel: null, - - x: null, - y: null, + _chartModel: null, chartModel: function() { return nv.models[this.get('_chartModel')](); }.property("_chartModel"), - margin: function() { - return { - top: 30, - bottom: 50, - left: 60, - right: 20 - } - }.property(), - width: 500, height: 500, xAxisLabel: 'Date', yAxisLabel: 'Volume', - options: function() { - var self = this; - return { - width: self.get('width'), - height: self.get('height') - }; - }.property('width', 'height'), + x: null, + y: null, + chartData: null, + options: {}, + _chart: null, chart: function() { var self = this; var chart = self.get('_chart'); @@ -43,37 +27,11 @@ Balanced.ChartView = Ember.View.extend({ chart = self.get('chartModel'); } - chart.showXAxis(true); - chart.showYAxis(true); - chart.showLegend(true); - chart.rightAlignYAxis(false); - chart.useInteractiveGuideline(true); - chart.noData('No data available.'); - chart.tooltips(true); - - chart.xAxis - .axisLabel(self.get('xAxisLabel')) - .tickFormat(d3.format(',r')) - .tickPadding(7); - - chart.yAxis - .axisLabel(self.get('yAxisLabel')) - .tickFormat(d3.format('.02f')); - chart.options(self.get('options')); return chart; }.property('chartModel', 'margin', 'options'), - didInsertElement: function() { - var self = this; - var $el = self.$(); - var el = $el.get(0); - nv.addGraph(function() { - return self.get('chart'); - }); - }, - updateChart: function() { var self = this; var el = self.get('element'); @@ -89,13 +47,43 @@ Balanced.ChartView = Ember.View.extend({ self.set('_chart', chart); nv.utils.windowResize(chart.update); - }.observes('chartData','chart').on('didInsertElement') + }.observes('chartData','chart').on('didInsertElement'), + + didInsertElement: function() { + var self = this; + var $el = self.$(); + var el = $el.get(0); + nv.addGraph(function() { + return self.get('chart'); + }); + } }); Balanced.LineChartView = Balanced.ChartView.extend({ _chartModel: "lineChart", + options: function() { + return { + width: 500, + showXAxis: true, + showYAxis: true, + showLegend: true, + rightAlignYAxis: false, + useInteractiveGuideline: true, + noData: 'No data available.', + tooltips: true, + }; + // xAxis + // .axisLabel(self.get('xAxisLabel')) + // .tickFormat(d3.format(',r')) + // .tickPadding(7); + + // yAxis + // .axisLabel(self.get('yAxisLabel')) + // .tickFormat(d3.format('.02f')); + }.property(), + chartData: function() { var sin = [], cos = []; @@ -120,3 +108,43 @@ Balanced.LineChartView = Balanced.ChartView.extend({ }.property() }); +Balanced.BarChartView = Balanced.ChartView.extend({ + _chartModel: "discreteBarChart", + + options: function() { + return { + width: 500, + showValues: true, + useInteractiveGuideline: true, + + } + }.property(), + + chartData: function() { + return [{ + key: "Cumulative Return", + values: [ + { + x : "A Label" , + y : -29.765957771107 + }, + { + x : "B Label" , + y : 0 + }, + { + x : "C Label" , + y : 32.807804682612 + }, + { + x : "D Label" , + y : 196.45946739256 + }, + { + x : "E Label" , + y : 0.19434030906893 + }] + }] + }.property() +}); + From 52d759d55b2f508e261140b2b39ed93673b24ca3 Mon Sep 17 00:00:00 2001 From: Kyungmin Kim Date: Thu, 12 Jun 2014 14:57:00 -0700 Subject: [PATCH 05/34] Add horizontal/vertical graph --- app/templates/activity/transactions.hbs | 3 +- app/views/chart.js | 59 +++++++++++++++++++++---- static/less/scaffolding.less | 17 +++++++ 3 files changed, 70 insertions(+), 9 deletions(-) diff --git a/app/templates/activity/transactions.hbs b/app/templates/activity/transactions.hbs index ee25dc0c7..461f22104 100644 --- a/app/templates/activity/transactions.hbs +++ b/app/templates/activity/transactions.hbs @@ -1,5 +1,6 @@ {{view Balanced.LineChartView}} -{{view Balanced.BarChartView}} +{{view Balanced.HorizontalBarChartView}} +{{view Balanced.VerticalBarChartView}}
diff --git a/app/views/chart.js b/app/views/chart.js index d8bd4d267..823a79dae 100644 --- a/app/views/chart.js +++ b/app/views/chart.js @@ -2,7 +2,6 @@ Balanced.ChartView = Ember.View.extend({ tagName: 'svg', classNames: ['chart-container'], - _chartModel: null, chartModel: function() { return nv.models[this.get('_chartModel')](); @@ -62,6 +61,7 @@ Balanced.ChartView = Ember.View.extend({ Balanced.LineChartView = Balanced.ChartView.extend({ _chartModel: "lineChart", + classNames: ['line-chart'], options: function() { return { @@ -72,7 +72,7 @@ Balanced.LineChartView = Balanced.ChartView.extend({ rightAlignYAxis: false, useInteractiveGuideline: true, noData: 'No data available.', - tooltips: true, + tooltips: true }; // xAxis // .axisLabel(self.get('xAxisLabel')) @@ -108,15 +108,58 @@ Balanced.LineChartView = Balanced.ChartView.extend({ }.property() }); -Balanced.BarChartView = Balanced.ChartView.extend({ - _chartModel: "discreteBarChart", +Balanced.HorizontalBarChartView = Balanced.ChartView.extend({ + _chartModel: "discreteBar", + classNames: ['horizontal-bar-chart'], options: function() { return { - width: 500, - showValues: true, + width: 300, useInteractiveGuideline: true, + tooltips: true, + showValues: true + } + }.property(), + chartData: function() { + return [{ + key: "Cumulative Return", + values: [ + { + x : "A Label" , + y : 29.765957771107 + }, + { + x : "B Label" , + y : 0 + }, + { + x : "C Label" , + y : 32.807804682612 + }, + { + x : "D Label" , + y : 96.45946739256 + }, + { + x : "E Label" , + y : 0.19434030906893 + }] + }] + }.property() +}); + +Balanced.VerticalBarChartView = Balanced.ChartView.extend({ + _chartModel: "discreteBar", + classNames: ['vertical-bar-chart'], + + options: function() { + return { + height: 300, + useInteractiveGuideline: true, + tooltips: true, + rectClass: 'triangle', + showValues: true } }.property(), @@ -126,7 +169,7 @@ Balanced.BarChartView = Balanced.ChartView.extend({ values: [ { x : "A Label" , - y : -29.765957771107 + y : 29.765957771107 }, { x : "B Label" , @@ -138,7 +181,7 @@ Balanced.BarChartView = Balanced.ChartView.extend({ }, { x : "D Label" , - y : 196.45946739256 + y : 96.45946739256 }, { x : "E Label" , diff --git a/static/less/scaffolding.less b/static/less/scaffolding.less index 00eb6b1e9..d42454ab8 100644 --- a/static/less/scaffolding.less +++ b/static/less/scaffolding.less @@ -131,3 +131,20 @@ .hidden { display: none; } + + +// graph + +svg { + height: 300px; + + &.horizontal-bar-chart { + .nv-discretebar { + .transform(rotate(90deg) translate(0px, -550px)); + } + + text { + .transform(rotate(-90deg) translate(0px, 30px)); + } + } +} From aed418b70fcc5e2aae961f132ca80257c0a17ea4 Mon Sep 17 00:00:00 2001 From: Kyungmin Kim Date: Thu, 12 Jun 2014 16:29:18 -0700 Subject: [PATCH 06/34] Add triangle bar chart --- Gruntfile.js | 6 +- app/views/chart.js | 120 +++++------ static/lib/nvd3-triangle-bar.js | 355 ++++++++++++++++++++++++++++++++ 3 files changed, 415 insertions(+), 66 deletions(-) create mode 100644 static/lib/nvd3-triangle-bar.js diff --git a/Gruntfile.js b/Gruntfile.js index 6c32242d9..c8df37545 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -106,7 +106,8 @@ module.exports = function(grunt) { 'static/lib/daterangepicker.js', 'static/javascripts/timepicker/jquery.timepicker.js', 'static/javascripts/d3/d3.min.js', - 'static/javascripts/nvd3/nv.d3.min.js' + 'static/javascripts/nvd3/nv.d3.min.js', + 'static/lib/nvd3-triangle-bar.js' ], dest: 'build/js/lib-dev.js' }, @@ -135,7 +136,8 @@ module.exports = function(grunt) { 'static/lib/daterangepicker.js', 'static/javascripts/timepicker/jquery.timepicker.min.js', 'static/javascripts/d3/d3.min.js', - 'static/javascripts/nvd3/nv.d3.min.js' + 'static/javascripts/nvd3/nv.d3.min.js', + 'static/lib/nvd3-triangle-bar.js' ], dest: 'build/js/lib-prod.js' }, diff --git a/app/views/chart.js b/app/views/chart.js index 823a79dae..0bf5b0aa6 100644 --- a/app/views/chart.js +++ b/app/views/chart.js @@ -28,7 +28,7 @@ Balanced.ChartView = Ember.View.extend({ chart.options(self.get('options')); - return chart; + return chart; }.property('chartModel', 'margin', 'options'), updateChart: function() { @@ -46,7 +46,7 @@ Balanced.ChartView = Ember.View.extend({ self.set('_chart', chart); nv.utils.windowResize(chart.update); - }.observes('chartData','chart').on('didInsertElement'), + }.observes('chartData', 'chart').on('didInsertElement'), didInsertElement: function() { var self = this; @@ -89,22 +89,25 @@ Balanced.LineChartView = Balanced.ChartView.extend({ cos = []; for (var i = 0; i < 100; i++) { - sin.push({x: i, y: Math.sin(i/10)}); - cos.push({x: i, y: .5 * Math.cos(i/10)}); + sin.push({ + x: i, + y: Math.sin(i / 10) + }); + cos.push({ + x: i, + y: .5 * Math.cos(i / 10) + }); } - return [ - { - values: sin, - key: 'Sine Wave', - color: '#ff7f0e' - }, - { - values: cos, - key: 'Cosine Wave', - color: '#2ca02c' - } - ]; + return [{ + values: sin, + key: 'Sine Wave', + color: '#ff7f0e' + }, { + values: cos, + key: 'Cosine Wave', + color: '#2ca02c' + }]; }.property() }); @@ -122,35 +125,30 @@ Balanced.HorizontalBarChartView = Balanced.ChartView.extend({ }.property(), chartData: function() { - return [{ + return [{ key: "Cumulative Return", - values: [ - { - x : "A Label" , - y : 29.765957771107 - }, - { - x : "B Label" , - y : 0 - }, - { - x : "C Label" , - y : 32.807804682612 - }, - { - x : "D Label" , - y : 96.45946739256 - }, - { - x : "E Label" , - y : 0.19434030906893 - }] - }] + values: [{ + x: "A Label", + y: 29.765957771107 + }, { + x: "B Label", + y: 0 + }, { + x: "C Label", + y: 32.807804682612 + }, { + x: "D Label", + y: 96.45946739256 + }, { + x: "E Label", + y: 0.19434030906893 + }] + }] }.property() }); Balanced.VerticalBarChartView = Balanced.ChartView.extend({ - _chartModel: "discreteBar", + _chartModel: "triangleBar", classNames: ['vertical-bar-chart'], options: function() { @@ -164,30 +162,24 @@ Balanced.VerticalBarChartView = Balanced.ChartView.extend({ }.property(), chartData: function() { - return [{ + return [{ key: "Cumulative Return", - values: [ - { - x : "A Label" , - y : 29.765957771107 - }, - { - x : "B Label" , - y : 0 - }, - { - x : "C Label" , - y : 32.807804682612 - }, - { - x : "D Label" , - y : 96.45946739256 - }, - { - x : "E Label" , - y : 0.19434030906893 - }] - }] + values: [{ + x: "A Label", + y: 29.765957771107 + }, { + x: "B Label", + y: 0 + }, { + x: "C Label", + y: 32.807804682612 + }, { + x: "D Label", + y: 96.45946739256 + }, { + x: "E Label", + y: 0.19434030906893 + }] + }] }.property() }); - diff --git a/static/lib/nvd3-triangle-bar.js b/static/lib/nvd3-triangle-bar.js new file mode 100644 index 000000000..825da0034 --- /dev/null +++ b/static/lib/nvd3-triangle-bar.js @@ -0,0 +1,355 @@ +// Note: Custom chart model based on nv.models.discreteBar + +(function () { + nv.models.triangleBar = function() { + "use strict"; + //============================================================ + // Public Variables with Default Settings + //------------------------------------------------------------ + + var margin = {top: 0, right: 0, bottom: 0, left: 0} + , width = 960 + , height = 500 + , id = Math.floor(Math.random() * 10000) //Create semi-unique ID in case user doesn't select one + , x = d3.scale.ordinal() + , y = d3.scale.linear() + , getX = function(d) { return d.x } + , getY = function(d) { return d.y } + , forceY = [0] // 0 is forced by default.. this makes sense for the majority of bar graphs... user can always do chart.forceY([]) to remove + , color = nv.utils.defaultColor() + , showValues = false + , valueFormat = d3.format(',.2f') + , xDomain + , yDomain + , xRange + , yRange + , dispatch = d3.dispatch('chartClick', 'elementClick', 'elementDblClick', 'elementMouseover', 'elementMouseout') + , rectClass = 'trianglebar' + ; + + //============================================================ + + + //============================================================ + // Private Variables + //------------------------------------------------------------ + + var x0, y0; + + //============================================================ + + + function chart(selection) { + selection.each(function(data) { + var availableWidth = width - margin.left - margin.right, + availableHeight = height - margin.top - margin.bottom, + container = d3.select(this); + + + //add series index to each data point for reference + data.forEach(function(series, i) { + series.values.forEach(function(point) { + point.series = i; + }); + }); + + + //------------------------------------------------------------ + // Setup Scales + + // remap and flatten the data for use in calculating the scales' domains + var seriesData = (xDomain && yDomain) ? [] : // if we know xDomain and yDomain, no need to calculate + data.map(function(d) { + return d.values.map(function(d,i) { + return { x: getX(d,i), y: getY(d,i), y0: d.y0 } + }) + }); + + x .domain(xDomain || d3.merge(seriesData).map(function(d) { return d.x })) + .rangeBands(xRange || [0, availableWidth], .1); + + y .domain(yDomain || d3.extent(d3.merge(seriesData).map(function(d) { return d.y }).concat(forceY))); + + + // If showValues, pad the Y axis range to account for label height + if (showValues) y.range(yRange || [availableHeight - (y.domain()[0] < 0 ? 12 : 0), y.domain()[1] > 0 ? 12 : 0]); + else y.range(yRange || [availableHeight, 0]); + + //store old scales if they exist + x0 = x0 || x; + y0 = y0 || y.copy().range([y(0),y(0)]); + + //------------------------------------------------------------ + + + //------------------------------------------------------------ + // Setup containers and skeleton of chart + + var wrap = container.selectAll('g.nv-wrap.nv-trianglebar').data([data]); + var wrapEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-trianglebar'); + var gEnter = wrapEnter.append('g'); + var g = wrap.select('g'); + + gEnter.append('g').attr('class', 'nv-groups'); + + wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')'); + + //------------------------------------------------------------ + + + + //TODO: by definition, the discrete bar should not have multiple groups, will modify/remove later + var groups = wrap.select('.nv-groups').selectAll('.nv-group') + .data(function(d) { return d }, function(d) { return d.key }); + groups.enter().append('g') + .style('stroke-opacity', 1e-6) + .style('fill-opacity', 1e-6); + groups.exit() + .transition() + .style('stroke-opacity', 1e-6) + .style('fill-opacity', 1e-6) + .remove(); + groups + .attr('class', function(d,i) { return 'nv-group nv-series-' + i }) + .classed('hover', function(d) { return d.hover }); + groups + .transition() + .style('stroke-opacity', 1) + .style('fill-opacity', .75); + + + var bars = groups.selectAll('g.nv-bar') + .data(function(d) { return d.values }); + + bars.exit().remove(); + + + var barsEnter = bars.enter().append('g') + .attr('transform', function(d,i,j) { + return 'translate(' + (x(getX(d,i)) + x.rangeBand() * .05 ) + ', ' + y(0) + ')' + }) + .on('mouseover', function(d,i) { //TODO: figure out why j works above, but not here + d3.select(this).classed('hover', true); + dispatch.elementMouseover({ + value: getY(d,i), + point: d, + series: data[d.series], + pos: [x(getX(d,i)) + (x.rangeBand() * (d.series + .5) / data.length), y(getY(d,i))], // TODO: Figure out why the value appears to be shifted + pointIndex: i, + seriesIndex: d.series, + e: d3.event + }); + }) + .on('mouseout', function(d,i) { + d3.select(this).classed('hover', false); + dispatch.elementMouseout({ + value: getY(d,i), + point: d, + series: data[d.series], + pointIndex: i, + seriesIndex: d.series, + e: d3.event + }); + }) + .on('click', function(d,i) { + dispatch.elementClick({ + value: getY(d,i), + point: d, + series: data[d.series], + pos: [x(getX(d,i)) + (x.rangeBand() * (d.series + .5) / data.length), y(getY(d,i))], // TODO: Figure out why the value appears to be shifted + pointIndex: i, + seriesIndex: d.series, + e: d3.event + }); + d3.event.stopPropagation(); + }) + .on('dblclick', function(d,i) { + dispatch.elementDblClick({ + value: getY(d,i), + point: d, + series: data[d.series], + pos: [x(getX(d,i)) + (x.rangeBand() * (d.series + .5) / data.length), y(getY(d,i))], // TODO: Figure out why the value appears to be shifted + pointIndex: i, + seriesIndex: d.series, + e: d3.event + }); + d3.event.stopPropagation(); + }); + + // Note: Override rect drawing + // barsEnter.append('rect') + // .attr('height', 0) + // .attr('width', x.rangeBand() * .9 / data.length ) + + if (showValues) { + barsEnter.append('text') + .attr('text-anchor', 'middle') + ; + + bars.select('text') + .text(function(d,i) { return valueFormat(getY(d,i)) }) + .transition() + .attr('x', x.rangeBand() * .9 / 2) + .attr('y', function(d,i) { return getY(d,i) < 0 ? y(getY(d,i)) - y(0) + 12 : -4 }) + + ; + } else { + bars.selectAll('text').remove(); + } + + bars + .attr('class', function(d,i) { return getY(d,i) < 0 ? 'nv-bar negative' : 'nv-bar positive' }) + .style('fill', function(d,i) { return d.color || color(d,i) }) + .style('stroke', function(d,i) { return d.color || color(d,i) }) + // Note: Override rect drawing + .append('path') + .attr('d', function(d, i) { + var dy = Math.max(Math.abs(y(getY(d,i)) - y((yDomain && yDomain[0]) || 0)) || 1); + return 'M 60 0 L 0 ' + dy + ' L 120 ' + dy + ' Z'; + }); + + bars.transition() + //.delay(function(d,i) { return i * 1200 / data[0].values.length }) + .attr('transform', function(d,i) { + var left = x(getX(d,i)) + x.rangeBand() * .05, + top = getY(d,i) < 0 ? + y(0) : + y(0) - y(getY(d,i)) < 1 ? + y(0) - 1 : //make 1 px positive bars show up above y=0 + y(getY(d,i)); + + return 'translate(' + left + ', ' + top + ')' + }) + .select('rect') + .attr('height', function(d,i) { + return Math.max(Math.abs(y(getY(d,i)) - y((yDomain && yDomain[0]) || 0)) || 1) + }); + + + //store old scales for use in transitions on update + x0 = x.copy(); + y0 = y.copy(); + + }); + + return chart; + } + + + //============================================================ + // Expose Public Variables + //------------------------------------------------------------ + + chart.dispatch = dispatch; + + chart.options = nv.utils.optionsFunc.bind(chart); + + chart.x = function(_) { + if (!arguments.length) return getX; + getX = _; + return chart; + }; + + chart.y = function(_) { + if (!arguments.length) return getY; + getY = _; + return chart; + }; + + chart.margin = function(_) { + if (!arguments.length) return margin; + margin.top = typeof _.top != 'undefined' ? _.top : margin.top; + margin.right = typeof _.right != 'undefined' ? _.right : margin.right; + margin.bottom = typeof _.bottom != 'undefined' ? _.bottom : margin.bottom; + margin.left = typeof _.left != 'undefined' ? _.left : margin.left; + return chart; + }; + + chart.width = function(_) { + if (!arguments.length) return width; + width = _; + return chart; + }; + + chart.height = function(_) { + if (!arguments.length) return height; + height = _; + return chart; + }; + + chart.xScale = function(_) { + if (!arguments.length) return x; + x = _; + return chart; + }; + + chart.yScale = function(_) { + if (!arguments.length) return y; + y = _; + return chart; + }; + + chart.xDomain = function(_) { + if (!arguments.length) return xDomain; + xDomain = _; + return chart; + }; + + chart.yDomain = function(_) { + if (!arguments.length) return yDomain; + yDomain = _; + return chart; + }; + + chart.xRange = function(_) { + if (!arguments.length) return xRange; + xRange = _; + return chart; + }; + + chart.yRange = function(_) { + if (!arguments.length) return yRange; + yRange = _; + return chart; + }; + + chart.forceY = function(_) { + if (!arguments.length) return forceY; + forceY = _; + return chart; + }; + + chart.color = function(_) { + if (!arguments.length) return color; + color = nv.utils.getColor(_); + return chart; + }; + + chart.id = function(_) { + if (!arguments.length) return id; + id = _; + return chart; + }; + + chart.showValues = function(_) { + if (!arguments.length) return showValues; + showValues = _; + return chart; + }; + + chart.valueFormat= function(_) { + if (!arguments.length) return valueFormat; + valueFormat = _; + return chart; + }; + + chart.rectClass= function(_) { + if (!arguments.length) return rectClass; + rectClass = _; + return chart; + }; + //============================================================ + + return chart; + } +})(); From e5e078433eb469b1024f0d38887dd1782920d5a9 Mon Sep 17 00:00:00 2001 From: Kyungmin Kim Date: Thu, 12 Jun 2014 16:39:59 -0700 Subject: [PATCH 07/34] Move charts to overview page --- app/controllers/marketplace.js | 1 + app/routes/router.js | 2 + app/templates/activity/transactions.hbs | 4 - app/templates/components/meta.hbs | 15 -- app/templates/marketplace/overview.hbs | 9 + app/views/chart.js | 185 ------------------ app/views/charts/chart.js | 59 ++++++ app/views/charts/horizontal-bar-chart.js | 35 ++++ app/views/charts/line-chart.js | 51 +++++ app/views/charts/vertical-bar-chart.js | 36 ++++ app/views/sidebar/marketplace_sidebar_view.js | 5 + 11 files changed, 198 insertions(+), 204 deletions(-) delete mode 100644 app/templates/components/meta.hbs create mode 100644 app/templates/marketplace/overview.hbs delete mode 100644 app/views/chart.js create mode 100644 app/views/charts/chart.js create mode 100644 app/views/charts/horizontal-bar-chart.js create mode 100644 app/views/charts/line-chart.js create mode 100644 app/views/charts/vertical-bar-chart.js diff --git a/app/controllers/marketplace.js b/app/controllers/marketplace.js index 16808dcbc..9d7e6d602 100644 --- a/app/controllers/marketplace.js +++ b/app/controllers/marketplace.js @@ -13,6 +13,7 @@ Balanced.MarketplaceController = Balanced.ObjectController.extend( needs: ['application'], + overviewSelected: Computed.isSelected('marketplace.overview'), transactionSelected: Computed.isSelected('activity.transactions', 'credits', 'debits', 'holds', 'refunds', 'reversals'), orderSelected: Computed.isSelected('activity.orders', 'orders'), customerSelected: Computed.isSelected('marketplace.customers', 'customer'), diff --git a/app/routes/router.js b/app/routes/router.js index 84c8a9fb0..87d70d1a2 100644 --- a/app/routes/router.js +++ b/app/routes/router.js @@ -96,6 +96,8 @@ Balanced.Router.map(function() { path: 'invoices' }); + this.route('overview'); + this.resource('activity', { path: '/' }, function() { diff --git a/app/templates/activity/transactions.hbs b/app/templates/activity/transactions.hbs index 474f60f70..e4aef3f35 100644 --- a/app/templates/activity/transactions.hbs +++ b/app/templates/activity/transactions.hbs @@ -1,7 +1,3 @@ -{{view Balanced.LineChartView}} -{{view Balanced.HorizontalBarChartView}} -{{view Balanced.VerticalBarChartView}} -
diff --git a/app/templates/components/meta.hbs b/app/templates/components/meta.hbs deleted file mode 100644 index 998fb55dc..000000000 --- a/app/templates/components/meta.hbs +++ /dev/null @@ -1,15 +0,0 @@ -
-
-

Meta

-
- {{#if view.meta_array}} -
- {{#each meta in view.meta_array}} -
{{meta.key}}
-
{{meta.value}}
- {{/each}} -
- {{else}} - none - {{/if}} -
diff --git a/app/templates/marketplace/overview.hbs b/app/templates/marketplace/overview.hbs new file mode 100644 index 000000000..fc1f97701 --- /dev/null +++ b/app/templates/marketplace/overview.hbs @@ -0,0 +1,9 @@ +
+

+ {{pageTitle}} +

+
+ +{{view Balanced.LineChartView}} +{{view Balanced.HorizontalBarChartView}} +{{view Balanced.VerticalBarChartView}} diff --git a/app/views/chart.js b/app/views/chart.js deleted file mode 100644 index 0bf5b0aa6..000000000 --- a/app/views/chart.js +++ /dev/null @@ -1,185 +0,0 @@ -Balanced.ChartView = Ember.View.extend({ - tagName: 'svg', - classNames: ['chart-container'], - - _chartModel: null, - chartModel: function() { - return nv.models[this.get('_chartModel')](); - }.property("_chartModel"), - - width: 500, - height: 500, - xAxisLabel: 'Date', - yAxisLabel: 'Volume', - - x: null, - y: null, - chartData: null, - options: {}, - - _chart: null, - chart: function() { - var self = this; - var chart = self.get('_chart'); - - if (!chart) { - chart = self.get('chartModel'); - } - - chart.options(self.get('options')); - - return chart; - }.property('chartModel', 'margin', 'options'), - - updateChart: function() { - var self = this; - var el = self.get('element'); - var chartData = self.get('chartData'); - var chart = self.get('chart'); - - d3.select(el) - .datum(chartData) - .transition() - .duration(250) - .call(chart); - - self.set('_chart', chart); - nv.utils.windowResize(chart.update); - - }.observes('chartData', 'chart').on('didInsertElement'), - - didInsertElement: function() { - var self = this; - var $el = self.$(); - var el = $el.get(0); - nv.addGraph(function() { - return self.get('chart'); - }); - } -}); - - -Balanced.LineChartView = Balanced.ChartView.extend({ - _chartModel: "lineChart", - classNames: ['line-chart'], - - options: function() { - return { - width: 500, - showXAxis: true, - showYAxis: true, - showLegend: true, - rightAlignYAxis: false, - useInteractiveGuideline: true, - noData: 'No data available.', - tooltips: true - }; - // xAxis - // .axisLabel(self.get('xAxisLabel')) - // .tickFormat(d3.format(',r')) - // .tickPadding(7); - - // yAxis - // .axisLabel(self.get('yAxisLabel')) - // .tickFormat(d3.format('.02f')); - }.property(), - - chartData: function() { - var sin = [], - cos = []; - - for (var i = 0; i < 100; i++) { - sin.push({ - x: i, - y: Math.sin(i / 10) - }); - cos.push({ - x: i, - y: .5 * Math.cos(i / 10) - }); - } - - return [{ - values: sin, - key: 'Sine Wave', - color: '#ff7f0e' - }, { - values: cos, - key: 'Cosine Wave', - color: '#2ca02c' - }]; - }.property() -}); - -Balanced.HorizontalBarChartView = Balanced.ChartView.extend({ - _chartModel: "discreteBar", - classNames: ['horizontal-bar-chart'], - - options: function() { - return { - width: 300, - useInteractiveGuideline: true, - tooltips: true, - showValues: true - } - }.property(), - - chartData: function() { - return [{ - key: "Cumulative Return", - values: [{ - x: "A Label", - y: 29.765957771107 - }, { - x: "B Label", - y: 0 - }, { - x: "C Label", - y: 32.807804682612 - }, { - x: "D Label", - y: 96.45946739256 - }, { - x: "E Label", - y: 0.19434030906893 - }] - }] - }.property() -}); - -Balanced.VerticalBarChartView = Balanced.ChartView.extend({ - _chartModel: "triangleBar", - classNames: ['vertical-bar-chart'], - - options: function() { - return { - height: 300, - useInteractiveGuideline: true, - tooltips: true, - rectClass: 'triangle', - showValues: true - } - }.property(), - - chartData: function() { - return [{ - key: "Cumulative Return", - values: [{ - x: "A Label", - y: 29.765957771107 - }, { - x: "B Label", - y: 0 - }, { - x: "C Label", - y: 32.807804682612 - }, { - x: "D Label", - y: 96.45946739256 - }, { - x: "E Label", - y: 0.19434030906893 - }] - }] - }.property() -}); diff --git a/app/views/charts/chart.js b/app/views/charts/chart.js new file mode 100644 index 000000000..99463be57 --- /dev/null +++ b/app/views/charts/chart.js @@ -0,0 +1,59 @@ +Balanced.ChartView = Ember.View.extend({ + tagName: 'svg', + classNames: ['chart-container'], + + _chartModel: null, + chartModel: function() { + return nv.models[this.get('_chartModel')](); + }.property("_chartModel"), + + width: 500, + height: 500, + xAxisLabel: 'Date', + yAxisLabel: 'Volume', + + x: null, + y: null, + chartData: null, + options: {}, + + _chart: null, + chart: function() { + var self = this; + var chart = self.get('_chart'); + + if (!chart) { + chart = self.get('chartModel'); + } + + chart.options(self.get('options')); + + return chart; + }.property('chartModel', 'margin', 'options'), + + updateChart: function() { + var self = this; + var el = self.get('element'); + var chartData = self.get('chartData'); + var chart = self.get('chart'); + + d3.select(el) + .datum(chartData) + .transition() + .duration(250) + .call(chart); + + self.set('_chart', chart); + nv.utils.windowResize(chart.update); + + }.observes('chartData', 'chart').on('didInsertElement'), + + didInsertElement: function() { + var self = this; + var $el = self.$(); + var el = $el.get(0); + nv.addGraph(function() { + return self.get('chart'); + }); + } +}); diff --git a/app/views/charts/horizontal-bar-chart.js b/app/views/charts/horizontal-bar-chart.js new file mode 100644 index 000000000..205c987bf --- /dev/null +++ b/app/views/charts/horizontal-bar-chart.js @@ -0,0 +1,35 @@ +Balanced.HorizontalBarChartView = Balanced.ChartView.extend({ + _chartModel: "discreteBar", + classNames: ['horizontal-bar-chart'], + + options: function() { + return { + width: 300, + useInteractiveGuideline: true, + tooltips: true, + showValues: true + } + }.property(), + + chartData: function() { + return [{ + key: "Cumulative Return", + values: [{ + x: "A Label", + y: 29.765957771107 + }, { + x: "B Label", + y: 0 + }, { + x: "C Label", + y: 32.807804682612 + }, { + x: "D Label", + y: 96.45946739256 + }, { + x: "E Label", + y: 0.19434030906893 + }] + }] + }.property() +}); diff --git a/app/views/charts/line-chart.js b/app/views/charts/line-chart.js new file mode 100644 index 000000000..992e37ca5 --- /dev/null +++ b/app/views/charts/line-chart.js @@ -0,0 +1,51 @@ +Balanced.LineChartView = Balanced.ChartView.extend({ + _chartModel: "lineChart", + classNames: ['line-chart'], + + options: function() { + return { + width: 500, + showXAxis: true, + showYAxis: true, + showLegend: true, + rightAlignYAxis: false, + useInteractiveGuideline: true, + noData: 'No data available.', + tooltips: true + }; + // xAxis + // .axisLabel(self.get('xAxisLabel')) + // .tickFormat(d3.format(',r')) + // .tickPadding(7); + + // yAxis + // .axisLabel(self.get('yAxisLabel')) + // .tickFormat(d3.format('.02f')); + }.property(), + + chartData: function() { + var sin = [], + cos = []; + + for (var i = 0; i < 100; i++) { + sin.push({ + x: i, + y: Math.sin(i / 10) + }); + cos.push({ + x: i, + y: .5 * Math.cos(i / 10) + }); + } + + return [{ + values: sin, + key: 'Sine Wave', + color: '#ff7f0e' + }, { + values: cos, + key: 'Cosine Wave', + color: '#2ca02c' + }]; + }.property() +}); diff --git a/app/views/charts/vertical-bar-chart.js b/app/views/charts/vertical-bar-chart.js new file mode 100644 index 000000000..7159956ed --- /dev/null +++ b/app/views/charts/vertical-bar-chart.js @@ -0,0 +1,36 @@ +Balanced.VerticalBarChartView = Balanced.ChartView.extend({ + _chartModel: "triangleBar", + classNames: ['vertical-bar-chart'], + + options: function() { + return { + height: 300, + useInteractiveGuideline: true, + tooltips: true, + rectClass: 'triangle', + showValues: true + } + }.property(), + + chartData: function() { + return [{ + key: "Cumulative Return", + values: [{ + x: "A Label", + y: 29.765957771107 + }, { + x: "B Label", + y: 0 + }, { + x: "C Label", + y: 32.807804682612 + }, { + x: "D Label", + y: 96.45946739256 + }, { + x: "E Label", + y: 0.19434030906893 + }] + }] + }.property() +}); diff --git a/app/views/sidebar/marketplace_sidebar_view.js b/app/views/sidebar/marketplace_sidebar_view.js index 2113204a9..e761de056 100644 --- a/app/views/sidebar/marketplace_sidebar_view.js +++ b/app/views/sidebar/marketplace_sidebar_view.js @@ -1,4 +1,9 @@ var SIDEBAR_ITEMS = [{ + linkText: "Overview", + linkIcon: "icon-overview", + routeName: "marketplace.overview", + isSelectedBinding: "controller.marketplace.overviewSelected" +}, { linkText: "Payments", linkIcon: "icon-payments", routeName: "activity.transactions", From bd6b29e1020778ad39484536d3f23b011bd849fc Mon Sep 17 00:00:00 2001 From: Kyungmin Kim Date: Thu, 12 Jun 2014 17:04:30 -0700 Subject: [PATCH 08/34] Redirect to overview page --- app/routes/_base.js | 1 - app/routes/index.js | 2 +- app/routes/marketplaces/index.js | 1 - app/routes/marketplaces/marketplace.js | 4 ++++ app/routes/router.js | 3 +-- app/routes/start.js | 2 +- 6 files changed, 7 insertions(+), 6 deletions(-) delete mode 100644 app/routes/marketplaces/index.js diff --git a/app/routes/_base.js b/app/routes/_base.js index 01efcbce9..c3eac7306 100644 --- a/app/routes/_base.js +++ b/app/routes/_base.js @@ -58,7 +58,6 @@ Balanced.ControllerRoute = Balanced.AuthRoute.extend({ Balanced.RedirectRoute = function redirectRoute(routeName, modelFor, baseRoute) { baseRoute = baseRoute || Balanced.AuthRoute; modelFor = modelFor || 'marketplace'; - return baseRoute.extend({ redirect: function() { this.transitionTo(routeName, this.modelFor(modelFor)); diff --git a/app/routes/index.js b/app/routes/index.js index 8871bdb25..a475a485f 100644 --- a/app/routes/index.js +++ b/app/routes/index.js @@ -2,7 +2,7 @@ Balanced.IndexRoute = Balanced.AuthRoute.extend({ redirect: function() { var marketplaceUri = this.get('auth').getLastUsedMarketplaceUri(); if (marketplaceUri) { - this.transitionTo('activity', Balanced.Marketplace.find(marketplaceUri)); + this.transitionTo('marketplace.overview', Balanced.Marketplace.find(marketplaceUri)); } else { this.transitionTo('marketplaces'); } diff --git a/app/routes/marketplaces/index.js b/app/routes/marketplaces/index.js deleted file mode 100644 index 3b0f89a63..000000000 --- a/app/routes/marketplaces/index.js +++ /dev/null @@ -1 +0,0 @@ -Balanced.MarketplaceIndexRoute = Balanced.RedirectRoute('activity'); diff --git a/app/routes/marketplaces/marketplace.js b/app/routes/marketplaces/marketplace.js index 0a301e95f..2b16b046f 100644 --- a/app/routes/marketplaces/marketplace.js +++ b/app/routes/marketplaces/marketplace.js @@ -5,6 +5,10 @@ Balanced.MarketplaceRoute = Balanced.AuthRoute.extend({ return marketplace; }, + redirect: function() { + this.transitionTo('marketplace.overview'); + }, + afterModel: function(model) { Balanced.Utils.setCurrentMarketplace(model); }, diff --git a/app/routes/router.js b/app/routes/router.js index 87d70d1a2..38059cd37 100644 --- a/app/routes/router.js +++ b/app/routes/router.js @@ -71,6 +71,7 @@ Balanced.Router.map(function() { this.resource('marketplace', { path: '/:marketplace_id' }, function() { + this.route('overview'); this.route('settings'); this.route('add_customer'); this.route('initial_deposit'); @@ -96,8 +97,6 @@ Balanced.Router.map(function() { path: 'invoices' }); - this.route('overview'); - this.resource('activity', { path: '/' }, function() { diff --git a/app/routes/start.js b/app/routes/start.js index 203e98edd..2b5c514b3 100644 --- a/app/routes/start.js +++ b/app/routes/start.js @@ -31,7 +31,7 @@ Balanced.StartRoute = Balanced.Route.extend({ }, actions: { goToDashboard: function() { - this.transitionTo('activity', this.currentModel); + this.transitionTo('marketplace.overview', this.currentModel); }, goToDocumentation: function() { window.location = 'https://docs.balancedpayments.com'; From 11d62a40917d50dbdab61b51f72b8f86e7a9b380 Mon Sep 17 00:00:00 2001 From: Kyungmin Kim Date: Thu, 12 Jun 2014 17:16:31 -0700 Subject: [PATCH 09/34] Beautify --- app/views/charts/chart.js | 6 +++--- app/views/charts/horizontal-bar-chart.js | 6 +++--- app/views/charts/line-chart.js | 8 -------- app/views/charts/vertical-bar-chart.js | 6 +++--- 4 files changed, 9 insertions(+), 17 deletions(-) diff --git a/app/views/charts/chart.js b/app/views/charts/chart.js index 99463be57..5f6d61e71 100644 --- a/app/views/charts/chart.js +++ b/app/views/charts/chart.js @@ -4,7 +4,7 @@ Balanced.ChartView = Ember.View.extend({ _chartModel: null, chartModel: function() { - return nv.models[this.get('_chartModel')](); + return window.nv.models[this.get('_chartModel')](); }.property("_chartModel"), width: 500, @@ -44,7 +44,7 @@ Balanced.ChartView = Ember.View.extend({ .call(chart); self.set('_chart', chart); - nv.utils.windowResize(chart.update); + window.nv.utils.windowResize(chart.update); }.observes('chartData', 'chart').on('didInsertElement'), @@ -52,7 +52,7 @@ Balanced.ChartView = Ember.View.extend({ var self = this; var $el = self.$(); var el = $el.get(0); - nv.addGraph(function() { + window.nv.addGraph(function() { return self.get('chart'); }); } diff --git a/app/views/charts/horizontal-bar-chart.js b/app/views/charts/horizontal-bar-chart.js index 205c987bf..558118378 100644 --- a/app/views/charts/horizontal-bar-chart.js +++ b/app/views/charts/horizontal-bar-chart.js @@ -8,7 +8,7 @@ Balanced.HorizontalBarChartView = Balanced.ChartView.extend({ useInteractiveGuideline: true, tooltips: true, showValues: true - } + }; }.property(), chartData: function() { @@ -29,7 +29,7 @@ Balanced.HorizontalBarChartView = Balanced.ChartView.extend({ }, { x: "E Label", y: 0.19434030906893 - }] - }] + }]; + }]; }.property() }); diff --git a/app/views/charts/line-chart.js b/app/views/charts/line-chart.js index 992e37ca5..24d72e6d9 100644 --- a/app/views/charts/line-chart.js +++ b/app/views/charts/line-chart.js @@ -13,14 +13,6 @@ Balanced.LineChartView = Balanced.ChartView.extend({ noData: 'No data available.', tooltips: true }; - // xAxis - // .axisLabel(self.get('xAxisLabel')) - // .tickFormat(d3.format(',r')) - // .tickPadding(7); - - // yAxis - // .axisLabel(self.get('yAxisLabel')) - // .tickFormat(d3.format('.02f')); }.property(), chartData: function() { diff --git a/app/views/charts/vertical-bar-chart.js b/app/views/charts/vertical-bar-chart.js index 7159956ed..d057e96c5 100644 --- a/app/views/charts/vertical-bar-chart.js +++ b/app/views/charts/vertical-bar-chart.js @@ -9,7 +9,7 @@ Balanced.VerticalBarChartView = Balanced.ChartView.extend({ tooltips: true, rectClass: 'triangle', showValues: true - } + }; }.property(), chartData: function() { @@ -30,7 +30,7 @@ Balanced.VerticalBarChartView = Balanced.ChartView.extend({ }, { x: "E Label", y: 0.19434030906893 - }] - }] + }]; + }]; }.property() }); From 7bd9c9acbcd6080272c6509b826c7a5efbf6606a Mon Sep 17 00:00:00 2001 From: Kyungmin Kim Date: Thu, 12 Jun 2014 17:23:56 -0700 Subject: [PATCH 10/34] Beautify --- app/views/charts/horizontal-bar-chart.js | 2 +- app/views/charts/vertical-bar-chart.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/app/views/charts/horizontal-bar-chart.js b/app/views/charts/horizontal-bar-chart.js index 558118378..31496b9cb 100644 --- a/app/views/charts/horizontal-bar-chart.js +++ b/app/views/charts/horizontal-bar-chart.js @@ -29,7 +29,7 @@ Balanced.HorizontalBarChartView = Balanced.ChartView.extend({ }, { x: "E Label", y: 0.19434030906893 - }]; + }] }]; }.property() }); diff --git a/app/views/charts/vertical-bar-chart.js b/app/views/charts/vertical-bar-chart.js index d057e96c5..8b7f64fec 100644 --- a/app/views/charts/vertical-bar-chart.js +++ b/app/views/charts/vertical-bar-chart.js @@ -9,7 +9,7 @@ Balanced.VerticalBarChartView = Balanced.ChartView.extend({ tooltips: true, rectClass: 'triangle', showValues: true - }; + } }.property(), chartData: function() { @@ -30,7 +30,7 @@ Balanced.VerticalBarChartView = Balanced.ChartView.extend({ }, { x: "E Label", y: 0.19434030906893 - }]; + }] }]; }.property() }); From 81be0a5b069c21d3e91d199f604bbf1dd19e1925 Mon Sep 17 00:00:00 2001 From: Kyungmin Kim Date: Thu, 12 Jun 2014 17:40:24 -0700 Subject: [PATCH 11/34] Add overview title and date filter --- app/controllers/overview.js | 7 +++++++ app/templates/marketplace/overview.hbs | 9 ++++++--- 2 files changed, 13 insertions(+), 3 deletions(-) create mode 100644 app/controllers/overview.js diff --git a/app/controllers/overview.js b/app/controllers/overview.js new file mode 100644 index 000000000..2a62afb19 --- /dev/null +++ b/app/controllers/overview.js @@ -0,0 +1,7 @@ +Balanced.MarketplaceOverviewController = Balanced.ObjectController.extend( + Ember.Evented, + Balanced.ResultsTable, { + needs: ['marketplace'], + baseClassSelector: '#overview', + pageTitle: 'Overview' + }); diff --git a/app/templates/marketplace/overview.hbs b/app/templates/marketplace/overview.hbs index fc1f97701..f4daf416e 100644 --- a/app/templates/marketplace/overview.hbs +++ b/app/templates/marketplace/overview.hbs @@ -3,7 +3,10 @@ {{pageTitle}}
+
+ {{view Balanced.DateFilterHeaderView}} -{{view Balanced.LineChartView}} -{{view Balanced.HorizontalBarChartView}} -{{view Balanced.VerticalBarChartView}} + {{view Balanced.LineChartView}} + {{view Balanced.HorizontalBarChartView}} + {{view Balanced.VerticalBarChartView}} +
From 98c503e4fe0a438b9ca8e9de1d9b489704a10470 Mon Sep 17 00:00:00 2001 From: Kyungmin Kim Date: Fri, 13 Jun 2014 13:01:46 -0700 Subject: [PATCH 12/34] Set color to line graphs --- static/less/scaffolding.less | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/static/less/scaffolding.less b/static/less/scaffolding.less index 7e9e96428..9895d01f3 100644 --- a/static/less/scaffolding.less +++ b/static/less/scaffolding.less @@ -147,4 +147,13 @@ svg { .transform(rotate(-90deg) translate(0px, 30px)); } } + + &.line-chart { + .nv-series-0 { + stroke: @turmericYellow80 !important; + } + .nv-series-1 { + stroke: @persianBlue80 !important; + } + } } From 66d7126c3730a6f491f9ec6467bbbb5da6feda28 Mon Sep 17 00:00:00 2001 From: Kyungmin Kim Date: Mon, 16 Jun 2014 11:08:44 -0700 Subject: [PATCH 13/34] Beautify --- app/views/charts/chart.js | 2 +- app/views/charts/vertical-bar-chart.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/app/views/charts/chart.js b/app/views/charts/chart.js index 5f6d61e71..bcd2d3d06 100644 --- a/app/views/charts/chart.js +++ b/app/views/charts/chart.js @@ -37,7 +37,7 @@ Balanced.ChartView = Ember.View.extend({ var chartData = self.get('chartData'); var chart = self.get('chart'); - d3.select(el) + window.d3.select(el) .datum(chartData) .transition() .duration(250) diff --git a/app/views/charts/vertical-bar-chart.js b/app/views/charts/vertical-bar-chart.js index 8b7f64fec..9147a97e1 100644 --- a/app/views/charts/vertical-bar-chart.js +++ b/app/views/charts/vertical-bar-chart.js @@ -9,7 +9,7 @@ Balanced.VerticalBarChartView = Balanced.ChartView.extend({ tooltips: true, rectClass: 'triangle', showValues: true - } + }; }.property(), chartData: function() { From 72329c73e608f70cc54888b01765cfb5490d61b7 Mon Sep 17 00:00:00 2001 From: Kyungmin Kim Date: Mon, 16 Jun 2014 15:26:40 -0700 Subject: [PATCH 14/34] Customize graph style --- app/views/charts/chart.js | 9 ++++++ app/views/charts/horizontal-bar-chart.js | 5 +-- app/views/charts/line-chart.js | 8 ++--- static/less/scaffolding.less | 41 ++++++++++++++++++------ 4 files changed, 45 insertions(+), 18 deletions(-) diff --git a/app/views/charts/chart.js b/app/views/charts/chart.js index bcd2d3d06..523c29745 100644 --- a/app/views/charts/chart.js +++ b/app/views/charts/chart.js @@ -18,6 +18,7 @@ Balanced.ChartView = Ember.View.extend({ options: {}, _chart: null, + chart: function() { var self = this; var chart = self.get('_chart'); @@ -28,6 +29,9 @@ Balanced.ChartView = Ember.View.extend({ chart.options(self.get('options')); + chart.color(['#639ABD', '#BC8F30', '#9364A8', '#00A08E']); + // @egyptianBlue80, @turmericYellow80, @byzantiumPurple80, @forestGreen80 + return chart; }.property('chartModel', 'margin', 'options'), @@ -43,6 +47,8 @@ Balanced.ChartView = Ember.View.extend({ .duration(250) .call(chart); + window.d3.selectAll('circle.nv-point').attr("r", "3.5"); + self.set('_chart', chart); window.nv.utils.windowResize(chart.update); @@ -52,6 +58,9 @@ Balanced.ChartView = Ember.View.extend({ var self = this; var $el = self.$(); var el = $el.get(0); + + $el.find('circle.nv-point').attr("r", "3.5"); + window.nv.addGraph(function() { return self.get('chart'); }); diff --git a/app/views/charts/horizontal-bar-chart.js b/app/views/charts/horizontal-bar-chart.js index 31496b9cb..4ed3f7ae8 100644 --- a/app/views/charts/horizontal-bar-chart.js +++ b/app/views/charts/horizontal-bar-chart.js @@ -19,16 +19,13 @@ Balanced.HorizontalBarChartView = Balanced.ChartView.extend({ y: 29.765957771107 }, { x: "B Label", - y: 0 + y: 10 }, { x: "C Label", y: 32.807804682612 }, { x: "D Label", y: 96.45946739256 - }, { - x: "E Label", - y: 0.19434030906893 }] }]; }.property() diff --git a/app/views/charts/line-chart.js b/app/views/charts/line-chart.js index 24d72e6d9..13eae37e2 100644 --- a/app/views/charts/line-chart.js +++ b/app/views/charts/line-chart.js @@ -26,18 +26,16 @@ Balanced.LineChartView = Balanced.ChartView.extend({ }); cos.push({ x: i, - y: .5 * Math.cos(i / 10) + y: 0.5 * Math.cos(i / 10) }); } return [{ values: sin, - key: 'Sine Wave', - color: '#ff7f0e' + key: 'Sine Wave' }, { values: cos, - key: 'Cosine Wave', - color: '#2ca02c' + key: 'Cosine Wave' }]; }.property() }); diff --git a/static/less/scaffolding.less b/static/less/scaffolding.less index 9895d01f3..bef1470fa 100644 --- a/static/less/scaffolding.less +++ b/static/less/scaffolding.less @@ -138,6 +138,38 @@ svg { height: 300px; + .nvd3 .nv-axis path { + stroke: @gray2 !important; + } + + .nvd3 .nv-axis.nv-x path.domain { + stroke-opacity: 0.75; + } + + .nvd3 .nv-axis line { + stroke: @gray2; + } + + .nvd3.nv-wrap .nv-group { + fill-opacity: 1; + } + + .nvd3 .nv-groups path.nv-line { + stroke-width: 2px; + } + + .nvd3.nv-line .nvd3.nv-scatter .nv-groups .nv-point { + fill: @gray8; + stroke: @white; + } + + .nvd3.nv-scatter .nv-groups .nv-point.hover, + .nvd3 .nv-groups .nv-point.hover { + stroke-width: 2px; + fill-opacity: .95 !important; + stroke-opacity: .95 !important; + } + &.horizontal-bar-chart { .nv-discretebar { .transform(rotate(90deg) translate(0px, -550px)); @@ -147,13 +179,4 @@ svg { .transform(rotate(-90deg) translate(0px, 30px)); } } - - &.line-chart { - .nv-series-0 { - stroke: @turmericYellow80 !important; - } - .nv-series-1 { - stroke: @persianBlue80 !important; - } - } } From 819c2d05ea58eda3f1fe0b3636eb43bb44ecc1ae Mon Sep 17 00:00:00 2001 From: Kyungmin Kim Date: Mon, 16 Jun 2014 16:07:52 -0700 Subject: [PATCH 15/34] Update hover point size --- app/views/charts/chart.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/app/views/charts/chart.js b/app/views/charts/chart.js index 523c29745..f3893b43b 100644 --- a/app/views/charts/chart.js +++ b/app/views/charts/chart.js @@ -47,8 +47,6 @@ Balanced.ChartView = Ember.View.extend({ .duration(250) .call(chart); - window.d3.selectAll('circle.nv-point').attr("r", "3.5"); - self.set('_chart', chart); window.nv.utils.windowResize(chart.update); @@ -59,10 +57,12 @@ Balanced.ChartView = Ember.View.extend({ var $el = self.$(); var el = $el.get(0); - $el.find('circle.nv-point').attr("r", "3.5"); - window.nv.addGraph(function() { + $('circle.nv-point').attr("r", "5"); + return self.get('chart'); }); + + } }); From 3fd8af30093e531a6892083062d2b0203840dd3c Mon Sep 17 00:00:00 2001 From: Kyungmin Kim Date: Mon, 16 Jun 2014 17:24:51 -0700 Subject: [PATCH 16/34] Customize tooltip --- app/views/charts/chart.js | 7 +- app/views/charts/horizontal-bar-chart.js | 2 - app/views/charts/line-chart.js | 3 + app/views/charts/vertical-bar-chart.js | 2 - static/less/scaffolding.less | 95 +++++++++++++++++++++++- 5 files changed, 101 insertions(+), 8 deletions(-) diff --git a/app/views/charts/chart.js b/app/views/charts/chart.js index f3893b43b..d2cc3f0eb 100644 --- a/app/views/charts/chart.js +++ b/app/views/charts/chart.js @@ -47,6 +47,8 @@ Balanced.ChartView = Ember.View.extend({ .duration(250) .call(chart); + window.d3.selectAll('circle.nv-point').attr("r", "5"); // TODO: figure out why L#63 doesn't work without this line + self.set('_chart', chart); window.nv.utils.windowResize(chart.update); @@ -58,11 +60,10 @@ Balanced.ChartView = Ember.View.extend({ var el = $el.get(0); window.nv.addGraph(function() { + var chart = self.get('chart'); $('circle.nv-point').attr("r", "5"); - return self.get('chart'); + return chart; }); - - } }); diff --git a/app/views/charts/horizontal-bar-chart.js b/app/views/charts/horizontal-bar-chart.js index 4ed3f7ae8..d91ac6fcc 100644 --- a/app/views/charts/horizontal-bar-chart.js +++ b/app/views/charts/horizontal-bar-chart.js @@ -5,8 +5,6 @@ Balanced.HorizontalBarChartView = Balanced.ChartView.extend({ options: function() { return { width: 300, - useInteractiveGuideline: true, - tooltips: true, showValues: true }; }.property(), diff --git a/app/views/charts/line-chart.js b/app/views/charts/line-chart.js index 13eae37e2..d1da14fcd 100644 --- a/app/views/charts/line-chart.js +++ b/app/views/charts/line-chart.js @@ -12,6 +12,9 @@ Balanced.LineChartView = Balanced.ChartView.extend({ useInteractiveGuideline: true, noData: 'No data available.', tooltips: true + // tooltipContent: function(key, x, y, e, graph) { + // return '

' + key + '

' + '

$' + y + '

'; + // } }; }.property(), diff --git a/app/views/charts/vertical-bar-chart.js b/app/views/charts/vertical-bar-chart.js index 9147a97e1..ba856ab2c 100644 --- a/app/views/charts/vertical-bar-chart.js +++ b/app/views/charts/vertical-bar-chart.js @@ -5,8 +5,6 @@ Balanced.VerticalBarChartView = Balanced.ChartView.extend({ options: function() { return { height: 300, - useInteractiveGuideline: true, - tooltips: true, rectClass: 'triangle', showValues: true }; diff --git a/static/less/scaffolding.less b/static/less/scaffolding.less index bef1470fa..a64225e10 100644 --- a/static/less/scaffolding.less +++ b/static/less/scaffolding.less @@ -138,6 +138,15 @@ svg { height: 300px; + text { + .sl-sm; + fill: @gray4; + } + + .nvd3 .nv-axis .nv-axisMaxMin text { + font-weight: normal; + } + .nvd3 .nv-axis path { stroke: @gray2 !important; } @@ -159,10 +168,13 @@ svg { } .nvd3.nv-line .nvd3.nv-scatter .nv-groups .nv-point { - fill: @gray8; + fill: @gray7; stroke: @white; } + .nvd3 line.nv-guideline { + stroke: transparent; + } .nvd3.nv-scatter .nv-groups .nv-point.hover, .nvd3 .nv-groups .nv-point.hover { stroke-width: 2px; @@ -180,3 +192,84 @@ svg { } } } +.nvtooltip { + .sl; + color: @white; + background-color: @gray7; + padding: 5px; + position: absolute; + z-index: 10000; + text-align: left; + pointer-events: all; + + &:before { + position: absolute; + margin-left: -30px; + width: 0; + height: 0; + border-top: 10px solid transparent; + border-bottom: 10px solid transparent; + border-right: 10px solid @gray7; + } + + h3 { + margin: 0; + padding: 4px 14px; + line-height: 18px; + font-weight: normal; + background-color: rgba(247,247,247,0.75); + text-align: center; + + border-bottom: 1px solid #ebebeb; + + -webkit-border-radius: 5px 5px 0 0; + -moz-border-radius: 5px 5px 0 0; + border-radius: 5px 5px 0 0; + } + + p { + margin: 0; + padding: 5px 14px; + text-align: left; + } + + span { + display: inline-block; + margin: 2px 0; + } + + table { + margin: 6px; + border-spacing:0; + } + + table td { + padding: 2px 9px 2px 0; + vertical-align: middle; + } + + table td.key { + font-weight:normal; + } + table td.value { + text-align: right; + font-weight: bold; + } + + table tr.highlight td { + padding: 1px 9px 1px 0; + border-bottom-style: solid; + border-bottom-width: 1px; + border-top-style: solid; + border-top-width: 1px; + } + + table td.legend-color-guide div { + width: 8px; + height: 8px; + vertical-align: middle; + .border-radius(100%); + } + +} + From 05f08c5ff21ff8389d83dce80095569275de0d02 Mon Sep 17 00:00:00 2001 From: Kyungmin Kim Date: Tue, 17 Jun 2014 20:13:35 -0700 Subject: [PATCH 17/34] Customize chart style --- Gruntfile.js | 5 +- app/controllers/overview.js | 61 ++++++++++++++++++- app/templates/marketplace/overview.hbs | 6 +- app/views/charts/chart.js | 21 ++++--- app/views/charts/horizontal-bar-chart.js | 19 ------ app/views/charts/line-chart.js | 51 +++++++--------- app/views/charts/vertical-bar-chart.js | 22 ------- static/less/scaffolding.less | 76 ++++++++++-------------- static/lib/nvd3-triangle-bar.js | 7 +-- 9 files changed, 129 insertions(+), 139 deletions(-) diff --git a/Gruntfile.js b/Gruntfile.js index c8df37545..5f486a637 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -106,7 +106,7 @@ module.exports = function(grunt) { 'static/lib/daterangepicker.js', 'static/javascripts/timepicker/jquery.timepicker.js', 'static/javascripts/d3/d3.min.js', - 'static/javascripts/nvd3/nv.d3.min.js', + 'static/javascripts/nvd3/nv.d3.js', 'static/lib/nvd3-triangle-bar.js' ], dest: 'build/js/lib-dev.js' @@ -651,7 +651,8 @@ module.exports = function(grunt) { js: { files: [ 'app/**/*.js', - 'static/lib/**/*.js' + 'static/lib/**/*.js', + 'static/javascripts/**/*.js' ], tasks: ['format', '_buildJSAfterTemplates'], options: { diff --git a/app/controllers/overview.js b/app/controllers/overview.js index 2a62afb19..cea0ec339 100644 --- a/app/controllers/overview.js +++ b/app/controllers/overview.js @@ -3,5 +3,64 @@ Balanced.MarketplaceOverviewController = Balanced.ObjectController.extend( Balanced.ResultsTable, { needs: ['marketplace'], baseClassSelector: '#overview', - pageTitle: 'Overview' + pageTitle: 'Overview', + + lineChartData: function() { + var sin = [], + cos = []; + + for (var i = 0; i < 100; i++) { + sin.push({ + x: i, + y: Math.sin(i / 10) + }); + cos.push({ + x: i, + y: 0.5 * Math.cos(i / 10) + }); + } + + return [{ + values: sin, + key: 'Sine Wave' + }, { + values: cos, + key: 'Cosine Wave' + }]; + }.property(), + + virticalBarChartData: function() { + return [{ + key: "Cumulative Return", + values: [{ + x: "A Label", + y: 29.765957771107 + }, { + x: "B Label", + y: 52.52 + }, { + x: "C Label", + y: 32.807804682612 + }] + }]; + }.property(), + + horizontalBarChartData: function() { + return [{ + key: "Cumulative Return", + values: [{ + x: "A Label", + y: 29.765957771107 + }, { + x: "B Label", + y: 10 + }, { + x: "C Label", + y: 32.807804682612 + }, { + x: "D Label", + y: 96.45946739256 + }] + }]; + }.property() }); diff --git a/app/templates/marketplace/overview.hbs b/app/templates/marketplace/overview.hbs index f4daf416e..8e4edce47 100644 --- a/app/templates/marketplace/overview.hbs +++ b/app/templates/marketplace/overview.hbs @@ -6,7 +6,7 @@
{{view Balanced.DateFilterHeaderView}} - {{view Balanced.LineChartView}} - {{view Balanced.HorizontalBarChartView}} - {{view Balanced.VerticalBarChartView}} + {{view Balanced.LineChartView data=lineChartData}} + {{view Balanced.HorizontalBarChartView data=horizontalBarChartData}} + {{view Balanced.VerticalBarChartView data=virticalBarChartData}}
diff --git a/app/views/charts/chart.js b/app/views/charts/chart.js index d2cc3f0eb..47ed54ec2 100644 --- a/app/views/charts/chart.js +++ b/app/views/charts/chart.js @@ -9,9 +9,6 @@ Balanced.ChartView = Ember.View.extend({ width: 500, height: 500, - xAxisLabel: 'Date', - yAxisLabel: 'Volume', - x: null, y: null, chartData: null, @@ -27,32 +24,33 @@ Balanced.ChartView = Ember.View.extend({ chart = self.get('chartModel'); } - chart.options(self.get('options')); - chart.color(['#639ABD', '#BC8F30', '#9364A8', '#00A08E']); // @egyptianBlue80, @turmericYellow80, @byzantiumPurple80, @forestGreen80 + chart.options(self.get('options')); + return self.get('customizeChart').apply(self, [chart]); + }.property('chartModel', 'margin', 'options', 'customizeChart'), + + customizeChart: function(chart) { return chart; - }.property('chartModel', 'margin', 'options'), + }, updateChart: function() { var self = this; var el = self.get('element'); - var chartData = self.get('chartData'); + var data = self.get('data'); var chart = self.get('chart'); window.d3.select(el) - .datum(chartData) + .datum(data) .transition() .duration(250) .call(chart); - window.d3.selectAll('circle.nv-point').attr("r", "5"); // TODO: figure out why L#63 doesn't work without this line - self.set('_chart', chart); window.nv.utils.windowResize(chart.update); - }.observes('chartData', 'chart').on('didInsertElement'), + }.observes('data', 'chart').on('didInsertElement'), didInsertElement: function() { var self = this; @@ -61,6 +59,7 @@ Balanced.ChartView = Ember.View.extend({ window.nv.addGraph(function() { var chart = self.get('chart'); + $('circle.nv-point').attr("r", "5"); return chart; diff --git a/app/views/charts/horizontal-bar-chart.js b/app/views/charts/horizontal-bar-chart.js index d91ac6fcc..a019009ff 100644 --- a/app/views/charts/horizontal-bar-chart.js +++ b/app/views/charts/horizontal-bar-chart.js @@ -7,24 +7,5 @@ Balanced.HorizontalBarChartView = Balanced.ChartView.extend({ width: 300, showValues: true }; - }.property(), - - chartData: function() { - return [{ - key: "Cumulative Return", - values: [{ - x: "A Label", - y: 29.765957771107 - }, { - x: "B Label", - y: 10 - }, { - x: "C Label", - y: 32.807804682612 - }, { - x: "D Label", - y: 96.45946739256 - }] - }]; }.property() }); diff --git a/app/views/charts/line-chart.js b/app/views/charts/line-chart.js index d1da14fcd..061ef1898 100644 --- a/app/views/charts/line-chart.js +++ b/app/views/charts/line-chart.js @@ -1,8 +1,24 @@ Balanced.LineChartView = Balanced.ChartView.extend({ _chartModel: "lineChart", classNames: ['line-chart'], + customizeChart: function(chart) { + chart.interactiveLayer.tooltip.contentGenerator(function(data) { + var html = ''; + + _.each(data, function(series) { + _.each(series, function(p) { + html += '

%@

%@

'.fmt(p.key, p.value); + }) + }); + + return html; + }); + return chart; + }, options: function() { + var self = this; + return { width: 500, showXAxis: true, @@ -11,34 +27,11 @@ Balanced.LineChartView = Balanced.ChartView.extend({ rightAlignYAxis: false, useInteractiveGuideline: true, noData: 'No data available.', - tooltips: true - // tooltipContent: function(key, x, y, e, graph) { - // return '

' + key + '

' + '

$' + y + '

'; - // } + tooltips: true, + xTickFormat: function(d) { + return d3.time.format('%x')(new Date(d)); + }, + yTickFormat: d3.format(',.2f') }; - }.property(), - - chartData: function() { - var sin = [], - cos = []; - - for (var i = 0; i < 100; i++) { - sin.push({ - x: i, - y: Math.sin(i / 10) - }); - cos.push({ - x: i, - y: 0.5 * Math.cos(i / 10) - }); - } - - return [{ - values: sin, - key: 'Sine Wave' - }, { - values: cos, - key: 'Cosine Wave' - }]; - }.property() + }.property('chart') }); diff --git a/app/views/charts/vertical-bar-chart.js b/app/views/charts/vertical-bar-chart.js index ba856ab2c..013323a09 100644 --- a/app/views/charts/vertical-bar-chart.js +++ b/app/views/charts/vertical-bar-chart.js @@ -8,27 +8,5 @@ Balanced.VerticalBarChartView = Balanced.ChartView.extend({ rectClass: 'triangle', showValues: true }; - }.property(), - - chartData: function() { - return [{ - key: "Cumulative Return", - values: [{ - x: "A Label", - y: 29.765957771107 - }, { - x: "B Label", - y: 0 - }, { - x: "C Label", - y: 32.807804682612 - }, { - x: "D Label", - y: 96.45946739256 - }, { - x: "E Label", - y: 0.19434030906893 - }] - }]; }.property() }); diff --git a/static/less/scaffolding.less b/static/less/scaffolding.less index a64225e10..759bd7d54 100644 --- a/static/less/scaffolding.less +++ b/static/less/scaffolding.less @@ -188,7 +188,23 @@ svg { } text { - .transform(rotate(-90deg) translate(0px, 30px)); + font-size: 20px; + stroke: none; + .transform(rotate(-90deg) translate(10px, 40px)); + } + } + + &.vertical-bar-chart { + .nv-bar { + stroke-opacity: 0 !important; + fill-opacity: 0.65 !important; + } + + text { + .sl-20-sb; + fill: @black; + stroke: none; + .transform(translateX(-60px)); } } } @@ -212,25 +228,21 @@ svg { border-right: 10px solid @gray7; } - h3 { - margin: 0; - padding: 4px 14px; - line-height: 18px; - font-weight: normal; - background-color: rgba(247,247,247,0.75); - text-align: center; - - border-bottom: 1px solid #ebebeb; - - -webkit-border-radius: 5px 5px 0 0; - -moz-border-radius: 5px 5px 0 0; - border-radius: 5px 5px 0 0; + h4 { + .sl-sm; + color: @white; + padding: 0 10px; } p { - margin: 0; - padding: 5px 14px; + .sl-20-sb; + color: @white; text-align: left; + padding: 0 10px; + + &:before { + content: '$'; + } } span { @@ -238,38 +250,10 @@ svg { margin: 2px 0; } - table { - margin: 6px; - border-spacing:0; - } - - table td { - padding: 2px 9px 2px 0; - vertical-align: middle; - } - - table td.key { - font-weight:normal; - } - table td.value { - text-align: right; - font-weight: bold; - } - - table tr.highlight td { - padding: 1px 9px 1px 0; - border-bottom-style: solid; - border-bottom-width: 1px; - border-top-style: solid; - border-top-width: 1px; - } - - table td.legend-color-guide div { + .legend-color-guide { width: 8px; height: 8px; vertical-align: middle; - .border-radius(100%); + .border-radius(50%); } - } - diff --git a/static/lib/nvd3-triangle-bar.js b/static/lib/nvd3-triangle-bar.js index 825da0034..6b90093c9 100644 --- a/static/lib/nvd3-triangle-bar.js +++ b/static/lib/nvd3-triangle-bar.js @@ -176,11 +176,6 @@ d3.event.stopPropagation(); }); - // Note: Override rect drawing - // barsEnter.append('rect') - // .attr('height', 0) - // .attr('width', x.rangeBand() * .9 / data.length ) - if (showValues) { barsEnter.append('text') .attr('text-anchor', 'middle') @@ -205,7 +200,7 @@ .append('path') .attr('d', function(d, i) { var dy = Math.max(Math.abs(y(getY(d,i)) - y((yDomain && yDomain[0]) || 0)) || 1); - return 'M 60 0 L 0 ' + dy + ' L 120 ' + dy + ' Z'; + return 'M 60 0 L -130 ' + dy + ' L 250 ' + dy + ' Z'; }); bars.transition() From bd59526fafd73f8bdb1ddd95954513cc80aa48a4 Mon Sep 17 00:00:00 2001 From: Kyungmin Kim Date: Wed, 18 Jun 2014 17:53:07 -0700 Subject: [PATCH 18/34] Format overview page --- app/controllers/overview.js | 26 ++++++++++++++++++- .../charts/line-chart-with-legend.hbs | 8 ++++++ app/templates/marketplace/overview.hbs | 9 ++++++- app/views/charts/chart-with-legend.js | 11 ++++++++ app/views/charts/chart.js | 21 ++++++++++++++- app/views/charts/horizontal-bar-chart.js | 2 ++ app/views/charts/line-chart.js | 5 +++- app/views/charts/vertical-bar-chart.js | 2 ++ static/less/scaffolding.less | 17 ++++++++++++ 9 files changed, 97 insertions(+), 4 deletions(-) create mode 100644 app/templates/charts/line-chart-with-legend.hbs create mode 100644 app/views/charts/chart-with-legend.js diff --git a/app/controllers/overview.js b/app/controllers/overview.js index cea0ec339..8b98b0b2e 100644 --- a/app/controllers/overview.js +++ b/app/controllers/overview.js @@ -5,7 +5,31 @@ Balanced.MarketplaceOverviewController = Balanced.ObjectController.extend( baseClassSelector: '#overview', pageTitle: 'Overview', - lineChartData: function() { + totalVolume: function() { + var sin = [], + cos = []; + + for (var i = 0; i < 100; i++) { + sin.push({ + x: i, + y: Math.sin(i / 10) + }); + cos.push({ + x: i, + y: 0.5 * Math.cos(i / 10) + }); + } + + return [{ + values: sin, + key: 'Sine Wave' + }, { + values: cos, + key: 'Cosine Wave' + }]; + }.property(), + + transactionsCount: function() { var sin = [], cos = []; diff --git a/app/templates/charts/line-chart-with-legend.hbs b/app/templates/charts/line-chart-with-legend.hbs new file mode 100644 index 000000000..c2de5d71a --- /dev/null +++ b/app/templates/charts/line-chart-with-legend.hbs @@ -0,0 +1,8 @@ +
+
series 2
+
series 1
+
+ +
+ {{view Balanced.LineChartView data=view.data viewName="chartView"}} +
diff --git a/app/templates/marketplace/overview.hbs b/app/templates/marketplace/overview.hbs index 8e4edce47..b1019253c 100644 --- a/app/templates/marketplace/overview.hbs +++ b/app/templates/marketplace/overview.hbs @@ -6,7 +6,14 @@
{{view Balanced.DateFilterHeaderView}} - {{view Balanced.LineChartView data=lineChartData}} +
+ {{view Balanced.LineChartWithLegendView chartName="totalVolume"}} +
+ +
+ {{view Balanced.LineChartWithLegendView chartName="transactionsCount"}} +
+ {{view Balanced.HorizontalBarChartView data=horizontalBarChartData}} {{view Balanced.VerticalBarChartView data=virticalBarChartData}}
diff --git a/app/views/charts/chart-with-legend.js b/app/views/charts/chart-with-legend.js new file mode 100644 index 000000000..cf15126ed --- /dev/null +++ b/app/views/charts/chart-with-legend.js @@ -0,0 +1,11 @@ +Balanced.ChartWithLegendView = Ember.View.extend({}); + +Balanced.LineChartWithLegendView = Balanced.ChartWithLegendView.extend({ + templateName: 'charts/line-chart-with-legend', + data: function() { + var controller = this.get('controller'); + var chartName = this.get('chartName'); + console.log(chartName); + return controller.get(chartName); + }.property('controller', 'chartName') +}); diff --git a/app/views/charts/chart.js b/app/views/charts/chart.js index 47ed54ec2..2a9d69fbf 100644 --- a/app/views/charts/chart.js +++ b/app/views/charts/chart.js @@ -11,7 +11,7 @@ Balanced.ChartView = Ember.View.extend({ height: 500, x: null, y: null, - chartData: null, + data: null, options: {}, _chart: null, @@ -64,5 +64,24 @@ Balanced.ChartView = Ember.View.extend({ return chart; }); + }, + + actions: { + toggleLegend: function(seriesKey) { + var chart = this.get('chart'); + var data = this.get('data'); + + data.filterBy('key', seriesKey).forEach(function(series) { + series.disabled = !series.disabled; + }); + + if (data.isEvery('disabled')) { + data.forEach(function(series) { + series.disabled = false; + }); + } + + chart.update(); + } } }); diff --git a/app/views/charts/horizontal-bar-chart.js b/app/views/charts/horizontal-bar-chart.js index a019009ff..67a01a6de 100644 --- a/app/views/charts/horizontal-bar-chart.js +++ b/app/views/charts/horizontal-bar-chart.js @@ -1,3 +1,5 @@ +require("./chart"); + Balanced.HorizontalBarChartView = Balanced.ChartView.extend({ _chartModel: "discreteBar", classNames: ['horizontal-bar-chart'], diff --git a/app/views/charts/line-chart.js b/app/views/charts/line-chart.js index 061ef1898..0be0f5a5a 100644 --- a/app/views/charts/line-chart.js +++ b/app/views/charts/line-chart.js @@ -1,3 +1,5 @@ +require("./chart"); + Balanced.LineChartView = Balanced.ChartView.extend({ _chartModel: "lineChart", classNames: ['line-chart'], @@ -31,7 +33,8 @@ Balanced.LineChartView = Balanced.ChartView.extend({ xTickFormat: function(d) { return d3.time.format('%x')(new Date(d)); }, - yTickFormat: d3.format(',.2f') + yTickFormat: d3.format(',.2f'), + showLegend: false }; }.property('chart') }); diff --git a/app/views/charts/vertical-bar-chart.js b/app/views/charts/vertical-bar-chart.js index 013323a09..853ef0b00 100644 --- a/app/views/charts/vertical-bar-chart.js +++ b/app/views/charts/vertical-bar-chart.js @@ -1,3 +1,5 @@ +require("./chart"); + Balanced.VerticalBarChartView = Balanced.ChartView.extend({ _chartModel: "triangleBar", classNames: ['vertical-bar-chart'], diff --git a/static/less/scaffolding.less b/static/less/scaffolding.less index 759bd7d54..0b6742e5c 100644 --- a/static/less/scaffolding.less +++ b/static/less/scaffolding.less @@ -257,3 +257,20 @@ svg { .border-radius(50%); } } + +.body-panel { + margin-left: -45px; + margin-right: -45px; + border-bottom: 1px solid @gray2; + + .panel { + padding: 45px; + height: 100%; + margin: 0; + + &.side-panel { + background-color: @gray1; + min-height: 490px; + } + } +} From 14d43bcc592fd4bc7b1c0b9132537f0d8df1af41 Mon Sep 17 00:00:00 2001 From: Kyungmin Kim Date: Thu, 19 Jun 2014 12:02:33 -0700 Subject: [PATCH 19/34] Fix activity redirect route and more --- app/controllers/overview.js | 6 +++--- app/routes/marketplaces/activity.js | 2 +- app/routes/marketplaces/marketplace.js | 4 ---- .../charts/line-chart-with-legend.hbs | 1 + app/templates/marketplace/overview.hbs | 21 +++++++++++++++++-- app/views/charts/horizontal-bar-chart.js | 1 + app/views/charts/vertical-bar-chart.js | 1 + static/less/scaffolding.less | 8 +++++-- static/lib/nvd3-triangle-bar.js | 2 +- 9 files changed, 33 insertions(+), 13 deletions(-) diff --git a/app/controllers/overview.js b/app/controllers/overview.js index 8b98b0b2e..4dba2cbb2 100644 --- a/app/controllers/overview.js +++ b/app/controllers/overview.js @@ -45,15 +45,15 @@ Balanced.MarketplaceOverviewController = Balanced.ObjectController.extend( } return [{ - values: sin, + values: cos, key: 'Sine Wave' }, { - values: cos, + values: sin, key: 'Cosine Wave' }]; }.property(), - virticalBarChartData: function() { + verticalBarChartData: function() { return [{ key: "Cumulative Return", values: [{ diff --git a/app/routes/marketplaces/activity.js b/app/routes/marketplaces/activity.js index 401b153f6..e9f8ef752 100644 --- a/app/routes/marketplaces/activity.js +++ b/app/routes/marketplaces/activity.js @@ -40,4 +40,4 @@ Balanced.MarketplaceRedirectActivityCustomersRoute = Balanced.RedirectRoute('mar Balanced.MarketplaceRedirectActivityFundingInstrumentsRoute = Balanced.RedirectRoute('marketplace.funding_instruments'); Balanced.MarketplaceRedirectActivityDisputesRoute = Balanced.RedirectRoute('marketplace.disputes'); -Balanced.ActivityIndexRoute = Balanced.RedirectRoute('activity.transactions'); +Balanced.ActivityIndexRoute = Balanced.RedirectRoute('marketplace.overview'); diff --git a/app/routes/marketplaces/marketplace.js b/app/routes/marketplaces/marketplace.js index 2b16b046f..0a301e95f 100644 --- a/app/routes/marketplaces/marketplace.js +++ b/app/routes/marketplaces/marketplace.js @@ -5,10 +5,6 @@ Balanced.MarketplaceRoute = Balanced.AuthRoute.extend({ return marketplace; }, - redirect: function() { - this.transitionTo('marketplace.overview'); - }, - afterModel: function(model) { Balanced.Utils.setCurrentMarketplace(model); }, diff --git a/app/templates/charts/line-chart-with-legend.hbs b/app/templates/charts/line-chart-with-legend.hbs index c2de5d71a..17d167553 100644 --- a/app/templates/charts/line-chart-with-legend.hbs +++ b/app/templates/charts/line-chart-with-legend.hbs @@ -1,4 +1,5 @@
+

Total volume

series 2
series 1
diff --git a/app/templates/marketplace/overview.hbs b/app/templates/marketplace/overview.hbs index b1019253c..6168c40b9 100644 --- a/app/templates/marketplace/overview.hbs +++ b/app/templates/marketplace/overview.hbs @@ -14,6 +14,23 @@ {{view Balanced.LineChartWithLegendView chartName="transactionsCount"}}
- {{view Balanced.HorizontalBarChartView data=horizontalBarChartData}} - {{view Balanced.VerticalBarChartView data=virticalBarChartData}} +
+
+

Total card volume

+
+ +
+ {{view Balanced.HorizontalBarChartView data=horizontalBarChartData}} +
+
+ +
+
+

Average transaction size

+
+ +
+ {{view Balanced.VerticalBarChartView data=verticalBarChartData}} +
+
diff --git a/app/views/charts/horizontal-bar-chart.js b/app/views/charts/horizontal-bar-chart.js index 67a01a6de..bc6039e0c 100644 --- a/app/views/charts/horizontal-bar-chart.js +++ b/app/views/charts/horizontal-bar-chart.js @@ -7,6 +7,7 @@ Balanced.HorizontalBarChartView = Balanced.ChartView.extend({ options: function() { return { width: 300, + height: 435, showValues: true }; }.property() diff --git a/app/views/charts/vertical-bar-chart.js b/app/views/charts/vertical-bar-chart.js index 853ef0b00..a82d94c31 100644 --- a/app/views/charts/vertical-bar-chart.js +++ b/app/views/charts/vertical-bar-chart.js @@ -6,6 +6,7 @@ Balanced.VerticalBarChartView = Balanced.ChartView.extend({ options: function() { return { + width: 435, height: 300, rectClass: 'triangle', showValues: true diff --git a/static/less/scaffolding.less b/static/less/scaffolding.less index 0b6742e5c..fedb6be04 100644 --- a/static/less/scaffolding.less +++ b/static/less/scaffolding.less @@ -184,7 +184,7 @@ svg { &.horizontal-bar-chart { .nv-discretebar { - .transform(rotate(90deg) translate(0px, -550px)); + .transform(rotate(90deg) translate(0px, -435px)); } text { @@ -204,7 +204,7 @@ svg { .sl-20-sb; fill: @black; stroke: none; - .transform(translateX(-60px)); + .transform(translate(5px, -5px)); } } } @@ -272,5 +272,9 @@ svg { background-color: @gray1; min-height: 490px; } + + h3 { + .sl-md-sb; + } } } diff --git a/static/lib/nvd3-triangle-bar.js b/static/lib/nvd3-triangle-bar.js index 6b90093c9..d28d2b25c 100644 --- a/static/lib/nvd3-triangle-bar.js +++ b/static/lib/nvd3-triangle-bar.js @@ -200,7 +200,7 @@ .append('path') .attr('d', function(d, i) { var dy = Math.max(Math.abs(y(getY(d,i)) - y((yDomain && yDomain[0]) || 0)) || 1); - return 'M 60 0 L -130 ' + dy + ' L 250 ' + dy + ' Z'; + return 'M 60 0 L -30 ' + dy + ' L 150 ' + dy + ' Z'; }); bars.transition() From 21ef7bf2f2e03d94547eb1c61a63fc61e54972ac Mon Sep 17 00:00:00 2001 From: Kyungmin Kim Date: Thu, 19 Jun 2014 14:46:50 -0700 Subject: [PATCH 20/34] Add list table in the side panel --- .../charts/line-chart-with-legend.hbs | 32 +++++++++++++++++-- app/views/charts/chart-with-legend.js | 2 +- static/less/base.less | 1 + static/less/scaffolding.less | 32 +++++++++++++++---- 4 files changed, 58 insertions(+), 9 deletions(-) diff --git a/app/templates/charts/line-chart-with-legend.hbs b/app/templates/charts/line-chart-with-legend.hbs index 17d167553..284d9cd20 100644 --- a/app/templates/charts/line-chart-with-legend.hbs +++ b/app/templates/charts/line-chart-with-legend.hbs @@ -1,7 +1,35 @@

Total volume

-
series 2
-
series 1
+ + + + + + + + + + + +
+ +
+
+ Debits + + 		+ $123.45 +
+ +
+
+ Credits + + 		+ $123.45 +
+ +
diff --git a/app/views/charts/chart-with-legend.js b/app/views/charts/chart-with-legend.js index cf15126ed..71b5ddf1e 100644 --- a/app/views/charts/chart-with-legend.js +++ b/app/views/charts/chart-with-legend.js @@ -5,7 +5,7 @@ Balanced.LineChartWithLegendView = Balanced.ChartWithLegendView.extend({ data: function() { var controller = this.get('controller'); var chartName = this.get('chartName'); - console.log(chartName); + return controller.get(chartName); }.property('controller', 'chartName') }); diff --git a/static/less/base.less b/static/less/base.less index 5b5cb4b4b..05dd5d6ca 100644 --- a/static/less/base.less +++ b/static/less/base.less @@ -175,6 +175,7 @@ dl, dt, dd { @import "/static/less/custom_tables.less"; @import "/static/less/login.less"; +@import "/static/less/overview.less"; @import "/static/less/activity.less"; @import "/static/less/marketplace.less"; @import "/static/less/customer.less"; diff --git a/static/less/scaffolding.less b/static/less/scaffolding.less index fedb6be04..ab7c0a2a3 100644 --- a/static/less/scaffolding.less +++ b/static/less/scaffolding.less @@ -208,6 +208,7 @@ svg { } } } + .nvtooltip { .sl; color: @white; @@ -249,15 +250,34 @@ svg { display: inline-block; margin: 2px 0; } +} + +.legend-color-guide { + width: 8px; + height: 8px; + vertical-align: middle; + margin-bottom: 2px; + display: inline-block; + .border-radius(50%); + + &.series-1 { + background-color: @egyptianBlue80; + } + + &.series-2 { + background-color: @turmericYellow80; + } + + &.series-3 { + background-color: @byzantiumPurple80; + } - .legend-color-guide { - width: 8px; - height: 8px; - vertical-align: middle; - .border-radius(50%); + &.series-4 { + background-color: @forestGreen80; } } +// body panel .body-panel { margin-left: -45px; margin-right: -45px; @@ -274,7 +294,7 @@ svg { } h3 { - .sl-md-sb; + .sl-sb; } } } From 6edf76c5b723aca81a3443ef3477c452d1bff20d Mon Sep 17 00:00:00 2001 From: Kyungmin Kim Date: Thu, 19 Jun 2014 15:16:07 -0700 Subject: [PATCH 21/34] Add list table to the overview page --- .../charts/line-chart-with-legend.hbs | 8 +++--- app/templates/charts/line-chart.hbs | 0 app/templates/marketplace/overview.hbs | 4 +-- app/views/charts/chart-with-legend.js | 8 +----- static/less/overview.less | 26 +++++++++++++++++++ 5 files changed, 32 insertions(+), 14 deletions(-) create mode 100644 app/templates/charts/line-chart.hbs create mode 100644 static/less/overview.less diff --git a/app/templates/charts/line-chart-with-legend.hbs b/app/templates/charts/line-chart-with-legend.hbs index 284d9cd20..a92bf5eda 100644 --- a/app/templates/charts/line-chart-with-legend.hbs +++ b/app/templates/charts/line-chart-with-legend.hbs @@ -2,7 +2,7 @@

Total volume

- + - +
@@ -14,7 +14,7 @@ $123.45
@@ -28,10 +28,8 @@
- -
- {{view Balanced.LineChartView data=view.data viewName="chartView"}} + {{view Balanced.LineChartView data=view.data viewName="lineChartView"}}
diff --git a/app/templates/charts/line-chart.hbs b/app/templates/charts/line-chart.hbs new file mode 100644 index 000000000..e69de29bb diff --git a/app/templates/marketplace/overview.hbs b/app/templates/marketplace/overview.hbs index 6168c40b9..b0ac4766a 100644 --- a/app/templates/marketplace/overview.hbs +++ b/app/templates/marketplace/overview.hbs @@ -7,11 +7,11 @@ {{view Balanced.DateFilterHeaderView}}
- {{view Balanced.LineChartWithLegendView chartName="totalVolume"}} + {{view Balanced.LineChartWithLegendView data=controller.totalVolume}}
- {{view Balanced.LineChartWithLegendView chartName="transactionsCount"}} + {{view Balanced.LineChartWithLegendView data=controller.transactionsCount}}
diff --git a/app/views/charts/chart-with-legend.js b/app/views/charts/chart-with-legend.js index 71b5ddf1e..f7eb8113d 100644 --- a/app/views/charts/chart-with-legend.js +++ b/app/views/charts/chart-with-legend.js @@ -1,11 +1,5 @@ Balanced.ChartWithLegendView = Ember.View.extend({}); Balanced.LineChartWithLegendView = Balanced.ChartWithLegendView.extend({ - templateName: 'charts/line-chart-with-legend', - data: function() { - var controller = this.get('controller'); - var chartName = this.get('chartName'); - - return controller.get(chartName); - }.property('controller', 'chartName') + templateName: 'charts/line-chart-with-legend' }); diff --git a/static/less/overview.less b/static/less/overview.less new file mode 100644 index 000000000..824cd0fff --- /dev/null +++ b/static/less/overview.less @@ -0,0 +1,26 @@ +#overview { + .checkbox { + width: 14px; + min-height: 14px; + display: inline-block; + vertical-align: middle; + padding: 0; + margin-right: 10px; + margin-bottom: 2px; + background-color: @white; + border: 1px solid @gray2; + + &.checked { + background-color: @gray4; + border: 1px solid @gray4; + } + } + + table.list { + tr:hover { + .checkbox { + border: 1px solid @gray4; + } + } + } +} From 2634325f6ac12efdede291fec0e92077186844a3 Mon Sep 17 00:00:00 2001 From: Kyungmin Kim Date: Thu, 19 Jun 2014 16:31:21 -0700 Subject: [PATCH 22/34] Add tab navigation --- app/templates/marketplace/overview.hbs | 49 +++++--- bower.json | 2 +- static/less/scaffolding.less | 167 ------------------------- 3 files changed, 31 insertions(+), 187 deletions(-) diff --git a/app/templates/marketplace/overview.hbs b/app/templates/marketplace/overview.hbs index b0ac4766a..8ee4772f4 100644 --- a/app/templates/marketplace/overview.hbs +++ b/app/templates/marketplace/overview.hbs @@ -6,31 +6,42 @@
{{view Balanced.DateFilterHeaderView}} -
- {{view Balanced.LineChartWithLegendView data=controller.totalVolume}} -
+
    +
  • Payments
    • +
  • Cards
    • +
  • Disputes
    • +
-
- {{view Balanced.LineChartWithLegendView data=controller.transactionsCount}} -
+
+
+
+ {{view Balanced.LineChartWithLegendView data=controller.totalVolume}} +
-
-
-

Total card volume

-
+
+ {{view Balanced.LineChartWithLegendView data=controller.transactionsCount}} +
-
- {{view Balanced.HorizontalBarChartView data=horizontalBarChartData}} -
-
+
+
+

Average transaction size

+
-
-
-

Average transaction size

+
+ {{view Balanced.VerticalBarChartView data=verticalBarChartData}} +
+
+
+
+
+

Total card volume

+
-
- {{view Balanced.VerticalBarChartView data=verticalBarChartData}} +
+ {{view Balanced.HorizontalBarChartView data=horizontalBarChartData}} +
+
diff --git a/bower.json b/bower.json index e4f209319..c76b27209 100644 --- a/bower.json +++ b/bower.json @@ -15,7 +15,7 @@ "jquery.cookie": "1.3.1", "strftime": "https://raw.github.com/mjallday/strftime/master/strftime.js", "jquery-csv": "", - "strapped": "kyungmin/strapped#nvd3", + "strapped": "0.1.59", "sinon": "http://sinonjs.org/releases/sinon-1.9.0.js", "qunit": "1.14.0", "moment": "2.6.0", diff --git a/static/less/scaffolding.less b/static/less/scaffolding.less index ab7c0a2a3..deed6787f 100644 --- a/static/less/scaffolding.less +++ b/static/less/scaffolding.less @@ -131,170 +131,3 @@ .hidden { display: none; } - - -// graph - -svg { - height: 300px; - - text { - .sl-sm; - fill: @gray4; - } - - .nvd3 .nv-axis .nv-axisMaxMin text { - font-weight: normal; - } - - .nvd3 .nv-axis path { - stroke: @gray2 !important; - } - - .nvd3 .nv-axis.nv-x path.domain { - stroke-opacity: 0.75; - } - - .nvd3 .nv-axis line { - stroke: @gray2; - } - - .nvd3.nv-wrap .nv-group { - fill-opacity: 1; - } - - .nvd3 .nv-groups path.nv-line { - stroke-width: 2px; - } - - .nvd3.nv-line .nvd3.nv-scatter .nv-groups .nv-point { - fill: @gray7; - stroke: @white; - } - - .nvd3 line.nv-guideline { - stroke: transparent; - } - .nvd3.nv-scatter .nv-groups .nv-point.hover, - .nvd3 .nv-groups .nv-point.hover { - stroke-width: 2px; - fill-opacity: .95 !important; - stroke-opacity: .95 !important; - } - - &.horizontal-bar-chart { - .nv-discretebar { - .transform(rotate(90deg) translate(0px, -435px)); - } - - text { - font-size: 20px; - stroke: none; - .transform(rotate(-90deg) translate(10px, 40px)); - } - } - - &.vertical-bar-chart { - .nv-bar { - stroke-opacity: 0 !important; - fill-opacity: 0.65 !important; - } - - text { - .sl-20-sb; - fill: @black; - stroke: none; - .transform(translate(5px, -5px)); - } - } -} - -.nvtooltip { - .sl; - color: @white; - background-color: @gray7; - padding: 5px; - position: absolute; - z-index: 10000; - text-align: left; - pointer-events: all; - - &:before { - position: absolute; - margin-left: -30px; - width: 0; - height: 0; - border-top: 10px solid transparent; - border-bottom: 10px solid transparent; - border-right: 10px solid @gray7; - } - - h4 { - .sl-sm; - color: @white; - padding: 0 10px; - } - - p { - .sl-20-sb; - color: @white; - text-align: left; - padding: 0 10px; - - &:before { - content: '$'; - } - } - - span { - display: inline-block; - margin: 2px 0; - } -} - -.legend-color-guide { - width: 8px; - height: 8px; - vertical-align: middle; - margin-bottom: 2px; - display: inline-block; - .border-radius(50%); - - &.series-1 { - background-color: @egyptianBlue80; - } - - &.series-2 { - background-color: @turmericYellow80; - } - - &.series-3 { - background-color: @byzantiumPurple80; - } - - &.series-4 { - background-color: @forestGreen80; - } -} - -// body panel -.body-panel { - margin-left: -45px; - margin-right: -45px; - border-bottom: 1px solid @gray2; - - .panel { - padding: 45px; - height: 100%; - margin: 0; - - &.side-panel { - background-color: @gray1; - min-height: 490px; - } - - h3 { - .sl-sb; - } - } -} From cf0ef6e6b86193602aa1e87c75387053487afec8 Mon Sep 17 00:00:00 2001 From: Kyungmin Kim Date: Tue, 26 Aug 2014 15:03:59 -0700 Subject: [PATCH 23/34] Use fixture data --- app/controllers/overview.js | 19 + test/support/fixtures/analytics.js | 597 +++++++++++++---------------- 2 files changed, 293 insertions(+), 323 deletions(-) diff --git a/app/controllers/overview.js b/app/controllers/overview.js index 4dba2cbb2..5aff72947 100644 --- a/app/controllers/overview.js +++ b/app/controllers/overview.js @@ -5,6 +5,11 @@ Balanced.MarketplaceOverviewController = Balanced.ObjectController.extend( baseClassSelector: '#overview', pageTitle: 'Overview', + init: function() { + this._super(); + this.fetchTotalVolume(); + }, + totalVolume: function() { var sin = [], cos = []; @@ -29,6 +34,20 @@ Balanced.MarketplaceOverviewController = Balanced.ObjectController.extend( }]; }.property(), + fetchTotalVolume: function() { + var connection = Balanced.Connections.ApiConnection.create(); + var self = this; + + connection.ajax({ + uri: "/analytics?type=volume" + }).then(function(response) { + console.log(response.analytics); + // process data + self.set('totalVolume', []); + console.log(self.get('totalVolume')); + }); + }, + transactionsCount: function() { var sin = [], cos = []; diff --git a/test/support/fixtures/analytics.js b/test/support/fixtures/analytics.js index 4ab5c6a30..c528822fe 100644 --- a/test/support/fixtures/analytics.js +++ b/test/support/fixtures/analytics.js @@ -1,347 +1,298 @@ Balanced.Adapter.addFixtures([{ - "analytics":[ - { - "escrow_at_start":0, - "start_at":"2014-08-12T22:31:58.608327+00:00Z", - "links":{ + "uri": "/analytics?type=volume", + + "analytics": [{ + "escrow_at_start": 0, + "start_at": "2014-08-12T22:31:58.608327+00:00Z", + "links": { - }, - "transactions":[ - { - "status":"succeeded", - "count":1, - "card_type":"debit", - "amount":109, - "card_brand":"visa", - "type":"debit" - }, - { - "status":"succeeded", - "count":1, - "amount":109, - "type":"credit" - } - ], - "escrow_at_end":0, - "end_at":"2014-08-13T22:31:58.608327+00:00Z" }, - { - "escrow_at_start":0, - "start_at":"2014-08-13T22:31:58.608327+00:00Z", - "links":{ + "transactions": [{ + "status": "succeeded", + "count": 1, + "card_type": "debit", + "amount": 109, + "card_brand": "visa", + "type": "debit" + }, { + "status": "succeeded", + "count": 1, + "amount": 109, + "type": "credit" + }], + "escrow_at_end": 0, + "end_at": "2014-08-13T22:31:58.608327+00:00Z" + }, { + "escrow_at_start": 0, + "start_at": "2014-08-13T22:31:58.608327+00:00Z", + "links": { - }, - "transactions":[ - { - "status":"succeeded", - "count":1, - "card_type":"debit", - "amount":108, - "card_brand":"visa", - "type":"debit" - }, - { - "status":"succeeded", - "count":1, - "amount":108, - "type":"credit" - } - ], - "escrow_at_end":0, - "end_at":"2014-08-14T22:31:58.608327+00:00Z" }, - { - "escrow_at_start":0, - "start_at":"2014-08-14T22:31:58.608327+00:00Z", - "links":{ + "transactions": [{ + "status": "succeeded", + "count": 1, + "card_type": "debit", + "amount": 108, + "card_brand": "visa", + "type": "debit" + }, { + "status": "succeeded", + "count": 1, + "amount": 108, + "type": "credit" + }], + "escrow_at_end": 0, + "end_at": "2014-08-14T22:31:58.608327+00:00Z" + }, { + "escrow_at_start": 0, + "start_at": "2014-08-14T22:31:58.608327+00:00Z", + "links": { - }, - "transactions":[ - { - "status":"succeeded", - "count":1, - "card_type":"debit", - "amount":107, - "card_brand":"visa", - "type":"debit" - }, - { - "status":"succeeded", - "count":1, - "amount":107, - "type":"credit" - } - ], - "escrow_at_end":0, - "end_at":"2014-08-15T22:31:58.608327+00:00Z" }, - { - "escrow_at_start":0, - "start_at":"2014-08-15T22:31:58.608327+00:00Z", - "links":{ + "transactions": [{ + "status": "succeeded", + "count": 1, + "card_type": "debit", + "amount": 107, + "card_brand": "visa", + "type": "debit" + }, { + "status": "succeeded", + "count": 1, + "amount": 107, + "type": "credit" + }], + "escrow_at_end": 0, + "end_at": "2014-08-15T22:31:58.608327+00:00Z" + }, { + "escrow_at_start": 0, + "start_at": "2014-08-15T22:31:58.608327+00:00Z", + "links": { - }, - "transactions":[ - { - "status":"succeeded", - "count":1, - "card_type":"debit", - "amount":106, - "card_brand":"visa", - "type":"debit" - }, - { - "status":"succeeded", - "count":1, - "amount":106, - "type":"credit" - } - ], - "escrow_at_end":0, - "end_at":"2014-08-16T22:31:58.608327+00:00Z" }, - { - "escrow_at_start":0, - "start_at":"2014-08-16T22:31:58.608327+00:00Z", - "links":{ + "transactions": [{ + "status": "succeeded", + "count": 1, + "card_type": "debit", + "amount": 106, + "card_brand": "visa", + "type": "debit" + }, { + "status": "succeeded", + "count": 1, + "amount": 106, + "type": "credit" + }], + "escrow_at_end": 0, + "end_at": "2014-08-16T22:31:58.608327+00:00Z" + }, { + "escrow_at_start": 0, + "start_at": "2014-08-16T22:31:58.608327+00:00Z", + "links": { - }, - "transactions":[ - { - "status":"succeeded", - "count":1, - "card_type":"debit", - "amount":105, - "card_brand":"visa", - "type":"debit" - }, - { - "status":"succeeded", - "count":1, - "amount":105, - "type":"credit" - } - ], - "escrow_at_end":0, - "end_at":"2014-08-17T22:31:58.608327+00:00Z" }, - { - "escrow_at_start":0, - "start_at":"2014-08-17T22:31:58.608327+00:00Z", - "links":{ + "transactions": [{ + "status": "succeeded", + "count": 1, + "card_type": "debit", + "amount": 105, + "card_brand": "visa", + "type": "debit" + }, { + "status": "succeeded", + "count": 1, + "amount": 105, + "type": "credit" + }], + "escrow_at_end": 0, + "end_at": "2014-08-17T22:31:58.608327+00:00Z" + }, { + "escrow_at_start": 0, + "start_at": "2014-08-17T22:31:58.608327+00:00Z", + "links": { - }, - "transactions":[ - { - "status":"succeeded", - "count":1, - "card_type":"debit", - "amount":104, - "card_brand":"visa", - "type":"debit" - }, - { - "status":"failed", - "count":1, - "failure_reason":null, - "card_type":"debit", - "amount":104, - "card_brand":"visa", - "type":"debit" - }, - { - "status":"succeeded", - "count":1, - "amount":104, - "type":"credit" - }, - { - "status":"failed", - "count":1, - "amount":104, - "type":"credit", - "failure_reason":null - } - ], - "escrow_at_end":0, - "end_at":"2014-08-18T22:31:58.608327+00:00Z" }, - { - "escrow_at_start":0, - "start_at":"2014-08-18T22:31:58.608327+00:00Z", - "links":{ + "transactions": [{ + "status": "succeeded", + "count": 1, + "card_type": "debit", + "amount": 104, + "card_brand": "visa", + "type": "debit" + }, { + "status": "failed", + "count": 1, + "failure_reason": null, + "card_type": "debit", + "amount": 104, + "card_brand": "visa", + "type": "debit" + }, { + "status": "succeeded", + "count": 1, + "amount": 104, + "type": "credit" + }, { + "status": "failed", + "count": 1, + "amount": 104, + "type": "credit", + "failure_reason": null + }], + "escrow_at_end": 0, + "end_at": "2014-08-18T22:31:58.608327+00:00Z" + }, { + "escrow_at_start": 0, + "start_at": "2014-08-18T22:31:58.608327+00:00Z", + "links": { - }, - "transactions":[ - { - "status":"succeeded", - "count":1, - "card_type":"debit", - "amount":103, - "card_brand":"visa", - "type":"debit" - }, - { - "status":"failed", - "count":1, - "failure_reason":null, - "card_type":"debit", - "amount":103, - "card_brand":"visa", - "type":"debit" - }, - { - "status":"succeeded", - "count":1, - "amount":103, - "type":"credit" - }, - { - "status":"failed", - "count":1, - "amount":103, - "type":"credit", - "failure_reason":null - } - ], - "escrow_at_end":0, - "end_at":"2014-08-19T22:31:58.608327+00:00Z" }, - { - "escrow_at_start":0, - "start_at":"2014-08-19T22:31:58.608327+00:00Z", - "links":{ + "transactions": [{ + "status": "succeeded", + "count": 1, + "card_type": "debit", + "amount": 103, + "card_brand": "visa", + "type": "debit" + }, { + "status": "failed", + "count": 1, + "failure_reason": null, + "card_type": "debit", + "amount": 103, + "card_brand": "visa", + "type": "debit" + }, { + "status": "succeeded", + "count": 1, + "amount": 103, + "type": "credit" + }, { + "status": "failed", + "count": 1, + "amount": 103, + "type": "credit", + "failure_reason": null + }], + "escrow_at_end": 0, + "end_at": "2014-08-19T22:31:58.608327+00:00Z" + }, { + "escrow_at_start": 0, + "start_at": "2014-08-19T22:31:58.608327+00:00Z", + "links": { - }, - "transactions":[ - { - "status":"succeeded", - "count":1, - "card_type":"debit", - "amount":102, - "card_brand":"visa", - "type":"debit" - }, - { - "status":"failed", - "count":1, - "failure_reason":null, - "card_type":"debit", - "amount":102, - "card_brand":"visa", - "type":"debit" - }, - { - "status":"succeeded", - "count":1, - "amount":102, - "type":"credit" - }, - { - "status":"failed", - "count":1, - "amount":102, - "type":"credit", - "failure_reason":null - } - ], - "escrow_at_end":0, - "end_at":"2014-08-20T22:31:58.608327+00:00Z" }, - { - "escrow_at_start":0, - "start_at":"2014-08-20T22:31:58.608327+00:00Z", - "links":{ + "transactions": [{ + "status": "succeeded", + "count": 1, + "card_type": "debit", + "amount": 102, + "card_brand": "visa", + "type": "debit" + }, { + "status": "failed", + "count": 1, + "failure_reason": null, + "card_type": "debit", + "amount": 102, + "card_brand": "visa", + "type": "debit" + }, { + "status": "succeeded", + "count": 1, + "amount": 102, + "type": "credit" + }, { + "status": "failed", + "count": 1, + "amount": 102, + "type": "credit", + "failure_reason": null + }], + "escrow_at_end": 0, + "end_at": "2014-08-20T22:31:58.608327+00:00Z" + }, { + "escrow_at_start": 0, + "start_at": "2014-08-20T22:31:58.608327+00:00Z", + "links": { - }, - "transactions":[ - { - "status":"succeeded", - "count":1, - "card_type":"debit", - "amount":101, - "card_brand":"visa", - "type":"debit" - }, - { - "status":"failed", - "count":1, - "failure_reason":null, - "card_type":"debit", - "amount":101, - "card_brand":"visa", - "type":"debit" - }, - { - "status":"succeeded", - "count":1, - "amount":101, - "type":"credit" - }, - { - "status":"failed", - "count":1, - "amount":101, - "type":"credit", - "failure_reason":null - } - ], - "escrow_at_end":0, - "end_at":"2014-08-21T22:31:58.608327+00:00Z" }, - { - "escrow_at_start":0, - "start_at":"2014-08-21T22:31:58.608327+00:00Z", - "links":{ + "transactions": [{ + "status": "succeeded", + "count": 1, + "card_type": "debit", + "amount": 101, + "card_brand": "visa", + "type": "debit" + }, { + "status": "failed", + "count": 1, + "failure_reason": null, + "card_type": "debit", + "amount": 101, + "card_brand": "visa", + "type": "debit" + }, { + "status": "succeeded", + "count": 1, + "amount": 101, + "type": "credit" + }, { + "status": "failed", + "count": 1, + "amount": 101, + "type": "credit", + "failure_reason": null + }], + "escrow_at_end": 0, + "end_at": "2014-08-21T22:31:58.608327+00:00Z" + }, { + "escrow_at_start": 0, + "start_at": "2014-08-21T22:31:58.608327+00:00Z", + "links": { - }, - "transactions":[ - { - "status":"succeeded", - "count":1, - "card_type":"debit", - "amount":100, - "card_brand":"visa", - "type":"debit" - }, - { - "status":"failed", - "count":1, - "failure_reason":null, - "card_type":"debit", - "amount":100, - "card_brand":"visa", - "type":"debit" - }, - { - "status":"succeeded", - "count":1, - "amount":100, - "type":"credit" - }, - { - "status":"failed", - "count":1, - "amount":100, - "type":"credit", - "failure_reason":null - } - ], - "escrow_at_end":99799, - "end_at":"2014-08-22T22:31:58.608327+00:00Z" - } - ], - "meta":{ - "last":"/analytics/transactions?limit=10&interval=1d&start_at=2014-08-12+22%3A31%3A58.608327&offset=10", - "first":"/analytics/transactions?limit=10&interval=1d&start_at=2014-08-12+22%3A31%3A58.608327&offset=0", - "next":"/analytics/transactions?limit=10&interval=1d&start_at=2014-08-12+22%3A31%3A58.608327&offset=10", - "href":"/analytics/transactions?limit=10&interval=1d&start_at=2014-08-12+22%3A31%3A58.608327&offset=0", - "limit":10, - "offset":0, - "total":11, - "previous":null + }, + "transactions": [{ + "status": "succeeded", + "count": 1, + "card_type": "debit", + "amount": 100, + "card_brand": "visa", + "type": "debit" + }, { + "status": "failed", + "count": 1, + "failure_reason": null, + "card_type": "debit", + "amount": 100, + "card_brand": "visa", + "type": "debit" + }, { + "status": "succeeded", + "count": 1, + "amount": 100, + "type": "credit" + }, { + "status": "failed", + "count": 1, + "amount": 100, + "type": "credit", + "failure_reason": null + }], + "escrow_at_end": 99799, + "end_at": "2014-08-22T22:31:58.608327+00:00Z" + }], + "meta": { + "last": "/analytics/transactions?limit=10&interval=1d&start_at=2014-08-12+22%3A31%3A58.608327&offset=10", + "first": "/analytics/transactions?limit=10&interval=1d&start_at=2014-08-12+22%3A31%3A58.608327&offset=0", + "next": "/analytics/transactions?limit=10&interval=1d&start_at=2014-08-12+22%3A31%3A58.608327&offset=10", + "href": "/analytics/transactions?limit=10&interval=1d&start_at=2014-08-12+22%3A31%3A58.608327&offset=0", + "limit": 10, + "offset": 0, + "total": 11, + "previous": null }, - "links":{ + "links": { } }]); From 57ec74a2b6d38fbe2f4909d4093fb340bf2771ec Mon Sep 17 00:00:00 2001 From: Kyungmin Kim Date: Tue, 26 Aug 2014 17:41:46 -0700 Subject: [PATCH 24/34] Use body panel view --- app/controllers/overview.js | 18 ++++++---- .../charts/line-chart-with-legend.hbs | 4 +-- app/templates/marketplace/overview.hbs | 34 +++++++++---------- 3 files changed, 30 insertions(+), 26 deletions(-) diff --git a/app/controllers/overview.js b/app/controllers/overview.js index 5aff72947..15422373f 100644 --- a/app/controllers/overview.js +++ b/app/controllers/overview.js @@ -7,7 +7,7 @@ Balanced.MarketplaceOverviewController = Balanced.ObjectController.extend( init: function() { this._super(); - this.fetchTotalVolume(); + this.loadAnalytics(); }, totalVolume: function() { @@ -34,20 +34,26 @@ Balanced.MarketplaceOverviewController = Balanced.ObjectController.extend( }]; }.property(), - fetchTotalVolume: function() { + loadAnalytics: function() { var connection = Balanced.Connections.ApiConnection.create(); var self = this; connection.ajax({ uri: "/analytics?type=volume" }).then(function(response) { - console.log(response.analytics); - // process data - self.set('totalVolume', []); - console.log(self.get('totalVolume')); + this.fetchTotalVolume(response.analytics); + this.fetchTransactionsCount(response.analytics); }); }, + fetchTotalVolume: function(data) { + self.set('totalVolume', newData); + }, + + fetchTransactionsCount: function(data) { + self.set('transactionsCount', newData); + }, + transactionsCount: function() { var sin = [], cos = []; diff --git a/app/templates/charts/line-chart-with-legend.hbs b/app/templates/charts/line-chart-with-legend.hbs index a92bf5eda..8eed73073 100644 --- a/app/templates/charts/line-chart-with-legend.hbs +++ b/app/templates/charts/line-chart-with-legend.hbs @@ -1,4 +1,4 @@ -
+

Total volume

@@ -30,6 +30,6 @@
-
+
{{view Balanced.LineChartView data=view.data viewName="lineChartView"}}
diff --git a/app/templates/marketplace/overview.hbs b/app/templates/marketplace/overview.hbs index 8ee4772f4..b50621729 100644 --- a/app/templates/marketplace/overview.hbs +++ b/app/templates/marketplace/overview.hbs @@ -14,34 +14,32 @@
-
+ {{#view Balanced.BodyPanelView}} {{view Balanced.LineChartWithLegendView data=controller.totalVolume}} -
+ {{/view}} -
+ {{#view Balanced.BodyPanelView}} {{view Balanced.LineChartWithLegendView data=controller.transactionsCount}} -
+ {{/view}} -
-
+ {{#view Balanced.BodyPanelView}} + {{#view Balanced.SidePanelView model=model}}

Average transaction size

-
- -
+ {{/view}} + {{#view Balanced.MainPanelView}} {{view Balanced.VerticalBarChartView data=verticalBarChartData}} -
-
+ {{/view}} + {{/view}}
-
-
+ {{#view Balanced.BodyPanelView}} + {{#view Balanced.SidePanelView model=model}}

Total card volume

-
- -
+ {{/view}} + {{#view Balanced.MainPanelView}} {{view Balanced.HorizontalBarChartView data=horizontalBarChartData}} -
-
+ {{/view}} + {{/view}}
From aa68272dd1c18cf066da93cdc35b344e04b6d786 Mon Sep 17 00:00:00 2001 From: Kyungmin Kim Date: Wed, 27 Aug 2014 18:35:33 -0700 Subject: [PATCH 25/34] Extract data from analytics response --- app/controllers/overview.js | 90 ++++++++++++++++--------------------- 1 file changed, 39 insertions(+), 51 deletions(-) diff --git a/app/controllers/overview.js b/app/controllers/overview.js index 15422373f..254f06700 100644 --- a/app/controllers/overview.js +++ b/app/controllers/overview.js @@ -10,29 +10,8 @@ Balanced.MarketplaceOverviewController = Balanced.ObjectController.extend( this.loadAnalytics(); }, - totalVolume: function() { - var sin = [], - cos = []; - - for (var i = 0; i < 100; i++) { - sin.push({ - x: i, - y: Math.sin(i / 10) - }); - cos.push({ - x: i, - y: 0.5 * Math.cos(i / 10) - }); - } - - return [{ - values: sin, - key: 'Sine Wave' - }, { - values: cos, - key: 'Cosine Wave' - }]; - }.property(), + totalVolume: [], + transactionsCount: [], loadAnalytics: function() { var connection = Balanced.Connections.ApiConnection.create(); @@ -41,42 +20,51 @@ Balanced.MarketplaceOverviewController = Balanced.ObjectController.extend( connection.ajax({ uri: "/analytics?type=volume" }).then(function(response) { - this.fetchTotalVolume(response.analytics); - this.fetchTransactionsCount(response.analytics); + self.fetchTotalVolume(response.analytics); + self.fetchTransactionsCount(response.analytics); }); }, - fetchTotalVolume: function(data) { - self.set('totalVolume', newData); - }, - - fetchTransactionsCount: function(data) { - self.set('transactionsCount', newData); - }, + fetchTotalVolume: function(days) { + var totalDebitVolume = [], + totalCreditVolume = [], + totalRefundVolume = [], + totalReversalVolume = []; - transactionsCount: function() { - var sin = [], - cos = []; + var TRANSACTION_TYPES = { + 'debit': totalDebitVolume, + 'credit': totalCreditVolume, + 'refund': totalRefundVolume, + 'reversal': totalReversalVolume, + }; - for (var i = 0; i < 100; i++) { - sin.push({ - x: i, - y: Math.sin(i / 10) + days.forEach(function(day) { + day.transactions.forEach(function(transaction) { + TRANSACTION_TYPES[transaction.type].push({ + x: day["start_at"], + y: transaction.amount + }); }); - cos.push({ - x: i, - y: 0.5 * Math.cos(i / 10) - }); - } + }); - return [{ - values: cos, - key: 'Sine Wave' + this.set('totalVolume', [{ + key: 'Debits', + values: totalDebitVolume }, { - values: sin, - key: 'Cosine Wave' - }]; - }.property(), + key: 'Credits', + values: totalCreditVolume + }, { + key: 'Refunds', + values: totalRefundVolume + }, { + key: 'Reversals', + values: totalReversalVolume + }]); + }, + + fetchTransactionsCount: function(data) { + var newData = data; + }, verticalBarChartData: function() { return [{ From 30a242988c9297dbdca45716a5e4c96b50739354 Mon Sep 17 00:00:00 2001 From: Kyungmin Kim Date: Thu, 28 Aug 2014 15:28:19 -0700 Subject: [PATCH 26/34] Update property names --- app/controllers/overview.js | 71 +++++++++++++++++++++++++++---------- 1 file changed, 53 insertions(+), 18 deletions(-) diff --git a/app/controllers/overview.js b/app/controllers/overview.js index 254f06700..8084e424b 100644 --- a/app/controllers/overview.js +++ b/app/controllers/overview.js @@ -10,7 +10,7 @@ Balanced.MarketplaceOverviewController = Balanced.ObjectController.extend( this.loadAnalytics(); }, - totalVolume: [], + transactionsVolume: [], transactionsCount: [], loadAnalytics: function() { @@ -20,50 +20,85 @@ Balanced.MarketplaceOverviewController = Balanced.ObjectController.extend( connection.ajax({ uri: "/analytics?type=volume" }).then(function(response) { - self.fetchTotalVolume(response.analytics); + self.fetchTransactionsVolume(response.analytics); self.fetchTransactionsCount(response.analytics); }); }, - fetchTotalVolume: function(days) { - var totalDebitVolume = [], - totalCreditVolume = [], - totalRefundVolume = [], - totalReversalVolume = []; + fetchTransactionsVolume: function(days) { + var DebitVolume = [], + CreditVolume = [], + RefundVolume = [], + ReversalVolume = []; var TRANSACTION_TYPES = { - 'debit': totalDebitVolume, - 'credit': totalCreditVolume, - 'refund': totalRefundVolume, - 'reversal': totalReversalVolume, + 'debit': DebitVolume, + 'credit': CreditVolume, + 'refund': RefundVolume, + 'reversal': ReversalVolume, }; days.forEach(function(day) { day.transactions.forEach(function(transaction) { + console.log(day.start_at, transaction.amount) TRANSACTION_TYPES[transaction.type].push({ - x: day["start_at"], + x: day.start_at, y: transaction.amount }); }); }); - this.set('totalVolume', [{ + this.set('transactionsVolume', [{ key: 'Debits', - values: totalDebitVolume + values: DebitVolume }, { key: 'Credits', - values: totalCreditVolume + values: CreditVolume }, { key: 'Refunds', - values: totalRefundVolume + values: RefundVolume }, { key: 'Reversals', - values: totalReversalVolume + values: ReversalVolume }]); }, fetchTransactionsCount: function(data) { - var newData = data; + var DebitCount = [], + CreditCount = [], + RefundCount = [], + ReversalCount = []; + + var TRANSACTION_TYPES = { + 'debit': DebitCount, + 'credit': CreditCount, + 'refund': RefundCount, + 'reversal': ReversalCount, + }; + + days.forEach(function(day) { + day.transactions.forEach(function(transaction) { + console.log(day.start_at, transaction.amount) + TRANSACTION_TYPES[transaction.type].push({ + x: day.start_at, + y: transaction.count + }); + }); + }); + + this.set('transactionsCount', [{ + key: 'Debits', + values: DebitCount + }, { + key: 'Credits', + values: CreditCount + }, { + key: 'Refunds', + values: RefundCount + }, { + key: 'Reversals', + values: ReversalCount + }]); }, verticalBarChartData: function() { From 7a9818e241be82108624a9ad5b5c050b63ede2e7 Mon Sep 17 00:00:00 2001 From: Kyungmin Kim Date: Wed, 3 Sep 2014 13:56:36 -0700 Subject: [PATCH 27/34] Display a line graph from fixture data --- app/controllers/overview.js | 82 +++++++++++----------------------- app/views/charts/line-chart.js | 2 +- 2 files changed, 27 insertions(+), 57 deletions(-) diff --git a/app/controllers/overview.js b/app/controllers/overview.js index 8084e424b..eee3c5986 100644 --- a/app/controllers/overview.js +++ b/app/controllers/overview.js @@ -10,7 +10,7 @@ Balanced.MarketplaceOverviewController = Balanced.ObjectController.extend( this.loadAnalytics(); }, - transactionsVolume: [], + totalVolume: [], transactionsCount: [], loadAnalytics: function() { @@ -20,85 +20,55 @@ Balanced.MarketplaceOverviewController = Balanced.ObjectController.extend( connection.ajax({ uri: "/analytics?type=volume" }).then(function(response) { - self.fetchTransactionsVolume(response.analytics); + self.fetchTotalVolume(response.analytics); self.fetchTransactionsCount(response.analytics); }); }, - fetchTransactionsVolume: function(days) { - var DebitVolume = [], - CreditVolume = [], - RefundVolume = [], - ReversalVolume = []; + fetchTotalVolume: function(days) { + var totalDebitVolume = [], + totalCreditVolume = [], + totalRefundVolume = [], + totalReversalVolume = []; var TRANSACTION_TYPES = { - 'debit': DebitVolume, - 'credit': CreditVolume, - 'refund': RefundVolume, - 'reversal': ReversalVolume, + 'debit': totalDebitVolume, + 'credit': totalCreditVolume, + 'refund': totalRefundVolume, + 'reversal': totalReversalVolume, }; days.forEach(function(day) { + var type, amount = 0; + day.transactions.forEach(function(transaction) { - console.log(day.start_at, transaction.amount) - TRANSACTION_TYPES[transaction.type].push({ - x: day.start_at, - y: transaction.amount - }); + type = transaction.type; + amount += transaction.amount; + }); + + TRANSACTION_TYPES[type].push({ + x: new Date.parseISO8601(day.start_at), + y: amount }); }); - this.set('transactionsVolume', [{ + this.set('totalVolume', [{ key: 'Debits', - values: DebitVolume + values: totalDebitVolume }, { key: 'Credits', - values: CreditVolume + values: totalCreditVolume }, { key: 'Refunds', - values: RefundVolume + values: totalRefundVolume }, { key: 'Reversals', - values: ReversalVolume + values: totalReversalVolume }]); }, fetchTransactionsCount: function(data) { - var DebitCount = [], - CreditCount = [], - RefundCount = [], - ReversalCount = []; - - var TRANSACTION_TYPES = { - 'debit': DebitCount, - 'credit': CreditCount, - 'refund': RefundCount, - 'reversal': ReversalCount, - }; - - days.forEach(function(day) { - day.transactions.forEach(function(transaction) { - console.log(day.start_at, transaction.amount) - TRANSACTION_TYPES[transaction.type].push({ - x: day.start_at, - y: transaction.count - }); - }); - }); - - this.set('transactionsCount', [{ - key: 'Debits', - values: DebitCount - }, { - key: 'Credits', - values: CreditCount - }, { - key: 'Refunds', - values: RefundCount - }, { - key: 'Reversals', - values: ReversalCount - }]); + var newData = data; }, verticalBarChartData: function() { diff --git a/app/views/charts/line-chart.js b/app/views/charts/line-chart.js index 0be0f5a5a..d902ee5bf 100644 --- a/app/views/charts/line-chart.js +++ b/app/views/charts/line-chart.js @@ -31,7 +31,7 @@ Balanced.LineChartView = Balanced.ChartView.extend({ noData: 'No data available.', tooltips: true, xTickFormat: function(d) { - return d3.time.format('%x')(new Date(d)); + return d3.time.format('%x')(d); }, yTickFormat: d3.format(',.2f'), showLegend: false From 32358ecd13274cbecf3c42a56b563dd1342ca4e8 Mon Sep 17 00:00:00 2001 From: Kyungmin Kim Date: Wed, 3 Sep 2014 15:59:17 -0700 Subject: [PATCH 28/34] Add crossfilter --- Gruntfile.js | 8 +++-- app/controllers/overview.js | 61 ++++++++++------------------------ app/views/charts/line-chart.js | 1 + bower.json | 3 +- 4 files changed, 25 insertions(+), 48 deletions(-) diff --git a/Gruntfile.js b/Gruntfile.js index c7c48967f..d509547a6 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -95,7 +95,7 @@ module.exports = function(grunt) { 'static/javascripts/lodash/dist/lodash.underscore.js', 'static/javascripts/mixpanel/mixpanel.js', 'static/javascripts/google-code-prettify/src/prettify.js', - 'static/javascripts/strftime/index.js', + 'static/javascripts/crossfilter/index.js', 'static/javascripts/jquery-hotkeys/jquery.hotkeys.js', 'static/javascripts/jquery.cookie/jquery.cookie.js', 'static/javascripts/bootstrap-modal/js/bootstrap-modalmanager.js', @@ -107,7 +107,8 @@ module.exports = function(grunt) { 'static/javascripts/timepicker/jquery.timepicker.js', 'static/javascripts/d3/d3.min.js', 'static/javascripts/nvd3/nv.d3.js', - 'static/lib/nvd3-triangle-bar.js' + 'static/lib/nvd3-triangle-bar.js', + 'static/javascripts/strftime/index.js' ], dest: 'build/js/lib-dev.js' }, @@ -137,7 +138,8 @@ module.exports = function(grunt) { 'static/javascripts/timepicker/jquery.timepicker.min.js', 'static/javascripts/d3/d3.min.js', 'static/javascripts/nvd3/nv.d3.min.js', - 'static/lib/nvd3-triangle-bar.js' + 'static/lib/nvd3-triangle-bar.js', + 'static/javascripts/strftime/index.js' ], dest: 'build/js/lib-prod.js' }, diff --git a/app/controllers/overview.js b/app/controllers/overview.js index eee3c5986..d6ec1cf89 100644 --- a/app/controllers/overview.js +++ b/app/controllers/overview.js @@ -20,55 +20,28 @@ Balanced.MarketplaceOverviewController = Balanced.ObjectController.extend( connection.ajax({ uri: "/analytics?type=volume" }).then(function(response) { - self.fetchTotalVolume(response.analytics); - self.fetchTransactionsCount(response.analytics); + var transactions = response.analytics.map(function(day) { + return day.transactions.map(function(transaction) { + return _.extend({}, transaction, { + start_at: day.start_at + }); + }); + }); + transactions = _.flatten(transactions); + self.group(transactions); }); }, - fetchTotalVolume: function(days) { - var totalDebitVolume = [], - totalCreditVolume = [], - totalRefundVolume = [], - totalReversalVolume = []; - - var TRANSACTION_TYPES = { - 'debit': totalDebitVolume, - 'credit': totalCreditVolume, - 'refund': totalRefundVolume, - 'reversal': totalReversalVolume, - }; - - days.forEach(function(day) { - var type, amount = 0; - - day.transactions.forEach(function(transaction) { - type = transaction.type; - amount += transaction.amount; - }); - - TRANSACTION_TYPES[type].push({ - x: new Date.parseISO8601(day.start_at), - y: amount - }); + group: function(data) { + var cf = crossfilter(data); + var byType = cf.dimension(function(p) { + return p.type; }); - this.set('totalVolume', [{ - key: 'Debits', - values: totalDebitVolume - }, { - key: 'Credits', - values: totalCreditVolume - }, { - key: 'Refunds', - values: totalRefundVolume - }, { - key: 'Reversals', - values: totalReversalVolume - }]); - }, - - fetchTransactionsCount: function(data) { - var newData = data; + var groupByType = byType.group(); + groupByType.top(Infinity).forEach(function(p, i) { + console.log(p.key + ": " + p.value); + }); }, verticalBarChartData: function() { diff --git a/app/views/charts/line-chart.js b/app/views/charts/line-chart.js index d902ee5bf..27a1b15c5 100644 --- a/app/views/charts/line-chart.js +++ b/app/views/charts/line-chart.js @@ -31,6 +31,7 @@ Balanced.LineChartView = Balanced.ChartView.extend({ noData: 'No data available.', tooltips: true, xTickFormat: function(d) { + nv.log(d) return d3.time.format('%x')(d); }, yTickFormat: d3.format(',.2f'), diff --git a/bower.json b/bower.json index 4e2e00bff..d01942d42 100644 --- a/bower.json +++ b/bower.json @@ -20,7 +20,8 @@ "qunit": "1.14.0", "moment": "2.6.0", "bootstrap-daterangepicker": "1.3.5", - "timepicker": "jonthornton/jquery-timepicker" + "timepicker": "jonthornton/jquery-timepicker", + "crossfilter": "https://raw.githubusercontent.com/square/crossfilter/master/crossfilter.min.js" }, "resolutions": { "jquery": "2.0.3", From b66f1b48d85d8f9ea01d2bc710f91f3b2b2f5650 Mon Sep 17 00:00:00 2001 From: Kyungmin Kim Date: Wed, 3 Sep 2014 18:33:49 -0700 Subject: [PATCH 29/34] Render dates correctly --- app/controllers/overview.js | 22 ++++++++++++++++++---- app/views/charts/line-chart.js | 14 ++++++++------ 2 files changed, 26 insertions(+), 10 deletions(-) diff --git a/app/controllers/overview.js b/app/controllers/overview.js index d6ec1cf89..b7907d4e0 100644 --- a/app/controllers/overview.js +++ b/app/controllers/overview.js @@ -34,14 +34,28 @@ Balanced.MarketplaceOverviewController = Balanced.ObjectController.extend( group: function(data) { var cf = crossfilter(data); - var byType = cf.dimension(function(p) { - return p.type; + var byDate = cf.dimension(function(p) { + return p.start_at; }); - var groupByType = byType.group(); + var groupByType = byDate.group(); groupByType.top(Infinity).forEach(function(p, i) { - console.log(p.key + ": " + p.value); + // console.log(p.key + ": " + p.value); }); + + var transactions = groupByType.all().map(function(transaction) { + console.log(transaction, Date.parseISO8601(transaction.key)) + return _.extend({}, { + x: Date.parseISO8601(transaction.key), + y: transaction.value + }); + }); + // console.log(transactions); + + this.set("totalVolume", [{ + key: "Debits", + values: transactions + }]); }, verticalBarChartData: function() { diff --git a/app/views/charts/line-chart.js b/app/views/charts/line-chart.js index 27a1b15c5..a41f516a0 100644 --- a/app/views/charts/line-chart.js +++ b/app/views/charts/line-chart.js @@ -15,6 +15,13 @@ Balanced.LineChartView = Balanced.ChartView.extend({ return html; }); + + chart.xAxis.tickFormat(function(d) { + var date = new Date() + date.setTime(d); + return d3.time.format('%x')(date); + }); + return chart; }, @@ -22,7 +29,7 @@ Balanced.LineChartView = Balanced.ChartView.extend({ var self = this; return { - width: 500, + width: 800, showXAxis: true, showYAxis: true, showLegend: true, @@ -30,11 +37,6 @@ Balanced.LineChartView = Balanced.ChartView.extend({ useInteractiveGuideline: true, noData: 'No data available.', tooltips: true, - xTickFormat: function(d) { - nv.log(d) - return d3.time.format('%x')(d); - }, - yTickFormat: d3.format(',.2f'), showLegend: false }; }.property('chart') From 22d5a2d88f617bddeac2345abcf5b5866570a54b Mon Sep 17 00:00:00 2001 From: Kyungmin Kim Date: Wed, 10 Sep 2014 14:44:41 -0700 Subject: [PATCH 30/34] Add c3 --- Gruntfile.js | 2 ++ bower.json | 3 ++- 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/Gruntfile.js b/Gruntfile.js index d509547a6..95d9dbab4 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -107,6 +107,7 @@ module.exports = function(grunt) { 'static/javascripts/timepicker/jquery.timepicker.js', 'static/javascripts/d3/d3.min.js', 'static/javascripts/nvd3/nv.d3.js', + 'static/javascripts/c3/c3.min.js', 'static/lib/nvd3-triangle-bar.js', 'static/javascripts/strftime/index.js' ], @@ -138,6 +139,7 @@ module.exports = function(grunt) { 'static/javascripts/timepicker/jquery.timepicker.min.js', 'static/javascripts/d3/d3.min.js', 'static/javascripts/nvd3/nv.d3.min.js', + 'static/javascripts/c3/c3.min.js', 'static/lib/nvd3-triangle-bar.js', 'static/javascripts/strftime/index.js' ], diff --git a/bower.json b/bower.json index d01942d42..2a76600ad 100644 --- a/bower.json +++ b/bower.json @@ -21,7 +21,8 @@ "moment": "2.6.0", "bootstrap-daterangepicker": "1.3.5", "timepicker": "jonthornton/jquery-timepicker", - "crossfilter": "https://raw.githubusercontent.com/square/crossfilter/master/crossfilter.min.js" + "crossfilter": "https://raw.githubusercontent.com/square/crossfilter/master/crossfilter.min.js", + "c3": "0.3.0" }, "resolutions": { "jquery": "2.0.3", From 70a65339960936f6add4be2b877611ac313f9b9c Mon Sep 17 00:00:00 2001 From: Kyungmin Kim Date: Fri, 12 Sep 2014 12:14:13 -0700 Subject: [PATCH 31/34] Switch to c3.js and use real fixture data --- Gruntfile.js | 4 - app/controllers/overview.js | 112 ++-- app/templates/charts/line-chart.hbs | 0 app/views/charts/chart.js | 125 ++-- app/views/charts/line-chart.js | 51 +- static/less/base.less | 1 - static/lib/nvd3-triangle-bar.js | 350 ---------- test/support/fixtures/analytics.js | 952 +++++++++++++++++++++++----- 8 files changed, 921 insertions(+), 674 deletions(-) delete mode 100644 app/templates/charts/line-chart.hbs delete mode 100644 static/lib/nvd3-triangle-bar.js diff --git a/Gruntfile.js b/Gruntfile.js index 95d9dbab4..c86689604 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -106,9 +106,7 @@ module.exports = function(grunt) { 'static/lib/daterangepicker.js', 'static/javascripts/timepicker/jquery.timepicker.js', 'static/javascripts/d3/d3.min.js', - 'static/javascripts/nvd3/nv.d3.js', 'static/javascripts/c3/c3.min.js', - 'static/lib/nvd3-triangle-bar.js', 'static/javascripts/strftime/index.js' ], dest: 'build/js/lib-dev.js' @@ -138,9 +136,7 @@ module.exports = function(grunt) { 'static/lib/daterangepicker.js', 'static/javascripts/timepicker/jquery.timepicker.min.js', 'static/javascripts/d3/d3.min.js', - 'static/javascripts/nvd3/nv.d3.min.js', 'static/javascripts/c3/c3.min.js', - 'static/lib/nvd3-triangle-bar.js', 'static/javascripts/strftime/index.js' ], dest: 'build/js/lib-prod.js' diff --git a/app/controllers/overview.js b/app/controllers/overview.js index b7907d4e0..6a7617eb4 100644 --- a/app/controllers/overview.js +++ b/app/controllers/overview.js @@ -28,68 +28,82 @@ Balanced.MarketplaceOverviewController = Balanced.ObjectController.extend( }); }); transactions = _.flatten(transactions); - self.group(transactions); + self.formatTransactions(transactions); }); }, - group: function(data) { + formatTransactions: function(data) { var cf = crossfilter(data); var byDate = cf.dimension(function(p) { return p.start_at; }); + var byType = cf.dimension(function(p) { + return p.type; + }); + var groupByType = byDate.group(); - groupByType.top(Infinity).forEach(function(p, i) { - // console.log(p.key + ": " + p.value); + + var dates = groupByType.all().map(function(transaction) { + return Date.parseISO8601(transaction.key); }); + dates = ['x'].concat(dates); - var transactions = groupByType.all().map(function(transaction) { - console.log(transaction, Date.parseISO8601(transaction.key)) - return _.extend({}, { - x: Date.parseISO8601(transaction.key), - y: transaction.value - }); + var debitCount = ['debits']; + var creditCount = ['credits']; + var refundCount = ['refunds']; + var reversalCount = ['reversals']; + + var debitAmount = ['debits']; + var creditAmount = ['credits']; + var refundAmount = ['refunds']; + var reversalAmount = ['reversals']; + + byType.filterExact('debit'); + byType.top(Infinity).forEach(function(p, i) { + debitCount.push(p.count); + debitAmount.push(p.amount); + }); + + byType.filterExact('credit'); + byType.top(Infinity).forEach(function(p, i) { + creditCount.push(p.count); + creditAmount.push(p.amount); + }); + + byType.filterExact('refund'); + byType.top(Infinity).forEach(function(p, i) { + refundCount.push(p.count); + refundAmount.push(p.amount); }); - // console.log(transactions); - this.set("totalVolume", [{ - key: "Debits", - values: transactions - }]); + byType.filterExact('reversal'); + byType.top(Infinity).forEach(function(p, i) { + reversalCount.push(p.count); + reversalAmount.push(p.amount); + }); + + this.set("totalVolume", { + x: 'x', + columns: [dates, debitAmount, creditAmount, refundAmount, reversalAmount], + type: 'spline' + }); + + this.set("transactionsCount", { + x: 'x', + columns: [dates, debitCount, creditCount, refundCount, reversalCount], + type: 'spline' + }); + + this.set("verticalBarChartData", { + x: 'x', + columns: [dates, debitCount] + }); + + this.set("horizontalBarChartData", { + x: 'x', + columns: [dates, debitCount] + }); }, - verticalBarChartData: function() { - return [{ - key: "Cumulative Return", - values: [{ - x: "A Label", - y: 29.765957771107 - }, { - x: "B Label", - y: 52.52 - }, { - x: "C Label", - y: 32.807804682612 - }] - }]; - }.property(), - - horizontalBarChartData: function() { - return [{ - key: "Cumulative Return", - values: [{ - x: "A Label", - y: 29.765957771107 - }, { - x: "B Label", - y: 10 - }, { - x: "C Label", - y: 32.807804682612 - }, { - x: "D Label", - y: 96.45946739256 - }] - }]; - }.property() }); diff --git a/app/templates/charts/line-chart.hbs b/app/templates/charts/line-chart.hbs deleted file mode 100644 index e69de29bb..000000000 diff --git a/app/views/charts/chart.js b/app/views/charts/chart.js index 2a9d69fbf..01770e37a 100644 --- a/app/views/charts/chart.js +++ b/app/views/charts/chart.js @@ -1,70 +1,77 @@ Balanced.ChartView = Ember.View.extend({ - tagName: 'svg', - classNames: ['chart-container'], + tagName: 'div', + classNames: ['chart'], + data: {}, + axis: {}, + regions: {}, + grid: {}, + transition: {}, + legend: {}, + tooltip: {}, + subchart: {}, + zoom: {}, + size: {}, + padding: {}, + color: { + pattern: ['#639ABD', '#BC8F30', '#9364A8', '#00A08E'] + }, + // @egyptianBlue80, @turmericYellow80, @byzantiumPurple80, @forestGreen80 - _chartModel: null, - chartModel: function() { - return window.nv.models[this.get('_chartModel')](); - }.property("_chartModel"), - width: 500, - height: 500, - x: null, - y: null, - data: null, - options: {}, + bar: {}, + pie: {}, + donut: {}, + gauge: {}, - _chart: null, + _chart: undefined, chart: function() { var self = this; - var chart = self.get('_chart'); - - if (!chart) { - chart = self.get('chartModel'); + if (Ember.isEqual(self.get('_chart'), undefined)) { + // Empty, create it. + var container = self.get('element'); + if (Ember.isEqual(container, undefined)) { + return undefined; + } else { + var config = self.get('_config'); + var chart = c3.generate(config); + self.set('_chart', chart); + return chart; + } + } else { + // Editor is already created and cached. + return self.get('_chart'); } - - chart.color(['#639ABD', '#BC8F30', '#9364A8', '#00A08E']); - // @egyptianBlue80, @turmericYellow80, @byzantiumPurple80, @forestGreen80 - - chart.options(self.get('options')); - return self.get('customizeChart').apply(self, [chart]); - }.property('chartModel', 'margin', 'options', 'customizeChart'), - - customizeChart: function(chart) { - return chart; - }, - - updateChart: function() { - var self = this; - var el = self.get('element'); - var data = self.get('data'); - var chart = self.get('chart'); - - window.d3.select(el) - .datum(data) - .transition() - .duration(250) - .call(chart); - - self.set('_chart', chart); - window.nv.utils.windowResize(chart.update); - - }.observes('data', 'chart').on('didInsertElement'), - - didInsertElement: function() { - var self = this; - var $el = self.$(); - var el = $el.get(0); - - window.nv.addGraph(function() { - var chart = self.get('chart'); - - $('circle.nv-point').attr("r", "5"); - - return chart; - }); - }, + }.property('element', '_config'), + + _config: function() { + var c = this.getProperties([ + 'data', + 'axis', + 'regions', + 'bar', + 'pie', + 'donut', + 'gauge', + 'grid', + 'legend', + 'tooltip', + 'subchart', + 'zoom', + 'size', + 'padding', + 'color', + 'transition' + ]); + c.bindto = this.get('element'); + return c; + }.property('element', 'data', 'axis', 'regions', 'bar', 'pie', 'donut', 'gauge', 'grid', 'legend', 'tooltip', 'subchart', 'zoom', 'size', 'padding', 'color', 'transition'), + + dataDidChange: function() { + var chart = this.get('chart'); + chart.load(this.get('data')); + }.observes('data').on('didInsertElement') +}); actions: { toggleLegend: function(seriesKey) { diff --git a/app/views/charts/line-chart.js b/app/views/charts/line-chart.js index a41f516a0..a0c3ada65 100644 --- a/app/views/charts/line-chart.js +++ b/app/views/charts/line-chart.js @@ -1,43 +1,18 @@ require("./chart"); Balanced.LineChartView = Balanced.ChartView.extend({ - _chartModel: "lineChart", - classNames: ['line-chart'], - customizeChart: function(chart) { - chart.interactiveLayer.tooltip.contentGenerator(function(data) { - var html = ''; - - _.each(data, function(series) { - _.each(series, function(p) { - html += '

%@

%@

'.fmt(p.key, p.value); - }) - }); - - return html; - }); - - chart.xAxis.tickFormat(function(d) { - var date = new Date() - date.setTime(d); - return d3.time.format('%x')(date); - }); - - return chart; + axis: { + x: { + type: 'timeseries', + tick: { + format: function(x) { + return d3.time.format('%x')(x); + } + } + } }, - - options: function() { - var self = this; - - return { - width: 800, - showXAxis: true, - showYAxis: true, - showLegend: true, - rightAlignYAxis: false, - useInteractiveGuideline: true, - noData: 'No data available.', - tooltips: true, - showLegend: false - }; - }.property('chart') + size: { + width: 600, + height: 320 + } }); diff --git a/static/less/base.less b/static/less/base.less index 0dc192e0e..886710a68 100644 --- a/static/less/base.less +++ b/static/less/base.less @@ -1,5 +1,4 @@ @import "/static/less/bootstrap.less"; -@import "/static/javascripts/nvd3/nv.d3.min.css"; @import "/static/javascripts/strapped/static/less/strapped.less"; /* diff --git a/static/lib/nvd3-triangle-bar.js b/static/lib/nvd3-triangle-bar.js deleted file mode 100644 index d28d2b25c..000000000 --- a/static/lib/nvd3-triangle-bar.js +++ /dev/null @@ -1,350 +0,0 @@ -// Note: Custom chart model based on nv.models.discreteBar - -(function () { - nv.models.triangleBar = function() { - "use strict"; - //============================================================ - // Public Variables with Default Settings - //------------------------------------------------------------ - - var margin = {top: 0, right: 0, bottom: 0, left: 0} - , width = 960 - , height = 500 - , id = Math.floor(Math.random() * 10000) //Create semi-unique ID in case user doesn't select one - , x = d3.scale.ordinal() - , y = d3.scale.linear() - , getX = function(d) { return d.x } - , getY = function(d) { return d.y } - , forceY = [0] // 0 is forced by default.. this makes sense for the majority of bar graphs... user can always do chart.forceY([]) to remove - , color = nv.utils.defaultColor() - , showValues = false - , valueFormat = d3.format(',.2f') - , xDomain - , yDomain - , xRange - , yRange - , dispatch = d3.dispatch('chartClick', 'elementClick', 'elementDblClick', 'elementMouseover', 'elementMouseout') - , rectClass = 'trianglebar' - ; - - //============================================================ - - - //============================================================ - // Private Variables - //------------------------------------------------------------ - - var x0, y0; - - //============================================================ - - - function chart(selection) { - selection.each(function(data) { - var availableWidth = width - margin.left - margin.right, - availableHeight = height - margin.top - margin.bottom, - container = d3.select(this); - - - //add series index to each data point for reference - data.forEach(function(series, i) { - series.values.forEach(function(point) { - point.series = i; - }); - }); - - - //------------------------------------------------------------ - // Setup Scales - - // remap and flatten the data for use in calculating the scales' domains - var seriesData = (xDomain && yDomain) ? [] : // if we know xDomain and yDomain, no need to calculate - data.map(function(d) { - return d.values.map(function(d,i) { - return { x: getX(d,i), y: getY(d,i), y0: d.y0 } - }) - }); - - x .domain(xDomain || d3.merge(seriesData).map(function(d) { return d.x })) - .rangeBands(xRange || [0, availableWidth], .1); - - y .domain(yDomain || d3.extent(d3.merge(seriesData).map(function(d) { return d.y }).concat(forceY))); - - - // If showValues, pad the Y axis range to account for label height - if (showValues) y.range(yRange || [availableHeight - (y.domain()[0] < 0 ? 12 : 0), y.domain()[1] > 0 ? 12 : 0]); - else y.range(yRange || [availableHeight, 0]); - - //store old scales if they exist - x0 = x0 || x; - y0 = y0 || y.copy().range([y(0),y(0)]); - - //------------------------------------------------------------ - - - //------------------------------------------------------------ - // Setup containers and skeleton of chart - - var wrap = container.selectAll('g.nv-wrap.nv-trianglebar').data([data]); - var wrapEnter = wrap.enter().append('g').attr('class', 'nvd3 nv-wrap nv-trianglebar'); - var gEnter = wrapEnter.append('g'); - var g = wrap.select('g'); - - gEnter.append('g').attr('class', 'nv-groups'); - - wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')'); - - //------------------------------------------------------------ - - - - //TODO: by definition, the discrete bar should not have multiple groups, will modify/remove later - var groups = wrap.select('.nv-groups').selectAll('.nv-group') - .data(function(d) { return d }, function(d) { return d.key }); - groups.enter().append('g') - .style('stroke-opacity', 1e-6) - .style('fill-opacity', 1e-6); - groups.exit() - .transition() - .style('stroke-opacity', 1e-6) - .style('fill-opacity', 1e-6) - .remove(); - groups - .attr('class', function(d,i) { return 'nv-group nv-series-' + i }) - .classed('hover', function(d) { return d.hover }); - groups - .transition() - .style('stroke-opacity', 1) - .style('fill-opacity', .75); - - - var bars = groups.selectAll('g.nv-bar') - .data(function(d) { return d.values }); - - bars.exit().remove(); - - - var barsEnter = bars.enter().append('g') - .attr('transform', function(d,i,j) { - return 'translate(' + (x(getX(d,i)) + x.rangeBand() * .05 ) + ', ' + y(0) + ')' - }) - .on('mouseover', function(d,i) { //TODO: figure out why j works above, but not here - d3.select(this).classed('hover', true); - dispatch.elementMouseover({ - value: getY(d,i), - point: d, - series: data[d.series], - pos: [x(getX(d,i)) + (x.rangeBand() * (d.series + .5) / data.length), y(getY(d,i))], // TODO: Figure out why the value appears to be shifted - pointIndex: i, - seriesIndex: d.series, - e: d3.event - }); - }) - .on('mouseout', function(d,i) { - d3.select(this).classed('hover', false); - dispatch.elementMouseout({ - value: getY(d,i), - point: d, - series: data[d.series], - pointIndex: i, - seriesIndex: d.series, - e: d3.event - }); - }) - .on('click', function(d,i) { - dispatch.elementClick({ - value: getY(d,i), - point: d, - series: data[d.series], - pos: [x(getX(d,i)) + (x.rangeBand() * (d.series + .5) / data.length), y(getY(d,i))], // TODO: Figure out why the value appears to be shifted - pointIndex: i, - seriesIndex: d.series, - e: d3.event - }); - d3.event.stopPropagation(); - }) - .on('dblclick', function(d,i) { - dispatch.elementDblClick({ - value: getY(d,i), - point: d, - series: data[d.series], - pos: [x(getX(d,i)) + (x.rangeBand() * (d.series + .5) / data.length), y(getY(d,i))], // TODO: Figure out why the value appears to be shifted - pointIndex: i, - seriesIndex: d.series, - e: d3.event - }); - d3.event.stopPropagation(); - }); - - if (showValues) { - barsEnter.append('text') - .attr('text-anchor', 'middle') - ; - - bars.select('text') - .text(function(d,i) { return valueFormat(getY(d,i)) }) - .transition() - .attr('x', x.rangeBand() * .9 / 2) - .attr('y', function(d,i) { return getY(d,i) < 0 ? y(getY(d,i)) - y(0) + 12 : -4 }) - - ; - } else { - bars.selectAll('text').remove(); - } - - bars - .attr('class', function(d,i) { return getY(d,i) < 0 ? 'nv-bar negative' : 'nv-bar positive' }) - .style('fill', function(d,i) { return d.color || color(d,i) }) - .style('stroke', function(d,i) { return d.color || color(d,i) }) - // Note: Override rect drawing - .append('path') - .attr('d', function(d, i) { - var dy = Math.max(Math.abs(y(getY(d,i)) - y((yDomain && yDomain[0]) || 0)) || 1); - return 'M 60 0 L -30 ' + dy + ' L 150 ' + dy + ' Z'; - }); - - bars.transition() - //.delay(function(d,i) { return i * 1200 / data[0].values.length }) - .attr('transform', function(d,i) { - var left = x(getX(d,i)) + x.rangeBand() * .05, - top = getY(d,i) < 0 ? - y(0) : - y(0) - y(getY(d,i)) < 1 ? - y(0) - 1 : //make 1 px positive bars show up above y=0 - y(getY(d,i)); - - return 'translate(' + left + ', ' + top + ')' - }) - .select('rect') - .attr('height', function(d,i) { - return Math.max(Math.abs(y(getY(d,i)) - y((yDomain && yDomain[0]) || 0)) || 1) - }); - - - //store old scales for use in transitions on update - x0 = x.copy(); - y0 = y.copy(); - - }); - - return chart; - } - - - //============================================================ - // Expose Public Variables - //------------------------------------------------------------ - - chart.dispatch = dispatch; - - chart.options = nv.utils.optionsFunc.bind(chart); - - chart.x = function(_) { - if (!arguments.length) return getX; - getX = _; - return chart; - }; - - chart.y = function(_) { - if (!arguments.length) return getY; - getY = _; - return chart; - }; - - chart.margin = function(_) { - if (!arguments.length) return margin; - margin.top = typeof _.top != 'undefined' ? _.top : margin.top; - margin.right = typeof _.right != 'undefined' ? _.right : margin.right; - margin.bottom = typeof _.bottom != 'undefined' ? _.bottom : margin.bottom; - margin.left = typeof _.left != 'undefined' ? _.left : margin.left; - return chart; - }; - - chart.width = function(_) { - if (!arguments.length) return width; - width = _; - return chart; - }; - - chart.height = function(_) { - if (!arguments.length) return height; - height = _; - return chart; - }; - - chart.xScale = function(_) { - if (!arguments.length) return x; - x = _; - return chart; - }; - - chart.yScale = function(_) { - if (!arguments.length) return y; - y = _; - return chart; - }; - - chart.xDomain = function(_) { - if (!arguments.length) return xDomain; - xDomain = _; - return chart; - }; - - chart.yDomain = function(_) { - if (!arguments.length) return yDomain; - yDomain = _; - return chart; - }; - - chart.xRange = function(_) { - if (!arguments.length) return xRange; - xRange = _; - return chart; - }; - - chart.yRange = function(_) { - if (!arguments.length) return yRange; - yRange = _; - return chart; - }; - - chart.forceY = function(_) { - if (!arguments.length) return forceY; - forceY = _; - return chart; - }; - - chart.color = function(_) { - if (!arguments.length) return color; - color = nv.utils.getColor(_); - return chart; - }; - - chart.id = function(_) { - if (!arguments.length) return id; - id = _; - return chart; - }; - - chart.showValues = function(_) { - if (!arguments.length) return showValues; - showValues = _; - return chart; - }; - - chart.valueFormat= function(_) { - if (!arguments.length) return valueFormat; - valueFormat = _; - return chart; - }; - - chart.rectClass= function(_) { - if (!arguments.length) return rectClass; - rectClass = _; - return chart; - }; - //============================================================ - - return chart; - } -})(); diff --git a/test/support/fixtures/analytics.js b/test/support/fixtures/analytics.js index c528822fe..5096b8403 100644 --- a/test/support/fixtures/analytics.js +++ b/test/support/fixtures/analytics.js @@ -2,297 +2,903 @@ Balanced.Adapter.addFixtures([{ "uri": "/analytics?type=volume", "analytics": [{ - "escrow_at_start": 0, - "start_at": "2014-08-12T22:31:58.608327+00:00Z", - "links": { - - }, + "escrow_at_start": 3802647, + "start_at": "2014-09-05T16:04:30.281013Z", + "links": {}, "transactions": [{ "status": "succeeded", - "count": 1, + "count": 57, + "card_type": null, + "amount": 493366, + "card_brand": "visa", + "type": "debit" + }, { + "status": "succeeded", + "count": 35, + "card_type": null, + "amount": 633616, + "card_brand": "mastercard", + "type": "debit" + }, { + "status": "succeeded", + "count": 32, + "card_type": "credit", + "amount": 298887, + "card_brand": "mastercard", + "type": "debit" + }, { + "status": "succeeded", + "count": 85, "card_type": "debit", - "amount": 109, + "amount": 639415, "card_brand": "visa", "type": "debit" }, { "status": "succeeded", - "count": 1, - "amount": 109, - "type": "credit" - }], - "escrow_at_end": 0, - "end_at": "2014-08-13T22:31:58.608327+00:00Z" - }, { - "escrow_at_start": 0, - "start_at": "2014-08-13T22:31:58.608327+00:00Z", - "links": { - - }, - "transactions": [{ + "count": 19, + "card_type": "credit", + "amount": 63446, + "card_brand": "discover", + "type": "debit" + }, { "status": "succeeded", - "count": 1, + "count": 37, + "card_type": null, + "amount": 403550, + "card_brand": "amex", + "type": "debit" + }, { + "status": "succeeded", + "count": 20, "card_type": "debit", - "amount": 108, + "amount": 266440, + "card_brand": "mastercard", + "type": "debit" + }, { + "status": "succeeded", + "count": 16, + "card_type": "credit", + "amount": 135727, + "card_brand": "amex", + "type": "debit" + }, { + "status": "succeeded", + "count": 64, + "card_type": "credit", + "amount": 1501938, "card_brand": "visa", "type": "debit" }, { + "count": 3, "status": "succeeded", + "card_type": null, + "amount": 53935, + "card_brand": "amex", + "type": "refund" + }, { "count": 1, - "amount": 108, - "type": "credit" - }], - "escrow_at_end": 0, - "end_at": "2014-08-14T22:31:58.608327+00:00Z" - }, { - "escrow_at_start": 0, - "start_at": "2014-08-14T22:31:58.608327+00:00Z", - "links": { - - }, - "transactions": [{ "status": "succeeded", + "card_type": "credit", + "amount": 25000, + "card_brand": "amex", + "type": "refund" + }, { "count": 1, - "card_type": "debit", - "amount": 107, + "status": "succeeded", + "card_type": "credit", + "amount": 6595, + "card_brand": "discover", + "type": "refund" + }, { + "count": 2, + "status": "succeeded", + "card_type": "credit", + "amount": 11595, "card_brand": "visa", - "type": "debit" + "type": "refund" }, { + "count": 1, "status": "succeeded", + "card_type": "debit", + "amount": 19695, + "card_brand": "mastercard", + "type": "refund" + }, { "count": 1, - "amount": 107, - "type": "credit" + "status": "succeeded", + "card_type": null, + "amount": 5600, + "card_brand": "mastercard", + "type": "refund" + }, { + "count": 4, + "status": "succeeded", + "card_type": null, + "amount": 42580, + "card_brand": "visa", + "type": "refund" + }, { + "count": 3, + "status": "succeeded", + "card_type": "debit", + "amount": 6938, + "card_brand": "visa", + "type": "refund" + }, { + "count": 2, + "status": "succeeded", + "card_type": "credit", + "amount": 14995, + "card_brand": "mastercard", + "type": "refund" }], - "escrow_at_end": 0, - "end_at": "2014-08-15T22:31:58.608327+00:00Z" + "escrow_at_end": 7591757, + "end_at": "2014-09-06T16:04:30.281013Z" }, { - "escrow_at_start": 0, - "start_at": "2014-08-15T22:31:58.608327+00:00Z", - "links": { - - }, + "escrow_at_start": 7591757, + "start_at": "2014-09-06T16:04:30.281013Z", + "links": {}, "transactions": [{ "status": "succeeded", - "count": 1, + "count": 69, + "card_type": null, + "amount": 531116, + "card_brand": "visa", + "type": "debit" + }, { + "status": "succeeded", + "count": 28, + "card_type": null, + "amount": 200199, + "card_brand": "mastercard", + "type": "debit" + }, { + "status": "succeeded", + "count": 27, + "card_type": "credit", + "amount": 244147, + "card_brand": "mastercard", + "type": "debit" + }, { + "status": "succeeded", + "count": 66, "card_type": "debit", - "amount": 106, + "amount": 495486, "card_brand": "visa", "type": "debit" }, { "status": "succeeded", - "count": 1, - "amount": 106, - "type": "credit" - }], - "escrow_at_end": 0, - "end_at": "2014-08-16T22:31:58.608327+00:00Z" - }, { - "escrow_at_start": 0, - "start_at": "2014-08-16T22:31:58.608327+00:00Z", - "links": { - - }, - "transactions": [{ + "count": 9, + "card_type": "credit", + "amount": 146102, + "card_brand": "discover", + "type": "debit" + }, { "status": "succeeded", - "count": 1, + "count": 22, + "card_type": null, + "amount": 95896, + "card_brand": "amex", + "type": "debit" + }, { + "status": "succeeded", + "count": 14, "card_type": "debit", - "amount": 105, + "amount": 96296, + "card_brand": "mastercard", + "type": "debit" + }, { + "status": "succeeded", + "count": 5, + "card_type": "credit", + "amount": 42435, + "card_brand": "amex", + "type": "debit" + }, { + "status": "succeeded", + "count": 54, + "card_type": "credit", + "amount": 502823, "card_brand": "visa", "type": "debit" }, { + "count": 2, "status": "succeeded", - "count": 1, - "amount": 105, - "type": "credit" + "card_type": "credit", + "amount": 1610, + "card_brand": "amex", + "type": "refund" + }, { + "count": 2, + "status": "succeeded", + "card_type": null, + "amount": 6515, + "card_brand": "visa", + "type": "refund" + }, { + "count": 2, + "status": "succeeded", + "card_type": "credit", + "amount": 7207, + "card_brand": "mastercard", + "type": "refund" + }, { + "count": 3, + "status": "succeeded", + "card_type": "debit", + "amount": 11985, + "card_brand": "visa", + "type": "refund" + }, { + "count": 2, + "status": "succeeded", + "card_type": "debit", + "amount": 11200, + "card_brand": "mastercard", + "type": "refund" }], - "escrow_at_end": 0, - "end_at": "2014-08-17T22:31:58.608327+00:00Z" + "escrow_at_end": 9771019, + "end_at": "2014-09-07T16:04:30.281013Z" }, { - "escrow_at_start": 0, - "start_at": "2014-08-17T22:31:58.608327+00:00Z", - "links": { - - }, + "escrow_at_start": 9771019, + "start_at": "2014-09-07T16:04:30.281013Z", + "links": {}, "transactions": [{ "status": "succeeded", - "count": 1, + "count": 62, + "card_type": null, + "amount": 573382, + "card_brand": "visa", + "type": "debit" + }, { + "status": "succeeded", + "count": 31, + "card_type": null, + "amount": 698775, + "card_brand": "mastercard", + "type": "debit" + }, { + "status": "succeeded", + "count": 36, + "card_type": "credit", + "amount": 387062, + "card_brand": "mastercard", + "type": "debit" + }, { + "status": "succeeded", + "count": 46, "card_type": "debit", - "amount": 104, + "amount": 243088, "card_brand": "visa", "type": "debit" }, { - "status": "failed", - "count": 1, - "failure_reason": null, + "status": "succeeded", + "count": 15, + "card_type": "credit", + "amount": 96822, + "card_brand": "discover", + "type": "debit" + }, { + "status": "succeeded", + "count": 22, "card_type": "debit", - "amount": 104, + "amount": 92147, + "card_brand": "mastercard", + "type": "debit" + }, { + "status": "succeeded", + "count": 27, + "card_type": null, + "amount": 495753, + "card_brand": "amex", + "type": "debit" + }, { + "status": "succeeded", + "count": 25, + "card_type": "credit", + "amount": 244134, + "card_brand": "amex", + "type": "debit" + }, { + "status": "succeeded", + "count": 73, + "card_type": "credit", + "amount": 867537, "card_brand": "visa", "type": "debit" }, { "status": "succeeded", - "count": 1, - "amount": 104, + "count": 12, + "amount": 8959189, "type": "credit" }, { - "status": "failed", "count": 1, - "amount": 104, - "type": "credit", - "failure_reason": null + "status": "succeeded", + "card_type": null, + "amount": 1650, + "card_brand": "amex", + "type": "refund" + }, { + "count": 1, + "status": "succeeded", + "card_type": "credit", + "amount": 11795, + "card_brand": "amex", + "type": "refund" + }, { + "count": 11, + "status": "succeeded", + "card_type": "credit", + "amount": 72391, + "card_brand": "visa", + "type": "refund" + }, { + "count": 2, + "status": "succeeded", + "card_type": "debit", + "amount": 2600, + "card_brand": "mastercard", + "type": "refund" + }, { + "count": 6, + "status": "succeeded", + "card_type": null, + "amount": 29866, + "card_brand": "mastercard", + "type": "refund" + }, { + "count": 6, + "status": "succeeded", + "card_type": "debit", + "amount": 10887, + "card_brand": "visa", + "type": "refund" + }, { + "count": 4, + "status": "succeeded", + "card_type": null, + "amount": 16240, + "card_brand": "visa", + "type": "refund" + }, { + "count": 4, + "status": "succeeded", + "card_type": "credit", + "amount": 29433, + "card_brand": "mastercard", + "type": "refund" }], - "escrow_at_end": 0, - "end_at": "2014-08-18T22:31:58.608327+00:00Z" + "escrow_at_end": 3642661, + "end_at": "2014-09-08T16:04:30.281013Z" }, { - "escrow_at_start": 0, - "start_at": "2014-08-18T22:31:58.608327+00:00Z", - "links": { - - }, + "escrow_at_start": 3642661, + "start_at": "2014-09-08T16:04:30.281013Z", + "links": {}, "transactions": [{ "status": "succeeded", - "count": 1, - "card_type": "debit", - "amount": 103, + "count": 73, + "card_type": null, + "amount": 520523, "card_brand": "visa", "type": "debit" }, { - "status": "failed", - "count": 1, - "failure_reason": null, + "status": "succeeded", + "count": 31, + "card_type": "credit", + "amount": 269201, + "card_brand": "mastercard", + "type": "debit" + }, { + "status": "succeeded", + "count": 64, "card_type": "debit", - "amount": 103, + "amount": 323310, "card_brand": "visa", "type": "debit" + }, { + "status": "succeeded", + "count": 31, + "card_type": null, + "amount": 226931, + "card_brand": "amex", + "type": "debit" + }, { + "status": "succeeded", + "count": 21, + "card_type": "debit", + "amount": 157955, + "card_brand": "mastercard", + "type": "debit" + }, { + "status": "succeeded", + "count": 16, + "card_type": "credit", + "amount": 69362, + "card_brand": "discover", + "type": "debit" + }, { + "status": "succeeded", + "count": 11, + "card_type": "credit", + "amount": 99196, + "card_brand": "amex", + "type": "debit" }, { "status": "succeeded", "count": 1, - "amount": 103, + "card_type": null, + "amount": 51195, + "card_brand": "discover", + "type": "debit" + }, { + "status": "succeeded", + "count": 91, + "card_type": "credit", + "amount": 659896, + "card_brand": "visa", + "type": "debit" + }, { + "status": "succeeded", + "count": 40, + "card_type": null, + "amount": 219792, + "card_brand": "mastercard", + "type": "debit" + }, { + "status": "succeeded", + "count": 8, + "amount": 2501304, "type": "credit" }, { - "status": "failed", - "count": 1, - "amount": 103, - "type": "credit", - "failure_reason": null + "count": 3, + "status": "succeeded", + "card_type": null, + "amount": 33195, + "card_brand": "amex", + "type": "refund" + }, { + "count": 2, + "status": "succeeded", + "card_type": "credit", + "amount": 14370, + "card_brand": "amex", + "type": "refund" + }, { + "count": 4, + "status": "succeeded", + "card_type": null, + "amount": 22017, + "card_brand": "mastercard", + "type": "refund" + }, { + "count": 3, + "status": "succeeded", + "card_type": "credit", + "amount": 38190, + "card_brand": "visa", + "type": "refund" + }, { + "count": 4, + "status": "succeeded", + "card_type": "debit", + "amount": 52665, + "card_brand": "mastercard", + "type": "refund" + }, { + "count": 4, + "status": "succeeded", + "card_type": "credit", + "amount": 37125, + "card_brand": "mastercard", + "type": "refund" + }, { + "count": 8, + "status": "succeeded", + "card_type": "debit", + "amount": 46826, + "card_brand": "visa", + "type": "refund" + }, { + "count": 3, + "status": "succeeded", + "card_type": null, + "amount": 42395, + "card_brand": "visa", + "type": "refund" }], - "escrow_at_end": 0, - "end_at": "2014-08-19T22:31:58.608327+00:00Z" + "escrow_at_end": 3173373, + "end_at": "2014-09-09T16:04:30.281013Z" }, { - "escrow_at_start": 0, - "start_at": "2014-08-19T22:31:58.608327+00:00Z", - "links": { - - }, + "escrow_at_start": 3173373, + "start_at": "2014-09-09T16:04:30.281013Z", + "links": {}, "transactions": [{ "status": "succeeded", - "count": 1, + "count": 61, + "card_type": null, + "amount": 562451, + "card_brand": "visa", + "type": "debit" + }, { + "status": "succeeded", + "count": 25, + "card_type": null, + "amount": 911769, + "card_brand": "mastercard", + "type": "debit" + }, { + "status": "succeeded", + "count": 39, + "card_type": "credit", + "amount": 486280, + "card_brand": "mastercard", + "type": "debit" + }, { + "status": "succeeded", + "count": 56, "card_type": "debit", - "amount": 102, + "amount": 445279, "card_brand": "visa", "type": "debit" }, { - "status": "failed", - "count": 1, - "failure_reason": null, + "status": "succeeded", + "count": 14, "card_type": "debit", - "amount": 102, + "amount": 70090, + "card_brand": "mastercard", + "type": "debit" + }, { + "status": "succeeded", + "count": 21, + "card_type": null, + "amount": 137243, + "card_brand": "amex", + "type": "debit" + }, { + "status": "succeeded", + "count": 15, + "card_type": "credit", + "amount": 67708, + "card_brand": "discover", + "type": "debit" + }, { + "status": "succeeded", + "count": 10, + "card_type": "credit", + "amount": 115497, + "card_brand": "amex", + "type": "debit" + }, { + "status": "succeeded", + "count": 53, + "card_type": "credit", + "amount": 337598, "card_brand": "visa", "type": "debit" }, { "status": "succeeded", - "count": 1, - "amount": 102, + "count": 10, + "amount": 2366190, "type": "credit" }, { - "status": "failed", "count": 1, - "amount": 102, - "type": "credit", - "failure_reason": null + "status": "succeeded", + "card_type": "credit", + "amount": 4005, + "card_brand": "discover", + "type": "refund" + }, { + "count": 1, + "status": "succeeded", + "card_type": null, + "amount": 2394, + "card_brand": "mastercard", + "type": "refund" + }, { + "count": 10, + "status": "succeeded", + "card_type": "credit", + "amount": 114960, + "card_brand": "visa", + "type": "refund" + }, { + "count": 4, + "status": "succeeded", + "card_type": "credit", + "amount": 6465, + "card_brand": "mastercard", + "type": "refund" + }, { + "count": 3, + "status": "succeeded", + "card_type": "debit", + "amount": 22890, + "card_brand": "visa", + "type": "refund" + }, { + "count": 3, + "status": "succeeded", + "card_type": null, + "amount": 28575, + "card_brand": "visa", + "type": "refund" }], - "escrow_at_end": 0, - "end_at": "2014-08-20T22:31:58.608327+00:00Z" + "escrow_at_end": 3510642, + "end_at": "2014-09-10T16:04:30.281013Z" }, { - "escrow_at_start": 0, - "start_at": "2014-08-20T22:31:58.608327+00:00Z", - "links": { - - }, + "escrow_at_start": 3510642, + "start_at": "2014-09-10T16:04:30.281013Z", + "links": {}, "transactions": [{ "status": "succeeded", - "count": 1, + "count": 53, + "card_type": null, + "amount": 614741, + "card_brand": "visa", + "type": "debit" + }, { + "status": "succeeded", + "count": 23, + "card_type": null, + "amount": 395992, + "card_brand": "mastercard", + "type": "debit" + }, { + "status": "succeeded", + "count": 32, + "card_type": "credit", + "amount": 451841, + "card_brand": "mastercard", + "type": "debit" + }, { + "status": "succeeded", + "count": 61, "card_type": "debit", - "amount": 101, + "amount": 333053, "card_brand": "visa", "type": "debit" }, { - "status": "failed", - "count": 1, - "failure_reason": null, + "status": "succeeded", + "count": 29, "card_type": "debit", - "amount": 101, + "amount": 166382, + "card_brand": "mastercard", + "type": "debit" + }, { + "status": "succeeded", + "count": 17, + "card_type": "credit", + "amount": 116600, + "card_brand": "discover", + "type": "debit" + }, { + "status": "succeeded", + "count": 24, + "card_type": null, + "amount": 246608, + "card_brand": "amex", + "type": "debit" + }, { + "status": "succeeded", + "count": 24, + "card_type": "credit", + "amount": 419476, + "card_brand": "amex", + "type": "debit" + }, { + "status": "succeeded", + "count": 49, + "card_type": "credit", + "amount": 297795, "card_brand": "visa", "type": "debit" }, { "status": "succeeded", - "count": 1, - "amount": 101, + "count": 11, + "amount": 2290112, "type": "credit" }, { - "status": "failed", + "count": 3, + "status": "succeeded", + "card_type": null, + "amount": 11993, + "card_brand": "amex", + "type": "refund" + }, { + "count": 5, + "status": "succeeded", + "card_type": "credit", + "amount": 46444, + "card_brand": "amex", + "type": "refund" + }, { "count": 1, - "amount": 101, - "type": "credit", - "failure_reason": null + "status": "succeeded", + "card_type": "credit", + "amount": 5695, + "card_brand": "discover", + "type": "refund" + }, { + "count": 2, + "status": "succeeded", + "card_type": "debit", + "amount": 6015, + "card_brand": "mastercard", + "type": "refund" + }, { + "count": 3, + "status": "succeeded", + "card_type": "credit", + "amount": 159790, + "card_brand": "visa", + "type": "refund" + }, { + "count": 4, + "status": "succeeded", + "card_type": null, + "amount": 39477, + "card_brand": "mastercard", + "type": "refund" + }, { + "count": 4, + "status": "succeeded", + "card_type": null, + "amount": 15575, + "card_brand": "visa", + "type": "refund" + }, { + "count": 5, + "status": "succeeded", + "card_type": "debit", + "amount": 26476, + "card_brand": "visa", + "type": "refund" + }, { + "count": 4, + "status": "succeeded", + "card_type": "credit", + "amount": 11645, + "card_brand": "mastercard", + "type": "refund" }], - "escrow_at_end": 0, - "end_at": "2014-08-21T22:31:58.608327+00:00Z" + "escrow_at_end": 3332261, + "end_at": "2014-09-11T16:04:30.281013Z" }, { - "escrow_at_start": 0, - "start_at": "2014-08-21T22:31:58.608327+00:00Z", - "links": { - - }, + "escrow_at_start": 3332261, + "start_at": "2014-09-11T16:04:30.281013Z", + "links": {}, "transactions": [{ "status": "succeeded", - "count": 1, + "count": 51, + "card_type": null, + "amount": 450954, + "card_brand": "visa", + "type": "debit" + }, { + "status": "succeeded", + "count": 22, + "card_type": null, + "amount": 145887, + "card_brand": "mastercard", + "type": "debit" + }, { + "status": "succeeded", + "count": 32, + "card_type": "credit", + "amount": 311060, + "card_brand": "mastercard", + "type": "debit" + }, { + "status": "succeeded", + "count": 63, "card_type": "debit", - "amount": 100, + "amount": 356585, "card_brand": "visa", "type": "debit" }, { - "status": "failed", - "count": 1, - "failure_reason": null, + "status": "succeeded", + "count": 31, + "card_type": null, + "amount": 171799, + "card_brand": "amex", + "type": "debit" + }, { + "status": "succeeded", + "count": 9, + "card_type": "credit", + "amount": 29000, + "card_brand": "discover", + "type": "debit" + }, { + "status": "succeeded", + "count": 18, "card_type": "debit", - "amount": 100, + "amount": 233259, + "card_brand": "mastercard", + "type": "debit" + }, { + "status": "succeeded", + "count": 16, + "card_type": "credit", + "amount": 124711, + "card_brand": "amex", + "type": "debit" + }, { + "status": "succeeded", + "count": 68, + "card_type": "credit", + "amount": 674797, "card_brand": "visa", "type": "debit" }, { + "count": 2, "status": "succeeded", + "card_type": null, + "amount": 6630, + "card_brand": "amex", + "type": "refund" + }, { + "count": 3, + "status": "succeeded", + "card_type": "credit", + "amount": 23505, + "card_brand": "amex", + "type": "refund" + }, { + "count": 2, + "status": "succeeded", + "card_type": "credit", + "amount": 7775, + "card_brand": "discover", + "type": "refund" + }, { + "count": 4, + "status": "succeeded", + "card_type": "credit", + "amount": 21550, + "card_brand": "visa", + "type": "refund" + }, { "count": 1, - "amount": 100, - "type": "credit" + "status": "succeeded", + "card_type": null, + "amount": 5195, + "card_brand": "mastercard", + "type": "refund" }, { - "status": "failed", "count": 1, - "amount": 100, - "type": "credit", - "failure_reason": null + "status": "succeeded", + "card_type": "debit", + "amount": 1320, + "card_brand": "mastercard", + "type": "refund" + }, { + "count": 4, + "status": "succeeded", + "card_type": "debit", + "amount": 3457, + "card_brand": "visa", + "type": "refund" + }, { + "count": 1, + "status": "succeeded", + "card_type": null, + "amount": 1600, + "card_brand": "visa", + "type": "refund" }], - "escrow_at_end": 99799, - "end_at": "2014-08-22T22:31:58.608327+00:00Z" + "escrow_at_end": 3403184, + "end_at": "2014-09-12T16:04:30.281013Z" }], "meta": { - "last": "/analytics/transactions?limit=10&interval=1d&start_at=2014-08-12+22%3A31%3A58.608327&offset=10", - "first": "/analytics/transactions?limit=10&interval=1d&start_at=2014-08-12+22%3A31%3A58.608327&offset=0", - "next": "/analytics/transactions?limit=10&interval=1d&start_at=2014-08-12+22%3A31%3A58.608327&offset=10", - "href": "/analytics/transactions?limit=10&interval=1d&start_at=2014-08-12+22%3A31%3A58.608327&offset=0", + "last": "?limit=10&offset=0", + "next": null, + "href": "?limit=10&offset=0", "limit": 10, "offset": 0, - "total": 11, - "previous": null + "previous": null, + "total": 7, + "first": "?limit=10&offset=0" }, - "links": { - - } + "links": {} }]); From 7bdd0b550bfc02d50ed5e107f432cc8be2d74950 Mon Sep 17 00:00:00 2001 From: Kyungmin Kim Date: Fri, 12 Sep 2014 12:23:34 -0700 Subject: [PATCH 32/34] Remove files deleted in master --- app/controllers/marketplace.js | 58 ----------------------------- app/routes/_base.js | 1 + app/routes/marketplaces/activity.js | 43 --------------------- app/routes/start.js | 48 ------------------------ 4 files changed, 1 insertion(+), 149 deletions(-) delete mode 100644 app/controllers/marketplace.js delete mode 100644 app/routes/marketplaces/activity.js delete mode 100644 app/routes/start.js diff --git a/app/controllers/marketplace.js b/app/controllers/marketplace.js deleted file mode 100644 index 9d7e6d602..000000000 --- a/app/controllers/marketplace.js +++ /dev/null @@ -1,58 +0,0 @@ -var Computed = { - isSelected: function() { - var routes = _.toArray(arguments); - - return function() { - return routes.indexOf(this.get('controllers.application.currentRouteName')) >= 0; - }.property('controllers.application.currentRouteName'); - } -}; - -Balanced.MarketplaceController = Balanced.ObjectController.extend( - Balanced.ActionEvented('openPaySellerModal', 'openChargeCardModal'), { - - needs: ['application'], - - overviewSelected: Computed.isSelected('marketplace.overview'), - transactionSelected: Computed.isSelected('activity.transactions', 'credits', 'debits', 'holds', 'refunds', 'reversals'), - orderSelected: Computed.isSelected('activity.orders', 'orders'), - customerSelected: Computed.isSelected('marketplace.customers', 'customer'), - fundingInstrumentSelected: Computed.isSelected('marketplace.funding_instruments', 'bank_accounts', 'cards'), - disputeSelected: Computed.isSelected('marketplace.disputes', 'dispute'), - logSelected: Computed.isSelected('marketplace.logs', 'log'), - invoiceSelected: Computed.isSelected('marketplace.invoices', 'invoice'), - settingSelected: Computed.isSelected('marketplace.settings'), - - // Note: need this since bind-attr only works for a single property - paymentSelected: Ember.computed.or('transactionSelected', 'orderSelected'), - myMarketplaceSelected: Ember.computed.or('settingSelected', 'invoiceSelected'), - - formattedEscrowAmount: function() { - var escrow = this.get('in_escrow'); - if (isNaN(escrow)) { - return '$--'; - } - - return Balanced.Utils.formatCurrency(escrow); - }.property('in_escrow') - }); - -Balanced.MarketplaceCreditsController = Balanced.ObjectController.extend({ - needs: ['marketplace'] -}); - -Balanced.MarketplaceDebitsController = Balanced.ObjectController.extend({ - needs: ['marketplace'] -}); - -Balanced.MarketplaceHoldsController = Balanced.ObjectController.extend({ - needs: ['marketplace'] -}); - -Balanced.MarketplaceRefundsController = Balanced.ObjectController.extend({ - needs: ['marketplace'] -}); - -Balanced.MarketplaceSettingsController = Balanced.ObjectController.extend({ - needs: ['marketplace'] -}); diff --git a/app/routes/_base.js b/app/routes/_base.js index ebd692e2e..550cd9e2b 100644 --- a/app/routes/_base.js +++ b/app/routes/_base.js @@ -51,6 +51,7 @@ Balanced.ControllerRoute = Balanced.AuthRoute.extend({ Balanced.RedirectRoute = function redirectRoute(routeName, modelFor, baseRoute) { baseRoute = baseRoute || Balanced.AuthRoute; modelFor = modelFor || 'marketplace'; + return baseRoute.extend({ redirect: function() { this.transitionTo(routeName, this.modelFor(modelFor)); diff --git a/app/routes/marketplaces/activity.js b/app/routes/marketplaces/activity.js deleted file mode 100644 index e9f8ef752..000000000 --- a/app/routes/marketplaces/activity.js +++ /dev/null @@ -1,43 +0,0 @@ -Balanced.ActivityRoute = Balanced.AuthRoute.extend({ - defaultSort: 'created_at', - controllerName: 'activity', - - setupController: function(controller, model) { - this._super(controller, model); - - var activityController = this.controllerFor(this.get('controllerName')); - var defaultSort = this.get('defaultSort'); - if (defaultSort && defaultSort !== activityController.get('sortField')) { - activityController.set('sortField', defaultSort); - } - - var defaultType = this.get('defaultType'); - if (!defaultType) { - return; - } - - if (activityController.get('category') !== defaultType) { - activityController.set('type', defaultType); - } - } -}); - -Balanced.ActivityOrdersRoute = Balanced.ActivityRoute.extend({ - pageTitle: 'Orders', - defaultType: 'order', - controllerName: 'activity_orders' -}); - -Balanced.ActivityTransactionsRoute = Balanced.ActivityRoute.extend({ - pageTitle: 'Transactions', - defaultType: 'transaction', - controllerName: 'activity_transactions' -}); - -Balanced.MarketplaceRedirectActivityTransactionsRoute = Balanced.RedirectRoute("activity.transactions"); -Balanced.MarketplaceRedirectActivityOrdersRoute = Balanced.RedirectRoute("activity.orders"); -Balanced.MarketplaceRedirectActivityCustomersRoute = Balanced.RedirectRoute('marketplace.customers'); -Balanced.MarketplaceRedirectActivityFundingInstrumentsRoute = Balanced.RedirectRoute('marketplace.funding_instruments'); -Balanced.MarketplaceRedirectActivityDisputesRoute = Balanced.RedirectRoute('marketplace.disputes'); - -Balanced.ActivityIndexRoute = Balanced.RedirectRoute('marketplace.overview'); diff --git a/app/routes/start.js b/app/routes/start.js deleted file mode 100644 index 2b5c514b3..000000000 --- a/app/routes/start.js +++ /dev/null @@ -1,48 +0,0 @@ -Balanced.StartRoute = Balanced.Route.extend({ - pageTitle: 'Getting started', - - model: function() { - if (this.get('auth.signedIn')) { - return Balanced.currentMarketplace; - } else { - var auth = this.get('auth'); - - return auth.createNewGuestUser().then(function(apiKey) { - var apiKeySecret = apiKey.get('secret'); - var settings = { - headers: { - Authorization: Balanced.Utils.encodeAuthorization(apiKeySecret) - } - }; - return Balanced.Marketplace.create().save(settings).then(function(marketplace) { - marketplace.populateWithTestTransactions(); - - auth.setupGuestUserMarketplace(marketplace); - - return marketplace; - }); - }); - } - }, - redirect: function() { - if (this.get('user') && !this.get('auth.isGuest')) { - this.transitionTo('index'); - } - }, - actions: { - goToDashboard: function() { - this.transitionTo('marketplace.overview', this.currentModel); - }, - goToDocumentation: function() { - window.location = 'https://docs.balancedpayments.com'; - }, - goToApply: function() { - this.transitionTo('marketplaces.apply'); - }, - goToLogin: function() { - // Since we already logged them in as guest, log them out so they can sign in as themselves - this.get('auth').forgetLogin(); - this.transitionTo('login'); - } - } -}); From 6f5423beb6a09e4b5fd5d2f6b92e218809ea9490 Mon Sep 17 00:00:00 2001 From: Kyungmin Kim Date: Mon, 15 Sep 2014 15:09:27 -0700 Subject: [PATCH 33/34] Display transaction volumn and count using crossfilter --- app/controllers/overview.js | 109 +++++++++++++++-------- app/views/charts/chart.js | 15 ++-- app/views/charts/horizontal-bar-chart.js | 25 +++--- app/views/charts/line-chart.js | 3 +- app/views/charts/vertical-bar-chart.js | 26 +++--- test/support/fixtures/analytics.js | 4 +- 6 files changed, 112 insertions(+), 70 deletions(-) diff --git a/app/controllers/overview.js b/app/controllers/overview.js index 6a7617eb4..838247d6c 100644 --- a/app/controllers/overview.js +++ b/app/controllers/overview.js @@ -34,20 +34,6 @@ Balanced.MarketplaceOverviewController = Balanced.ObjectController.extend( formatTransactions: function(data) { var cf = crossfilter(data); - var byDate = cf.dimension(function(p) { - return p.start_at; - }); - - var byType = cf.dimension(function(p) { - return p.type; - }); - - var groupByType = byDate.group(); - - var dates = groupByType.all().map(function(transaction) { - return Date.parseISO8601(transaction.key); - }); - dates = ['x'].concat(dates); var debitCount = ['debits']; var creditCount = ['credits']; @@ -59,40 +45,91 @@ Balanced.MarketplaceOverviewController = Balanced.ObjectController.extend( var refundAmount = ['refunds']; var reversalAmount = ['reversals']; - byType.filterExact('debit'); - byType.top(Infinity).forEach(function(p, i) { - debitCount.push(p.count); - debitAmount.push(p.amount); + function reduceAdd(type) { + return function(p, v) { + if (v["type"] === type) { + p.count += v.count; + p.amount += v.amount; + } + return p; + }; + } + + function reduceRemove(type) { + return function(p, v) { + if (v["type"] === type) { + p.count -= v.count; + p.amount -= v.amount; + } + return p; + }; + } + + function reduceInitial() { + return { + count: 0, + amount: 0 + }; + } + + // group transactions by date + var transactionsByDate = cf.dimension(function(p) { + return p.start_at; }); - byType.filterExact('credit'); - byType.top(Infinity).forEach(function(p, i) { - creditCount.push(p.count); - creditAmount.push(p.amount); + var dates = transactionsByDate.group().all().map(function(transaction) { + return Date.parseISO8601(transaction.key); }); + dates = ['x'].concat(dates); - byType.filterExact('refund'); - byType.top(Infinity).forEach(function(p, i) { - refundCount.push(p.count); - refundAmount.push(p.amount); - }); + var debits = transactionsByDate.group().reduce(reduceAdd('debit'), reduceRemove('debit'), reduceInitial).all(); - byType.filterExact('reversal'); - byType.top(Infinity).forEach(function(p, i) { - reversalCount.push(p.count); - reversalAmount.push(p.amount); - }); + debitAmount = debitAmount.concat(_.map(debits, function(debit) { + return debit.value.amount + })); + + debitCount = debitCount.concat(_.map(debits, function(debit) { + return debit.value.count + })); + + var credits = transactionsByDate.group().reduce(reduceAdd('credit'), reduceRemove('credit'), reduceInitial).all(); + + creditAmount = creditAmount.concat(_.map(credits, function(credit) { + return credit.value.amount + })); + + creditCount = creditCount.concat(_.map(credits, function(credit) { + return credit.value.count + })); + + var refunds = transactionsByDate.group().reduce(reduceAdd('refund'), reduceRemove('refund'), reduceInitial).all(); + + refundAmount = refundAmount.concat(_.map(refunds, function(refund) { + return refund.value.amount + })); + + refundCount = refundCount.concat(_.map(refunds, function(refund) { + return refund.value.count + })); + + var reversals = transactionsByDate.group().reduce(reduceAdd('reversal'), reduceRemove('reversal'), reduceInitial).all(); + + reversalAmount = reversalAmount.concat(_.map(reversals, function(reversal) { + return reversal.value.amount + })); + + reversalCount = reversalCount.concat(_.map(reversals, function(reversal) { + return reversal.value.count + })); this.set("totalVolume", { x: 'x', - columns: [dates, debitAmount, creditAmount, refundAmount, reversalAmount], - type: 'spline' + columns: [dates, debitAmount, creditAmount, refundAmount, reversalAmount] }); this.set("transactionsCount", { x: 'x', - columns: [dates, debitCount, creditCount, refundCount, reversalCount], - type: 'spline' + columns: [dates, debitCount, creditCount, refundCount, reversalCount] }); this.set("verticalBarChartData", { diff --git a/app/views/charts/chart.js b/app/views/charts/chart.js index 01770e37a..1d95c9404 100644 --- a/app/views/charts/chart.js +++ b/app/views/charts/chart.js @@ -12,16 +12,14 @@ Balanced.ChartView = Ember.View.extend({ zoom: {}, size: {}, padding: {}, + type: null, color: { pattern: ['#639ABD', '#BC8F30', '#9364A8', '#00A08E'] }, // @egyptianBlue80, @turmericYellow80, @byzantiumPurple80, @forestGreen80 - + spline: {}, bar: {}, - pie: {}, - donut: {}, - gauge: {}, _chart: undefined, @@ -50,9 +48,6 @@ Balanced.ChartView = Ember.View.extend({ 'axis', 'regions', 'bar', - 'pie', - 'donut', - 'gauge', 'grid', 'legend', 'tooltip', @@ -63,15 +58,15 @@ Balanced.ChartView = Ember.View.extend({ 'color', 'transition' ]); + c.data.type = this.get('type'); c.bindto = this.get('element'); return c; - }.property('element', 'data', 'axis', 'regions', 'bar', 'pie', 'donut', 'gauge', 'grid', 'legend', 'tooltip', 'subchart', 'zoom', 'size', 'padding', 'color', 'transition'), + }.property('element', 'data', 'type', 'axis', 'regions', 'bar', 'grid', 'legend', 'tooltip', 'subchart', 'zoom', 'size', 'padding', 'color', 'transition'), dataDidChange: function() { var chart = this.get('chart'); chart.load(this.get('data')); - }.observes('data').on('didInsertElement') -}); + }.observes('data').on('didInsertElement'), actions: { toggleLegend: function(seriesKey) { diff --git a/app/views/charts/horizontal-bar-chart.js b/app/views/charts/horizontal-bar-chart.js index bc6039e0c..334899a8a 100644 --- a/app/views/charts/horizontal-bar-chart.js +++ b/app/views/charts/horizontal-bar-chart.js @@ -1,14 +1,19 @@ require("./chart"); Balanced.HorizontalBarChartView = Balanced.ChartView.extend({ - _chartModel: "discreteBar", - classNames: ['horizontal-bar-chart'], - - options: function() { - return { - width: 300, - height: 435, - showValues: true - }; - }.property() + axis: { + x: { + type: 'timeseries', + tick: { + format: function(x) { + return d3.time.format('%x')(x); + } + } + } + }, + size: { + width: 600, + height: 320 + }, + type: 'bar' }); diff --git a/app/views/charts/line-chart.js b/app/views/charts/line-chart.js index a0c3ada65..7e6484da0 100644 --- a/app/views/charts/line-chart.js +++ b/app/views/charts/line-chart.js @@ -14,5 +14,6 @@ Balanced.LineChartView = Balanced.ChartView.extend({ size: { width: 600, height: 320 - } + }, + type: 'spline' }); diff --git a/app/views/charts/vertical-bar-chart.js b/app/views/charts/vertical-bar-chart.js index a82d94c31..1d54787ba 100644 --- a/app/views/charts/vertical-bar-chart.js +++ b/app/views/charts/vertical-bar-chart.js @@ -1,15 +1,19 @@ require("./chart"); Balanced.VerticalBarChartView = Balanced.ChartView.extend({ - _chartModel: "triangleBar", - classNames: ['vertical-bar-chart'], - - options: function() { - return { - width: 435, - height: 300, - rectClass: 'triangle', - showValues: true - }; - }.property() + axis: { + x: { + type: 'timeseries', + tick: { + format: function(x) { + return d3.time.format('%x')(x); + } + } + } + }, + size: { + width: 600, + height: 320 + }, + type: 'bar' }); diff --git a/test/support/fixtures/analytics.js b/test/support/fixtures/analytics.js index 5096b8403..d53d7de69 100644 --- a/test/support/fixtures/analytics.js +++ b/test/support/fixtures/analytics.js @@ -880,12 +880,12 @@ Balanced.Adapter.addFixtures([{ "card_brand": "visa", "type": "refund" }, { - "count": 1, + "count": 3, "status": "succeeded", "card_type": null, "amount": 1600, "card_brand": "visa", - "type": "refund" + "type": "credit" }], "escrow_at_end": 3403184, "end_at": "2014-09-12T16:04:30.281013Z" From 9c8d15e40ce2157b160cb1d518eb9a0ddf78050f Mon Sep 17 00:00:00 2001 From: Kyungmin Kim Date: Mon, 15 Sep 2014 15:17:56 -0700 Subject: [PATCH 34/34] Add c3 chart stylesheet --- static/less/base.less | 1 + 1 file changed, 1 insertion(+) diff --git a/static/less/base.less b/static/less/base.less index 886710a68..2d65af7a2 100644 --- a/static/less/base.less +++ b/static/less/base.less @@ -1,4 +1,5 @@ @import "/static/less/bootstrap.less"; +@import "/static/javascripts/c3/c3.css"; @import "/static/javascripts/strapped/static/less/strapped.less"; /*