Print Data-Cubes in HTML documents.
See falsy (default): returned string: passed to HTML element: property
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)
<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 variablesetFormat
. 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
andinfo
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
|<div>
not added to documentdocument.querySelector
; <div>
appended to selected element<div>
appended to element0
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 theentryAttr
andtableAttr
options.
<div>
returned by info
also has the data-cube-wrap
class. The <table>
inside the <div>
has the info-table
class.