Mirroring/coriolis
1
0
Fork 0
mirror of https://github.com/EDCD/coriolis.git synced 2025-12-09 06:43:24 +00:00
Code Issues Projects Releases Wiki Activity

Update area chart on window resize or orientation change

Browse Source
This commit is contained in:
Colin McLeod
2015-05-28 02:00:05 -07:00
parent 24e9afd3bf
commit 384d420a7f
1 changed files with 35 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
app/js/directives/directive-area-chart.js
View File

@@ -1,4 +1,4 @@
angular.module('app').directive('areaChart', function () {
angular.module('app').directive('areaChart', ['$window', function ($window) {
return {
@@ -10,33 +10,25 @@ angular.module('app').directive('areaChart', function () {
width: '='
},
link: function(scope, element) {
var width = element[0].parentElement.offsetWidth,
height = width * 0.6,
series = scope.series,
var series = scope.series,
config = scope.config,
labels = config.labels,
margin = {top: 15, right: 15, bottom: 35, left: 50},
w = width - margin.left - margin.right,
h = height - margin.top - margin.bottom,
fmt = d3.format('.3r'),
fmtLong = d3.format('.2f');
fmtLong = d3.format('.2f'),
x, y;
// Create chart
var svg = d3.select(element[0]).append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var svg = d3.select(element[0]).append("svg");
var vis = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
// Define Axes
var x = d3.scale.linear().range([0, w]);
var y = d3.scale.linear().range([h, 0]);
var xAxis = d3.svg.axis().outerTickSize(0).orient("bottom").tickFormat(fmt);
var yAxis = d3.svg.axis().outerTickSize(0).orient("left").tickFormat(fmt);
// Define Area
var area = d3.svg.area().x(function(d) { return x(d[0]); }).y0(h).y1(function(d) { return y(d[1]); });
var area = d3.svg.area();
var gradient = svg.append("defs")
var gradient = vis.append("defs")
.append("linearGradient")
.attr("id", "gradient")
.attr("x1", "0%").attr("y1", "0%")
@@ -52,57 +44,69 @@ angular.module('app').directive('areaChart', function () {
.attr("stop-opacity", 1);
// Create Y Axis SVG Elements
svg.append("g").attr("class", "y axis")
var yTxt = vis.append("g").attr("class", "y axis")
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", -40)
.attr("x", -h/2)
.attr("dy", ".1em")
.style("text-anchor", "middle")
.text(labels.yAxis.title + ' (' + labels.yAxis.unit + ')');
// Create X Axis SVG Elements
svg.append("g").attr("class", "x axis").attr("transform", "translate(0," + h + ")")
.append("text")
var xLbl = vis.append("g").attr("class", "x axis");
var xTxt = xLbl.append("text")
.attr("y", 30)
.attr("x", w/2)
.attr("dy", ".1em")
.style("text-anchor", "middle")
.text(labels.xAxis.title + ' (' + labels.xAxis.unit + ')');
// Create and Add tooltip
var tip = svg.append("g").style("display", "none");
var tip = vis.append("g").style("display", "none");
tip.append("circle")
.attr("class", "marker")
.attr("r", 4);
tip.append("text").attr("class", 'label x').attr("y", -2);
tip.append("text").attr("class", 'label y').attr("y", '0.7em');
/**
* Watch for changes in the series data (mass changes, etc)
*/
scope.$watchCollection('series', render);
scope.$watchCollection('config.watch', render);
angular.element($window).bind('resize', render);
function render() {
var data = [];
var func = series.func;
var width = element[0].parentElement.offsetWidth,
height = width * 0.6,
w = width - margin.left - margin.right,
h = height - margin.top - margin.bottom,
x = d3.scale.linear().range([0, w]),
y = d3.scale.linear().range([h, 0]),
data = [],
func = series.func;
for (var d = series.xMin; d <= series.xMax; d++) {
data.push([ d, func(d) ]);
}
// Update Chart Size
svg.attr("width", width).attr("height", height);
area.x(function(d) { return x(d[0]); }).y0(h).y1(function(d) { return y(d[1]); });
// Update domain and scale for axes;
x.domain([series.xMin, series.xMax]);
xAxis.scale(x);
xLbl.attr("transform", "translate(0," + h + ")");
xTxt.attr("x", w/2);
y.domain([data[data.length - 1][1], data[0][1]]);
yAxis.scale(y);
svg.selectAll(".y.axis").call(yAxis);
svg.selectAll(".x.axis").call(xAxis);
yTxt.attr("x", -h/2);
vis.selectAll(".y.axis").call(yAxis);
vis.selectAll(".x.axis").call(xAxis);
// Remove existing elements
svg.selectAll('path.area').remove();
vis.selectAll('path.area').remove();
svg.insert("path",':first-child') // Area/Path to appear behind everything else
vis.insert("path",':first-child') // Area/Path to appear behind everything else
.datum(data)
.attr("class", "area")
.attr('fill', 'url(#gradient)')
@@ -120,4 +124,4 @@ angular.module('app').directive('areaChart', function () {
}
};
});
}]);