Thanks for the suggestions, I ultimately went a different route with this, and bound a slider to the variable that was previously at the top of the page (which was 30 in the first instance) and allowed the user to select how many days worth of data they wanted to see:

The text box is also editable, so they can manually type a number in, if they wish (the '500' example at the end). I did use some of the styles suggested to modify the axes to a different grey to lessen it's impact upon the page, but it also meant that the X-axes date was relevant again, so the requirement to remove it changed (let's just call it 'agile development :). The slider modifies about 10 graphs across the page and works quite fast.

Cheers

Richard

My contract comes to an end this week, so I (potentially) won't be working in the Mango space after that - just wanted to say "thanks" to all that helped me through my journey. Wishing you all the best ...

Richard

I understand your sentiment @phildunlap - my old boss (and then bandmate) used to say something along the lines of "standing on the shoulders of giants you can see for miles" - and I wanted to express that I'm grateful for those who have loaned me their shoulders to stand on, because it doesn't always happen ...

Cheers

Richard

My contract comes to an end this week, so I (potentially) won't be working in the Mango space after that - just wanted to say "thanks" to all that helped me through my journey. Wishing you all the best ...

Richard

@richard-mortimer said in Pagination for a page:

@craigweb said in Pagination for a page:

Hi Richard

I believe, you do not need your query string function as there is already a component for this. You will need to register you page with the URL of ?page

 <ma-state-params on-change="PageStart = $stateParams.page; stateParams = $stateParams" update- 
 params="updateParams"></ma-state-params>

Here is a help document that explains how to use it with a watchlist:
https://help.infiniteautomation.com/linking-to-dynamic-pages

Thanks for that, the PageStart variable is read in as what it should be, but seems to be overwritten when I'm reading in the Settings parameters (no matter where I put it on the page), so even when this is at the bottom of the page:

<ma-state-params on-change="Settings.PageStart = $stateParams.page; stateParams = $stateParams" update-params="updateParams"></ma-state-params>

And this is at the top:

<ma-json-store xid="PageConfigXID" value="Settings"></ma-json-store><!-- page configuration data -->

The value goes from 2 to 0 with this URL: http://mango2:8080/ui/richard-overview-angular?page=2

Any idea how to make the value stick ... ?

Scratch that - I've used two repeats - if the PageStart value doesn't exists - it displays the page as normal, but if it does exist, it does sends it to the second repeat and uses that value for the calculation of where to start the page. Kinda goes against the DRY prinicipal, but works effectively ....

So, in the first instance:

<div ng-if="!PageStart" class="table" ng-repeat="site in sites.sites | limitTo: Settings.PageSize : Settings.PageStart">

And in the second:

<div ng-if="PageStart" class="table" ng-repeat="site in sites.sites | limitTo: Settings.PageSize : (( PageStart - 1 ) * Settings.PageSize)">

Cheers

Richard

@craigweb said in Pagination for a page:

Hi Richard

I believe, you do not need your query string function as there is already a component for this. You will need to register you page with the URL of ?page

 <ma-state-params on-change="PageStart = $stateParams.page; stateParams = $stateParams" update- 
 params="updateParams"></ma-state-params>

Here is a help document that explains how to use it with a watchlist:
https://help.infiniteautomation.com/linking-to-dynamic-pages

Thanks for that, the PageStart variable is read in as what it should be, but seems to be overwritten when I'm reading in the Settings parameters (no matter where I put it on the page), so even when this is at the bottom of the page:

<ma-state-params on-change="Settings.PageStart = $stateParams.page; stateParams = $stateParams" update-params="updateParams"></ma-state-params>

And this is at the top:

<ma-json-store xid="PageConfigXID" value="Settings"></ma-json-store><!-- page configuration data -->

The value goes from 2 to 0 with this URL: http://mango2:8080/ui/richard-overview-angular?page=2

Any idea how to make the value stick ... ?

Cheers

Richard

A new requirement was added for the pagination; basically it needs to be callable by a query string added to the end of the URL called; so for example it wants to be http://mango_display_page?page=1 to show page 1; I've already got my JSON store sending through the start page as zero (called Settings.PageStart), which is assigned by <ma-json-store xid="PageConfigXID" value="Settings"></ma-json-store> - can I overwrite this value?

I can grab the value and place it into a JavaScript function like this:

var QS = function () {
  var query_string = {};
  var query = window.location.search.substring(1);
  var vars = query.split("&");
  for (var i=0;i<vars.length;i++) {
    var pair = vars*.split("=");
    if (typeof query_string[pair[0]] === "undefined") {
      query_string[pair[0]] = pair[1];
    } else if (typeof query_string[pair[0]] === "string") {
      var arr = [ query_string[pair[0]], pair[1] ];
      query_string[pair[0]] = arr;
    } else {
      query_string[pair[0]].push(pair[1]);
    }
  } 
    return query_string;
} ();

alert("x");
//alert("x= " + Settings);
//alert(QS.site);
alert(QS.page);
</script>

How would I assign that to the AngularJS variable?

Thanks

Richard

@richard-mortimer said in Disable an amChart series upon load:

I was asked to remove one of the series plot from the graph

I was asked to add them back, so glad I asked the question, now it's fixed!!

Cheers

Richard

I'm no expert on this, but when I've had difficulties with sliders, I've bound via the ng-model and added the gettersetter options thus:

ng-model="Settings.TrendSet" ng-model-options="{getterSetter:true}"

Hope that helps!

Richard

@mattfox said in maJsonStore (JSON store):

@richard-mortimer I believe when you did | number:1 and | number:0 was more than sufficient. alternatively just use point.value.toFixed(1) and point.value.toFixed() repectively

Thanks - the colon in the | number:1 was interfering with the ternary operator and getting it confused; so, while I could pipe it through, I couldn't modify the final number based on which direction it took - the point.value.toFixed(1) did the correct thing for me ...

Cheers

Richard

@craigweb said in maJsonStore (JSON store):

<span ng-repeat="point in points">
    <ma-get-point-value point-xid="{{ point.xid }}" point="output"></ma-get-point-value>
    <div>{{output.value >1000? output.value/1000:output.value}}{{output.value >1000?'kW':'W'}}</div>
</div>

Sorry, I missed this reply - you are correct it's inside a larger loop, which iterates through each device - I'm going to try the ternary operator and see how that goes ...

Any idea how to put the number filter in there? The kW was to one decimal place, and the W was to 0 ...

Cheers

Richard

@jared-wiltshire said in maJsonStore (JSON store):

Two things -

• Use track by in your ng-repeat expression so that Angular can correlate which points correspond to each span element when the points change.
• Just pass the point to the <ma-get-point-value> component instead of retrieving it by XID again

Thanks for that - I've made the changes and will keep an eye on it; unfortunately it only seems to happen at random times which makes it one of those "fun" bugs to iron out ... but I'm pretty confident that if you're pretty confident, it will probably be the right solution! :)

Cheers!!

Richard