diff --git a/js/main.js b/js/main.js index 08a9b6c083..df3681a661 100644 --- a/js/main.js +++ b/js/main.js @@ -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({ @@ -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(); diff --git a/js/metricsgraphics.js b/js/metricsgraphics.js index 5471bb66b9..1c9cefe4bb 100644 --- a/js/metricsgraphics.js +++ b/js/metricsgraphics.js @@ -2807,6 +2807,13 @@ 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; @@ -2814,15 +2821,11 @@ function data_table(args){ } 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(){ @@ -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; } @@ -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; @@ -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