# 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 

```js
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
```js
import TableauReport from 'tableau-react-internal';

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

## Supported props
```js

 


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.