Extract common graph rendering functionality into view mixin

selaux · May 4, 2014 · 4401dee · 4401dee
1 parent ce46849
commit 4401dee
Show file tree

Hide file tree

Showing 4 changed files with 123 additions and 228 deletions.
diff --git a/lib/views/aggregatedMiners.js b/lib/views/aggregatedMiners.js
@@ -1,81 +1,18 @@
 'use strict';
 
-var Rickshaw = require('rickshaw'),
-    _ = require('lodash'),
-    timeHelper = require('../handlebars/helpers/time'),
-    hashrateHelper = require('../handlebars/helpers/hashrate'),
-
-    View = require('../View');
+var hashrateHelper = require('../handlebars/helpers/hashrate'),
+    renderHistoricalDataGraph = require('./mixins/renderHistoricalDataGraph'),
+
+    View = require('../View'),
+    graphMixin = renderHistoricalDataGraph([ {
+        attr: 'currentHashrate',
+        name: 'Total Hashrate'
+    } ], '.graph', {
+        yFormatter: function (value) {
+            return hashrateHelper(value);
+        }
+    });
 
 module.exports = View.extend({
-    template: 'aggregatedMiners',
-
-    graph: null,
-
-    getChartData: function () {
-        return this.module.get('historicalData').map(function (measurement) {
-            return {
-                x: (measurement.timestamp / 1000),
-                y: measurement.currentHashrate
-            };
-        });
-    },
-
-    initializeGraph: function () {
-        this.graph = new Rickshaw.Graph({
-            element: this.$('.graph')[0],
-            height: 120,
-            renderer: 'area',
-            interpolation: 'linear',
-            stroke: true,
-            series: [
-                {
-                    color: '#cae2f7',
-                    name: 'Total Hashrate',
-                    data: this.getChartData()
-                }
-            ]
-        });
-        this.detail = new Rickshaw.Graph.HoverDetail({
-            graph: this.graph,
-            yFormatter: function (value) {
-                return hashrateHelper(value);
-            },
-            xFormatter: function (value) {
-                return timeHelper(value * 1000);
-            }
-        });
-        this.xAxis = new Rickshaw.Graph.Axis.Time({
-            graph: this.graph
-        });
-        this.yAxis = new Rickshaw.Graph.Axis.Y({
-            graph: this.graph
-        });
-    },
-
-    updateGraph: function () {
-        var chartData = this.getChartData();
-
-        this.graph.min = _(chartData).pluck('y').min().value() * 0.99;
-        this.graph.max = _(chartData).pluck('y').max().value() * 1.01;
-        this.graph.series[0].data = this.getChartData();
-
-        this.xAxis.render();
-        this.yAxis.render();
-        this.graph.update();
-    },
-
-    postRender: function () {
-        var graphElement = this.$('.graph'),
-            graphShouldBeRendered = graphElement.length > 0 && this.module.get('historicalData');
-
-        if (graphShouldBeRendered) {
-            if (this.graph) {
-                graphElement.replaceWith(this.graph.element);
-            } else {
-                this.initializeGraph();
-            }
-            this.updateGraph();
-        }
-    }
-});
+    template: 'aggregatedMiners'
+}).extend(graphMixin);
diff --git a/lib/views/miner.js b/lib/views/miner.js
@@ -1,78 +1,17 @@
 'use strict';
 
-var Rickshaw = require('rickshaw'),
-    _ = require('lodash'),
+var renderHistoricalDataGraph = require('./mixins/renderHistoricalDataGraph'),
     hashrateHelper = require('../handlebars/helpers/hashrate'),
-    timeHelper = require('../handlebars/helpers/time'),
-    View = require('../View');
+    View = require('../View'),
+    graphMixin = renderHistoricalDataGraph([ {
+        attr: 'currentHashrate',
+        name: 'Hashrate'
+    } ], '.graph', {
+        yFormatter: function (value) {
+            return hashrateHelper(value);
+        }
+    });
 
 module.exports = View.extend({
-    template: 'miner',
-
-    graph: null,
-
-    getChartData: function () {
-        return this.module.get('historicalData').map(function (measurement) {
-            return {
-                x: measurement.timestamp / 1000,
-                y: measurement.currentHashrate
-            };
-        });
-    },
-
-    initializeGraph: function () {
-        this.graph = new Rickshaw.Graph({
-            element: this.$('.graph')[0],
-            height: 120,
-            renderer: 'area',
-            interpolation: 'linear',
-            stroke: true,
-            series: [
-                {
-                    color: '#cae2f7',
-                    name: 'Hashrate',
-                    data: this.getChartData()
-                }
-            ]
-        });
-        this.detail = new Rickshaw.Graph.HoverDetail({
-            graph: this.graph,
-            yFormatter: hashrateHelper,
-            xFormatter: function (value) {
-                return timeHelper(value * 1000);
-            }
-        });
-        this.xAxis = new Rickshaw.Graph.Axis.Time({
-            graph: this.graph
-        });
-        this.yAxis = new Rickshaw.Graph.Axis.Y({
-            graph: this.graph
-        });
-    },
-
-    updateGraph: function () {
-        var chartData = this.getChartData();
-
-        this.graph.min = _(chartData).pluck('y').min().value() * 0.99;
-        this.graph.max = _(chartData).pluck('y').max().value() * 1.01;
-        this.graph.series[0].data = this.getChartData();
-
-        this.xAxis.render();
-        this.yAxis.render();
-        this.graph.update();
-    },
-
-    postRender: function () {
-        var graphElement = this.$('.graph'),
-            graphShouldBeRendered = graphElement.length > 0 && this.module.get('historicalData');
-
-        if (graphShouldBeRendered) {
-            if (this.graph) {
-                graphElement.replaceWith(this.graph.element);
-            } else {
-                this.initializeGraph();
-            }
-            this.updateGraph();
-        }
-    }
-});
+    template: 'miner'
+}).extend(graphMixin);
diff --git a/lib/views/mixins/renderHistoricalDataGraph.js b/lib/views/mixins/renderHistoricalDataGraph.js
@@ -0,0 +1,84 @@
+'use strict';
+
+var Rickshaw = require('rickshaw'),
+    _ = require('lodash'),
+    timeHelper = require('../../handlebars/helpers/time');
+
+module.exports = function (attributes, element, options) {
+    return {
+        graph: null,
+
+        getSeries: function () {
+            var self = this;
+
+            return _.map(attributes, function (attr) {
+                return _.extend({
+                    color: '#cae2f7',
+                    data: self.module.get('historicalData').map(function (measurement) {
+                        return {
+                            x: (measurement.timestamp / 1000),
+                            y: measurement[attr.attr]
+                        };
+                    })
+                }, attr);
+            });
+        },
+
+        initializeGraph: function () {
+            options.yFormatter = options.yFormatter.bind(this);
+
+            this.graph = new Rickshaw.Graph({
+                element: this.$(element)[0],
+                height: 120,
+                renderer: 'area',
+                interpolation: 'linear',
+                stroke: true,
+                series: this.getSeries()
+            });
+            this.detail = new Rickshaw.Graph.HoverDetail(_.extend({
+                graph: this.graph,
+                xFormatter: function (value) {
+                    return timeHelper(value * 1000);
+                }.bind(this)
+            }, options));
+            this.xAxis = new Rickshaw.Graph.Axis.Time({
+                graph: this.graph
+            });
+            this.yAxis = new Rickshaw.Graph.Axis.Y({
+                graph: this.graph
+            });
+        },
+
+        updateGraph: function () {
+            var series = this.getSeries();
+
+            this.graph.min = _(series).map(function (ser) {
+                return _(ser.data).pluck('y').min().value();
+            }).min().value() * 0.99;
+            this.graph.max = _(series).map(function (ser) {
+                return _(ser.data).pluck('y').max().value();
+            }).max().value() * 1.01;
+            _.each(this.graph.series, function (graphSeries, index) {
+                graphSeries.data = series[index].data;
+            });
+
+            this.xAxis.render();
+            this.yAxis.render();
+            this.graph.update();
+        },
+
+        postRender: function () {
+            var graphElement = this.$(element),
+                graphShouldBeRendered = graphElement.length > 0 && this.module.get('historicalData');
+
+            if (graphShouldBeRendered) {
+                if (this.graph) {
+                    graphElement.replaceWith(this.graph.element);
+                } else {
+                    this.initializeGraph();
+                }
+                this.updateGraph();
+            }
+        }
+    };
+};
diff --git a/lib/views/revenue.js b/lib/views/revenue.js
@@ -1,82 +1,17 @@
 'use strict';
 
-var Rickshaw = require('rickshaw'),
-    _ = require('lodash'),
-    timeHelper = require('../handlebars/helpers/time'),
-
-    View = require('../View');
+var renderHistoricalDataGraph = require('./mixins/renderHistoricalDataGraph'),
+
+    View = require('../View'),
+    graphMixin = renderHistoricalDataGraph([ {
+        attr: 'value',
+        name: 'Revenue'
+    } ], '.graph', {
+        yFormatter: function (value) {
+            return value.toFixed(5) + ' ' + this.module.get('currency');
+        }
+    });
 
 module.exports = View.extend({
-    template: 'revenue',
-
-    graph: null,
-
-    getChartData: function () {
-        return this.module.get('historicalData').map(function (measurement) {
-            return {
-                x: (measurement.timestamp / 1000),
-                y: measurement.value
-            };
-        });
-    },
-
-    initializeGraph: function () {
-        var module = this.module;
-
-        this.graph = new Rickshaw.Graph({
-            element: this.$('.graph')[0],
-            height: 120,
-            renderer: 'area',
-            interpolation: 'linear',
-            stroke: true,
-            series: [
-                {
-                    color: '#cae2f7',
-                    name: 'Revenue',
-                    data: this.getChartData()
-                }
-            ]
-        });
-        this.detail = new Rickshaw.Graph.HoverDetail({
-            graph: this.graph,
-            yFormatter: function (value) {
-                return value.toFixed(5) + ' ' + module.get('currency');
-            },
-            xFormatter: function (value) {
-                return timeHelper(value * 1000);
-            }
-        });
-        this.xAxis = new Rickshaw.Graph.Axis.Time({
-            graph: this.graph
-        });
-        this.yAxis = new Rickshaw.Graph.Axis.Y({
-            graph: this.graph
-        });
-    },
-
-    updateGraph: function () {
-        var chartData = this.getChartData();
-
-        this.graph.min = _(chartData).pluck('y').min().value() * 0.99;
-        this.graph.max = _(chartData).pluck('y').max().value() * 1.01;
-        this.graph.series[0].data = this.getChartData();
-
-        this.xAxis.render();
-        this.yAxis.render();
-        this.graph.update();
-    },
-
-    postRender: function () {
-        var graphElement = this.$('.graph'),
-            graphShouldBeRendered = graphElement.length > 0 && this.module.get('historicalData');
-
-        if (graphShouldBeRendered) {
-            if (this.graph) {
-                graphElement.replaceWith(this.graph.element);
-            } else {
-                this.initializeGraph();
-            }
-            this.updateGraph();
-        }
-    }
-});
+    template: 'revenue'
+}).extend(graphMixin);