Skip to content

3.2 Column operations

Jump to bottom Edit New page
koalyptus edited this page Mar 25, 2017 · 10 revisions

This extension allows TableFilter to perform calculations on a column basis. Those are the operations that are currently possible:

  • sum
  • mean
  • median
  • min
  • max
  • lower quartile
  • upper quartile

To get the colOps extension instance:

var colOps = tf.extension('colOps');
where tf is an instance of TableFilter.
Property Type Description Remarks Example
name string

name of the extension, it should match the name of the directory and of the file, in this case 'colOps'.

this extension can perform the following calculations on a specified column:
  • sum
  • mean
  • median
  • min
  • max
  • lower quartile
  • upper quartile
 Special credit to Nuovella Williams for optimising the calculations and adding the "median", "lower quartile" and "upper quartile" calculations. var tfConfig = { extensions: [{ name: 'colOps' }] };
id array list of the ids of elements displaying the calculation results. 
var tfConfig = { 
    extensions: [{ 
        name: 'colOps',
        id: ['col2Total', 'col4Mean']
    }]
};
col array collection of column indexes on which calculations will be performed. 
var tfConfig = { 
    extensions: [{ 
        name: 'colOps',
        id: ['col2Total', 'col4Mean'],
        col: [2, 4]
    }]
};
operation array list of the type of calculation per column, possible values: 'sum', 'mean', 'min', 'max', 'median', 'q1', 'q3' 
var tfConfig = { 
    extensions: [{ 
        name: 'colOps',
        id: ['col2Total', 'col4Mean'],
        col: [2, 4],
        operation: ['sum', 'mean']
    }]
};
write_method array list instructing the extension how to write the calculation result, possible values: 'innerHTML', 'setValue', 'createTextNode' (default - 'innerHTML') 
var tfConfig = { 
    extensions: [{ 
        name: 'colOps',
        id: ['col2Total', 'col4Mean'],
        col: [2, 4],
        operation: ['sum', 'mean'],
        write_method: ['innerHTML', 'setValue']
    }]
};
format_result array list of format objects used for formatting operation results refer to https://github.com/componitable/format-number to check the configuration options. By default, `ColOps` will match the current number format in terms of thousands and decimal separators based on the column type, (`number` or `formatted-number`) 
var tfConfig = { 
    extensions: [{ 
        name: 'colOps',
        id: ['col2Total', 'col4Mean'],
        col: [2, 4],
        operation: ['sum', 'mean'],
        write_method: ['innerHTML', 'setValue'],
        format_result: [{ prefix: '$' }, { suffix: '/unit' }]
    }]
};
exclude_row array collection of row indexes from be excluded from the calculation 
var tfConfig = { 
    extensions: [{ 
        name: 'colOps',
        id: ['col2Total', 'col4Mean'],
        col: [2, 4],
        operation: ['sum', 'mean'],
        write_method: ['innerHTML', 'setValue']
        exclude_row: [7, 18]
    }]
};
decimal_precision function the decimal precision to be applied on the calculation result per column 
var tfConfig = { 
    extensions: [{ 
        name: 'colOps',
        id: ['col2Total', 'col4Mean'],
        col: [2, 4],
        operation: ['sum', 'mean'],
        write_method: ['innerHTML', 'setValue']
        exclude_row: [7, 18],
        decimal_precision: [2, 1]
    }]
};
on_before_operation function callback fired before the column calculations are performed (default - null)

1 parameter:

  • o is the current TableFilter instance
 
var tfConfig = { 
    extensions: [{ 
        name: 'colOps',
        id: ['col2Total', 'col4Mean'],
        col: [2, 4],
        operation: ['sum', 'mean'],
        write_method: ['innerHTML', 'setValue']
        exclude_row: [7, 18],
        decimal_precision: [2, 1],
        on_before_operation: function(o){
            console.log(o.getExtension('colOps'));
        }
    }]
};
on_after_operation function callback fired after the column calculations are performed (default - null)

1 parameter:

  • o is the current TableFilter instance
 
var tfConfig = { 
    extensions: [{ 
        name: 'colOps',
        id: ['col2Total', 'col4Mean'],
        col: [2, 4],
        operation: ['sum', 'mean'],
        write_method: ['innerHTML', 'setValue']
        exclude_row: [7, 18],
        decimal_precision: [2, 1],
        on_after_operation: function(o){
            console.log(o.getExtension('colOps'));
        }
    }]
};

Assuming TableFilter is already instanciated:

var tf = new TableFilter('my-table-id');
Event Description Remarks Example
before-column-calc Event emitted just before a column values calculation is performed Subscribers receive the following parameters:
  • tf - current TableFilter instance
  • colOps - current ColOps instance
  • colIndex - index of the working column
  • values - list of current filtered values
  • operation - operation performed ('sum', 'mean', 'min', 'max', 'median', 'q1', 'q3')
  • precision - decimal precision applied to the result
 
	tf.emitter.on(['before-column-calc'], function(tf, colOps, colIndex, values, operation, precision) { 
	  console.log(tf, colOps, colIndex, values, operation, precision);
	});
column-calc Event emitted after a calculation is performed Subscribers receive the following parameters:
  • tf - current TableFilter instance
  • colOps - current ColOps instance
  • colIndex - index of the working column
  • result - operation raw result (without precision applied)
  • operation - operation performed ('sum', 'mean', 'min', 'max', 'median', 'q1', 'q3')
  • precision - decimal precision applied to the result
 
	tf.emitter.on(['column-calc'], function(tf, colOps, colIndex, result, operation, precision) { 
	  console.log(tf, colOps, colIndex, result, operation, precision);
	});

Website | Examples | Es6 documentation

Clone this wiki locally