Hexagon Geospatial
MENU

Smart M.App

Looking for answers in regards to M.Apps, M.App Exchange or M.App Studio? Smart M.App Tech Discussion board is where you can search, ask your questions and assist others by sharing your knowledge. Join the conversation, connect, contribute and share.
Showing results for 
Search instead for 
Do you mean 
Reply
Frequent Contributor
Posts: 115
Registered: ‎04-05-2016

Re: Customizing Feature Analyser Panel

Hi Dave and Robert,

 

thank you for your update. I think this will be very helpful for people who are interested in customizing analyzer views.

 

In the meantime I have found a solution, that is similar to the one suggested by Dave.

 

Kind regards,

Sven

Occasional Contributor
Posts: 9
Registered: ‎08-10-2017

Re: Customizing Feature Analyser Panel

Dear Community!

 

I need help for the FA customization too!

Do somebody have code examples for customizing certain elements in the FA?

In detail, I am looking for the customization of the default visualisation of my vector data (e.g. that the features are displayed without a border).

Another problem where I'm struggling with is the diagrammconfiguration. I am looking for the possibility to change the scale of the axes, or to change the color of one single bar in the graph.

 

I'm very new in the field of web development, so I would be very glad if someone could post some html/css code examples. I have not understood yet how I can communicate in the Customer Panel with certain elements in the FA.

 

Thx for your help and best regards!

Technical Evangelist
Posts: 36
Registered: ‎07-12-2016

Re: Customizing Feature Analyser Panel

Hello All,

 

I just wanted to follow-up on this thread as more and more folks are asking how the M.App Analyzer suite can be modified via customization.

 

 

Examples

 

Further to what has been noted below, HTML and JavaScript can also be used to customize content within Feature Analyzer views via the Number Display chart. In the example below, there are two such examples (namely the SCORD CARD and LEGEND windows).

 

Graphic01.png

 

Typically, the Number Display chart is used to display statistics, such as those shown in the chart above called STATISTICS, however, you can use HTML to display pretty much whatever you want to display.

 

In the example below, the Number Display chart has been stylized using HTML and the resulting report contains several hyperlinks (on the left), and image (on the left), and it also depicts the number of filtered churches, the average number of people attending the churches and the total number of people attending the churches.

 

Graphic02.png

 

This HTML Editor window is used to construct the HTML for your Number Display chart. This window is accessible via the One FeatureSome Features, and No Features buttons. When one these buttons is click, the HTML Editor window is displayed for each of the three record set conditions. You can use the default HTML that is generated by the system (as is) or you can choose to modify it, or even delete the HTML and construct your own HTML. When constructing your own HTML, simply select the existing HTML, and in turn enter your own HTML. Ten buttons have been supplied for you. There is one button for each of the 10 variables. To insert a variable name into your HTML, simply place the cursor at the insertion point and then click the appropriate button. Once the appropriate button is clicked, the variable name is inserted.

 

Using HTML to Construct the LEGEND Window Chart Noted Above

 

The window called LEGEND in the example above has been customized using a Number Display chart. This chart acts as a legend for the charts within this view. In this case no statistics are shown, just statics text/graphics are shown.

 

Graphic03.png

 

To create this content, you can use the following HTML:

 

 

Color <p>

<div style='display:table;width:100%;text-align: left; font-size:12px; margin-left: 10px'>

    <div style='display:table-row'>

        <div style='display: table-cell;width:25px'>

          <div style="width:20px;height:20px;background-color:#b40000"></div>

        </div>

        <div style='display: table-cell'>

            Too Early (greater than 15 minutes)

        </div>

    </div>   

    <div style='display:table-row'>

        <div style='display: table-cell;width:20px'>

          <div style="width:20px;height:20px;background-color:#ff0a0a"></div>

        </div>

        <div style='display: table-cell'>

            Early (10 to 15 Minutes)

        </div>

   </div>  

    <div style='display:table-row'>

        <div style='display: table-cell;width:20px'>

          <div style="width:20px;height:20px;background-color:#5eb102"></div>

        </div>

        <div style='display: table-cell'>

            On time (+-10 Minutes)

        </div>

    </div>  

    <div style='display:table-row'>

        <div style='display: table-cell;width:20px'>

          <div style="width:20px;height:20px;background-color:#ff0a0a"></div>

        </div>

        <div style='display: table-cell'>

            Late (10 to 15 Minutes)

        </div>

    </div>  

    <div style='display:table-row'>

        <div style='display: table-cell;width:20px'>

          <div style="width:20px;height:20px;background-color:#b40000"></div>

        </div>

        <div style='display: table-cell'>

            Too Late (greater than 15 minutes)

        </div>

    </div>    

</div>   

<!-- Star Ratings -->

<p>

  Smiley Rating

<p>   

<img width=15 height=15 src='https://upload.wikimedia.org/wikipedia/commons/thumb/e/ea/Breathe-face-smile.svg/1200px-Breathe-face-smile.svg.png'></img> 

<img width=15 height=15 src='https://upload.wikimedia.org/wikipedia/commons/thumb/e/ea/Breathe-face-smile.svg/1200px-Breathe-face-smile.svg.png'></img> 

<p style="text-align: center; font-size:12px;">Average Too Early </p>

 

 

<img width=15 height=15 src='https://upload.wikimedia.org/wikipedia/commons/thumb/e/ea/Breathe-face-smile.svg/1200px-Breathe-face-smile.svg.png'></img> 

<img width=15 height=15 src='https://upload.wikimedia.org/wikipedia/commons/thumb/e/ea/Breathe-face-smile.svg/1200px-Breathe-face-smile.svg.png'></img> 

<img width=15 height=15 src='https://upload.wikimedia.org/wikipedia/commons/thumb/e/ea/Breathe-face-smile.svg/1200px-Breathe-face-smile.svg.png'></img> 

<p style="text-align: center; font-size:12px;">Average Early </p>

 

<img width=15 height=15 src='https://upload.wikimedia.org/wikipedia/commons/thumb/e/ea/Breathe-face-smile.svg/1200px-Breathe-face-smile.svg.png'></img> 

<img width=15 height=15 src='https://upload.wikimedia.org/wikipedia/commons/thumb/e/ea/Breathe-face-smile.svg/1200px-Breathe-face-smile.svg.png'></img> 

<img width=15 height=15 src='https://upload.wikimedia.org/wikipedia/commons/thumb/e/ea/Breathe-face-smile.svg/1200px-Breathe-face-smile.svg.png'></img> 

<img width=15 height=15 src='https://upload.wikimedia.org/wikipedia/commons/thumb/e/ea/Breathe-face-smile.svg/1200px-Breathe-face-smile.svg.png'></img> 

<p style="text-align: center; font-size:12px;">On Time</p>

 

<img width=15 height=15 src='https://upload.wikimedia.org/wikipedia/commons/thumb/e/ea/Breathe-face-smile.svg/1200px-Breathe-face-smile.svg.png'></img> 

<img width=15 height=15 src='https://upload.wikimedia.org/wikipedia/commons/thumb/e/ea/Breathe-face-smile.svg/1200px-Breathe-face-smile.svg.png'></img> 

<img width=15 height=15 src='https://upload.wikimedia.org/wikipedia/commons/thumb/e/ea/Breathe-face-smile.svg/1200px-Breathe-face-smile.svg.png'></img> 

<p style="text-align: center; font-size:12px;">Average Late</p>

 

<img width=15 height=15 src='https://upload.wikimedia.org/wikipedia/commons/thumb/e/ea/Breathe-face-smile.svg/1200px-Breathe-face-smile.svg.png'></img> 

<img width=15 height=15 src='https://upload.wikimedia.org/wikipedia/commons/thumb/e/ea/Breathe-face-smile.svg/1200px-Breathe-face-smile.svg.png'></img>   

<p style="text-align: center; font-size:12px;">Average Too Late</p>

 

Using JavaScript/HTML to Construct the SCORE CARD Window Chart Noted Above

 

The window called SCORE CARD in the example above has also been customized using a Number Display chart. This window dynamically displays the number of starts based upon a package delivery metric. In this case the contents are dynamic.

 

Graphic04.png

 

To create content like this, delete all the HTML from within the Number Display chart. Then create a new Functional Attribute. In this case we do not use a Functional Attribute to compute a new value, we use it to test a condition and in turn display content in a chart. The following code is used:

 

 

if (rowId === 0) {
    
  // Gets the default stage model
  var stageModel = webpack.StageModel.findStageModel();
  
  // myDisplayChart is a unique namespace. 
  // Can be anything but don't make it nothing (E.g. "filtered" as this will overwrite a default handler)
  stageModel.on("filtered.myDisplayChart", (widget, filter) => {
    
  // Find the Number Display chart to be used to display results. 
  // We need the crossfilter group
  var numberDisplay = stageModel.widgets.find ( (widget) => {
    return widget.type === "number" && widget.title === "Score Card";
    // Score Card is the name of the target Number Display chart.
    // It uses the variable defined within it for the calculations.
    });
    
    var group = numberDisplay.getGroup();
    var chart = numberDisplay.getChart();
   
    if (group && chart) {          
      
      // chart.html({ some: "Complete override of the number display definition." });
      // chart.on("postRedraw", () => {
      // Contains basic info: counter, nanCount, and sum.
      var groupValue = group.value();
      var recordCount = stageModel.dataset.length;
      var average = groupValue.sum / groupValue.counter;
      var numSmiles = "<img width=30 height=30 src='https://upload.wikimedia.org/wikipedia/commons/thumb/e/ea/Breathe-face-smile.svg/1200px-Breathe-face-smile.svg.png'></img>"
      var greeting;
      
      if (average < -15.0) {
        greeting = numSmiles + numSmiles;
      } 
      else if ((average >= -15.0)  && (average < -10.0)) {
        greeting = numSmiles + numSmiles + numSmiles;
      }
      else if ((average >= -10.0)  && (average < 10.0)) {
        greeting = numSmiles + numSmiles + numSmiles + numSmiles;
      }
      else if ((average >= 10.0)  && (average < 15.0)) {
        greeting = numSmiles + numSmiles + numSmiles;
      }
      else {
        greeting = numSmiles + numSmiles;
      }
        
      // Build HTML for Display in in the Number Display chart
      greeting = "<div> <h2 style='text-align:center;'>" + greeting + " Example Smiley Rating " + greeting + "</h2></div>"

      // Case of 1 Feature, No Features, or Some Features
      chart.html({
        one: greeting,
        none: greeting,
        some: greeting
      })
    }
  })
}

Hope this helps.

 

Frequent Contributor
Posts: 107
Registered: ‎10-16-2015

Re: Customizing Feature Analyser Panel

Hi Robert,

 

This API is for the class Analyzer, but how do I obtain a handle to this Analyzer class? In the custom panel I only have access to gsp (documentation anywhere?) So how do I get from gsp to the Analyzer object?

Highlighted
Staff
Posts: 13
Registered: ‎04-04-2018

Re: Customizing Feature Analyser Panel

Hello,

 

The Analyzer class is accessible from Analyzer only. One of the most common usages is accessing Analyzer API from a functional attribute.

 

We do have some API that works with GSP. This API is documented here: https://hexagongeospatial.fluidtopics.net/reader/wN5CnRwedKFavrKR9GWISQ/oFT3u8ov6XujFD1LxXDbbg

 

However, picking one from the other depends on the use-case. What are you trying to do?

 

Do you need immediate support?
Please submit a Ticket through our
Development Ticket Portal.