Skip to content

Commit

Permalink
implemented all the main formatting options for w3c#180. Still a bit …
Browse files Browse the repository at this point in the history 
…of simplifying / more work to be done, so this API may break before we ship v1.1.
  • Loading branch information
@hamilton
hamilton committed Nov 21, 2014
1 parent 1dbba50 commit bb6c41d
Show file tree
Hide file tree
Showing 4 changed files with 112 additions and 40 deletions.
19 changes: 11 additions & 8 deletions js/main.js
View file
Expand Up @@ -855,11 +855,11 @@ $(document).ready(function() {

// data tables
var table_data = [
{'year': 1852,'value1': 10.2, 'value2': 1004.43, 'geo': 'United Kingdom', 'description': "Having a way of describing a row can be useful."},
{'year': 1901,'value1': 10.1, 'value2': 543.23, 'geo': 'United States', 'description': "Here is some text about the United States. These made-up numbers."},
{'year': 1732,'value1': 4.3, 'value2': 14.92, 'geo': 'France', 'description': "France has small numbers."},
{'year': 1945,'value1': 2.9, 'value2': 243.11, 'geo': 'Brazil', 'description': "Brazil, Brazil."},
{'year': 1910,'value1': 1.0, 'value2': 5432.3, 'geo': 'India', 'description': "Last description in the whole thing."}
{'year': 1852,'value1': 10.2, 'value2': 1030004.43423,'share':.12, 'total':3403400, 'temp': 43, 'geo': 'United Kingdom', 'description': "Having a way of describing a row can be useful."},
{'year': 1901,'value1': 10.1, 'value2': 54003.223, 'share':.11, 'total':43002100, 'temp': 55, 'geo': 'United States', 'description': "More made-up numbers."},
{'year': 1732,'value1': 4.3, 'value2': 1004.91422, 'share':.14, 'total':4300240, 'temp': 42, 'geo': 'France', 'description': "We didn't specify a title for this column."},
{'year': 1945,'value1': 2.9, 'value2': 2430.121, 'share':.23, 'total':2400000, 'temp': 54, 'geo': 'Brazil', 'description': "Brazil, Brazil."},
{'year': 1910,'value1': 1.0, 'value2': 5432.3, 'share':.19, 'total':130000, 'temp': 52, 'geo': 'India', 'description': "Last description in the whole thing."}
]

var table1 = new data_table({
Expand All @@ -868,9 +868,12 @@ $(document).ready(function() {
description: 'A table has many of the same properties as a data_graphic.'
})
.target('#table1')
.title( {accessor: 'geo', secondary_accessor:'year', label: 'country'})
.number({accessor: 'value1', label: 'size'})
.number({accessor: 'value2', label: 'score'})
.title( {accessor: 'geo', secondary_accessor:'year', label: 'Country'})
.number({accessor: 'value1', label: 'Size', value_formatter:function(d){return d+' yrds'}})
.number({accessor: 'value2', label: 'Score', round:2})
.number({accessor: 'temp', label: 'Temp.', format:'temperature', width:100})
.number({accessor: 'total', label: 'Volume', format:'count', currency:'$', width:100})
.number({accessor: 'share', label: 'Share', format:'percentage', width:100})
.text({accessor: 'description', width:240})
.display();

Expand Down
59 changes: 46 additions & 13 deletions js/metricsgraphics.js
View file
Expand Up @@ -2807,22 +2807,25 @@ function data_table(args){
this.args.standard_col = {width:150, font_size:12};
this.args.columns = [];

this._add_column = function(_args, arg_type){
var standard_column = this.args.standard_col;
var args = merge_with_defaults(clone(_args), clone(standard_column));
args.type=arg_type;
this.args.columns.push(args);
}

this.target = function(){
var target = arguments[0];
this.args.target = target;
return this;
}

this.title = function(){
var args = merge_with_defaults(clone(arguments[0]), clone(this.args.standard_col));
args.type='title';
this.args.columns.push(args);
this._add_column(arguments[0], 'title');
return this;
}
this.text = function(){
var args = merge_with_defaults(clone(arguments[0]), clone(this.args.standard_col));
args.type='text';
this.args.columns.push(args);
this._add_column(arguments[0], 'text');
return this;
}
this.bullet = function(){
Expand All @@ -2845,9 +2848,7 @@ function data_table(args){
return this;
}
this.number = function(){
var args = merge_with_defaults(clone(arguments[0]), clone(this.args.standard_col));
args.type='number';
this.args.columns.push(args);
this._add_column(arguments[0], 'number');
return this;
}

Expand All @@ -2863,6 +2864,7 @@ function data_table(args){
var thead = table.append('thead').classed('data-table-thead', true);
var tbody = table.append('tbody');

var this_column;
var tr, th, td_accessor, td_type, th_text, td_text, td;
var col;

Expand All @@ -2877,10 +2879,8 @@ function data_table(args){
.style('width', this_col.width)
.style('text-align', td_type=='title' ? 'left' : 'right')
.text(th_text);

}


for (var h=0;h<args.columns.length;h++){
col = colgroup.append('col');
if (args.columns[h].type=='number'){
Expand All @@ -2891,9 +2891,42 @@ function data_table(args){
for (var i=0;i<args.data.length;i++){
tr = tbody.append('tr');
for (var j=0;j<args.columns.length;j++){
td_accessor = args.columns[j].accessor;
this_column = args.columns[j];
td_accessor = this_column.accessor;
td_text = args.data[i][td_accessor];
td_type = args.columns[j].type;
td_type = this_column.type;

if (td_type=='number'){
//td_text may need to be rounded.
if (this_column.hasOwnProperty('round') && !this_column.hasOwnProperty('format')){
// round according to the number value in this_column.round.
//td_text = d3.round(td_text, this_column.round);
td_text = d3.format('0,.'+this_column.round+'f')(td_text);
}
if (this_column.hasOwnProperty('value_formatter')){
// provide a function that formats the text according to the function this_column.format.
td_text = this_column.value_formatter(td_text);

} if (this_column.hasOwnProperty('format')){
// this is a shorthand for percentage formatting, and others if need be.
// supported: 'percentage', 'count', 'temperature'

if (this_column.round) td_text = d3.round(td_text, this_column.round);
var this_format = this_column.format;
var formatter;

if (this_format=='percentage') formatter = d3.format('%p');
if (this_format=='count') formatter = d3.format("0,000");
if (this_format=='temperature') formatter = function(t){return t +'º'};

td_text = formatter(td_text);

} if (this_column.hasOwnProperty('currency')){
// this is another shorthand for formatting according to a currency amount, which gets appended to front of number.
td_text = this_column.currency + td_text;
}
}

td = tr.append('td')
.classed('data-table', true)
.classed('table-number', td_type=='number')
Expand Down
15 changes: 9 additions & 6 deletions js/metricsgraphics.min.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

59 changes: 46 additions & 13 deletions src/charts/table.js
View file
Expand Up @@ -20,22 +20,25 @@ function data_table(args){
this.args.standard_col = {width:150, font_size:12};
this.args.columns = [];

this._add_column = function(_args, arg_type){
var standard_column = this.args.standard_col;
var args = merge_with_defaults(clone(_args), clone(standard_column));
args.type=arg_type;
this.args.columns.push(args);
}

this.target = function(){
var target = arguments[0];
this.args.target = target;
return this;
}

this.title = function(){
var args = merge_with_defaults(clone(arguments[0]), clone(this.args.standard_col));
args.type='title';
this.args.columns.push(args);
this._add_column(arguments[0], 'title');
return this;
}
this.text = function(){
var args = merge_with_defaults(clone(arguments[0]), clone(this.args.standard_col));
args.type='text';
this.args.columns.push(args);
this._add_column(arguments[0], 'text');
return this;
}
this.bullet = function(){
Expand All @@ -58,9 +61,7 @@ function data_table(args){
return this;
}
this.number = function(){
var args = merge_with_defaults(clone(arguments[0]), clone(this.args.standard_col));
args.type='number';
this.args.columns.push(args);
this._add_column(arguments[0], 'number');
return this;
}

Expand All @@ -76,6 +77,7 @@ function data_table(args){
var thead = table.append('thead').classed('data-table-thead', true);
var tbody = table.append('tbody');

var this_column;
var tr, th, td_accessor, td_type, th_text, td_text, td;
var col;

Expand All @@ -90,10 +92,8 @@ function data_table(args){
.style('width', this_col.width)
.style('text-align', td_type=='title' ? 'left' : 'right')
.text(th_text);

}


for (var h=0;h<args.columns.length;h++){
col = colgroup.append('col');
if (args.columns[h].type=='number'){
Expand All @@ -104,9 +104,42 @@ function data_table(args){
for (var i=0;i<args.data.length;i++){
tr = tbody.append('tr');
for (var j=0;j<args.columns.length;j++){
td_accessor = args.columns[j].accessor;
this_column = args.columns[j];
td_accessor = this_column.accessor;
td_text = args.data[i][td_accessor];
td_type = args.columns[j].type;
td_type = this_column.type;

if (td_type=='number'){
//td_text may need to be rounded.
if (this_column.hasOwnProperty('round') && !this_column.hasOwnProperty('format')){
// round according to the number value in this_column.round.
//td_text = d3.round(td_text, this_column.round);
td_text = d3.format('0,.'+this_column.round+'f')(td_text);
}
if (this_column.hasOwnProperty('value_formatter')){
// provide a function that formats the text according to the function this_column.format.
td_text = this_column.value_formatter(td_text);

} if (this_column.hasOwnProperty('format')){
// this is a shorthand for percentage formatting, and others if need be.
// supported: 'percentage', 'count', 'temperature'

if (this_column.round) td_text = d3.round(td_text, this_column.round);
var this_format = this_column.format;
var formatter;

if (this_format=='percentage') formatter = d3.format('%p');
if (this_format=='count') formatter = d3.format("0,000");
if (this_format=='temperature') formatter = function(t){return t +'º'};

td_text = formatter(td_text);

} if (this_column.hasOwnProperty('currency')){
// this is another shorthand for formatting according to a currency amount, which gets appended to front of number.
td_text = this_column.currency + td_text;
}
}

td = tr.append('td')
.classed('data-table', true)
.classed('table-number', td_type=='number')
Expand Down

0 comments on commit bb6c41d

Please sign in to comment.