Parameters and Convenience Methods

Parameters

The WordPress shortcode allows for a params argument that can pass parameters to your interactive. This is useful in cases where a feature might display, say, the employment rate for a particular state over time, such that editors can use it in different articles for whichever state is relevant.

The format is like a URL parameter (interpreted with the PHP function parse_str under the hood.)

[time-interactive id=my_awesome_app_2021 params="data_element=employment&state=vermont"]

These parameters will be ingested into the the interactive object that you are passed in debug.js (see next section).

The interactive object:

By default, every project is provided an object called interactive that has a very small number of convenience methods:

• .el: The top-level DOM element of the app
• .width(): A function that, when invoked (e.g., interactive.width()) returns the width of the parent element at that time
• height: Same as above for the height
• params: Object with any key-value parameters from the WP shortcode (see above)
• is_touch_device: a boolean that tells you whether you're on a touch screen
• is_phone: Similar to above, useful if you need to know what sort of keypad you're dealing with

There are also a few extremely simple function that I use often enough to bake them in. If you find yourself copying and pasting innocuous functions repeatedly, send me a PR!

• commafy: Number to string with commas for numbers over 1,000.
• shuffle: Randomly reorder an array
• getRandom: Get a random element from an array (without removing it)
• guid: Generate a random uuidv4 unique identifier. Used mainly when we are (always very transparently) allowing users to optionally submit anonymous data to a DynamoDB database.

Next: Previewing and Deploying