Xtplay Demo
Allows you to embed a miniature instance of xt-fiddle in the docs, with a couple added features as a bonus!
Basic Usage
Section titled “Basic Usage”You can add an Xtplay to the page with pre-set transactions & query like so:
If you want to preserve whitespace you can do this:
Hide editors
Section titled “Hide editors”Sometimes you just want to show of the query, you can hide the transactions like so:
You can do the same with the query of course:
AutoLoad
Section titled “AutoLoad”You can tell Xtplay to load it’s results on page load by using the autoLoad property:
This is particularly useful for Templated Queries as we’ll see below.
Errors
Section titled “Errors”If you have an error in the transactions/query it looks like this:
System Time
Section titled “System Time”You can set system time on a transaction like so:
Multiple Transactions
Section titled “Multiple Transactions”It can be useful to include multiple “batches” of transactions. Particularly for showing of valid time & system time:
Lone Transaction
Section titled “Lone Transaction”If you have a transaction on it’s own then it won’t be rendered with an editor:
(It will still contribute to magicContext if you set one).
It will also render without an editor if you use a Templated Query.
Magic Context
Section titled “Magic Context”While of course you can use hidden Txs to include transactions previously executed on the page but that can get tedious.
Instead you can tell the component to look at transactions from previous fiddles on the page. Note that it will only look for transactions from fiddles with the same context id string set.
For example:
Note that it we only have docs from this fiddle.
Note that now we have the transactions from the previous fiddle :)
This fiddle uses a different context id, so it will not use the context of previous fiddles:
Templated Queries
Section titled “Templated Queries”Having a full editor and asking a user to change it can be a lot. Instead you can use a query template:
Query templates use mustache templates.
Use Inputs to set the state used to render the template.
It usually makes sense to set the autoLoad property when you have a query template.
Inputs
Section titled “Inputs”Inputs set variables in the template using their name property.
Limit:
See Available Inputs for a showcase.
Outputs
Section titled “Outputs”By default, if no outputs are added a table output is automatically appended to the fiddle.
You can override this by adding your own:
You can also have multiple if you want:
See Available Outputs for a showcase.
Caveats
Section titled “Caveats”Please note that the fiddle expects exactly one query:
The query is always run last:
Styling Tips
Section titled “Styling Tips”As you’ll have seen in the examples above, you can use tailwind to style the inputs.
This is handy for:
Putting a label beside an input:
My checkbox:
Styling the input itself:
Organising inputs:
Search:
Available Inputs
Section titled “Available Inputs”Checkbox
Section titled “Checkbox”A wrapper around the checkbox input.
You can provide a min, max, step and value to specify a range.
Can be a float or integer.
DateRange
Section titled “DateRange”A customised range input specifically for outputting dates with two varieties:
You can provide a start, stop and step amount to have a full range of dates:
Or you can provide an array of dates:
A textbox element that allows the user to type in whatever they like:
Available Outputs
Section titled “Available Outputs”The same table used in the Xtplay. Added by default if no output is provided.
Displays a vega chart. You can specify a chart spec using the spec arg.
Data is provided through a dataset named table.