@gjmcn/data-cube-print-html

0.2.0 • Public • Published

Print Data-Cubes in HTML documents.

See docs/index.html for examples.

The module adds two methods to Array.prototype:

  • print: print a cube (or a standard array)

  • info: print summary information about a cube (or a standard array)

These methods return a <div> containing the printed cube/array. Typically, we use the to option (see below) to specify where the array/cube should be printed; this is slightly simpler than adding the <div> to the document explicitly.

Notes:

  • The module exports a function that can be used to change how entries, indices, keys and labels are formatted — see Format. When a <script> tag is used to load the module, the exported function is assigned to the global variable setFormat. See the Data-Cube plugins page for further usage instructions.

  • There are example styles in docs/styles. Using one of these is an easy way to get started (though the styles are currently rather minimal so be wary of other CSS leaking in).

  • print will generate the same HTML for the standard array [5,6,7] and the vector [5,6,7].toCube(). However, print and info do not convert a standard array to a cube like core Data-Cube methods do.

Options Argument

print takes a single 'options' object as an argument. The object can include the properties:

Property Description
to falsy (default): returned <div> not added to documentstring: passed to document.querySelector; <div> appended to selected elementHTML element: <div> appended to elementproperty 0 an HTML element: <div> appended to element
label Array or singleton. The label of a dimension is printed if the corresponding entry is truthy (and the label exists). A singleton value is broadcast to all dimensions. Default: true.
indexKey Array or singleton. The indices/keys of a dimension are printed if the corresponding entry is truthy. A singleton value is broadcast to all dimensions. Default: row and column indices/keys are printed; page indices/keys are printed if there are multiple pages or there are page keys or there is a page label that is being printed.
type If truthy (default), <td>s representing entries have a class indicating their type.
entryAttr If truthy, <td>s representing entries have attributes data-row, data-col and data-page; the values are the entry indices/keys (keys are converted to strings, but not formatted). Default: false.
tableAttr If truthy, the <table> for each page has a data-table attribute with the page index/key as the value (keys are converted to strings, but not formatted). Default: false.
id id attribute for the returned <div>. Default: no id.

The info method also accepts an options argument, but only uses the properties to and id.

Classes

print adds the following classes to the HTML elements that it creates:

Class Tag Description
data-cube-wrap <div> <div> returned by print and info
page-table <table> page
page-caption <caption> page caption
top-left <td> empty element in top-left of page table
label <td> or <span> label
row-label <td> row label
col-label <td> column label
page-label <span> page label (inside page caption)
ik <td> or <span> index/key
row-ik <td> row index/key
col-ik <td> column index/key
page-ik <span> page index/key (inside page caption)
entry <td> entry

When the type option is truthy, each entry <td> contains an additional class; one of: number, string, boolean, undefined, null, date, function, cube, array, other.

Notes:

  • Some table elements may not exist. For example, if row indices/keys are not being printed (see the indexKey option), the HTML tables for each page will not contain the associated <td> elements.

  • Use data attributes to get the <td> element for an individual entry or a group of entries — see the entryAttr and tableAttr options.

The <div> returned by info also has the data-cube-wrap class. The <table> inside the <div> has the info-table class.

Format

Every printed entry, index, key and label is passed through a 'format function'. This module exports a single function that can be used to alter the default format functions. For example:

//if the module is loaded in a <script> tag, the
//exported function is the global variable setFormat
setFormat({
  number: x => '$' + Math.round(x),        //print numbers as dollars
  rowLabel: label => label.toUpperCase()   //print row labels in uppercase
});

The format functions are:

Group Format Functions
Entry number, string, boolean, undefined, null, function, cube, array, date, other
Index rowIndex, colIndex, pageIndex
Key rowKey, colKey, pageKey
Label rowLabel, colLabel, pageLabel

Notes:

  • The default format functions do not escape HTML strings.

  • The default string format function does replace \n with <br>.

There are also some high-level formatting properties that can be modified using the exported function:

Name Default Description
maxPrint 2000 print does not print arrays/cubes with more than maxPrint entries; info is automatically called instead.
maxStr 40 The default string format function truncates string entries to maxStr characters. Ellipses are added where truncation is required.
maxMag 1e6 The default number format function uses scientific notation for entries with absolute value equal to or greater than maxMag.
dp 4 The default number format function uses dp decimal places for non-integers and uses scientific notation for entries with absolute value less than 10-dp.

Call the exported function with no arguments to reset all format functions and properties to their defaults.

Readme

Keywords

none

Package Sidebar

Install

npm i @gjmcn/data-cube-print-html

Weekly Downloads

2

Version

0.2.0

License

MIT

Unpacked Size

32.4 kB

Total Files

11

Last publish

Collaborators

  • gjmcn