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}
  />
)

• All viz create options here

CodeSandbox Example

• Demo