Skip to content

Commit

Permalink
should sort out the main issues in #399 - missing charts should now a…
Browse files Browse the repository at this point in the history 
…bide by full_width and full_height. Also added a test to verify that the missing chart does indeed satisfy the requirement. Also, changed the name on the data.htm page of the examples.
  • Loading branch information
@hamilton
hamilton committed Mar 31, 2015
1 parent d704372 commit 7f466b2
Show file tree
Hide file tree
Showing 6 changed files with 81 additions and 37 deletions.
45 changes: 30 additions & 15 deletions dist/metricsgraphics.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -144,7 +144,7 @@
top: 40, // the size of the top margin
bottom: 30, // the size of the bottom margin
right: 10, // size of the right margin
left: 10, // size of the left margin
left: 50, // size of the left margin
buffer: 8, // the buffer between the actual chart area and the margins
legend_target: '',
width: 350,
Expand Down Expand Up @@ -4111,23 +4111,38 @@
this.args = args;

this.init = function(args) {
chart_title(args);
var svg_width,
svg_height;

svg_width = args.width;
svg_height = args.height;

if (args.full_width) {
// get parent element
svg_width = get_width(args.target);
}

if (args.full_height) {
svg_height = get_height(args.target);
}

chart_title(args);
// create svg if one doesn't exist
d3.select(args.target).selectAll('svg').data([args])
.enter().append('svg')
.attr('width', args.width)
.attr('height', args.height);
.attr('width', svg_width)
.attr('height', svg_height);

var svg = mg_get_svg_child_of(args.target);

// has the width or height changed?
if (args.width !== Number(svg.attr('width'))) {
svg.attr('width', args.width);

if (svg_width !== Number(svg.attr('width'))) {
svg.attr('width', svg_width);
}

if (args.height !== Number(svg.attr('height'))) {
svg.attr('height', args.height);
if (svg_height !== Number(svg.attr('height'))) {
svg.attr('height', svg_height);
}

// delete child elements
Expand All @@ -4150,11 +4165,11 @@

args.scales.X = d3.scale.linear()
.domain([0, data.length])
.range([args.left + args.buffer, args.width - args.right - args.buffer]);
.range([args.left + args.buffer, svg_width - args.right - args.buffer]);

args.scales.Y = d3.scale.linear()
.domain([-2, 2])
.range([args.height - args.bottom - args.buffer*2, args.top]);
.range([svg_height - args.bottom - args.buffer*2, args.top]);

args.scalefns.xf = function(di) { return args.scales.X(di.x); };
args.scalefns.yf = function(di) { return args.scales.Y(di.y); };
Expand All @@ -4177,8 +4192,8 @@
.classed('mg-missing-background', true)
.attr('x', args.buffer)
.attr('y', args.buffer)
.attr('width', args.width-args.buffer*2)
.attr('height', args.height-args.buffer*2)
.attr('width', svg_width-args.buffer*2)
.attr('height', svg_height-args.buffer*2)
.attr('rx',15)
.attr('ry', 15);

Expand All @@ -4195,8 +4210,8 @@
svg.selectAll('.mg-missing-text').data([args.missing_text])
.enter().append('text')
.attr('class', 'mg-missing-text')
.attr('x', args.width / 2)
.attr('y', args.height / 2)
.attr('x', svg_width / 2)
.attr('y', svg_height / 2)
.attr('dy', '.50em')
.attr('text-anchor', 'middle')
.text(args.missing_text);
Expand Down
4 changes: 2 additions & 2 deletions dist/metricsgraphics.min.js
View file

Large diffs are not rendered by default.

10 changes: 5 additions & 5 deletions examples/charts/data.htm
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,18 +64,18 @@
<div class='row trunk-section'>
<div class='col-lg-7 text-center'>
<div class='row'>
<div class='col-lg-12 text-center' id='glorious_chart'></div>
<div class='col-lg-12 text-center' id='missing-data'></div>
</div>
</div>
<div class='col-lg-5'>

<pre><code class='javascript'>MG.data_graphic({
title: "Glorious Graphic",
title: "Missing Data",
description: "This is an example of a graphic whose data is currently missing. We've also set the <i>error</i> option, which appends an error icon to the title and logs an error to the browser's console.",
error: 'This data is blocked by Lorem Ipsum. Get your **** together, Ipsum.',
chart_type: 'missing-data',
missing_text: 'This is an example of a missing chart',
target: '#glorious_chart',
target: '#missing-data',
width: 600,
height: 200
});</code></pre>
Expand Down Expand Up @@ -170,12 +170,12 @@
});

MG.data_graphic({
title: "Glorious Graphic",
title: "Missing Data",
chart_type: 'missing-data',
description: "This is an example of a graphic whose data is currently missing. We've also set the <i>error</i> option, which appends an error icon to the title and logs an error to the browser's console.",
error: 'This data is blocked by Lorem Ipsum. Get your **** together, Ipsum.',
missing_text: 'This is an example of a missing chart',
target: '#glorious_chart',
target: '#missing-data',
width: 600,
height: 200
});
Expand Down
43 changes: 29 additions & 14 deletions src/js/charts/missing.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,23 +3,38 @@ charts.missing = function(args) {
this.args = args;

this.init = function(args) {
chart_title(args);
var svg_width,
svg_height;

svg_width = args.width;
svg_height = args.height;

if (args.full_width) {
// get parent element
svg_width = get_width(args.target);
}

if (args.full_height) {
svg_height = get_height(args.target);
}

chart_title(args);
// create svg if one doesn't exist
d3.select(args.target).selectAll('svg').data([args])
.enter().append('svg')
.attr('width', args.width)
.attr('height', args.height);
.attr('width', svg_width)
.attr('height', svg_height);

var svg = mg_get_svg_child_of(args.target);

// has the width or height changed?
if (args.width !== Number(svg.attr('width'))) {
svg.attr('width', args.width);

if (svg_width !== Number(svg.attr('width'))) {
svg.attr('width', svg_width);
}

if (args.height !== Number(svg.attr('height'))) {
svg.attr('height', args.height);
if (svg_height !== Number(svg.attr('height'))) {
svg.attr('height', svg_height);
}

// delete child elements
Expand All @@ -42,11 +57,11 @@ charts.missing = function(args) {

args.scales.X = d3.scale.linear()
.domain([0, data.length])
.range([args.left + args.buffer, args.width - args.right - args.buffer]);
.range([args.left + args.buffer, svg_width - args.right - args.buffer]);

args.scales.Y = d3.scale.linear()
.domain([-2, 2])
.range([args.height - args.bottom - args.buffer*2, args.top]);
.range([svg_height - args.bottom - args.buffer*2, args.top]);

args.scalefns.xf = function(di) { return args.scales.X(di.x); };
args.scalefns.yf = function(di) { return args.scales.Y(di.y); };
Expand All @@ -69,8 +84,8 @@ charts.missing = function(args) {
.classed('mg-missing-background', true)
.attr('x', args.buffer)
.attr('y', args.buffer)
.attr('width', args.width-args.buffer*2)
.attr('height', args.height-args.buffer*2)
.attr('width', svg_width-args.buffer*2)
.attr('height', svg_height-args.buffer*2)
.attr('rx',15)
.attr('ry', 15);

Expand All @@ -87,8 +102,8 @@ charts.missing = function(args) {
svg.selectAll('.mg-missing-text').data([args.missing_text])
.enter().append('text')
.attr('class', 'mg-missing-text')
.attr('x', args.width / 2)
.attr('y', args.height / 2)
.attr('x', svg_width / 2)
.attr('y', svg_height / 2)
.attr('dy', '.50em')
.attr('text-anchor', 'middle')
.text(args.missing_text);
Expand Down
2 changes: 1 addition & 1 deletion src/js/common/data_graphic.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -131,7 +131,7 @@ MG.data_graphic = function() {
top: 40, // the size of the top margin
bottom: 30, // the size of the bottom margin
right: 10, // size of the right margin
left: 10, // size of the left margin
left: 50, // size of the left margin
buffer: 8, // the buffer between the actual chart area and the margins
legend_target: '',
width: 350,
Expand Down
14 changes: 14 additions & 0 deletions tests/charts/missing_test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,20 @@ test('Only one mg-missing-text on multiple calls to the same target element', fu
equal(document.querySelectorAll(params.target + ' .mg-missing-text').length, 1, 'We only have one mg-missing-text');
});

test('missing chart obeys full_width: true', function() {
var params = {
target: '#qunit-fixture',
chart_type: 'missing-data',
full_width: true,
missing_text: 'In an astral plane that was never meant to fly...'
};
document.querySelector('#qunit-fixture').style.width='700px';

MG.data_graphic(params);

equal(document.querySelector('#qunit-fixture svg').getAttribute('width'), 700, 'The missing chart svg has same width as parent element.');
});

test('Missing chart\'s width is set correctly on subsequent calls to existing chart', function() {
var params_0 = {
target: '#qunit-fixture',
Expand Down

0 comments on commit 7f466b2

Please sign in to comment.