As a result embeddeable content can be highly varied and creative. The platform truly shines when users with valuable domain knowledge are empowered to build complex and interactive visualizations that would otherwise be beyond their reach if it required experience with visualization packages for languages such as Python, R, or JavaScript.
Tableau Reference
How to easily embed Tableau data visualizations
2021-04-17
Tableau is likely the most customizable platform for building data visualizations that does not require programming (except for calculations). Content is created by connecting Tableau Desktop to databases or files containing data. This content is then hosted on a Tableau Server.
As a result, Greenlight seeks to make the embedding process as straightforward as possible. Although important implementation details such as sizing and layouts can be addressed by the Tableau developer, this component aims to solve those issues out of the box. Users are always welcome to modify their workbooks to fit an embedded usecase, however we wouldn't want a potential disconnect between dashboard and site developers to slowdown the delivery of content.
In other words, you should be able to plug and go.
The first example demonstrates the component's default behavior.
The only prop that is required is either a single URL (string) or multiple URLs in the form of an array.
To clarify, the following are examples of string and arrays in JavaScript:
// this is a string
singleURL = "https://{YOUR-VIZ-URL}";
// this is an array
arrayOfURLs = [
"https://{YOUR-VIZ-URL-#1}",
"https://{YOUR-VIZ-URL-#2}",
"https://{YOUR-VIZ-URL-#3}",
];Basic Usage
Notice that this example only declares an array of URLs. By default the buttons available on the toolbar are styled using the primary colors of your website's theme. They are also rounded and outlined. You can learn more at Bulma's documentation for buttons. By default, all buttons and capabilities provided by the toolbar are made available.
<Tableau
viz={[
{
url: "https://public.tableau.com/views/Greenlight/GreenlightProfitDashboard",
layout: {
desktop: {width: 1000, height: 1052},
tablet: {width: 800, height: 795},
phone: {width: undefined, height: undefined},
},
}
]}
/>The toolbar can be removed entirely by setting this prop to false in the component:
customToolbar={false}Props
Here is a list of props that can customize the Tableau component:
| Prop | Type | Description | Values |
|---|---|---|---|
| viz | string or array | obtained from the share link on a viz | URL |
| customToolbar | boolean | controls toolbar visibility, default is true | true or false |
| toolbarOptions | object | object for customizing the toolbar | described below |
toolbarOptions
The toolbarOptions prop is the most complex, however every option has safe defaults in case you miss declaring any of them.
| Option | Type | Description | Values |
|---|---|---|---|
| buttons | array | lists buttons added to the toolbar, default shows all of them. Empty arrays removes them | undo, redo, reset, refresh, details, share |
| color | string | sets the color scheme for buttons, default uses the primary site color | primary, warning, info, success, danger, link |
| outline | boolean | sets the type of button, default is true | true or false |
| rounded | boolean | sets the border type for buttons, default is true | true or false |
| downloads | array | lists download options, default shows all of them. Empty arrays removes them | pdf, image, data, crosstab, powerpoint, workbook |
Here are a few different styles of custom toolbars, remember that by default the toolbars will use the primary color set for your website. You will never need to add a custom toolbar component on it's as this is just a demonstration:
Warning Style
// 'warning' color without outlines and not rounded
// shows a subset of buttons and download options
// only has one viz URL, no navigation required
<VizToolbar
toolbarOptions={{
color: 'warning',
outline: false,
rounded: false,
buttons: [
'undo',
'redo',
'reset',
'share'
],
downloads: [
'pdf',
'image',
'powerpoint'
],
}}
loaded={true}
vizArray={true}
vizIndex={0}
vizUrl='one-single-viz'
handleVizIndex={()=>{}}
/>Danger Style
// 'danger' color and not rounded
// shows a subset of buttons and download options
// has two vizzes which allows for navigation
<VizToolbar
toolbarOptions={{
color: 'danger',
rounded: false,
buttons: [
'refresh',
'details',
'share',
],
downloads: [
'data',
'crosstab',
'workbook'
],
}}
loaded={true}
vizArray={true}
vizIndex={0}
vizUrl={['first-viz','second-viz']}
handleVizIndex={()=>{}}
/>Note:
The "loaded" prop is an internal mechanism of the toolbar. Enabling interaction only once a viz has been loaded. It has been added here in order to demonstrate button styles and will not be required for users to define.
The "vizArray" prop is an internal mechanism of the toolbar. Navigation buttons are displayed automatically whenever this prop is set to true, however this is handled automatically by the component and will not be required for users to define.
The "loaded" prop is an internal mechanism of the toolbar. Enabling interaction only once a viz has been loaded. It has been added here in order to demonstrate button styles and will not be required for users to define.
The "vizArray" prop is an internal mechanism of the toolbar. Navigation buttons are displayed automatically whenever this prop is set to true, however this is handled automatically by the component and will not be required for users to define.
Custom Usage
This example demonstrates the usage of each of the props available for the Tableau component.
Notice the changes in available buttons and download options, as well as colors, borders and overall styling.
<Tableau
viz={[
{
url: "https://public.tableau.com/views/OilGasProduction_16207892650600/AssetProductionReport",
layout: {
desktop: {width: 1000, height: 1727},
tablet: {width: 800, height: 1727},
phone: {width: undefined, height: undefined},
},
}
]}
customToolbar={true}
toolbarOptions={{
buttons: [
'undo',
'redo',
'reset',
'share'
],
color: 'warning',
outline: false,
rounded: false,
downloads: [
'pdf',
'image',
'powerpoint'
],
}}
/>