0.0.5 • Published 4 years ago
react-tableau-view v0.0.5
react-tableau-view
Tableau view integrated with react and tableau's javascript API
Install
Using npm:
npm i --save react-tableau-view
Using yarn:
yarn add react-tableau-view
Importing
import TableauView from 'react-tableau-view'; // ES6
var TableauView = require('react-tableau-view'); // ES5 with npm
Usage
import TableauView from 'react-tableau-view';
const YourComponent = props => (
<TableauView
url="https://your-tableau-server/views/your-workbook/your-view"
ticket="<TABLEAU TRUSTED TICKET>"
/>
)
Note: Navigate to your visualization on Tableau Server and then edit the URL from this
https://your-tableau-server/#/views/your-workbook/your-view
To
https://your-tableau-server/views/your-workbook/your-view
props
// Viz Create Options
const options = {
height: '100%',
width: "100%",
hideTabs: false,
hideToolbar: false,
...otherOptions,
};
// Apply normal filters to display a subset of the data available for a view
const filters = {
"Region": ["Asia", "Europe"],
"YEAR(Date)": [2009],
};
// Apply hierarchical filters to display a subset of the data available for a view
const hierarchicalFilters = {
"[Product].[Product Categories].[Product Name]": [
"Accessories.Bike Racks.Hitch Rack - 4-Bike",
"Accessories.Bike Stands.All-Purpose Bike Stand"
],
};
// Apply range filters to display a subset of the data available for a view
const rangeFilters = {
"Date": {
min: new Date(Date.UTC(2010, 3, 1)),
max: new Date(Date.UTC(2010, 12, 31))
});
};
const YourComponent = props => (
<TableauView
url="https://your-tableau-server/views/your-workbook/your-view"
ticket="<TABLEAU TRUSTED TICKET>"
options={options}
filters={filters}
hierarchicalFilters={hierarchicalFilters}
rangeFilters={rangeFilters}
/>
)