This section is a collection of articles covering tips and tricks and some common code snippets
Spotfire Mods Developer's Hub |
|||
Introduction |
Fundamentals |
Advanced Topics |
Tips & Tricks |
Tips and Tricks
This section is a collection of articles and script snippets.. The articles cover some tips and tricks videos and the scripts are portions of minimal code to perform common actions
Articles
- Marking
- Folder Structure
- Add new axes
- Reading data (continuous, categorical or hierarchical)
- Submit a Mod idea
- Submitting Mods to the Community Exchange
- Visualization Mods Ideas
- Create an icon for your mod
- Configuration Popout
- Mods User Guide Template
JavaScript Snippets for Mods
Check if canvas is in dark mode
//check if canvas is in dark mode const mode = context.styling.general.backgroundColor=="2A2A2A"?"dark":"other"
Invert a color. i.e. takes "#AABBCC" color and returns the opposite color
//revert a color. Takes “#AABBCC” color and returns the opposite function invertHex(hex) { hex = hex.slice(1,hex.length) return "#" + (Number(`0x1${hex}`) ^ 0xFFFFFF).toString(16).substr(1).toUpperCase() }
Calculate the max value for an axis from a set ofrows.
//Calculate the max value for an (string) axis from a set of (DataViewRow[]) rows. //Null values are treated as 0. function maxValue(rows, axis) { return rows.reduce((p, c) => Math.max(+c.continuous(axis).value(), p), 0); } //Calculate the total sum value for an (string) axis from a set of (dataView)rows. // Null values are treated as 0. function sumValue(rows, axis) { return rows.reduce((p, c) => +c.continuous(axis).value() + p, 0); }
Show progress indicator and hides after 5 seconds
//show progress indicator and hides after 5 seconds mod.controls.progress.show() setTimeout(mod.controls.progress.hide,5000)
Check if analysis is in editing mode
//Check if analysis is in editing mode context.isEditing
Show error and hide it after 3 seconds
//Show error and hide it after 3 seconds mod.controls.errorOverlay.show(["error 1","error 2"],"sample errors") setTimeout(()=>{mod.controls.errorOverlay.hide("sample errors")},3000)
Show a menu at the of the screen
//Show a menu at the middle of the screen var isChecked = false document.querySelector(".settings").onclick=()=>{ mod.controls.contextMenu.show( windowSize.height/2,windowSize.width/2,[ {text:"menu 1",enabled:true}, {text:"menu 2",enabled:false}, {text:"menu 3",enabled:true,checked:isChecked} ]).then(clickedItem=>{ if(clickedItem.text=="menu 3") isChecked=!isChecked console.log(clickedItem.text, clickedItem.checked) })}
Show a right-click-menu
//Show a right-click-menu var isChecked = false document.querySelector("#mod-container").oncontextmenu=(e)=>{ e.preventDefault() e.stopPropagation() mod.controls.contextMenu.show( e.clientX,e.clientY,[ {text:"menu 1",enabled:true}, {text:"menu 2",enabled:false}, {text:"menu 3",enabled:true,checked:isChecked} ]).then(clickedItem=>{ if(clickedItem.text=="menu 3") isChecked=!isChecked console.log(clickedItem.text, clickedItem.checked) }) }
Creates a pop out menu
//Creates a popout menu let isChecked = false; let { radioButton, checkbox, button } = mod.controls.popout.components let { section } = mod.controls.popout document.querySelector(".settings").onclick = () => { let b1 = radioButton({ enabled: true, name: "myRadio", text: "a radio" }) let b2 = checkbox({ enabled: true, name: "myChk", text: "a checkbox", checked: isChecked }) let b3 = button({ enabled: true, name: "myBtn", text: "a button" }) mod.controls.popout.show({ x: 0, y: 0, autoClose: true, onChange:(e)=>{if (e.name == "myChk" || e.name == "myBtn" )isChecked=!isChecked} }, () => [ section({ heading: "section 1", children: [b1, b2] }), section({ heading: "section 2", children: [b3] }) ])} }
Marks a row
//marks a row //markRow({category:"apples",val:33,color:"red"}) async function markRow(d){ dataView.clearMarking(); (await dataView.allRows()).forEach((row,i)=>{ let rowVal = row.categorical("Segment").value()[0].key if(d.category==rowVal) row.mark(); }) }
Read document properties
//Read a document property console.log((await mod.document.property("depth.blend.curve1")).value()) //read all document properties (await mod.document.properties()).forEach(async (x, i) => { console.log(i, x.name, await x.isList ? x.valueList() : x.value()) }) //get a list of properties from array var props = ["FiscalYearOffset","MaxMissingTimeParts"] Promise.all(props.map(async (p) => { return (await mod.document.property(p)).value() })).then(v=>{ //custom code here console.log(v) }) //read a mod property (await) console.log((await mod.property("trackDocPropMappings")).value()) //read a mod property (then) mod.property("trackDocPropMappings").then(x=>{ console.log(x.value()); }); //assign mod property value (nested await) from async function (i.e render) var nt = await (await mod.property("trackVisibility")).value()
Read the Color Axis
//Read color axis values //get Color axis values let colorAxisValues = []; let colorAxisName = "Color"; //or any other axis get Color axis let colorAxis = (await dataView.axes()).filter(ax=>{return ax.name==colorAxisName})[0]; // get row values (await dataView.allRows()).forEach((row,i)=>{ let aColorAxisValue = {} aColorAxisValue.color = row.color().hexCode; if (colorAxis.isCategorical){ aColorAxisValue.value = row.categorical(colorAxisName).formattedValue() } else { aColorAxisValue.value = row.continuous(colorAxisName).value() } colorAxisValues.push(aColorAxisValue) }) console.log(JSON.stringify(colorAxisValues,0,3))
Get visualization data table, data table column names and data types
//get visualization data table, data table column names and data types let visDataTable = await mod.visualization.mainTable(); let visDataTableColumns = (await visDataTable.columns()); let visDataTableColNames = visDataTableColumns.map(a=>{return a.name}) let visDataTableColDataTypes = visDataTableColumns.map(a=>{return a.dataType.name}) console.log(visDataTable.name,visDataTableColNames,visDataTableColDataTypes);
Show or hide tooltip under your cursor when hovering over a dom element
//show or hide tooltip under your cursor when hovering over a dom element //<div id="myDiv" style="height:100px;width:100px;background:yellow">hello</div> constant myDiv = document.getElementById("myDiv") myDiv.onmouseenter(e=>{mod.controls.tooltip.show(“hello there”)}) myDiv.onmouuseleave(mod.controls.tooltip.hide)
Read a document property
//Read a document property console.log((await mod.document.property("depth.blend.curve1")).value()) //read all document properties (await mod.document.properties()).forEach(async (x, i) => { console.log(i, x.name, await x.isList ? x.valueList() : x.value()) }) //get a list of properties from array var props = ["FiscalYearOffset","MaxMissingTimeParts"] Promise.all(props.map(async (p) => { return (await mod.document.property(p)).value() })).then(v=>{ //custom code here console.log(v) })
See also
- Spotfire Mods Developer's Hub - Overview and Welcome
- Spotfire Mods Developer's Hub - Introduction - What are Mods, how to get them and use them
- Spotfire Mods Developer's Hub - Fundamentals - Setup Dev Environment, Mod Life cycle
- Spotfire Mods Developer's Hub - Advanced Topics - Sebugging, API Compatibility, Mod readers, Data types
- Spotfire Mods Developer's Hub - Tips & Tricks - JavaScript mod code snippets, references and links
Recommended Comments
There are no comments to display.