Skip to content

Commit

Permalink
Merge pull request #184 from n3-charts/issue_177
Browse files Browse the repository at this point in the history 
Fixes issue #177
  • Loading branch information
Lorem Ipsum committed Jan 11, 2015
2 parents 76debb7 + b6616db commit 6b2d5a2
Show file tree
Hide file tree
Showing 23 changed files with 149 additions and 4,982 deletions.
2 changes: 1 addition & 1 deletion bower.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "n3-line-chart",
"version": "1.1.4",
"version": "1.1.5",
"main": "build/line-chart.min.js",
"ignore": [
"**/.*",
Expand Down
82 changes: 47 additions & 35 deletions build/line-chart.coffee
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
###
line-chart - v1.1.4 - 04 December 2014
line-chart - v1.1.5 - 11 January 2015
https://github.com/n3-charts/line-chart
Copyright (c) 2014 n3-charts
Copyright (c) 2015 n3-charts
###
# src/line-chart.coffee
old_m = angular.module('n3-charts.linechart', ['n3charts.utils'])
Expand Down Expand Up @@ -51,9 +51,17 @@ directive('linechart', ['n3utils', '$window', '$timeout', (n3utils, $window, $ti
_u.clean(element[0])

svg = _u.bootstrap(element[0], dimensions)

fn = (key) -> (options.series.filter (s) -> s.axis is key and s.visible isnt false).length > 0

axes = _u
.createAxes(svg, dimensions, options.axes)
.andAddThemIf(isThumbnail)
.andAddThemIf({
all: !isThumbnail
x: true
y: fn('y')
y2: fn('y2')
})

if dataPerSeries.length
_u.setScalesDomain(axes, scope.data, options.series, svg, options)
Expand Down Expand Up @@ -93,7 +101,7 @@ directive('linechart', ['n3utils', '$window', '$timeout', (n3utils, $window, $ti
$window.addEventListener('resize', window_resize)

scope.$watch('data', scope.redraw, true)
scope.$watch('options', scope.redraw, true)
scope.$watch('options', (-> scope.update(dim)) , true)

return {
replace: true
Expand Down Expand Up @@ -992,7 +1000,7 @@ mod.factory('n3utils', ['$window', '$log', '$rootScope', ($window, $log, $rootSc

# src/utils/scales.coffee
createAxes: (svg, dimensions, axesOptions) ->
drawY2Axis = axesOptions.y2?
createY2Axis = axesOptions.y2?

width = dimensions.width
height = dimensions.height
Expand All @@ -1005,27 +1013,25 @@ mod.factory('n3utils', ['$window', '$log', '$rootScope', ($window, $log, $rootSc
x = d3.time.scale().rangeRound([0, width])
else
x = d3.scale.linear().rangeRound([0, width])
xAxis = this.createAxis(x, 'x', axesOptions)

y = undefined
if axesOptions.y.type is 'log'
y = d3.scale.log().clamp(true).rangeRound([height, 0])
else
y = d3.scale.linear().rangeRound([height, 0])

y.clamp(true)
yAxis = this.createAxis(y, 'y', axesOptions)

y2 = undefined
if drawY2Axis and axesOptions.y2.type is 'log'
if createY2Axis and axesOptions.y2.type is 'log'
y2 = d3.scale.log().clamp(true).rangeRound([height, 0])
else
y2 = d3.scale.linear().rangeRound([height, 0])

y.clamp(true)
y2.clamp(true)

xAxis = this.createAxis(x, 'x', axesOptions)
yAxis = this.createAxis(y, 'y', axesOptions)
y2Axis = this.createAxis(y2, 'y2', axesOptions)


style = (group) ->
group.style(
'font': '10px Courier'
Expand All @@ -1037,8 +1043,6 @@ mod.factory('n3utils', ['$window', '$log', '$rootScope', ($window, $log, $rootSc
'stroke': '#000'
)

that = this

return {
xScale: x
yScale: y
Expand All @@ -1047,22 +1051,25 @@ mod.factory('n3utils', ['$window', '$log', '$rootScope', ($window, $log, $rootSc
yAxis: yAxis
y2Axis: y2Axis

andAddThemIf: (condition) ->
if not condition
style(
svg.append('g')
.attr('class', 'x axis')
.attr('transform', 'translate(0,' + height + ')')
.call(xAxis)
)
andAddThemIf: (conditions) ->
if !!conditions.all

style(
svg.append('g')
.attr('class', 'y axis')
.call(yAxis)
)
if !!conditions.x
style(
svg.append('g')
.attr('class', 'x axis')
.attr('transform', 'translate(0,' + height + ')')
.call(xAxis)
)

if !!conditions.y
style(
svg.append('g')
.attr('class', 'y axis')
.call(yAxis)
)

if drawY2Axis
if createY2Axis and !!conditions.y2
style(
svg.append('g')
.attr('class', 'y2 axis')
Expand Down Expand Up @@ -1103,22 +1110,27 @@ mod.factory('n3utils', ['$window', '$log', '$rootScope', ($window, $log, $rootSc
setScalesDomain: (scales, data, series, svg, options) ->
this.setXScale(scales.xScale, data, series, options.axes)

yDomain = this.getVerticalDomain(options, data, series, 'y')
y2Domain = this.getVerticalDomain(options, data, series, 'y2')
svg.selectAll('.x.axis').call(scales.xAxis)

scales.yScale.domain(yDomain).nice()
scales.y2Scale.domain(y2Domain).nice()
if (series.filter (s) -> s.axis is 'y' and s.visible isnt false).length > 0
yDomain = this.getVerticalDomain(options, data, series, 'y')
scales.yScale.domain(yDomain).nice()
svg.selectAll('.y.axis').call(scales.yAxis)

if (series.filter (s) -> s.axis is 'y2' and s.visible isnt false).length > 0
y2Domain = this.getVerticalDomain(options, data, series, 'y2')
scales.y2Scale.domain(y2Domain).nice()
svg.selectAll('.y2.axis').call(scales.y2Axis)

svg.selectAll('.x.axis').call(scales.xAxis)
svg.selectAll('.y.axis').call(scales.yAxis)
svg.selectAll('.y2.axis').call(scales.y2Axis)

getVerticalDomain: (options, data, series, key) ->
return [] unless o = options.axes[key]

if o.ticks? and angular.isArray(o.ticks)
return [o.ticks[0], o.ticks[o.ticks.length - 1]]

mySeries = series.filter (s) -> s.axis is key and s.visible isnt false

domain = this.yExtent(
series.filter (s) -> s.axis is key and s.visible isnt false
data
Expand Down
74 changes: 50 additions & 24 deletions build/line-chart.js
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@

/*
line-chart - v1.1.4 - 04 December 2014
line-chart - v1.1.5 - 11 January 2015
https://github.com/n3-charts/line-chart
Copyright (c) 2014 n3-charts
Copyright (c) 2015 n3-charts
*/
var directive, m, mod, old_m,
__indexOf = [].indexOf || function(item) { for (var i = 0, l = this.length; i < l; i++) { if (i in this && this[i] === item) return i; } return -1; };
Expand Down Expand Up @@ -48,14 +48,24 @@ directive('linechart', [
}
};
scope.update = function(dimensions) {
var axes, columnWidth, dataPerSeries, handlers, isThumbnail, options, svg;
var axes, columnWidth, dataPerSeries, fn, handlers, isThumbnail, options, svg;
options = _u.sanitizeOptions(scope.options, attrs.mode);
handlers = angular.extend(initialHandlers, _u.getTooltipHandlers(options));
dataPerSeries = _u.getDataPerSeries(scope.data, options);
isThumbnail = attrs.mode === 'thumbnail';
_u.clean(element[0]);
svg = _u.bootstrap(element[0], dimensions);
axes = _u.createAxes(svg, dimensions, options.axes).andAddThemIf(isThumbnail);
fn = function(key) {
return (options.series.filter(function(s) {
return s.axis === key && s.visible !== false;
})).length > 0;
};
axes = _u.createAxes(svg, dimensions, options.axes).andAddThemIf({
all: !isThumbnail,
x: true,
y: fn('y'),
y2: fn('y2')
});
if (dataPerSeries.length) {
_u.setScalesDomain(axes, scope.data, options.series, svg, options);
}
Expand Down Expand Up @@ -90,7 +100,9 @@ directive('linechart', [
};
$window.addEventListener('resize', window_resize);
scope.$watch('data', scope.redraw, true);
return scope.$watch('options', scope.redraw, true);
return scope.$watch('options', (function() {
return scope.update(dim);
}), true);
};
return {
replace: true,
Expand Down Expand Up @@ -1080,8 +1092,8 @@ mod.factory('n3utils', [
return options;
},
createAxes: function(svg, dimensions, axesOptions) {
var drawY2Axis, height, style, that, width, x, xAxis, y, y2, y2Axis, yAxis;
drawY2Axis = axesOptions.y2 != null;
var createY2Axis, height, style, width, x, xAxis, y, y2, y2Axis, yAxis;
createY2Axis = axesOptions.y2 != null;
width = dimensions.width;
height = dimensions.height;
width = width - dimensions.left - dimensions.right;
Expand All @@ -1092,22 +1104,22 @@ mod.factory('n3utils', [
} else {
x = d3.scale.linear().rangeRound([0, width]);
}
xAxis = this.createAxis(x, 'x', axesOptions);
y = void 0;
if (axesOptions.y.type === 'log') {
y = d3.scale.log().clamp(true).rangeRound([height, 0]);
} else {
y = d3.scale.linear().rangeRound([height, 0]);
}
y.clamp(true);
yAxis = this.createAxis(y, 'y', axesOptions);
y2 = void 0;
if (drawY2Axis && axesOptions.y2.type === 'log') {
if (createY2Axis && axesOptions.y2.type === 'log') {
y2 = d3.scale.log().clamp(true).rangeRound([height, 0]);
} else {
y2 = d3.scale.linear().rangeRound([height, 0]);
}
y.clamp(true);
y2.clamp(true);
xAxis = this.createAxis(x, 'x', axesOptions);
yAxis = this.createAxis(y, 'y', axesOptions);
y2Axis = this.createAxis(y2, 'y2', axesOptions);
style = function(group) {
group.style({
Expand All @@ -1119,19 +1131,22 @@ mod.factory('n3utils', [
'stroke': '#000'
});
};
that = this;
return {
xScale: x,
yScale: y,
y2Scale: y2,
xAxis: xAxis,
yAxis: yAxis,
y2Axis: y2Axis,
andAddThemIf: function(condition) {
if (!condition) {
style(svg.append('g').attr('class', 'x axis').attr('transform', 'translate(0,' + height + ')').call(xAxis));
style(svg.append('g').attr('class', 'y axis').call(yAxis));
if (drawY2Axis) {
andAddThemIf: function(conditions) {
if (!!conditions.all) {
if (!!conditions.x) {
style(svg.append('g').attr('class', 'x axis').attr('transform', 'translate(0,' + height + ')').call(xAxis));
}
if (!!conditions.y) {
style(svg.append('g').attr('class', 'y axis').call(yAxis));
}
if (createY2Axis && !!conditions.y2) {
style(svg.append('g').attr('class', 'y2 axis').attr('transform', 'translate(' + width + ', 0)').call(y2Axis));
}
}
Expand Down Expand Up @@ -1169,22 +1184,33 @@ mod.factory('n3utils', [
setScalesDomain: function(scales, data, series, svg, options) {
var y2Domain, yDomain;
this.setXScale(scales.xScale, data, series, options.axes);
yDomain = this.getVerticalDomain(options, data, series, 'y');
y2Domain = this.getVerticalDomain(options, data, series, 'y2');
scales.yScale.domain(yDomain).nice();
scales.y2Scale.domain(y2Domain).nice();
svg.selectAll('.x.axis').call(scales.xAxis);
svg.selectAll('.y.axis').call(scales.yAxis);
return svg.selectAll('.y2.axis').call(scales.y2Axis);
if ((series.filter(function(s) {
return s.axis === 'y' && s.visible !== false;
})).length > 0) {
yDomain = this.getVerticalDomain(options, data, series, 'y');
scales.yScale.domain(yDomain).nice();
svg.selectAll('.y.axis').call(scales.yAxis);
}
if ((series.filter(function(s) {
return s.axis === 'y2' && s.visible !== false;
})).length > 0) {
y2Domain = this.getVerticalDomain(options, data, series, 'y2');
scales.y2Scale.domain(y2Domain).nice();
return svg.selectAll('.y2.axis').call(scales.y2Axis);
}
},
getVerticalDomain: function(options, data, series, key) {
var domain, o;
var domain, mySeries, o;
if (!(o = options.axes[key])) {
return [];
}
if ((o.ticks != null) && angular.isArray(o.ticks)) {
return [o.ticks[0], o.ticks[o.ticks.length - 1]];
}
mySeries = series.filter(function(s) {
return s.axis === key && s.visible !== false;
});
domain = this.yExtent(series.filter(function(s) {
return s.axis === key && s.visible !== false;
}), data, options.stacks.filter(function(stack) {
Expand Down
6 changes: 3 additions & 3 deletions build/line-chart.min.js
View file

Large diffs are not rendered by default.

Loading

0 comments on commit 6b2d5a2

Please sign in to comment.