Configuring Mango SVG Gauge Indicators and Elements

Mango SVG gauge data follows a short path: a data point updates an Angular scope object, the page directive evaluates the binding, ma-selector locates an existing node in the imported SVG, and the browser renders the resulting attribute or style. When movement works but element creation fails, follow that path and identify whether the operation modifies an existing SVG node or attempts to insert a new one.

How does page data reach an imported SVG?

The SVG file supplies the document structure. For example, ng-include="'/modules/mangoUI/web/dev/img/Bar_Gauge_v2.svg'" loads the gauge, while ma-selector="#Arrow" targets the element whose SVG ID is Arrow. The selector element in the page acts as a configuration bridge; it is not itself the triangle.

The complete path is:

1. ma-get-point-value reads a Mango data point into a scope object such as breaker1.
2. An Angular expression reads breaker1.value or another scope property.
3. ma-selector finds an existing SVG element such as #Arrow or #Breaker1.
4. The binding changes an SVG attribute, CSS style, class, or text value.
5. The browser recomputes the affected geometry and paints the SVG.

Start with document structure before debugging bindings. Confirm that the included file loaded, the target ID exists exactly once, and the selector reaches that node. A valid data value cannot move an element that was never imported or whose ID does not match.

Which SVG manipulation approach fits the operation?

For a gauge indicator, use a transform. For a changing population of site objects, place a repeatable SVG template inside the SVG or render separate small SVGs from the page. Select between those two creation approaches based on whether the objects must share the site SVG's coordinate system.

Why is transform preferable for the gauge triangle?

A polygon stores its geometry in the points attribute. The triangle points="72,114 2,149 2,79" contains three coordinate pairs. Recomputing those six values for every process change mixes shape definition with position control and creates more binding work.

The attempted expression ng-style="{'points': '72,114 2,149 2,79'}" treats points as a CSS style. Polygon points are SVG geometry data rather than a CSS presentation property in this use, so that path does not reposition the triangle. A transform operates on the completed shape:

<div ma-selector="#Arrow" transform="translate(30)"></div>

Here, translate(30) moves the selected element 30 coordinate units on the x-axis and leaves its y displacement at zero. The more elaborate confirmed syntax also accepts chained transforms:

<div ma-selector="#Arrow"
     transform="translate(30) rotate(45 50 50)"></div>

Transform order matters because each operation changes the coordinate system used by the next operation. A sliding gauge does not require rotation, so keep only the translation. Preserve the original polygon points as the triangle's local shape definition.

How should the indicator movement be configured?

1. Give the triangle a stable ID in the source SVG, such as Arrow. IDs used by ma-selector must remain unchanged when the graphic is edited or exported.
2. Load the source through ma-svg and ng-include.
3. Add a selector for #Arrow. First apply a fixed translation to prove the DOM path and coordinate direction.
4. Replace the fixed displacement with an Angular expression derived from the process value. Keep the engineering-unit-to-position calculation separate from the polygon's vertex list.
5. Apply color independently with fill. Position, shape, and appearance then remain separate controls.
6. Test the lower limit, midpoint, and upper limit. Confirm that the triangle remains aligned with the gauge scale and does not leave the intended travel range.

A binary symbol can switch between known positions with the demonstrated conditional pattern:

<div ma-selector="#Breaker1"
     ng-style="{transform: 'translateX(' +
       (breaker1.value ? 0 : 30) + 'px)'}">
</div>

<div ma-selector="#Breaker3"
     ng-style="{transform: 'translateY(' +
       (breaker3.value ? 0 : -30) + 'px)'}">
</div>

The first binding selects either 0 or 30 pixels on the x-axis. The second selects either 0 or -30 pixels on the y-axis. For an analog gauge, substitute a calculated displacement for the conditional result, using the SVG scale's measured start and end positions.

How can components be created dynamically?

ma-selector requires a target already present in the imported SVG. Placing <text> directly between the opening and closing ma-svg tags does not add that text node to the included SVG document in this arrangement. Define the SVG primitive in the SVG file, then let Angular repeat or update it.

A confirmed pattern places ng-repeat on a native SVG element:

<svg viewBox="0 0 240 80"
     xmlns="http://www.w3.org/2000/svg">
  <text x="{{$index*95}}" y="25"
        class="Rrrrr"
        ng-repeat="item in seedText">{{item}}</text>
</svg>

With seedText=['foo','bar'], $index*95 places the first item at x=0 and the second at x=95. For site sensors, the repeated object should carry the information needed to render each instance: display value, position, state, and any selector-independent styling. When position reflects a physical site layout rather than a regular row, store coordinates with each sensor instead of deriving them from $index.

This approach changes maintenance ownership. A graphics editor may rewrite or remove Angular attributes during export. Preserve a controlled SVG template or establish an export step that retains ng-repeat and bindings. If the website designer must keep the site SVG free of application code, repeat independent small SVG components on top of the site graphic from the page. That approach keeps application markup outside the designer's file but requires page-level positioning and alignment.

How should values, colors, and classes be bound?

Use one binding mechanism per concern. Read the data point into scope, bind geometry through a transform, and bind visual state through fill or ng-class. The demonstrated data-point path is:

<ma-get-point-value
  point-xid="DP_TestData_Breaker1"
  point="breaker1">
</ma-get-point-value>

The scope object then drives the selected SVG node. A class can change descendant strokes without rewriting each child:

<div ma-selector="#Breaker1Power"
     ng-class="{'power-off':
       !breaker1.value &&
       (!breaker3.value || !breaker2.value)}">
</div>

<style>
.power-off > * { stroke: green; }
</style>

The expression applies power-off when breaker1.value is false and either breaker3.value or breaker2.value is also false. The child selector > * applies the stroke to immediate descendants of the selected group. For text, use ng-bind against an existing node such as #grump; SVG text color uses fill, not the HTML color property.

Why does a binding appear to run without changing the graphic?

Verify from the bottom of the path upward: SVG loaded, target node present, selector matched, scope value current, expression evaluated, attribute or class written, and geometry repainted.

FAQ