Change colour depending on two variables (SVG custom dashboard)

[silvia]

Hi,

I'm working on a custom dashboard (version 3.6). I have two Boolean variables (let's call them A and B). The different combinations of A and B define the colour of a box, as follows:

• A = 0, B = 0 --> GREY
• A = 0, B = 1 --> RED
• A = 1, B = 0 --> BLUE
• A = 1, B = 1 --> GREEN

How can I implement this? I've checked the SVG examples but they are only checking the state of one variable, not two.

I appreciate any suggestions.

Thanks :)

Silvia

[Jared Wiltshire]

@silvia just to clarify, are you using the UI module? You should not be using the dashboards module in Mango v3.

Assuming you are using the <ma-svg> component, you can do something like this

<ma-svg ng-include="'/myImage.svg'">
    <div ma-selector="#my-box" ng-class="{'grey-fill': !pointA.value && !pointB.value, 'red-fill': !pointA.value && pointB.value, 'blue-fill': pointA.value && !pointB.value, 'green-fill': pointA.value && pointB.value}"></div>
</ma-svg>

<style>
.grey-fill {
  fill: grey;
}
.red-fill {
  fill: red;
}
.blue-fill {
  fill: blue;
}
.green-fill {
  fill: green;
}
</style>

Or an alternative way of doing things which might be nicer if you use the same point values to style multiple elements in your SVG.

<ma-svg ng-include="'/myImage.svg'" ng-class="{'point-a': pointA.value, 'point-b': pointB.value}">
</ma-svg>

<style>
#my-box {
  fill: grey;
}
.point-b #my-box {
  fill: red;
}
.point-a #my-box {
  fill: blue;
}
.point-a.point-b #my-box {
  fill: green;
}
</style>

[silvia]

Hi Jared,

Thanks for your answer, I implemented the first option and it works great :)
I'm not using the UI module, I'm creating my dashboard through the 'Edit pages', as it offers much more flexibility than through the dashboard designer. Sorry for mixing it up, I'm new at Mango.

Now I need to display different text (within the same SVG file) depending on the combination of values...

I've tried the same sort of structure:

<div ma-selector="#meterState001 tspan" ng-bind="{'Empty': !plug1.value && !switch1.value, 'Error': !plug1.value && switch1.value, 'PluggedIn': plug1.value && !switch1.value, 'Charging': plug1.value && switch1.value}"></div>

But this displays the ng-bind as a string, and not 'Empty', 'Error', 'Plugged In' or 'Charging'. Different combinations of curly brackets and quotation marks result in it not working at all.

I've also tried ternary operators:

{plug1.value ? (switch1.value ? 'Charging' : 'Plugged In') : (switch1.value ? 'Error' : 'Empty')

Which doesn't work.

And ng-if:

<div ma-selector="#meterState001 tspan" ng-if="(plug1.value == false) and (switch1.value == false)" ng-bind="Empty"></div>
<div ma-selector="#meterState001 tspan" ng-if="(plug1.value == false) and (switch1.value == true)" ng-bind="'Error'"></div>
<div ma-selector="#meterState001 tspan" ng-if="(plug1.value == true) and (switch1.value == false)" ng-bind="'Plugged In'"></div>
<div ma-selector="#meterState001 tspan" ng-if="(plug1.value == true) and (switch1.value == true)" ng-bind="'Charging'"></div>

But it only reads the last ng-if and it ignores the others.

I've also tried ng-switch:

<div ng-switch on="switch1.value">
    <div ng-switch-when="true"> 
        <span ma-selector="meterState001 tspan" ng-bind="'Charging'"></span>
    </div>
    <div ng-switch-when="false">
        <span ma-selector="meterState001 tspan" ng-bind="'Plugged In'"></span>
    </div>
</div>

But no more luck than with the others.

I've been researching on the Internet but I can't find anything that will work.

I'd appreciate any thoughts, as this is starting to drive me slightly insane!

Thanks! :)

Silvia

[Jared Wiltshire]

@silvia said in Change colour depending on two variables (SVG custom dashboard):

I'd appreciate any thoughts, as this is starting to drive me slightly insane!

Haha I know the feeling.

@silvia said in Change colour depending on two variables (SVG custom dashboard):

I'm not using the UI module, I'm creating my dashboard through the 'Edit pages', as it offers much more flexibility than through the dashboard designer.

No problems there, the dashboard designer makes it easy to edit attributes and lay things out but markup is more powerful for sure. We had an old module called dashboards prior to v3,x which was replaced by the mangoUI module in v3.x I just wanted to make sure that you weren't using the old module. It sounds like you are using the mangoUI module, so all good.

@silvia said in Change colour depending on two variables (SVG custom dashboard):

I've tried the same sort of structure:

So that syntax, where the expression evaluates to an object is specific to the ngClass directive. The ngBind directive's expression should evaluate to a string.

@silvia said in Change colour depending on two variables (SVG custom dashboard):

I've also tried ternary operators:

Ternary operators should work, the only issue I can see with this is that there is a curly brace at the start of the expression.

Your code should look like

<ma-svg>
    <div ma-selector="#meterState001 tspan" ng-bind="plug1.value ? (switch1.value ? 'Charging' : 'Plugged In') : (switch1.value ? 'Error' : 'Empty')"></div>
</ma-svg>

@silvia said in Change colour depending on two variables (SVG custom dashboard):

But it only reads the last ng-if and it ignores the others.

Yep, it will read each in order and replace the ng-if attribute on the svg element.

@silvia said in Change colour depending on two variables (SVG custom dashboard):

I've also tried ng-switch:

Yep, this also wont work. The ma-switch directive expects a list of elements with ma-selector attributes.

[silvia]

@Jared-Wiltshire said in Change colour depending on two variables (SVG custom dashboard):

Ternary operators should work, the only issue I can see with this is that there is a curly brace at the start of the expression.
Your code should look like

<ma-svg>
    <div ma-selector="#meterState001 tspan" ng-bind="plug1.value ? (switch1.value ? 'Charging' : 'Plugged In') : (switch1.value ? 'Error' : 'Empty')"></div>
 </ma-svg>

You are a star @Jared-Wiltshire!!! :) Thanks so so much! :)

I didn't know ng-bind only works with strings.