Skip to content

Commit

Permalink
Implementing paired row chart
Browse files Browse the repository at this point in the history
  • Loading branch information
ruhley committed Jul 9, 2015
1 parent 217e294 commit 137213b
Show file tree
Hide file tree
Showing 9 changed files with 607 additions and 8 deletions.
1 change: 1 addition & 0 deletions Gruntfile.js
Original file line number Diff line number Diff line change
Expand Up @@ -398,6 +398,7 @@ module.exports.jsFiles = [
'src/geo-choropleth-chart.js',
'src/bubble-overlay.js',
'src/row-chart.js',
'src/paired-row-chart.js',
'src/legend.js',
'src/scatter-plot.js',
'src/number-display.js',
Expand Down
4 changes: 4 additions & 0 deletions dc.css
Original file line number Diff line number Diff line change
Expand Up @@ -315,3 +315,7 @@ div.dc-chart {
pointer-events: all;
cursor: pointer;
}

.dc-chart g.row text.titlerow {
fill: #000000;
}
34 changes: 34 additions & 0 deletions spec/helpers/fixtures.js
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,40 @@ function loadColorFixture2() {
"]");
}

function loadGenderFixture() {
return JSON.parse("[" +
"{\"gender\":\"Male\", \"age\": \"10\"}," +
"{\"gender\":\"Male\", \"age\": \"18\"}," +
"{\"gender\":\"Male\", \"age\": \"20\"}," +
"{\"gender\":\"Male\", \"age\": \"22\"}," +
"{\"gender\":\"Male\", \"age\": \"30\"}," +
"{\"gender\":\"Male\", \"age\": \"40\"}," +
"{\"gender\":\"Male\", \"age\": \"45\"}," +
"{\"gender\":\"Male\", \"age\": \"50\"}," +
"{\"gender\":\"Male\", \"age\": \"55\"}," +
"{\"gender\":\"Male\", \"age\": \"70\"}," +
"{\"gender\":\"Male\", \"age\": \"80\"}," +
"{\"gender\":\"Male\", \"age\": \"90\"}," +
"{\"gender\":\"Male\", \"age\": \"100\"}," +
"{\"gender\":\"Male\", \"age\": \"101\"}," +
"{\"gender\":\"Female\", \"age\": \"11\"}," +
"{\"gender\":\"Female\", \"age\": \"15\"}," +
"{\"gender\":\"Female\", \"age\": \"20\"}," +
"{\"gender\":\"Female\", \"age\": \"21\"}," +
"{\"gender\":\"Female\", \"age\": \"22\"}," +
"{\"gender\":\"Female\", \"age\": \"30\"}," +
"{\"gender\":\"Female\", \"age\": \"40\"}," +
"{\"gender\":\"Female\", \"age\": \"50\"}," +
"{\"gender\":\"Female\", \"age\": \"60\"}," +
"{\"gender\":\"Female\", \"age\": \"65\"}," +
"{\"gender\":\"Female\", \"age\": \"70\"}," +
"{\"gender\":\"Female\", \"age\": \"80\"}," +
"{\"gender\":\"Female\", \"age\": \"90\"}," +
"{\"gender\":\"Female\", \"age\": \"100\"}" +
"]");
}


function dateCleaner(e) {
e.dd = d3.time.format.iso.parse(e.date);
}
161 changes: 161 additions & 0 deletions spec/paired-row-chart-spec.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,161 @@
describe('dc.pairedRowChart', function() {
var id, chart;
var data, dimension, group, dummyGroup;

beforeEach(function () {
genderFixture = loadGenderFixture();
data = crossfilter(genderFixture);
dimension = data.dimension(function(d) {
var age_range = 'Unknown';

if (d.age <= 9) {
age_range = '0 - 9';
} else if (d.age <= 19) {
age_range = '10 - 19';
} else if (d.age <= 29) {
age_range = '20 - 29';
} else if (d.age <= 39) {
age_range = '30 - 39';
} else if (d.age <= 49) {
age_range = '40 - 49';
} else if (d.age <= 59) {
age_range = '50 - 59';
} else if (d.age <= 69) {
age_range = '60 - 69';
} else if (d.age <= 79) {
age_range = '70 - 79';
} else if (d.age <= 89) {
age_range = '80 - 89';
} else if (d.age <= 99) {
age_range = '90 - 99';
} else if (d.age >= 100) {
age_range = '100+';
}

return [d.gender, age_range];
}),
group = dimension.group().reduceCount();

dummyGroup = {
all: function() {
var ageRanges = ['0 - 9', '10 - 19', '20 - 29', '30 - 39', '40 - 49', '50 - 59', '60 - 69', '70 - 79', '80 - 89', '90 - 99', '100+'];

// convert to object so we can easily tell if a key exists
var values = {};
group.all().forEach(function(d) {
values[d.key[0] + '.' + d.key[1]] = d.value;
});

// convert back into an array for the chart, making sure that all ageRanges exist
var g = [];
ageRanges.forEach(function(age_range) {
g.push({
key: ['Male', age_range],
value: values['Male.' + age_range] || 0
});
g.push({
key: ['Female', age_range],
value: values['Female.' + age_range] || 0
});
});

return g;
}
};

id = 'paired-row-chart';
appendChartID(id);

chart = dc.pairedRowChart("#" + id);
chart.dimension(dimension)
.group(dummyGroup)
.width(600).height(200).gap(10)
.leftKeyFilter(function(d) {
return d.key[0] === 'Male';
})
.rightKeyFilter(function(d) {
return d.key[0] === 'Female';
})
.transitionDuration(0);
});

describe('leftChart', function () {
beforeEach(function () {
chart.render();
});

describe('useRightYAxis', function () {
it('should use right y axis', function () {
expect(chart.leftChart().useRightYAxis()).toBe(true);
});
});

describe('key filter', function () {
it('can get key filter', function () {
expect(typeof chart.leftKeyFilter()).toBe('function');
});

it('should filter data', function () {
expect(chart.leftChart().data().length < dummyGroup.all().length).toBe(true);
});
});

describe('margins', function () {
it('should manually set margins', function () {
var margins = chart.margins(),
leftMargins = chart.leftChart().margins();

expect(leftMargins.top).toBe(margins.top);
expect(leftMargins.right).toBe(0);
expect(leftMargins.bottom).toBe(margins.bottom);
expect(leftMargins.left).toBe(margins.left);
});
});

describe('calculateAxisScaleData', function() {
it('should equal the group data', function() {
expect(chart.leftChart().calculateAxisScaleData().length).toBe(dummyGroup.all().length);
})
});
});

describe('rightChart', function () {
beforeEach(function () {
chart.render();
});

describe('useRightYAxis', function () {
it('should not use right y axis', function () {
expect(chart.rightChart().useRightYAxis()).toBe(false);
});
});

describe('key filter', function () {
it('can get key filter', function () {
expect(typeof chart.rightKeyFilter()).toBe('function');
});

it('should filter data', function () {
expect(chart.rightChart().data().length < dummyGroup.all().length).toBe(true);
});
});

describe('margins', function () {
it('should manually set margins', function () {
var margins = chart.margins(),
rightMargins = chart.rightChart().margins();

expect(rightMargins.top).toBe(margins.top);
expect(rightMargins.right).toBe(margins.right);
expect(rightMargins.bottom).toBe(margins.bottom);
expect(rightMargins.left).toBe(0);
});
});

describe('calculateAxisScaleData', function() {
it('should equal the group data', function() {
expect(chart.rightChart().calculateAxisScaleData().length).toBe(dummyGroup.all().length);
})
});
});
});
Loading

0 comments on commit 137213b

Please sign in to comment.