sym-eventmap-config.html

<div class="c-config-content" style="width: 85%; margin: 15px 0 15px 15px;">
    &nbsp;Template filter<br />
    <select ng-model="config.TemplateSelected"
            class="config-option-list">
        <option ng-repeat="t in runtimeData.obtainTemplates()">{{t}}</option>
   </select>
</div>

<div class="c-config-content" style="width: 85%; margin: 15px 0 15px 15px;">
    &nbsp;Cell size attribute<br />
    <select ng-model="config.AttributeSelected"
            ng-options="attribute for attribute in runtimeData.obtainSizeableAttributes()"
            class="config-option-list">
    </select>
</div>

<div class="c-config-content" style="width: 85%; margin: 15px 0 15px 15px;">
    &nbsp;Cell color attribute<br />
    <select ng-model="config.ColorAttributeSelected"
            ng-options="attribute for attribute in runtimeData.obtainAttributes()"
            class="config-option-list">
    </select>
</div>

<div class="c-side-pane t-toolbar">
    <span style="color:#fff; margin-left:15px">About</span>
</div>

<div style="width: 85%; margin-top: 10px; margin-left:15px;">
    <p style="margin-top: 10px">
        Event Map symbol for visualizing Event Frames.  By default the cell size
        is proportional to the Event Frame duration and the cell color indicates the Event
        Frame template.  If a template filter is applied then attributes can be selected to control
        the size and color of the cell.
    </p>
    <p style="margin-top: 10px">
        Hovering over a cell will show summary data about the Event Frame.  Clicking on a cell
        displays attribute values in a table.
    </p>
    <p style="margin-top: 10px">
        This symbol was created by Exele, a PI partner specializing in PI products, services,
        and PI based environmental monitoring.
    </p>
    <p style="margin-top: 10px">
        <a href="www.exele.com">www.exele.com</a>
    </p>
</div>