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
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
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
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
If you have an error in the transactions/query it looks like this:
System Time
You can set system time on a transaction like so:
Multiple Transactions
It can be useful to include multiple “batches” of transactions. Particularly for showing of valid time & system time:
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
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
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
Inputs set variables in the template using their name property.
Limit:
See Available Inputs for a showcase.
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
Please note that the fiddle expects exactly one query:
The query is always run last:
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
Checkbox
A wrapper around the checkbox input.
Range
You can provide a min, max, step and value to specify a range.
Can be a float or integer.
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:
Text
A textbox element that allows the user to type in whatever they like:
Available Outputs
Table
The same table used in the Xtplay. Added by default if no output is provided.
Vega
Displays a vega chart. You can specify a chart spec using the spec arg.
Data is provided through a dataset named table.