Skip to content

Commit

Permalink
adds a few new features toward solving w3c#180 - formatting can be bo…
Browse files Browse the repository at this point in the history 
…th value and function based, all cells are appropriately classed.
  • Loading branch information
@hamilton
hamilton committed Nov 25, 2014
1 parent 357e2ca commit 73ef924
Show file tree
Hide file tree
Showing 4 changed files with 50 additions and 22 deletions.
1 change: 0 additions & 1 deletion css/metricsgraphics.css
View file
Expand Up @@ -333,7 +333,6 @@ td.data-table {
}

td.table-text {
font-style: italic;
opacity: 0.8;
padding-left: 30px;
}
21 changes: 14 additions & 7 deletions js/main.js
View file
Expand Up @@ -871,10 +871,10 @@ $(document).ready(function() {

// data tables
var table_data = [
{'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': 1852,'value1': 10.2, 'value2': 1030004.43423,'share':.12, 'total':34003400, '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':4302100, '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': 1945,'value1': 2.9, 'value2': 2430.121, 'share':.23, 'total':24000000, '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."}
]

Expand All @@ -886,11 +886,18 @@ $(document).ready(function() {
.target('#table1')
.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: 'value2', label: 'Score', round:2, font_weight: 'bold'})
.number({accessor: 'temp', label: 'Temp.', format:'temperature', width:100, color: 'gray'})
.number({
accessor: 'total',
label: 'Volume',
format:'count', currency:'$',
width:100,
font_weight: function(d){return d < 5000000 ? 'bold' : '300'},
color: function(d){return d < 5000000 ? '#b20000' : 'black'}
})
.number({accessor: 'share', label: 'Share', format:'percentage', width:100})
.text({accessor: 'description', width:240})
.text({accessor: 'description', width:240, font_style: 'italic'})
.display();

//add this scatterplot and color the groups based on the theme
Expand Down
42 changes: 32 additions & 10 deletions src/charts/table.js
View file
Expand Up @@ -17,8 +17,27 @@ var table = New data_table(data)
function data_table(args){
'use strict';
this.args = args;
this.args.standard_col = {width:150, font_size:12};
this.args.standard_col = {width:150, font_size:12, font_weight:'normal'};
this.args.columns = [];
this.formatting_options = [['color', 'color'], ['font-weight', 'font_weight'], ['font-style', 'font_style'], ['font-size', 'font_size']];

this._strip_punctuation = function(s){
var punctuationless = s.replace(/[^a-zA-Z0-9 _]+/g, '');
var finalString = punctuationless.replace(/ +?/g, "");
return finalString;
}

this._format_element = function(element, value, args){
this.formatting_options.forEach(function(fo){
var attr = fo[0];
var key = fo[1];
if (args[key]) element.style(attr,
typeof args[key] == 'string' ||
typeof args[key] == 'number' ?
args[key] : args[key](value));
});

}

this._add_column = function(_args, arg_type){
var standard_column = this.args.standard_col;
Expand Down Expand Up @@ -66,6 +85,7 @@ function data_table(args){
}

this.display = function(){

var this_column;
var args = this.args;

Expand All @@ -77,8 +97,8 @@ 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 this_column, this_title;
var tr, th, td_accessor, td_type, td_value, th_text, td_text, td;
var col;

tr = thead.append('tr').classed('header-row', true);
Expand Down Expand Up @@ -106,7 +126,7 @@ function data_table(args){
for (var j=0;j<args.columns.length;j++){
this_column = args.columns[j];
td_accessor = this_column.accessor;
td_text = args.data[i][td_accessor];
td_value = td_text = args.data[i][td_accessor];
td_type = this_column.type;

if (td_type=='number'){
Expand Down Expand Up @@ -142,15 +162,17 @@ function data_table(args){

td = tr.append('td')
.classed('data-table', true)
.classed('table-number', td_type=='number')
.classed('table-title', td_type=='type')
.classed('table-text', td_type=='text')
.style('width', args.columns[j].width)
.style('font-size', args.columns[j].font_size)
.classed('table-' + td_type, true)
.classed('table-' + td_type + '-' + this._strip_punctuation(td_accessor), true)
.attr('data-value', td_value)
.style('width', this_column.width)
.style('text-align', td_type=='title' || td_type=='text' ? 'left' : 'right');

this._format_element(td, td_value, this_column);

if (td_type=='title'){
td.append('div').text(td_text);
this_title = td.append('div').text(td_text);
this._format_element(this_title, td_text, this_column);
if (args.columns[j].hasOwnProperty('secondary_accessor')){
td.append('div')
.text(args.data[i][args.columns[j].secondary_accessor])
Expand Down
8 changes: 4 additions & 4 deletions src/layout/button.js
View file
Expand Up @@ -9,10 +9,10 @@ var button_layout = function(target) {
this.manual_callback = {};

this._strip_punctuation = function(s){
var punctuationless = s.replace(/[^a-zA-Z0-9 _]+/g, '');
var finalString = punctuationless.replace(/ +?/g, "");
return finalString;
}
var punctuationless = s.replace(/[^a-zA-Z0-9 _]+/g, '');
var finalString = punctuationless.replace(/ +?/g, "");
return finalString;
}

this.data = function(data) {
this._data = data;
Expand Down

0 comments on commit 73ef924

Please sign in to comment.