Changing class based on data point value

richard.mortimer

Hi,

I have a table cell that I want to change the class for based on the value of a data point.

I followed the example in the Examples -> Custom pages -> Editing code page, which seems to do exactly what I need, but could only display the value, but not change the class. Currently I have:

<style> 
  .good { background-color: green; }
  .bad { background-color: red; }
</style>

And in the table cell itself:

<td class="mid" ng-class="{'good':DP_684160.value < 100,'bad':DP_684160.value > 99}"><ma-point-value point-xid="DP_684160"></ma-point-value></td>

This is diplaying the value (outside the table) for the point, but not changing the class (viewing the output code shows me the 'ng-class' code verbatim) - are there any further examples I can view, or any documentation I can read regarding this?

Thanks

Richard

CraigWeb

Hi Richard

I dont see any problem with <td class="mid" ng-class="{'good':DP_684160.value < 100,'bad':DP_684160.value > 99}">.
You can confirm this but changing the logic to a true or false:
ng-class="{'good':true,'bad':false}"
Edit:

<ma-point-value> does not assign a point object in side your pages scope. It is a component to have a live view of your point.

use <ma-get-point-value point-xid="DP_684160" point="myPoint"></ma-get-point-value> if you would like a variable in you pages scope that you can do logic with. You can then use myPoint in your logic.

richard.mortimer

@craigweb said in Changing class based on data point value:

use <ma-get-point-value point-xid="DP_684160" point="myPoint"></ma-get-point-value> if you would like a variable in you pages scope that you can do logic with. You can then use myPoint in your logic.

Thanks - the ma-get-point-value was the trick to getting it work ...

Cheers

Richard

Jared Wiltshire

Side note, you shouldn't need two classes. Add a class to the table to make life easier e.g.

table.my-table td {
  color: green;
}
table.my-table td.bad {
  color: red;
}

richard.mortimer

@jared-wiltshire said in Changing class based on data point value:

Side note, you shouldn't need two classes. Add a class to the table to make life easier e.g.
table.my-table td {
  color: green;
}
table.my-table td.bad {
  color: red;
}

Cheers for that - I was actually following the example in the "Help -> Custom pages" example, but I ended up using the default table cell, as well as a "warn" class and "bad" class for charge on a battery where the state is less than 50% and less than 25% respectively.

Is there any way to paramatize the break points? Is that where I use the ng-init command?

Cheers

Richard

Jared Wiltshire

@richard-mortimer said in Changing class based on data point value:

Is there any way to paramatize the break points? Is that where I use the ng-init command?

I'm sorry, I dont understand what you mean. I'll need some more details about what you are trying to achieve.

richard.mortimer

@jared-wiltshire said in Changing class based on data point value:

@richard-mortimer said in Changing class based on data point value:

Is there any way to paramatize the break points? Is that where I use the ng-init command?

I'm sorry, I dont understand what you mean. I'll need some more details about what you are trying to achieve.

Oh, I figured it out, but I'll put here what I did, in case there is a better way to do it.

Because I have multiple replicated graphs on the page, I used the ng-init command in my main div thus:

<div id="bg" class="ma-designer-root" style="width: 100%; height: 100%; position: relative;" id=" ... " ng-init="warnBattery=50;badBattery=25;fuelTrend=14">

So when it gets to reading the values; the table cell reads ..

<td class="mid" ng-class="{'warn': battery1.value < warnBattery, 'bad': battery1.value < badBattery}"><ma-point-value

So these values warnBattery and badBattery can be set page wide - the next challenge is reading some of these 'trigger' values from the MangoES devices for things like fuel tank levels - as some of our devices are geographically dispersed and have differing levels of alerts.

Please let mer know if there is a better way of doing it.

Cheers

Richard

richard.mortimer

@craigweb said in Changing class based on data point value:

use <ma-get-point-value point-xid="DP_684160" point="myPoint"></ma-get-point-value> if you would like a variable in you pages scope that you can do logic with. You can then use myPoint in your logic.

Is it possible to put an AngularJS array element inside this?

Where the array includes the datapoint-xid as:

{ ... 'BattCharge': 'DP_684160', ... }

They all seem to work in an ma-point-value, but not inside a ma-get-point-value

<ma-point-value point-xid="{{Objects.BattCharge}}"></ma-point-value>

this works

<ma-get-point-value point-xid="{{Objects.BattCharge}}" point="battery"></ma-get-point-value>

this doesn't work

Thanks

Richard

CraigWeb

Hi Richard

IMO the way you are going, you would be better off looking into making dynamic watchlists and use the <ma-watch-list-get to bring the watchlist data into your page. You will then have an array of objects called designer.points which contains all the points in the watchlist that you have created.

you can then use the angularjs filter pipe to narrow down to the point you want to work with. eg:
<ma-point-value point="designer.points | filter:{name :'Battery'} | first"></ma-point-value>
The | first pipe will select the first object in the array if multiple points make it through the filter.

<ma-get-point-value> does work when giving it an object. I tested in the play area as can be seen below. One thing to remember is that whatever does between the {{}} gets evaluated

<p ng-init="object = {point:'DP_dfcc29bd-e057-4cee-ab0c-f77e0847c17f'}">
    The point value is <ma-point-value point="myPoint"></ma-point-value>
</p>

<!-- Get a point (and value) using its XID and assign it to an output variable "myPoint" -->
<ma-get-point-value point-xid="{{object.point}}" point="myPoint"></ma-get-point-value>

<p>
    The point name is "{{myPoint.name}}" and its value is {{myPoint.renderedValue}}.
</p>
{{object.point}}
{{myPoint}}

Jared Wiltshire

@richard-mortimer said in Changing class based on data point value:

So these values warnBattery and badBattery can be set page wide - the next challenge is reading some of these 'trigger' values from the MangoES devices for things like fuel tank levels - as some of our devices are geographically dispersed and have differing levels of alerts.

I would suggest looking into the JSON store to store the warning levels / limits. You could store these per site ID and create a simple configuration page to set the limits for each site.

richard.mortimer

@craigweb said in Changing class based on data point value:

Hi Richard

I tested in the play area as can be seen below. One thing to remember is that whatever does between the {{}} gets evaluated

Ok, I figured out what I was doing wrong here, and it seems that when you an Angular directive inside a table row; the translation must occur inside a table element, so this won't work:

            <tr data-ng-repeat="Objects in DataPoints">
                <!-- calculations -->
                <ma-point-statistics point-xid="{{ Objects.FuelLevel }}" from="time | maMoment:'subtract':7:'days'" to="time" statistics="fuelData"></ma-point-statistics>
                <ma-point-values point-xid="{{ Objects.FuelLevel }}" values="fuelValues" from="time | maMoment:'subtract':fuelTrend:'days'" to="time" rollup="AVERAGE" rollup-interval="1 DAYS"></ma-point-values>
                <ma-get-point-value point-xid="{{ Objects.BattCharge }}" point="battery"></ma-get-point-value>-{{ Objects.BattCharge }}-{{ battery }}-
                <!-- table elements start -->
                <td>{{ Objects.ID }} - <a href="{{ Objects.URL }}">{{ Objects.Location }}</a></td><!-- Location -->

But this will work:

            <tr data-ng-repeat="Objects in DataPoints">
                <td>{{ Objects.ID }} - <a href="{{ Objects.URL }}">{{ Objects.Location }}</a>
                    <!-- calculations -->
                    <ma-point-statistics point-xid="{{ Objects.FuelLevel }}" from="time | maMoment:'subtract':7:'days'" to="time" statistics="fuelData"></ma-point-statistics>
                    <ma-point-values point-xid="{{ Objects.FuelLevel }}" values="fuelValues" from="time | maMoment:'subtract':fuelTrend:'days'" to="time" rollup="AVERAGE" rollup-interval="1 DAYS"></ma-point-values>
                    <ma-get-point-value point-xid="{{ Objects.BattCharge }}" point="battery"></ma-get-point-value>
                </td><!-- Location -->
(etc ...)

Oddly, if it's not inside the ng-repeat statement, the evaluation works outside the table element, which is the 'gotcha' that got me .... hope it helps someone in the future!!

Cheers

Richard

(I haven't missed the other points, still working through them, and appreciating the input!!)

Jared Wiltshire

@richard-mortimer its not valid to put text directly inside a <tr> as in your first example. That's probably why you were seeing strange behavior. Its also possible that the browser doesn't like custom elements (<ma-*>) there either. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tr under "Permitted content"

richard.mortimer

@jared-wiltshire - cheers for that ... I'm still within the great leap of faith from PHP to Angular ...

Richard