JSON array containing only text values of the data from the axes. For example

[
    {
        "val1": "City Hospital",
        "val2": "San Jose, CA",
        "val3": "Cardiology",
        "val4": "132",
        "val5": "175",
        "val6": "96%",
        "color": "#6489FA",
        "cat1": "Cardiology",
        "cat2": "101"
    },
:
    {
        "val1": "City Hospital",
        "val2": "San Jose, CA",
        "val3": "Orthopedics",
        "val4": "456",
        "val5": "125",
        "val6": "98%",
        "color": "#FA7864",
        "cat1": "Orthopedics",
        "cat2": "101"
    }
]

This is the DataViewHierarchy object defined by the Spotfire Visualization Mods interface. For example, you could execute its methods or display the properties from it:

function beforeRender (json,hierarchy) {  
    //this function renders the visual. you can comment it out if you want and code your own parser.
    document.getElementById("mod-container").innerHTML = "";
    //CustomKPI.init(hierarchy, data, mod);
    
    result = "Hierarchy name:"+hierarchy.name+"\n"+
             "Number of levels:"+hierarchy.leafCount+"\n"+
             "is empty?:"+hierarchy.isEmpty

    const modContainer = document.getElementById("mod-container")
    modContainer.innerHTML = "<pre>"+result+"</pre>"
}

The json object array containing values and Visualization Mod objects for each record

[
    {
        "allRows": "<DataViewRow[]>"
        "axis": "<DataViewCategoricalAxis>"
        "cat1": "Orthopedics",
        "cat2": "101"
        :
        "catN": "<the last nested category>"
        "color": "#FA7864",
        "hierarchy": "<DataViewHierarchy>"
        "row": "<DataViewRow>"
        "val1": "City Hospital",
        "val2": "San Jose, CA",
        "val3": "Orthopedics",
        "val4": "123",
        "val5": "125",
        "val6": "98%",
        "valueAxes": <DataViewAxis>
    }
]

Represents the entire Mod API and exposes methods for interacting with and reading data from the Mod Visualization and the Spotfire document. Here is a simple example on how to show one of many mod properties directly that shows and hide the progress indicator after 5 seconds

function beforeRender (json,hierarchy, data, mod, allRows, valueAxes, windowSize, dataView) {  
   mod.controls.progress.show()
   setTimeout(mod.controls.progress.hide,5000)
}

Here is another example that illustrates the mod.controls.tooltip for each json element array

function beforeRender (json,hierarchy, data, mod, allRows, valueAxes, windowSize, dataView) {  

  const modContainer = document.getElementById("mod-container")
  modContainer.innerHTML = ""
  modContainer.style.display="block"

  json.forEach(e =>{
      div = document.createElement("span")
      div.style.padding="10px";
      div.style.background=e.color;
      div.style.border="1px solid black";
      div.onmouseenter = x=>{mod.controls.tooltip.show(e.val3)}
      div.onmouseleave = mod.controls.tooltip.hide
      modContainer.appendChild(div);
      div.innerHTML=e.val2
  })

}

This is a DataViewRow array. Here is an example usage that loops through all rows and performs some operation, like marking.

function beforeRender(json, hierarchy, data, mod, allRows, valueAxes, windowSize, dataView) {

    const modContainer = document.getElementById("mod-container")
    modContainer.innerHTML = ""
    modContainer.style.display = "block"

    allRows.forEach((row, i) => {

        div = document.createElement("span")
        div.innerHTML = row.categorical("Value 2").formattedValue()
        div.style.background = json[i].color;
        div.style.padding = "10px";

        if (row.isMarked()) {
            div.style.border = "2px solid black";
        }

        div.onclick = event => {
            if (event.ctrlKey) {
                row.mark("Add")
            } else {
                row.mark()
            }
        }

        modContainer.appendChild(div);
    })
}

DataViewAxis array. This array only includes the kpi values and it is defined as:

        const valueAxes = (await dataView.axes()).filter(axis => axis.name.startsWith("Value"));

Provides read-only access to the current Size of the browser window in which the Mod is rendered. That is, the size of the iframe created for the Mod in the Spotfire UI. The beforeRender function executes every time the window size changes. This is equivalent to the Mod.WindowSize() method

Here is a simple example to show the window size

function beforeRender (json,hierarchy, data, mod, allRows, valueAxes, windowSize, dataView) {  
    const modContainer = document.getElementById("mod-container")
    modContainer.innerHTML = "Mod visualization size is: "+ windowSize.width + " X " + windowSize.height
}

The DataView Represents a view of the data from which the visualization can be rendered.

This object contains the result of the query made by Spotfire against the DataTable currently used by the Mod Visualization, using the Filtering, Marking, expressions on the Axes and other relevant settings.

DOM element containing the entire html of the root element and its children. Here is an example html structure output

<div class="root category"><span class="title" id="root_91">Cardiology</span>
  <div>
    <div class="last category"><span class="title" id="last_92">101</span>
      <div class="kpis">
        <div class="kpi" id="kpi_93">
          <div class="kpi-val1">City Hospital</div>
          <div class="kpi-val2">Boston, MA</div>
          <div class="kpi-val3">Cardiology</div>
          <div class="kpi-val4" title="123" style="color:#FEE4E0">⬤</div>
          <div class="kpi-val5">145</div>
          <div class="kpi-val6">96%</div>
        </div>
        <div class="kpi" id="kpi_94">
          <div class="kpi-val1">City Hospital</div>
          <div class="kpi-val2">New York, NY</div>
          <div class="kpi-val3">Cardiology</div>
          <div class="kpi-val4" title="465" style="color:#E0E7FE">⬤</div>
          <div class="kpi-val5">150</div>
          <div class="kpi-val6">96%</div>
        </div>
        <div class="kpi" id="kpi_95">
          <div class="kpi-val1">City Hospital</div>
          <div class="kpi-val2">San Jose, CA</div>
          <div class="kpi-val3">Cardiology</div>
          <div class="kpi-val4" title="789" style="color:#E0E7FE">⬤</div>
          <div class="kpi-val5">175</div>
          <div class="kpi-val6">96%</div>
        </div>
      </div>
    </div>
  </div>
</div>

You can manipulate this as any other DOM Object. Here is an example that makes the first child of the rootElement (the span) clickable so it uses the Mods API to navigate to the first page

function generateFirstCategoryElement(rootElement, category, level = 0, items) {
  //goes to the first page when clicking the root category title
  rootElement.firstChild.addEventListener('click', event => {
    CustomKPI.mod.document.pages().then(pages => pages[0].setAsActive());
  });

  return rootElement;
}

String representing the category for the rendered root hierarchy

The level of the root category. In this case is always 1 if the root category exists

The logical JavaScript object of the hierarchy and items. For example the object is dynamically created depending on the hierarchy and values.  The items property for each hierarchical leaf corresponds to the Mod API as defined as the beforeRender "data" parameter.

The logical JavaScript Object conforming the hierarchy and all it's items

This parameter is designed to attach it to a DOM element or node as a handy way for further process in some cases

{
  "Arrhythmia": {
      "North Wing": {
          "items": [
              {
                  "val1": "City Hospital",
                  "val2": "Boston, MA",
                  "val3": "Cardiology",
                  "val4": "123",
                  "val5": "145",
                  "val6": "96%",
                  "axis": {
                      "name": "Value 6",
                      "isCategorical": true,
                      "hierarchy": "<the item DataViewHierarchy for this item>"
                  },
                  "color": "#FA7864",
                  "row": "<the corresponding DataViewRow>",
                  "hierarchy": "<the item hierarchy for this item>",
                  "allRows": "<all the DataViewRows for this item>",
                  "valueAxes": "<the DataViewAxis for this item>",
                  "cat1": "Cardiology",
                  "cat2": "Arrhythmia",
                  "cat3": "North Wing"
                  :
                  "catN": "the last hierarchical item value"
              },...,
              {
                  "val1": "Green Valley Hospital",
                  "val2": "Las Vegas, NV",
                  "val3": "Cardiology",
                  "val4": "456",
                  "val5": "155",
                  "val6": "96%",
                  "axis": {
                      "name": "Value 6",
                      "isCategorical": true,
                      "hierarchy": "<the item hierarchy for this item>"
                  },
                  "color": "#FA7864",
                  "row": "<the corresponding DataViewRow>",
                  "hierarchy": "<the item hierarchy for this item>",
                  "allRows": "<all the DataViewRows for this item>",
                  "valueAxes": "<the DataViewAxis for this item>",
                  "cat1": "Cardiology",
                  "cat2": "Arrhythmia",
                  "cat3": "North Wing",
                  :
                  "catN": "the last hierarchical item value"
              }
          ]
      }
  },
  "Heart Attack": {
      "East Wing": {
          "items": [..."<same as above>"]
      }
  }
}

DOM element containing the HTML structure for nested category. Here is an example html structure output

<div class="nested category"><span class="title" id="nested_2507">North Wing</span>
    <div>
        <div class="last category"><span class="title" id="last_2508">101</span>
            <div class="kpis">
                <div class="kpi" id="kpi_2509">
                    <div class="kpi-val1">City Hospital</div>
                    <div class="kpi-val2">Boston, MA</div>
                    <div class="kpi-val3">Cardiology</div>
                    <div class="kpi-val4" title="xxxxx" style="color:#FA7864">⬤</div>
                    <div class="kpi-val5">145</div>
                    <div class="kpi-val6">96%</div>
                </div>
            </div>
        </div>
        :
        <div class="last category"><span class="title" id="last_2510">102</span>
            <div class="kpis">
                <div class="kpi" id="kpi_2511">
                    <div class="kpi-val1">Green Valley Hospital</div>
                    <div class="kpi-val2">Las Vegas, NV</div>
                    <div class="kpi-val3">Cardiology</div>
                    <div class="kpi-val4" title="xxxxx" style="color:#FA7864">⬤</div>
                    <div class="kpi-val5">155</div>
                    <div class="kpi-val6">96%</div>
                </div>
            </div>
        </div>
    </div>
</div>

String representing the category for the rendered nested category hierarchy between the root or the last category node

The level of the nested category. it can be any number between 2 and the number of nested categories before the last hierarchy level

The logical JavaScript object of the hierarchy and items. For example the object is dynamically created depending on the hierarchy and values.  The items property for each hierarchical leaf corresponds to the Mod API as defined as the beforeRender "data" parameter.

This parameter is designed to attach it to a DOM element or node as a handy way for further process in some cases

{
  "Arrhythmia": {
      "North Wing": {
          "items": [
              {
                  "val1": "City Hospital",
                  "val2": "Boston, MA",
                  "val3": "Cardiology",
                  "val4": "123",
                  "val5": "145",
                  "val6": "96%",
                  "axis": {
                      "name": "Value 6",
                      "isCategorical": true,
                      "hierarchy": "<the item DataViewHierarchy for this item>"
                  },
                  "color": "#FA7864",
                  "row": "<the corresponding DataViewRow>",
                  "hierarchy": "<the item hierarchy for this item>",
                  "allRows": "<all the DataViewRows for this item>",
                  "valueAxes": "<the DataViewAxis for this item>",
                  "cat1": "Cardiology",
                  "cat2": "Arrhythmia",
                  "cat3": "North Wing"
                  :
                  "catN": "the last hierarchical item value"
              },...,
              {
                  "val1": "Green Valley Hospital",
                  "val2": "Las Vegas, NV",
                  "val3": "Cardiology",
                  "val4": "456",
                  "val5": "155",
                  "val6": "96%",
                  "axis": {
                      "name": "Value 6",
                      "isCategorical": true,
                      "hierarchy": "<the item hierarchy for this item>"
                  },
                  "color": "#FA7864",
                  "row": "<the corresponding DataViewRow>",
                  "hierarchy": "<the item hierarchy for this item>",
                  "allRows": "<all the DataViewRows for this item>",
                  "valueAxes": "<the DataViewAxis for this item>",
                  "cat1": "Cardiology",
                  "cat2": "Arrhythmia",
                  "cat3": "North Wing",
                  :
                  "catN": "the last hierarchical item value"
              }
          ]
      }
  },
  "Heart Attack": {
      "East Wing": {
          "items": [..."<same as above>"]
      }
  }
}

DOM element containing the HTML structure for nested category. Here is an example html structure output

<div class="nested category"><span class="title" id="nested_2507">North Wing</span>
    <div>
        <div class="last category"><span class="title" id="last_2508">101</span>
            <div class="kpis">
                <div class="kpi" id="kpi_2509">
                    <div class="kpi-val1">City Hospital</div>
                    <div class="kpi-val2">Boston, MA</div>
                    <div class="kpi-val3">Cardiology</div>
                    <div class="kpi-val4" title="xxxxx" style="color:#FA7864">⬤</div>
                    <div class="kpi-val5">145</div>
                    <div class="kpi-val6">96%</div>
                </div>
            </div>
        </div>
        :
        <div class="last category"><span class="title" id="last_2510">102</span>
            <div class="kpis">
                <div class="kpi" id="kpi_2511">
                    <div class="kpi-val1">Green Valley Hospital</div>
                    <div class="kpi-val2">Las Vegas, NV</div>
                    <div class="kpi-val3">Cardiology</div>
                    <div class="kpi-val4" title="xxxxx" style="color:#FA7864">⬤</div>
                    <div class="kpi-val5">155</div>
                    <div class="kpi-val6">96%</div>
                </div>
            </div>
        </div>
    </div>
</div>

String representing the category for the rendered last category hierarchy

The level of the nested category. it can be any number between 2 and the number of nested categories before the last hierarchy level

The logical JavaScript object of the hierarchy and items. For example the object is dynamically created depending on the hierarchy and values.  The items property for each hierarchical leaf corresponds to the Mod API as defined as the beforeRender "data" parameter.

This parameter is designed to attach it to a DOM element or node as a handy way for further process in some cases

{
  "Arrhythmia": {
      "North Wing": {
          "items": [
              {
                  "val1": "City Hospital",
                  "val2": "Boston, MA",
                  "val3": "Cardiology",
                  "val4": "123",
                  "val5": "145",
                  "val6": "96%",
                  "axis": {
                      "name": "Value 6",
                      "isCategorical": true,
                      "hierarchy": "<the item DataViewHierarchy for this item>"
                  },
                  "color": "#FA7864",
                  "row": "<the corresponding DataViewRow>",
                  "hierarchy": "<the item hierarchy for this item>",
                  "allRows": "<all the DataViewRows for this item>",
                  "valueAxes": "<the DataViewAxis for this item>",
                  "cat1": "Cardiology",
                  "cat2": "Arrhythmia",
                  "cat3": "North Wing"
                  :
                  "catN": "the last hierarchical item value"
              },...,
              {
                  "val1": "Green Valley Hospital",
                  "val2": "Las Vegas, NV",
                  "val3": "Cardiology",
                  "val4": "456",
                  "val5": "155",
                  "val6": "96%",
                  "axis": {
                      "name": "Value 6",
                      "isCategorical": true,
                      "hierarchy": "<the item hierarchy for this item>"
                  },
                  "color": "#FA7864",
                  "row": "<the corresponding DataViewRow>",
                  "hierarchy": "<the item hierarchy for this item>",
                  "allRows": "<all the DataViewRows for this item>",
                  "valueAxes": "<the DataViewAxis for this item>",
                  "cat1": "Cardiology",
                  "cat2": "Arrhythmia",
                  "cat3": "North Wing",
                  :
                  "catN": "the last hierarchical item value"
              }
          ]
      }
  },
  "Heart Attack": {
      "East Wing": {
          "items": [..."<same as above>"]
      }
  }
}

The DOM object representing the KPI's HTML structure. For example:

<div class="kpi" id="kpi_3732">
  <div class="kpi-val1">Lakeside Medical</div>
  <div class="kpi-val2">Dallas, TX</div>
  <div class="kpi-val3">Orthopedics</div>
  <div class="kpi-val4" title="xxxxx" style="color:#FA7864">⬤</div>
  <div class="kpi-val5">235</div>
  <div class="kpi-val6">98%</div>
</div>

The JavaScript Object containing the KPI information, for example:
 

{
    "val1": "City Hospital",
    "val2": "Boston, MA",
    "val3": "Cardiology",
    "val4": "123",
    "val5": "145",
    "val6": "96%",
    "axis": {
        "name": "Value 6",
        "isCategorical": true,
        "hierarchy": "<the item DataViewHierarchy for this item>"
    },
    "color": "#FA7864",
    "row": "<the corresponding DataViewRow>",
    "hierarchy": "<the item hierarchy for this item>",
    "allRows": "<all the DataViewRows for this item>",
    "valueAxes": "<the DataViewAxis for this item>",
    "cat1": "Cardiology",
    "cat2": "Arrhythmia",
    "cat3": "North Wing": "catN": "the last hierarchical item value"
}

The last category hierarchy that corresponds to this KPI

The total number of hierarchy levels as long as there are at least one column selected in the Hierarchy selector

Array of objects with the following structure

{
  "val1": "City Hospital",
  "val2": "Boston, MA",
  "val3": "Cardiology",
  "val4": "123",
  "val5": "145",
  "val6": "96%",
  "axis": {
    "name": "Value 6",
    "isCategorical": true,
    "hierarchy": "<the item DataViewHierarchy for this item>"
  },
  "color": "#FA7864",
  "row": "<the corresponding DataViewRow>",
  "hierarchy": "<the item hierarchy for this item>",
  "allRows": "<all the DataViewRows for this item>",
  "valueAxes": "<the DataViewAxis for this item>",
  "cat1": "Cardiology",
  "cat2": "Arrhythmia",
  "cat3": "North Wing"
  :
  "catN": "the last hierarchical item value"
  }

The name of the nested column (not the values) for the Hierarchy object. If no hierarchy values are selected, returns an empty array. For example:

[
    "Department",
    "Subcategory",
    "Area"
]

The logical JavaScript object of the hierarchy and items. For example the object is dynamically created depending on the hierarchy and values.  The items property for each hierarchical leaf corresponds to the Mod API as defined as the beforeRender "data" parameter. For example:

{
  "Arrhythmia": {
      "North Wing": {
          "items": [
              {
                  "val1": "City Hospital",
                  "val2": "Boston, MA",
                  "val3": "Cardiology",
                  "val4": "123",
                  "val5": "145",
                  "val6": "96%",
                  "axis": {
                      "name": "Value 6",
                      "isCategorical": true,
                      "hierarchy": "<the item DataViewHierarchy for this item>"
                  },
                  "color": "#FA7864",
                  "row": "<the corresponding DataViewRow>",
                  "hierarchy": "<the item hierarchy for this item>",
                  "allRows": "<all the DataViewRows for this item>",
                  "valueAxes": "<the DataViewAxis for this item>",
                  "cat1": "Cardiology",
                  "cat2": "Arrhythmia",
                  "cat3": "North Wing"
                  :
                  "catN": "the last hierarchical item value"
              },...,
              {
                  "val1": "Green Valley Hospital",
                  "val2": "Las Vegas, NV",
                  "val3": "Cardiology",
                  "val4": "456",
                  "val5": "155",
                  "val6": "96%",
                  "axis": {
                      "name": "Value 6",
                      "isCategorical": true,
                      "hierarchy": "<the item hierarchy for this item>"
                  },
                  "color": "#FA7864",
                  "row": "<the corresponding DataViewRow>",
                  "hierarchy": "<the item hierarchy for this item>",
                  "allRows": "<all the DataViewRows for this item>",
                  "valueAxes": "<the DataViewAxis for this item>",
                  "cat1": "Cardiology",
                  "cat2": "Arrhythmia",
                  "cat3": "North Wing",
                  :
                  "catN": "the last hierarchical item value"
              }
          ]
      }
  },
  "Heart Attack": {
      "East Wing": {
          "items": [..."<same as above>"]
      }
  }
}

the DataViewHierarchy Mod Visualization API for that particular hierarchy