tableau-react-internal

Tableau react js engine based in Cooper beta using 2.0.3 (hacks for react already added)

Install

npm install tableau-react-internal

Here is below valid options

const options = {
  height: 100,
  width: 100,
  hideToolbar: true  
  
};

| Name | Type | Description | | ------------- | ------------- | -------------| | disableUrlActionsPopups | bol | Indicates whether to suppress the execution of URL actions. This option does not prevent the URL action event from being raised. You can use this option to change what happens when a URL action occurs. If set to trueand you create an event listener for the URL_ACTION event, you can use an event listener handler to customize the actions. For example, you can direct the URL to appear in an iframeon your web page. See URL Action Example. | | hideTabs | bol | Indicates whether tabs are hidden or shown. | | hideToolbar | bol | Indicates whether the toolbar is hidden or shown. | | instanceIdToClone | string | Specifies the ID of an existing instance to make a copy (clone) of. This is useful if the user wants to continue analysis of an existing visualization without losing the state of the original. If the ID does not refer to an existing visualization, the cloned version is derived from the original visualization.| | height | string | Can be any valid CSS size specifier. If not specified, defaults to the published height of the view. | | width | string | Can be any valid CSS size specifier. If not specified, defaults to the published height of the view. | | device | string | Specifies a device layout for a dashboard, if it exists. Values can be default, desktop, tablet, or phone. If not specified, defaults to loading a layout based on the smallest dimension of the hosting iframe element. | | "filter name" | string | Apply a filter that you specify to the view when it is first rendered. For example, if you have an Academic Year filter and only want to display data for 2022, you might enter "Academic Year": "2022". For more information, see Filtering.| | "onFirstInteractive" | callback(e: TableauEvent) | Callback function that is invoked when the Viz object first becomes interactive. This is only called once, but it’s guaranteed to be called. If the Viz object is already interactive, it will be called immediately, but on a separate "thread."| | onFirstVizSizeKnown | callback(e: VizResizeEvent) | Callback function that's invoked when the size of the Viz object is known. You can use this callback to perform tasks such as resizing the elements surrounding the Viz object once the object's size has been established. | | toolbarPosition | ApiToolbarPosition | Specifies the position of the toolbar, if it is shown. The values can be ApiToolbarPosition.Top or ApiToolbarPosition.Bottom. |

Usage

import TableauReport from 'tableau-react-internal';

const myWoorkbook = props => (
  <TableauReport
    url="http://my-site.com/workbook/report"
    token="<TRUSTED TICKET HERE>"
  />
)

Supported props

 


const myWoorkbook = props => (
  <TableauReport
    url="http://reports.my-site.com/my-workbook/my-report"    
    options={options}  
    query="?:embed=yes&:comments=no&:refresh=yes&:toolbar=no&"
  />
)

Changing Filters & Parameters

Any parameters or filters that are initially passed will be sent in the vizCreate options, which speeds up initial loading time by not having to apply each one asynchronously after the viz loads.

Once the viz has been loaded, if the parameters/filters change but the url does not, only the changed parameters/filters will be applied asynchronously in order to optimize performance.

Viz Integration

Upon initialization, a new Viz will be created. A new Viz will only be initialized if props.url changes for performance reasons.

Trusted Tickets

You can authenticate using a trusted ticket, which will be immediately invalidated upon being used, because using it a second time will log the user out.

If props.token gets updated, it will use it the next time a viz is initialized.

Testing

npm install
npm test

Local Development of this package or updating.

1. clone this repo.
2. Do npm install.
3. Make the changes, commit it and raise a PR.

Note: If you don't have write access to the repo, you need to clone it and make changes there and raise a PR to the parent repo.