variables
To begin using variables in your dashboard, initialize the variables by returning an
object in the variables
prop. Each variable should have a value
key.
<Vizzly.Dashboard
variables={() => {
return {
exampleVariable: {
value: 'example value',
},
... return more variables
};
}}
// more dashboard props
/>
How Variables Work
Variables allow you to pass dynamic data to your dashboard. These variables can be referenced in the following features:
Custom Metrics
- Conditional
- Percentage
- Rules-based Grouping
General
- Goal Line
In future updates, variables will be extended to work in areas like View Titles, enhancing the customization capabilities of the dashboard.
Some ways that you can use variables are the following:
Using a users action outside the dashboard, you can transform data that is shown in a View.
Dynamically Update
Variables can be used in conjunction with Vizzly State. Using the .set()
method from Vizzly State, developers
can update variables dynamically and refresh the dashboard accordingly.
More about Vizzly State can be found here.
import Vizzly, { VizzlyState } from '@vizzly/dashboard';
<Fragment>
<button
onClick={() =>
VizzlyState.set('identifier-123', { variables: { exampleVariable: { value: 'new value' } } })
}
>
Change to "new value"
</button>
<Vizzly.Dashboard
id="identifier-123"
variables={() => {
return {
exampleVariable: {
value: 'example value',
},
};
}}
// ...
/>
</Fragment>
How to use a variable in the Dashboard
A defined variable can be set using the {{ ... }}
syntax.