This is the home for the Wrapper for TIBCO Spotfire(R) Javascript library.
- 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.
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.
<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
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.
<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.
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 4404or
python3 -m http.server 4404and navigate to http://localhost:4404, to see how to easily display a Spotfire dashboard in raw html pages.
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.tgznpm install ${PWD}/dist/spotfire-wrapper.tgz --no-save
npm run build:elements
cp -f elements/spotfire-wrapper.js ./build./build.shCopyright © 2019-2021. TIBCO Software Inc.
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