Wrapper for TIBCO Spotfire(R) - the Javascript library

This is the home for the Wrapper for TIBCO Spotfire(R) Javascript library.

Notes:

Library can be found here: https://cdn.jsdelivr.net/gh/TIBCOSoftware/spotfire-wrapper/dist/spotfire-wrapper.js

Visit Angular package README to read more about the Angular package alternate way.

Installation

Wrapper for TIBCO Spotfire(R) provides a Javascript library that defines a new HTML tag to easily display a Spotfire dashboard in a standard HTML page : <spotfire-viewer>.

Include the javascript files via cdn.jsdelivr.net and use <spotfire-viewer> tag as followed:

<html>
    <head>
        <script src="https://cdn.jsdelivr.net/gh/TIBCOSoftware/spotfire-wrapper/dist/spotfire-wrapper.js"></script>
    </head>
    <body>
        <spotfire-viewer
            url="https://spotfire-next.cloud.tibco.com"
            path="Samples/Introduction to Spotfire"
            page="Example dashboard">
        </spotfire-viewer>
    </body>
</html>

url and path are mandatory. If page is missing, it displays the first available page of this url/path.

You can add as many <spotfire-viewer></spotfire-viewer> pair of tags as you want in the same page.

Adjust the displayed Spotfire customization :

<spotfire-viewer
     url="https://spotfire-next.cloud.tibco.com"
     path="Samples/Sales and Marketing"
     page="Sales performance"
     customization='{"showAuthor":true, "showFilterPanel":true, "showStatusBar":true, "showToolBar":true}'>
</spotfire-viewer>

Possible settings is listed here :

"showAbout": true/false
"showAnalysisInformationTool": true/false
"showAuthor": true/false
"showClose": true/false
"showCustomizableHeader": true/false
"showDodPanel": true/false
"showExportFile": true/false
"showFilterPanel": true/false
"showHelp": true/false
"showLogout": true/false
"showPageNavigation": true/false
"showReloadAnalysis": true/false
"showStatusBar": true/false
"showToolBar": true/false
"showUndoRedo": true/false

Filter data at load:

Loaded data can be filtered at the time the dashboard is first displayed:

<spotfire-viewer
    url="https://spotfire-next.cloud.tibco.com"
    path="Samples/Sales and Marketing"
    page="Sales Performance"
    filters='[{"dataTableName": "SalesAndMarketing", "dataColumnName": "State", "filterSettings": { "values": ["California", "Arizona"]}}]'>
</spotfire-viewer>

The code above would display rows extracted from Table SalesAndMarketing where its column State is California or Arizona.

Multiple filters can be set.

Marking: get selected data

<spotfire-viewer
    id="id1"
    url="https://spotfire-next.cloud.tibco.com"
    path="Samples/Sales and Marketing"
    page="Effect of promotions"
    marking-on='{"SalesAndMarketing": [ "BCG segmentation", "State" ]}'>
</spotfire-viewer>
<pre id="marker1"></pre>
<script>
    const result          = document.getElementById("marker1");
    const spotfireWrapper = document.getElementById("id1");
    // listen to the markingEvent
    spotfireWrapper.addEventListener('markingEvent', event => {
      result.innerHTML = JSON.stringify(event.detail, null, '   ');
      console.log('[HTML] markingEvent!', event.detail);
    });
</script>

The code above will tell Spotfire(R) to provide values for columns BCG segmentation and State of table SalesAndMarketing. The Javascript code right after the <spotfire-viewer> tag will register an event listener, and prints result in <pre id="marker1"></pre>.

If values of all columns shall be returned, '{"SalesAndMarketing": ["*"]}' need to be used.

Demos

Demo #0: Use <spotfire-viewer> in a raw HTML code:

see : https://github.com/TIBCOSoftware/spotfire-wrapper/tree/master/demo

After building the JS library (step below), run cd demo and cp ../dist/spotfire-wrapper.js .

Start a HTTP server :

python -m SimpleHTTPServer 4404

python3 -m http.server 4404

and navigate to http://localhost:4404, to see how to easily display a Spotfire dashboard in raw html pages.

Builds

Step #1: build the NPM package:

npm install
ng build spotfire-wrapper
(cd build/spotfire-wrapper/ ; npm pack)
cp -f build/spotfire-wrapper/tibco-spotfire-wrapper-X.Y.Z.tgz dist/spotfire-wrapper.tgz

Step #2: build the Javascript library:

npm install ${PWD}/dist/spotfire-wrapper.tgz --no-save
npm run build:elements
cp -f elements/spotfire-wrapper.js ./build

or a one line command ...

./build.sh

License

This file is subject to the license terms contained in the license file that is distributed with this file.

Please see LICENSE for details of license and dependent third party components referenced by this library, or it can be found here:

https://github.com/TIBCOSoftware/spotfire-wrapper/blob/master/LICENSE

spotfiresoftware / spotfire-wrapper

readme