Skip to content

Commit

Permalink
Fix issue w3c#284
Browse files Browse the repository at this point in the history
  • Loading branch information
@almossawi
almossawi committed Jan 21, 2015
1 parent bf46b19 commit af81b74
Show file tree
Hide file tree
Showing 12 changed files with 191 additions and 29 deletions.
10 changes: 9 additions & 1 deletion dist/metricsgraphics.css
View file
Expand Up @@ -246,7 +246,15 @@
}

.mg-missing-text {
opacity: 0.8;
opacity: 0.9;
}

.mg-missing .mg-main-line {
opacity: 0.1;
}

.mg-missing .mg-main-area {
opacity: 0.03;
}

path.mg-main-area {
Expand Down
77 changes: 68 additions & 9 deletions dist/metricsgraphics.js
View file
Expand Up @@ -77,6 +77,7 @@
format: 'count', // format = {count, percentage}
inflator: 10/9, // for setting y axis max
linked: false, // links together all other graphs with linked:true, so rollovers in one trigger rollovers in the others
linked_format: '%Y-%m-%d', // What granularity to link on for graphs. Default is at day
list: false,
baselines: null, // sets the baseline lines
markers: null, // sets the marker lines
Expand Down Expand Up @@ -138,10 +139,15 @@
bottom: 0,
right: 0,
left: 0,
buffer: 8,
legend_target: '',
width: 350,
height: 220,
missing_text: 'Data currently missing or unavailable'
missing_text: 'Data currently missing or unavailable',
scalefns: {},
scales: {},
show_missing_background: true,
interpolate: 'cardinal'
};

var args = arguments[0];
Expand Down Expand Up @@ -1832,7 +1838,7 @@
.attr('x', args.left)
.attr('y', args.top)
.attr('width', args.width - args.left - args.right - args.buffer)
.attr('height', args.height - args.top - args.bottom - args.buffer);
.attr('height', args.height - args.top - args.bottom - args.buffer + 1);

//has the width or height changed?
if (svg_width !== Number(svg.attr('width'))) {
Expand All @@ -1852,8 +1858,10 @@

// remove missing class
svg.classed('mg-missing', false);

// remove missing text
svg.selectAll('.mg-missing-text').remove();
svg.selectAll('.mg-missing-pane').remove();

//add chart title if it's different than existing one
chart_title(args);
Expand Down Expand Up @@ -2556,7 +2564,7 @@
.attr('class', function(d) {
if (args.linked) {
var v = d[args.x_accessor];
var formatter = d3.time.format('%Y-%m-%d');
var formatter = d3.time.format(args.linked_format);

//only format when x-axis is date
var id = (typeof v === 'number')
Expand Down Expand Up @@ -2638,7 +2646,7 @@
.attr('class', function(d, i) {
if (args.linked) {
var v = d[args.x_accessor];
var formatter = d3.time.format('%Y-%m-%d');
var formatter = d3.time.format(args.linked_format);

//only format when x-axis is date
var id = (typeof v === 'number')
Expand Down Expand Up @@ -2769,7 +2777,7 @@
MG.globals.link = true;

var v = d[args.x_accessor];
var formatter = d3.time.format('%Y-%m-%d');
var formatter = d3.time.format(args.linked_format);

//only format when y-axis is date
var id = (typeof v === 'number')
Expand Down Expand Up @@ -2909,7 +2917,7 @@
MG.globals.link = false;

var v = d[args.x_accessor];
var formatter = d3.time.format('%Y-%m-%d');
var formatter = d3.time.format(args.linked_format);

//only format when y-axis is date
var id = (typeof v === 'number')
Expand Down Expand Up @@ -4043,17 +4051,68 @@
.attr('width', args.width)
.attr('height', args.height);

var svg = d3.select(args.target).select('svg');

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

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

// delete child elements
d3.select(args.target).selectAll('svg *').remove();

var svg = d3.select(args.target).select('svg');

// add missing class
svg.classed('mg-missing', true);

// do we need to clear the legend?
if(args.legend_target)
if (args.legend_target) {
$(args.legend_target).html('');
}

//are we adding a background placeholder
if (args.show_missing_background) {
var data = [];
for (var x = 1; x <= 50; x++) {
data.push({'x': x, 'y': Math.random() - (x * 0.03)});
}

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

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

args.scalefns.xf = function(di) { return args.scales.X(di.x); };
args.scalefns.yf = function(di) { return args.scales.Y(di.y); };

var line = d3.svg.line()
.x(args.scalefns.xf)
.y(args.scalefns.yf)
.interpolate(args.interpolate);

var area = d3.svg.area()
.x(args.scalefns.xf)
.y0(args.scales.Y.range()[0])
.y1(args.scalefns.yf)
.interpolate(args.interpolate);

var g = svg.append('g')
.attr('class', 'mg-missing-pane');

g.append('path')
.attr('class', 'mg-main-line mg-line1-color')
.attr('d', line(data));

g.append('path')
.attr('class', 'mg-main-area mg-area1-color')
.attr('d', area(data));
}

// add missing text
svg.selectAll('.mg-missing-text').data([args.missing_text])
Expand Down
6 changes: 3 additions & 3 deletions dist/metricsgraphics.min.js
View file

Large diffs are not rendered by default.

4 changes: 0 additions & 4 deletions examples/css/metricsgraphics-demo-dark.css
View file
Expand Up @@ -158,10 +158,6 @@ li {
fill: #fff;
}

.mg-missing {
background-image: url(../images/missing-data-dark.png);
}

circle.mg-points-mono {
fill-opacity: 0.6;
stroke: #a89641;
Expand Down
7 changes: 0 additions & 7 deletions examples/css/metricsgraphics-demo.css
View file
Expand Up @@ -121,13 +121,6 @@ html {
width: 400px;
}

.mg-missing {
background-image: url(../images/missing-data.png);
background-repeat: no-repeat;
background-position: center center;
background-size: 90% 90%;
}

p {
font-family: 'PT Serif', serif;
font-size: 1.3rem;
Expand Down
Binary file removed examples/images/missing-data-dark.png
View file
Binary file not shown.
Binary file removed examples/images/missing-data.png
View file
Binary file not shown.
57 changes: 54 additions & 3 deletions src/js/charts/missing.js
View file
Expand Up @@ -11,17 +11,68 @@ charts.missing = function(args) {
.attr('width', args.width)
.attr('height', args.height);

var svg = d3.select(args.target).select('svg');

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

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

// delete child elements
d3.select(args.target).selectAll('svg *').remove();

var svg = d3.select(args.target).select('svg');

// add missing class
svg.classed('mg-missing', true);

// do we need to clear the legend?
if(args.legend_target)
if (args.legend_target) {
$(args.legend_target).html('');
}

//are we adding a background placeholder
if (args.show_missing_background) {
var data = [];
for (var x = 1; x <= 50; x++) {
data.push({'x': x, 'y': Math.random() - (x * 0.03)});
}

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

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

args.scalefns.xf = function(di) { return args.scales.X(di.x); };
args.scalefns.yf = function(di) { return args.scales.Y(di.y); };

var line = d3.svg.line()
.x(args.scalefns.xf)
.y(args.scalefns.yf)
.interpolate(args.interpolate);

var area = d3.svg.area()
.x(args.scalefns.xf)
.y0(args.scales.Y.range()[0])
.y1(args.scalefns.yf)
.interpolate(args.interpolate);

var g = svg.append('g')
.attr('class', 'mg-missing-pane');

g.append('path')
.attr('class', 'mg-main-line mg-line1-color')
.attr('d', line(data));

g.append('path')
.attr('class', 'mg-main-area mg-area1-color')
.attr('d', area(data));
}

// add missing text
svg.selectAll('.mg-missing-text').data([args.missing_text])
Expand Down
7 changes: 6 additions & 1 deletion src/js/common/data_graphic.js
View file
Expand Up @@ -127,10 +127,15 @@ MG.data_graphic = function() {
bottom: 0,
right: 0,
left: 0,
buffer: 8,
legend_target: '',
width: 350,
height: 220,
missing_text: 'Data currently missing or unavailable'
missing_text: 'Data currently missing or unavailable',
scalefns: {},
scales: {},
show_missing_background: true,
interpolate: 'cardinal'
};

var args = arguments[0];
Expand Down
2 changes: 2 additions & 0 deletions src/js/common/init.js
View file
Expand Up @@ -97,8 +97,10 @@ function init(args) {

// remove missing class
svg.classed('mg-missing', false);

// remove missing text
svg.selectAll('.mg-missing-text').remove();
svg.selectAll('.mg-missing-pane').remove();

//add chart title if it's different than existing one
chart_title(args);
Expand Down
48 changes: 48 additions & 0 deletions tests/charts/missing_test.js
View file
Expand Up @@ -12,3 +12,51 @@ test('Missing chart\'s text matches specified missing_text', function() {
params.missing_text,
'Missing chart\'s text matches missing_text');
});

test('Only one mg-missing-pane on multiple calls to the same target element', function() {
var params = {
target: '#qunit-fixture',
chart_type: 'missing-data',
missing_text: 'In an astral plane that was never meant to fly...'
};

MG.data_graphic(params);
MG.data_graphic(MG.clone(params));

equal(document.querySelectorAll(target + ' .mg-missing-pane').length, 1, 'We only have one mg-missing-pane');
});

test('Only one mg-missing-text on multiple calls to the same target element', function() {
var params = {
target: '#qunit-fixture',
chart_type: 'missing-data',
missing_text: 'In an astral plane that was never meant to fly...'
};

MG.data_graphic(params);
MG.data_graphic(MG.clone(params));

equal(document.querySelectorAll(target + ' .mg-missing-text').length, 1, 'We only have one mg-missing-text');
});

test('Missing chart\'s width is set correctly on subsequent calls to existing chart', function() {
var params_0 = {
target: '#qunit-fixture',
chart_type: 'missing-data',
missing_text: 'In an astral plane that was never meant to fly...'
};

var params = {
target: '#qunit-fixture',
chart_type: 'missing-data',
missing_text: 'In an astral plane that was never meant to fly...',
width: 200,
height: 100,
};

MG.data_graphic(params_0);
MG.data_graphic(params);

var width = document.querySelector(params.target + ' svg').offsetWidth;
ok(width == 200, 'SVG\'s width matches latest specified width');
});
2 changes: 1 addition & 1 deletion tests/common/init_test.js
View file
Expand Up @@ -19,7 +19,7 @@ test('Chart\'s width is set correctly on subsequent calls to existing chart', fu
MG.data_graphic(params);

var width = document.querySelector(params.target + ' svg').offsetWidth;
ok(width == params.width, 'SVG\'s width matches latest specified width');
ok(width == 200, 'SVG\'s width matches latest specified width');
});

test('Chart\'s height is set correctly on subsequent calls to existing chart', function() {
Expand Down

0 comments on commit af81b74

Please sign in to comment.