API version 1.2 (#34)

Update examples to API version 1.2

examples/js-areachart-d3/spotfire/spotfire-api-1-1.d.ts → examples/js-areachart-d3/spotfire/spotfire-api-1-2.d.ts

@@ -673,7 +673,7 @@ export declare interface DataViewRow {
      * e.g. as a {@link ModProperty} or {@link AnalysisProperty}.
      * @version 1.1
      *
-     * @param useStableId - When true, the id will be a (longer) stable id guarranteed to be the same over time.
+     * @param useStableId - When true, the id will be a (longer) stable id guaranteed to be the same over time.
      * @param omitAxisNames - Axis names to omit when creating the identifier. Can be used to group multiple elements split by these axes, for example to create animation effects in one data view.
      */
     elementId(useStableId?: boolean, omitAxisNames?: string[]): string;
@@ -1404,6 +1404,14 @@ export declare interface RenderContext {
      * Gets the image pixel ratio that shall be used when rendering rasterized images and/or using a canvas element.
      */
     imagePixelRatio: number;
+    /**
+     * Gets a value indicating whether the Spotfire UI is in editing mode.
+     *
+     * When this value is true the Spotfire UI displays authoring UI elements, such as axis selectors.
+     * This property can be used to hide controls not meant for consumers of the analysis.
+     * @version 1.2
+     */
+    isEditing: boolean;
     /**
      * Gets information about the currently used theme.
      */

examples/js-areachart-d3/src/render.js

@@ -60,7 +60,8 @@ export async function render(state, mod, dataView, windowSize, chartType, rounde
         state.preventRender = dragSelectActive;
     };
 
-    const styling = mod.getRenderContext().styling;
+    const context = mod.getRenderContext();
+    const styling = context.styling;
     const { tooltip, popout } = mod.controls;
     const { radioButton, checkbox } = popout.components;
     const { section } = popout;
@@ -94,7 +95,7 @@ export async function render(state, mod, dataView, windowSize, chartType, rounde
     } else {
         mod.controls.errorOverlay.hide("rowCount");
     }
-    
+
     const colorHierarchy = await dataView.hierarchy("Color");
     const xHierarchy = await dataView.hierarchy("X");
 
@@ -824,7 +825,12 @@ export async function render(state, mod, dataView, windowSize, chartType, rounde
      * @type {HTMLElement}
      */
     const labelContainer = document.querySelector(".x-axis-label-container");
+    labelContainer.classList.toggle("editable", context.isEditing);
     labelContainer.onclick = (e) => {
+        if (!context.isEditing) {
+            return;
+        }
+
         tooltip.hide();
         popout.show(
             {

examples/js-areachart-d3/static/main.css

@@ -72,6 +72,9 @@ body,
 
 .x-axis-label-container {
     position: absolute;
+}
+
+.editable {
     cursor: pointer;
 }
 

examples/js-areachart-d3/static/mod-manifest.json

@@ -1,5 +1,5 @@
 {
-    "apiVersion": "1.1",
+    "apiVersion": "1.2",
     "version": "1.1.0",
     "name": "Area Chart",
     "id": "spotfire-area-chart-mod",

examples/js-dev-barchart-googlecharts/spotfire/spotfire-api-1-1.d.ts → examples/js-dev-barchart-googlecharts/spotfire/spotfire-api-1-2.d.ts

@@ -673,7 +673,7 @@ export declare interface DataViewRow {
      * e.g. as a {@link ModProperty} or {@link AnalysisProperty}.
      * @version 1.1
      *
-     * @param useStableId - When true, the id will be a (longer) stable id guarranteed to be the same over time.
+     * @param useStableId - When true, the id will be a (longer) stable id guaranteed to be the same over time.
      * @param omitAxisNames - Axis names to omit when creating the identifier. Can be used to group multiple elements split by these axes, for example to create animation effects in one data view.
      */
     elementId(useStableId?: boolean, omitAxisNames?: string[]): string;
@@ -1404,6 +1404,14 @@ export declare interface RenderContext {
      * Gets the image pixel ratio that shall be used when rendering rasterized images and/or using a canvas element.
      */
     imagePixelRatio: number;
+    /**
+     * Gets a value indicating whether the Spotfire UI is in editing mode.
+     *
+     * When this value is true the Spotfire UI displays authoring UI elements, such as axis selectors.
+     * This property can be used to hide controls not meant for consumers of the analysis.
+     * @version 1.2
+     */
+    isEditing: boolean;
     /**
      * Gets information about the currently used theme.
      */

examples/js-dev-barchart-googlecharts/src/main.css

@@ -11,5 +11,9 @@ html, body, #mod-container {
 }
 
 svg text {
+    cursor: default;
+}
+
+.editable svg text {
     cursor: pointer;
 }

examples/js-dev-barchart-googlecharts/src/main.js

@@ -30,6 +30,8 @@ Spotfire.initialize(async (mod) => {
 
     const context = mod.getRenderContext();
 
+    document.body.classList.toggle("editable", context.isEditing);
+
     /**
      * Initiate the read loop
      */
@@ -230,6 +232,10 @@ Spotfire.initialize(async (mod) => {
         const { radioButton } = popout.components;
 
         function showPopout(e) {
+            if (!context.isEditing) {
+                return;
+            }
+
             popout.show(
                 {
                     x: e.x,

examples/js-dev-barchart-googlecharts/src/mod-manifest.json

@@ -1,5 +1,5 @@
 {
-    "apiVersion": "1.1",
+    "apiVersion": "1.2",
     "version": "1.0",
     "name": "BarChart example using googlecharts",
     "id": "basic-barchart-googlecharts",

examples/js-dev-barchart/spotfire/spotfire-api-1-1.d.ts → examples/js-dev-barchart/spotfire/spotfire-api-1-2.d.ts

@@ -673,7 +673,7 @@ export declare interface DataViewRow {
      * e.g. as a {@link ModProperty} or {@link AnalysisProperty}.
      * @version 1.1
      *
-     * @param useStableId - When true, the id will be a (longer) stable id guarranteed to be the same over time.
+     * @param useStableId - When true, the id will be a (longer) stable id guaranteed to be the same over time.
      * @param omitAxisNames - Axis names to omit when creating the identifier. Can be used to group multiple elements split by these axes, for example to create animation effects in one data view.
      */
     elementId(useStableId?: boolean, omitAxisNames?: string[]): string;
@@ -1404,6 +1404,14 @@ export declare interface RenderContext {
      * Gets the image pixel ratio that shall be used when rendering rasterized images and/or using a canvas element.
      */
     imagePixelRatio: number;
+    /**
+     * Gets a value indicating whether the Spotfire UI is in editing mode.
+     *
+     * When this value is true the Spotfire UI displays authoring UI elements, such as axis selectors.
+     * This property can be used to hide controls not meant for consumers of the analysis.
+     * @version 1.2
+     */
+    isEditing: boolean;
     /**
      * Gets information about the currently used theme.
      */

examples/js-dev-barchart/src/main.js

@@ -164,6 +164,10 @@ Spotfire.initialize(async (mod) => {
         };
 
         yScaleDiv.onclick = function (e) {
+            if (!context.isEditing) {
+                return;
+            }
+
             mod.controls.tooltip.hide();
             let factory = mod.controls.popout.components;
             let section = mod.controls.popout.section;
@@ -240,6 +244,10 @@ Spotfire.initialize(async (mod) => {
         }
 
         xScaleDiv.onclick = function (e) {
+            if (!context.isEditing) {
+                return;
+            }
+
             let factory = mod.controls.popout.components;
             let section = mod.controls.popout.section;
             let box = xScaleDiv.getBoundingClientRect();

examples/js-dev-barchart/src/mod-manifest.json

@@ -1,5 +1,5 @@
 {
-    "apiVersion": "1.1",
+    "apiVersion": "1.2",
     "version": "1.0",
     "name": "Bar Chart",
     "id": "js-dev-barchart",

examples/js-dev-circular-treemap/spotfire/spotfire-api-1-1.d.ts → examples/js-dev-circular-treemap/spotfire/spotfire-api-1-2.d.ts

@@ -673,7 +673,7 @@ export declare interface DataViewRow {
      * e.g. as a {@link ModProperty} or {@link AnalysisProperty}.
      * @version 1.1
      *
-     * @param useStableId - When true, the id will be a (longer) stable id guarranteed to be the same over time.
+     * @param useStableId - When true, the id will be a (longer) stable id guaranteed to be the same over time.
      * @param omitAxisNames - Axis names to omit when creating the identifier. Can be used to group multiple elements split by these axes, for example to create animation effects in one data view.
      */
     elementId(useStableId?: boolean, omitAxisNames?: string[]): string;
@@ -1404,6 +1404,14 @@ export declare interface RenderContext {
      * Gets the image pixel ratio that shall be used when rendering rasterized images and/or using a canvas element.
      */
     imagePixelRatio: number;
+    /**
+     * Gets a value indicating whether the Spotfire UI is in editing mode.
+     *
+     * When this value is true the Spotfire UI displays authoring UI elements, such as axis selectors.
+     * This property can be used to hide controls not meant for consumers of the analysis.
+     * @version 1.2
+     */
+    isEditing: boolean;
     /**
      * Gets information about the currently used theme.
      */

examples/js-dev-circular-treemap/src/mod-manifest.json

@@ -1,5 +1,5 @@
 {
-    "apiVersion": "1.1",
+    "apiVersion": "1.2",
     "version": "1.0",
     "name": "Circular Treemap",
     "id": "js-dev-circular-treemap",